/* Ce fichier contient les styles communs à toutes les pages entre les layout Lexend et Sash */

:root {
    --bs-primary-rgb: 38, 142, 95;
    --primary-color: rgb(var(--bs-primary-rgb));
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #268e5f;
    --bs-btn-border-color: #268e5f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2ea86b;
    --bs-btn-hover-border-color: #2ea86b;
    --bs-btn-focus-shadow-rgb: 38, 142, 95;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #237a54;
    --bs-btn-active-border-color: #237a54;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6db58a;
    --bs-btn-disabled-border-color: #6db58a;
}

.btn-outline-primary {
    --bs-btn-color: #268e5f;
    --bs-btn-border-color: #268e5f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #268e5f;
    --bs-btn-hover-border-color: #268e5f;
    --bs-btn-focus-shadow-rgb: 38, 142, 95;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #237a54;
    --bs-btn-active-border-color: #237a54;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6db58a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6db58a;
    --bs-gradient: none;
}

.btn-primary:focus {
    background-color: rgb(var(--bs-primary-rgb));
    border-color: rgb(var(--bs-primary-rgb));
    color: #fff;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
    background-color: rgb(var(--bs-primary-rgb));
    border-color: rgb(var(--bs-primary-rgb));
    outline: 0;
    box-shadow: none;
}

.btn-primary {
    background-color: rgb(var(--bs-primary-rgb)) !important;
    border-color: rgb(var(--bs-primary-rgb)) !important;
    color: #fff !important;
}

/* Styles pour la page de login avec fond sombre */
.autentication-bg {
    min-height: 100vh;
    background-color: rgba(5, 33, 40, 1) !important; /* bg-tertiary-800 - même fond que Lexend et Sash */
}

/* Force le fond sur le layout sash-auth */
body.bg-tertiary-800 .autentication-bg {
    background-color: rgba(5, 33, 40, 1) !important;
    background: rgba(5, 33, 40, 1) !important;
}

/* Appliquer le fond sombre au body sur les pages d'auth */
body.bg-tertiary-800 {
    background-color: rgba(5, 33, 40, 1) !important; /* même couleur que Lexend/Sash */
    --body-bg-rgb: 5, 33, 40 !important; /* Override la variable CSS de Sash */
    --default-body-bg-color: rgba(5, 33, 40, 1) !important; /* Override la variable CSS de Sash */
    --body-bg-rgb2: 5, 33, 40 !important; /* Override la variable CSS de Sash mode sombre */
}

/* Force le fond même en mode sombre */
[data-theme-mode=dark] body.bg-tertiary-800 {
    background-color: rgba(5, 33, 40, 1) !important;
    --body-bg-rgb: 5, 33, 40 !important;
    --default-body-bg-color: rgba(5, 33, 40, 1) !important;
}

.autentication-bg .card.custom-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.autentication-bg .card.custom-card .card-body {
    background: transparent;
}

/* Tous les textes en blanc sur fond sombre */
.autentication-bg,
.autentication-bg * {
    color: #fff !important;
}

.autentication-bg .form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff !important;
}

.autentication-bg .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgb(var(--bs-primary-rgb));
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    color: #fff !important;
}

.autentication-bg .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.autentication-bg .form-label {
    color: #fff !important;
}

.autentication-bg .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.autentication-bg .text-default {
    color: #fff !important;
}

.autentication-bg .text-primary {
    color: rgb(var(--bs-primary-rgb)) !important;
}

.autentication-bg .text-danger {
    color: #dc3545 !important;
}

.autentication-bg .alert-info {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    color: #fff !important;
}

.autentication-bg .btn-light {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff !important;
}

.autentication-bg .btn-light:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}

/* Titres et sous-titres */
.autentication-bg h1, 
.autentication-bg h2, 
.autentication-bg h3, 
.autentication-bg h4, 
.autentication-bg h5, 
.autentication-bg h6 {
    color: #fff !important;
}

.autentication-bg p {
    color: #fff !important;
}

.autentication-bg .h5 {
    color: #fff !important;
}

/* Liens */
.autentication-bg a {
    color: rgb(var(--bs-primary-rgb)) !important;
}

.autentication-bg a:hover {
    color: #2ea86b !important;
}

/* Messages d'erreur */
.autentication-bg .invalid-feedback {
    color: #dc3545 !important;
}

.autentication-bg .is-invalid {
    border-color: #dc3545 !important;
}

/* Checkbox */
.autentication-bg .form-check-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ====== STYLES POUR LES VIDÉOS YOUTUBE RESPONSIVE ====== */

/* Styles de base pour les iframes YouTube - PC et tablette (garde la taille originale) */
.content-bloc iframe[src*="youtube.com"],
.content-bloc iframe[src*="youtu.be"],
.texte_contenu iframe[src*="youtube.com"],
.texte_contenu iframe[src*="youtu.be"] {
    border-radius: 8px;
    margin: 1rem 0;
    padding: 10px;
    box-sizing: border-box;
}

/* SEULEMENT pour mobile (767px et moins) - Rendre les vidéos YouTube responsive */
@media (max-width: 767.98px) {
    .content-bloc iframe[src*="youtube.com"],
    .content-bloc iframe[src*="youtu.be"],
    .texte_contenu iframe[src*="youtube.com"],
    .texte_contenu iframe[src*="youtu.be"] {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 6px;
        margin: 0.75rem 0;
        padding: 10px;
        box-sizing: border-box;
    }
    
    /* Fallback pour les navigateurs qui ne supportent pas aspect-ratio */
    @supports not (aspect-ratio: 16 / 9) {
        .content-bloc iframe[src*="youtube.com"],
        .content-bloc iframe[src*="youtu.be"],
        .texte_contenu iframe[src*="youtube.com"],
        .texte_contenu iframe[src*="youtu.be"] {
            height: calc(100vw * 0.5625);
            max-height: 250px;
        }
    }
}