/* Réfraction et dispersion : style repris du labo de dosage, agrandi pour le vidéoprojecteur. */
:root {
    --bg-color: #f4f4f0;
    --text-color: #000000;
    --border-color: #000000;
    --brand-blue: #003366;
    --bg-panel: #ffffff;
    --bg-elevated: #e4e4df;
    --text-muted: #4b5563;
    --canvas-grid: #e2e2dc;
    --canvas-ink: #000000;
    --canvas-muted: #4b5563;
    --disk-bg: #fbfaf4;
    --laser: #e3001b;
    --ang1: #1d4ed8;          /* i₁ : bleu */
    --ang1r: #7c3aed;         /* i′₁ : violet */
    --ang2: #c2410c;          /* i₂ : orange (paire bleu/orange, lisible par les daltoniens) */
    --wrong: #dc2626;
    --crit: #b45309;
    --curve-color: #1d4ed8;
    --fit-color: #c2410c;
    --light-ray: #d97706;
    --violet: #6d28d9;
    --scene-bg: #0b0f17;      /* le prisme se regarde en salle obscure, dans les deux thèmes */
    --scene-ink: #e6e8eb;
    --scene-muted: #a3adbb;
    --graph-font: 14;
    --curve-width: 2.5;
    --grid-line: 1px solid var(--border-color);
    --font-mono: 'Courier New', Courier, monospace;
    --font-sans: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    --col-controls: 18.5rem;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
}

/* Thème sombre (contrat portail : data-theme + localStorage 'refraction-theme') */
:root[data-theme="dark"] {
    --bg-color: #12151c;
    --text-color: #e6e8eb;
    --border-color: #3d4654;
    --brand-blue: #1a4f8a;
    --bg-panel: #161a22;
    --bg-elevated: #1f2530;
    --text-muted: #a3adbb;
    --canvas-grid: #29303c;
    --canvas-ink: #e6e8eb;
    --canvas-muted: #a3adbb;
    --disk-bg: #1a1f29;
    --laser: #ff4545;
    --ang1: #7cb4ff;
    --ang1r: #c4b5fd;
    --ang2: #fdba74;
    --wrong: #f87171;
    --crit: #fbbf24;
    --curve-color: #7cb4ff;
    --fit-color: #fdba74;
    --light-ray: #fbbf24;
    --violet: #a78bfa;
    --scene-bg: #070a10;
}

/* Mode projection : tout ce qui est en rem grossit, les canvas lisent --graph-font et --curve-width */
:root[data-projection="on"] {
    font-size: 20px;
    --graph-font: 19;
    --curve-width: 4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body, .app-container, .canvas-container, .panel, button, input, select {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-sans);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border: 2px solid var(--border-color);
    margin: var(--spacing-xs);
}

/* EN-TÊTE */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    border-bottom: var(--grid-line);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 96px;
    background: var(--bg-color);
}

.brand h1 {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.highlight { background: var(--brand-blue); color: #fff; padding: 0 4px; }

.main-nav { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; }
.nav-sep { width: 10px; }

.nav-btn, .theme-toggle {
    min-height: 44px;
    color: var(--text-color);
    background: transparent;
    border: 1px solid transparent;
    font: 700 0.95rem/1.2 var(--font-sans);
    cursor: pointer;
    padding: 6px 12px;
}
.nav-btn:hover { text-decoration: underline; }
.nav-btn.active { border: var(--grid-line); background: var(--brand-blue); color: #fff; }

.theme-toggle {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.theme-toggle:hover { background: var(--text-color); color: var(--bg-color); }
.theme-toggle[aria-pressed="true"] { background: var(--brand-blue); color: #fff; }

/* ONGLETS ET GRILLES */
.tab-content { display: none; flex: 1; min-height: 0; overflow: hidden; }

.tab-content.layout-2.active {
    display: grid;
    grid-template-columns: var(--col-controls) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}
.layout-2 .control-panel { grid-column: 1; grid-row: 1 / 3; }
.layout-2 .banner { grid-column: 2; grid-row: 1; }
.layout-2 .main-panel { grid-column: 2; grid-row: 2; min-height: 0; border-right: none; }

.tab-content.layout-3.active {
    display: grid;
    grid-template-columns: var(--col-controls) minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-rows: minmax(0, 1fr);
}
.layout-3 .graph-panel { border-right: none; }

.tab-content.active.config-hidden { grid-template-columns: 2.6rem minmax(0, 1fr); }
.tab-content.layout-3.active.config-hidden { grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1.25fr); }

.panel {
    display: flex;
    flex-direction: column;
    border-right: var(--grid-line);
    min-width: 0;
    min-height: 0;
    background: var(--bg-color);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding: 6px var(--spacing-sm);
    border-bottom: var(--grid-line);
    background: var(--brand-blue);
    color: #fff;
    min-height: 44px;
}

.panel-header h2 {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Panneau des réglages repliable */
.collapse-btn {
    flex: none;
    width: 2rem;
    height: 2rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 1.4rem/1 var(--font-sans);
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
}
.collapse-btn:hover { background: rgba(255, 255, 255, 0.18); }

.config-hidden .controls-grid { display: none; }
.config-hidden .control-panel .panel-header {
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: var(--spacing-sm) 0;
    cursor: pointer;
    border-bottom: none;
}
.config-hidden .control-panel .panel-header h2 {
    order: 2;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-top: var(--spacing-sm);
}
.config-hidden .control-panel .collapse-btn { min-width: 0; width: 2rem; }

.controls-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
    overflow-y: auto;
}

/* FORMULAIRES */
.input-group { display: flex; flex-direction: column; gap: 4px; }
.params-form { display: flex; flex-direction: column; gap: var(--spacing-md); }

.input-group label, .group-label {
    font-size: 0.85rem;
    font-weight: 700;
}

select {
    min-height: 44px;
    border: var(--grid-line);
    background-color: var(--bg-panel);
    color: var(--text-color);
    padding: 6px 1.8em 6px 8px;
    font: 600 1rem var(--font-sans);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right .7em top 50%;
    background-size: .65em auto;
}
:root[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e6e8eb%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%3E%3C%2Fsvg%3E");
}

/* Curseurs : pouce large pour le TNI */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 44px;
    background: transparent;
    cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: var(--text-muted); border: 1px solid var(--border-color); }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 28px;
    width: 22px;
    margin-top: -12px;
    background: var(--brand-blue);
    border: 2px solid var(--bg-panel);
    outline: 1px solid var(--border-color);
}
input[type=range]::-moz-range-track { height: 6px; background: var(--text-muted); border: 1px solid var(--border-color); }
input[type=range]::-moz-range-thumb { height: 26px; width: 20px; border-radius: 0; background: var(--brand-blue); border: 2px solid var(--bg-panel); }

.slider-row { display: flex; align-items: center; gap: 6px; }
.step-btn {
    flex: none;
    min-width: 44px;
    min-height: 44px;
    font: 700 1.3rem/1 var(--font-sans);
    background: var(--bg-panel);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.digital-display {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: right;
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.check input { width: 22px; height: 22px; accent-color: var(--brand-blue); flex: none; }

.btn-wide, .btn-primary, .btn-small {
    min-height: 44px;
    padding: 8px 12px;
    font: 700 0.95rem/1.2 var(--font-sans);
    background: var(--bg-panel);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
}
.btn-wide:hover, .btn-small:hover { background: var(--bg-elevated); }
.btn-wide:disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); font-size: 1.05rem; }
.btn-primary:hover { filter: brightness(1.15); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row > * { flex: 1 1 auto; }

.record-box { display: flex; flex-direction: column; gap: 4px; }
.record-count { font-size: 0.85rem; color: var(--text-muted); min-height: 1em; }

.mystery-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 2px dashed var(--crit);
    background: var(--bg-panel);
    font-size: 1.05rem;
}
.mystery-box[hidden] { display: none; }

.hint { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }

.choice-group { display: flex; flex-wrap: wrap; gap: 4px; }
.choice-group.vertical { flex-direction: column; }
.choice {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 6px 10px;
    font: 700 0.9rem/1.2 var(--font-sans);
    background: var(--bg-panel);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    text-align: left;
}
.choice.active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

.dimmed { opacity: 0.4; pointer-events: none; }

.scene-list { display: flex; flex-direction: column; gap: 4px; }
.scene-btn {
    min-height: 44px;
    padding: 8px 12px;
    text-align: left;
    font: 700 1rem/1.2 var(--font-sans);
    background: var(--bg-panel);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--bg-elevated);
    cursor: pointer;
}
.scene-btn.active { border-left-color: var(--brand-blue); background: var(--bg-elevated); }

/* BANDEAU DE LECTURE (pensé pour le vidéoprojecteur) */
.banner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px var(--spacing-md);
    background: var(--bg-panel);
    border-bottom: var(--grid-line);
    border-left: 8px solid var(--brand-blue);
    min-width: 0;
}
.readouts { display: flex; flex-wrap: wrap; gap: 4px 30px; align-items: flex-end; }
.readout { display: flex; flex-direction: column; min-width: 0; }
.readout .label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}
.readout .value {
    font-size: 1.65rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.readout .value.value-text { font-size: 1.3rem; }
.v-ang1 { color: var(--ang1); }
.v-ang1r { color: var(--ang1r); }
.v-ang2 { color: var(--ang2); }
.v-red { color: var(--laser); }
.v-violet { color: var(--violet); }
.relation { font-size: 1.05rem; line-height: 1.45; }
.relation:empty { display: none; }
.rel-law { font-weight: 800; margin-right: 1.2em; }
.rel-num { margin-right: 1.2em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rel-note { color: var(--text-muted); }

/* ZONES DE DESSIN */
.canvas-container {
    position: relative;
    flex: 1;
    min-height: 200px;
    background: var(--bg-panel);
}
.canvas-container[hidden] { display: none; }
.canvas-container canvas, .mini-disk canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
canvas.grab { cursor: grab; touch-action: none; }
canvas.grab.grabbing { cursor: grabbing; }

.view-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--spacing-md);
    padding: 4px var(--spacing-md);
    border-bottom: var(--grid-line);
    font-size: 0.95rem;
    font-weight: 600;
    background: var(--bg-color);
}
.view-options[hidden] { display: none; }
.view-options label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.view-options input { width: 20px; height: 20px; accent-color: var(--brand-blue); }

/* Boutons segmentés dans les en-têtes bleus */
.seg-group { display: flex; flex-wrap: wrap; gap: 2px; }
.seg {
    min-height: 36px;
    font: 700 0.85rem/1.2 var(--font-sans);
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.seg:hover { background: rgba(255, 255, 255, 0.15); }
.seg.active { background: #fff; color: var(--brand-blue); }
:root[data-theme="dark"] .seg.active { color: #0b1a2e; }

/* VUE MESURES */
.mini-disk {
    position: relative;
    height: 230px;
    flex: none;
    background: var(--bg-panel);
    border: var(--grid-line);
}
.table-wrap {
    container-type: inline-size;
    flex: 1;
    overflow: auto;
    padding: var(--spacing-sm);
    background: var(--bg-panel);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.8rem, 3.1cqi, 1.3rem);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.data-table th, .data-table td { border: 1px solid var(--border-color); padding: 0.35em 0.3em; }
.data-table thead th { background: var(--bg-elevated); position: sticky; top: 0; }
.data-table .tir-cell { font-style: italic; color: var(--text-muted); }
.data-table .col-del { width: 2.4em; }
.row-del {
    min-width: 36px;
    min-height: 36px;
    font: 700 1.1rem/1 var(--font-sans);
    background: transparent;
    color: var(--text-muted);
    border: none;
    cursor: pointer;
}
.row-del:hover { color: var(--wrong); }
.empty-note { color: var(--text-muted); font-size: 1rem; padding: var(--spacing-md); line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.graph-container { margin: 0; }
.fit-readout {
    flex: none;
    padding: 8px var(--spacing-md);
    border-top: var(--grid-line);
    background: var(--bg-panel);
    font-size: 1.05rem;
    line-height: 1.45;
}
.fit-readout:empty { display: none; }
.fit-main { font-size: 1.3rem; }
.fit-note { color: var(--text-muted); font-size: 0.92rem; }

/* PILE VERTICALE SOUS 900 PX */
@media (max-width: 900px) {
    body { height: auto; overflow: auto; }
    .app-container { height: auto; border: none; margin: 0; }
    .main-header { padding-left: 90px; }
    .brand h1 { font-size: 1rem; }
    .tab-content.layout-2.active, .tab-content.layout-3.active,
    .tab-content.active.config-hidden, .tab-content.layout-3.active.config-hidden {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    .panel { border-right: none; border-bottom: var(--grid-line); }
    .config-hidden .control-panel .panel-header { flex-direction: row; }
    .config-hidden .control-panel .panel-header h2 { writing-mode: horizontal-tb; transform: none; margin: 0; }
    .main-panel .canvas-container { min-height: 440px; }
    .graph-panel .canvas-container { min-height: 360px; }
    .table-wrap { max-height: 60vh; }
}

@media (max-width: 480px) {
    .main-header { padding: 40px var(--spacing-sm) var(--spacing-sm); }
    .nav-btn { flex: 1 1 45%; font-size: 0.85rem; }
    .readouts { gap: 2px 18px; }
    .readout .value { font-size: 1.3rem; }
    .relation { font-size: 0.95rem; }
    .rel-num { white-space: normal; }
    .main-panel .canvas-container { min-height: 380px; }
}