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

body {
    background: #0d0d0d;
    color: #e5e5e5;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    padding: 32px;
}

.regie-container {
    min-height: calc(100vh - 64px);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === ÉCRANS === */
.screens-section {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 40px;
}

.screen {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.screen:hover {
    border-color: #3a3a3a;
}

/* Écran 1 - Grand */
#screen1 {
    width: 640px;
}

#screen1 .screen-content {
    aspect-ratio: 16/9;
}

/* Écran 2 - Plus petit, en dessous à gauche */
#screen2 {
    width: 480px;
}

#screen2 .screen-content {
    aspect-ratio: 16/9;
}

.screen-header {
    background: #141414;
    padding: 12px 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666;
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.screen-content {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
}

.screen-content .placeholder {
    color: #333;
    font-size: 13px;
    font-weight: 500;
}

.screen-content .action-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: fadeIn 0.2s ease;
}

.screen-content .action-icon {
    font-size: 56px;
    opacity: 0.9;
}

#screen2 .screen-content .action-icon {
    font-size: 36px;
}

.screen-content .action-text {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === STREAM DECKS === */
.streamdecks-unified {
    display: flex;
    align-items: flex-start;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 20px 120px;
    gap: 0;
    justify-content: center;
}

.streamdeck-buttons {
    display: grid;
    gap: 17px;
}

/* Séparateur horizontal (espace d'une touche) */
.streamdeck-spacer-one {
    width: 82px; /* 65px (touche) + 17px (gap) */
}

/* Séparateur horizontal (espace de deux touches) */
.streamdeck-spacer-two {
    width: 164px; /* 2*65 + 2*17 */
}

/* Séparateur vertical (espace d'une touche) */
.streamdeck-spacer-vertical {
    height: 82px; /* 65px (touche) + 17px (gap) */
}

/* Ligne des deux Minis */
.streamdeck-minis-row {
    display: flex;
    justify-content: space-between;
    width: 639px; /* Largeur du XL: 8*65 + 7*17 */
}

/* Espace entre les deux Minis (colonnes 4-5 du XL) */
.streamdeck-mini-spacer {
    width: 181px; /* 639 - 2*229 (largeur des 2 minis) */
}

/* Stream Deck Mini: 2 rows x 3 columns */
.streamdeck-mini-buttons {
    grid-template-columns: repeat(3, 65px);
    grid-template-rows: repeat(2, 65px);
}

/* Stream Deck XL: 4 rows x 8 columns */
.streamdeck-xl-buttons {
    grid-template-columns: repeat(8, 65px);
    grid-template-rows: repeat(4, 65px);
}

/* Stream Deck +: 2 rows x 4 columns (colonnes plus espacées) */
.streamdeck-plus-buttons {
    grid-template-columns: repeat(4, 65px);
    grid-template-rows: repeat(2, 65px);
    column-gap: 45px;
    row-gap: 36px;
}

/* Stream Deck 15: 3 columns x 5 rows (vertical) */
.streamdeck-15-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-title {
    color: #2a2a2a;
    font-size: 33px;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.streamdeck-15-buttons {
    grid-template-columns: repeat(3, 65px);
    grid-template-rows: repeat(5, 65px);
    margin-top: 110px; /* Aligner ligne 5 SD15 = ligne 4 XL (ajusté pour le titre) */
}

/* Groupe Mini + XL (vertical) */
.streamdeck-group-xl {
    display: flex;
    flex-direction: column;
}

/* Container Stream Deck + */
.streamdeck-plus-container {
    display: flex;
    flex-direction: column;
}

/* Écran 16/9 au-dessus du + */
.streamdeck-plus-screen {
    width: 395px; /* Même largeur que les boutons: 4*65 + 3*45 */
    aspect-ratio: 16/9;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 10px;
    position: relative;
    overflow: hidden;
}

/* Zone de référence (écran virtuel) */
.preview-screen-area {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    border: 1px solid #444;
    background: #1a1a1a;
}

/* Élément en cours de configuration */
.preview-element {
    position: absolute;
    background: rgba(233, 30, 99, 0.6);
    border: 2px solid #e91e63;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
    white-space: pre-line;
    line-height: 1.2;
    padding: 2px;
    box-sizing: border-box;
}

/* Boutons - Style Stream Deck réaliste */
.deck-button {
    background: #333;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #000;
    transition: all 0.1s ease;
    text-align: center;
    padding: 5px;
    word-break: break-word;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.deck-button:hover {
    filter: brightness(1.1);
}

.deck-button:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

/* Couleurs des boutons */
.deck-button.red { background: #e74c3c; }
.deck-button.green { background: #2ecc71; }
.deck-button.blue { background: #3498db; }
.deck-button.yellow { background: #f1c40f; }
.deck-button.purple { background: #9b59b6; }
.deck-button.orange { background: #e67e22; }
.deck-button.cyan { background: #00bcd4; }
.deck-button.grey { background: #7f8c8d; }
.deck-button.white { background: #ecf0f1; color: #000; }
.deck-button.pink { background: #e91e63; }
.deck-button.teal { background: #009688; }

.deck-button.active {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Bordure rouge pour éléments sélectionnés sur XL */
.deck-button.selected {
    outline: 3px solid #e74c3c;
    outline-offset: -3px;
}

/* Bordure grise pour état intermédiaire */
.deck-button.border-grey {
    outline: 3px solid #7f8c8d;
    outline-offset: -3px;
}

/* === STREAM DECK MINI - TIMER === */

/* Bouton désactivé */
.deck-button.disabled {
    background: #1a1a1a;
    color: #333;
    cursor: not-allowed;
}
.deck-button.disabled:hover {
    filter: none;
}
.deck-button.disabled:active {
    transform: none;
    filter: none;
}

/* Bouton 1 - START */
.deck-button.btn-start {
    background: #2ecc71;
}

/* Bouton 1 - STOP */
.deck-button.btn-stop {
    background: #e74c3c;
}

/* Bouton 1 - RESET flash */
.deck-button.reset-flash {
    background: #fff !important;
    color: #000 !important;
}

/* Bouton 2 - Position */
.deck-button.btn-position {
    background: #3498db;
}

/* Bouton 3 - Color Grey */
.deck-button.btn-color-grey {
    background: #7f8c8d;
}

/* Bouton 3 - Color Orange */
.deck-button.btn-color-orange {
    background: #e67e22;
}

/* Bouton 3 - Color Red */
.deck-button.btn-color-red {
    background: #e74c3c;
}

/* Boutons 4/5/6 - Timer inactif (vert) */
.deck-button.btn-timer-inactive {
    background: #2ecc71;
}

/* Boutons 4/5/6 - Timer actif (rouge = à l'écran) */
.deck-button.btn-timer-active {
    background: #e74c3c;
}

/* === STREAM DECK + === */

/* Bouton SAVE */
.deck-button.btn-save {
    background: #27ae60;
    font-size: 18px;
}
.deck-button.btn-save-flash {
    background: #fff !important;
}

/* Bouton BACK */
.deck-button.btn-back {
    background: #7f8c8d;
    font-size: 18px;
}

/* Bouton YES (confirmation save) */
.deck-button.btn-yes {
    background: #27ae60;
    font-size: 11px;
}

/* Bouton NO (confirmation save) */
.deck-button.btn-no {
    background: #e74c3c;
    font-size: 11px;
}

/* Bouton Position Select */
.deck-button.btn-position-select {
    background: #3498db;
}

/* Bouton Box Select (SuperSource) */
.deck-button.btn-box-select {
    background: #9b59b6;
}

/* Boutons Param (Position/Crop/Size) */
.deck-button.btn-param {
    background: #34495e;
}

.deck-button.btn-param-active {
    background: #9b59b6;
}

/* Boutons Media Player Slots - texte sur 2 lignes */
.deck-button {
    white-space: pre-line;
    line-height: 1.2;
}

/* Stream Deck + écran tactile */
.streamdeck-touchscreen {
    width: 395px; /* Même largeur que les boutons: 4*65 + 3*45 */
    background: #0a0a0a;
    height: 54px;
    margin: 14px 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 500;
    color: #fff;
    border: 1px solid #2a2a2a;
    letter-spacing: 0.5px;
}

/* LCD Encoders display */
.lcd-encoders {
    display: flex;
    width: 100%;
    height: 100%;
}

.lcd-encoder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #888;
    border-right: 1px solid #222;
    text-transform: uppercase;
}

.lcd-encoder:last-child {
    border-right: none;
}

.lcd-encoder strong {
    font-size: 12px;
    color: #fff;
    margin-top: 2px;
}

/* Stream Deck + encodeurs */
.streamdeck-encoders {
    width: 395px; /* Même largeur que les boutons: 4*65 + 3*45 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 45px;
    margin-top: 7px;
}

.encoder-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.encoder {
    width: 50px;
    height: 50px;
    background: linear-gradient(145deg, #1f1f1f, #141414);
    border-radius: 50%;
    border: 2px solid #2a2a2a;
    cursor: grab;
    position: relative;
    transition: border-color 0.2s ease;
}

.encoder:hover {
    border-color: #4a9eff;
}

.encoder:active {
    cursor: grabbing;
    border-color: #4a9eff;
    box-shadow: 0 0 16px rgba(74, 158, 255, 0.4);
}

.encoder-indicator {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 12px;
    background: #4a9eff;
    border-radius: 2px;
    transform-origin: center 18px;
}



/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 1600px) {
    .streamdecks-unified {
        transform: scale(0.85);
        transform-origin: center center;
    }
}

@media (max-width: 1400px) {
    .streamdecks-unified {
        transform: scale(0.75);
    }
}

@media (max-width: 1200px) {
    .streamdecks-unified {
        transform: scale(0.65);
    }
}

@media (max-width: 1000px) {
    .streamdecks-unified {
        transform: scale(0.55);
    }
}

@media (max-width: 850px) {
    .streamdecks-unified {
        transform: scale(0.45);
    }
}

@media (max-width: 700px) {
    .streamdecks-unified {
        transform: scale(0.38);
    }
}

@media (max-width: 550px) {
    .streamdecks-unified {
        transform: scale(0.3);
    }
}

@media (max-width: 450px) {
    .streamdecks-unified {
        transform: scale(0.25);
    }
}