/* =============================================================================
   SVDL - Saumur Val de Loire - Custom CSS
   Migration Warp → YOOtheme Pro
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Police personnalisee : Aller (Light 300, Regular 400, Bold 700)
   ----------------------------------------------------------------------------- */
@font-face {
    font-family: 'Aller';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/aller-light.woff) format('woff');
}
@font-face {
    font-family: 'Aller';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/aller-regular.woff) format('woff');
}
@font-face {
    font-family: 'Aller';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/aller-bold.woff) format('woff');
}

/* -----------------------------------------------------------------------------
   2. Accessibilite
   ----------------------------------------------------------------------------- */
.uk-hidden-visually:not(:focus):not(:active):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* -----------------------------------------------------------------------------
   3. Acces en un clic
   ----------------------------------------------------------------------------- */
.mod_acces_clic .uk-overlay {
    overflow: unset;
}
.mod_acces_clic .uk-panel:hover img,
.mod_acces_clic .uk-panel:focus img {
    transform: scale(1.1);
}
.mod_acces_clic img {
    transition: transform 0.3s ease;
}
@media screen and (min-width: 959px) and (max-width: 1100px) {
    .mod_acces_clic > * {
        width: 50%;
    }
}

/* -----------------------------------------------------------------------------
   4. Toolbar
   ----------------------------------------------------------------------------- */
.tm-toolbar {
    background: #173040 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative;
    z-index: 10;
}
.tm-toolbar-default {
    background: #173040 !important;
}
.tm-toolbar,
.tm-toolbar a,
.tm-toolbar .uk-grid a {
    color: #c5cbcf !important;
}
.tm-toolbar a:hover,
.tm-toolbar .uk-grid a:hover {
    color: #0069b4 !important;
    text-decoration: none;
}
.tm-toolbar [uk-icon],
.tm-toolbar .uk-icon {
    color: #c5cbcf !important;
    width: 20px;
    height: 20px;
}
.tm-toolbar a:hover [uk-icon],
.tm-toolbar a:hover .uk-icon {
    color: #0069b4 !important;
}

/* ---- BLOC MAGENTA : L'Agglo recrute ---- */
/* Ancien DOM avait 4 enfants dans .toolbar-newsletter (position:relative) :         */
/*   .block-newsletter-before  (abs, 10x47, top:-2px, left:-5px, rotate 170deg)      */
/*   .block-newsletter         (bg #ab1368, uppercase, 18px, height:20px content-box) */
/*   .block-newsletter-bottom  (abs, w:100%, h:15px, bottom:-6px)                     */
/*   .block-newsletter-after   (abs, 10x47, top:-2px, right:-5px, rotate -170deg)     */
/* + regle generale .block-newsletter { padding:10px 20px; color:#fff }               */
/*                                                                                     */
/* Nouveau DOM :                                                                       */
/*   <div>[cellule grid]                       → = .toolbar-newsletter (wrapper)       */
/*     <div.block-newsletter>                  → le module                             */
/*       <div.custom>                                                                  */
/*         <div><a>L'Agglo recrute !</a></div>                                         */
/*                                                                                     */
/* Pseudo-elements utilises :                                                          */
/*   .block-newsletter::before  = block-newsletter-before (trapeze gauche)             */
/*   .block-newsletter::after   = block-newsletter-bottom (bande basse)                */
/*   .block-newsletter .custom::after = block-newsletter-after (trapeze droit)         */

/* Le wrapper (cellule grid) = equivalent de .toolbar-newsletter */
.tm-toolbar .uk-margin-auto-left > [uk-grid] > :has(.block-newsletter) {
    position: relative;
    overflow: visible !important;
    margin-right: 20px;
}

/* Le module = equivalent de .block-newsletter */
/* UIKit 3 = border-box, donc height auto (pas 20px) pour que le padding soit visible */
.tm-toolbar .block-newsletter {
    background: #ab1368;
    color: #fff !important;
    text-transform: uppercase;
    font-size: 18px;
    padding: 10px 20px;
    position: relative;
    line-height: 20px;
    box-sizing: content-box;
    height: 20px;
}
.tm-toolbar .block-newsletter a { color: #fff !important; text-decoration: none; }
.tm-toolbar .block-newsletter a:hover { color: #fff !important; text-decoration: none; }

/* block-newsletter-before = trapeze gauche (::before sur .block-newsletter) */
.tm-toolbar .block-newsletter::before {
    content: '';
    background: #ab1368;
    width: 10px;
    height: 47px;
    position: absolute;
    top: -2px;
    left: -5px;
    transform: rotate(170deg);
}

/* block-newsletter-bottom = bande basse (::after sur .block-newsletter) */
.tm-toolbar .block-newsletter::after {
    content: '';
    background: #ab1368;
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: -6px;
    left: 0;
}

/* block-newsletter-after = trapeze droit (::after sur .custom) */
.tm-toolbar .block-newsletter .custom {
    position: static;
}
.tm-toolbar .block-newsletter .custom::after {
    content: '';
    background: #ab1368;
    width: 10px;
    height: 47px;
    position: absolute;
    top: -2px;
    right: -5px;
    transform: rotate(-170deg);
}

/* ---- BLOC BLEU : Zoom + Login ---- */
/* Ancien DOM avait 4 enfants dans .tm-zoom-login (position:relative) :              */
/*   .block-zoom-login-before  (abs, 10x47, top:-2px, left:-5px, rotate 170deg, z:1) */
/*   .block-zoom-login         (bg #0069b4, contient .mod_zoom + .mod_login 50/50)    */
/*   .block-zoom-login-bottom  (abs, w:100%, h:15px, bottom:-6px)                     */
/*   .block-zoom-login-after   (abs, 10x47, top:-2px, right:-5px, rotate -170deg, z:1)*/
/*                                                                                     */
/* Nouveau DOM : zoom et login sont dans 2 cellules grid separees                      */
/*   <div>[cellule zoom]                                                               */
/*     <div.panel-zoom#module-211>                                                     */
/*       <div.custom><div><span#increase/><span#decrease/></div></div>                 */
/*   <div>[cellule login]                                                              */
/*     <div#module-213>                                                                */
/*       <div.custom><div><a><img alt="login"/></a></div></div>                        */
/*                                                                                     */
/* Pseudo-elements :                                                                   */
/*   .panel-zoom::before          = block-zoom-login-before (trapeze gauche)           */
/*   .panel-zoom::after           = block-zoom-login-bottom sur la zone zoom           */
/*   #module-213 .custom::after   = block-zoom-login-after (trapeze droit)             */
/*   #module-213::after           = block-zoom-login-bottom sur la zone login          */

/* Le module zoom (#module-211, .panel-zoom, a aussi uk-clearfix) */
.tm-toolbar .panel-zoom {
    background: #0069b4;
    color: #fff !important;
    padding: 0 40px;
    margin: 0;
    position: relative;
}
.tm-toolbar .panel-zoom #increase,
.tm-toolbar .panel-zoom #decrease {
    cursor: pointer;
    display: inline-block;
    width: 37px;
    height: 40px;
    vertical-align: middle;
    background: url(../../../images/font.png) no-repeat left center;
}
.tm-toolbar .panel-zoom #decrease {
    background-position: right center;
}
/* uk-clearfix cree des ::before/::after avec display:table — on les neutralise */
.tm-toolbar .panel-zoom.uk-clearfix::before,
.tm-toolbar .panel-zoom.uk-clearfix::after {
    display: none !important;
}

/* On utilise les .custom internes pour les pseudo-elements (pas de conflit clearfix) */
/* .panel-zoom .custom = positionnement statique, pseudos relatifs a .panel-zoom */
.tm-toolbar .panel-zoom .custom {
    position: static;
}
/* block-zoom-login-before = trapeze gauche (valeurs ajustees via inspecteur) */
.tm-toolbar .panel-zoom .custom::before {
    content: '';
    background: #0069b4;
    width: 10px;
    height: 47px;
    position: absolute;
    top: -2px;
    left: -9px;
    transform: rotate(170deg);
    z-index: 1;
}
/* block-zoom-login-bottom = bande basse */
.tm-toolbar .panel-zoom .custom::after {
    content: '';
    background: #0069b4;
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: -6px;
    left: -4px;
    z-index: 1;
    width: 105%;
}
/* block-zoom-login-after = trapeze droit (sur le div interne du .custom) */
.tm-toolbar .panel-zoom .custom > div::after {
    content: '';
    background: #0069b4;
    width: 10px;
    height: 47px;
    position: absolute;
    top: -2px;
    right: -10px;
    transform: rotate(-170deg);
    z-index: 1;
}
.tm-toolbar .panel-zoom .custom > div {
    position: static;
}

/* Login icone (maintenant dans le module zoom) */
.tm-toolbar img[alt="login"] {
    max-height: 30px;
    vertical-align: middle;
    filter: brightness(0) invert(1);
}

/* Structure grid du toolbar-right */
.tm-toolbar .uk-margin-auto-left,
.tm-toolbar .uk-margin-auto-left > [uk-grid],
.tm-toolbar .uk-container,
.tm-toolbar .uk-flex {
    overflow: visible !important;
}
.tm-toolbar .uk-margin-auto-left > [uk-grid] {
    margin: 0;
    padding: 0;
}
/* Cellule newsletter : espace a droite comme l'ancien .toolbar-newsletter */
.tm-toolbar .uk-margin-auto-left > [uk-grid] > :has(.block-newsletter) {
    position: relative;
    overflow: visible !important;
    margin-right: 20px;
}
/* Cellule zoom (contient maintenant aussi le login) */
.tm-toolbar .uk-margin-auto-left > [uk-grid] > :has(.panel-zoom) {
    background: #0069b4;
    padding: 0 5px !important;
    margin-left: 0 !important;
    position: relative;
    z-index: 4;
    overflow: visible !important;
}
/* Cacher la cellule hidden "Les 49 communes" */
.tm-toolbar .uk-margin-auto-left > [uk-grid] > :has(.uk-hidden) {
    display: none;
}

/* -----------------------------------------------------------------------------
   5. Headerbar — recherche arrondie
   ----------------------------------------------------------------------------- */
.tm-headerbar {
    padding: 10px 0;
}
.tm-header .uk-search .uk-search-input,
.tm-header .uk-search-default .uk-search-input,
.tm-header .uk-search-navbar .uk-search-input {
    background: #fff;
    border-radius: 50px;
    width: 230px;
    padding-left: 15px;
    box-shadow: 0 0 5px #ddd;
    color: #0069b4;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #ddd;
}
.tm-header .uk-search .uk-search-input::placeholder,
.tm-header .uk-search-default .uk-search-input::placeholder,
.tm-header .uk-search-navbar .uk-search-input::placeholder {
    color: #0069b4;
    font-weight: 500;
}
.tm-header .uk-search-icon,
.tm-header .uk-search .uk-search-icon {
    color: #0069b4;
}

/* -----------------------------------------------------------------------------
   6. Navbar 4 couleurs
   ----------------------------------------------------------------------------- */
.tm-header .uk-navbar-container {
    padding: 0 !important;
}
/* Navbar dans son container normal */
.tm-header .uk-navbar-container .uk-navbar {
    padding: 0;
    gap: 0;
    column-gap: 0 !important;
}
.tm-header .uk-navbar-container .uk-navbar-left,
.tm-header .uk-navbar-container .uk-navbar-center,
.tm-header .uk-navbar-container .uk-navbar-right {
    gap: 0 !important;
    column-gap: 0 !important;
    padding: 0;
    flex: 1;
}
.tm-header .uk-navbar-container .uk-navbar-nav {
    width: 100%;
    display: flex;
    gap: 0 !important;
    column-gap: 0 !important;
}
.tm-header .uk-navbar-container .uk-navbar-nav > li {
    flex: 1 1 25%;
    margin: 0 !important;
    padding: 0;
    margin-right: 0 !important;
}
.tm-header .uk-navbar-container .uk-navbar-nav > li > a {
    color: #fff;
    font-family: 'TitilliumWeb', 'Titillium Web', sans-serif;
    font-size: 24px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    justify-content: center;
    padding: 0 15px;
    min-height: auto;
}
.tm-header .uk-navbar-container .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-container .uk-navbar-nav > li > a:focus,
.tm-header .uk-navbar-container .uk-navbar-nav > li.uk-active > a {
    color: #fff;
}
.tm-header .uk-navbar-container .uk-navbar-nav > li > a::before {
    content: none;
}

/* Couleur par item de menu */
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(1) { background: #ab1368; }
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(2) { background: #66cced; }
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(3) { background: #0069b4; }
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(4) { background: #224674; }

/* Dropdown — couleur de texte par item */
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(1) .uk-navbar-dropdown a { color: #ab1368; }
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(2) .uk-navbar-dropdown a { color: #1ba2ce; }
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(3) .uk-navbar-dropdown a { color: #0069b4; }
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(4) .uk-navbar-dropdown a { color: #224674; }

/* Bordures separatrices dans les dropdowns */
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(1) .uk-navbar-dropdown .uk-nav > li:nth-child(n+2) { border-top: 1px solid #ab1368; }
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(2) .uk-navbar-dropdown .uk-nav > li:nth-child(n+2) { border-top: 1px solid #1ba2ce; }
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(3) .uk-navbar-dropdown .uk-nav > li:nth-child(n+2) { border-top: 1px solid #0069b4; }
.tm-header .uk-navbar-container .uk-navbar-nav > li:nth-child(4) .uk-navbar-dropdown .uk-nav > li:nth-child(n+2) { border-top: 1px solid #224674; }

/* Dropdown pleine largeur + animation */
.tm-header .uk-navbar-container .uk-navbar-dropdown {
    width: 100%;
    left: 0 !important;
    margin: 0;
    animation: svdl-slide-in-top 0.4s ease both;
}
.tm-header .uk-navbar-container .uk-navbar-dropdown .uk-nav a {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 15px;
}
.tm-header .uk-navbar-container .uk-navbar-dropdown .uk-nav a:hover {
    opacity: 0.8;
    color: #3c3c3b !important;
}
.tm-header .uk-navbar-container .uk-navbar-dropdown .uk-nav-sub {
    margin-bottom: 20px;
    padding: 0 0 0 20px;
}
.tm-header .uk-navbar-container .uk-navbar-dropdown .uk-nav-sub a {
    font-size: 14px;
    font-weight: 200;
    text-transform: none;
}
.tm-header .uk-navbar-container .uk-navbar-dropdown .uk-nav-sub li:nth-child(n+2) {
    border-top: none !important;
}

@keyframes svdl-slide-in-top {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* -----------------------------------------------------------------------------
   7. Offcanvas mobile — couleurs par item
   ----------------------------------------------------------------------------- */
.uk-offcanvas-bar .uk-nav > li:nth-child(1) { background: #ab1368; }
.uk-offcanvas-bar .uk-nav > li:nth-child(1) > a { color: #fff; }
.uk-offcanvas-bar .uk-nav > li:nth-child(1) .uk-nav-sub { background: #fff; }
.uk-offcanvas-bar .uk-nav > li:nth-child(1) .uk-nav-sub a { color: #ab1368; font-weight: 800; }

.uk-offcanvas-bar .uk-nav > li:nth-child(2) { background: #66cced; }
.uk-offcanvas-bar .uk-nav > li:nth-child(2) > a { color: #fff; }
.uk-offcanvas-bar .uk-nav > li:nth-child(2) .uk-nav-sub { background: #fff; }
.uk-offcanvas-bar .uk-nav > li:nth-child(2) .uk-nav-sub a { color: #1ba2ce; font-weight: 800; }

.uk-offcanvas-bar .uk-nav > li:nth-child(3) { background: #0069b4; }
.uk-offcanvas-bar .uk-nav > li:nth-child(3) > a { color: #fff; }
.uk-offcanvas-bar .uk-nav > li:nth-child(3) .uk-nav-sub { background: #fff; }
.uk-offcanvas-bar .uk-nav > li:nth-child(3) .uk-nav-sub a { color: #0069b4; font-weight: 800; }

.uk-offcanvas-bar .uk-nav > li:nth-child(4) { background: #224674; }
.uk-offcanvas-bar .uk-nav > li:nth-child(4) > a { color: #fff; }
.uk-offcanvas-bar .uk-nav > li:nth-child(4) .uk-nav-sub { background: #fff; }
.uk-offcanvas-bar .uk-nav > li:nth-child(4) .uk-nav-sub a { color: #224674; font-weight: 800; }

/* -----------------------------------------------------------------------------
   8. Headerbar — Layout 3 colonnes (UNESCO | Logo | Recherche)
   ----------------------------------------------------------------------------- */
.tm-headerbar {
    padding: 10px 0;
}
.tm-headerbar-grid {
    align-items: center;
}

/* --- UNESCO logo (colonne gauche) --- */
.tm-headerbar .unesco {
    display: flex;
    align-items: center;
}
.tm-headerbar .unesco img {
    max-height: 80px;
    width: auto;
}

/* --- Logo principal SVDL (colonne centre) --- */
.tm-headerbar .uk-text-center img,
.tm-headerbar .uk-text-center .uk-logo img {
    max-height: 90px;
    width: auto;
}

/* --- Colonne droite : pousser tout a droite --- */
.tm-header-search-col {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}
.tm-headerbar-grid > div:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* --- Barre de recherche (colonne droite) — identique ancien site --- */
.tm-headerbar .uk-search {
    color: rgba(255, 255, 255, 0.75);
    margin-left: auto;
}
.tm-headerbar .uk-search .uk-search-input,
.tm-headerbar .uk-search-default .uk-search-input {
    background: #fff;
    border-radius: 50px;
    width: 230px;
    padding-left: 15px !important;
    box-shadow: 0px 0px 5px 0px #dddddd;
    color: #0069b4;
    text-transform: uppercase;
    letter-spacing: 1px;
    height: 40px;
    font-size: 14px;
}
.tm-headerbar .uk-search .uk-search-input::placeholder {
    color: #0069b4;
    font-weight: 500;
    text-transform: uppercase;
}
.tm-headerbar .uk-search .uk-search-input:focus {
    background: #fff;
    border-radius: 50px;
}
/* Icone loupe */
.tm-headerbar .uk-search .uk-search-icon,
.tm-headerbar .uk-search-default .uk-search-icon {
    color: #0069b4;
    font-weight: 800;
}
.tm-headerbar .uk-search .uk-search-icon svg {
    color: #0069b4;
}

/* --- Responsive header --- */
@media (max-width: 959px) {
    .tm-header .uk-navbar-container .uk-navbar-nav > li > a {
        font-size: 16px;
        height: 50px;
        line-height: 50px;
    }
    .toolbar-recrute,
    .toolbar-zoom {
        font-size: 12px;
        padding: 4px 12px;
    }
    .tm-headerbar .uk-search-default .uk-search-input {
        width: 180px;
    }
    .tm-headerbar .unesco img {
        max-height: 60px;
    }
}
@media (max-width: 639px) {
    .tm-headerbar-grid {
        text-align: center;
    }
    .tm-headerbar .uk-search-default .uk-search-input {
        width: 160px;
    }
    .tm-headerbar .unesco img {
        max-height: 50px;
    }
}

/* -----------------------------------------------------------------------------
   9. Diaporama / Slideshow (position above-navbar)
   ----------------------------------------------------------------------------- */

/* Container — pleine largeur, aucun espace parasite */
/* margin-bottom negatif = la navbar remonte sur le slider (homepage only car .tm-above-navbar n'existe que la) */
.tm-above-navbar {
    margin: 0 !important;
    padding: 0 !important;
}
/* Navbar chevauche le slider — uniquement homepage (classe tm-has-slider sur le header) */
.tm-has-slider .uk-navbar {
    margin-top: -35px;
    position: relative;
    z-index: 10;
}
.tm-above-navbar > * {
    margin: 0 !important;
    padding: 0 !important;
}
.tm-above-navbar .uk-section {
    padding: 0 !important;
    margin: 0 !important;
}
.tm-above-navbar .uk-section > * {
    padding: 0 !important;
    margin: 0 !important;
}
/* Supprimer toutes les marges du conteneur slider */
.tm-above-navbar .uk-slider {
    margin: 0 !important;
}
.tm-above-navbar .uk-slider.uk-margin {
    margin-bottom: 0 !important;
}

/* Hauteur du slider — contraindre comme l'ancien site (~450px) */
.tm-above-navbar .uk-slider-items {
    max-height: 450px;
    overflow: hidden;
}
.tm-above-navbar .el-item {
    max-height: 450px;
    overflow: hidden;
}

/* --- Dotnav : positionne dans la zone contenu du slide actif --- */
/* Le wrapper .uk-position-relative sert de repere */
.tm-above-navbar .uk-slider > .uk-position-relative {
    position: relative;
}
/* On deplace le bloc dotnav EN absolu dans le conteneur slider */
.tm-above-navbar .uk-slider {
    position: relative;
}
.tm-above-navbar .uk-slider > .uk-margin-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    margin-top: 0 !important;
    padding: 30px 0 0 30px;
    z-index: 10;
    pointer-events: auto;
}
.tm-above-navbar .uk-slider > .uk-margin-top .uk-dotnav {
    justify-content: flex-start;
}
@media (max-width: 959px) {
    .tm-above-navbar .uk-slider > .uk-margin-top {
        width: 100%;
        padding: 10px 0 0 20px;
    }
}
/* Dots carres — identique ancien site (.widget-actus-accueil) */
.tm-above-navbar .uk-dotnav {
    gap: 0;
    margin-left: 35px;
    margin-top: 30px;
}
.tm-above-navbar .uk-dotnav > * {
    padding-left: 10px;
}
.tm-above-navbar .uk-dotnav > * > a {
    width: 12px !important;
    height: 12px !important;
    border-radius: 0 !important;
    background: #fff !important;
    border: 1px solid #fff !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: content-box;
}
.tm-above-navbar .uk-dotnav > * > a:hover,
.tm-above-navbar .uk-dotnav > * > a:focus {
    background: #173040 !important;
    border-color: #173040 !important;
}
.tm-above-navbar .uk-dotnav > .uk-active > a {
    background: #173040 !important;
    border-color: #173040 !important;
}

/* --- Slidenav : fond gris, fleches blanches, toujours visibles --- */
.tm-above-navbar .uk-slidenav-container {
    display: flex !important;
    gap: 2px;
    z-index: 100 !important;
    position: relative;
}
/* Surcharge complete des slidenav — force fond gris + fleches blanches */
.tm-above-navbar .uk-slidenav-container .uk-slidenav,
.tm-above-navbar a.uk-slidenav,
.tm-above-navbar .uk-dark .uk-slidenav,
.tm-above-navbar [uk-inverse] .uk-slidenav,
.tm-above-navbar .el-slidenav {
    background: #8a8a8a !important;
    color: #fff !important;
    padding: 5px 8px !important;
    display: block !important;
    opacity: 1 !important;
}
.tm-above-navbar .uk-slidenav:hover,
.tm-above-navbar .uk-slidenav:focus {
    background: #666 !important;
    color: #fff !important;
}
/* SVG fleches en blanc — surcharge uk-inverse/uk-dark/currentColor */
.tm-above-navbar .uk-slidenav svg,
.tm-above-navbar .uk-slidenav svg polyline,
.tm-above-navbar .uk-slidenav svg path {
    stroke: #fff !important;
    color: #fff !important;
}

/* --- Contenu du slide --- */
/* Fond gris cote texte (uk-tile-muted) */
.tm-above-navbar .el-item.uk-tile-muted {
    background-color: #eee !important;
}

/* Pre-titre "L'ACTUALITE" */
.tm-above-navbar .el-meta {
    color: #173040 !important;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
}

/* Titre du slide */
.tm-above-navbar .el-title {
    color: #84be4c !important;
    font-weight: bold;
}

/* Bouton "En savoir +" */
.tm-above-navbar .el-link,
.tm-above-navbar .uk-button-primary,
.tm-above-navbar .el-content a.uk-button {
    background: #84be4c !important;
    color: #fff !important;
    border: none;
    text-transform: none;
    font-size: 14px;
    padding: 2px 8px;
}
.tm-above-navbar .el-link:hover,
.tm-above-navbar .uk-button-primary:hover,
.tm-above-navbar .el-content a.uk-button:hover {
    background: #8f0f57 !important;
    color: #fff !important;
}

/* --- Responsive --- */
@media (max-width: 959px) {
    .tm-above-navbar .uk-slider-items {
        max-height: 350px;
    }
    .tm-above-navbar .el-item {
        max-height: 350px;
    }
}

/* -----------------------------------------------------------------------------
   10. Switcher Partenaires — logos grayscale + hover
   ----------------------------------------------------------------------------- */

/* Container partenaires — centrer, padding comme l'ancien .block-partenaire */
.wk-switcher-partenaires {
    padding: 0 20px;
}
.wk-switcher-partenaires .uk-panel,
.wk-switcher-partenaires .wk-panel {
    text-align: center;
}

/* Logos en niveaux de gris par defaut (ancien : .block-partenaire .uk-thumbnav li img) */
.wk-switcher-partenaires li img {
    filter: grayscale(1) !important;
    opacity: 0.7;
    transition: opacity 0.15s linear;
}

/* Hover : seulement opacite (pas de couleur) */
.wk-switcher-partenaires li:hover img,
.wk-switcher-partenaires li:focus img {
    opacity: 1;
}

/* Item actif : couleur + pleine opacite (wk-active en mode noconflict, uk-active en mode uikit3) */
.wk-switcher-partenaires li.uk-active img,
.wk-switcher-partenaires li.wk-active img {
    filter: none !important;
    opacity: 1;
}

/* Supprimer le pseudo-element ::after du wk-thumbnav (overlay gradient = faux effet bordure) */
.wk-switcher-partenaires .wk-thumbnav > * > *::after,
.wk-switcher-partenaires .uk-thumbnav > * > *::after,
.wk-switcher-partenaires li > a::after,
.wk-switcher-partenaires li > *::after {
    display: none !important;
    content: none !important;
}

/* Curseur pointer sur les logos */
.wk-switcher-partenaires li {
    cursor: pointer;
}

/* Supprimer bordure/outline sur les liens des LOGOS uniquement (nav thumbnav, pas le content) */
.wk-switcher-partenaires .wk-thumbnav li a,
.wk-switcher-partenaires .wk-thumbnav li a:hover,
.wk-switcher-partenaires .wk-thumbnav li a:focus,
.wk-switcher-partenaires .uk-thumbnav li a,
.wk-switcher-partenaires .uk-thumbnav li a:hover,
.wk-switcher-partenaires .uk-thumbnav li a:focus {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}
.wk-switcher-partenaires li img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Centrer le contenu (description + bouton "Voir le site") par rapport aux logos */
.wk-switcher-partenaires .wk-switcher,
.wk-switcher-partenaires .uk-switcher {
    text-align: center;
}

/* Bouton "Voir le site" — style vert comme l'ancien site */
.wk-switcher-partenaires .wk-switcher .wk-button,
.wk-switcher-partenaires .wk-switcher .wk-button-default,
.wk-switcher-partenaires .uk-switcher .uk-button,
.wk-switcher-partenaires .uk-switcher .uk-button-default {
    background: #84be4c !important;
    color: #fff !important;
    border: none;
    text-transform: uppercase;
    font-size: 13px;
    padding: 8px 20px;
    display: inline-block;
}
.wk-switcher-partenaires .wk-switcher .wk-button:hover,
.wk-switcher-partenaires .uk-switcher .uk-button:hover {
    background: #6fa63a !important;
    color: #fff !important;
}