/* =========================================================================
   Thème Séduction MDG by Hermann
   -------------------------------------------------------------------------
   Palette tirée du logo :
     turquoise profond  #02364f  #034560  #045b7e
     lagon              #158da3  (accent clair #0db1db)
     or                 #ac8b44  #d5a65a  #ebcc87
   Fond de contenu : texture satinée du logo (assets/img/texture-satin.jpg)

   À charger APRÈS Bootstrap et admin.css : ce fichier ne fait que
   surcharger l'apparence, il ne remplace rien.
   ========================================================================= */

:root {
    --sm-abyss: #02364f;
    --sm-teal-dark: #034560;
    --sm-teal: #045b7e;
    --sm-lagoon: #158da3;
    --sm-aqua: #0db1db;
    --sm-gold-dark: #ac8b44;
    --sm-gold: #d5a65a;
    --sm-gold-light: #ebcc87;
    --sm-gold-text: #7d6224;      /* or foncé lisible sur fond clair */
    --sm-ink: #17323d;
    --sm-gold-line: rgba(172, 139, 68, .38);
    --sm-font-title: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;

    /* Variables Bootstrap 5.3 : tout ce qui est « primary » passe au turquoise */
    --bs-primary: #045b7e;
    --bs-primary-rgb: 4, 91, 126;
    --bs-link-color: #045b7e;
    --bs-link-color-rgb: 4, 91, 126;
    --bs-link-hover-color: #034560;
    --bs-link-hover-color-rgb: 3, 69, 96;
    --bs-body-color: #17323d;
    --bs-body-color-rgb: 23, 50, 61;
    --bs-secondary-color: rgba(23, 50, 61, .68);
    --bs-border-color: #d7e0e4;
    --bs-focus-ring-color: rgba(4, 91, 126, .22);
}

/* ---------- Fond : satin du logo ---------------------------------------- */

body {
    min-height: 100vh;
    color: var(--sm-ink);
    background: #f4f5f6 url("../img/texture-satin.png") center top / cover no-repeat fixed;
}

/* Le fond fixe est saccadé sur mobile / écrans tactiles */
@media (max-width: 991.98px), (hover: none) {
    body { background-attachment: scroll; }
}

/* ---------- Titres : serif élégant, comme le script du logo -------------- */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
    font-family: var(--sm-font-title);
    font-weight: 700;
    letter-spacing: .005em;
    color: var(--sm-teal-dark);
}

/* ---------- Structure --------------------------------------------------- */

.app-content {
    min-width: 0;                 /* laisse les tableaux larges défiler */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-content > main { flex: 1 0 auto; }

/* ---------- Barre du haut ----------------------------------------------- */

.app-topbar {
    --bs-navbar-color: var(--sm-ink);
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sm-gold-line);
    box-shadow: 0 6px 20px rgba(2, 54, 79, .05);
}

.app-topbar .btn-outline-secondary {
    --bs-btn-color: var(--sm-teal);
    --bs-btn-border-color: rgba(4, 91, 126, .35);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sm-teal);
    --bs-btn-hover-border-color: var(--sm-teal);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sm-teal-dark);
    --bs-btn-active-border-color: var(--sm-teal-dark);
    --bs-btn-focus-shadow-rgb: 4, 91, 126;
}

/* Badge du rôle : or du logo */
.app-topbar .badge.bg-primary {
    background: linear-gradient(135deg, #ebcc87 0%, #d5a65a 55%, #ac8b44 100%) !important;
    color: #3a2a06;
    letter-spacing: .04em;
    font-weight: 700;
}

/* ---------- Barre latérale ---------------------------------------------- */

.app-sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex: 0 0 268px;
    width: 268px;
    height: 100vh;
    overflow-y: auto;
    padding: 1.1rem 1rem 1.5rem;
    background:
        radial-gradient(120% 55% at 0% 0%, rgba(13, 177, 219, .24), transparent 62%),
        linear-gradient(180deg, #045b7e 0%, #034a68 40%, #02364f 100%);
    border-right: 1px solid rgba(235, 204, 135, .6);
    box-shadow: 6px 0 28px rgba(2, 54, 79, .2);
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 204, 135, .45) transparent;
}

/* Plaque du logo : le logo garde son propre fond satiné */
.app-brand {
    display: block;
    margin: 0 0 .9rem;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 1px var(--sm-gold-light),
        0 0 0 4px rgba(172, 139, 68, .35),
        0 12px 26px rgba(0, 0, 0, .3);
}

.app-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.app-brand:focus-visible {
    outline: 2px solid var(--sm-gold-light);
    outline-offset: 5px;
}

.app-brand-caption {
    margin: 1rem 0 1.15rem;
    text-align: center;
    font-family: var(--sm-font-title);
    font-style: italic;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--sm-gold-light);
}

.app-brand-caption i { margin-right: .3rem; font-size: 1rem; }

.app-brand-caption::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 1rem;
    background: linear-gradient(90deg, transparent, var(--sm-gold), transparent);
}

.app-sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .85rem;
    border-radius: 10px;
    font-weight: 500;
    transition: background-color .15s ease;
}

.app-sidebar .nav-link i {
    width: 1.3rem;
    text-align: center;
    font-size: 1.05rem;
    color: var(--sm-gold-light);
}

.app-sidebar .nav-link:hover { background: rgba(255, 255, 255, .1); }

.app-sidebar .nav-link:focus-visible {
    outline: 2px solid var(--sm-gold-light);
    outline-offset: 2px;
}

.app-sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(235, 204, 135, .26), rgba(213, 166, 90, .08));
    box-shadow: inset 3px 0 0 var(--sm-gold);
}

.app-sidebar .nav-link.active i { color: #fff3cf; }

/* ---------- Pied de page ------------------------------------------------ */

.app-footer {
    padding: .5rem 1.5rem 1.5rem;
    text-align: center;
    font-family: var(--sm-font-title);
    font-style: italic;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--sm-gold-text);
}

.app-footer::before {
    content: "";
    display: block;
    width: min(240px, 45%);
    height: 1px;
    margin: 0 auto .85rem;
    background: linear-gradient(90deg, transparent, var(--sm-gold), transparent);
}

/* Page sans menu (connexion) : pas de pied de page */
body > .app-footer { display: none; }

/* ---------- Cartes ------------------------------------------------------ */

.card {
    --bs-card-bg: rgba(255, 255, 255, .94);
    --bs-card-border-color: rgba(4, 91, 126, .12);
    --bs-card-border-radius: .85rem;
    --bs-card-inner-border-radius: calc(.85rem - 1px);
    --bs-card-cap-bg: rgba(4, 91, 126, .045);
    box-shadow: 0 8px 28px rgba(2, 54, 79, .07), 0 1px 2px rgba(2, 54, 79, .06);
}

.card-header {
    border-bottom-color: var(--sm-gold-line);
    font-weight: 600;
}

/* ---------- Boutons ----------------------------------------------------- */

.btn-primary {
    --bs-btn-bg: var(--sm-teal);
    --bs-btn-border-color: var(--sm-teal);
    --bs-btn-hover-bg: var(--sm-teal-dark);
    --bs-btn-hover-border-color: var(--sm-abyss);
    --bs-btn-active-bg: var(--sm-abyss);
    --bs-btn-active-border-color: var(--sm-abyss);
    --bs-btn-disabled-bg: var(--sm-teal);
    --bs-btn-disabled-border-color: var(--sm-teal);
    --bs-btn-focus-shadow-rgb: 4, 91, 126;
}

.btn-outline-primary {
    --bs-btn-color: var(--sm-teal);
    --bs-btn-border-color: var(--sm-teal);
    --bs-btn-hover-bg: var(--sm-teal);
    --bs-btn-hover-border-color: var(--sm-teal);
    --bs-btn-active-bg: var(--sm-teal-dark);
    --bs-btn-active-border-color: var(--sm-teal-dark);
    --bs-btn-disabled-color: var(--sm-teal);
    --bs-btn-disabled-border-color: var(--sm-teal);
    --bs-btn-focus-shadow-rgb: 4, 91, 126;
}

/* ---------- Formulaires ------------------------------------------------- */

.form-control:focus,
.form-select:focus {
    border-color: var(--sm-lagoon);
    box-shadow: 0 0 0 .25rem rgba(4, 91, 126, .16);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--sm-teal);
    border-color: var(--sm-teal);
}

.form-check-input:focus {
    border-color: var(--sm-lagoon);
    box-shadow: 0 0 0 .25rem rgba(4, 91, 126, .16);
}

/* ---------- Tableaux ---------------------------------------------------- */

.table {
    --bs-table-border-color: rgba(4, 91, 126, .12);
    --bs-table-hover-bg: rgba(4, 91, 126, .05);
    --bs-table-striped-bg: rgba(4, 91, 126, .035);
}

.table > thead > tr > th { border-bottom-color: var(--sm-gold); }

.table-light {
    --bs-table-bg: rgba(4, 91, 126, .07);
    --bs-table-color: var(--sm-teal-dark);
    --bs-table-border-color: var(--sm-gold-line);
    --bs-table-striped-bg: rgba(4, 91, 126, .07);
    --bs-table-hover-bg: rgba(4, 91, 126, .1);
}

.table-dark {
    --bs-table-bg: var(--sm-abyss);
    --bs-table-border-color: rgba(235, 204, 135, .25);
    --bs-table-striped-bg: #053f58;
    --bs-table-hover-bg: #075070;
}

/* ---------- Navigation, pagination, menus déroulants ------------------- */

.nav {
    --bs-nav-link-color: var(--sm-teal);
    --bs-nav-link-hover-color: var(--sm-teal-dark);
}

.nav-pills { --bs-nav-pills-link-active-bg: var(--sm-teal); }

.pagination {
    --bs-pagination-color: var(--sm-teal);
    --bs-pagination-hover-color: var(--sm-teal-dark);
    --bs-pagination-focus-color: var(--sm-teal-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(4, 91, 126, .18);
    --bs-pagination-active-bg: var(--sm-teal);
    --bs-pagination-active-border-color: var(--sm-teal);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--sm-gold-line);
    --bs-dropdown-border-radius: .8rem;
    --bs-dropdown-link-hover-bg: rgba(4, 91, 126, .07);
    --bs-dropdown-link-active-bg: var(--sm-teal);
    overflow: hidden;
}

.modal-content {
    border-color: var(--sm-gold-line);
    border-radius: .9rem;
}

.progress-bar { background-color: var(--sm-teal); }

.list-group { --bs-list-group-active-bg: var(--sm-teal); --bs-list-group-active-border-color: var(--sm-teal); }

/* ---------- SweetAlert2 ------------------------------------------------- */

:root { --swal2-confirm-button-background-color: var(--sm-teal); }

.swal2-container .swal2-popup {
    border-radius: 1rem;
    border: 1px solid var(--sm-gold-line);
    font-family: inherit;
}

.swal2-container .swal2-title {
    font-family: var(--sm-font-title);
    font-weight: 700;
    color: var(--sm-teal-dark);
}

.swal2-container .swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--sm-teal);
    border-radius: .5rem;
}

.swal2-container .swal2-popup .swal2-styled.swal2-confirm:hover { background-color: var(--sm-teal-dark); }

.swal2-container .swal2-popup .swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(4, 91, 126, .35);
}

/* ---------- Petits écrans : barre latérale réduite aux icônes ----------- */

@media (max-width: 767.98px) {
    .app-sidebar {
        flex-basis: 64px;
        width: 64px;
        padding: .9rem .5rem;
    }

    .app-brand,
    .app-brand-caption { display: none; }

    .app-sidebar .nav-link {
        justify-content: center;
        gap: 0;
        padding: .7rem 0;
        font-size: 0;             /* masque le libellé, garde l'icône */
    }

    .app-sidebar .nav-link i {
        width: auto;
        font-size: 1.25rem;
    }

    .app-content > main { padding: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar .nav-link { transition: none; }
}