/* ============================================================
   DESIGN SYSTEM — A2B Suite
   Référence canonique : style_FFMPEG.css
   Import ce fichier EN PREMIER dans chaque projet,
   puis le CSS local du projet pour les overrides spécifiques.
   ============================================================ */

/* ============================================================
   TOKENS (variables globales)
   ============================================================ */
:root {


    --color-purp: #8369c9;
    --color-warning: #ffa516;
    --color-dark: #1a1a2ef5;
    --color-dark2: #1c1c20;
    --color-bg: #111;
    --color-border: #333;


    --ds-gradient-body:     linear-gradient(to top, #423f84, #9c83c0, #7c4eb5);
    --ds-gradient-accent:   linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --ds-gradient-accent-hover: linear-gradient(135deg, #7689f1 0%, #8557b3 100%);

    --ds-accent:            #667eea;
    --ds-accent-dark:       #764ba2;
    --ds-accent-shadow:     rgba(102, 126, 234, 0.25);
    --ds-accent-glow:       rgba(102, 126, 234, 0.4);

    --ds-bg-input:          #1a1a2e;
    --ds-bg-input-focus:    #252540;
    --ds-bg-panel:          #1a1a2e;

    --ds-border:            #444;
    --ds-text:              #FAFAFA;
    --ds-text-dim:          #e0e0e0;
    --ds-text-muted:        #999;

    --ds-radius:            0.5rem;
    --ds-font:              system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}



/* ============================================================
   RESET / BASE
   ============================================================ */
body {
    font-family:  var(--ds-font);
    background:   var(--ds-gradient-body);
    color:        var(--ds-text);
    margin:       0;
    min-height:   100vh;
}


/* ============================================================
   HEADER / WRRAPPER
   ============================================================ */
.header-premium {
    width: 100%;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}

.header-premium .logo { font-size: 1.4rem; }



.main-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
.gradient-text {
    background:              var(--ds-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.form-label {
    font-weight: 200;
    font-size:   0.8rem;
    color:       var(--ds-text-dim);
}

small.text-secondary {
    color:     var(--ds-text-muted) !important;
    font-size: 0.8rem;
}

.text-xs {
    font-size: 0.8rem;
}


/* ============================================================
   BOUTONS
   ============================================================ */

.btn-premium {
    background: var(--color-warning);
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem;
}

.gradient-btn {
    background:  var(--ds-gradient-accent) !important;
    border:      none !important;
    font-size:   1.1rem !important;
    color:       #fff;
}

.gradient-btn:hover {
    background:  var(--ds-gradient-accent-hover) !important;
    box-shadow:  0 4px 12px var(--ds-accent-glow);
}

.btn {
    white-space:    nowrap;
    align-items:    center;
    text-align:     center;
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-outline-secondary {
    color:        var(--ds-text-muted);
    border-color: var(--ds-border);
}

.btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color:     var(--ds-accent);
    color:            var(--ds-accent);
}

.btn-outline-secondary.active {
    background-color: var(--ds-accent) !important;
    border-color:     var(--ds-accent) !important;
    color:            #fff !important;
}


/* ============================================================
   FORMULAIRES — inputs, selects
   ============================================================ */
.form-select,
.accordion-button,
.form-control::placeholder,
.form-control {
    font-size:        0.9rem !important;
    background-color: var(--ds-bg-input) !important;
    color:            #fff !important;
    border-color:     var(--ds-border);
}

.form-select:focus,
.form-control:focus {
    background-color: var(--ds-bg-input-focus) !important;
    color:            #fff !important;
    border-color:     var(--ds-accent) !important;
    box-shadow:       0 0 0 0.2rem var(--ds-accent-shadow) !important;
}

select,
input {
    min-height: 2.5rem;
}

.form-check-input {
    background-color: var(--ds-bg-input);
    border-color:     var(--ds-border);
}

.form-check-input:checked {
    background-color: var(--ds-accent);
    border-color:     var(--ds-accent);
}

.form-check-input:focus {
    border-color: var(--ds-accent);
    box-shadow:   0 0 0 0.2rem var(--ds-accent-shadow);
}

.form-check {
    display:     flex;
    align-items: center;
}

.form-check-input {
    margin-top: 0 !important;
}

.form-check-label {
    margin-left: 6px;
    display:     flex;
    align-items: center;
}


/* ============================================================
   TOGGLE MODERNE
   ============================================================ */
.modern-toggle {
    width:            48px !important;
    height:           26px;
    background-color: #555;
    border-radius:    30px;
    border:           none;
    position:         relative;
    cursor:           pointer;
    transition:       background-color 0.25s ease-in-out;
    appearance:       none;
    -webkit-appearance: none;
    outline:          none;
}

.modern-toggle::before {
    content:       "";
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         20px;
    height:        20px;
    background:    #fff;
    border-radius: 50%;
    transition:    transform 0.25s ease-in-out, background 0.25s;
}

.modern-toggle:checked {
    background-color: var(--ds-accent);
}

.modern-toggle:checked::before {
    transform:  translateX(22px);
    background: #fff;
}

.modern-toggle:focus {
    box-shadow: 0 0 0 3px var(--ds-accent-shadow);
}


/* ============================================================
   RANGE SLIDERS
   ============================================================ */
.form-range {
    background: transparent;
}

.form-range::-webkit-slider-thumb {
    background: var(--ds-accent);
}

.form-range::-moz-range-thumb {
    background: var(--ds-accent);
}

.form-range::-webkit-slider-runnable-track {
    background: var(--ds-border);
}

.form-range::-moz-range-track {
    background: var(--ds-border);
}


/* ============================================================
   ACCORDION
   ============================================================ */
.accordion-item {
    margin-bottom:  0.5rem;
    border-radius:  var(--ds-radius) !important;
    overflow:       hidden;
}

.accordion-button {
    font-weight: 600;
    font-size:   1rem;
    padding:     1rem 1.25rem;
}

.accordion-button:not(.collapsed) {
    background:  var(--ds-gradient-accent) !important;
    color:       #fff !important;
    box-shadow:  none;
}

.accordion-button:focus {
    box-shadow:   none;
    border-color: transparent;
}

.accordion-button::after {
    filter: brightness(0) invert(1);
}

.accordion-body {
    background-color: var(--ds-bg-panel);
    padding:          1.5rem;
}


/* ============================================================
   PAGINATION
   ============================================================ */
.pagination .page-link {
    background-color: var(--ds-accent) !important;
    border:           none !important;
    color:            #fff !important;
    font-weight:      600;
    border-radius:    4px;
    padding:          4px 10px;
}

.pagination .page-item.active .page-link {
    background-color: var(--ds-accent-dark) !important;
}

.pagination .page-item.disabled .page-link {
    background-color: #444 !important;
    color:            #aaa !important;
}


/* ============================================================
   SPINNER / STATUS
   ============================================================ */
.spinner {
    width:        40px;
    height:       40px;
    border:       4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--ds-accent);
    border-radius: 50%;
    animation:    spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.status-hidden   { display: none; }

.status-loading {
    margin-top:    1rem;
    display:       block;
    background:    rgba(255, 193, 7, 0.1);
    border:        2px solid rgba(255, 193, 7, 0.5);
    padding:       1rem;
    border-radius: var(--ds-radius);
}

.status-success {
    margin-top:    1rem;
    display:       block;
    background:    rgba(76, 175, 80, 0.1);
    border:        2px solid rgba(76, 175, 80, 0.5);
    padding:       1rem;
    border-radius: var(--ds-radius);
}

.status-error {
    display:       block;
    background:    rgba(244, 67, 54, 0.1);
    border:        2px solid rgba(244, 67, 54, 0.5);
    padding:       1rem;
    border-radius: var(--ds-radius);
}


/* ============================================================
   MATERIAL SYMBOLS
   ============================================================ */
.material-symbols-outlined {
    font-size:      24px;
    line-height:    1;
    vertical-align: middle;
}


/* ============================================================
   BOUTON PIP / FLOTTANT
   ============================================================ */
.pip-button {
    position:   absolute;
    top:        20px;
    right:      80px;
    z-index:    20;
    background: rgba(0, 0, 0, 0.7) !important;
    border:     1px solid rgba(255, 255, 255, 0.2) !important;
    padding:    8px 12px;
    opacity:    0.95;
    transition: opacity 0.2s;
}

.pip-button:hover {
    opacity:    1;
    background: rgba(0, 0, 0, 0.9) !important;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ds-bg-panel);
}

::-webkit-scrollbar-thumb {
    background:    var(--ds-accent);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ds-accent-dark);
}


/* ============================================================
   CODE
   ============================================================ */
code {
    display:     block;
    padding:     0.5rem;
    font-size:   0.85rem;
    line-height: 1.5;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .container {
        padding: 1rem !important;
    }

    h1 {
        font-size: 2rem !important;
    }

    .accordion-button {
        font-size: 0.9rem;
        padding:   0.75rem 1rem;
    }

    .accordion-body {
        padding: 1rem;
    }
}

/* ---------------------------------------------------------
   PREMIUM CARD
--------------------------------------------------------- */
.premium-card {
    background: var(--color-dark);
    border-radius: 1rem;
    padding: 2.2rem;
    box-shadow: 0 0 1.6rem rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.05);
}

.premium-card2 {
    background: var(--color-dark2);
    border-radius: 1rem;
    padding: 2.2rem;
    box-shadow: 0 0 1.6rem rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.05);
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.header-premium {
    width: 100%;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}


.btn-premium {
    background: var(--color-warning);
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem;
}