/* ====== RESET ====== */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-400.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2")}
:root {
  --poppins-font: "Roboto",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --main-color: #ff7001;
  --hero-min-vh: 60vh;
  --hero-pt: 100px;
  --hero-pb: 50px;
  --ss-hero-pt: 65px;
  --ss-hero-pb: 35px;
  --ss-hero-mt: 70px;
}
body.has-topbar{
  --hero-min-vh: 80vh;
  --hero-pt: 180px;
  --hero-pb: 50px;
  --ss-hero-pt: 90px;
  --ss-hero-mt: 70px;
}
@media (max-width:1024px){
  :root {--ss-hero-mt: 50px;}
  body.has-topbar{--ss-hero-mt: 50px;}
}
*,*::before,*::after {box-sizing: border-box;margin:0;padding:0}
* { scrollbar-width: thin; scrollbar-color: #666 #222}
::selection {color: white;background: var(--main-color)}
html,body {min-width: 320px;scroll-behavior: smooth;scroll-padding-top: 70px;-webkit-tap-highlight-color: transparent;font-family: var(--poppins-font);background: #fff;color:#1c1c1c}
body.no-scroll {overflow: hidden}
a,a:visited, a:hover, a:active {text-decoration: none;color: inherit;outline: none;transition: all 200ms ease-in-out}
button {outline: none;border:none;transition: all 200ms ease-in-out;cursor:pointer;font-family: var(--poppins-font);font-size:1rem}
ul li{list-style-type: none;font-size:1rem;color: #1c1c1c;}
ul.check li {list-style-image: url('../img/check.svg');margin-left:24px;margin-bottom:8px;padding-left: 2px}
ul.disc li {list-style-type: disc;padding: 10px 0 10px 2px;margin-left:14px;border-bottom: 1px solid rgba(0, 0, 0, .1)}
ul.disc li:last-child {border: none}
ul.disc li::marker {color: var(--main-color)}
picture {display:block}
img {max-width:100%;object-fit: cover}
h1,h2,h3,h4,h5,h6 {line-height: 1.2}
h2 {font-size: 2.2rem;letter-spacing: -0.02em;}
h3 {font-size: 1.8rem;}
h4 {font-size: 1.5rem;}
h5 {font-size: 1.5rem;}
h6 {font-size: 1.5rem;}
p {font-size:1rem;line-height: 1.5;color: #1c1c1c;}
p.color {color: var(--main-color);}
p.small {font-size:.9rem;line-height: 1.5;color: #1c1c1c;}
p.big {font-size:1.1rem;line-height: 1.5;color: #1c1c1c;}
p.border {margin-top: 15px;border-left : 3px solid var(--main-color);padding: 5px 0 5px 20px}
.center {text-align: center;}
p {line-height: 180%;}
.sr-only{position:absolute;width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:1024px){
  p.big {font-size:1rem}
}

/* ------ section-gray ------ */
.section-gray {position: relative;overflow: hidden}
.section-gray::before {content: "";position: absolute;inset: 0;background: url("../img/pattern-circuit-orange.svg") repeat center / 200px;opacity: .3;pointer-events: none;background-attachment: fixed}
.section-gray::after{content: "";position: absolute;inset: 0;pointer-events: none;border-top: 1px solid rgba(255,112,11,.25);border-bottom: 1px solid rgba(255,112,11,.25);background: linear-gradient(120deg,rgba(255,112,1,0.15) 0%,rgba(255,112,1,0) 20%,rgba(255,112,1,0) 80%,rgba(255,112,1,0.15) 100%)}.section-gray > * { position: relative; z-index: 1}

/* ------ Grid ------ */
.grid {display: grid;gap: 20px;width: 100%}
.grid.grid-2 {grid-template-columns: 1fr 1fr}
.grid.grid-3 {grid-template-columns: 1fr 1fr 1fr}
.grid.grid-4 {grid-template-columns: 1fr 1fr 1fr 1fr}
.grid.grid-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr}
.grid.grid-6 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr}
.grid.grid-2-1 {grid-template-columns: 2fr 1fr}
.grid.grid-3-1 {grid-template-columns: 3fr 1fr}
.grid.grid-4-1 {grid-template-columns: 4fr 1fr}
.grid.grid-5-1 {grid-template-columns: 5fr 1fr}
.grid.grid-1-2 {grid-template-columns: 1fr 2fr}
.grid.grid-1-3 {grid-template-columns: 1fr 3fr}
.grid.grid-1-4 {grid-template-columns: 1fr 4fr}
.grid.grid-1-5 {grid-template-columns: 1fr 5fr}

/* ------ Padding ------ */
.p50 {padding-top:50px;padding-bottom: 50px}
.p80 {padding-top:80px;padding-bottom: 80px}
.p100 {padding-top:100px;padding-bottom: 100px}
.p150 {padding-top:150px;padding-bottom: 150px}
@media (min-width:1921px){
  .p100 {padding-top:150px;padding-bottom: 150px}
}
@media (max-width:1366px){
  .p150 {padding-top:100px;padding-bottom: 100px}
}
@media (max-width:1024px){
  .p100 {padding-top:80px;padding-bottom: 80px}
  .p150 {padding-top:80px;padding-bottom: 80px}
}

/* ------ Container ------ */
.container {max-width: 1230px;margin:0 auto;}
.container-fluid,.contentmenu {width: 100%; margin: 0 auto;padding: 0 2%;max-width: 1480px}
@media (max-width:1366px){
  .container {max-width: 1024px}
}
@media (max-width:1199px){
  .container,.container-fluid {padding: 0 50px}
}
@media (max-width:1024px){
  .contentmenu {padding: 0 2%}
  .container {max-width: 768px;width: 100%;padding: 0 2%;}
}
@media (max-width:768px){
  .container,.container-fluid {padding: 0 25px}
}

/* ------ Overlay ------ */
#overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color:rgba(255,112,1,.1);backdrop-filter: blur(2px);display: none}
#overlay.open-modal {display: block;z-index: 998}
#overlay.open-navbar {display: block;z-index: 996}

/* ------ Boutons ------ */
a.btn,button.btn {display:inline-block;background: var(--main-color);height: auto;color:#fff;font-weight: 700;border-radius:  5px;border:2px solid var(--main-color);padding: 12px 30px;transition: color 200ms ease-in-out, background 200ms ease-in-out}
a.btn:hover,button.btn:hover {background:#fff;color:var(--main-color)}
a.btn-invers {display:inline-block;background: #fff;height: auto;color:var(--main-color);font-weight: 700;border-radius:  5px;border:2px solid var(--main-color);padding: 12px 30px;transition: color 200ms ease-in-out, background 200ms ease-in-out}
a.btn-invers:hover {background:var(--main-color);color:#fff}
a.btn-white {display:inline-block;height: auto;color:#fff;border-radius:  5px;border:2px solid #fff;padding: 12px 30px;transition: color 200ms ease-in-out, background 200ms ease-in-out}
a.btn-white:hover {background: #fff;color:var(--main-color)}
a.link{display: inline-flex;align-items: center;gap: 8px;font-weight: 700;text-decoration: none;color: #111;padding: 10px 12px;border-radius: 10px;border: 1px solid rgba(0,0,0,.10);transition: background .18s ease, border-color .18s ease, transform .18s ease}
a.link::after{content: "→";transform: translateY(-1px)}
a.link:hover{background: rgba(255,112,11,.10);border-color: rgba(255,112,11,.35)}
a.link:focus-visible{outline: 3px solid rgba(255,112,11,.55);outline-offset: 3px}

/* ------ scroll-to-top ------ */
#scroll-to-top {position:fixed;background:#000;padding:18px 15px 12px 15px;right: 10px;pointer-events: none;bottom: -50px;z-index: 70;cursor: pointer;transition: bottom .25s ease, opacity .25s ease;border-radius:5px}
#scroll-to-top.is-visible{bottom: 10px;opacity: 1;pointer-events: auto}
#scroll-to-top .arrow {border: solid white;border-width: 0 3px 3px 0;display: block;padding: 4px;transform: rotate(-135deg)}
#scroll-to-top:hover .arrow {border-color: var(--main-color);transition: border-color 0.3s ease-out}
@media (max-width:768px){
  #scroll-to-top {display: none;}
}

/* ------ title ------ */
.title {margin-bottom: 50px;}
.title.center {text-align: center;}
.title h2 {color:#1c1c1c}
.title h3 {color:var(--main-color);text-transform: uppercase;font-size: 1rem;margin-top: 10px;}
.title hr {width: 60px;height: 3px;border: none;margin: 20px 0;background: var(--main-color);}
.title.center hr {width: 60px;height: 3px;border: none;margin: 20px auto;background: var(--main-color);}
@media (max-width:1199px){
  .title h2 {font-size: 1.8rem;}
}
@media (max-width:1024px){
  .title hr {margin: 20px auto;}
}

/* ------ Carte ------ */
.carte {border: 1px solid  rgba(255,112,1,.5);background: #fff;border-radius:10px;transition: transform 0.3s ease, box-shadow 0.3s ease}
.carte:hover {transform: translateY(-8px);box-shadow: 0 8px 20px rgba(255,112,1,.2)}
@media (max-width:1199px){
  .carte:hover {
    transform: none;
    box-shadow: none;
  }
}
@media (max-width:768px){
  .carte.full {border:none;border-radius: 0}
}

/* ------ video ------ */
#video {position: relative; overflow: hidden;border-radius: 14px;}
#video .video-container {position: relative; width: 100%; height: 100%}
.hero-video {width: 100%;height: 100%;object-fit: cover;display: block}

/* ------ Pages Légales ------ */
#pagelegale {background: #fff;padding: 5px 0 80px 0;}
#pagelegale h2 {margin-top: 40px;}
#pagelegale h3 {margin-top: 40px;}
#pagelegale .title a {margin: 0;display: inline-block;}

/* ------ Animations ------ */
@keyframes slideDown {from {transform: translateY(-20px);opacity: 0}to{transform: translateY(0);opacity: 1}}
@keyframes fadeSlideUp {from {opacity: 0;transform: translateY(40px);}to {opacity: 1;transform: translateY(0)}}
@keyframes fadeSlideDown {from {opacity: 0;transform: translateY(-40px);} to {opacity: 1;transform: translateY(0)}}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1}}

/* ------ Modal ------ */
#modal {background: #ccc}
.modal {display: none;position: fixed;z-index: 999;left: 50%;top: 50%;transform: translate(-50%, -60%);width: 80%;max-width: 1024px;transition: opacity 0.4s ease-in-out}
.modal.open {display: flex;opacity: 1}
.modal-content {background-color: #fff;border-radius: 10px;width: 100%;animation: slideDown 0.4s ease;position: relative;box-shadow: 0px 0px 20px rgba(0, 0, 0, .15)}
.modal-header {background: var(--main-color);padding: 15px 15px 12px 15px;border-radius: 10px 10px 0 0}
.modal-header h6 {color:#fff;text-transform: uppercase;font-size:1rem;font-weight: 700}
.modal-header button.close {font-size: 2rem;font-weight: 400;color: #fff;cursor: pointer;position: absolute;top: 7px;right: 25px;z-index: 1}
.modal-body {padding: 20px}
.modal-footer {padding: 0px 20px 20px 20px}
.close {position: absolute;background:rgba(255,255,255,.2);font-size: 24px;cursor: pointer;line-height: 1;padding: 1px 7px;border-radius: 5px;margin: 0 -12px 0;transition: background 200ms ease-in-out}
.close:hover {background:rgba(255,255,255,.4)}
.modal video {max-width: 100%;height: auto;display: block}
@media (max-width:768px){
  .modal {width: 96%}
  .modal-header h6 {font-size:.8rem}
}

/* ------ AVIS ------ */
#avis {background: #ccc;}
#avis img.logo {height: 80px;position: absolute;top:0;margin-left: -80px;opacity: .5}
#avis .title {text-align: center;}
#avis .title a {margin-top: 0;display: inline-block;}
#avis .title a small {color:var(--main-color)}
#avis a.avis-link {display: inline-flex;align-items: center;gap: 5px;text-decoration: none}
#avis a.avis-link svg {flex-shrink: 0}
#avis .grid {gap: 40px;position:relative;z-index:2;margin-top: 50px;}
#avis .grid-item {padding:60px 30px;text-align: center;}
#avis .grid-item strong {display: block}
#avis .avis-stars {color:#fbbc04;letter-spacing:1px;font-size:1.25rem;line-height:1}
#avis .grid-item time {display: block;color:#666;margin-bottom: 15px;font-size: .9rem}
#avis .review-body { position: relative}
#avis .quote::before { content: "«\202F"}
#avis .quote::after  { content: "\202F»"}
#avis .quote { display: inline}
#avis .review-text { display: inline}
#avis .review-toggle{border: 0;background: none;padding: 0;cursor: pointer;text-decoration: underline;font: inherit;color: var(--main-color);display: block;margin: 0 auto}
@media (max-width:1680px){
  #avis .grid {gap: 20px}
}
@media (max-width:1024px){
  #avis {padding-top: 80px}
  #avis .grid {grid-template-columns: 1fr;}
}

/* ------ FAQ ------ */
#faq {background: #f8f8f8;border-top: 1px solid #e1e1e1}
#faq .title {text-align: center}
#faq .grid {gap: 20px;position:relative;z-index:2}
#faq .faq-item {margin-bottom: 20px}
#faq .carte:hover {transform: translateY(-5px)}
#faq .faq-question {}
#faq .faq-question button {padding: 20px 52px 20px 25px;width: 100%;font-size: 1rem;color:#1c1c1c;text-align: left;background: inherit;white-space: normal}
#faq .faq-question button:hover {color:var(--main-color)}
#faq .faq-question button[aria-expanded="true"] {color: var(--main-color)}
#faq .faq-answer {max-height: 0;overflow: hidden;opacity: 0;transition: max-height 0.3s ease,opacity 0.3s ease;font-size: .9em;font-style: normal}
#faq .faq-answer p {font-size: .95em;color:#555;padding: 0 25px 25px 25px;}
#faq .faq-answer.open {opacity: 1;}
#faq .faq-toggle {position: relative;display: block;width: 100%;background: none;border: none;cursor: pointer}
#faq .faq-toggle::after {content: "+";font-size: 1.1rem;position: absolute;right: 20px;top: 15px;transform: none;transition: transform 0.3s ease}
#faq .faq-toggle[aria-expanded="true"]::after {transform: rotate(45deg)}
@media (max-width:1024px){
  #faq {padding-bottom: 80px}
  #faq .grid {grid-template-columns: 1fr;gap:20px}
  #faq .faq-left {margin: 0}
  #faq .faq-right {margin-top: -20px;}
}

/* ------ CTA ------ */
#cta {background: var(--main-color);position: relative; text-align: center}
#cta h2 {color:#fff;margin-bottom: 30px}
#cta h2 span.br {display: none}
#cta p {color:#fff;width: 80%;margin: 0 auto 40px auto}
@media (max-width:1199px){
  #cta p {width: 75%}
  #cta h2 {font-size: 1.8rem}
}
@media (max-width:768px){
  #cta p {width: 100%}
  #cta h2 span.sep {display: none}
  #cta h2 span.br {display: inline}
}

/* ------ Swiper ------ */
#swiper .swiper {height: 100%; border-radius: 8px; display: flex; flex-direction: column; position: relative; overflow: hidden; cursor: grab; user-select: none; overflow: hidden;touch-action: pan-y; }
#swiper .swiper-wrapper {display: flex;flex-grow: 1;transition: transform 0.5s ease;will-change: transform;width: 100%;height: 100%;touch-action: pan-y}
#swiper .swiper-slide {flex-shrink: 0;min-width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 2rem}
#swiper .swiper-button-prev,
#swiper .swiper-button-next {position: absolute;top: 50%;transform: translateY(-50%);padding: 10px;background: rgba(0, 0, 0, 0.05);border-radius: 50%;cursor: pointer;z-index: 10;user-select: none;transition: background 0.3s ease}
#swiper .swiper-button-prev:hover,
#swiper .swiper-button-next:hover {background: rgba(0, 0, 0, 0.25)}
#swiper .swiper-button-prev svg,
#swiper .swiper-button-next svg {display: block}
#swiper .swiper-button-prev {left: 5px}
#swiper .swiper-button-next {right: 5px}
#swiper .swiper-pagination {position: absolute;bottom: 5px;width: 100%;text-align: center}
#swiper .swiper-pagination span {display: inline-block;width: 8px;height: 8px;background: #333;border-radius: 50%;margin: 0 5px;cursor: pointer;transition: background 0.3s}
#swiper .swiper-pagination .active {background: #eee}
#swiper .swiper-wrapper.grabbing {cursor: grabbing}
@media (max-width:1199px){
  #swiper .swiper {height: 500px;max-width: 80%;margin: 0 auto;}
  #swiper .grid {grid-template-columns: 1fr}
}
@media (max-width:1024px){
  #swiper .swiper {max-width: 100%}
  #swiper .grid-item {order: 2}
}
@media (max-width:768px){
  #swiper .swiper {height: 300px}
}

/* ------ lightbox ------ */
#vanilla-lightbox {position: fixed;inset: 0;background: rgba(0,0,0,0.85);display: flex;justify-content: center;align-items: center;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;z-index: 9999}
#vanilla-lightbox.active {opacity: 1;pointer-events: auto}
.lb-overlay {position: absolute;inset: 0}
.lb-content {position: relative;width: min(80vw, 1280px);height: min(80vh, 800px);display: flex;justify-content: center;align-items: center}
.lb-image {width: calc(100% - 120px);height: auto;max-height: 100%;object-fit: contain;cursor: grab;}
.lb-image.lb-grabbing {cursor: grabbing}
.lb-close {position: absolute;z-index: 9;top: 0px;right: 0px;font-size: 20px;cursor: pointer;background: rgba(0,0,0,0.5);color: #fff;border: none;border-radius: 50%;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center}
.lb-prev,.lb-next {position: absolute;z-index: 9;top: 50%;transform: translateY(-50%);font-size: 40px;width: 50px;height: 50px;padding: 0 0 5px 0;color: #fff;background: rgba(0,0,0,0.5);border: none;border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer}
.lb-prev { left: 0px; }
.lb-next { right: 0px; }
.lb-prev:hover,.lb-next:hover,.lb-close:hover {background: rgba(0,0,0,0.8);color: var(--main-color)}
@media (max-width: 768px) {
  .lb-content {width: 90vw;height: 70vh}
  .lb-prev {left: 5px}
  .lb-next {right: 5px}
  .lb-close {top: 5px;right: 5px}
}

/*
|
|
|
|
|
*/
/* ====== MAIN MENU ====== */
#menu {width: 100%;top:0;height:100px;position: fixed;z-index: 999;background: #fff;box-shadow:none}
#menu.menu_accueil {background: transparent}
#menu.stickyON {height: 70px;background: #fff;transition: height 200ms ease-in-out,background 200ms ease-in-out;box-shadow: 0px 0px 20px rgba(0, 0, 0, .15)}
#menu.stickyOFF {height: 100px;transition: height 200ms ease-in-out,background 200ms ease-in-out;box-shadow:none}
#menu .grid-menu {grid-template-columns: 250px 1fr;height:100%;gap:0}
#menu .grid-menu .grid-item {display: flex;align-items: center;}
.menu_logo a {color:var(--main-color);font-weight: 700;font-size: 3rem;display: flex;align-items: center}
.menu_logo a span {color:#888481}
.menu_logo a picture {border-right : 2px solid #888481;padding-right: 10px;margin-right: 10px;height: 50px;display: inline-block;vertical-align: middle;}
/* ------ menu_content ------ */
.menu_content {display: flex;align-items: center;justify-content: right;height: 100%}
.menu_content nav {display: flex;gap: 0px;align-items: center}
.menu_content nav ul.main-menu > li {display: inline-block;vertical-align:middle}
.menu_content nav ul.main-menu > li > a {display: flex;font-size: .9rem;text-transform: uppercase;font-weight: 700;color:#333;position: relative;padding: 12px 22px;height:100px;transition: height 200ms ease-in-out, color 200ms ease-in-out}
.menu_content nav ul.main-menu > li > a.actif {color: var(--main-color);}
.menu_content nav ul.main-menu > li > a:hover {color: var(--main-color);}
.menu_content nav ul.main-menu > li > a svg.arrow {height: 15px;width: 15px;margin:2px -5px 0 5px;fill: var(--main-color);transition: transform 300ms ease-in-out}
.menu_content nav ul.main-menu > li:last-child > a {height: auto;color:#fff;background: var(--main-color);border-radius:  5px;margin:0 0 0 20px;border:2px solid var(--main-color);padding: 12px 30px;transition: color 200ms ease-in-out, background 200ms ease-in-out, padding 200ms ease-in-out}
.menu_content nav ul.main-menu > li:last-child > a:hover {color:var(--main-color);background: #fff}
.menu_content nav a.clic svg.arrow {transform: rotate(-180deg)}
#menu.stickyON .menu_content nav ul.main-menu > li > a {height:70px}
#menu.stickyON .menu_content nav ul.main-menu > li:last-child > a {height:auto;padding: 8px 30px;}
/* ------ mega-menu ------ */
.mega-menu .grid-mega-menu {grid-template-columns: 1fr;gap:0px}
.mega-menu {display: none;max-height: 0;position: absolute;top: 100%;left: auto;border-radius:0 0 3px 3px;width: auto;z-index: 99;opacity: 0;background: #fff;padding: 0px 40px 20px 25px;transition: max-height 400ms ease,opacity 400ms ease;box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1)}
.mega-menu.open {display: block;max-height: 500px;opacity: 1;transition: max-height 400ms ease,opacity 400ms ease;animation: slideDown 0.4s ease}
.mega-menu ul {list-style-type: none;padding: 0;margin: 0 auto}
.mega-menu ul li a {display: block;color:#555;padding: 8px 0;font-size:.95rem}
.mega-menu ul li a span {color :var(--main-color);font-size:.8rem;font-weight:600;margin-right:8px}
.mega-menu ul li a:hover {transition: color 200ms ease-in-out;color: var(--main-color)}
.mega-menu ul li a.actif {color:var(--main-color)}
.hamburger-container {display: none}
@media (max-width:1366px){
  #menu .grid-menu {grid-template-columns: 120px 1fr}
  .menu_logo strong {display: none}
  .menu_logo a picture {border-right : 0}
  .menu_content nav ul.main-menu > li > a svg.arrow {height: 12px;width: 12px;margin:0px -5px 0 3px}
  .menu_content nav ul.main-menu > li > a {font-size: .85rem}
  .menu_content nav ul.main-menu > li > a {padding: 12px 14px;}
  .menu_content nav ul.main-menu > li:last-child > a {margin:0 10px 0 10px;}
  .menu_content .icon-link span {font-size: 0.75rem}
  .mega-menu {padding: 0px 16px 16px 16px}
  .mega-menu ul li a {font-size: .8rem}
}
@media (max-width:1024px){
  #menu.menu_accueil {background: #fff;}
  .menu_content nav ul.main-menu li.mobilemenu {display: block}
  #menu.stickyOFF .menu_content nav ul.main-menu > li > a {height:auto}
  #menu.stickyON,#menu.stickyOFF,#menu {height: 50px;position: fixed;top:0;left:0}
  #navbar.open {right: 0px;opacity:1}
  #navbar {right: -350px;opacity:0;overflow-y: auto;transition: right 250ms ease-in-out,opacity 250ms ease-in-out;box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1)}
  .menu_logo img.logo {width: 48px;height:30px}
  .menu_logo a picture {height: 30px;display: flex;align-items: center}
  .menu_content nav {display: flex;position: absolute;top:50px;background:#fff;border-top: 1px solid #eee}
  .menu_content nav ul.main-menu {height: 100vh;overflow-y: auto;}
  .menu_content nav ul.main-menu > li {display: block;width:350px;border-bottom: 1px solid #eee}
  .menu_content nav ul.main-menu > li:last-child {border-bottom: 0px}
  .menu_content nav ul.main-menu > li > a {font-size: .9rem;color:#333}
  .menu_content nav ul.main-menu > li > a {padding: 15px 20px;height:auto}
  .menu_content nav ul.main-menu > li,.menu_content nav ul.main-menu > li:last-child {border-color: var(--main-color);}
  .menu_content nav ul.main-menu > li,.menu_content nav ul.main-menu > li:last-child {border:none}
  .menu_content nav ul.main-menu > li:last-child > a {background:#fff;color:#333;margin:0;border:0;border-radius: 0;padding: 15px 20px}
  .menu_content nav ul.main-menu > li:last-child > a:hover {color:var(--main-color)}
  .mega-menu {position: relative;top: 0;margin-top: 0px;left: auto;width: auto;padding: 0;box-shadow: none;background:#F9F9F9 }
  .mega-menu ul li a {padding: 8px 0;border-top: 1px solid #eee;padding: 12px 20px;font-size:.85rem}
  .hamburger-container {display: flex;align-items: center;cursor: pointer}
  .menu-label {font-size: .9rem;margin-right: -10px;color: var(--main-color);font-weight: 500}
  .hamburger {width: 50px;height: 50px;transform: rotate(0deg);transition: .5s ease-in-out;cursor: pointer}
  .hamburger span {display: block;position: absolute;height: 3.2px;width: 40px;background: var(--main-color);border-radius: 5px;right: 0%;margin-top:9px;transform: rotate(0deg);transition: .25s ease-in-out}
  .hamburger span:nth-child(1) {top: 6px;width: 50%}
  .hamburger span:nth-child(2) {top: 14px;width: 50%}
  .hamburger span:nth-child(3) {top: 14px;width: 50%;opacity: 0}
  .hamburger span:nth-child(4) {top: 22px;width: 50%}
  .hamburger.open span:nth-child(1) {top: 12px;width: 0%;left: 50%}
  .hamburger.open span:nth-child(2) {transform: rotate(45deg)}
  .hamburger.open span:nth-child(3) {transform: rotate(-45deg);opacity: 1}
  .hamburger.open span:nth-child(4) {top: 12px;width: 0%;left: 50%}
}


/*
|
|
|
|
|
/* ====== Gestion de la TopBar ====== */
#top-bar {font-size: .75rem;position: relative;z-index: 999;background: #1C1C1C;color:#fff;padding:6px 0;position: fixed;top:0;width:100%;height:30px;}
#top-bar nav {width: 100%;}
#top-bar nav:last-child {text-align: right}
#top-bar ul li {display: inline-block;vertical-align: top;font-size: inherit;color:#fff}
#top-bar ul li:first-child {font-size: .7rem;margin-top: 1px;}
#top-bar ul.social-links li {margin-right: 10px}
#top-bar ul.contact-links li {margin-left: 10px}
#top-bar ul.social-links li a,#top-bar ul.contact-links li a {display: inline-flex;align-items: center;gap: 0.3em}
#top-bar ul li a:hover,#top-bar ul li a.actif {color:var(--main-color)}
#top-bar ul.contact-links li svg {fill: var(--main-color)}
#top-bar ul.contact-links li:last-child svg {stroke:var(--main-color)}
header.stick {z-index: 999;top: 0px;position: sticky;}
header.stick #menu.menu_accueil {background: #fff}
header.stick #menu {top:30px;}
header.stick #menu.stickyON {height: 70px;top:0px;transition: top 100ms ease-in-out, height 100ms ease-in-out}
header.stick #menu.stickyOFF {height: 100px;top:30px;transition: top 200ms ease-in-out, height 200ms ease-in-out}
@media (max-width:1024px){
  #top-bar {display: none;}
  header.stick #menu {box-shadow: 0px 0px 20px rgba(0, 0, 0, .15)}
  header.stick #menu {top:0px}
  header.stick #menu.stickyOFF .menu_content nav ul.main-menu > li > a {height:auto}
  header.stick #menu.stickyON,header.stick #menu.stickyOFF,header.stick #menu {height: 50px;position: fixed;top:0;left:0}
}
/*
|
|
*/
/* ====== HERO MAIN PAGE ====== */
.hero {position: relative; overflow: hidden;min-height: var(--hero-min-vh, 60vh);padding-top: var(--hero-pt, 100px);padding-bottom: var(--hero-pb, 50px);display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;border-bottom: 3px solid var(--main-color);}
.hero-bg{position:absolute; inset:0;width:100%; height:100%;object-fit:cover; object-position:center;z-index:0;filter: brightness(.85) contrast(1.05) saturate(1.05);}
.hero-content{position:relative; z-index:1}
.hero-content .img-content {color:var(--main-color);font-weight: 700;font-size: 2.5rem;display: flex;align-items: center;margin-bottom: 20px;justify-content:center;animation: fadeSlideDown 400ms ease-out forwards;}
.hero-content .img-content span {color:#fff}
.hero-content .img-content picture {border-right : 2px solid #fff;padding-right: 10px;margin-right: 10px;height: 40px}
.hero h1 {color:#fff;font-size: 3rem;animation: fadeSlideDown 600ms ease-out forwards;animation-delay: 0.2s;opacity: 0;margin-bottom: 10px;letter-spacing: -0.02em;}
.hero h1 span,.hero h2 span {display: none}
.hero h2 {color:var(--main-color);font-size: 1.8rem;animation: fadeSlideDown 800ms ease-out forwards;animation-delay: 0s ;opacity: 0}
.hero hr {width: 60px;height: 3px;background: var(--main-color);border: none;margin: 30px auto 20px auto;animation: fadeSlideDown 1s ease-out forwards;}
.hero p {color:#fff;width: 60%;margin: auto;animation: fadeSlideDown 1s ease-out forwards;}
.hero p.big {font-size: 1.2rem;}
.hero p.small {font-size: 1rem;}
.hero h1, .hero h2, .hero p{text-shadow: 0 2px 8px rgba(0,0,0,.55)}
.hero .btn-group {display: flex;gap: 20px;margin: 40px 0 20px 0;justify-content:center;align-items:center;width:100%;}
.hero .btn-group a {animation: fadeSlideDown 1s ease-out forwards;}
@media (max-width:1366px){
  .hero h1 {font-size: 2.8rem;}
  .hero h2 {font-size: 1.5rem}
}
@media (max-width:1024px){
  .hero {min-height: 80vh;padding:80px 5% 40px 5%}
  .hero h1 {font-size: 2rem;}
  .hero h2 {font-size: 1.3rem}
  .hero p {width: 80%;margin: auto;}
  .hero h1 span,.hero h2 span {display: inline}
}
@media (max-width:768px){
  .hero p {width: 100%}
  .hero p.big {font-size: 1rem;}
  .hero .btn-group {display: inline;}
  .hero .btn-group a {display: inline-block;margin: 20px 0 0px 0;}
}
/*
|
|
|
|
*/
/* ====== SS HERO SCOND PAGE ====== */
#ss-hero {padding: var(--ss-hero-pt, 40px) 0 var(--ss-hero-pb, 35px) 0;background: #151515;margin-top: var(--ss-hero-mt, 70px);transition: margin-top 200ms ease-in-out}
#ss-hero.stickyON {margin-top:20px;transition: margin-top 200ms ease-in-out}
#ss-hero.stickyOFF {margin-top:var(--ss-hero-mt, 70px);transition: margin-top 200ms ease-in-out}
#ss-hero .container {position: relative}
#ss-hero .grid {grid-template-columns: 90px 1fr;align-items: center;}
#ss-hero picture {height: 80px;width: 80px}
#ss-hero picture img {height: 80px;width: 80px}
#ss-hero .title {margin: 0}
#ss-hero .title h1 {color: #fff;letter-spacing: -.5px}
#ss-hero .title p {font-size: 1rem;font-weight: 400;color:var(--main-color);letter-spacing: 0}
@media (max-width:1024px){
  #ss-hero {padding: 20px 0;text-align: center;}
  #ss-hero .grid {grid-template-columns: 1fr;gap: 10px}
  #ss-hero picture {height: 50px;width: 50px;display: block;margin: 0 auto 0px auto}
  #ss-hero picture img {height: 50px;width: 50px;}
}
@media (max-width:768px){
  #ss-hero .title h1 {font-size: 1.5rem;}
  #ss-hero .title p {font-size: 1rem;}
}
/* ====== Fil d'Arianne ====== */
#breadcrumb {background: #fff;margin: 0;padding:10px 0;color: #333;border-top: 1px solid rgba(0, 0, 0, .05)}
#breadcrumb span {opacity: .25;font-size: .8rem;}
#breadcrumb a {font-size: .8rem;padding:10px 0}
#breadcrumb a:hover {text-decoration:underline;text-underline-offset:2px}
#breadcrumb span.actif {color:var(--main-color);text-decoration:underline;text-underline-offset:2px;opacity: 1}
.page-contrat #breadcrumb {color: #ddd;background: #111}
.page-gamer #breadcrumb {color: #ddd;background: #111}
.page-list #breadcrumb {background: #f8f8f8;}
@media (max-width:1024px){
  #breadcrumb {text-align: center;}
}
@media (max-width:768px){
  #breadcrumb span {font-size: .7rem;}
  #breadcrumb a {font-size: .7rem}
}
/*
|
|
|
|
|
*/
/* ====== FORMULAIRE ====== */
#formulaire {max-width: 100%}
#formulaire button {margin-top: 20px}
#formulaire .form-group {margin-bottom: 20px}
#formulaire .checkbox-group {display: flex;flex-wrap: wrap;gap: 10px}
#formulaire .checkbox-wrapper {display: flex;align-items: center;gap: 6px;background-color: #333;padding: 12px;border-radius: 4px;font-weight: normal;white-space: nowrap;cursor: pointer}
#formulaire .radio-group {display: flex;flex-wrap: wrap;gap: 10px}
#formulaire .radio-wrapper {display: flex;align-items: center;gap: 6px;background-color: #333;padding: 12px;border-radius: 4px;font-weight: normal;white-space: nowrap;cursor: pointer;color: #fff;transition: color 0.3s;user-select: none;}
#formulaire .radio-wrapper input[type="radio"] {accent-color: var(--main-color)}
#formulaire .radio-wrapper input[type="radio"]:checked + span {color: var(--main-color)}
#formulaire input[type="checkbox"] {accent-color: var(--main-color);width: 16px;height: 16px;cursor: pointer}
#formulaire .radio-wrapper:has(input[type="radio"]:checked) {color: var(--main-color)}
#formulaire input[type="checkbox"]:checked + span {color: var(--main-color)}
#formulaire input.add {margin-top: 5px;}
#formulaire input.add::placeholder {font-size: .8rem;}
input, select, textarea {width: 100%;padding: 12px;color: var(--main-color);border: 1px solid #999;border-radius: 4px;background-color: #eee;font-size: 1em;transition: border-color 0.3s ease;}
input:focus, select:focus, textarea:focus {border-color: var(--main-color);background-color: #fff;outline: none}
#formulaire textarea {height: 150px;resize: vertical}
#formulaire input.error, select.error, textarea.error {border-color: red}
#formulaire label {display: block;margin: 10px 0 5px;font-size: 1em}
#formulaire .error-message {color: red;font-size: 0.75em;margin-top: 0px;}
#formulaire button:disabled {background-color: #ccc;cursor: not-allowed}
#formulaire .required {color: red}
#formulaire ul.recap li {color:#fff;padding: 2px 5px}
#formulaire ul.recap strong {color: #f28e22}
#formulaire ul.recap h3 {margin-bottom: 10px;background: #333;color:#999;padding: 10px 10px;border-radius: 5px;font-weight: 700;}
#formulaire ul.recap li small {color:#999;font-weight: 400;font-style: italic}
#formulaire #submitBtn {position: relative; display: inline-flex; align-items: center; gap: 10px}
#formulaire .btn-loader {display: none;border: 3px solid #f3f3f3;border-top: 3px solid var(--main-color);border-radius: 50%;width: 18px;height: 18px;animation: spin 0.8s linear infinite}
#formulaire form.is-loading .btn-loader {display: inline-block}
#formulaire form.is-loading .btn-text {opacity: .7}
#formulaire form.is-loading input,#formulaire form.is-loading textarea,#formulaire form.is-loading button {pointer-events: none}
#formulaire form.is-loading { opacity: .7}
#feedback {max-width: 100%;margin-top: 40px;}
#feedback.feedback-message {padding: 40px;border-radius: 8px;font-size: 1.1em;width: 100%;opacity: 0;transition: opacity 0.6s ease}
#feedback.feedback-message.visible {opacity: 1}
#feedback.feedback-message h2 {margin-bottom: 20px;font-size: 1.5rem}
#feedback.feedback-message pre {margin-bottom: 20px;}
#feedback.feedback-message small {display: block;margin-top: 20px}
#feedback.feedback-message.success {background-color: #dff5dd;border: 1px solid #27ae60;color: #2c662d}
#feedback.feedback-message.success h2 {color:#27ae60}
#feedback.feedback-message.error {background-color: #fdecea;border: 1px solid #e74c3c;color: #a94442}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*
|
|
|
|
|
*/
/* ====== MAP ====== */
#map {height: 500px;border-radius: 10px}
#map-zone {height: 500px;margin-top: 20px;}
#map .leaflet-tile,#map-zone .leaflet-tile {filter: grayscale(100%) contrast(95%) brightness(105%)}
#map .leaflet-top,#map .leaflet-bottom.leaflet-right,#map-zone .leaflet-top,#map-zone .leaflet-bottom.leaflet-right {z-index: 900;}

/*
|
|
|
|
|
*/
/* ====== FOOTER ====== */
footer {background: #151515;color:#fff}
footer p, footer li {color:#fff}
footer a:hover {color :var(--main-color)}
footer .grid-footer {gap: 0px;grid-template-columns: 1fr 1fr 1fr 1fr;padding: 80px 0}
footer .grid-footer .grid-item {font-size: .9rem;padding: 25px 0;}
footer .grid-footer .grid-item h3 {color :var(--main-color);font-size: 1rem;font-weight: 700;text-transform: uppercase;margin-bottom: 30px;}
footer .grid-footer .grid-item a,
footer .grid-footer .grid-item li,
footer .grid-footer .grid-item p {font-size: inherit;}
footer .grid-footer .grid-item:nth-child(1),
footer .grid-footer .grid-item:nth-child(2),
footer .grid-footer .grid-item:nth-child(3) {border-right:1px solid #333}
footer .grid-footer .grid-item:nth-child(1) {padding-right: 40px}
footer .grid-footer .grid-item:nth-child(4) {padding-left: 40px}
footer .grid-footer .grid-item:nth-child(2) {padding-left:40px;padding-right:40px}
footer .grid-footer .grid-item:nth-child(3) {padding-left:40px;padding-right:40px}
footer .grid-footer .grid-item.bloc-logo .content {color:var(--main-color);font-weight: 700;font-size: 2.5rem;display: flex;align-items: center;margin-bottom: 20px;}
footer .grid-footer .grid-item.bloc-logo .content span {color:#fff}
footer .grid-footer .grid-item.bloc-logo .content picture {border-right : 2px solid #fff;padding-right: 10px;margin-right: 10px;height: 40px}
footer .grid-footer .grid-item.bloc-reseaux .newsletter-form {margin: 20px 0 10px 0}
footer .grid-footer .grid-item.bloc-reseaux .newsletter-form input {display:inline-block;vertical-align: middle;width: 60%;}
footer .grid-footer .grid-item.bloc-reseaux .newsletter-form button {background: transparent;border-radius: 4px;border:2px solid var(--main-color);display:inline-block;vertical-align: middle;padding: 10px 12px 9px 12px;margin-left: 8px;font-size: .75rem;text-transform: uppercase;color:#fff;font-weight: 700}
footer .grid-footer .grid-item.bloc-reseaux .newsletter-form button:hover {background: var(--main-color)}
footer .grid-footer .grid-item.bloc-reseaux .newsletter-form .spinner {display: none;width: 14px;height: 14px;border: 2px solid currentColor;border-right-color: transparent;border-radius: 50%;margin-left: 8px;vertical-align: middle;animation: spin 0.8s linear infinite;}
footer .grid-footer .grid-item.bloc-reseaux .newsletter-form .btn.is-loading .spinner { display: inline-block; }
footer .grid-footer .grid-item.bloc-reseaux .newsletter-form .btn.is-loading .btn-label { opacity: 0.8; }
footer .grid-footer .grid-item.bloc-reseaux .social-links-footer {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-top: 30px;}
footer .grid-footer .grid-item.bloc-reseaux .social-links-footer a {display: flex;align-items: center;text-decoration: none;color: inherit;font-size: 14px;padding: 10px;border: 1px solid rgba(255, 112, 1, .5);border-radius: 5px}
footer .grid-footer .grid-item.bloc-reseaux .social-links-footer a:hover {color :var(--main-color)}
footer .grid-footer .grid-item.bloc-reseaux .social-links-footer svg {margin-right: 8px;flex-shrink: 0;}
footer .grid-footer .grid-item.bloc-contact address p {display: flex; align-items: start;font-style: normal;padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #333;}
footer .grid-footer .grid-item.bloc-contact address p svg {margin-right: 15px;margin-top: 2px;color :var(--main-color)}
footer .grid-footer .grid-item.bloc-contact address small {color:var(--main-color)}
footer .grid-footer .grid-item.bloc-contact address p:last-child {border: none;}
footer .grid-footer .grid-item.bloc-contact a.lien-suppl {margin-left:6px}
footer .grid-footer .grid-item.bloc-contact a.lien-suppl span {color :var(--main-color);margin-right:14px}
footer .grid-footer .grid-item.bloc-contact a.lien-suppl.actif {color :var(--main-color)}
footer .grid-footer .grid-item.bloc-liens ul {margin-top: -5px;}
footer .grid-footer .grid-item.bloc-liens li a {padding: 5px 0;display: block;}
footer .grid-footer .grid-item.bloc-liens li a span {color :var(--main-color);margin-right:5px;transition: margin-right 200ms ease-in-out}
footer .grid-footer .grid-item.bloc-liens li a:hover span {transition: margin-right 200ms ease-in-out;margin-right:10px}
footer .grid-footer .grid-item.bloc-liens li a.actif {color :var(--main-color)}
footer .grid-footer .grid-item.bloc-liens li a.actif:hover span {margin-right:5px}
footer .grid-footer .grid-item.bloc-liens input[type=email] {font-size: .9rem;}
footer .grid-footer .grid-item span.saut {display: none;}
#bottom-bar {font-size: .8rem;background: #000;padding:6px 0;width:100%}
#bottom-bar div.grid-item {justify-self: start}
#bottom-bar nav.grid-item {justify-self: end}
#bottom-bar nav.grid-item a.actif {color :var(--main-color)}
#bottom-bar span.saut {display: none}
@media (max-width:1680px){
  footer .grid-footer .grid-item {padding: 20px 0;}
  footer .grid-footer .grid-item,footer .grid-footer .grid-item.bloc-liens input[type=email] {font-size: .8rem;}
  footer .grid-footer .grid-item:nth-child(1) {padding-right: 30px}
  footer .grid-footer .grid-item:nth-child(2) {padding-left:30px;padding-right:30px}
  footer .grid-footer .grid-item:nth-child(3) {padding-left:30px;padding-right:30px}
  footer .grid-footer .grid-item:nth-child(4) {padding-left: 30px}
  footer .grid-footer .grid-item.bloc-contact address p svg {width: 20px;margin-right: 10px;}
  footer .grid-footer .grid-item.bloc-contact a.lien-suppl {margin-left:5px}
  footer .grid-footer .grid-item.bloc-contact a.lien-suppl span {margin-right:9px}
  #bottom-bar {font-size: .7rem;}
}
@media (max-width:1366px){
  footer .grid-footer .grid-item.bloc-reseaux .newsletter-form input {width: 100%;}
  footer .grid-footer .grid-item.bloc-reseaux .newsletter-form button {padding: 9px 15px;margin: 8px 0 0 0}
  footer .grid-footer .grid-item span.saut {display: inline}
}
@media (max-width:1199px){
  footer .grid-footer .grid-item.bloc-logo .content {justify-content:center}
  footer .grid-footer {gap: 0px;grid-template-columns: 1fr ;padding: 50px 0 25px 0;text-align: center;}
  footer .grid-footer .grid-item {max-width: 100%;margin: 0 auto;}
  footer .grid-footer .grid-item:nth-child(1),
  footer .grid-footer .grid-item:nth-child(2),
  footer .grid-footer .grid-item:nth-child(3) {width: 100%;border-bottom:1px solid #333;border-right:none}
  footer .grid-footer .grid-item:nth-child(4) {width: 100%}
  footer .grid-footer .grid-item:nth-child(1),
  footer .grid-footer .grid-item:nth-child(2),
  footer .grid-footer .grid-item:nth-child(3),
  footer .grid-footer .grid-item:nth-child(4) {padding: 40px 0}
  footer .grid-footer .grid-item.bloc-logo p {width: 80%;margin: auto;}
  footer .grid-footer .grid-item span.saut {display: none}
  footer .grid-footer .grid-item.bloc-reseaux p {width: 80%;margin: auto;}
  footer .grid-footer .grid-item.bloc-reseaux .newsletter-form input {max-width: 280px;display: block;margin: 0 auto 15px auto;}
  footer .grid-footer .grid-item.bloc-reseaux .social-links-footer {margin-top: 40px;}
  footer .grid-footer .grid-item.bloc-reseaux .social-links-footer a {display: block;font-size: 14px}
  footer .grid-footer .grid-item.bloc-contact address p {display: block;border-bottom: none}
  footer .grid-footer .grid-item.bloc-contact address p svg {display: block;margin: 0 auto 5px auto;}
  footer .grid-footer .grid-item.bloc-contact a.lien-suppl {margin-left:0px}
  footer .grid-footer .grid-item.bloc-contact a.lien-suppl span {margin-right:5px}
}
@media (max-width:1024px){
  #bottom-bar .grid-2 {grid-template-columns: 1fr;gap:0}
  #bottom-bar div.grid-item {justify-self: center;text-align: center;}
  #bottom-bar nav.grid-item {justify-self: center;text-align: center;opacity: .75;}
}

@media (max-width:768px){
  #bottom-bar {padding: 6px 0;}
  #bottom-bar span.saut {display: inline}
  #bottom-bar nav.grid-item {margin-top: 5px;}
  footer .grid-footer {padding: 25px 0}
  footer .grid-footer .grid-item {max-width: 100%;margin: 0}
}

/*
|
|
|
|
|
*/
/* ====== ACCUEIL ====== */
.section-intro {background: #F8F8F8;padding-bottom: 0;}
.section-intro .container{position: relative;display: flex;align-items: center}
.section-intro .intro-img{width: 62%;margin-left: auto;border-radius: 14px;overflow: hidden;box-shadow: 0 18px 45px rgba(0,0,0,.12)}
.section-intro .intro-img picture,.section-intro .intro-img img{display: block;width: 100%;height: auto}
.section-intro .intro-card{position: absolute;top: 50%;left: 0px;transform: translateY(-50%);width: 58%;max-width: 700px;background: #fff;border-radius: 14px;padding: 50px 50px 0 50px;box-shadow: 0 18px 45px rgba(0,0,0,.14);z-index: 2}
.section-intro .intro-card a {margin-top: 30px}
@media (max-width: 1024px){
  .section-intro {background: #fff;text-align: center}
  .section-intro .container{display: block}
  .section-intro .intro-card p.border {border: 0;}
  .section-intro .intro-img{margin: 0 auto 40px auto;width: 100%;max-width: 768px}
  .section-intro .intro-img picture,.section-intro .intro-img img{width: 100%;max-width: 768px}
  .section-intro .intro-card{position: static;transform: none;width: 100%;max-width: none;margin-top:0;padding:0;box-shadow: none}
}
/* ====== NOS EXPERTISES ====== */
.section-expertises {background: #F8F8F8;padding-bottom: 120px}
.section-expertises .grid-4 {gap: 20px;align-items: stretch;}
.section-expertises .grid-4 .carte{padding: 30px 20px;display: flex;flex-direction: column;height: 100%}
.section-expertises .grid-4 .carte img{width: 72px;height: 72px;display: block;margin-bottom: 15px}
.section-expertises .grid-4 .carte h3{margin: 0 0 10px;font-size: 1.15rem;line-height: 1.25;transition: color 200ms ease-in-out}
.section-expertises .grid-4 .carte p{margin: 0 0 25px;color: rgba(0,0,0,.75);line-height: 1.55}
.section-expertises .grid-4 .carte .link{margin-top: auto; align-self: flex-start}
.section-expertises .grid-4 .carte:hover h3{color:var(--main-color);transition: color 200ms ease-in-out}
.section-expertises .grid-2 {margin-top: 80px;gap:80px;align-items: stretch}
.section-expertises .grid-2 .title {margin-bottom: 0;padding: 20px 0}
.section-expertises .grid-2 p.border {margin: 30px 0}
.swiper .slide1 {background: url('../img/sous-traitant-electronique-loir-et-cher-1.webp') no-repeat center; background-size: cover;}
.swiper .slide2 {background: url('../img/sous-traitant-electronique-loir-et-cher-2.webp') no-repeat center; background-size: cover;}
.swiper .slide3 {background: url('../img/sous-traitant-electronique-loir-et-cher-3.webp') no-repeat center; background-size: cover;}
.swiper .slide4 {background: url('../img/sous-traitant-electronique-loir-et-cher-4.webp') no-repeat center; background-size: cover;}
.swiper .slide5 {background: url('../img/sous-traitant-electronique-loir-et-cher-5.webp') no-repeat center; background-size: cover;}
.section-expertises .grid-2 .check-list{list-style: none;padding: 0;margin: 0;display: grid;gap: 12px}
.section-expertises .grid-2 .check-list li{position: relative;padding: 14px 14px 14px 44px;border-radius: 12px;background: #fff;border: 1px solid rgba(0,0,0,.08);box-shadow: 0 12px 35px rgba(0,0,0,.06);line-height: 1.45}
.section-expertises .grid-2 .check-list li::before{content: "";position: absolute;left: 14px;top: 50%;transform: translateY(-50%);width: 18px;height: 18px;border-radius: 6px;background: rgba(255,112,11,.16);border: 1px solid rgba(255,112,11,.35)}
.section-expertises .grid-2 .check-list li::after{content: "";position: absolute;left: 20px;top: 50%;width: 8px;height: 4px;border-left: 2px solid var(--main-color);border-bottom: 2px solid var(--main-color);transform: translateY(-55%) rotate(-45deg)}
@media (max-width: 1680px){
  .section-expertises .grid-2 {gap:50px}
}
@media (max-width: 1366px){
  .section-expertises .grid-4{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 1199px){
  .section-expertises .grid-2 {gap:30px;margin-top: 60px;}
}
@media (max-width: 1024px){
  .section-expertises {padding-bottom: 80px}
  .section-expertises .grid-2{grid-template-columns: 1fr}
  .section-expertises .grid-2 .media {width: 100%;max-width: 768px;margin: 0 auto;}
  .section-expertises .grid-2 .media picture,.section-expertises .grid-2 .media img{width: 100%;max-width: 768px}
}
@media (max-width: 768px){
  .section-expertises .grid-4{ grid-template-columns: 1fr}
}

/* ====== Études & production ====== */
.section-etudes {text-align: center}
.section-etudes .title p {width: 80%;margin: auto}
.section-etudes h3 {font-size: 1.15rem;margin: 20px 0 10px 0}
.section-etudes .grid {gap:20px}
.section-etudes .card {padding: 10px 30px 0px 30px}
.section-etudes .card img {border-radius: 5px;}
.section-etudes .card:nth-child(2) {border-right: 1px solid rgba(255,112,11,.25);border-left: 1px solid rgba(255,112,11,.25)}
.section-etudes .card p {color: rgba(0,0,0,.75);line-height: 1.55}
.section-etudes a.btn-invers {margin-top: 60px}
@media (max-width: 1024px){
  .section-etudes .title p {width: 100%}
  .section-etudes .grid {grid-template-columns: 1fr;}
  .section-etudes .card {border-top: 1px solid #ccc;padding: 30px 0 20px 0;}
  .section-etudes .card:nth-child(2) {border-left: none;border-right: none;}
}

/* ====== Usinage & marquage ====== */
.section-usinage {text-align: center;position: relative;}
.section-usinage .title p {width: 80%;margin: auto}
.section-usinage .grid {width: 60%;margin: auto;padding-bottom: 20px}
.section-usinage .grid.middle {border-top: 1px solid rgba(255,112,11,.25);border-bottom: 1px solid rgba(255,112,11,.25);padding: 20px 0;}
.section-usinage .grid.last {padding: 20px 0;}
.section-usinage .grid img {border-radius: 5px}
.section-usinage .text {text-align: left;}
.section-usinage .text h3 {font-size: 1.15rem;margin: 10px 0}
.section-usinage .text p {color: rgba(0,0,0,.75);line-height: 1.55}
.section-usinage a.btn {margin-top: 40px}
@media (max-width: 1366px){
  .section-usinage .grid {width: 80%}
}
@media (max-width: 1024px){
  .section-usinage .title p {width: 100%}
  .section-usinage .grid {width: 100%}
}
@media (max-width: 768px){
  .section-usinage .grid {grid-template-columns: 1fr;width: 100%}
  .section-usinage .text {text-align: center;}
}

/* ====== ZONE D'INTERVENTION */
.section-zone .grid-2{gap: 50px;align-items: center}
.section-zone .media{border-radius: 14px;overflow: hidden;box-shadow: 0 18px 45px rgba(0,0,0,.12);border: 1px solid rgba(0,0,0,.08);height: 100%}
.section-zone .media picture{display: block;height: 100%}
.section-zone .media img{display: block;width: 100%;height: 100%}
.section-zone .grid-2 .title {margin-bottom: 0}
.section-zone .grid-2 h2 span {color: var(--main-color);text-transform: uppercase;font-size: 1rem;letter-spacing: 0em;}
.section-zone .lead{margin: 0 0 16px;color: rgba(0,0,0,.78);line-height: 1.6}
.section-zone .note{margin: 14px 0 40px;color: rgba(0,0,0,.70);line-height: 1.6}
.section-zone .chips{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;gap: 10px}
.section-zone .chips li{padding: 8px 12px;border-radius: 999px;border: 1px solid rgba(0,0,0,.10);background: rgba(255,112,11,.08);font-weight: 600;font-size: 13px}
@media (max-width: 1366px){
  .section-zone .grid-2{gap: 30px}
}
@media (max-width: 1024px){
  .section-zone .grid-2 {grid-template-columns: 1fr;gap: 50px;text-align: center;}
  .section-zone ul.chips {width: 100%;}
  .section-zone ul.chips li {margin: 10px auto;}
}
@media (max-width: 768px){
  .section-zone {padding-top: 30px;}
}

/*
|
|
|
|
|
*/
/* ====== HUB ====== */
/* ---------- hub-method ---------- */
.hub-method {padding: 50px 0 80px 0}
.hub-method .grid {gap: 60px}
.hub-method .media {border-radius: 14px}
main.etudes .hub-method .media {background: url('../img/etude-production.webp') no-repeat center;background-size: cover}
main.usinage .hub-method .media {background: url('../img/sous-traitant-electronique-loir-et-cher-4@2x.webp') no-repeat center;background-size: cover}
.hub-method ul {margin-top: 30px}
.hub-method .title {padding-top: 20px;margin-bottom: 20px;}
main.usinage .hub-method .title p strong {margin-bottom: 10px;display: block;}
@media (min-width: 1921px){
  .hub-method {padding: 80px 0 120px 0}
}
@media (max-width: 1199px){
  .hub-method .grid {gap: 30px}
}
@media (max-width: 1024px){
  .hub-method {padding: 25px 0 50px 0}
  .hub-method .grid {grid-template-columns: 1fr;gap: 0px}
  .hub-method .media {height:350px;margin-top: 20px;}
  .hub-method .title {padding-top: 20px;text-align: center;}
  .hub-method ul {text-align: left;margin: 30px auto 0;width: 300px}
}
@media (max-width: 768px){
    .hub-method .media {height:280px;margin-top: 20px;}
}
/* ---------- hub-services ---------- */
.hub-services .title p {width: 50%;margin: 0 auto;}
main.usinage .hub-services .title p {width: 60%;margin: 0 auto;}
.hub-services .grid.grid-3{align-items: stretch;}
.hub-services .card-link{text-decoration: none;color: inherit;display: flex;flex-direction: column;height: 100%;background: #fff;border: 1px solid rgba(0,0,0,.08);border-radius: 14px;box-shadow: 0 12px 35px rgba(0,0,0,.06);overflow: hidden;padding: 20px;transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.hub-services .card-link:hover{transform: translateY(-5px);box-shadow: 0 18px 45px rgba(0,0,0,.12);border-color: rgba(255,112,11,.22)}
.hub-services .card-link:focus-visible{outline: 3px solid rgba(255,112,11,.35);outline-offset: 3px;border-radius: 14px}
.hub-services .card-link .intro-img{border-radius: 12px;overflow: hidden;border: 1px solid rgba(0,0,0,.08);background: #f6f6f6}
.hub-services .card-link .intro-img picture,
.hub-services .card-link .intro-img img{display: block;width: 100%;height: 200px;object-fit: cover}
.hub-services .card-link .text {padding: 10px 15px;display: flex;flex-direction: column;flex: 1;min-height: 0;}
.hub-services .card-link h4{margin: 16px 0 10px;font-size: 1.1rem;line-height: 1.25;transition: color 100ms ease-in-out}
.hub-services .card-link:hover h4 {color:var(--main-color)}
.hub-services .card-link p.small{margin: 0 0 14px;color: rgba(0,0,0,.75);line-height: 1.55}
.hub-services .mini-list{list-style: none;display: grid;gap: 10px;margin-bottom: 30px}
.hub-services .mini-list li {position: relative;padding-left: 18px;color: rgba(0,0,0,.78);font-size: .95rem;line-height: 1.35}
main.usinage ul.check li {color: rgba(0,0,0,.78);font-size: .95rem}
main.usinage ul.check {margin-bottom: 30px}
.hub-services .mini-list li::before{content: "";position: absolute;left: 0;top: .55em;width: 8px;height: 8px;border-radius: 3px;background: rgba(255,112,11,.22);border: 1px solid rgba(255,112,11,.35)}
.hub-services .hub-link{margin-top: auto;font-weight: 700;color: var(--main-color); align-self: flex-start;display: inline-flex}
.hub-services .card-link:hover .hub-link{text-decoration: underline}
@media (max-width: 1199px){
  .hub-services .title p {width: 70%}
}
@media (max-width: 1024px){
  .hub-services .grid.grid-3 {grid-template-columns: 1fr;}
}
@media (max-width: 768px){
  .hub-services .title p {width: 100%}
}
/* ---------- hub-chip ---------- */
.hub-chip {position: relative;background: linear-gradient(135deg, rgba(28,28,28,1), rgba(24,24,24,1))}
.hub-chip img {margin-bottom: 15px}
.hub-chip h2 {color: rgba(255,255,255,.88)}
.hub-chip p.big {color: rgba(255,255,255,.88);width: 80%;margin: 0 auto 40px auto}
.hub-chip p span {color:var(--main-color)}
.hub-chip .chips{list-style: none; padding: 0; margin-bottom:40px; display: flex; flex-wrap: wrap; gap: 10px;justify-content: center;align-items: center}
.hub-chip .chips li{padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); font-size: .92rem}
.hub-chip .btn-group{display: flex; justify-content: center;align-items: center; flex-wrap: wrap; gap: 12px}
@media (max-width: 768px){
  .hub-chip .btn-group {flex-direction: column;}
  .hub-chip p.big {width: 100%;}
}

/* ---------- hub-usecases ---------- */
.hub-usecases {background: #fff}
.hub-usecases .grid.grid-3{margin-top: 35px;gap: 24px;align-items: stretch}
.hub-usecases .carte{padding: 30px}
.hub-usecases .carte h3{margin: 0 0 8px;line-height: 1.2;font-size: 1.2rem;color:var(--main-color)}
.hub-usecases .carte p.small{margin: 0;color: rgba(0,0,0,.75);line-height: 1.55}
@media (max-width: 768px){
  .hub-usecases .grid {grid-template-columns: 1fr;}
}
/*
|
|
|
|
|
*/
/* ====== SERVICES ====== */
/* ---------- service-hero ---------- */
.service-hero {padding: 50px 0 80px 0}
.service-hero .grid {gap: 60px}
.service-hero .media {border-radius: 14px}
main.bureau .service-hero .media {background: url('../img/bureau-etude-electronique/bureau-etude-electronique-41.webp') no-repeat center;background-size: cover}
main.fabrication .service-hero .media {background: url('../img/fabrication-cartes-electroniques/fabrication-cartes-electroniques-41.webp') no-repeat center;background-size: cover}
main.modification .service-hero .media {background: url('../img/modification-cartes-electroniques/modification-cartes-electroniques-41.webp') no-repeat center;background-size: cover}
main.facade .service-hero .media {background: url('../img/facades-industrielles-sur-mesure/facades-industrielles-sur-mesure-41.webp') no-repeat center;background-size: cover}
main.marquage .service-hero .media {background: url('../img/marquage-industriel/marquage-industriel-41.webp') no-repeat center;background-size: cover}
main.etiquetage .service-hero .media {background: url('../img/etiquetage-impression/etiquetage-impression-41.webp') no-repeat center;background-size: cover}
.service-hero .title {padding-top: 20px;margin-bottom: 20px;}
.service-hero .chips{list-style: none; padding: 0; margin:20px 0 30px 0; display: flex; flex-wrap: wrap; gap: 10px;justify-content: left;align-items: center}
.service-hero .chips li{padding: 10px 14px; border-radius: 999px;background: rgba(242,142,34,.1);border: 1px solid rgba(242,142,34,.5);font-size: .92rem}
@media (max-width: 1199px){
  .service-hero .grid {gap: 40px}
}
@media (max-width: 1024px){
  .service-hero {padding: 30px 0;}
  .service-hero .grid {grid-template-columns: 1fr;gap:20px;text-align: center}
  .service-hero .media {height: 400px;order:2}
  .service-hero .chips{justify-content: center}
}
@media (max-width: 768px){
  .service-hero .media {height: 200px}
}
/* ---------- service-expertises ---------- */
.service-expertises {background: rgba(242,142,34,.1);border-top: 1px solid rgba(255,112,11,.5);padding: 80px 0 30px 0;}
.service-expertises .grid.grid-3{margin-top: 35px;gap: 24px;align-items: stretch}
.service-expertises .carte{padding: 30px}
.service-expertises .carte h3{margin: 0 0 8px;line-height: 1.2;font-size: 1.2rem;color:var(--main-color)}
.service-expertises .carte p.small{margin-top:15px;color: rgba(0,0,0,.75);line-height: 1.55}
@media (max-width: 1024px){
  .service-expertises .grid {grid-template-columns: 1fr;}
}
/* ---------- service-method ---------- */
.service-method {background: linear-gradient(to bottom,rgba(242,142,34,.1) 0%,rgba(255,112,11,.2) calc(50% - 0.5px),rgba(255,112,11,.5) calc(50% - 0.5px),rgba(255,112,11,.5) calc(50% + 0.5px),#f8f8f8 calc(50% + 0.5px),#f8f8f8 100%)}
.service-method .icon-group {display: flex; align-items: flex-start; gap: 24px;margin: 0 auto;padding: 50px 80px 50px 50px;}
.service-method .icon-group .icon {flex-shrink: 0}
.service-method .icon-group .title {margin-bottom: 0;margin-left:20px}
.service-method .icon-group .title ul {margin-top: 20px}
.service-method .icon-group .title ul li {margin-bottom: 10px;color: rgba(0,0,0,.75)}
.service-method .icon-group .title ul li span{color:var(--main-color)}
@media (max-width: 1199px){
  .service-method .icon-group{padding: 50px}
}
@media (max-width: 1024px){
  .service-method .icon-group .title {margin-left:0px}
  .service-method .icon-group {display: block;text-align: center}
  .service-method .icon-group .icon {margin: 0 auto 10px auto}
  .service-method .icon-group .title ul {text-align: left;width: 80%;margin: 30px auto 0 auto}
}
@media (max-width: 768px){
  .service-method .icon-group{padding: 30px}
  .service-method .icon-group .title ul {width: 100%}
}
/* ---------- service-usecases ---------- */
.service-usecases {background: #f8f8f8}
.service-usecases .grid.grid-3{margin-top: 35px;gap: 24px;align-items: stretch}
.service-usecases .carte{padding: 30px}
.service-usecases .carte h3{margin: 0 0 8px;line-height: 1.2;font-size: 1.2rem;color:var(--main-color)}
.service-usecases .carte p.small{margin: 0;color: rgba(0,0,0,.75);line-height: 1.55}
@media (max-width: 1024px){
  .service-usecases .grid {grid-template-columns: 1fr;}
}
/* ---------- service-local ---------- */
.service-local h3.mod {text-transform: none;margin: 20px 0 10px 0}
.service-local .plus-circle-css {width: 18px;height: 18px;border-radius: 50%;border: 2px solid var(--main-color);background: var(--main-color);position: relative;display: inline-block;vertical-align: middle}
.service-local .plus-circle-css::before,
.service-local .plus-circle-css::after {content: "";position: absolute;background: #fff;top: 50%;left: 50%;transform: translate(-50%, -50%)}
.service-local .plus-circle-css::before {width: 9px;height: 2px}
.service-local .plus-circle-css::after {width: 2px;height: 9px}
.service-local .btn-invers {margin-top: 40px;}
.service-local .grid {gap: 60px}
.service-local .title {margin-bottom: 0;padding: 20px 0;}
.service-local .media {border-radius: 14px}
main.bureau .service-local .media {background: url('../img/fabrication-cartes-electroniques/fabrication-cartes-electroniques-41.webp') no-repeat center;background-size: cover}
main.fabrication .service-local .media {background: url('../img/bureau-etude-electronique/bureau-etude-electronique-41.webp') no-repeat center;background-size: cover}
main.modification .service-local .media {background: url('../img/modification-cartes-electronique-blois.webp') no-repeat center;background-size: cover}
main.facade .service-local .media {background: url('../img/sous-traitant-electronique-loir-et-cher-5@2x.webp') no-repeat center;background-size: cover}
main.marquage .service-local .media {background: url('../img/entreprise-marquage-boitier-41.webp') no-repeat center;background-size: cover}
main.etiquetage .service-local .media {background: url('../img/etiquetage-impression/etiquetage-impression-loir-et-cher-loiret.webp') no-repeat center;background-size: cover}
@media (max-width: 1199px){
  .service-local .grid {gap: 40px}
}
@media (max-width: 1024px){
  .service-local {padding: 30px 0}
  .service-local .grid {grid-template-columns: 1fr;gap:20px;text-align: center}
  .service-local .media {height: 400px;order:2}
  .service-local .chips{justify-content: center}
}
@media (max-width: 768px){
  .service-local .media {height: 200px}
}
/*
|
|
|
|
|
*/
/* ====== Bandeau + Modal promo ====== */
.promo-bar{background: #ededed;border-top: 1px solid rgba(0,0,0,.08);border-bottom: 1px solid rgba(0,0,0,.08)}
.promo-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.promo-bar-left{display:flex;align-items:center;gap:12px;min-width: 0}
.promo-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background: rgba(255,112,11,.14);border: 1px solid rgba(255,112,11,.35);color: var(--main-color);font-weight:800;font-size:.85rem;white-space:nowrap}
.promo-text{margin:0;color:#1c1c1c;line-height:1.35;font-size: 1rem}
.promo-muted{color: rgba(0,0,0,.65); font-weight:600;}
.promo-bar-right{display:flex;align-items:center;gap:10px;}
.promo-trigger {left: 22px;bottom: 22px;width: 40px;height: 40px;border-radius: 50%;border: none;cursor: pointer;z-index: 99;background: #ffffff;color: var(--main-color);font-size: 1.8rem;box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(255,112,11, 0.6);transition: transform 0.25s ease, box-shadow 0.25s ease}
.promo-trigger:hover {transform: scale(1.15) rotate(-5deg);box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45),0 0 18px rgba(255,112,11, 0.9)}
.promo-trigger--float {position:fixed;left: 10px;bottom: 10px;z-index: 99}
.promo-overlay{position:fixed;inset:0;background: rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding: 18px;z-index: 9999}
.promo-hidden{display:none}
.promo-modal .promo-body{padding: 0 22px 18px;max-height: calc(min(78vh, 700px) - 120px);overflow-y: auto;-webkit-overflow-scrolling: touch}
.promo-modal .promo-body::-webkit-scrollbar{width: 10px;}
.promo-modal .promo-body::-webkit-scrollbar-track{background: rgba(0,0,0,.06); border-radius: 999px;}
.promo-modal .promo-body::-webkit-scrollbar-thumb{background: rgba(0,0,0,.22); border-radius: 999px;}
.promo-modal .promo-body::-webkit-scrollbar-thumb:hover{background: rgba(0,0,0,.32);}
.promo-modal .promo-body{scrollbar-width: thin;scrollbar-color: rgba(0,0,0,.28) rgba(0,0,0,.06)}
.promo-modal {max-height: min(78vh, 700px);width:min(720px, 100%);background:#fff;border-radius:16px;box-shadow: 0 18px 55px rgba(0,0,0,.25);padding: 30px 40px;position:relative;overflow: hidden}
.promo-modal .title ul {margin: 10px 0 20px 0;}
.promo-modal .title p.second {margin-top: 10px;}
.promo-modal .promo-tags {margin-top: 20px;}
.promo-close{position:absolute;right:14px; top:10px;width:40px; height:40px;border-radius: 12px;border:1px solid rgba(0,0,0,.12);background:#fff;font-size:28px;line-height: 1;cursor:pointer}
.promo-close:hover{border-color: rgba(255,112,11,.35);}
@media (max-width: 1024px){
  .promo-bar-left{display:block;text-align: center;}
  .promo-bar-left .promo-badge {display: inline-block;margin-bottom: 10px;}
  .promo-modal .title hr {margin-left: 0}
  .promo-bar-inner{flex-direction: column; align-items:center}
  .promo-bar-right{width:100%;flex-direction: column; align-items:center}
  .promo-bar-right .btn{display: none}
  .promo-modal {padding: 20px}
}
/*
|
|
|
|
|
*/
/* ====== ZONE D’INTERVENTION ====== */
.zone-intervention {padding: 50px 0 80px 0}
.zone-intervention .grid {gap: 50px}
.zone-intervention .title {margin-bottom: 0;padding: 20px 0}
.zone-intervention .media {background: url('../img/sous-traitant-electronique-region-centre.webp') no-repeat center;background-size: cover;border-radius: 15px}
.zone-intervention .grid-2 {align-items: stretch;gap: 20px;}
.zone-intervention .grid-2 .zi-card {background: #ededed;margin-top: 50px;border: 1px solid rgba(0,0,0,.10);border-radius: 16px;padding: 22px;display: flex;flex-direction: column;height: 100%}
.zone-intervention .grid-2 .zi-card h4 {font-size: 1.2rem;color:var(--main-color)}
.zone-intervention .grid-2 .zi-card .zi-card__top{display: flex;align-items: center;gap: 12px;margin-bottom: 10px}
.zone-intervention .grid-2 .zi-card .zi-icon{width: 44px;height: 44px;display: grid;place-items: center;border-radius: 12px;border: 1px solid rgba(255,112,11,.5);font-size: 20px;background: #fff}
.zone-intervention .grid-2 .zi-card ul {margin: 10px 0 0;}
.zone-intervention .grid-2 .zi-card ul li {font-size: .9rem;}
.zone-intervention .grid-2 .zi-card .zi-badges{margin-top: auto;padding-top: 0px}
.zone-intervention .grid-2 .zi-card .zi-badges .badge{display: inline-block;font-size: 12px;padding: 7px 14px;border-radius: 999px;border: 1px solid rgba(255,112,11,.5);background: rgba(255,112,11,.2)}
.zi .grid {gap: 60px}
.zi .grid .media {background: url('../img/expertise-electronique.webp') no-repeat center;background-size: cover;border-radius: 15px}
.zi .grid .title {margin-bottom: 0;padding: 20px 0;}
.zi .grid .title ul {margin-top: 20px;}
@media (max-width: 1199px){
  .zone-intervention .grid,
  .zi .grid {gap: 40px}
}
@media (max-width: 1024px){
  .zone-intervention .grid-2 .zi-card .zi-badges .badge {margin-bottom: 5px}
  .zone-intervention {padding: 30px 0;margin-bottom: 50px}
  .zone-intervention .grid,
  .zi .grid {grid-template-columns: 1fr;text-align: center;gap:20px}
  .zone-intervention .media,.zi .media {height: 400px;order:2}
  #map-zone {height: 300px}
  .zone-intervention .grid-2 .zi-card {text-align: left}
  .zi .title{text-align: left;padding-top: 0}
  .zi .title hr {margin-left: 0}
}
@media (max-width: 768px){
  .zone-intervention .media,.zi .media {height: 200px}
}
/*
|
|
|
|
|
*/
/* ====== PAGE CONTACT ====== */
.ss-contact {background: #ededed;}
.ss-contact ul {margin-top: 20px;}
.ss-contact .grid {gap:50px}
@media (max-width: 1024px){
  .ss-contact .grid {gap:00px}
  .contact .title hr,.ss-contact .title hr{margin-left: 0;}
  .ss-contact .grid {grid-template-columns: 1fr;}
  #map {height: 350px;}
}