/* Variables globales pour le thème Developer */
:root {
    /* Couleurs principales */
    --bs-primary: #0d6efd;
    --bs-dark: #212529;
    --bs-light: #f8f9fa;
    --bs-white: #ffffff;
    --bs-body: #495057;

    /* Variables spécifiques au thème */
    --theme-transition: 0.5s;
    --theme-transition-fast: 0.3s;
    --theme-border-radius: 4px;
    --theme-box-shadow: 0 0 30px rgba(0, 0, 0, .03);
    --theme-box-shadow-hover: 0 0 30px rgba(0, 0, 0, .08);
    --theme-border-light: 1px solid rgba(0, 0, 0, .08);
    --theme-overlay: rgba(0, 0, 0, .04);

    /* Spacing */
    --theme-spacing-xs: 3px;
    --theme-spacing-sm: 8px;
    --theme-spacing-md: 15px;
    --theme-spacing-lg: 30px;
    --theme-spacing-xl: 50px;
    --theme-spacing-xxl: 60px;

    /* Typography */
    --theme-font-family-cursive: "Edu TAS Beginner", cursive;
    --theme-font-size-base: 14px;
    --theme-font-size-subtitle: 22px;
    --theme-font-weight-normal: 500;
    --theme-font-weight-semi: 600;
    --theme-font-weight-bold: 700;

    /* Z-index */
    --theme-z-spinner: 99999;
    --theme-z-navbar: 99;
    --theme-z-back-to-top: 99;
    --theme-z-language-bar: 1000;

    /* Dimensions */
    --theme-btn-square-sm: 32px;
    --theme-btn-square-md: 34px;
    --theme-btn-square-lg: 40px;
    --theme-btn-square-xl: 46px;
    --theme-btn-square-xxl: 56px;
    --theme-navbar-width: 40px;
    --theme-portfolio-height: 150px;

    /* Language Bar */
    --language-bar-bg: var(--bs-dark);
    --language-bar-text: #ced4da;          /* barre sombre -> texte clair (les 2 modes) */
    --language-bar-text-hover: var(--bs-white);
    --language-bar-active: var(--bs-primary);
    --language-bar-separator: #7d8894;
    --language-bar-spacing: var(--theme-spacing-sm);
    --language-bar-padding: 4px var(--theme-spacing-sm);
    --language-bar-border-radius: var(--theme-border-radius);
    --language-bar-font-size: var(--theme-font-size-base);
    --language-bar-transition: var(--theme-transition-fast);
}

/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--theme-transition) ease-out, visibility 0s linear var(--theme-transition);
    z-index: var(--theme-z-spinner);
}

#spinner.show {
    transition: opacity var(--theme-transition) ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: var(--theme-spacing-lg);
    bottom: var(--theme-spacing-lg);
    transition: var(--theme-transition);
    z-index: var(--theme-z-back-to-top);
}

/*** Button Start ***/
.btn {
    font-weight: var(--theme-font-weight-semi);
    transition: var(--theme-transition);
}

.btn-square {
    width: var(--theme-btn-square-sm);
    height: var(--theme-btn-square-sm);
}

.btn-sm-square {
    width: var(--theme-btn-square-md);
    height: var(--theme-btn-square-md);
}

.btn-md-square {
    width: var(--theme-btn-square-lg);
    height: var(--theme-btn-square-lg);
}

.btn-lg-square {
    width: var(--theme-btn-square-xl);
    height: var(--theme-btn-square-xl);
}

.btn-xl-square {
    width: var(--theme-btn-square-xxl);
    height: var(--theme-btn-square-xxl);
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn.btn-primary {
    color: var(--bs-white);
    border: none;
}

.btn.btn-primary:hover {
    background: var(--bs-dark);
    color: var(--bs-white);
}

.btn.btn-light {
    color: var(--bs-primary);
    border: none;
}

.btn.btn-light:hover {
    color: var(--bs-white);
    background: var(--bs-primary);
}

/*** Button End ***/

.pt-6 {
    padding-top: var(--theme-spacing-xxl);
}

.ps-6 {
    padding-left: var(--theme-spacing-xxl);
}

.pe-6 {
    padding-right: var(--theme-spacing-xxl);
}

.pb-6 {
    padding-bottom: var(--theme-spacing-xxl);
}

.sub-title {
    font-family: var(--theme-font-family-cursive);
    font-weight: var(--theme-font-weight-bold);
    font-size: var(--theme-font-size-subtitle);
}

.container-fluid {
    position: relative;
    border-bottom: var(--theme-border-light);
}

@media (min-width: 992px) {
    .container-fluid::before {
        content: "";
        position: absolute;
        width: 15%;
        height: 100%;
        top: 0;
        left: 0;
        background: var(--bs-dark);
        z-index: -1;
    }
}

@media (max-width: 991px) {
    .container-fluid {
        border: none;
    }

    .container-fluid .header-content,
    .container-fluid .about-header,
    .container-fluid .education-header,
    .container-fluid .experience-header,
    .container-fluid .skills-header,
    .container-fluid .service-header,
    .container-fluid .portfolio-header,
    .container-fluid .blog-header,
    .container-fluid .testimonial-header,
    .container-fluid .contact-header {
        padding: 25px;
    }

    .container-fluid .header-img,
    .container-fluid .about-content,
    .container-fluid .education-content,
    .container-fluid .experience-content,
    .container-fluid .skills-content,
    .container-fluid .service-content,
    .container-fluid .portfolio-content,
    .container-fluid .blog-content,
    .container-fluid .testimonial-content,
    .container-fluid .contact-content {
        padding-left: 0;
        padding-top: 25px;
    }
}

/*** Navbar Start ***/
.nav-section {
    position: relative;
}

.nav-section .navbar {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 50%;
    right: calc(var(--theme-navbar-width) - 100%);
    transform: translateY(-50%);
    z-index: var(--theme-z-navbar);
}

.navbar.navbar-light {
    background: transparent;
    width: 100%;
}

.navbar .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar .navbar-nav .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link span {
    width: var(--theme-navbar-width);
    height: var(--theme-navbar-width);
    margin-right: var(--theme-spacing-sm);
    border-right: var(--theme-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--bs-body);
    transition: var(--theme-transition);
}

.nav-section .navbar .navbar-nav .nav-item {
    height: var(--theme-navbar-width);
    padding: 0;
    margin-bottom: var(--theme-spacing-xs);
    border: var(--theme-border-light);
    background: var(--bs-white);
    color: var(--bs-body);
    font-size: var(--theme-font-size-base);
    font-weight: var(--theme-font-weight-bold);
    transition: var(--theme-transition);
}

.nav-section .navbar .navbar-nav .nav-item:hover {
    margin-right: calc(100% + var(--theme-navbar-width));
    color: var(--bs-primary);
}

/* --- Grouped sidebar (collapsible groups) --- */
.nav-section .navbar .navbar-nav .nav-group-toggle {
    position: relative;
    cursor: pointer;
}

.nav-section .navbar .navbar-nav .nav-group-toggle .nav-group-caret {
    margin-left: auto;
    margin-right: var(--theme-spacing-sm);
    font-size: 0.7em;
    opacity: 0.6;
    transition: transform var(--theme-transition), opacity var(--theme-transition);
}

.nav-section .navbar .navbar-nav .nav-group-toggle[aria-expanded="true"] .nav-group-caret {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-section .navbar .navbar-nav .nav-group-toggle[aria-expanded="true"] {
    color: var(--bs-primary);
}

.nav-section .navbar .navbar-nav .nav-group-menu {
    width: 100%;
}

/* Children: slightly inset + smaller icon rail to read as a sub-level. */
.nav-section .navbar .navbar-nav .nav-group-child {
    margin-left: var(--theme-spacing-sm);
    border-left: 3px solid var(--bs-primary);
    font-weight: var(--theme-font-weight-base, 400);
}

.nav-section .navbar .navbar-nav .nav-group-child span {
    font-size: 0.85em;
    opacity: 0.9;
}

/*** Navbar End ***/

/*** About Start ***/
.about-content .about-img {
    position: relative;
    overflow: hidden;
}

.about-content .about-img .sosial-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    padding: var(--theme-spacing-xl);
    background: var(--theme-overlay);
    transition: var(--theme-transition);
}

.about-content .about-img:hover .sosial-icon {
    top: 0;
}

/*** About End ***/

/*** Education Start ***/
.education-content .education-item {
    position: relative;
    overflow: hidden;
    box-shadow: var(--theme-box-shadow);
    transition: var(--theme-transition);
    z-index: 1;
}

.education-content .education-item:hover {
    box-shadow: var(--theme-box-shadow-hover);
}

.education-content .education-item::after {
    content: "";
    position: absolute;
    width: 25%;
    height: 100%;
    top: 50%;
    left: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 100px solid;
    border-color: var(--bs-light) transparent var(--bs-light) var(--bs-light);
    z-index: -1;
}

.education-content .education-item::before {
    content: "";
    position: absolute;
    width: 25%;
    height: 100%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border: 100px solid;
    border-color: var(--bs-light) var(--bs-light) var(--bs-light) transparent;
    z-index: -1;
}

/*** Education End ***/

/*** Experience Start ***/
.experience-content .experience-item {
    position: relative;
    overflow: hidden;
    box-shadow: var(--theme-box-shadow);
    transition: var(--theme-transition);
    z-index: 1;
}

.experience-content .experience-item:hover {
    box-shadow: var(--theme-box-shadow-hover);
}

.experience-content .experience-item::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    top: 50%;
    left: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 100px solid;
    border-color: var(--bs-light) transparent var(--bs-light) var(--bs-light);
    z-index: -1;
}

.experience-content .experience-item::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border: 100px solid;
    border-color: var(--bs-light) var(--bs-light) var(--bs-light) transparent;
    z-index: -1;
}

/*** Experience End ***/

/*** Skills Start ***/
.skills-content .skills-item {
    position: relative;
}

.skills-content .skills-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50% 50% 50% 50% / 28% 28% 72% 72%;
    background: var(--bs-light);
    z-index: -1;
}

/*** Skills End ***/

/*** Service Start ***/
.service-content .service-item {
    box-shadow: var(--theme-box-shadow);
    transition: var(--theme-transition);
}

.service-content .service-item:hover i {
    color: var(--bs-primary);
}

.service-content .service-item:hover {
    box-shadow: var(--theme-box-shadow-hover);
}

/*** Service End ***/

/*** Portfolio Start ***/
.portfolio-content .portfolio-item .portfolio-img {
    position: relative;
    width: 100%;
    height: var(--theme-portfolio-height);
}

.portfolio-item .portfolio-img .portfolio-img-inner {
    width: 100%;
    height: var(--theme-portfolio-height);
    position: absolute;
    top: 0;
    left: 0;
}

.portfolio-item .portfolio-img .portfolio-img-inner img {
    width: 100%;
    height: var(--theme-portfolio-height);
    object-fit: cover;
}

.portfolio-content .portfolio-item .view-img {
    display: flex;
    align-items: center;
    justify-content: end;
}

.portfolio-content .portfolio-item .portfolio-img .portfolio-img-inner {
    visibility: hidden;
    transition: var(--theme-transition);
}

.portfolio-content .portfolio-item:hover .portfolio-img .portfolio-img-inner {
    visibility: visible;
    transform: rotate(-6deg);
}

/*** Portfolio End ***/

/*** Blog Start ***/
.blog-content .blog-btn a {
    color: var(--bs-primary);
}

.blog-content .blog-btn a:hover {
    color: var(--bs-dark);
}

/*** Blog End ***/

/*** Testimonial Start ***/
.testimonial-carousel {
    position: relative;
    transition: var(--theme-transition);
}

.testimonial-carousel .testimonial-item {
    padding: var(--theme-spacing-xxl);
}

.testimonial-carousel .owl-nav .owl-prev {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--theme-spacing-xxl);
    height: var(--theme-spacing-xxl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-white);
    color: var(--bs-primary);
    transition: var(--theme-transition);
}

.testimonial-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: var(--theme-spacing-xxl);
    height: var(--theme-spacing-xxl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-white);
    color: var(--bs-primary);
    transition: var(--theme-transition);
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.testimonial-carousel .owl-dots {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--theme-spacing-xxl) var(--theme-spacing-xxl) var(--theme-spacing-xxl);
    transition: var(--theme-transition);
}

@media (max-width: 576px) {
    .testimonial-carousel .owl-dots {
        justify-content: start;
    }
}

.testimonial-carousel .owl-dots .owl-dot img {
    width: var(--theme-navbar-width);
    height: var(--theme-navbar-width);
    margin-right: var(--theme-spacing-md);
    border: 3px solid var(--bs-white);
    transition: var(--theme-transition);
}

.testimonial-carousel .owl-dots .owl-dot.active img {
    width: 70px;
    height: 70px;
    border: 3px solid var(--bs-primary);
}

/*** Testimonial End ***/

/*** Footer Start ***/
@media (max-width: 991px) {
    .container-fluid .footer-content {
        padding-left: 0;
    }
}

/* Footer page links (gated by nav.X) — match dark/tech footer aesthetic. */
.footer .footer-page-links {
    columns: 2;
    column-gap: var(--theme-spacing-md, 1rem);
}

.footer .footer-page-links li {
    margin-bottom: var(--theme-spacing-xs, 0.5rem);
    break-inside: avoid;
}

.footer .footer-page-links .footer-link {
    position: relative;
    color: var(--bs-body, #adb5bd);
    padding-left: 1rem;
    transition: var(--theme-transition);
}

.footer .footer-page-links .footer-link::before {
    content: "\f105"; /* fa-angle-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--bs-primary);
    transition: var(--theme-transition);
}

.footer .footer-page-links .footer-link:hover {
    color: var(--bs-primary);
    padding-left: 1.35rem;
}

/*** Footer End ***/

/*** Language Bar Start ***/
.language-bar {
    background: var(--language-bar-bg);
    padding: var(--language-bar-spacing) 0;
    font-size: var(--language-bar-font-size);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: var(--theme-z-language-bar);
}

.language-selector {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--language-bar-spacing);
}

.language-selector form {
    display: flex;
    align-items: center;
    gap: var(--language-bar-spacing);
    margin: 0;
}

.active-language {
    color: var(--language-bar-active);
    text-decoration: none;
    font-weight: var(--theme-font-weight-semi);
    padding: var(--language-bar-padding);
    border-radius: var(--language-bar-border-radius);
    background: rgba(255, 255, 255, 0.1);
    transition: var(--language-bar-transition);
}

.active-language:hover {
    color: var(--language-bar-active);
    background: rgba(255, 255, 255, 0.15);
}

.language-link {
    color: var(--language-bar-text);
    background: transparent;
    border: none;
    padding: var(--language-bar-padding);
    border-radius: var(--language-bar-border-radius);
    font-weight: var(--theme-font-weight-normal);
    font-size: var(--language-bar-font-size);
    cursor: pointer;
    transition: var(--language-bar-transition);
}

.language-link:hover {
    color: var(--language-bar-text-hover);
    background: rgba(255, 255, 255, 0.1);
}

.language-separator,
.preview-separator {
    color: var(--language-bar-separator);
    margin: 0 4px;
}

.preview-links {
    display: flex;
    align-items: center;
    gap: var(--language-bar-spacing);
    margin-left: var(--language-bar-spacing);
}

.nav-icon-btn {
    color: var(--language-bar-text);
    text-decoration: none;
    padding: 6px var(--language-bar-spacing);
    border-radius: var(--language-bar-border-radius);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--theme-btn-square-sm);
    min-height: var(--theme-btn-square-sm);
    transition: var(--language-bar-transition);
}

.nav-icon-btn:hover {
    color: var(--language-bar-text-hover);
    background: var(--language-bar-active);
    transform: translateY(-1px);
}

.nav-icon-btn i {
    font-size: var(--theme-font-size-base);
}

/* Responsive */
@media (max-width: 768px) {
    .language-selector {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .language-bar {
        padding: 6px 0;
    }

    .active-language,
    .language-link,
    .nav-icon-btn {
        padding: 3px 6px;
        font-size: 12px;
    }

    .preview-links {
        margin-left: 6px;
    }
}

/*** Language Bar End ***/

/* =========================================
   AUDIT CONTRASTE — mode nuit (jour + nuit)
   Le bootstrap.min.css du thème est COMPILÉ en clair : couleurs en dur
   (body #787878/#fff, titres #16243d, --bs-dark #16243D) qui n'utilisent pas
   les variables -> le dark-mode.css partagé (piloté par variables) ne peut rien.
   On rebâtit le mode nuit par-dessus, piloté par une PALETTE de tokens
   (surchargeable par la customization du tenant), jamais de hex dispersé.
   ========================================= */

/* Palette nuit + footer : tokens centralisés (surchargeables). */
:root {
    --dev-night-bg: #0f1419;          /* fond de page nuit */
    --dev-night-surface: #161c24;     /* cartes / surfaces nuit */
    --dev-night-body: #cdd3da;        /* texte courant nuit */
    --dev-night-heading: #eef1f5;     /* titres nuit */
    --dev-night-primary: #5aa0ff;     /* bleu primaire éclairci pour la nuit */
    --dev-footer-link: rgba(255, 255, 255, 0.75);  /* liens du footer sombre */
    --dev-footer-link-hover: #ffffff;
}

[data-bs-theme="dark"] body {
    background-color: var(--dev-night-bg) !important;
    color: var(--dev-night-body) !important;
}
/* Titres compilés en navy #16243d -> clairs en nuit. */
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6 {
    color: var(--dev-night-heading) !important;
}
/* Surfaces posées en dur (fonds clairs) -> sombres. */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .service-item,
[data-bs-theme="dark"] .feature-item {
    background-color: var(--dev-night-surface) !important;
}

/* Footer .bg-dark (navy, les 2 modes) : liens link-body-emphasis restaient
   sombres -> clairs. */
.footer .footer-link,
.footer .footer-page-links .footer-link {
    color: var(--dev-footer-link) !important;
}
.footer .footer-link:hover,
.footer .footer-page-links .footer-link:hover {
    color: var(--dev-footer-link-hover) !important;
}

/* Nuit : .text-dark (navy #16243d compilé) -> clair, sauf sur pastille jaune. */
[data-bs-theme="dark"] .text-dark:not(.bg-warning) {
    color: var(--dev-night-body) !important;
}

/* Nuit : bleu primaire (#015FC9/#0d6efd) trop sombre sur surfaces sombres. */
:root[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: var(--dev-night-primary);
}
[data-bs-theme="dark"] .text-primary {
    color: var(--dev-night-primary) !important;
}
/* Le bootstrap compilé fige .btn-outline-primary{color:#015fc9} en dur (pas de
   var --bs-btn-color) : on surcharge la couleur/bordure directement. */
[data-bs-theme="dark"] .btn-outline-primary {
    color: var(--dev-night-primary) !important;
    border-color: var(--dev-night-primary) !important;
    --bs-btn-hover-bg: var(--dev-night-primary);
    --bs-btn-hover-color: var(--dev-night-bg);
}
[data-bs-theme="dark"] .bg-primary-subtle.text-primary {
    color: var(--dev-night-primary) !important;
}

/* Pastilles pleines warning/info : texte blanc illisible sur jaune/cyan ->
   texte sombre (les 2 modes). */
.badge.bg-warning,
.badge.bg-info {
    color: var(--bs-dark) !important;
}

/* Filet de sécurité badges : le champ `color` des catégories (données démo)
   contient parfois un hex ou un nom non-Bootstrap -> classe `bg-#6f42c1` /
   `bg-purple` invalide -> badge sans fond (blanc sur blanc). On donne un fond
   par défaut ; les vraies classes bg / text-bg (en !important chez Bootstrap)
   reprennent la main pour les valeurs valides. */
:where(.badge:not([class*="text-"])) {
    background-color: var(--bs-secondary);
    color: #ffffff;
}

/* AUDIT AA — corrections de contraste ciblées. */
/* Badge à fond de catégorie (demo-data, ex. #800080) : texte noir illisible -> blanc. */
.badge[style*="background"] { color: #ffffff !important; }
/* Étoiles / warning jaune sur blanc (jour). */
:root:not([data-bs-theme="dark"]) .text-warning { color: #bb8e05 !important; }
/* Flèches de pagination grises trop claires sur blanc. */
.page-link .fas, .page-link .fa, .pagination .fas { color: #6c757d !important; }
/* Nuit : liens accent + info pagination + icône vue active. */
[data-bs-theme="dark"] a.text-decoration-none,
[data-bs-theme="dark"] a.text-primary,
[data-bs-theme="dark"] .text-primary { color: #3d85d6 !important; }
[data-bs-theme="dark"] .pagination-info,
[data-bs-theme="dark"] .pagination-info .text-muted { color: #6c747a !important; }
[data-bs-theme="dark"] #listView .fas,
[data-bs-theme="dark"] .btn-primary .fas { color: #ffffff !important; }