:root {
    --font-title: 'Anton', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --color-primary: #BFA98D;
    --color-secondary: #212121;
    --color-background: #F5F5F5;
    --color-text: #212121;
    --color-text-on-dark: #F5F5F5;
    --color-container-background: #fff;
    --color-border: #e0e0e0;
    --color-button-text-on-gold: #212121;
    --color-input-border: #ccc;
    --color-input-background: #fff;
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.07);
    --shadow-lifted: 0 6px 16px rgba(0,0,0,0.12);
    --header-height: 60px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    margin: 0;
    padding: 0; /* Suppression du padding-top inutile */
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
}

.app-header {
    background-color: var(--color-secondary);
    padding: 15px 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    /* MODIFICATION : Suppression de "position: fixed" et des propriétés associées */
}

.header-content {
    max-width: 1260px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative;
}

.header-left, .header-right {
    flex: 1;
}
.header-center {
    flex: 2;
    text-align: center;
}
.header-right {
    display: flex;
    justify-content: flex-end;
}

#toggle-playbook-manager-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-on-dark);
    padding: 0 16px;
    border-radius: 8px 8px 0 0;
    height: 45px;
    position: absolute;
    bottom: -16px; /* Ajustement pour s'aligner avec le bas du header */
    left: 0;
}

#toggle-playbook-manager-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-primary);
    transform: none;
    box-shadow: none;
}

#toggle-playbook-manager-btn.active {
    background-color: var(--color-container-background);
    color: var(--color-text);
    border-color: var(--color-border);
    border-bottom: 1px solid var(--color-container-background);
}

#toggle-playbook-manager-btn span {
    font-size: 1em;
    font-weight: bold;
    margin-left: 8px;
}

#theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--color-text-on-dark);
}

#theme-toggle-btn:hover {
    color: var(--color-primary);
    transform: none;
    box-shadow: none;
}

h1 {
    font-family: var(--font-title);
    font-size: 1.8em;
    color: var(--color-text-on-dark);
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
}

h1 .highlight {
    color: var(--color-primary);
    font-family: var(--font-body);
    font-weight: 400;
}

.floating-panel {
    position: absolute;
    top: calc(var(--header-height) + 35px); /* Positionnement relatif à la page */
    left: 25px;
    z-index: 99;
    width: 450px;
    max-width: 90vw;
    border-top-left-radius: 0;
}

.main-content {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 25px;
    box-sizing: border-box;
    align-items: flex-start;
}

#sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0; 
}

.section-container {
    padding: 20px;
    background-color: var(--color-container-background);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border);
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.section-container h2 {
    font-family: var(--font-title);
    font-size: 1.3em;
    margin: 0 0 15px 0;
    color: var(--color-secondary);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 8px;
    letter-spacing: 1px;
}

#toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
#play-manager {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.playbook-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.playbook-group label {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--color-text);
    opacity: 0.8;
}
.button-row {
    display: flex;
    gap: 10px;
}
.button-row button {
    flex-grow: 1;
}
.pdf-options {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.tool-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tool-group + .tool-group {
    border-left: 2px solid var(--color-border);
    padding-left: 10px;
    margin-left: 5px;
}

button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 0.9em;
    padding: 6px 12px;
    min-width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: var(--color-container-background);
    color: var(--color-text);
    border: 2px solid var(--color-secondary);
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lifted);
}

button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-border);
    border-color: var(--color-border);
}

button.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-button-text-on-gold);
}
button.btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
}

button.danger {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
button.danger:hover:not(:disabled) {
    background-color: rgba(191, 169, 141, 0.15);
    color: var(--color-primary);
}


button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.tool-btn.active, .view-btn.active {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-color: var(--color-secondary);
}

#play-manager input[type="text"], #play-manager input[type="number"] {
    width: 100%;
    padding: 8px 12px; 
    border-radius: 5px; 
    border: 1px solid var(--color-input-border); 
    font-family: var(--font-body);
    background-color: var(--color-input-background);
    color: var(--color-text);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
#play-manager input:focus {
    outline: none;
    border-color: var(--color-primary);
}

#comments-textarea {
    width: 100%;
    padding: 8px 12px; 
    border-radius: 5px; 
    border: 1px solid var(--color-input-border); 
    font-family: var(--font-body);
    background-color: var(--color-input-background);
    color: var(--color-text);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    min-height: 80px;
}

#properties-panel .prop-group { display: flex; flex-direction: column; gap: 12px; }
#properties-panel .prop-row { display: flex; justify-content: space-between; align-items: center; }
#properties-panel label { font-size: 0.9em; margin-right: 10px; }
#properties-panel input[type="text"], #properties-panel input[type="number"] { width: 120px; padding: 4px; border-radius: 3px; border: 1px solid var(--color-input-border); background-color: var(--color-input-background); color: var(--color-text); }
#properties-panel input[type="color"] { padding: 0; width: 120px; height: 24px; border: 1px solid var(--color-input-border); border-radius: 3px; cursor: pointer; }
#properties-panel input[type="range"] { width: 120px; }
.color-palette { display: flex; justify-content: space-between; padding-left: 60px; }
.color-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.2); transition: transform 0.1s ease; }
.color-swatch:hover { transform: scale(1.1); }
.prop-info { font-size: 0.8em; color: #666; margin: 4px 0 0 0; text-align: center; }

.hidden { display: none !important; }

#court-container { position: relative; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.15); background-color: var(--color-secondary); transition: all 0.4s ease-in-out; }
#court-background-container, #basketball-court { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#court-background-container { z-index: 1; }
#basketball-court { z-index: 2; cursor: crosshair; }
.court { width: 100%; height: 100%; }
.view-full-court #court-container { width: 100%; aspect-ratio: 280 / 150; }
.view-half-court #court-container { width: 50%; aspect-ratio: 140 / 150; margin: 0 auto; }
.view-half-court #court-svg .center-court-logo { display: none; }

#scene-controls { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;}
#scene-list { list-style: none; padding: 5px; margin: 0; max-height: 200px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 8px; }
#scene-list li { padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-bottom: 5px; }
#scene-list li:last-child { margin-bottom: 0; }
#scene-list li.dragging { opacity: 0.5; background-color: var(--color-border); }
#scene-list li:hover { background-color: var(--color-background); }
#scene-list li.active { background-color: var(--color-primary); color: var(--color-secondary); font-weight: bold; }

#animation-player { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; }
#animation-container { position: relative; height: 100%; max-width: 80vw; max-height: 80vh; aspect-ratio: 280 / 150; background-color: var(--color-secondary); box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 12px; overflow: hidden; }
#animation-court-background, #animation-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#animation-controls { display: flex; align-items: center; gap: 15px; margin-top: 20px; padding: 10px 20px; background-color: var(--color-container-background); border-radius: 8px; box-shadow: var(--shadow-lifted); }
#animation-controls button { border-color: var(--color-border); }
#animation-controls #anim-time-display { font-family: var(--font-body); font-weight: bold; color: var(--color-secondary); min-width: 80px; text-align: center; }

#theme-toggle-btn svg { width: 24px; height: 24px; }

/* --- Mode Sombre --- */
body.dark-mode {
    --color-background: #121212;
    --color-text: #E0E0E0;
    --color-text-on-dark: #E0E0E0;
    --color-container-background: #1E1E1E;
    --color-border: #333;
    --color-button-text-on-gold: #121212;
    --color-input-border: #444;
    --color-input-background: #2C2C2C;
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.2);
    --shadow-lifted: 0 6px 16px rgba(0,0,0,0.3);
}

body.dark-mode .app-header { background-color: #1a1a1a; }
body.dark-mode h1 .highlight { color: var(--color-primary); }

body.dark-mode #toggle-playbook-manager-btn.active {
    background-color: var(--color-container-background);
    color: var(--color-text);
    border-color: var(--color-border);
    border-bottom-color: var(--color-container-background);
}
body.dark-mode .playbook-group label {
    color: var(--color-text);
}
body.dark-mode button { background-color: var(--color-container-background); color: var(--color-text); border-color: var(--color-border); }
body.dark-mode button:hover:not(:disabled) { border-color: var(--color-primary); background-color: #2a2a2a; }
body.dark-mode button.active, body.dark-mode .view-btn.active { background-color: var(--color-primary); color: var(--color-button-text-on-gold); border-color: var(--color-primary); }
body.dark-mode button.btn-primary { background-color: var(--color-primary); color: var(--color-button-text-on-gold); border-color: var(--color-primary); }
body.dark-mode button.btn-primary:hover:not(:disabled) { filter: brightness(1.1); background-color: var(--color-primary); }
body.dark-mode button.danger { background-color: transparent; border-color: var(--color-primary); color: var(--color-primary); }
body.dark-mode button.danger:hover:not(:disabled) { background-color: rgba(191, 169, 141, 0.1); color: var(--color-primary); }
body.dark-mode #scene-list li:hover { background-color: #2a2a2a; }
body.dark-mode #scene-list li.active { color: #121212; background-color: var(--color-primary); }
body.dark-mode #animation-controls { background-color: var(--color-container-background); }
body.dark-mode #animation-controls button { background-color: var(--color-container-background); border-color: var(--color-border); color: var(--color-text); }
body.dark-mode #animation-controls #anim-time-display { color: var(--color-text); }
body.dark-mode .prop-info { color: #aaa; }


/* --- Media Queries pour le Responsive --- */
@media (max-width: 800px) {

    .main-content {
        flex-direction: column; /* Passe en mode colonne */
        padding: 10px; /* Réduit l'espacement sur les côtés */
        gap: 15px;
    }

    #sidebar {
        width: 100%; /* La barre latérale prend toute la largeur */
        order: 2; /* Change l'ordre pour mettre le terrain en premier */
    }

    .main-area {
        width: 100%;
        order: 1; /* Le terrain s'affiche avant les panneaux */
    }
    
    .app-header {
        padding: 10px 15px;
        margin-bottom: 10px;
    }

    h1 {
        font-size: 1.4em; /* Titre plus petit */
        letter-spacing: 2px;
    }
    
    h1 .highlight {
        display: none; /* Cache "TACTICAL BOARD" pour gagner de la place */
    }

    /* Le bouton Playbook n'affiche que l'icône */
    #toggle-playbook-manager-btn {
        padding: 0 12px;
        bottom: -11px; /* Ajustement pour mobile */
    }
    #toggle-playbook-manager-btn span {
        display: none;
    }
    
    /* Transforme le panneau flottant en modale plein écran */
    .floating-panel {
        position: fixed; /* Fixé par rapport à la vue */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5); /* Fond semi-transparent */
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 0;
    }

    /* Centre et style le contenu de la modale */
    #play-manager {
        width: 100%;
        max-width: 400px;
        background-color: var(--color-container-background);
        padding: 25px;
        border-radius: 12px;
        box-shadow: var(--shadow-lifted);
        border: 1px solid var(--color-border);
    }

    .dark-mode .floating-panel:not(.hidden) #play-manager {
         background-color: var(--color-container-background);
         border-color: var(--color-border);
    }
    
    .floating-panel.hidden {
        display: none !important; /* Assure que la modale est bien cachée */
    }

    .view-half-court #court-container {
        width: 100%; /* Le demi-terrain prend toute la largeur disponible */
        aspect-ratio: 140 / 150;
        margin: 0 auto;
    }
    
    #toolbar {
        gap: 8px; /* Espacement réduit entre les boutons d'outils */
    }
    .tool-group + .tool-group {
        padding-left: 8px;
        margin-left: 3px;
    }

    #animation-container {
        max-width: 95vw;
        max-height: 70vh;
    }
    #animation-controls {
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px;
    }
}