/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }
/**
 * General Elements
 **/

:focus, button:focus { outline:none; }
body { font-family: Rubik, sans-serif; font-weight:normal; font-size:1.125rem; color:var(--dark); }

/* Images */
img, svg { max-width:100%; height:auto; }
[data-sizes] { display:block; width:100%; }
[data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; }

/* Paragraphs */
p { margin-bottom:1em; }
p:last-child { margin-bottom:0; }

/* Link */
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:none; color:var(--red); }

/* Lists */
ul, ol { margin-bottom:0; padding:0; list-style:none; }

/* Forms */
.invalid-feedback.visible { display:block !important; }

/* Titles */
h1, .h1 { font-family: AlteHaas-Grotesk, sans-serif; font-size:2.5rem; font-weight:bold; line-height:1.2em; margin-bottom:1em; }
h2, .h2 { font-family: AlteHaas-Grotesk, sans-serif; font-size:3.125rem; font-weight:bold; margin-bottom:1em; line-height:1.1em; }
h3, .h3 { font-size:1.225rem; color:var(--red); font-weight:bold; }

/**
 * Layout
 **/

 /* Global */
:root {
    --spacing: 5vmax;
    --spacing-big: 10vmax;
    --green: #328734;
    --darkgreen: #145315;
    --textgreen: #0E340F;
    --red: #D70911;
    --darkred: #AC0007;
    --grey: #EEF3EF;
    --white: #F3F3F4;
    --dark: #333;
    --neutral-grey: #545454;
}

#page { position:relative; width:100%; overflow:hidden; }

.container-fluid { padding-left:160px; padding-right:160px; }

.relative {position: relative;}
.w-100 {width: 100%;}
.h-100 {height: 100%;}
.text-center {text-align: center;}

.popup-fancybox {width: 100%;}

img {object-fit: cover;}

.filigrane {pointer-events: none;}
/* .featured  h3 {font-size: 1.3rem;} */

/* Header */
#header { position:fixed; left:0; top:0; width:100%; z-index:401; background:#fff; box-shadow:0px 5px 10px 0px rgba(0,0,0,0.1); transition:all 0.5s ease 0s; }
#header .mainrow { align-items:center; height:90px; }
#header .logos { padding-left:30px; padding-right:30px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; align-self:stretch; box-shadow:15px 0px 20px 0px rgba(0,0,0,0.1); }
#header .logo { margin-right:2rem; }
#header .logo:last-child { margin-right:0; }
#header .navigation { display:flex; flex-direction:column; align-items:flex-end; }
#header .navigation a { display:block; }
#header .navigation .menu { display:flex; flex-direction:row; align-items:center; }
#header .navigation .top { padding-left:30px; padding-right:30px; font-size:0.813rem; width:100%; display:flex; flex-direction:row; align-items:stretch; justify-content:flex-end; position:relative; border-bottom:1px solid #E4E0E0; }
#header .navigation .top .menu li { margin-left:2em; }
#header .navigation .top .menu a { padding:0.5em 0; color:#748076; display:flex; flex-direction:row; align-items:center; }
#header .navigation .top .menu a svg { margin-right:1em; }
#header .navigation .top .menu a:hover,
#header .navigation .top .menu li.active a { color:var(--red); }
/* #header .navigation .top .menu a:hover svg,
#header .navigation .top .menu li.active a svg { fill:var(--red); } */
#header .recrutement:hover { background-color: var(--darkgreen);}
#header .navigation .bottom { padding-left:30px; padding-right:30px; font-size:1rem; font-weight:500; width:100%; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
#header .navigation .bottom .dropdown { position:static; }
#header .navigation .bottom .level-1 { margin-left:2em; }
#header .navigation .bottom .level-1 > a { text-transform:uppercase; color:var(--neutral-grey); padding:1em 0; position:relative; z-index:2; }
#header .navigation .bottom .level-1 > a > svg { width:30px; height:30px; fill:var(--neutral-grey); }
#header .navigation .bottom .level-1 > a:before { content:''; position:absolute; left:50%; top:calc(100% - 15px); width:2px; height:0px; background:var(--neutral-grey); transform:rotate(180deg); transition:all 0.5s ease 0s; }
#header .navigation .bottom .level-1 > a:hover:before { height:30px; }
#header .navigation .bottom .active a { color:var(--red); }
#header .navigation .bottom .active a:before { background:var(--red); }
#header .translate { display:flex; flex-direction:column; align-items:center; justify-content:center; padding-left:1em; margin-left:0; border-left:1px solid #E4E0E0; position:relative; }
#header .translate .trigger { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; color:var(--red); }
#header .translate .trigger span { display:inline-block; margin:0 10px; font-weight:500; text-transform:uppercase; }
#header .translate .dropdown { position:absolute; opacity:0; pointer-events:none; left:0; width:calc(100% + 30px); top:34px; z-index: 3; }
#header .translate .dropdown a { color:#fff; padding:1em; text-transform:uppercase; background:var(--red);  }
#header .translate.open .dropdown { opacity:1; pointer-events:auto; }
#header .translate.open .dropdown a:hover { background:var(--darkred); }
#header .recrutement {background-color: var(--green); color: #fff; padding: 0 30px; transition: all .4s ease; }
#header .recrutement:hover { background-color: var(--darkgreen);}
#header .navigation .top .menu .recrutement a { color: #fff; }
#header .navigation .top .menu .recrutement svg { fill: #fff; }


#header .navigation .submenu { position:absolute; left:0; width:100%; background:var(--dark); text-align:center; color:#fff; padding:var(--spacing); opacity:0; pointer-events:none; transition:all 0.5s ease 0s;  }
#header .navigation .submenu .prev { display:none; }
#header .navigation .submenu .image { position:relative; overflow:hidden; }
#header .navigation .submenu .image img { transition:all 0.5s ease 0s; }
#header .navigation .submenu a { position:relative; }
#header .navigation .submenu a:before { content:''; position:absolute; left:50%; top:0; transform:translate(-50%, -50%); width:20px; height:20px; background:var(--red); z-index:2; transition:all 0.5s ease 0.2s; transform-origin:center center; }
#header .navigation .submenu a:hover .image img { transform:scale(1.1); }
#header .navigation .submenu .text { padding:15px; background:var(--neutral-grey); font-size:1.2rem; text-transform:uppercase; color:#fff; }

#header .navigation .dropdown.active .submenu { opacity:1; pointer-events:auto; }

#header.pinned { transform:translateY(0); }
#header.unpinned { transform:translateY(-100%); }

/* Main */
#main { margin-top:90px; }

/* Footer */
#footer { border-top:1px solid #E4E0E0; }
#footer a:hover { color:var(--red); transition:all 0.5s ease 0s; }

#footer .socials { margin:30px 0; }
#footer .socials ul { display:flex; flex-direction:row; align-items:center; justify-content:center; }
#footer .socials a { padding:15px; display:block; }
#footer .socials svg { transition:all 0.5s ease 0s; }
#footer .socials a:hover svg { fill:var(--red); }

#footer .links { margin:30px 0; }
#footer .links ul { display:flex; flex-direction:row; align-items:center; justify-content:center; }
#footer .links li { margin:0 15px; }

/* Legal */
.legal { padding:var(--spacing); }
.legal h1 { font-size:3rem; margin:2em 0 1em 0; }
.legal h2 { font-size:2rem; margin:2em 0 1em 0; }
.legal h3 { font-size:1.6rem; margin:2em 0 1em 0; }
.legal table { width:100%; margin:1em 0; }
.legal table th,
.legal table td { padding:10px; border:1px solid #E4E0E0; }
.legal ul { list-style:disc; margin:1em 0 1em 1.5em; }

/* Hamburger */
.hamburger { display:none; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background:var(--red); }
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background:#fff; }
.hamburger:hover, .hamburger.is-active:hover { opacity:1; }

/**
 * Page specific
 **/

/* General rules */
.container-fluid { padding-left:160px; padding-right:160px; max-width:1590px; }

.padding { padding-top:var(--spacing); padding-bottom:var(--spacing); }
.padding-big { padding-top:var(--spacing-big); padding-bottom:var(--spacing-big); }

.my-4 { margin-top:var(--spacing) !important; margin-bottom:var(--spacing) !important; }
.mt-4 { margin-top:var(--spacing) !important; }
.mb-4 { margin-bottom:var(--spacing) !important; }
.my-5 { margin-top:var(--spacing-big) !important; margin-bottom:var(--spacing-big) !important; }
.mt-5 { margin-top:var(--spacing-big) !important; }
.mb-5 { margin-bottom:var(--spacing-big) !important; }

.py-4 { padding-top:var(--spacing) !important; padding-bottom:var(--spacing) !important; }
.pt-4 { padding-top:var(--spacing) !important; }
.pb-4 { padding-bottom:var(--spacing) !important; }
.py-5 { padding-top:var(--spacing-big) !important; padding-bottom:var(--spacing-big) !important; }
.pt-5 { padding-top:var(--spacing-big) !important; }
.pb-5 { padding-bottom:var(--spacing-big) !important; }

.btn { border-radius:50px; margin-top:2em; text-transform:uppercase; font-weight:500; padding:15px 50px; position:relative; border-width:2px; transition:all 0.3s ease 0s; }
.btn:before { content:''; position:absolute; right:0; top:50%; transform:translate(50%, -50%); width:30px; height:2px;transition:right 0.3s ease 0s, top 0.3s ease 0s; }
.btn:after { content:''; position:absolute; right:20px; top:50%; transform:translateY(-50%) rotate(45deg); width:12px; height:12px; border-style: solid; border-width:2px 2px 0 0; opacity:0; transition:all 0.3s ease 0s; }
.btn:hover { padding-right:70px; }
.btn:hover:before { right:32px; width:2px; height:16px; }
.btn:hover:after { opacity:1; }

.btn-outline-light { border-color:#fff; color:#fff; }
.btn-outline-light:before { background:#fff; }
.btn-outline-light:after { border-color:#fff; }
.btn-outline-light:hover { color:var(--green); }
.btn-outline-light:hover:before { background-color:var(--green); }
.btn-outline-light:hover:after { border-color:var(--green); }

.btn-outline-primary { border-color:var(--red); color:var(--red); }
.btn-outline-primary:hover { border-color:var(--red); color:var(--red); background:none; }
.btn-outline-primary:before { background-color:var(--red); }
.btn-outline-primary:after { border-color:var(--red); }

.more { margin-top:2em; font-size:0.8rem; text-transform:uppercase; font-weight:500; display:inline-block; position:relative; padding:15px 15px 15px 30px; transition:all 0.5s ease 0s; }
.more:before { content:''; width:20px; height:2px; background:var(--red); position:absolute; left:0; top:50%; transform:translateY(-50%); transition:all 0.5s ease 0s; z-index: 1; opacity:1; }
.more:after { content:''; width:20px; height:2px; background:#fff; position:absolute; right:0; top:50%; transform:translate(100%, -50%); transition:all 0.5s ease 0s; z-index: 1; opacity:0; }
.more:hover { background:var(--red); padding:15px 30px 15px 15px; color:#fff; }
.more:hover:before { left:-20px; opacity:0; }
.more:hover:after { transform:translate(50%, -50%); opacity:1; }

.swiper-navigation { display:flex; flex-direction:row; align-items:stretch; justify-content:flex-start; z-index:2; }
.swiper-navigation button { padding:0; background:none; border:none; display:flex; align-items:center; justify-content:center; width:100px; height:90px; padding:10px; }
.swiper-navigation .prev { background-color:var(--darkred); min-width:35px; }
.swiper-navigation .next { background-color:var(--red); min-width:35px; }

.form-check-input:checked { background-color:var(--red); border-color:var(--red); }

.bigrect { position:relative; }
.bigrect:after { content:''; position:absolute; top:-50px; width:110px; height:240px; background:var(--red);  }
.bigrect.right:after { right:0; transform:translateX(50%); }
.bigrect.left:after { left:0; transform:translateX(-50%); }

.square { position:relative; }
.square:after { content:''; position:absolute;  bottom:0; width:100px; height:100px; background:var(--red);  }
.square.left:after { left:0; transform:translate(-50%, 50%); }
.square.right:after { right:0; transform:translate(50%, 50%); }

.schedules { font-size:0.9rem; }
.schedules p { margin:0; }

.text p a { color:var(--dark);}

#banner .inner { padding:var(--spacing); position:relative; z-index:1; }
#banner .text { background:var(--white); color:var(--dark); position:relative; overflow:hidden; }
#banner .text .filigrane { opacity:0.05; position:absolute; left:0; bottom:0; width:100%; opacity:0.1; z-index:1; }
/* #banner .image { padding-bottom:50px; } */
#banner .image img { height:100%; object-fit: cover; padding-bottom: 100px; }

#breadcrumb {padding-bottom: 10px; color: var(--red);}
#breadcrumb ul { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
#breadcrumb li:after { content:'-'; margin:0 10px; }
#breadcrumb li:last-child:after { content:none; }
#breadcrumb a { opacity:0.5; transition:all 0.5s ease 0s; color: #000; }
#breadcrumb a:hover { opacity:1; color:var(--neutral-grey); }

#agences { background:var(--white) url(../themes/demeterre/assets/img/filigrane-map.svg) no-repeat center center / auto 140% ; }

#marques .swiper-navigation { position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%); justify-content:space-between; }
#marques h3 { color:#fff; }
#marques .others { background:var(--neutral-grey); }
#marques .others h2 { color:#fff; }
#marques .others .image { position:relative; }
#marques .others .logo { position:absolute; right:0; bottom:-30px; width:100px; height:60px; padding:15px; background:#fff; display:flex; align-items:center; justify-content:center; }
#marques .others .text { padding:10px 0; margin-top:30px; color:#fff; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
#marques .others .text .more { margin-top:auto;bottom:0; }
#marques .others .swiper-wrapper { align-items:stretch; }
#marques .others .swiper-slide { height:auto; }

#equipe .list h3 { font-size:1.25rem; color:var(--red); font-weight:bold; }
#equipe .list { font-size:0.8rem; }
#equipe .list .function { color:var(--dark); font-style:italic; }
#equipe .list .phone,
#equipe .list .email { margin:0; padding:5px 0; border-top:1px solid var(--grey); }
#equipe .list .phone a,
#equipe .list .email a { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
#equipe .list .phone img,
#equipe .list .email img { width:20px; height:20px; object-fit:contain; margin-right:15px; }

/* Accueil */
/* #accueil #bigslider  { height: 100vh; } */
#accueil #bigslider .row { align-items:stretch; }
#accueil #bigslider .left { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
#accueil #bigslider .left .text { padding:var(--spacing); background: var(--white); color:var(--dark); position: relative;}
#accueil #bigslider .left .thumbnails { height:100%; }
#accueil #bigslider .left .swiper { height:100%; }
#accueil #bigslider .left .swiper img { height:100%; object-fit:cover; cursor:pointer; }
#accueil #bigslider .right .swiper { height:100%; }
#accueil #bigslider .right .swiper img { height:100%; object-fit:cover; }
#accueil .text .filigrane { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0.1; z-index: 1;}

#accueil #intro .filigrane { position:absolute; right:-10vw; bottom:-10vh; max-width:30vw; z-index:-1; opacity:0.05; }
#accueil #intro .row { --bs-gutter-x: 3rem; }
#accueil #intro .position-relative:before { content:''; position:absolute; left:200px; top:0; right:0; bottom:150px; z-index:-1; background:#D7D7D7; }
#accueil #intro h2 { text-align:right; color:#000; margin-bottom:30px; margin-left:200px; padding-top:30px; padding-right:30px; }
#accueil #intro ul { margin-top:50px; }
#accueil #intro li { display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; margin-bottom:40px; }
#accueil #intro li img { width:100px; min-width: 100px; height:65px; object-fit:contain; margin-right:30px; }
#accueil #intro li .number { font-size:4rem; color:var(--red); font-weight:bold; font-family:'AlteHaas-Grotesk'; line-height:0.8em; }

#accueil #metiers { color:#fff; }
#accueil #metiers h2 { padding:var(--spacing); padding-bottom:200px; background:var(--dark); text-align:center; margin:0 var(--spacing-big); }
#accueil #metiers .row { margin-top:-150px; }
#accueil #metiers .title-wrapper { display:flex; flex-direction:row; align-items:flex-end; justify-content: flex-start; margin-top:-90px; }
#accueil #metiers .picto-chevron { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; border-right:2px solid #fff; }
#accueil #metiers .picto,
#accueil #metiers .chevron { width:90px; height:90px; display:flex; align-items:center; justify-content:center; position:relative; }
#accueil #metiers .chevron:before { content:''; position:absolute; left:0; top:-1px; width:100%; height:0; transition:all 0.5s ease 0s; z-index: 1; }
#accueil #metiers .chevron img { position:relative; left:0; z-index: 2; transition:all 0.3s ease 0.2s; }
#accueil #metiers .title { font-size:1.5rem; text-transform:uppercase; font-weight:500; margin-bottom:0; padding:0 15px; position:relative; left:0; transition:all 0.3s ease 0.3s; color:#fff; }
#accueil #metiers .link:hover { color:#fff; }
#accueil #metiers .link:hover .chevron:before { height:100%; }
#accueil #metiers .link:hover .chevron img { left:10px; }
#accueil #metiers .link:hover .title { left:10px; }
#accueil #metiers .metier-materiel-neuf .picto,
#accueil #metiers .metier-materiel-neuf .chevron:before { background:var(--red); }
#accueil #metiers .metier-materiel-occasion .picto,
#accueil #metiers .metier-materiel-occasion .chevron:before { background:var(--red); }
#accueil #metiers .metier-espaces-verts .picto,
#accueil #metiers .metier-espaces-verts .chevron:before { background:var(--red); }
#accueil #metiers .metier-services .picto,
#accueil #metiers .metier-services .chevron:before { background: var(--red); }

#accueil #noustrouver .title { padding-top:var(--spacing-big); padding-right:var(--spacing); }
#accueil #noustrouver .filigrane { position:absolute; left:0; bottom:var(--spacing); max-width:40vw; margin-left:-50px; opacity:0.5; }
#accueil #noustrouver .title:before { content:''; position:absolute; right:0; top:0; width:50vw; height:100%; background:var(--dark); z-index:-1; }
#accueil #noustrouver .title h2 { color:#fff; margin-bottom:0.5em; }
#accueil #noustrouver .swiper { margin-top:calc(var(--spacing-big) * 1.5); margin-left:-100px; width:calc(100% + 100px); padding:60px 0; }
#accueil #noustrouver .swiper:before { content:''; position:absolute; left:0; top:30px; bottom:30px; width:1px; box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5); }
#accueil #noustrouver .swiper h3 { font-size:1.25rem; color:var(--red); font-weight:bold; }
#accueil #noustrouver .swiper .text { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; }
#accueil #noustrouver .swiper-navigation { transform:translateY(50%); }

#accueil #partenaires .swiper-slide { display:flex; height:auto; align-items:center; justify-content:center; padding:15px; background:#fff; }
#accueil #partenaires button { padding:0; border:none; background:none; }

/* Matériel neuf */
#materiel-neuf #intro .image { position:relative; }
#materiel-neuf #intro .btn { margin:30px 0; }
#materiel-neuf #marques .filigrane { position:absolute; right:-150px; bottom:50px; opacity:0.1; pointer-events:none; }
#materiel-neuf #marques h2 { margin-bottom:calc(1em + 50px); }
#materiel-neuf #marques .featured { background:var(--dark); }
#materiel-neuf #marques .featured .swiper { position:relative; top:-50px; }
#materiel-neuf #marques .featured .image { position:relative; }
#materiel-neuf #marques .featured .logo { position:absolute; right:15px; bottom:-30px; width:150px; height:150px; padding:15px; background:#fff; display:flex; align-items:center; justify-content:center; }
#materiel-neuf #marques .featured .logo img { object-fit:contain; }
#materiel-neuf #marques .featured .text { color:#fff; padding:30px; margin-top:30px; }

/* Matériel d'occasion */
#materiel-occasion #intro .image { position:relative; }
#materiel-occasion #equipe .bigimage .text { background:var(--red); color:#fff; display:inline-block; padding:var(--spacing); transform:translateY(-50%); font-size:1.875rem; font-family:'Rubik'; font-weight:normal; line-height:1.2em; margin:0; }
#materiel-occasion #occasions .bg { background:var(--dark);  }
#materiel-occasion #occasions h2 { color:#fff; }
#materiel-occasion #occasions .swiper { padding-top:80px; }
#materiel-occasion #occasions .swiper-slide { height:auto; }
#materiel-occasion #occasions .record { background:#fff; position:relative; height:100%; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
#materiel-occasion #occasions .record:before { content:''; position:absolute; left:0; top:0; width:50%; height:100px; background:var(--red); }
#materiel-occasion #occasions .image { padding-left:30px; padding-right:30px; position:relative; top:-80px; }
#materiel-occasion #occasions .text { padding-left:30px; padding-right:30px; margin-top:-50px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; height:100%; }
#materiel-occasion #occasions .description { margin-bottom:1em; }
#materiel-occasion #occasions .metas { display:flex; flex-direction:row; align-items:center; justify-content: space-between; background:#EEF3EF; padding:10px 20px; margin:15px 0; width:100%; }
#materiel-occasion #occasions .year { color:#9DABA0; }
#materiel-occasion #occasions .more { margin-top:auto; }

/* Espaces verts */
#espaces-verts #intro { padding-bottom:calc(var(--spacing) + 50px); }
#espaces-verts #intro .filigrane { position:absolute; left:-50px; bottom:-50px; }
#espaces-verts #intro .magasin h3 { font-size:1.125rem; color:var(--red); }
#espaces-verts #marques h2 { margin-bottom:calc(1em + 50px); }
#espaces-verts #marques .featured { background:var(--dark); color:#fff; }
#espaces-verts #marques .featured .filigrane { position:absolute; right:50px; bottom:0; opacity:0.1; }
#espaces-verts #marques .featured .row { position:relative; top:-50px; }
#espaces-verts #marques .featured .image img { box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.3); }
#espaces-verts #marques .featured .logo { width:170px; height:170px; display:flex; align-items:center; justify-content:center; padding:15px; background:#fff; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.3); }
#espaces-verts #marques .featured h3 { margin:2em 0 1em 0; font-weight:bold; }
#espaces-verts #marques .bg img { min-height:300px; object-fit: cover; }
#espaces-verts #equipe .left { padding:var(--spacing); text-align:right; background:var(--red); color:#fff; }
#espaces-verts #equipe .left h2 { margin:0; }
#espaces-verts #equipe .right { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; }
#espaces-verts #equipe .intro { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding:30px; }
#espaces-verts #equipe .intro img { margin-right:30px; }
#espaces-verts #equipe .list { margin-left:-20px; margin-top:30px;}

/* Magasins libre service */
#magasins-libre-service #marques { background:var(--dark); color:#fff; }
#magasins-libre-service #marques .image { width:100%; height:200px; padding:30px; background:#fff; display:flex; align-items:center; justify-content:center; }
#magasins-libre-service #marques .image img { width:100%; height:100%; object-fit:contain; }
#magasins-libre-service #marques .logo { box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); }
#magasins-libre-service #marques .catalog p { font-size:1.4rem; margin:1em 0; }

/* Ateliers de mécanique */
#ateliers-de-mecanique #marques { background:var(--darkgreen); color:#fff; }
#ateliers-de-mecanique #marques .image { width:100%; height:200px; padding:30px; background:#fff; display:flex; align-items:center; justify-content:center; }
#ateliers-de-mecanique #marques .image img { width:100%; height:100%; object-fit:contain; }
#ateliers-de-mecanique #marques .logo { box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); }
#ateliers-de-mecanique #marques .catalog p { font-size:1.4rem; margin:1em 0; }

/* Agriculture connectée */
#agriculture-connectee #intro .image { position:relative; }
#agriculture-connectee #equipe { background:var(--grey); }
#agriculture-connectee #equipe { background:var(--grey) url(../themes/demeterre/assets/img/filigrane-map.svg) no-repeat center center / auto 140% ; }
#agriculture-connectee #equipe .image { box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); margin-bottom:30px; }
#agriculture-connectee #equipe .list .phone, 
#agriculture-connectee #equipe .list .email { padding:5px 0; }
#agriculture-connectee #equipe .list .phone img, 
#agriculture-connectee #equipe .list .email img { width:20px; height:20px; }
#agriculture-connectee #equipe .text { font-size:0.9rem; }
#agriculture-connectee .ditec {margin-bottom: 7vh;}

/* Equipe commerciale */
#equipe-commerciale .filigrane { position:absolute; left:0; bottom:-30px; opacity:0.05; pointer-events:none; max-width:30vw; z-index:-1; }
#equipe-commerciale #equipe .list { margin-top:30px; position:relative; }
#equipe-commerciale #equipe .commercial { box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); padding:15px; background:#fff; position:absolute; left:0; top:0; width:100%; opacity:0; pointer-events:none; transition:all 0.5s ease 0s; }
#equipe-commerciale #equipe .commercial .carre { position:absolute; left:0; top:0; width:60px; height:60px; background:var(--green); z-index:1; }
#equipe-commerciale #equipe .commercial .image { position:relative; z-index:2; }
#equipe-commerciale #equipe .commercial.show { opacity:1; pointer-events:auto; }
#equipe-commerciale #carte-commerciaux .secteur { cursor:pointer; }
#equipe-commerciale #carte-commerciaux .secteur .region { transition:all 0.5s ease 0s; }
#equipe-commerciale #carte-commerciaux .secteur.muted .region { opacity:0.3; }

/* Contact & Agences */
#contact-et-agences #map-wrapper .mainrow { height:calc(100vh - 90px); }
#contact-et-agences #sidebar  { background:var(--white); color:#fff; position:relative; }
#contact-et-agences #sidebar .top { padding:var(--spacing); color: var(--dark); position: relative;}
#contact-et-agences #sidebar .top .filigrane { position:absolute; left:0; bottom:-30px; opacity:0.05; pointer-events:none; max-width:30vw; }
#contact-et-agences #sidebar .top h1 { margin:15px 0 0 0; }
#contact-et-agences #sidebar .bottom { background:var(--dark); padding:calc(var(--spacing) / 2); height:100%; }
#contact-et-agences #sidebar .bottom h2 { font-size:1.5rem; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding-bottom:1em; margin-bottom:1em; border-bottom:1px solid rgba(255,255,255,0.3); }
#contact-et-agences #sidebar .bottom h2 img { margin-right:15px; }
#contact-et-agences #sidebar .bottom .form-check { margin-bottom:1em; }
#contact-et-agences #map .leaflet-popup-content-wrapper { background:#fff; border-radius:0; position:relative; font-size:1rem; margin-top:30px; max-height:30vh; overflow-y:auto; }
#contact-et-agences #map .leaflet-popup-content { min-width:500px; }
#contact-et-agences #map .leaflet-popup-content:before { content:''; position:absolute; left:0; top:0; width:65px; height:65px; background:var(--red); z-index:0; }
#contact-et-agences #map .leaflet-popup-content .top { position:relative; z-index:1;  }
#contact-et-agences #map .leaflet-popup-content .top img { width:100%; height:100%; object-fit:cover; }
#contact-et-agences #map .leaflet-popup-content .top { font-size:0.9rem; }
#contact-et-agences #map .leaflet-popup-content .top .title { margin-bottom:0; }
#contact-et-agences #map .leaflet-popup-content .top .phone a { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; color:var(--dark); font-weight:700; }
#contact-et-agences #map .leaflet-popup-content .top .phone img { width:20px; height:20px; margin-right:5px; object-fit:contain; object-position:center left; }
#contact-et-agences #map .leaflet-popup-content .top .email a { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; color:var(--dark); font-weight:700; }
#contact-et-agences #map .leaflet-popup-content .top .email img { width:20px; height:20px;  margin-right:5px; object-fit:contain; object-position:center left; }
#contact-et-agences #map .leaflet-popup-content .bottom { padding-top:10px; margin-top:10px; border-top:1px solid #E4E0E0; }
#contact-et-agences #map .leaflet-popup-content .salarie { margin-bottom:10px; }
#contact-et-agences #map .leaflet-popup-content .salarie img { width:100%; }
#contact-et-agences #map .leaflet-popup-content .salarie .name { color:var(--red); font-weight:bold; }
#contact-et-agences #map .leaflet-popup-content .salarie .function { font-style:italic; }
#contact-et-agences #map .leaflet-popup-close-button { font-size:24px; line-height:24px; width:24px; height:24px; color:var(--darkgreen); z-index:10; top:30px; right:20px; }
#contact-et-agences #map .leaflet-popup-close-button:hover { color:var(--red); }
#contact-et-agences #map .leaflet-popup-tip-container { margin-top:-1px; }
#contact-et-agences .marques {display: flex; justify-content: center; align-items: center;}

#contact-et-agences top .filigrane { position:absolute; left:0; bottom:-30px; opacity:0.05; pointer-events:none; max-width:30vw; z-index:-1; }

/* Recrutement */
#recrutement .post { margin-bottom:var(--spacing); padding-bottom:var(--spacing); border-bottom:1px solid #E4E0E0; }
#recrutement .post:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
#recrutement .post .magasin { background:var(--green); padding:10px 15px; color:#fff; margin:0 0 30px 0; display:inline-flex; flex-direction:row; align-items:center; justify-content: flex-start; }
#recrutement .post .magasin img { width:30px; height:40px; object-fit: contain; margin-right:15px; }
#recrutement .post h3 { text-transform:uppercase; font-size:1.7rem; margin:1em 0; }
#recrutement .post ul li { position:relative; padding-left:30px; margin-bottom:0.5em;}
#recrutement .post ul li:before { content:''; width:10px; height:10px; background:var(--green); position:absolute; left:0; top:0.45em; }

/* Actualites */
#actualites .eapps-facebook-feed-inner { background:none; border:none;  }
#actualites .eapps-facebook-feed-posts-inner { border:none; }
#actualites .eapps-facebook-feed-posts-item-inner { box-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.1); }

/* Landing page */

/* #heading_landing {height: 100vh;} */
#heading_landing {height: calc(100vh - 90px);}
#heading_landing .img_bg{ background-image: url(../themes/demeterre/assets/img/landing_header.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1; position: absolute; bottom: 0; left: 0; height: 100%; width: 100%;}
#heading_landing .img_foreground {background-image: url(../themes/demeterre/assets/img/header_landing.png); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 2; height: 100%; width: 100%; position: relative;}
#heading_landing .title_landing {position: absolute; top: 20vh; left: 0; right: 0; margin: auto;}
#heading_landing .timer {display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: clamp(2.5rem, -0.0962rem + 11.5385vw, 13.75rem); text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.10);font-weight: 700; color: #fff; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 1;}
#heading_landing .title_event {font-size: clamp(1.5625rem, 1.3462rem + 0.9615vw, 2.5rem); color: #fff; position: absolute; left: 0; right: 0; top: 65%; z-index: 4;}

.video_landing {z-index: 5; position: relative; transform: translateY(-100px);}


.intro_landing .text2{ display: flex; align-items: center; justify-content: center;}

.intro_landing .dessins {position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: -1;}

#landing header .logo {height: 90px; align-items: center; justify-content: center; display: flex;}


#heading_landing .timer div {
    display: inline-block; /* Empêche les sauts */
    width: 2ch; /* Une largeur fixe pour les chiffres */
    text-align: center; /* Centrer les chiffres */
    margin-right: 4rem;
    position: relative;
}

#heading_landing .timer div::before {content: ""; position: absolute; top: 0; right: -2.9rem; bottom: 0; margin: auto; width:  clamp(1rem, 0.7692rem + 1.0256vw, 2rem); height: clamp(1rem, 0.7692rem + 1.0256vw, 2rem); background-color: #fff; border-radius: 100%;}
#heading_landing .timer div:last-child:before {content: initial;}
/* Societe */
#bigslider.societe .row { align-items:stretch; }
#bigslider.societe .left { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
#bigslider.societe .left .text { padding:var(--spacing); background:#fff; color:var(--dark); }
#bigslider.societe .left .thumbnails { height:100%; }
#bigslider.societe .left .swiper { height:100%; }
#bigslider.societe .left .swiper img { height:100%; object-fit:cover; cursor:pointer; }
#bigslider.societe .right .swiper { height:100%; }
#bigslider.societe .right .swiper img { height:100%; max-height:850px; object-fit:cover; }

#marques.societe .filigrane { position:absolute; right:-150px; bottom:50px; opacity:0.1; pointer-events:none; }
#marques.societe h2 { margin-bottom:calc(1em + 50px); }
#marques.societe .featured { background:var(--dark); }
#marques.societe .featured .swiper { position:relative; top:-50px; }
#marques.societe .featured .image { position:relative; }
#marques.societe .featured .logo { position:absolute; right:15px; bottom:-30px; width:150px; height:150px; padding:15px; background:#fff; display:flex; align-items:center; justify-content:center; }
#marques.societe .featured .logo img { object-fit:contain; }
#marques.societe .featured .text { color:#fff; padding:30px; margin-top:30px; }

.societe_contact .title {background-color: var(--red); color: #fff; height: 350px;}
.societe_contact .title h2 {padding: 3vh;}
.societe_contact .info {display: flex; flex-direction: column; gap: 2vh;}
.societe_contact .compagny {display: flex; flex-direction: column; gap: 0;}
.societe_contact .tel {display: flex; flex-direction: column; gap: 1vh;}
.societe_contact h3.titre {color: var(--red); margin-bottom: 0;}
.societe_contact .untel {display: flex; flex-direction: row; align-items: center; gap: 10px;}
.societe_contact .text {display: flex; flex-direction: row; align-items: flex-start; gap: 15px;}

.video {padding: 5vh 0;}
/**
 * XXL
 **/
@media (min-width: 1400px) {
    .popup-fancybox { max-width:60vw; }
}

/**
 * XL
 **/
@media (max-width: 1399px) {
    html { font-size:14px; }
    h1, .h1 { font-size:2.2rem; }
    h2, .h2 { font-size:2rem; }

    .btn { padding:10px 30px; }

    .container-fluid { padding-left:80px; padding-right:80px; }

    .swiper-navigation button { width:80px; height:70px; }

    #header .translate { padding-left:0.5em; margin-left:0.5em; }
    #header .navigation .top .menu li { margin-left:1em; }
    #header .navigation .top .menu a svg { margin-right:0.5em; display:none; }
    #header .navigation .bottom .level-1 { margin-left:1em; }

    #accueil #noustrouver .swiper { padding-top:0; }

    .video iframe {height: 550px;}
    
}

/**
 * LG
 **/
@media (max-width: 1199px) {
    .container-fluid { padding-left:60px; padding-right:60px; }

    .bigrect:after { width:80px; height:150px; top:-30px; }
    .square:after { width:70px; height:70px; }

    .swiper-navigation button { width:50px; height:50px; }

    #header .navigation .top .menu li { margin-left:0.5em; }

    #accueil #metiers .title-wrapper { margin-top:-60px; }
    #accueil #metiers .picto, #accueil #metiers .chevron { width:60px; height:60px; padding:10px; }

    #banner .image { padding-bottom:30px; }

    #marques h2 img { width:70px; }

    #espaces-verts #marques .featured .logo { width:130px; height:130px; }
}

/**
 * MD
 **/
@media (max-width: 991px) {
    html { font-size:12px; }

    .container-fluid { padding-left:30px; padding-right:30px; }
    .hamburger { display:block; position:relative; z-index:451; }

    .swiper-navigation button { width:40px; height:40px; }

    .bigrect:after { width:50px; height:100px; top:-15px; }

    #header .right { display:flex; flex-direction:column; align-items:flex-end; }
    #header .translate { border:none; }
    #header .navigation { position:fixed; right:0; top:0; transform:translateX(100%); width:300px; height:100vh; background:var(--green); color:#fff; z-index: 450; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:all 0.5s ease 0s; border-left:5px solid var(--darkgreen); }
    #header .navigation .top,
    #header .navigation .bottom,
    #header .navigation .menu { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; font-size:1.4rem; }
    #header .navigation .top { order:2; border:none; }
    #header .navigation .bottom { order:1; }
    #header .navigation .menu li { margin-bottom:1em; }
    #header .navigation .bottom .level-1 { margin-left:0; }
    #header .navigation .bottom .level-1 > a { color:#fff; padding:0; }
    #header .navigation .bottom .level-1 > a:before { left:calc(100% + 10px); top:auto; bottom:6px; width:0; height:2px; background:#fff; }
    #header .navigation .bottom .level-1 > a:hover:before { width:20px; height:2px; }
    #header .navigation .bottom .level-1.active > a { color:var(--darkgreen); }
    #header .navigation .top .menu li { margin-left:0; }
    #header .navigation .top .menu a { color:#fff; padding:0; }
    #header .navigation .top .menu a:hover { color:var(--darkgreen); }

    #header .navigation .dropdown > a { position:relative; }
    #header .navigation .dropdown > a:before { content:none !important; }
    #header .navigation .dropdown > a:after { content:''; position:absolute; right:-20px; top:2px; height:15px; width:10px; background:url(../themes/demeterre/assets/img/chevron-right.svg) no-repeat center center / contain; transform:rotate(90deg); transition: all 0.3s ease 0s; }
    #header .navigation .dropdown > a:hover:after { transform:rotate(0deg); }
    #header .navigation .submenu { position:absolute; left:auto; right:0; top:0; width:300px; transform:translateX(100%); min-height:100vh; height: 100%; overflow: scroll; z-index:450; background:var(--darkgreen); display:flex; flex-direction:column; justify-content:start; opacity: 0; pointer-events: none;}
    #header .navigation .active_resp .submenu {  opacity: 1; pointer-events: initial;}
    #header .navigation .submenu .prev { position:absolute; left:15px; top:50%; transform:translate(-50%, -50%) rotate(180deg) scale(1.5); display:block; opacity:0; transition:all 0.3s ease 0.3s; }
    #header .navigation .submenu .prev:before { content:none; }
    #header .navigation .submenu .h2 { display:none; }
    #header .navigation .submenu .row { flex-direction:column; }
    #header .navigation .submenu .text { font-size:0.8em; padding:8px; background:var(--green); }
    #header .navigation .top .menu a:hover, #header .navigation .top .menu li.active a { color:var(--darkgreen); }

    #header .translate { padding-left:0; margin-left:0; width:100%; align-items:flex-start; }
    #header .translate .trigger { color:#fff; }
    #header .translate .trigger svg { fill:#fff; stroke:#fff; }
    #header .translate .dropdown { width:100%; }
    #header .translate .dropdown a { padding:0.5em; background:var(--darkgreen); }

    body.open #header { transition:all 0s linear 0s !important; transform:none !important; }
    body.open #header .navigation { transform:translateX(0); }
    body.open.with-submenu #header .navigation { transform:translateX(calc(0px - 300px)); }
    body.open.with-submenu #header .navigation .dropdown > a:after { transform:rotate(0deg); }
    body.open.with-submenu #header .navigation .submenu .prev { opacity:1; }

    #accueil #intro ul { margin-top:30px; }
    #accueil #intro li { margin-bottom:15px; }
    #accueil #intro li .number { font-size:2.5rem; }
    #accueil #intro li img { height:45px; width:50px; min-width: initial; }
}

/**
 * SM
 **/
@media (max-width: 767px) {

    #banner .image { display:none; }

    #accueil #bigslider .left { order:2; }
    #accueil #bigslider .left .thumbnails { display:none; }
    #accueil #bigslider .right { order:1; }
    #accueil #bigslider .right .swiper img { max-height:400px; }
    #accueil #intro .text { display:flex; flex-direction:column; align-items:center; justify-content:center; }
    #accueil #intro .text .text { display:flex;align-items: flex-start; }
    #accueil #intro .position-relative:before { left:0; }
    #accueil #intro h2 { margin-left:0; text-align:center; margin-bottom:0; }
    #accueil #intro h2 br { display:none; }
    #accueil #intro ul { display:flex; flex-direction:row; align-items:flex-start; justify-content:space-evenly; width:100%; }
    #accueil #metiers .item { margin-bottom:2rem; }
    #accueil #noustrouver .title { padding:var(--spacing); text-align:center; }
    #accueil #noustrouver .title:before { width:100%; }
    #accueil #noustrouver .swiper-navigation { justify-content:center; }
    #accueil #noustrouver .swiper { margin-left:0; width:100%; margin-top:var(--spacing); }
    #accueil #noustrouver .swiper:before { content:none; }
    #accueil #noustrouver .slider { padding-left:10px; padding-right:10px; }

    #banner .image { padding-bottom:15px; }

    #materiel-occasion #occasions .record:before { height:50px; }

    #espaces-verts #marques .featured .logo { width:80px; height:80px; padding:10px; }
    #espaces-verts #equipe .left { text-align:center; }
    #espaces-verts #equipe .list { margin:0; }

    .societe_contact .title {height: 130px;}
    .societe_contact .text {justify-content: center; align-items: center; padding-top: 3vh; flex-direction: column;}
    .societe_contact .info {justify-content: center; align-items: center;}

    .video iframe {height: 250px;}

    .intro_landing .text2 {flex-direction: column;}
}


/**
 * XS
 **/
@media (max-width: 575px) {
    .bigrect:after { content:none !important; }
    .square:after { content:none !important; }

    #header .logos { padding-left:15px; padding-right:15px; }
    #footer .links ul { flex-direction:column; }

    

    #marques h2 img { width:50px; }

    #intro .image { margin:1em 0; }

    #accueil #intro .text,
    #accueil #intro .text .text { align-items:center; }
    #accueil #intro li { flex-direction:column; align-items:center; width:33.33%; text-align:center; }
    #accueil #intro li img { margin-right:0; margin-bottom:15px; }
    #accueil #metiers h2 { margin:0 var(--spacing); }

    #materiel-neuf #intro .image { display:none; }

    #materiel-occasion #intro .image1 { display:none; }

    #espaces-verts #marques .featured .logo { margin:15px auto 0 auto; }
    #espaces-verts #marques .featured .text { text-align:center; }

    #agriculture-connectee #intro .image1 { display:none; }

    #equipe-commerciale #secteurs .map { margin-top:200px; }

    #contact-et-agences #sidebar .top { padding:calc(var(--spacing) / 2); }
    #contact-et-agences #sidebar .bottom { height:auto; }
    #contact-et-agences #sidebar .bottom h2 { display:none; }
    #contact-et-agences #sidebar form { display:flex; flex-direction:row; flex-wrap:wrap; }
    #contact-et-agences #sidebar .bottom .form-check { margin:0 10px 5px 0; }
    #contact-et-agences #map { height:100%; }
    #contact-et-agences #map .leaflet-popup-content { min-width:300px; }

    #heading_landing .timer div {margin-right: 2rem;}
    #heading_landing .timer div::before {right: -1.5rem;}

    .fancybox__content { padding:15px; }
    .fancybox__content img { margin-bottom:15px; }

    #bigslider.societe .left .text { padding:30px; }
    #bigslider.societe .left .thumbnails { display:none; }
    #intro .text { order:2; }
    #intro .image { order:1; }
    #intro .text2 { order:3; }
    #intro .image2 { order:4; }
    #intro .magasin  {order: 5;}
    .societe_contact .title { height:auto; }
    .societe_contact .title h2 { text-align:center; margin-bottom:0; }
}