/*
 * Arc_Prod File Role: Layout foundation layer for tenant runtime.
 * File: public_html/assets/xhelpers/css/layout.css
 *
 * Résultat de la fusion Phase 1 (2026-03-13) des 5 fichiers legacy :
 *   base.css + sidebar-pro.css + responsive-hardening.css
 *   + pwa-mobile.css + mobile-unified.css
 *
 * Rôle : positionnement, sidebar, navbar, footer, responsive, PWA, mobile.
 * Ne contient pas de variables (→ tokens.css) ni de design overrides (→ redesign/).
 */

/* ══ Absorbé : base.css ════════════════════════════════════════════ */

/**
 * XHelpers - XHelpers V1.0
 * Base CSS - Styles de base et layout
 *
 * @package   XHelpers
 * @version   V1.0
 * @author    ULB
 */

/* ================================================================ */
/* LAYOUT DE BASE                                                   */
/* ================================================================ */

/* Densité globale desktop: réduit légèrement l'échelle visuelle
   sans impacter la lisibilité mobile. */
html {
    font-size: 15px;
}

@media (max-width: 991.98px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--light-bg);
    color: var(--dark-text);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: var(--navbar-height) 0 0;
    margin: 0;
}

/* ================================================================ */
/* LAYOUT SIDEBAR RESPONSIVE                                        */
/* ================================================================ */

@media (min-width: 992px) {
    /* Gestion du décalage du contenu selon l'état de la sidebar */
    body {
        padding-left: 0;
    }

    /* Contenu par défaut - sidebar ouverte (240px) */
    .main-content-area {
        margin-left: 240px;
        max-width: calc(100vw - 240px);
        transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1),
                    max-width 0.25s cubic-bezier(0.4,0,0.2,1);
    }

    /* Quand sidebar fermée - icon-only (72px) */
    html.sidebar-collapsed .main-content-area {
        margin-left: 72px;
        max-width: calc(100vw - 72px);
    }

    /* Assurer que les containers s'adaptent */
    .main-content-area .container-fluid {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .custom-container {
        max-width: min(1100px, calc(100% - 2rem));
    }
}

@media (max-width: 991.98px) {
    body {
        padding-left: 0;
    }
}

/* Hauteur de navbar réduite sur mobile */
@media (max-width: 767.98px) {
    body {
        padding-top: 56px !important;
    }
}

@media (max-width: 479.98px) {
    body {
        padding-top: 52px !important;
    }
}

/* ================================================================ */
/* CONTAINERS ET ZONES PRINCIPALES                                 */
/* ================================================================ */

.main-content-area {
    flex-grow: 1;
    margin-top: 0;
    padding-top: 1rem;
}

/* Neutralise les mt-* Bootstrap redondants sur les containers de premier niveau.
   Les vues ajoutent mt-4 sur leur container principal mais le padding-top
   du main-content-area suffit — on évite ainsi le double espacement. */
body.arcprod-tenant .main-content-area > * > .container[class*="mt-"],
body.arcprod-tenant .main-content-area > .container[class*="mt-"] {
    margin-top: 0 !important;
}

.custom-container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ================================================================ */
/* FOOTER                                                           */
/* ================================================================ */

footer {
    position: static;
    width: 100%;
    min-height: var(--footer-height);
    display: block;
    margin-top: auto;
    background: var(--bg-primary);
}

/* Footer slim runtime */
.footer-slim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: transparent;
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
    flex-wrap: wrap;
}

.footer-slim-org,
.footer-slim-app {
    font-weight: 500;
}

.footer-slim-ulb-logo {
    height: 26px;
    width: 26px;
    object-fit: contain;
    border-radius: 4px;
    opacity: 0.78;
    flex-shrink: 0;
}

.footer-slim-sep {
    opacity: 0.4;
}

.footer-slim-vbar {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: currentColor;
    opacity: 0.25;
    border-radius: 1px;
    flex-shrink: 0;
}

.footer-slim-link {
    color: var(--brand-text);
    text-decoration: none;
    font-weight: 500;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.footer-slim-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Footer desktop : décalage identique à .main-content-area */
@media (min-width: 992px) {
    footer {
        margin-left: 240px;
        width: calc(100vw - 240px);
        transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1),
                    width 0.25s cubic-bezier(0.4,0,0.2,1);
    }

    html.sidebar-collapsed footer {
        margin-left: 72px;
        width: calc(100vw - 72px);
    }
}

/* ================================================================ */
/* MODE VISITEUR — pages publiques, utilisateur non authentifie     */
/* ================================================================ */

@media (min-width: 992px) {
    body.visitor-mode .main-content-area {
        margin-left: 0 !important;
        max-width: 100vw !important;
    }

    body.visitor-mode footer {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Controles visiteur dans la navbar */
.visitor-nav-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.visitor-lang-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-text);
    border: 1px solid var(--xh-primary, #0f4c81);
    transition: background 0.15s, color 0.15s;
}

.visitor-lang-btn.active,
.visitor-lang-btn:hover {
    background: var(--xh-primary, #0f4c81);
    color: var(--text-on-primary, #fff);
}

.visitor-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--xh-primary, #0f4c81);
    color: var(--text-on-primary, #fff);
    transition: opacity 0.15s;
}

.visitor-login-btn:hover {
    opacity: 0.88;
    /* Etait #fff en dur : le fond reste la marque au survol, donc 2,28:1 sur un
       vert clair alors que l'etat de repos utilisait deja --text-on-primary. */
    color: var(--text-on-primary, #fff);
}

/* ================================================================ */
/* IMAGES RESPONSIVES GLOBALES                                     */
/* ================================================================ */

/* Images responsives par défaut */
.tutorial-content img,
.faq-content img,
.announcement-content img,
[id*="content"] img,
[id*="answer"] img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
}

/* Images sans dimensions personnalisées = entièrement responsive */
.tutorial-content img:not([width]):not([height]),
.faq-content img:not([width]):not([height]),
.announcement-content img:not([width]):not([height]),
[id*="content"] img:not([width]):not([height]),
[id*="answer"] img:not([width]):not([height]) {
    width: auto !important;
}

/* Classe img-fluid = responsive : respecte la largeur saisie, plafonnée au conteneur, hauteur proportionnelle */
img.img-fluid {
    max-width: 100% !important;
    height: auto !important;
}

/* ================================================================ */
/* BOOTSTRAP OVERRIDES                                             */
/* ================================================================ */

.bg-success {
    background-color: var(--pastel-success) !important;
}

.text-success {
    color: var(--brand-text) !important;
}

.btn-success {
    background-color: var(--pastel-success) !important;
    border-color: var(--pastel-success) !important;
    color: white !important;
}

.btn-success:hover {
    filter: brightness(95%);
}

.btn-outline-success {
    color: var(--brand-text) !important;
    border-color: var(--pastel-success) !important;
}

.btn-outline-success:hover {
    background-color: var(--pastel-success) !important;
    color: white !important;
}

/* ================================================================ */
/* RESPONSIVE DESIGN                                                */
/* ================================================================ */

/* Footer normal - plus besoin d'espace en bas */
@media (max-width: 767.98px) {
    .main-content-area {
        margin-bottom: 1rem;
    }
}

@media (max-width: 479.98px) {
    .main-content-area {
        margin-bottom: 1rem;
    }

    .custom-container {
        width: 95%;
        padding: 0 0.5rem;
    }
}

/* ================================================================ */
/* ACCESSIBILITÉ                                                   */
/* ================================================================ */

@media (prefers-reduced-motion: reduce) {
    body,
    .main-content-area,
    .custom-container {
        transition: none !important;
    }
}

/* ================================================================ */
/* FOCUS STATES                                                     */
/* ================================================================ */

.btn-success:focus,
.btn-outline-success:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* ================================================================ */
/* PRINT                                                            */
/* ================================================================ */

@media print {
    body {
        padding: 0 !important;
    }

    footer {
        position: static !important;
        border: none !important;
        background: none !important;
    }
}

/* ================================================================ */
/* UTILITIES                                                        */
/* ================================================================ */

/* ══ Absorbé : sidebar-pro.css ════════════════════════════════════ */

/**
 * XHelpers - XHelpers V1.0
 * Sidebar Pro CSS - Sidebar moderne
 *
 * @package   XHelpers
 * @version   V1.0
 * @author    ULB
 */

/* ================================================================ */
/* SIDEBAR CONTAINER                                                */
/* ================================================================ */

.offcanvas-sidebar {
    /* background: remplacé par redesign/01-layout-home.css (fond clair) */
    z-index: 1045;
    box-shadow: var(--shadow-soft);
}

/* ================================================================ */
/* SIDEBAR HEADER                                                   */
/* ================================================================ */

.offcanvas-header {
    padding: 1rem 1.5rem;
    /* background: remplacé par redesign/01-layout-home.css */
    border-bottom: 1px solid rgba(0,0,0,0.07);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.offcanvas-header .btn-close {
    opacity: 0.6;
    transition: var(--lsh-transition-fast);
    filter: none;
}

.offcanvas-header .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Ce bouton, le titre et le sous-titre du menu mobile etaient BLANCS, ce qui
   supposait un en-tete au fond de marque plein. L'en-tete a depuis recu
   --rd-sidebar-bg, un pastel a 6 % de marque sur #f8fafc : mesure du 2026-08-02
   en 375x812, mode clair, tenant client1 : 1,07:1 pour l'icone de fermeture,
   1,08:1 pour le titre et 1,07:1 pour le sous-titre. Les trois etaient donc
   invisibles, y compris le SEUL bouton qui ferme le menu. En mode sombre tout
   allait bien, parce que dark-mode.css redefinit ces trois couleurs en
   !important : c'est le symetrique exact du defaut de la V1.9.9, ou un seul
   theme avait ete suivi. Les tokens ci-dessous conviennent aux deux. */
.offcanvas-header .sidebar-close-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-secondary);
    transition: var(--lsh-transition-fast);
}

.offcanvas-header .sidebar-close-btn i {
    font-size: 1.75rem;
    line-height: 1;
}

.offcanvas-header .sidebar-close-btn:hover {
    background: color-mix(in srgb, var(--text-primary) 14%, transparent);
    transform: none;
}

.offcanvas-header .sidebar-close-btn:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* ================================================================ */
/* SIDEBAR BODY                                                     */
/* ================================================================ */

.offcanvas-body {
    /* background: remplacé par redesign/01-layout-home.css */
    padding: 1rem 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ================================================================ */
/* SIDEBAR NAVIGATION                                               */
/* ================================================================ */

.sidebar-item {
    margin: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    color: white;  /* Texte blanc sur fond bleu ULB */
    text-decoration: none;
    border-radius: 0;
    margin: 0;
    border: none;
    border-left: 3px solid transparent;
    transition: var(--lsh-transition-normal);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
}

.sidebar-link:hover {
    background: var(--ulb-blue-light);  /* Hover bleu ULB plus clair */
    color: var(--text-on-primary, white);  /* Texte blanc sur fond bleu ULB */
    border-left-color: white;  /* Bordure blanche sur fond bleu */
    text-decoration: none;
}

.sidebar-link.active {
    background: var(--ulb-blue-dark);  /* Actif bleu ULB plus foncé */
    color: var(--text-on-primary, white);  /* Texte blanc pour lien actif */
    border-left-color: white;  /* Bordure blanche sur fond bleu */
    font-weight: 600;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-green);
}

/* ================================================================ */
/* SIDEBAR ICONS                                                    */
/* ================================================================ */

.sidebar-link i {
    margin-right: 1rem;
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: var(--lsh-transition-normal);
}

.sidebar-link:hover i {
    color: white  /* Icônes blanches sur fond bleu ULB */;
    transform: scale(1.05);
}

.sidebar-link.active i {
    color: white  /* Icônes blanches sur fond bleu ULB */;
}

/* Icons spéciaux */
.sidebar-link i.bi-exclamation-triangle-fill {
    color: var(--danger-color);
    animation: pulse 2s infinite;
}

.sidebar-link:hover i.bi-exclamation-triangle-fill,
.sidebar-link.active i.bi-exclamation-triangle-fill {
    color: var(--danger-color);
}

/* ================================================================ */
/* SIDEBAR TEXT & BADGES                                            */
/* ================================================================ */

.sidebar-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--lsh-transition-normal);
}

.sidebar-link .badge {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
    margin-left: auto;
    border-radius: 10px;
}

.sidebar-link .fw-bold {
    font-weight: 600 !important;
}

/* ================================================================ */
/* SIDEBAR DIVIDERS                                                 */
/* ================================================================ */

.sidebar-divider {
    height: 1px;
    background: var(--border-color);
    margin: 1rem 1.5rem;
    opacity: 0.5;
}

/* ================================================================ */
/* DESKTOP SIDEBAR (≥992px)                                         */
/* ================================================================ */

@media (min-width: 992px) {
    /* ── Sidebar desktop : pleine hauteur, flush-left ── */
    #offcanvasSidebar {
        position: fixed !important;
        left: 0 !important;
        top: calc(var(--navbar-height, 68px) + var(--ann-bar-height, 0px)) !important;
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        height: calc(100vh - var(--navbar-height, 68px) - var(--ann-bar-height, 0px)) !important;
        visibility: visible !important;
        z-index: 1030 !important;
        /* background: remplacé par redesign/01-layout-home.css (fond clair) */
        border: none !important;
        border-right: 1px solid var(--rd-sidebar-border, #e2e8f0) !important;
        border-radius: 0 !important;
        box-shadow: 4px 0 20px rgba(0,20,60,0.12) !important;
        transition: width 0.25s cubic-bezier(0.4,0,0.2,1),
                    min-width 0.25s cubic-bezier(0.4,0,0.2,1) !important;
        padding: 0.5rem 0.375rem !important;
        transform: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Scrollbar custom sur la sidebar */
    #offcanvasSidebar::-webkit-scrollbar { width: 4px; }
    #offcanvasSidebar::-webkit-scrollbar-track { background: transparent; }
    #offcanvasSidebar::-webkit-scrollbar-thumb {
        background: var(--sidebar-scrollbar-thumb);
        border-radius: 4px;
    }

    /* Sidebar collapsed */
    html.sidebar-collapsed #offcanvasSidebar {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        padding: 0.5rem 0.25rem !important;
    }

    html.sidebar-collapsed #offcanvasSidebar .offcanvas-header {
        display: none;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-link {
        justify-content: center;
        padding: 0.75rem 0;
        margin: 0.15rem auto;
        width: 52px;
        border-left: none;
        border-radius: 12px;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-link i {
        margin-right: 0;
        width: auto;
        font-size: 1.2rem;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-text {
        opacity: 0;
        width: 0;
        overflow: hidden;
        display: none !important;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-link .badge {
        display: none;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-link:hover {
        background: rgba(255,255,255,0.12);
        border-radius: 12px;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-link.active {
        background: rgba(255,255,255,0.18);
        border-radius: 12px;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-link.active::before {
        display: none;
    }

    /* Bootstrap overrides for desktop */
    #offcanvasSidebar .offcanvas-header .btn-close,
    #offcanvasSidebar .offcanvas-header .sidebar-close-btn {
        display: none !important;
    }

    .offcanvas-backdrop {
        display: none !important;
    }

    #offcanvasSidebar.offcanvas {
        --bs-offcanvas-transition: none !important;
    }
}

/* ================================================================ */
/* MOBILE SIDEBAR (≤991px)                                         */
/* ================================================================ */

@media (max-width: 991.98px) {
    /* Sous 992 px la sidebar n'est plus un panneau permanent mais un OVERLAY modal,
       et elle doit donc passer AU-DESSUS de la navbar. Elle etait a 1045 contre 1200
       pour la navbar : constate le 2026-08-02 en 375x812 par
       document.elementFromPoint(60, 25), qui renvoyait un element de la navbar au
       milieu du titre « Navigation ». Le titre (y 14 a 34) et le sous-titre
       (y 37 a 57) etaient entierement sous la navbar (y 0 a 52), et le bouton de
       fermeture (y 14 a 58) n'en depassait que de 6 px sur 44 : le seul bouton qui
       ferme le menu etait donc pratiquement inatteignable.
       Valeurs choisies dans la fourchette libre 1230-1280, au-dessus de la navbar
       (1200, .navbar-container 1201, .user-dropdown 1220) et SOUS les modales
       (.modal-backdrop 1290, .modal 1300, .template-preview-modal 1350) : l'ordre
       reste correct si une modale s'ouvre. CLAUDE.md enonce « overlay au-dessus
       navbar : z-index >= 1300 » ; 1300 exactement entrerait en collision avec les
       modales, d'ou 1250, qui respecte l'intention.
       NE PAS reporter ces valeurs dans le bloc @media (min-width: 992px) : en
       desktop la sidebar est un panneau permanent, pose sous la navbar a 1030, et
       son backdrop y est masque. */
    #offcanvasSidebar.offcanvas,
    .offcanvas-sidebar {
        z-index: 1250 !important;
    }

    .offcanvas-backdrop {
        z-index: 1240 !important;
    }

    .offcanvas-sidebar {
        width: min(82vw, 320px) !important;
        max-width: min(82vw, 320px);
        border-right: none;
        box-shadow: 8px 0 24px rgba(15, 23, 42, 0.25);
    }

    .offcanvas-header {
        /* background: redesign/01-layout-home.css */
        border-bottom: 1px solid rgba(0,0,0,0.07);
        padding: 0.85rem 0.9rem;
        min-height: 68px;
    }

    .sidebar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
    }

    .sidebar-mobile-title-wrap {
        min-width: 0;
    }

    /* Voir la note du bouton de fermeture plus haut : ces deux couleurs blanches
       datent d'un en-tete au fond de marque plein et donnaient 1,08:1 sur le
       pastel actuel, en mode clair. */
    .sidebar-mobile-title {
        color: var(--text-primary);
        font-weight: 700;
        font-size: 1.03rem;
        line-height: 1.2;
    }

    .sidebar-mobile-subtitle {
        color: var(--text-secondary);
        font-size: 0.82rem;
        margin-top: 0.16rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 210px;
    }

    .offcanvas-body {
        padding-top: 0.6rem;
        padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    }

    .sidebar-link,
    .sidebar-section-toggle {
        padding: 0.82rem 1rem;
        min-height: 46px;
        font-size: 0.96rem;
    }

    .sidebar-link i,
    .sidebar-section-toggle i:first-child {
        margin-right: 0.82rem;
        width: 1.2rem;
        font-size: 1.1rem;
    }

    .sidebar-text {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
        opacity: 1 !important;
        width: auto !important;
    }

    /* Mobile: on force l'affichage complet même si un état "collapsed"
       est présent dans localStorage pour desktop. */
    html.sidebar-collapsed #offcanvasSidebar .sidebar-link,
    html.sidebar-collapsed #offcanvasSidebar .sidebar-section-toggle {
        width: auto !important;
        height: auto !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: 3px solid transparent !important;
        padding: 0.82rem 1rem !important;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-link i,
    html.sidebar-collapsed #offcanvasSidebar .sidebar-section-toggle i:first-child {
        margin-right: 0.82rem !important;
        width: 1.2rem !important;
        font-size: 1.1rem !important;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-text {
        display: inline !important;
        opacity: 1 !important;
        width: auto !important;
    }

    #offcanvasSidebar.offcanvas.show + .offcanvas-backdrop,
    .offcanvas-backdrop.show {
        background-color: rgba(15, 23, 42, 0.42);
        backdrop-filter: blur(2px);
    }
}

@media (max-width: 575.98px) {
    .offcanvas-sidebar {
        width: min(80vw, 300px) !important;
        max-width: min(80vw, 300px);
    }

    .sidebar-link {
        padding: 0.78rem 0.92rem;
        font-size: 0.92rem;
    }

    .sidebar-link i {
        margin-right: 0.76rem;
        font-size: 1.03rem;
    }

    .sidebar-mobile-subtitle {
        max-width: 175px;
        font-size: 0.8rem;
    }
}

/* ================================================================ */
/* ANIMATIONS                                                       */
/* ================================================================ */

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ================================================================ */
/* UTILITIES & OVERRIDES                                            */
/* ================================================================ */

.sidebar-link[href*="forumStats"]:hover i,
.sidebar-link[href*="contentStats"]:hover i,
.sidebar-link[href*="adminAnnouncements"]:hover i {
    color: white  /* Icônes blanches sur fond bleu ULB */ !important;
    transform: scale(1.1);
}

/* ================================================================ */
/* ACCESSIBILITY                                                    */
/* ================================================================ */

.sidebar-link:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-link,
    .sidebar-link i,
    .sidebar-text,
    #offcanvasSidebar {
        transition: none !important;
        animation: none !important;
    }
}

/* ================================================================ */
/* SIDEBAR DESKTOP — NAV PILL STYLE V2                             */
/* ================================================================ */

@media (min-width: 992px) {
    /* Dividers lisibles sur fond bleu */
    #offcanvasSidebar .sidebar-divider {
        background: rgba(255, 255, 255, 0.15);
        margin: 0.6rem 0.75rem;
    }

    /* Pill shape pour liens expanded */
    html:not(.sidebar-collapsed) #offcanvasSidebar .sidebar-link {
        margin: 0.1rem 0.5rem;
        border-radius: 10px;
        padding: 0.65rem 1rem;
        border-left: none !important;
        font-size: 0.875rem;
    }

    html:not(.sidebar-collapsed) #offcanvasSidebar .sidebar-link:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-left: none !important;
    }

    html:not(.sidebar-collapsed) #offcanvasSidebar .sidebar-link.active {
        background: rgba(255, 255, 255, 0.18) !important;
        border-left: none !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15),
                    0 2px 8px rgba(0, 0, 0, 0.18);
    }

    html:not(.sidebar-collapsed) #offcanvasSidebar .sidebar-link.active::before {
        display: none !important;
    }

    /* Icon légèrement plus grande pour meilleur ratio */
    html:not(.sidebar-collapsed) #offcanvasSidebar .sidebar-link i {
        font-size: 1rem;
        margin-right: 0.75rem;
    }
}

/* ================================================================ */
/* HIGH CONTRAST                                                    */
/* ================================================================ */

@media (prefers-contrast: high) {
    .offcanvas-sidebar {
        border-right: 2px solid #000;
    }

    .sidebar-link {
        border: 1px solid transparent;
    }

    .sidebar-link:hover,
    .sidebar-link.active {
        border: 1px solid #000;
    }
}

/* ================================================================ */
/* PRINT                                                            */
/* ================================================================ */

@media print {
    .offcanvas-sidebar {
        display: none !important;
    }
}

/* =========================================================
   SIDEBAR ADMIN GROUP + POSITIONING TUNING
   ========================================================= */
.sidebar-section-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-left: 3px solid transparent;
    transition: var(--lsh-transition-normal);
}

.sidebar-section-toggle:hover {
    background: var(--ulb-blue-light);
    border-left-color: #ffffff;
}

.sidebar-section-toggle i:first-child {
    margin-right: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-admin-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.sidebar-section-toggle[aria-expanded="true"] .sidebar-admin-chevron {
    transform: rotate(180deg);
}

.sidebar-admin-panel {
    padding-bottom: 0.35rem;
}

@media (min-width: 992px) {
    html.sidebar-collapsed #offcanvasSidebar .sidebar-link,
    html.sidebar-collapsed #offcanvasSidebar .sidebar-section-toggle {
        width: 52px;
        height: 44px;
        padding: 0;
        margin: 0.15rem auto;
        justify-content: center;
        border-left: none;
        border-radius: 12px;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-link i,
    html.sidebar-collapsed #offcanvasSidebar .sidebar-section-toggle i:first-child {
        margin: 0;
        width: auto;
        font-size: 1.18rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    html.sidebar-collapsed #offcanvasSidebar .sidebar-admin-chevron,
    html.sidebar-collapsed #offcanvasSidebar .sidebar-admin-panel,
    html.sidebar-collapsed #offcanvasSidebar .sidebar-divider,
    html.sidebar-collapsed #offcanvasSidebar .sidebar-text,
    html.sidebar-collapsed #offcanvasSidebar .sidebar-link .badge {
        display: none !important;
    }
}

/* Tooltips pour sidebar repliée */
.sidebar-mini-tooltip .tooltip-inner {
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.32rem 0.55rem;
}

.sidebar-mini-tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: rgba(15, 23, 42, 0.95);
}

/* ══ Absorbé : responsive-hardening.css ═══════════════════════════ */

/**
 * responsive-hardening.css
 * Couche responsive transversale XHelpers (tenant).
 * Chargee en dernier pour corriger les cas limites mobile/tablette.
 */

html,
body {
    max-width: 100%;
    /* clip (et non hidden) : empeche le scroll horizontal SANS creer de conteneur
       de defilement, ce qui casserait position:sticky (ex: TDM des articles KB). */
    overflow-x: clip;
}

img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

.main-content-area .table-responsive,
.main-content-area .data-table-container,
.main-content-area .xh-announcements-table-wrap,
.main-content-area .data-table-card,
.main-content-area .admin-quick-card {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.main-content-area .table-responsive table,
.main-content-area .data-table-container table,
.main-content-area .xh-announcements-table-wrap table,
.main-content-area .data-table-card table,
.main-content-area .admin-quick-card table {
    min-width: 640px;
}

@media (max-width: 991.98px) {
    .main-content-area {
        margin-left: 0 !important;
        max-width: 100% !important;
        margin-top: 0.75rem;
        padding-top: 0 !important;
    }

    .main-content-area > .container-fluid,
    .main-content-area .container,
    .main-content-area .custom-container,
    .stats-container,
    .contact-container,
    .thread-view-container,
    .tutorial-detail-container,
    .video-detail-container,
    .xh-announcements-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .stats-header,
    .tutorial-header-custom,
    .page-header,
    .forum-thread-page-content .thread-header-card,
    .forum-thread-page-content .reply-card,
    .video-info-card,
    .tutorial-content-wrapper,
    .contact-form-card,
    .admin-mode-banner,
    .admin-editor-card,
    .xh-announcements-header {
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    .stats-actions,
    .favorite-nav,
    .category-picker-toolbar,
    .admin-form-actions,
    .filter-headline-actions {
        gap: 0.6rem;
    }

    .content-tabs,
    .nav-tabs,
    .nav-tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .content-tabs .content-tab,
    .nav-tabs .nav-link,
    .nav-tabs-container .nav-link {
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .main-content-area > .container-fluid {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .page-title,
    .stats-title,
    .tutorial-title,
    .video-detail-title,
    .forum-thread-page-content .thread-title {
        font-size: clamp(1.35rem, 5.2vw, 1.85rem) !important;
        line-height: 1.2 !important;
    }

    .page-subtitle,
    .stats-subtitle,
    .tutorial-subtitle {
        font-size: 0.95rem !important;
    }

    .form-grid,
    .mod-grid {
        grid-template-columns: 1fr !important;
    }

    .forum-thread-page-content .post-card {
        flex-direction: column;
        gap: 0.85rem;
        padding: 0;
        margin: 0 0 0.75rem;
    }

    .forum-thread-page-content .post-author {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .forum-thread-page-content .author-avatar {
        margin: 0;
    }

    .forum-thread-page-content .post-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .admin-form-actions .btn,
    .stats-actions .btn-stats,
    .favorite-nav .btn-nav {
        width: 100%;
        justify-content: center;
    }

    .tutorials-grid,
    .videos-grid {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    .video-meta-info,
    .tutorial-meta {
        gap: 0.65rem !important;
    }

    .share-buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .user-dropdown .dropdown-menu {
        width: min(90vw, 280px) !important;
        min-width: min(90vw, 280px) !important;
        max-height: 78vh;
        overflow-y: auto;
    }

    .metrics-grid {
        grid-template-columns: 1fr !important;
    }

    .content-tabs,
    .favorite-nav,
    .stats-actions,
    .category-picker-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .content-tabs .content-tab,
    .favorite-nav .btn-nav,
    .stats-actions .btn-stats {
        width: 100%;
        justify-content: center;
    }

    .bookmark-notification {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
    }

    .main-content-area .table-responsive table,
    .main-content-area .data-table-container table,
    .main-content-area .xh-announcements-table-wrap table,
    .main-content-area .data-table-card table,
    .main-content-area .admin-quick-card table {
        min-width: 560px;
    }
}

/* ══ Absorbé : pwa-mobile.css ═════════════════════════════════════ */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-titlebar: env(titlebar-area-height, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

body.arcprod-tenant {
    /* Keep content below fixed navbar + PWA system/titlebar insets */
    padding-top: calc(var(--navbar-height, 68px) + var(--safe-top) + var(--safe-titlebar));
    padding-right: var(--safe-right);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
}

#navbar.navbar-modern {
    top: calc(var(--safe-top) + var(--safe-titlebar));
}

/* Rend les interactions plus fluides sans changer la logique applicative */
.menu-toggle,
.sidebar-link,
.dropdown-item,
.btn,
.content-tab,
.chip,
.filter-chip {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .08s ease;
}

.btn:active,
.sidebar-link:active,
.menu-toggle:active {
    transform: translateY(1px);
}

@media (max-width: 991.98px) {
    body.arcprod-tenant {
        padding-top: calc(56px + var(--safe-top) + var(--safe-titlebar));
    }

    #navbar.navbar-modern {
        padding-top: calc(10px + var(--safe-top) + var(--safe-titlebar));
        min-height: 68px;
    }

    .main-content-area {
        padding-bottom: calc(12px + var(--safe-bottom)) !important;
    }

    /* Touch targets minimum mobiles (44px Apple HIG / Android Material) */
    .menu-toggle,
    .sidebar-link,
    .sidebar-section-toggle,
    .user-dropdown .nav-link,
    .notification-bell,
    .mobile-action-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .offcanvas-sidebar .sidebar-link {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .offcanvas-sidebar {
        padding-bottom: calc(12px + var(--safe-bottom));
    }
}

/* En mode PWA standalone, on optimise encore le ressenti app mobile */
@media (display-mode: standalone) {
    #navbar.navbar-modern {
        box-shadow: 0 1px 0 rgba(17, 24, 39, .08);
    }

    .main-content-area {
        min-height: calc(100dvh - 72px);
    }
}

@media (max-width: 479.98px) {
    body.arcprod-tenant {
        padding-top: calc(52px + var(--safe-top) + var(--safe-titlebar));
    }
}

/* ══ Absorbé : mobile-unified.css ═════════════════════════════════ */

html,
body {
    overflow-x: clip;
}

/* Generic containers/cards/forms/tables fallback */
.container,
.container-fluid,
.card,
.data-table-card,
.section-card,
.stats-card,
.module-card,
.admin-editor-card,
.admin-quick-card,
.form-card,
.thread-card,
.post-card {
    min-width: 0;
}

.table-responsive,
.data-table-container,
.xh-announcements-table-wrap,
[data-ls-table-wrap],
[data-table-scroll] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table,
.data-table-container table,
.xh-announcements-table-wrap table,
[data-ls-table-wrap] table,
[data-table-scroll] table {
    min-width: 560px;
}

/* Avoid giant dropdowns off-screen on small devices */
.dropdown-menu {
    max-width: calc(100vw - 1rem);
}

/* Interactive controls: minimum touch target */
button,
.btn,
input[type="button"],
input[type="submit"],
select,
.nav-link,
.sidebar-link,
.content-tab,
.filter-chip {
    min-height: 42px;
}

/* iOS zoom prevention on input focus */
input,
textarea,
select {
    font-size: 16px;
}

@media (max-width: 991.98px) {
    /* Global spacing rhythm */
    .main-content-area {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }

    .main-content-area .container,
    .main-content-area .container-fluid,
    .main-content-area .custom-container {
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }

    .card,
    .data-table-card,
    .section-card,
    .module-card,
    .stats-card,
    .form-card,
    .thread-card,
    .post-card {
        border-radius: 12px !important;
    }

    /* Header blocks not too tall on mobile */
    .page-header,
    .stats-header,
    .tutorial-header-custom,
    .hero-section,
    .hero-banner,
    .module-hero {
        padding: 1rem !important;
    }

    /* Buttons flow naturally when width is constrained */
    .btn-group,
    .stats-actions,
    .filter-actions,
    .quick-actions,
    .lifecycle-actions,
    .forum-actions,
    .ls-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .btn-group > .btn,
    .stats-actions .btn,
    .filter-actions .btn,
    .quick-actions .btn,
    .lifecycle-actions .btn,
    .forum-actions .btn,
    .ls-actions .btn {
        flex: 1 1 auto;
    }

    /* Better form flow */
    .form-grid,
    .filter-grid,
    .stats-grid,
    .metrics-grid,
    .cards-grid,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 0.7rem !important;
    }

    .input-group {
        flex-wrap: nowrap;
        width: 100%;
    }

    .input-group > .form-control {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    /* Typography scale */
    h1,
    .page-title,
    .stats-title,
    .section-title {
        font-size: clamp(1.32rem, 5vw, 1.9rem) !important;
        line-height: 1.22 !important;
    }

    h2,
    .subsection-title {
        font-size: clamp(1.1rem, 4.4vw, 1.45rem) !important;
    }

    .page-subtitle,
    .stats-subtitle,
    .section-subtitle {
        font-size: 0.95rem !important;
    }

    /* Prevent horizontal clipping of chips/tabs/filters */
    .tabs-row,
    .chips-row,
    .content-tabs,
    .category-tabs,
    .level-tabs,
    .filters-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.45rem;
        padding-bottom: 0.2rem;
    }

    .tabs-row > *,
    .chips-row > *,
    .content-tabs > *,
    .category-tabs > *,
    .level-tabs > *,
    .filters-row > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Forum thread and posts readability */
    .forum-thread-page-content .thread-header-card,
    .forum-thread-page-content .reply-card,
    .forum-thread-page-content .post-content,
    .thread-view-container .thread-post {
        padding: 0.9rem !important;
    }

    .forum-thread-page-content .post-actions,
    .thread-view-container .post-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    /* Tables stay scrollable but less wide */
    .table-responsive table,
    .data-table-container table,
    .xh-announcements-table-wrap table,
    [data-ls-table-wrap] table,
    [data-table-scroll] table {
        min-width: 500px;
    }
}

@media (max-width: 575.98px) {
    .main-content-area {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .card,
    .data-table-card,
    .section-card,
    .module-card {
        border-radius: 10px !important;
    }

    .table-responsive table,
    .data-table-container table,
    .xh-announcements-table-wrap table,
    [data-ls-table-wrap] table,
    [data-table-scroll] table {
        min-width: 460px;
    }

    .dropdown-menu {
        min-width: min(90vw, 280px) !important;
        max-width: min(90vw, 320px) !important;
    }

    .modal-dialog {
        max-width: calc(100vw - 1rem);
        margin: 0.5rem auto;
    }

    .btn,
    .form-control,
    .form-select {
        border-radius: 10px !important;
    }

    /* Footer links stack nicely */
    .footer-modern-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }
}

/* ===== MERGED: redesign/01-layout-home.css — sidebar authority + home layout ===== */

/* ==========================================================================
   Lot 1 - Layout global + Home
   Scope strict: active on all body.arcprod-tenant pages
   ========================================================================== */
body.arcprod-tenant {
    --rd-bg: #f5f7fb;
    --rd-surface: #ffffff;
    --rd-border: #e4e8f0;
    --rd-text: #1f2937;
    /* #6b7280 tombait a 4,34:1 sur le fond de page noir du mode sombre (pied de
       page). Aligne sur --text-secondary de tokens.css, conforme dans les deux themes. */
    --rd-muted: var(--text-secondary);
    --rd-radius: 12px;
    --rd-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    --rd-shadow-soft: 0 2px 10px rgba(15, 23, 42, 0.05);
    /* La navbar porte la MEME teinte que la sidebar : toutes deux derivees a 6 %
       de la couleur du tenant. Avant, --rd-topbar-bg valait #ffffff en dur et la
       sidebar seule suivait la marque — les deux barres ne s'accordaient sur aucun
       tenant.
       Corriger ICI et non sur .navbar-modern : la regle qui applique cette variable
       (« background: var(--rd-topbar-bg) !important ») porte un !important, qu'une
       regle posee plus bas sans !important ne peut pas battre. */
    --rd-topbar-bg: color-mix(in srgb, var(--ulb-blue) 6%, #f8fafc 94%);
    --rd-sidebar-bg: color-mix(in srgb, var(--ulb-blue) 6%, #f8fafc 94%);
    --rd-topbar-border: #e4eaf3;
    --rd-sidebar-border: #e2e8f0;
    /* Sert majoritairement a du TEXTE via color-mix (nom de l'app, sous-titre,
       liens de la barre) : parti de --brand-text, la version de la marque qui
       passe AA sur fond clair. Les quelques usages en FOND melangent 8-16 % de
       cet accent avec du blanc — un accent plus sombre y est sans consequence. */
    --rd-topbar-accent: var(--brand-text);
    --rd-sidebar-width: 240px;
    --rd-sidebar-rail-width: 72px;
    background: var(--rd-bg);
    color: var(--rd-text);
}

/* --- Navbar --- */
body.arcprod-tenant .navbar-modern {
    background: var(--rd-topbar-bg) !important;
    border-bottom: 1px solid var(--rd-topbar-border) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none !important;
}

body.arcprod-tenant .navbar-modern .navbar-container {
    padding: 0 0.95rem !important;
}

body.arcprod-tenant .navbar-modern .brand-container-text {
    border-radius: 10px !important;
    padding: 0.3rem 0.52rem !important;
    height: 44px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

body.arcprod-tenant .navbar-modern .ulb-logo-brand {
    height: 52px !important;
    max-width: 200px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ── Responsive logo overrides (doit être en !important pour battre la règle ci-dessus) ── */
@media (max-width: 575.98px) {
    body.arcprod-tenant .navbar-modern .ulb-logo-brand {
        max-width: 110px !important;
        height: 28px !important;
    }
}
@media (max-width: 479.98px) {
    body.arcprod-tenant .navbar-modern .ulb-logo-brand {
        max-width: 80px !important;
        height: 24px !important;
    }
}

body.arcprod-tenant .navbar-modern .brand-primary {
    font-weight: 500 !important;
    font-size: 15px !important;
    color: color-mix(in srgb, var(--rd-topbar-accent) 86%, #0f172a 14%) !important;
}

body.arcprod-tenant .navbar-modern .brand-secondary {
    color: color-mix(in srgb, var(--rd-topbar-accent) 44%, #64748b 56%) !important;
    font-size: 0.68rem !important;
}

body.arcprod-tenant .navbar-modern .brand-text {
    text-shadow: none;
}

body.arcprod-tenant .navbar-modern :is(.menu-toggle, .tenant-badge, #notifBellBtn, .user-profile-btn, .user-dropdown-toggle) {
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.arcprod-tenant .navbar-modern .menu-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--rd-topbar-accent) 65%, #334155 35%) !important;
}

body.arcprod-tenant .navbar-modern .menu-toggle.sidebar-closed {
    border-color: transparent !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--rd-topbar-accent) 84%, #0f172a 16%) !important;
}

body.arcprod-tenant .navbar-modern .menu-toggle:hover,
body.arcprod-tenant .navbar-modern .menu-toggle:focus-visible {
    background: color-mix(in srgb, var(--rd-topbar-accent) 10%, #ffffff 90%) !important;
}

body.arcprod-tenant .navbar-modern .menu-toggle .hamburger span {
    background: currentColor !important;
}

body.arcprod-tenant .navbar-modern .tenant-badge {
    border: 1px solid transparent !important;
    background: transparent !important;
    min-height: 34px !important;
    padding: 0.28rem 0.58rem !important;
}

body.arcprod-tenant .navbar-modern .tenant-badge .tenant-path-label,
body.arcprod-tenant .navbar-modern .tenant-badge code {
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    /* La navbar passe a rgba(28,28,30,.92) en sombre (dark-mode.css §D) : #6e6e73
       n'y offrait que 3,36:1, sous le seuil AA. --text-secondary donne 5,95:1. */
    color: var(--text-secondary) !important;
    letter-spacing: 0 !important;
}

body.arcprod-tenant .navbar-modern .global-search-input-wrapper {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.arcprod-tenant .navbar-modern .global-search-input {
    min-height: 34px !important;
    font-size: 0.9rem !important;
    color: #0f172a !important;
}

body.arcprod-tenant .navbar-modern .global-search-container.search-expanded .global-search-input {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.13) !important;
}

body.arcprod-tenant .navbar-modern .global-search-container.search-expanded .global-search-input:focus {
    background: #fff !important;
    border-color: var(--ulb-blue, #384376) !important;
}

body.arcprod-tenant .navbar-modern .global-search-input::placeholder {
    color: #94a3b8 !important;
}

body.arcprod-tenant .navbar-modern .global-search-input:focus {
    box-shadow: none !important;
}

body.arcprod-tenant .navbar-modern #notifBellBtn,
body.arcprod-tenant .navbar-modern .user-dropdown-toggle {
    border: 1px solid transparent !important;
    background: transparent !important;
    /* Etait #334155 en dur : pas de variante sombre, meme motif que le menu lateral. */
    color: var(--text-secondary) !important;
}

body.arcprod-tenant .navbar-modern .user-dropdown-toggle {
    min-height: 36px !important;
    padding: 2px 8px 2px 3px !important;
}

body.arcprod-tenant .navbar-modern :is(#notifBellBtn, .user-dropdown-toggle):hover,
body.arcprod-tenant .navbar-modern :is(#notifBellBtn, .user-dropdown-toggle):focus-visible {
    background: color-mix(in srgb, var(--rd-topbar-accent) 8%, #ffffff 92%) !important;
    border-color: transparent !important;
}

/* --- Sidebar --- */
body.arcprod-tenant #offcanvasSidebar.offcanvas-sidebar {
    background: var(--rd-sidebar-bg) !important;
    border-right: 1px solid var(--rd-sidebar-border) !important;
    box-shadow: none !important;
}

body.arcprod-tenant #offcanvasSidebar :is(.offcanvas-header, .offcanvas-body) {
    background: var(--rd-sidebar-bg) !important;
    border-color: #e2e8f0 !important;
}

body.arcprod-tenant #offcanvasSidebar :is(.sidebar-link, .sidebar-section-toggle) {
    min-height: 38px !important;
    padding: 0.46rem 0.74rem !important;
    border-radius: 8px !important;
    border-left: 0 !important;
    box-shadow: none !important;
    /* Etait #334155 en dur avec !important : cette regle battait celle de
       dark-mode.css, si bien que les entrees du menu restaient en gris-bleu
       clair-mode sur le fond sombre. Le defaut etait masque parce que la regle
       generique des <span> de dark-mode.css recolorait le libelle par-dessus —
       il n'apparaissait qu'en retirant cette regle generique (1,64:1). */
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin: 0.15rem 0.35rem !important;
    text-align: left !important;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

body.arcprod-tenant #offcanvasSidebar :is(.sidebar-link:hover, .sidebar-section-toggle:hover) {
    background: color-mix(in srgb, var(--ulb-blue) 12%, #eef2f7 88%) !important;
    color: #0f172a !important;
}

body.arcprod-tenant #offcanvasSidebar :is(.sidebar-link.active, .sidebar-section-toggle[aria-expanded="true"]) {
    background: color-mix(in srgb, var(--rd-topbar-accent) 16%, #ffffff 84%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd-topbar-accent) 40%, #dbeafe 60%) !important;
    color: color-mix(in srgb, var(--rd-topbar-accent) 78%, #0f172a 22%) !important;
    font-weight: 600 !important;
}

/* Sidebar clarity: only the current page gets strong active style.
   Expanded parent section stays visible but intentionally subtle. */
body.arcprod-tenant #offcanvasSidebar .sidebar-section-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--rd-topbar-accent) 8%, #ffffff 92%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd-topbar-accent) 22%, #e2e8f0 78%) !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

body.arcprod-tenant #offcanvasSidebar .sidebar-admin-list .sidebar-link.active {
    background: color-mix(in srgb, var(--rd-topbar-accent) 18%, #ffffff 82%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd-topbar-accent) 44%, #dbeafe 56%) !important;
    color: color-mix(in srgb, var(--rd-topbar-accent) 80%, #0f172a 20%) !important;
    font-weight: 700 !important;
}

body.arcprod-tenant #offcanvasSidebar :is(.sidebar-link i, .sidebar-section-toggle i) {
    color: currentColor !important;
}

@media (min-width: 992px) {
    /* Phase 1 migration: positionnement sidebar fixe (était dans sidebar-pro.css) */
    body.arcprod-tenant #offcanvasSidebar {
        position: fixed !important;
        left: 0 !important;
        top: var(--navbar-height, 68px) !important;
        height: calc(100vh - var(--navbar-height, 68px)) !important;
        z-index: 1030 !important;
        visibility: visible !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0.5rem 0.375rem !important;
    }

    body.arcprod-tenant #offcanvasSidebar.offcanvas-sidebar {
        width: var(--rd-sidebar-width) !important;
        min-width: var(--rd-sidebar-width) !important;
        max-width: var(--rd-sidebar-width) !important;
        transform: translateX(0) !important;
        transition: transform 0.24s ease, box-shadow 0.24s ease !important;
    }

    html.sidebar-collapsed body.arcprod-tenant #offcanvasSidebar.offcanvas-sidebar {
        width: var(--rd-sidebar-rail-width) !important;
        min-width: var(--rd-sidebar-rail-width) !important;
        max-width: var(--rd-sidebar-rail-width) !important;
        transform: translateX(0) !important;
        box-shadow: none !important;
        pointer-events: auto !important;
        transition: width 0.24s ease, min-width 0.24s ease, max-width 0.24s ease !important;
        padding: 0.5rem 0.25rem !important;
    }

    body.arcprod-tenant .main-content-area {
        margin-left: var(--rd-sidebar-width) !important;
        max-width: calc(100vw - var(--rd-sidebar-width)) !important;
        transition: margin-left 0.24s ease, max-width 0.24s ease !important;
    }

    html.sidebar-collapsed body.arcprod-tenant .main-content-area {
        margin-left: var(--rd-sidebar-rail-width) !important;
        max-width: calc(100vw - var(--rd-sidebar-rail-width)) !important;
    }

    body.arcprod-tenant :is(footer, footer.footer-modern) {
        margin-left: var(--rd-sidebar-width) !important;
        width: calc(100vw - var(--rd-sidebar-width)) !important;
        transition: margin-left 0.24s ease, width 0.24s ease !important;
    }

    html.sidebar-collapsed body.arcprod-tenant :is(footer, footer.footer-modern) {
        margin-left: var(--rd-sidebar-rail-width) !important;
        width: calc(100vw - var(--rd-sidebar-rail-width)) !important;
    }
}

/* --- Footer --- */
body.arcprod-tenant .footer-modern,
body.arcprod-tenant .footer-slim {
    background: #f4f8fc !important;
    border-top: 1px solid #e4eaf3 !important;
    box-shadow: none !important;
}

body.arcprod-tenant .footer-modern-topbar {
    height: 2px !important;
    background: var(--ulb-blue) !important;
}

body.arcprod-tenant :is(.footer-modern-org, .footer-modern-subtitle, .footer-modern-links a, .footer-modern-bottomline, .footer-slim-org, .footer-slim-app, .footer-slim-sep) {
    color: var(--rd-muted) !important;
}

body.arcprod-tenant :is(.footer-modern-links a:hover, .footer-slim-link:hover) {
    color: var(--brand-text) !important;
}

body.arcprod-tenant .footer-slim {
    min-height: 56px !important;
    gap: 0.42rem !important;
    padding: 1rem 1rem !important;
    font-size: 0.8rem !important;
    /* Etait #64748b en dur : 4,44:1 sur le fond de page clair et 3,58:1 sur
       une carte sombre. --text-secondary est defini dans les DEUX themes. */
    color: var(--text-secondary) !important;
    border-top: 1px solid #e4eaf3 !important;
    justify-content: center !important;
}

body.arcprod-tenant .footer-slim-link {
    text-decoration: none !important;
    opacity: 0.85 !important;
}

/* ============================================================
   Back to top — bouton global structurel Apple flat style
   Chargé une seule fois via layout.css → disponible partout
   ============================================================ */
.arcprod-back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1040;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-color, #e5e5e5);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text-secondary, #737373);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease,
                background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.arcprod-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.arcprod-back-to-top:hover {
    background: rgba(255, 255, 255, 0.97);
    color: var(--brand-text);
    border-color: var(--primary-color, var(--ulb-blue, #384376));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.arcprod-back-to-top:focus-visible {
    outline: 2px solid var(--primary-color, #384376);
    outline-offset: 2px;
}

/* Dark mode */
html[data-theme="dark"] .arcprod-back-to-top {
    background: rgba(44, 44, 46, 0.88);
    border-color: rgba(84, 84, 88, 0.50);
    color: rgba(235, 235, 245, 0.55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .arcprod-back-to-top:hover {
    background: rgba(58, 58, 60, 0.97);
    color: rgba(235, 235, 245, 0.92);
    border-color: rgba(174, 174, 178, 0.50);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40);
    transform: translateY(-2px);
}

@media (max-width: 575.98px) {
    .arcprod-back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* ================================================================ */
/* NAVBAR HIDE-ON-SCROLL — mobile uniquement (< 992px)             */
/* ================================================================ */
/* .navbar-hidden et sa transition sont déjà définis dans          */
/* navbar.css (transition: all 0.4s + transform: translateY(-100%))*/
/* Le listener scroll JS (app-layout.js) est conditionné à         */
/* window.innerWidth < 992 pour restreindre au mobile.             */

/* ══════════════════════════════════════════════════════════════════════
   REPLI DE LA SIDEBAR — commande posee sur ce qu'elle commande (2026-09-03)
   ──────────────────────────────────────────────────────────────────────
   Le bouton vivait dans la navbar, loin de la sidebar qu'il pilote. Il est
   desormais en tete de la sidebar, aligne a droite.

   Il ne peut PAS reutiliser `.menu-toggle` : ce style est scope
   `.navbar-modern` (layout.css §1781, dark-mode.css §243) et ne l'aurait pas
   suivi hors de la navbar — le bouton serait revenu au rendu brut du
   navigateur. Il a donc son propre style, ici.

   POINT CRITIQUE : il reste visible quand la sidebar est repliee. Le rail fait
   72 px de large, le bouton s'y centre. Sans cela, refermer la sidebar
   supprimerait le seul moyen de la rouvrir.
   ══════════════════════════════════════════════════════════════════════ */
.sidebar-desktop-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem 0.75rem 0.25rem;
}

.sidebar-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary, #5f5f5f);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible {
    background: color-mix(in srgb, var(--text-secondary, #5f5f5f) 12%, transparent);
    color: var(--text-primary, #171717);
}

/* Sidebar repliee : le rail fait 72 px, le bouton se centre pour rester
   atteignable — c'est lui qui permet de rouvrir. */
html.sidebar-collapsed .sidebar-desktop-head {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}