/* ==========================================================
   NAVBAR-THEME
   Relookage visuel du menu (styles 1, 2 et 3 configurables en
   backoffice) pour se rapprocher de .header dans
   Maquette_Utah.html, SANS toucher au comportement de RD
   Navbar (sticky au scroll, sous-menus, drawer mobile) :
   uniquement des surcharges CSS, chargées après navbar.css
   (voir index.php).
   - Style 1 et style 3 partagent exactement le même balisage
     (menu.inc.php, bloc "STYLE 1 & 3") : les règles génériques
     ci-dessous couvrent donc les deux automatiquement.
   - Style 2 (.s2-panel, logo centré) a un balisage différent
     et ses propres règles plus bas.
   Bouton clair/sombre : includes/theme_toggle.inc.php +
   assets/js/modules/theme.js (si activé dans Paramètres du menu).
========================================================== */

/* Fond clair permanent (au lieu de transparent → #444141 au scroll) */
.rd-navbar-aside.rd-navbar-static,
.rd-navbar-aside.rd-navbar-static.rd-navbar--is-stuck,
.rd-navbar-aside.rd-navbar-static.rd-navbar--is-clone {
   
    border-bottom-color: transparent;
}


.rd-navbar-aside.rd-navbar-static .rd-navbar-main {
    padding: 20px 0;
}


/* Le menu (navbar.css, thème RD Navbar d'origine) avait un conteneur à
   max-width:1500px. La maquette utilise volontairement une largeur de header
   différente du reste de la page (.header .wrap{max-width:1400px} vs
   .wrap{max-width:1240px} pour le corps) — on reprend sa valeur exacte plutôt
   que 1240px (trop serré) ou 1500px (logo décalé du contenu en dessous). */
.rd-navbar-aside.rd-navbar-static .rd-navbar-aside,
.rd-navbar-aside.rd-navbar-static .rd-navbar-main {
    max-width: 1400px;
}


/* Logo : plus discret, sans halo circulaire */
.rd-navbar-aside.rd-navbar-static .rd-navbar-brand img {
    max-width: 44px;
    max-height: 44px;
    border-radius: 6px;
}


/* Liens du menu : minuscules, gras, petite taille, couleur sombre (comme .nav a
   dans la maquette) au lieu de majuscules blanches sur fond transparent */
.rd-navbar-aside.rd-navbar-static .rd-navbar-panel .nav-list a {
    text-transform: none;
    letter-spacing: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink, #0c1320);
}


.rd-navbar-aside.rd-navbar-static .rd-navbar-panel .nav-list a:before {
    background-color: var(--couleur2);
}


.rd-navbar-aside.rd-navbar-static .rd-nav-item .rd-nav-link:hover {
    color: var(--couleur2);
}

.rd-navbar-aside.rd-navbar-static .rd-nav-item.active .rd-nav-link {
    color: var(--couleur);
}


/* ----------------------------------------------------------
   OUTILS DE DROITE (theme toggle + CTA)
---------------------------------------------------------- */

/* Bouton Clair / Sombre : un seul bouton rond (comme utah-web-comparateur.html) —
   lune en mode clair (passer en sombre), soleil en mode sombre (passer en clair) */
.uw-theme-toggle {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink, #0c1320);
    cursor: pointer;
    transition: background-color .2s ease;
}

.uw-theme-toggle:hover {
    background: color-mix(in srgb, var(--ink, #0c1320) 8%, transparent);
}

.uw-theme-toggle:focus-visible {
    outline: 2px solid var(--couleur2);
    outline-offset: 2px;
}

.uw-theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.uw-theme-toggle .uw-theme-soleil { display: none; }
html.uw-dark .uw-theme-toggle .uw-theme-lune { display: none; }
html.uw-dark .uw-theme-toggle .uw-theme-soleil { display: block; }

/* Mode sombre : liens du menu (styles 1/3 .list-inline-item, style 2 .s2-left /
   .s2-right-links) dans la couleur du texte courant, comme les titres (uw-core.css).
   !important : passe devant les couleurs de texte du menu (navbar.css, css.inc.php).
   Survol non touché (garde sa couleur actuelle). Sous-menus non concernés (> a). */
/* Mode sombre : barre du menu collée au défilement (styles 1/2) et barre fixe du style 3
   sur le fond sombre du site, au lieu de la « Couleur du menu » (Paramètres du menu) qui
   peut être claire — le texte du menu est clair en sombre. Sélecteurs plus forts que
   .menu-c1/c2/c3 (navbar.css, !important). Mode clair inchangé. */
html.uw-dark .rd-navbar.rd-navbar-aside.rd-navbar-static.rd-navbar--is-stuck,
html.uw-dark .rd-navbar.rd-navbar-aside.rd-navbar-static.rd-navbar--is-clone,
html.uw-dark .rd-navbar.rd-navbar-always-visible .rd-navbar-main-outer {
    background: var(--bg) !important;
    border-bottom: 1px solid var(--line);
}

html.uw-dark .rd-navbar.rd-navbar-aside .rd-navbar-panel .nav-list .list-inline-item > a:not(:hover), /* plus fort que .menu-text-c1/c2/c3 … .nav-list a (navbar.css) */
html.uw-dark .s2-left li > a:not(:hover),
html.uw-dark .s2-right-links li > a:not(:hover) {
    color: rgba(243, 245, 251, 0.85) !important;
}

/* Mode sombre : icônes des réseaux du menu ordinateur (couleur 1 par défaut, css.inc.php —
   invisibles sur le fond sombre de la barre) dans la couleur du texte du menu, couleur 2 au survol.
   Menu mobile plein écran (.uw-mnav-social, fond couleur 1) non concerné : il a ses propres couleurs. */
html.uw-dark .rd-navbar-static .social-links-nav li a i {
    color: rgba(243, 245, 251, 0.85) !important;
}

html.uw-dark .rd-navbar-static .social-links-nav li a:hover i {
    color: var(--couleur2) !important;
}


/* Bouton "Commander" — même variante compacte que .header .btn dans la
   maquette (border-radius:30px, padding/gap réduits). Couleur volontairement
   différente du reste du site : var(--couleur2) au lieu de var(--couleur)
   pour que le CTA se détache visuellement du menu, configurable en backoffice. */
.rd-navbar-aside.rd-navbar-static .rd-navbar-panel .header-actions .uw-btn,
.rd-navbar-aside.rd-navbar-static .rd-navbar-panel .s2-right .uw-btn {
    border-radius: 4.75rem;

    padding: 6px 6px 6px 16px; /* droite réduite : la pastille flèche fait le bord */
    gap: 10px;

    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

.rd-navbar-aside.rd-navbar-static .rd-navbar-panel .header-actions .uw-btn-primary,
.rd-navbar-aside.rd-navbar-static .rd-navbar-panel .s2-right .uw-btn-primary {
    background: var(--couleur2);
    border-color: var(--couleur2);
}

/* Flèche à droite du bouton du menu (ordinateur + menu mobile) : pastille ronde
   couleur 1, flèche blanche — remplace l'ancienne icône téléphone. */
.uw-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--couleur);
    color: #fff;
    font-size: 13px;
    transition: transform .25s ease;
}

.uw-btn .uw-btn-arrow i {
    color: #fff;
}

.uw-btn:hover .uw-btn-arrow {
    transform: translateX(3px);
}


/* ----------------------------------------------------------
   STYLE 2 (.s2-panel, logo centré) — mêmes réglages visuels
   que style 1/3 ci-dessus, adaptés aux classes propres à ce
   balisage (.s2-left / .s2-right-links au lieu de .nav-list).
   Le style 1/3 passe en fond clair en permanence (voir plus
   haut) : les liens du style 2 doivent donc rester lisibles
   qu'ils soient "stuck" ou non, d'où l'override des deux cas.
---------------------------------------------------------- */

.rd-navbar-aside.rd-navbar-static .s2-left a,
.rd-navbar-aside.rd-navbar-static .s2-right-links a,
.rd-navbar-aside.rd-navbar-static.rd-navbar--is-stuck .s2-left a,
.rd-navbar-aside.rd-navbar-static.rd-navbar--is-stuck .s2-right-links a {
    text-transform: none;
    letter-spacing: 0;

    font-size: 13px;
    font-weight: 700;

    color: var(--ink, #0c1320);
}


.s2-left a:hover,
.s2-right-links a:hover {
    color: var(--couleur2);
}

/* Logo réellement centré (ordinateur uniquement) : le logo du style 2 porte aussi
   .rd-navbar-brand, que navbar.css (~L1819) place en absolu à gauche (left:0) pour
   les styles 1/3 — on le remet dans la colonne centrale de la grille. Colonnes
   latérales en minmax(0, 1fr) : toujours de même largeur, même si le bloc de
   droite (liens + bouton + langues + réseaux) est plus chargé que celui de
   gauche, sinon le logo se décale. */
@media (min-width: 993px) {
    .rd-navbar-aside.rd-navbar-static .rd-navbar-panel.s2-panel {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .rd-navbar-aside.rd-navbar-static .s2-panel .rd-navbar-brand.s2-logo {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        justify-self: center;
    }

    /* Logo des styles 1 et 3 : 74×74px max, menu collant compris (style 2 = .s2-panel exclu,
       réglage propre plus bas). !important sur le style 3 : navbar.css (~L2500) impose
       .rd-navbar-always-visible .logo-img { max-height:80px !important }. */
    .rd-navbar-aside.rd-navbar-static .rd-navbar-panel:not(.s2-panel) .rd-navbar-brand img {
        max-width: 74px;
        max-height: 74px;
    }

    .rd-navbar-aside.rd-navbar-always-visible.rd-navbar-static .rd-navbar-panel:not(.s2-panel) .rd-navbar-brand img {
        max-height: 74px !important;
    }

    /* Style 3 (.rd-navbar-always-visible, fixe dès l'arrivée) : même disposition que le
       style 1. Annule ses règles propres de navbar.css (~L2496-2524) : barre resserrée
       (padding 11px) et liens centrés en absolu au milieu de l'écran. Le reste du style 3
       (position fixe, couleurs de fond, bordure) n'est pas touché. */
    .rd-navbar-aside.rd-navbar-always-visible.rd-navbar-static .rd-navbar-main {
        padding: 20px 0 !important; /* = style 1 (plus haut dans ce fichier) */
    }

    .rd-navbar-aside.rd-navbar-always-visible.rd-navbar-static .rd-navbar-panel .block-right .nav-list {
        position: static;
        left: auto;
        transform: none;
        gap: 0;
        margin: 0 0 0 15%; /* = style 1 (navbar.css ~L1918) */
    }

    .rd-navbar-aside.rd-navbar-always-visible.rd-navbar-static .rd-navbar-panel .block-right .nav-list li + li {
        margin-left: 25px; /* = style 1 (navbar.css ~L1850) */
    }

    /* Logo du style 2 : 74×74px max (au lieu de 44px commun, plus haut), menu collant compris */
    .rd-navbar-aside.rd-navbar-static .s2-panel .s2-logo img,
    .rd-navbar-aside.rd-navbar-static.rd-navbar--is-stuck .s2-panel .s2-logo img {
        max-width: 74px;
        max-height: 74px;
    }

    /* Colonne gauche : choix clair/sombre au bord gauche, liens collés au logo
       (le choix clair/sombre était à droite, il encombrait ce côté) */
    .rd-navbar-aside.rd-navbar-static .s2-panel .s2-left-col {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        min-width: 0;
    }

    /* Colonne droite : liens collés au logo, bouton + langues + réseaux poussés au bord droit */
    .rd-navbar-aside.rd-navbar-static .s2-panel .s2-right .s2-right-links {
        margin-right: auto;
    }

    /* Liens du style 2 : même réglage que les liens du style 1 (.nav-list a, plus
       haut) et même effet au survol — trait couleur 2 qui se dessine de gauche à
       droite sous le lien (repris de navbar.css ~L1864 + css.inc.php). */
    .rd-navbar-aside.rd-navbar-static .s2-panel .s2-left a,
    .rd-navbar-aside.rd-navbar-static .s2-panel .s2-right-links a {
        position: relative;
        display: inline-block;
        padding-bottom: 2px;
        text-transform: none;
        letter-spacing: 0;
        font-size: 16px;
        font-weight: 500;
    }

    .rd-navbar-aside.rd-navbar-static .s2-panel .s2-left a::before,
    .rd-navbar-aside.rd-navbar-static .s2-panel .s2-right-links a::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 0;
        height: 1px;
        background-color: var(--couleur2);
        transition: all ease .35s;
    }

    .rd-navbar-aside.rd-navbar-static .s2-panel .s2-left a:hover::before,
    .rd-navbar-aside.rd-navbar-static .s2-panel .s2-right-links a:hover::before {
        width: 100%;
    }
}

/* Mobile : colonne gauche du style 2 masquée (liens et choix clair/sombre absents de la barre) */
@media (max-width: 992px) {
    .s2-panel .s2-left-col {
        display: none !important;
    }
}


/* ----------------------------------------------------------
   Slogan sous le logo image (includes/logo.inc.php), 3 styles,
   réglage « Slogan » de Paramètres du menu. Ordinateur seulement :
   la barre mobile est trop basse (le slogan est déjà dans le
   menu plein écran, includes/menu_mobile.inc.php).
---------------------------------------------------------- */
.logo-slogan {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .4px;
    white-space: nowrap;
    color: var(--muted, #5d6676);
}

.logo-slogan.text-color-c1 { color: var(--couleur); }
.logo-slogan.text-color-c2 { color: var(--couleur2); }
.logo-slogan.text-color-c3 { color: var(--couleur3); }

.s2-logo .logo-img { margin: 0 auto; } /* style 2 : logo + slogan centrés */

.rd-navbar-fixed .logo-slogan { display: none; }


/* ==========================================================
   MOBILE (drawer RD Navbar en fixed) — texte sombre lisible
   sur fond clair au lieu de blanc sur fond sombre
========================================================== */

@media (max-width: 991px) {

    .rd-navbar-aside.rd-navbar-fixed .rd-navbar-panel {
        background: var(--bg, #fdfdff);
    }


    /* Barre du haut mobile : pas de bouton (il est dans le menu plein écran, navbar-mobile.css) */
    .rd-navbar-panel .uw-theme-toggle {
        display: none;
    }

}