/* ==========================================================================
   Karsteau - En-tête partagé (header.php)
   Navigation, fil d'Ariane, bouton retour et sélecteur de langues
   ========================================================================== */

:root {
    --bleu_ffs_rgb: 0, 151, 173;
    --bleu_ffs: rgb(var(--bleu_ffs_rgb));
    --bleu_hover: #007d90;
    --orange_ffs_rgb: 233, 78, 27;
    --orange_ffs: rgb(var(--orange_ffs_rgb));
    --noir_ffs_rgb: 27, 27, 31;
    --noir_ffs: rgb(var(--noir_ffs_rgb));
    --border_color: #e2e8f0;
    --text_muted: #64748b;
}

/* 
   Bandeau supérieur noir sur toute la largeur :
   Contient le fil d'Ariane / bouton retour à gauche et les menus utilisateur + langues à droite.
*/
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
}

body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
}

header.site-header,
.site-header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background-color: var(--noir_ffs, #1b1b1f) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* 
   Conteneur intérieur :
   Aligne la partie gauche (retour / fil d'Ariane) et la partie droite (drapeaux / utilisateur).
*/
.site-header-inner {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    box-sizing: border-box !important;
}

/* Sur la page d'accueil (index), on utilise toute la largeur de l'écran */
#page .site-header-inner,
.page-index .site-header-inner {
    max-width: 100% !important;
}

/* Regroupement pour les éléments placés à gauche */
.site-header-left {
    display: inline-flex;
    align-items: center;
}

/* 
   Bouton Retour (utilisé par exemple sur la page de connexion)
*/
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    padding: 5px 14px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

/* Petit effet de glissement vers la gauche au survol */
.btn-back:hover {
    color: #ffffff;
    background-color: var(--bleu_ffs);
    border-color: var(--bleu_ffs);
    transform: translateX(-2px);
}

.btn-back .material-symbols-outlined {
    font-size: 18px;
    color: inherit;
}

/* 
   Fil d'Ariane
*/
.breadcrumb-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    color: #ffffff;
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.breadcrumb-link:hover {
    color: #ffffff;
    background-color: var(--bleu_ffs);
    border-color: var(--bleu_ffs);
    transform: translateX(-2px);
}

.breadcrumb-link .material-symbols-outlined {
    font-size: 17px;
    color: inherit;
}

.breadcrumb-separator {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}

.breadcrumb-current {
    font-weight: 700;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Groupe d'actions à droite (menu utilisateur + menu langues)
   -------------------------------------------------------------------------- */
.site-header-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
}

/* Menu utilisateur */
.user-menu-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.user-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.user-menu-btn:hover {
    background: var(--bleu_ffs);
    border-color: var(--bleu_ffs);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(var(--bleu_ffs_rgb), 0.35);
}

.user-menu-btn.open {
    background: var(--bleu_ffs);
    border-color: var(--bleu_ffs);
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(var(--bleu_ffs_rgb), 0.4);
}

.user-menu-btn-icon {
    font-size: 19px;
    line-height: 1;
    color: inherit;
    transition: color 0.2s ease;
}

/* Si l'utilisateur est connecté, l'icône est en bleu FFS */
.user-menu-btn.is-logged-in .user-menu-btn-icon {
    color: var(--bleu_ffs);
}

.user-menu-btn.is-logged-in:hover,
.user-menu-btn.is-logged-in.open {
    background: rgba(var(--bleu_ffs_rgb), 0.2);
    border-color: var(--bleu_ffs);
    box-shadow: 0 0 0 2px rgba(var(--bleu_ffs_rgb), 0.4);
}

/* Liste du menu utilisateur */
.user-menu-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    min-width: 170px;
    background: #ffffff;
    border: 1px solid var(--border_color);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    flex-direction: column;
    gap: 3px;
}

.user-menu-list.show {
    display: flex;
    animation: userMenuFadeIn 0.15s ease-out;
}

@keyframes userMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nom de l'utilisateur connecté */
.user-menu-header {
    padding: 6px 10px 8px;
    border-bottom: 1px solid var(--border_color);
    margin-bottom: 2px;
}

.user-menu-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--noir_ffs);
    white-space: nowrap;
    display: block;
}

/* Menu items */
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 9999px;
    color: var(--noir_ffs);
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

.user-menu-item:hover {
    background: rgba(var(--bleu_ffs_rgb), 0.1);
    color: var(--bleu_ffs);
}

.user-menu-item-icon {
    font-size: 18px;
    color: var(--text_muted);
    transition: color 0.15s ease;
}

.user-menu-item:hover .user-menu-item-icon {
    color: var(--bleu_ffs);
}

/* --------------------------------------------------------------------------
   Menu déroulant des langues
   -------------------------------------------------------------------------- */
.lang-menu-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Bouton du menu replié (affiche la langue courante) */
.lang-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.lang-menu-btn:hover {
    background: var(--bleu_ffs);
    border-color: var(--bleu_ffs);
    box-shadow: 0 2px 8px rgba(var(--bleu_ffs_rgb), 0.35);
}

.lang-menu-btn.open {
    background: var(--bleu_ffs);
    border-color: var(--bleu_ffs);
    box-shadow: 0 0 0 2px rgba(var(--bleu_ffs_rgb), 0.4);
}

/* Liste des éléments du menu déroulé */
.lang-menu-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    background: #ffffff;
    border: 1px solid var(--border_color);
    border-radius: 9999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    flex-direction: column;
    gap: 4px;
}

.lang-menu-list.show {
    display: flex;
    animation: langMenuFadeIn 0.15s ease-out;
}

@keyframes langMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Menuitem par langue */
.lang-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lang-menu-item:hover {
    background: rgba(var(--bleu_ffs_rgb), 0.1);
    border-color: rgba(var(--bleu_ffs_rgb), 0.2);
}

.lang-menu-item.active {
    background: rgba(var(--bleu_ffs_rgb), 0.15);
    border-color: var(--bleu_ffs);
}

/* Image du drapeau */
.lang-flag-img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

/* Ajustements pour les petits écrans de smartphones */
@media screen and (max-width: 640px) {
    .site-header {
        padding: 8px 12px !important;
    }
}