@font-face {
    font-family: Inter;
    src: url("../fonts/Inter-Regular.ttf") format("truetype");
}
body {font-family: 'Inter', sans-serif}
main > .container {
    padding: 70px 15px 20px;
}

.footer {
    background-color: #d2d2d2;
    font-size: .9em;
    color: #2B2620;
    padding: 40px 0;
    line-height: 1.2em;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.footer h4 {font-size: 1em;font-weight: bold}
.footer a {color: #2B2620}
.footer ul {margin: 0;padding: 0;line-height: 1.5em;margin-bottom: 1rem}
.footer ul li {list-style: none}
.footer ul.lang-switch li:last-child {margin-right: 0}
ul.social-networks {margin-top: 180px}
ul.social-networks li {display: inline;text-align: center;margin-left: 10px}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
    .bloc-header {width: 50% !important;}
}

@media(max-width:600px) {
    .bloc-header {width: 100% !important;}
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

/****** CUSTOM HERE AFTER ******************/
.head-logo-mta {max-width: 66px;margin-top: 30px;}
.head-logo-mtabike {max-width: 70px;margin-top: 27px;}
.head-logo-mtaplus {max-width: 80px;margin-top: 22px;}
img {max-width: 100%}
a, a:hover {text-decoration: none;color: #89BA91}
/*.logo-mta-plus {display:block;width: 100px}*/
.head-logos {
    display: flex;             /* Utilise Flexbox pour aligner les éléments en ligne */
    justify-content: flex-end; /* Aligne les éléments à droite */
    gap: 15px;                 /* Ajoute un espace entre les images */
}

/*.logo {width: 200px}*/
.logo-mobile {display: none}

/** TOP NAV **/
.lang-search {margin-top: 35px}
.main-nav {margin-bottom:20px;}
.main-nav a {color: #1d1d1b}
.main-nav a:hover {text-decoration: underline}
.nav-catalog-root {margin-top: 2.9rem}
.nav-catalog-root ul {margin: 0;padding: 0;list-style-type: none;}
.nav-catalog-root > li > * {}
.main-toggle {text-transform: uppercase;font-weight: bold;font-size: 0.9em;}
.bloc-header {float: left;display: block;width: 25%;margin-bottom: 25px;font-size: 0.9em}
.item-lvl1 {font-weight: bold}
.item-lvl2 {font-weight: normal}
.dropdownmenu, .dropdownsearch {
    display: none;
    width: 100%;
    box-sizing: border-box;
    background: #f0f0f0;
    padding: 45px 50px;
    box-shadow: none;
    border-radius: 0;
    border-top: solid 20px white;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 1000;
    min-height: 400px;
}
.dropdownsearch {margin-top:30px;z-index:20;border-bottom: 1px solid #999;}
.dropdowntoggle {margin-left: 50px; }
.dropdowntoggle a.active {text-decoration: underline solid 2px}
.dropdownlist {width: 70%}
.dropdown-lvl2 {width: 100%}
.img-categ {width:30%;position: absolute;right: 0;top: 10px}
ul.lang-switch {margin: 0;padding: 0;}
ul.lang-switch li {display: inline;list-style-type: none;font-size: 0.8em;text-transform: lowercase; margin-right: 15px}
ul.lang-switch li a.active {text-decoration: underline}
.loupe {width: 20px;cursor: pointer}
.title-detail span {font-weight: normal;font-size: 0.9em}


/** MENU CATALOG **
 */
.menu {width: 100%;}
.toggle-classif {display:flex;align-items: center;
    justify-content: center;  background: rgb(192,192,192);
    background: linear-gradient(90deg, rgba(192,192,192,1) 0%, rgba(204,204,204,1) 26%, rgba(192,192,192,1) 100%);  height: 97.5%;width: 15px;
    float: left;border: 1px solid #c0c0c0; margin: 0 10px;cursor: pointer}
.toggle-classif a {color: #000 !important;}
.sub-menu {display: none;}
/*ul.menu li:first-child > ul {display: block}*/
/*.catalog-menu {padding: 0}*/
.catalog-menu ul {padding-left: 0;list-style-position: inside;background-color: #2b2620;}
.catalog-menu ul ul {background-color: #696969;}
.catalog-menu ul ul ul {background-color: #999999}
.catalog-menu ul ul ul ul {background-color: #bbbbbb}
.catalog-menu ul ul ul ul ul {background-color: #dddddd}
.catalog-menu ul ul ul ul ul ul {background-color: #fff}
.catalog-menu ul li {border-bottom: 1px solid white; padding: 0; list-style-type: none;}

.catalog-menu a {color: #fff;display: block;padding: 3px 10px 1px 10px}
.catalog-menu a.active, .catalog-menu a:hover {color: #fff;text-decoration: none}
.catalog-menu ul ul ul ul ul ul li a {color:#666}
.sub-menu li:last-child {border-bottom: none}

.main-content {}
.wrap-catalog {background: #f0f0f0;padding-bottom: 50px}
.main-catalog {padding-top: 40px}
.catalog-content {}
.catalog-content h3 {font-size: 1.2em;font-weight: bold;margin-bottom: 20px}
.detail-title span {font-weight: normal; font-size: 0.7em}
.prod-detail-row {margin-bottom: 35px}
.prod-detail-row:last-of-type {margin-bottom: 0px}
.prod-detail {border-top: 1px solid #1e1e1c;border-bottom: 1px solid #1e1e1c;vertical-align: top;padding-top:20px}
/*.prod-detail {border-top: 1px solid #1e1e1c;vertical-align: top;padding-top:20px}*/
.prod-detail p {margin: 0;padding: 0;font-size: 0.9em;line-height: 1.5em}
.prod-detail p.prod-decription {font-size: 0.9em;margin-bottom: 15px}
.prod-detail p span {color:#727271}
.prod-img {vertical-align: middle;text-align: right}
.prod-img img {width: 95%}

legend {color: #89BA91;font-size: 0.9em}
.btn-primary {background: #89BA91;border: none}
.btn-primary:hover {background: white}

/*** BREADCRUMBS *****/
ol.breadcrumb {
}
ol.breadcrumb li {
    display: inline;
    font-size: 18px;
}
ol.breadcrumb li:before {
    padding: 5px;
    color: #89BA91;
    content: "\003E";
}
ol.breadcrumb li:first-child:before {
    padding: 0;
}
ol.breadcrumb li:first-child:before {content:''}
ol.breadcrumb li a {
    color: #89BA91;
    text-decoration: none;
}
ol.breadcrumb li a:hover {
    text-decoration: underline;
}
.thumbnail, .thumbnail-list {margin-bottom: 12px;background: white;border: 1px solid white}
.thumbnail-list {border: 1px solid #999;min-height: 355px}
.thumbnail a {color: #89BA91;}
.caption {padding:10px}
.caption p {margin-bottom: 0;text-transform: uppercase;font-weight: bold;font-size: 0.8em;}
.thumbnail-home .caption {padding: 20px 0;font-size: 1.3em;line-height: 1.1em;color: #666}
.thumbnail-home .caption {padding: 20px 0;font-size: 1.3em;line-height: 1.1em;color: #666}
.thumbnail-detail {position: relative}
.list-nomta-wrap {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-image: linear-gradient(to left, #000 20%, transparent 20%) 100% 1;
    padding: 5px 0;
}
.list-nomta-sep {width: 20px;float: right}
.list-nomta {font-weight: bold;font-size: 1.1em}
.list-nomta-label {font-size: 0.75em}
.list-buttons {margin-top: 15px}
.list-buttons div {display: inline-block;width: 100%}
.list-buttons a { color: #89BA91}
.list-buttons a span {color:#727271}
.detail-content-line, .list-button {color:#727271;padding: 6px 0 6px 0;border-bottom: 1px solid;font-size: 1.0em}
.detail-content-line span {font-weight: bold;color: #000;font-size: 1.3em}

.detail-teaser {display: flex;align-items: center;
    justify-content: center;height: 280px;line-height: 1.2em}
.detail-teaser-large {background: #89BA91; color: white;padding: 0 60px;font-size: 2.1em;font-weight: bold;text-align: center;}
.detail-teaser-small {background: #2B2620; color: white;padding: 0 50px;font-size: 1.3em;font-weight: bold;text-align: left;}
.detail-teaser-small a {color: white}
.detail-teaser-small img {margin-top: 25px;margin-left: -15px}
.swiper {
    width: 100%;
    height: 100%;
}
.display-mode a.active {color: #6c757d}

/****** SWIPER *********************/
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper2 {
    height: 100%;
    width: 100%;
}

.mySwiper {
    height: auto;
    box-sizing: border-box;
    padding: 10px 0;
}

.mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-button-prev, .swiper-button-next {color: white !important;}

/**************** HOME ****************/

/* Conteneur d’overlays centré dans le hero */
.header-home { position: relative; }

.hero-overlays {
    position: absolute;
    top: 20%;                 /* ajuste la hauteur de départ */
    left: 50%;
    transform: translateX(-50%);
    width: min(960px, 92%);   /* largeur max + marges responsives */
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;      /* centre horizontalement */
    gap: 16px;                /* espacement entre texte et formulaire */
}

/* Bloc texte du hero (reste centré, pas besoin de position absolue ici) */
.hero-overlays .text-overlay {
    position: static;
    color: #fff;
    text-align: center;
}

.hero-overlays .text-overlay .overlay {
    padding: 20px 28px;
    border-radius: 10px;
    font-weight: bold;
    line-height: 1.2;
    font-size: clamp(1rem, 2.2vw, 1.9rem);
}

/* Le formulaire en overlay : on neutralise le style “dropdown” du header */
.search-overlay {
    width: 50%;
    background-color: whitesmoke;}


.search-overlay .dropdownsearch {
    display: block !important;   /* annule display:none de ta CSS */
    position: static !important; /* on le laisse dans le flux */
    padding: 16px !important;
    background: rgba(255,255,255,0.9) !important;
    border: 0 !important;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
    min-height: auto !important;
    margin-top: 0 !important;
}

/* Simplifie l’intérieur pour le hero */
.search-overlay .dropdownsearch .container { padding: 0 !important; }
.search-overlay fieldset legend { margin-bottom: .35rem; }
.search-overlay .btn.btn-primary { width: 40px; }

/* Champs plus compacts et alignés */
.search-overlay .input-group .mta-part {
    max-width: 110px;   /* ajuste si tu veux */
}

/* Légende déjà rapprochée chez toi, sinon : */
/* .search-overlay fieldset legend { margin-bottom: .35rem; } */

/* Si tu veux resserrer encore verticalement le fieldset : */
.search-overlay fieldset { margin-top: .25rem; margin-bottom: .5rem; }


/* Hauteur du hero (swiper) : plus généreuse sur desktop */
/*.swiper {
    height: clamp(320px, 50vw, 520px);
}*/

.search-overlay .catalog-search {display: none;}
/* Responsive : rapproche un peu les overlays en mobile */
@media (max-width: 576px) {
    .hero-overlays { top: 75%; gap: 12px; }
    .search-overlay {
        width: 100%;
        background-color: whitesmoke;}
    .hero-overlays .text-overlay {display: none;}
}
/* Cache le placeholder quand l'input est focus */
.mta-part::placeholder { opacity: 1; transition: opacity .15s; }
.mta-part:focus::placeholder { opacity: 0; }


.intro-txt-home {font-size: 1.4em;line-height: 1.4em;margin-bottom: 50px; text-align: left}
/*.overlay{
    background: rgba(137, 186, 145, 0.7);
    position: absolute;
    width: 25%;
    bottom: -20px;
    left: 0;
    top: 25%;
    padding: 70px;
    font-size: 1.9em;
    line-height: 1.2em;
    font-weight: bold;
    color: white;
    text-align: center;
}*/
.home-teasers {margin-bottom: 35px}
.home-caption {padding:20px 0}
.home-caption p {margin-bottom: 0;}
.thumbnail-home {margin-bottom: 25px}
.thumbnail-home h4 {color:#89BA91;margin-bottom: 6px; font-size: 1.3rem}
.desc-more-info {font-size: 1.2em;
    line-height: 1.3em;
    color: #727271;}
.home-more {font-size: 0.9em;text-decoration: underline}


/***** HOURS ***********************/
.hours-month {border-bottom:1px solid #000;padding: 10px 0 10px 0;font-weight: bold;cursor:pointer}
.hours-month:first-child {border-top: none}
.hours-month:after {content:'   \2192';font-weight: normal}
.hours-content {display: none;padding-top: 20px;padding-bottom: 20px;padding-left: 45px}
.hours-content span {margin-left: 45px}
.hours-content span:first-child {margin-left: 0}
.hours-wrap {position: relative}
.hours-address {font-size: 0.9em;color: #999;padding-top: 25px}
.circle {
    height: 275px;
    width: 275px;
    background-color: #89BA91;
    border-radius: 50%;
    padding: 60px 2px;
    text-align: center;
    color: white;
    line-height: 1.1em;
    position: absolute;
    top: -150px;
    right: -100px;
    font-size: 1.2em;
}
.square {background-color: #89BA91; color: white;text-align: center;font-size: 0.9em;padding: 10px 5px}
.hours-days {color: #89BA91}

.categ-article {margin:0;padding: 0;list-style: none}

#topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 10px;
    font-size: 18px;
    opacity: 0.7;
    width: 45px;
}

#topBtn:hover {
    background-color: #89BA91;
}
.title-detail {display: inline-flex}
.mta-envelope, .mta-arrow-down {width: 35px;float: right}
.mta-plus-circle {width: 25px;float: right}
.mta-file-pdf {width: 20px;float: right}
.cont-icon {cursor: pointer}
.site-about {margin-bottom: 50px}
.line-hour {padding: 5px 0}
.line-hour:nth-child(even) {background: #FFF}
.line-hour:nth-child(odd) {background: #F5F5F5}

.swiper-container {
    position: relative;
    width: 100%;
    height: auto; /* Ajustez la hauteur en fonction de vos besoins */
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-overlay {
    position: absolute;
    top: 30%;
    left: 20%;
    transform: translate(-30%, -50%);
    color: white;
    text-align: center;
    z-index: 10;
    background: rgba(107, 199, 140, 0.7); /* Pour ajouter un léger fond transparent */
    padding: 20px;
    border-radius: 10px;
}