:root {
    --bg-color: #F5F5F0;
    /* Papier Canson */
    --text-color: #111;
    --border-color: #000;
    --accent-color: #0000FF;
    /* Bleu technique basique */
    --panel-bg: #FFFFFF;

    --font-heading: 'Courier New', Courier, monospace;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --grid-gap: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

h1 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
}

/* --- LAYOUT BENTO --- */
.bento-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Video prend plus de place */
    grid-template-rows: 2fr 1fr;
    gap: var(--grid-gap);
    flex: 1;
    min-height: 0;
    /* Important pour le scroll interne */
}

/* Responsive: stack sur mobile */
@media (max-width: 800px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

.panel {
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.panel-header {
    background: var(--border-color);
    color: #FFF;
    font-family: var(--font-heading);
    padding: 5px 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-controls {
    border-top: 1px solid var(--border-color);
    padding: 10px;
    background: #f0f0f0;
    font-size: 0.8rem;
}

/* --- MODULE A: VIDEO --- */
#module-video {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.video-container {
    flex: 1;
    background: #000;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Stack video and controls vertically */
    justify-content: space-between;
    /* Video takes space, controls at bottom */
    align-items: center;
    overflow: hidden;
}

.drop-zone {
    color: #fff;
    text-align: center;
    border: 2px dashed #666;
    padding: 40px;
    cursor: pointer;
    font-family: var(--font-heading);
    margin: auto;
    /* Center in container */
}

.drop-zone:hover {
    background: #111;
    border-color: #fff;
}

.canvas-wrapperHidden {
    display: none;
    /* Caché tant qu'il n'y a pas de vidéo */
    position: relative;
    width: 100%;
    height: 100%;
}

.canvas-wrapperVisible {
    display: block;
    position: relative;
    width: 100%;
    flex: 1;
    /* Take all available height minus controls */
    overflow: hidden;
}


video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Garde le ratio */
}

#overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    pointer-events: auto;
    /* Permet les clics */
}

/* Video Controls Bar */
.video-controls {
    background: #222;
    color: #fff;
    display: flex;
    /* overridden by inline style */
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    width: 100%;
}

.video-controls button {
    background: transparent;
    border: 1px solid #666;
    color: #fff;
    min-width: 30px;
}

.video-controls button:hover {
    background: #666;
}

#seek-bar {
    flex: 1;
    cursor: pointer;
}

/* Controls styling */
.control-group {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
    flex-wrap: wrap;
}


button {
    background: #fff;
    border: 1px solid #000;
    padding: 4px 8px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.1s;
}

button.active {
    background: #00F;
    color: #fff;
    border-color: #000;
}

button:hover {
    background: #000;
    color: #fff;
}

button:active {
    transform: translate(1px, 1px);
}

input[type="number"] {
    border: 1px solid #000;
    padding: 4px;
    font-family: var(--font-heading);
    width: 60px;
}

/* --- MODULE B: DATA --- */
#module-data {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    /* Prend toute la hauteur à droite */
}

.table-container {
    flex: 1;
    overflow-y: auto;
    font-family: var(--font-heading);
    font-size: 0.85rem;
}

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

th {
    background: #eee;
    padding: 8px;
    text-align: right;
    border-bottom: 1px solid #000;
    position: sticky;
    top: 0;
}

td {
    padding: 6px 8px;
    text-align: right;
    border-bottom: 1px solid #ccc;
}

tr:nth-child(even) {
    background: #fafafa;
}

/* --- MODULE C: PLOT --- */
#module-plot {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.canvas-container {
    flex: 1;
    position: relative;
    background: #FFF;
}

#plot-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.plot-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    padding: 2px;
}

/* --- MODULE D: MODEL --- */
/* (Currently integrated into layout logic via grid areas or separate if needed) */
/* Wait, grid layout was 2x2 roughly? 
   Module A: 1/1
   Module B: 2/1 -> 2/span 2 (Right column full height)
   Module C: 1/2
   
   Let's check the HTML. I put 4 sections.
   A (Video)
   B (Data)
   C (Plot)
   D (Model)
   
   If I want layout:
   [ A Video     ] [ B Data ]
   [ C Plot      ] [ B Data ]
   [ D Model     ] [ B Data ] ?? 
   
   Actually in the bento grid above:
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 2fr 1fr;
   
   A: row 1, col 1
   B: row 1-2, col 2
   C: row 2, col 1
   
   Where is D?
   I should probably split C and D in the bottom left, or put D below B?
   
   Let's adjust index.html layout slightly or just put D below C in javascript/css?
   Let's refine Grid.
*/

#module-model {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    /* Wait, B was row 1/3? Let's check. */
}

/* 
Revised Layout:
Col 1 (Wide): Video (Top), Plot (Bottom)
Col 2 (Narrow): Data (Top), Model (Bottom)
*/

.bento-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 60% 40%;
}

#module-video {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

#module-data {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

#module-plot {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

#module-model {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.model-controls {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.math-display {
    font-family: var(--font-body);
    /* Better for math chars? */
    font-style: italic;
    text-align: center;
    margin: 10px 0;
    font-weight: bold;
}

.stats-display {
    text-align: center;
    font-family: var(--font-heading);
    color: #666;
    font-size: 0.8rem;
}