/* ====== RESET ====== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/Inter-ExtraBold.woff2") format("woff2")}
:root {
  --main-font: "Inter",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --main-color: #E12325;
  --second-color: #2B3B8F;
  --hero-min-vh: 60vh;
  --hero-pt: 100px;
  --hero-pb: 50px;
  --ss-hero-pt: 65px;
  --ss-hero-pb: 35px;
  --ss-hero-mt: 70px;
  --fs-h1: clamp(2.25rem, 1.8rem + 2vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  --fs-h3: 1.1rem;
  --fs-h4: clamp(1.8rem, 1.05rem + 0.4vw, 2rem);
  --fs-h5: clamp(1rem, 0.95rem + 0.2vw, 1.2rem);
  --fs-h6: 1rem;
  --border-radius-xl: 20px;
  --border-radius-sm: 5px;
}
body.has-topbar{
  --hero-min-vh: 70vh;
  --hero-pt: 150px;
  --hero-pb: 20px;
  --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}
::selection {color: white;background: var(--main-color)}
html,body {scroll-padding-top: 70px;-webkit-tap-highlight-color: transparent;font-family: var(--main-font);background: #fff;color:#1c1c1c}
html.no-scroll,body.no-scroll {overflow: hidden}
html {scroll-behavior: smooth;scrollbar-width: thin; scrollbar-color: #666 #222}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto}}

/* ------ Titre ------ */
h1,h2,h3,h4,h5,h6 {line-height: 1.2;font-weight: 700}
h1 {font-size: var(--fs-h1)}
h2,.ss-hero h1 {font-size: var(--fs-h2)}
h3 {font-size: var(--fs-h3)}
h4 {font-size: var(--fs-h4)}
h5 {font-size: var(--fs-h5)}
h6 {font-size: var(--fs-h6)}

/* ------ Texte ------ */
p {font-size:1rem;line-height: 1.8}
p.small {font-size:.9rem}
p.big {font-size:1.1rem}
p.border {border-left: 2px solid var(--main-color);padding-left: 1rem;}
.center {text-align: center}
.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}

/* ------ Btn & Link ------ */
a,a:visited,a:hover,a:active {text-decoration: none;color: inherit}
button {border: none;cursor: pointer;font-family: var(--main-font);color: inherit}
a:focus-visible,button:focus-visible {outline: 2px solid var(--main-color);outline-offset: 3px}
.btn,a.btn,button.btn {display:inline-block;font-size: 1rem;font-weight: 700;height: auto;border-radius:  5px;padding: 12px 30px;transition: color 200ms ease-in-out, background 200ms ease-in-out, border 200ms ease-in-out}
.btn-main,a.btn-main,button.btn-main {background: var(--main-color);border: 2px solid var(--main-color);color:#fff}
.btn-main:hover,a.btn-main:hover,button.btn-main:hover {background: #fff;color:var(--main-color)}
.btn-second,a.btn-second,button.btn-second {background: #fff;border: 2px solid var(--main-color);color:var(--main-color)}
.btn-second:hover,a.btn-second:hover,button.btn-second:hover {border: 2px solid #fff}
.btn-white,a.btn-white,button.btn-white {background: #fff;border: 2px solid #fff;color:#1c1c1c}
.btn-white:hover,a.btn-white:hover,button.btn-white:hover {background: transparent;color:#fff}
.btn-white-line,a.btn-white-line,button.btn-white-line {background: transparent;border: 2px solid #fff;color:#fff}
.btn-white-line:hover,a.btn-white-line:hover,button.btn-white-line:hover {background: #fff;color:var(--main-color)}
a.link span {color:var(--main-color)}
a.link {font-size:.9rem;transition: color 200ms ease-in-out}
a.link:hover {color:var(--main-color)}

/* ------ List ul li ------ */
ul li{list-style-type: none;font-size:1rem;color: #1c1c1c;line-height: 1.8}
ul.check li {list-style-image: url('../img/check.svg');margin-left:24px;margin-bottom:10px;padding-left: 5px}
ul.disc li {list-style-type: disc;padding: 10px 0 10px 2px;margin-left:14px;border-bottom: 1px solid rgba(0, 0, 0, .05)}
ul.disc li:last-child {border: none}
ul.disc li::marker {color: var(--main-color)}

/* ------ Images ------ */
picture {display:block;margin:0;padding: 0}
img {max-width:100%;height: auto;display: block}

/* ------ Grid ------ */
.grid {display:grid;width:100%;gap: 1.5rem}
.grid-2 {grid-template-columns: repeat(2, minmax(0, 1fr))}
.grid-3 {grid-template-columns: repeat(3, minmax(0, 1fr))}
.grid-4 {grid-template-columns: repeat(4, minmax(0, 1fr))}
.grid-5 {grid-template-columns: repeat(5, minmax(0, 1fr))}
.grid-6 {grid-template-columns: repeat(6, minmax(0, 1fr))}
@media (max-width: 1024px) {.grid-3,.grid-4,.grid-5,.grid-6 {grid-template-columns: 1fr}}
@media (max-width: 768px) {.grid-2 {grid-template-columns: 1fr}}

/* ------ Padding ------ */
.p1 {padding-block: clamp(0.75rem, 1vw, 1rem)}
.p2 {padding-block: clamp(1rem, 1.5vw, 2rem)}
.p3 {padding-block: clamp(1.5rem, 2vw, 3rem)}
.p4 {padding-block: clamp(2rem, 2.5vw, 4rem)}
.p5 {padding-block: clamp(2.5rem, 3vw, 4.5rem)}
.p6 {padding-block: clamp(3rem, 3.5vw, 6rem)}
.p7 {padding-block: clamp(3.5rem, 4vw, 7rem)}
.p8 {padding-block: clamp(4rem, 4.5vw, 8rem)}
.p9 {padding-block: clamp(4.5rem, 5vw, 9rem)}
.p10 {padding-block: clamp(5rem, 5.5vw, 10rem)}
.p11 {padding-block: clamp(5.5rem, 6vw, 11rem)}
.p12 {padding-block: clamp(6rem, 6.5vw, 12rem)}
.p13 {padding-block: clamp(6.5rem, 7vw, 13rem)}
.p14 {padding-block: clamp(7rem, 7.5vw, 14rem)}
.p15 {padding-block: clamp(7.5rem, 8vw, 15rem)}

/* ------ Container ------ */
.container,.container-fluid,.container-max{box-sizing: border-box;margin: 0 auto}
.container{max-width: 1280px}
.container-fluid{max-width: 1680px}
.container-max{width: 100%;padding-inline: clamp(2rem, 2.5vw, 3rem)}
@media (max-width:1920px){
  .container-fluid{max-width: 1520px}
  .container{max-width: 1280px}
}
@media (max-width:1680px){
  .container {max-width: 1200px}
  .container-fluid{max-width: 1300px}
}
@media (max-width:1366px){
  .container {max-width: 1120px}
  .container-fluid{max-width: 1250px}
}
@media (max-width:1279px){
  .container {max-width: 900px}
  .container-fluid {width: 100%;padding-inline: clamp(2rem, 2.5vw, 3rem)}
}
@media (max-width:1024px){
  .container,.container-fluid,.container-max {width: 100%;padding-inline: clamp(2rem, 2.5vw, 3rem)}
}
@media (max-width:768px){
  .container,.container-fluid,.container-max {padding-inline: clamp(1rem, 5vw, 2rem)}
}

/* ------ Animations ------ */
@keyframes slideDown {from {transform: translateY(-20px);opacity: 0}to{transform: translateY(0);opacity: 1}}
@keyframes slideLeft {from {transform: translateX(-20px);opacity: 0}to{transform: translateX(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}}
[data-ui-animations] [data-motion] {opacity: 0;transform: translate3d(0, 28px, 0);transition: opacity 0.55s ease, transform 0.55s ease;will-change: opacity, transform}
[data-ui-animations] [data-motion].is-visible {opacity: 1;transform: translate3d(0, 0, 0)}

/* ------ Overlay ------ */
#overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;backdrop-filter: blur(2px);background: rgba(10,10,10,.22);opacity: 0;display: none;transition: opacity .22s ease}
#overlay.open-modal {display: block;z-index: 998;opacity: 1}
#overlay.open-navbar {display: block;z-index: 996}
.modal[hidden] {display: none !important}
.modal {position: fixed;inset: 0;display: none;align-items: center;justify-content: center;padding: 24px;z-index: 999;overflow: auto;opacity: 0;pointer-events: none;transition: opacity .22s ease}
.modal.open {display: flex;opacity: 1;pointer-events: auto}
.modal__dialog {position: relative;width: min(1200px, calc(100vw - 40px));max-height: calc(100vh - 40px);overflow: auto;border-radius: 18px;background: #fff;box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);transform: translateY(12px) scale(.985);opacity: .98;transition: transform .22s ease, opacity .22s ease}
.modal.open .modal__dialog {transform: translateY(0) scale(1);opacity: 1}
.modal .close {position: absolute;top: 18px;right: 18px;width: 48px;height: 48px;border: 0;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.08);color: #111;cursor: pointer;z-index: 5;transition: background .2s ease, color .2s ease}
.modal .close:hover {background: rgba(0, 0, 0, 0.16);color: var(--main-color)}
@media (prefers-reduced-motion: reduce) {
  #overlay,.modal,.modal__dialog {transition: none}
}
@media (max-width: 768px) {
  .modal {padding: 12px}
  .modal__dialog {width: calc(100vw - 24px);max-height: calc(100vh - 24px);border-radius: 14px}
  .modal .close {top: 12px;right: 12px}
}

/* ------ 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:1024px){#scroll-to-top {display: none}}

/* ------ title ------ */
.title .before{display: inline-flex;align-items: center;gap: 10px;padding: 6px 10px;border-radius: 5px;border: 1px solid rgba(41,57,135,.25);background: rgba(255,255,255,.7);color: rgba(41,57,135,.8);width: fit-content;margin-bottom: 30px}
.title .before::before{content:"";width: 8px;height: 8px;border-radius: 50%;background: rgba(41,57,135,.8)}
.title h2 {color:#242d2f;font-weight:800;font-size: clamp(1.8rem, 3vw, 2.2rem);line-height: 1.5}
.title h3 {color: var(--main-color);font-size: 0.85rem;font-weight: 800;letter-spacing: 0.16em;text-transform: uppercase;margin-top: 5px;line-height: 2}
.title hr {width: 80px;height: 3px;border: none;margin: 20px 0 30px 0;background: var(--main-color)}
.title.center hr {margin: 20px auto 30px auto}
@media (max-width:768px){
  .title .before {font-size: .8rem;margin-bottom: 20px;}
}
/* ------ info-box ------ */
.info-box {display: flex;align-items: flex-start;gap: 1rem;margin-top: 50px;padding: 2rem;border: 1px solid rgba(41,57,135,.25);border-radius: 10px;background: rgba(41,57,135,.05)}
.info-box__icon {flex: 0 0 auto;width: 2.75rem;height: 2.75rem;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: #ffffff;color: rgba(41,57,135,.75);border: 1px solid rgba(41,57,135,.25);box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05)}
.info-box__content {flex: 1 1 auto}
.info-box__content p {margin: 0;line-height: 1.65;color: rgba(41,57,135,.8)}
.info-box__content strong {font-weight: 700}
@media (max-width:768px){
  .info-box {display: flex;flex-direction: column;text-align:justify}
  .info-box__icon {margin: -3.5rem auto 0 auto}
}
/*
|
|
|
|
|
*/
/* ====== MENU - ====== */
header.classic #menu {width: 100%;top:0;height:100px;position: fixed;z-index: 999;border-top:3px solid var(--main-color);background: #fff;}
header.classic #menu.stickyON {height: 70px;transition: height 200ms ease-in-out,border 100ms ease-in-out;border-top:0px solid var(--main-color);box-shadow: 0px 0px 20px rgba(0, 0, 0, .15)}
header.classic #menu.stickyOFF {height: 100px;transition: height 200ms ease-in-out,border 100ms ease-in-out}
header.classic #menu .grid-menu {grid-template-columns: 182px 1fr;height:100%;gap:0}
header.classic #menu .grid-menu .grid-item {display: flex;align-items: center;}
/* ------ logo ------ */
#menu .menu_logo a img,#menu.stickyOFF .menu_logo a img{height: 80px;width: 127px;transition: all 200ms ease-in-out}
#menu.stickyON .menu_logo a img {height: 60px;width: 95px;transition: all 200ms ease-in-out}
/* ------ menu_content ------ */
header.classic .menu_content {display: flex;align-items: center;justify-content: right;height: 100%}
header.classic .menu_content nav {display: flex;gap: 0px;align-items: center}
header.classic .menu_content nav ul.main-menu > li {display: inline-block;vertical-align:middle}
header.classic .menu_content nav ul.main-menu > li > a {display: flex;font-size: 1rem;font-weight: 500;color:#333;position: relative;padding: 12px 22px;height:100px;transition: height 200ms ease-in-out, color 200ms ease-in-out}
header.classic .menu_content nav ul.main-menu > li > a.actif {color: var(--main-color);}
header.classic .menu_content nav ul.main-menu > li > a:hover {color: var(--main-color);}
header.classic .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}
header.classic .menu_content nav ul.main-menu > li > a.menu-link--button,
header.classic .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: 8px 30px;transition: color 200ms ease-in-out, background 200ms ease-in-out, padding 200ms ease-in-out}
header.classic .menu_content nav ul.main-menu > li > a.menu-link--button.actif {color:#fff;background: var(--main-color)}
header.classic .menu_content nav ul.main-menu > li > a.menu-link--button:hover,
header.classic .menu_content nav ul.main-menu > li:last-child > a:hover {background: #fff;color:var(--main-color)}
header.classic .menu_content nav a.clic svg.arrow {transform: rotate(-180deg)}
header.classic #menu.stickyON .menu_content nav ul.main-menu > li > a {height:70px}
header.classic #menu.stickyON .menu_content nav ul.main-menu > li > a.menu-link--button,
header.classic #menu.stickyON .menu_content nav ul.main-menu > li:last-child > a {height:auto;padding: 8px 30px}
header.classic .submenu-toggle,header.classic .flyout-toggle {display: none}
/* ------ mega-menu ------ */
header.classic .mega-menu .grid-mega-menu {grid-template-columns: 1fr;gap:0px}
header.classic .mega-menu {display: none;max-height: 0;position: absolute;top: 100%;left: auto;width: auto;z-index: 99;opacity: 0;background: #F9F9F9;padding: 0px 40px 20px 25px;transition: max-height 400ms ease,opacity 400ms ease;box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1)}
header.classic .mega-menu.open {display: block;max-height: 500px;opacity: 1;transition: max-height 400ms ease,opacity 400ms ease;animation: slideDown 0.4s ease}
header.classic .mega-menu ul {list-style-type: none;padding: 0;margin: 0 auto}
header.classic .mega-menu ul li a {display: block;color:#333;padding: 8px 15px 8px 0;font-size:.9rem}
header.classic .mega-menu ul li a span {color :var(--main-color);font-size:.6rem;font-weight:600;margin-right:5px}
header.classic .mega-menu ul li a:hover {transition: color 200ms ease-in-out;color: var(--main-color)}
header.classic .mega-menu ul li a.actif {color:var(--main-color)}
header.classic .hamburger-container {display: none}
/* ------ Flyout niveau 3 ------ */
header.classic .mega-menu li.mm-l2{position: relative}
header.classic .mega-menu .chevron {width: .4rem;height: .4rem;display: inline-block;border-right: 2px solid var(--main-color);border-bottom: 2px solid var(--main-color);transform: rotate(-45deg);transition: transform .2s ease}
header.classic .mega-menu .mm-flyout{display: none;position: absolute;top: 0;left: 100%;width: auto;background: #eee;padding: 10px 0 10px 0;z-index: 50;box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);animation: slideLeft 0.4s ease}
header.classic .mega-menu .mm-flyout a{display: block;padding: 8px 30px 8px 20px;font-size: .9rem;white-space: nowrap;color:var(--second-color)}
@media (hover: hover) and (pointer: fine) and (min-width: 1025px){
  header.classic .mega-menu li.mm-l2.has-flyout:hover > .mm-flyout{ display:block}
}
@media (min-width: 1024px){
  header.classic .mega-menu li.mm-l2.has-flyout{display:flex;align-items:center;position: relative}
  header.classic .mega-menu li.mm-l2.has-flyout > a{flex: 1 1 auto;padding-right: 3px}
  header.classic .mega-menu li.mm-l2.has-flyout > .flyout-toggle{display:inline-flex;align-items:center;justify-content:center;width: 34px;height: 34px;border:0;background:transparent;padding:0;cursor:pointer;color: inherit}
  header.classic .mega-menu li.mm-l2.has-flyout.flyout-left > ul.mm-flyout{left: auto;right: 100%}
}

@media (max-width:1366px){
  header.classic .menu_content nav ul.main-menu > li > a svg.arrow {height: 12px;width: 12px;margin:0px -5px 0 3px}
  header.classic .menu_content nav ul.main-menu > li > a {font-size: .95rem}
  header.classic .menu_content nav ul.main-menu > li > a {padding: 12px 14px}
  header.classic .menu_content nav ul.main-menu > li > a.menu-link--button,
  header.classic .menu_content nav ul.main-menu > li:last-child > a {margin:0 10px 0 10px;}
  header.classic .menu_content .icon-link span {font-size: 0.75rem}
  header.classic .mega-menu {padding: 0px 16px 16px 16px}
  header.classic .mega-menu ul li a,.mega-menu .mm-flyout a {font-size: .8rem}
}
@media (max-width:1024px){
  header.classic #menu {border-top:0px solid var(--main-color);box-shadow: 0px 0px 20px rgba(0, 0, 0, .15)}
  header.classic .menu_content nav ul.main-menu li.mobilemenu {display: block}
  header.classic #menu.stickyOFF .menu_content nav ul.main-menu > li > a {height:auto}
  header.classic #menu.stickyON,header.classic #menu.stickyOFF,header.classic #menu {height: 50px;position: fixed;top:0;left:0}
  header.classic #navbar.open {right: 0px;opacity:1}
  header.classic #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 .menu_logo a img,#menu.stickyON .menu_logo a img,#menu.stickyOFF .menu_logo a img{width: 117px;height:45px;margin-top:-4px}
  header.classic .menu_content nav {display: flex;position: absolute;top:50px;background:#fff;border-top: 1px solid #eee}
  header.classic .menu_content nav ul.main-menu {height: 100vh;overflow-y: auto;}
  header.classic .menu_content nav ul.main-menu > li {display: block;width:350px;border-bottom: 1px solid #eee}
  header.classic .menu_content nav ul.main-menu > li:last-child {border-bottom: 0px}
  header.classic .menu_content nav ul.main-menu > li > a {font-size: .9rem;color:#333}
  header.classic .menu_content nav ul.main-menu > li > a {padding: 15px 20px;height:auto}
  header.classic .menu_content nav ul.main-menu > li,header.classic .menu_content nav ul.main-menu > li:last-child {border-color: var(--main-color);}
  header.classic .menu_content nav ul.main-menu > li,header.classic .menu_content nav ul.main-menu > li:last-child {border:none}
  header.classic .menu_content nav ul.main-menu > li > a.menu-link--button,
  header.classic .menu_content nav ul.main-menu > li:last-child > a {background:var(--main-color);color:#fff;margin:0;border:0;border-radius: 0;padding: 15px 20px}
  header.classic .menu_content nav ul.main-menu > li > a.menu-link--button:hover,
  header.classic .menu_content nav ul.main-menu > li:last-child > a:hover {background:var(--main-color);color:#fff}
  header.classic .mega-menu {position: relative;top: 0;margin-top: 0px;left: auto;width: auto;padding: 0;box-shadow: none;background:#F9F9F9 }
  header.classic .mega-menu ul li a {padding: 8px 0;border-top: 1px solid #eee;padding: 12px 20px;font-size:.85rem;color:#1c1c1c}
  header.classic .mega-menu ul li a span {font-size:.6rem}
  header.classic .hamburger-container {display: flex;align-items: center;cursor: pointer;background: transparent;border: 0;padding: 0}
  header.classic .menu-label {font-size: .9rem;margin-right: -10px;color: #fff;font-weight: 700}
  header.classic .hamburger {position: relative;width: 50px;height: 50px;transform: rotate(0deg);transition: .5s ease-in-out;cursor: pointer}
  header.classic .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}
  header.classic .hamburger span:nth-child(1) {top: 6px;width: 50%}
  header.classic .hamburger span:nth-child(2) {top: 14px;width: 50%}
  header.classic .hamburger span:nth-child(3) {top: 14px;width: 50%;opacity: 0}
  header.classic .hamburger span:nth-child(4) {top: 22px;width: 50%}
  header.classic .hamburger.open span:nth-child(1) {top: 12px;width: 0%;left: 50%}
  header.classic .hamburger.open span:nth-child(2) {transform: rotate(45deg)}
  header.classic .hamburger.open span:nth-child(3) {transform: rotate(-45deg);opacity: 1}
  header.classic .hamburger.open span:nth-child(4) {top: 12px;width: 0%;left: 50%}
  /* ------ Flyout niveau 3 ------ */
  header.classic .menu_content nav ul.main-menu > li > a svg.arrow {display:none}
  header.classic .submenu-toggle,header.classic .flyout-toggle {display: inline-flex;align-items: center;justify-content: center;width: 52px;min-width: 52px;border: 0;background: transparent;cursor: pointer}
  header.classic .menu_content nav ul.main-menu > li.has-children{display:flex;flex-wrap: wrap;align-items: stretch}
  header.classic .menu_content nav ul.main-menu > li.has-children > a{flex: 1 1 auto}
  header.classic .menu_content nav ul.main-menu > li.has-children > .submenu-toggle{flex: 0 0 52px}
  header.classic .menu_content nav ul.main-menu > li.has-children > .mega-menu{flex: 0 0 100%;width: 100%}
  header.classic .submenu-toggle__icon{width: 18px;height: 18px;transition: transform 300ms ease-in-out;fill: var(--main-color)}
  header.classic .submenu-toggle[aria-expanded="true"] .submenu-toggle__icon{transform: rotate(-180deg)}
  header.classic .mega-menu li.mm-l2.has-flyout{display:flex;flex-wrap: wrap;align-items: stretch}
  header.classic .mega-menu li.mm-l2.has-flyout > a{flex: 1 1 auto}
  header.classic .mega-menu li.mm-l2.has-flyout > .flyout-toggle{flex: 0 0 52px}
  header.classic .flyout-toggle .chevron{transition: transform 200ms ease-in-out;border-right: 2px solid #333;border-bottom: 2px solid #333}
  header.classic .flyout-toggle[aria-expanded="true"] .chevron{transform: rotate(45deg)}
  header.classic .mega-menu .mm-flyout{position: relative;left: auto;top: auto;width: auto;margin-left: 0;box-shadow: none;animation: slideDown 0.4s ease;background: #eee;padding: 0;}
  header.classic .mega-menu .mm-flyout a {border-top: 1px solid #e1e1e1;padding: 10px 0px 10px 38px;}
  header.classic .mega-menu .mm-flyout[hidden]{display:none}
  header.classic .mega-menu li.mm-l2.has-flyout > .mm-flyout{flex: 0 0 100%;width: 100%}
  header.classic .mega-menu .mm-flyout[hidden]{display:none}
  header.classic .mega-menu .mm-flyout:not([hidden]){display:block}
}
/*
|
|
|
|
|
*/
/* ====== CONTACT ====== */
.contact-page .contact-overview {background: linear-gradient(180deg,#fff 0%,#f5f5f5 100%)}
.contact-page .contact-overview .grid {gap: 20px}
.contact-overview__card {background: #fff;border: 1px solid rgba(0,0,0,.08);border-radius: 10px;padding: 28px;box-shadow: 0 18px 45px rgba(0,0,0,.08);display: flex;flex-direction: column;gap: 12px;height: 100%}
.contact-overview__icon {width: 48px;height: 48px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;background: rgba(43,59,143,.1);color: var(--second-color)}
.contact-overview__card strong {font-size: 1.08rem;color: var(--second-color)}
.contact-overview__card a {color: var(--main-color);font-weight: 700;margin-top: auto;padding-top: 10px}
.contact-overview__hours {display: grid;gap: 8px}
.contact-overview__hours li {display: flex;justify-content: space-between;gap: 12px;line-height: 1.5}
.contact-overview__hours li span {color: rgba(0,0,0,.68)}
.contact-overview__hours li strong {font-size: .98rem;color: #1c1c1c}

.contact-layout {background: #fff;border-top: 1px solid rgba(99,99,99,.15);border-bottom: 1px solid rgba(99,99,99,.15)}
.contact-layout__panel {display: grid;grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);gap: clamp(28px, 4vw, 60px);align-items: start}
.contact-layout__aside {display: grid;gap: 18px}
.contact-aside__card {background: #f5f5f5;border-radius: 10px;padding: 28px;border: 1px solid rgba(0,0,0,.06)}
.contact-aside__card strong {display: block;color: var(--second-color);font-size: 1.08rem;margin-bottom: 12px}
.contact-aside__card p:last-child {margin-bottom: 0}
.contact-aside__card--dark {background: #1C1B1F;border-color: #1C1B1F;color: #fff}
.contact-aside__card--dark strong {color: #fff}
.contact-aside__card--dark p {color: rgba(255,255,255,.82)}
.contact-aside__card--dark .btn {margin-top: 10px}
.contact-layout__form {background: #fff;border: 1px solid rgba(0,0,0,.08);border-radius: 14px;padding: clamp(24px, 3vw, 42px);box-shadow: 0 18px 45px rgba(0,0,0,.08)}
.contact-layout__form .title {margin-bottom: 24px}
.contact-layout__form .title p {margin-bottom: 0}
.contact-form-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 16px 18px}
.contact-form-grid .form-group--full {grid-column: 1 / -1}
.contact-page #formulaire label {font-weight: 700;color: #1c1c1c}
.contact-page #formulaire input,
.contact-page #formulaire select,
.contact-page #formulaire textarea {background: #fafafa;border-color: rgba(0,0,0,.18);color: #1c1c1c;border-radius: 8px}
.contact-page #formulaire input:focus,
.contact-page #formulaire select:focus,
.contact-page #formulaire textarea:focus {border-color: var(--main-color);box-shadow: 0 0 0 3px rgba(225,35,37,.08)}
.contact-page #formulaire textarea {min-height: 180px}
.contact-form-privacy {font-size: .88rem;line-height: 1.55;color: #555;margin: 18px 0 0}
.contact-form-privacy a {font-weight: 700;text-decoration: underline}
.contact-page #formulaire .form-navigation {margin-top: 10px}
.contact-page .contact-zone {background: #f5f5f5}
@media (max-width:1024px){
  .contact-layout__panel {grid-template-columns: 1fr}
  .contact-overview .grid {grid-template-columns: 1fr 1fr}
}
@media (max-width:768px){
  .contact-overview .grid {grid-template-columns: 1fr}
  .contact-form-grid {grid-template-columns: 1fr}
  .contact-overview__hours li {flex-direction: column;gap: 2px}
}
/*
|
|
|
|
|
*/
/* ====== 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, #formulaire select.error, #formulaire textarea.error,
#formulaire input[aria-invalid="true"], #formulaire select[aria-invalid="true"], #formulaire textarea[aria-invalid="true"] {border-color: red}
#formulaire input.valid, #formulaire select.valid, #formulaire textarea.valid {border-color: #27ae60}
#formulaire label {display: block;margin: 10px 0 5px;font-size: 1em}
#formulaire .error-message {color: red;font-size: 0.75em;margin-top: 6px}
#formulaire .error-message:empty {display: none}
#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.is-loading .btn-loader {display: inline-block}
#formulaire.is-loading .btn-text {opacity: .7}
#formulaire.is-loading input,#formulaire.is-loading textarea,#formulaire.is-loading button {pointer-events: none}
#formulaire.is-loading { opacity: .7}
#feedback {max-width: 100%;margin-top: 40px;}
#feedback.feedback-message[hidden] {display: none}
#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 p {margin-bottom: 0}
#feedback.feedback-message small {display: block;margin-top: 20px}
#feedback.feedback-message:focus-visible {outline: 2px solid var(--main-color);outline-offset: 4px}
#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); }
}
/*
|
|
|
|
|
*/
/* ====== swiper / gallery ====== */
[data-ui-swiper] {width: 100%;max-width: 100%;min-width: 0;min-height: 320px;border-radius: 14px;display: flex;flex-direction: column;position: relative;overflow: hidden;cursor: grab;user-select: none;touch-action: pan-y;background: #111}
[data-ui-swiper] .swiper-wrapper {display: flex;flex-grow: 1;transition: transform .5s ease;will-change: transform;width: 100%;min-width: 0;height: 100%;touch-action: pan-y}
[data-ui-swiper] .swiper-slide {flex: 0 0 100%;width: 100%;min-width: 100%;height: 100%;overflow: hidden}
[data-ui-swiper] .swiper-slide picture {display: block;width: 100%;height: 100%}
[data-ui-swiper] .swiper-slide img {width: 100%;height: 100%;display: block;object-fit: cover}
[data-ui-swiper] .swiper-button-prev,[data-ui-swiper] .swiper-button-next {position: absolute;top: 50%;transform: translateY(-50%);width: 48px;height: 48px;padding: 0;border: 0;border-radius: 50%;background: rgba(0, 0, 0, 0.22);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 1.4rem;cursor: pointer;z-index: 5;transition: background .2s ease, color .2s ease}
[data-ui-swiper] .swiper-button-prev:hover,[data-ui-swiper] .swiper-button-next:hover {background: rgba(0, 0, 0, 0.5);color: #fff}
[data-ui-swiper] .swiper-button-prev {left: 14px}
[data-ui-swiper] .swiper-button-next {right: 14px}
[data-ui-swiper] .swiper-pagination {position: absolute;left: 0;right: 0;bottom: 16px;text-align: center;z-index: 5}
[data-ui-swiper] .swiper-pagination span {display: inline-block;width: 9px;height: 9px;border-radius: 50%;margin: 0 5px;background: rgba(255, 255, 255, .42);transition: background .2s ease, transform .2s ease;cursor: pointer}
[data-ui-swiper] .swiper-pagination .active {background: #fff;transform: scale(1.1)}
[data-ui-swiper] .swiper-wrapper.grabbing {cursor: grabbing}
#vanilla-lightbox {position: fixed;inset: 0;background: rgba(0, 0, 0, .86);display: flex;justify-content: center;align-items: center;opacity: 0;pointer-events: none;transition: opacity .3s ease;z-index: 9999}
#vanilla-lightbox[hidden] {display: none}
#vanilla-lightbox.active {opacity: 1;pointer-events: auto}
#vanilla-lightbox .lb-overlay {position: absolute;inset: 0}
#vanilla-lightbox .lb-content {position: relative;width: min(80vw, 1280px);height: min(80vh, 820px);display: flex;justify-content: center;align-items: center}
#vanilla-lightbox .lb-image {width: calc(100% - 120px);height: auto;max-height: 100%;object-fit: contain;cursor: grab}
#vanilla-lightbox .lb-image.lb-grabbing {cursor: grabbing}
#vanilla-lightbox .lb-close, #vanilla-lightbox .lb-prev, #vanilla-lightbox .lb-next {position: absolute;z-index: 9;border: 0;border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;background: rgba(0, 0, 0, 0.5);color: #fff}
#vanilla-lightbox .lb-close {top: 0;right: 0;width: 50px;height: 50px;font-size: 20px}
#vanilla-lightbox .lb-prev, #vanilla-lightbox .lb-next {top: 50%;transform: translateY(-50%);width: 50px;height: 50px;font-size: 40px;padding: 0 0 5px}
#vanilla-lightbox .lb-prev {left: 0}
#vanilla-lightbox .lb-next {right: 0}
#vanilla-lightbox .lb-prev:hover, #vanilla-lightbox .lb-next:hover, #vanilla-lightbox .lb-close:hover {background: rgba(0, 0, 0, 0.8);color: var(--main-color)}
@media (max-width: 768px) {
  [data-ui-swiper] {min-height: 300px}
  #vanilla-lightbox .lb-content {width: 90vw;height: 70vh}
  #vanilla-lightbox .lb-prev {left: 5px}
  #vanilla-lightbox .lb-next {right: 5px}
  #vanilla-lightbox .lb-close {top: 5px;right: 5px}
}
/*
|
|
|
|
|
*/
/* ====== MAP ====== */
#map {height: 500px;border-radius: 10px}
#map .leaflet-tile {filter: grayscale(100%) contrast(95%) brightness(105%)}
#map .leaflet-top,#map .leaflet-bottom.leaflet-right {z-index: 900;}
@media (max-width:768px){
  #map {height: 380px}
}
/*
|
|
|
|
|
*/
/* ====== Pages Légales ====== */
#pagelegale {background: #f5f5f5;border-top: 1px solid rgba(99,99,99,.15);padding-bottom: clamp(4rem, 4.5vw, 8rem);margin-top: 100px;}
#pagelegale h1,#pagelegale h2 {margin-top: 40px;}
#pagelegale h3 {margin-top: 40px;}
#pagelegale .title a {margin: 0;display: inline-block;}
@media (max-width:1024px){
  #pagelegale {margin-top: 50px;}
}
/*
|
|
|
|
*/
/* ====== 404 ====== */
.page-404__hero {margin-top: 100px;min-height: calc(100vh - 240px);display: flex;align-items: center;background: #f5f5f5;}
.page-404__content {max-width: 860px;margin: 0 auto;padding: clamp(28px, 4vw, 54px);background: #fff;border: 1px solid rgba(0,0,0,.08);border-radius: 14px;box-shadow: 0 18px 45px rgba(0,0,0,.08)}
.page-404__content p {max-width: 62ch;margin-inline: auto}
.page-404__content h1 {font-size: clamp(2.3rem, 5vw, 4rem);line-height: 1.04;max-width: 11ch;margin-inline: auto}
.page-404__content h3 {max-width: 34rem;margin-inline: auto}
.page-404__actions {display: flex;flex-wrap: wrap;justify-content: center;gap: 14px;margin-top: 30px}
.page-404__debug {margin-top: 28px;padding: clamp(20px, 2.6vw, 30px);border-radius: 14px;background: #0f1115;color: #dbe7d7}
.page-404__debug summary,.page-404__debug-slugs summary {cursor: pointer;font-weight: 700;color: #fff}
.page-404__debug-meta {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 14px;margin: 18px 0}
.page-404__debug-meta article {padding: 16px;border-radius: 10px;background: rgba(255,255,255,.04)}
.page-404__debug-meta strong {display: block;margin-bottom: 8px;color: #fff}
.page-404__debug-meta p {margin: 0;color: rgba(219,231,215,.8)}
.page-404__debug pre {margin-top: 0;padding: 18px;border-radius: 10px;background: rgba(255,255,255,.04);overflow: auto;line-height: 1.55;color: #dbe7d7}
.page-404__debug-slugs {margin-top: 14px}
.page-404__debug-slugs pre {margin-top: 14px;padding: 18px;border-radius: 10px;background: rgba(255,255,255,.04);overflow: auto;line-height: 1.55;color: #dbe7d7}
@media (max-width: 1024px) {
  .page-404__hero {margin-top: 50px;min-height: auto}
  .page-404__debug-meta {grid-template-columns: 1fr}
}
@media (max-width: 768px) {
  .page-404__actions {display: grid;grid-template-columns: 1fr}
  .page-404__actions .btn {width: 100%;text-align: center}
  .page-404__content h1 {max-width: none}
}
/*
|
|
|
|
|
*/
/* ====== CTA ====== */
.cta {background: #1C1B1F}
.cta .title h2 {color: #fff}
.cta .title p {color: #999;width: 80%;margin: 0 auto 40px auto}
@media (max-width:1024px){
  .cta .title p {width: 100%}
}
/*
|
|
|
|
|
*/
/* ====== FOOTER ====== */
footer {background: #fff;color:#fff}
footer p, footer li {color:#1c1c1c}
footer a:hover {color :var(--main-color)}
footer .grid-footer {display: grid;grid-template-columns: 1fr 1fr 1fr;gap:0}
footer .grid-footer h3 {color:var(--second-color);margin-bottom: 1.5rem}
footer .grid-footer .grid-item:nth-child(2) {border-right: 1px solid rgba(0, 0, 0, .2);border-left: 1px solid rgba(0, 0, 0, .2)}
footer .grid-footer .grid-item.bloc-logo {padding-right: 4rem}
footer .grid-footer .grid-item.bloc-logo picture {margin-bottom: 1rem}
footer .grid-footer .grid-item.bloc-logo img {width: 200px;height: 141px}
footer .grid-footer .grid-item.bloc-contact {padding: 1rem 3rem}
footer .grid-footer .grid-item.bloc-contact address p {display: flex; align-items: start;font-style: normal;padding-bottom: 8px;margin-bottom: 8px;}
footer .grid-footer .grid-item.bloc-contact address p svg {margin-right: 8px;margin-top: 4px;color :var(--main-color);height: 20px;}
footer .grid-footer .grid-item.bloc-liens {padding: 1rem 0 1rem 3rem;}
footer .grid-footer .grid-item.bloc-liens li a {display:flex;align-items:center;min-height:44px;padding:8px 0;}
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}
#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 {display:inline-flex;align-items:center;min-height:44px;padding:8px 6px}
#bottom-bar nav.grid-item a.actif {color :var(--main-color)}
@media (max-width:1279px){
  footer .grid-footer {grid-template-columns: 1fr 1.3fr 1fr}
  footer .grid-footer .grid-item.bloc-logo {padding-right: 2rem}
  footer .grid-footer .grid-item.bloc-contact {padding: 1rem 2rem}
  footer .grid-footer .grid-item.bloc-liens {padding: 1rem 0 1rem 2rem;}
  #bottom-bar .grid-2 {grid-template-columns: 1fr;gap:5px}
  #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:1024px){
  footer .grid-footer {display: grid;grid-template-columns: 1fr;gap:0}
  footer .grid-footer .grid-item {margin: 0 auto 2rem auto;width: 320px}
  footer .grid-footer .grid-item:nth-child(2) {border-left:none;border-right:none;border-top: 1px solid rgba(0, 0, 0, .2);border-bottom: 1px solid rgba(0, 0, 0, .2)}
  footer .grid-footer .grid-item.bloc-logo {padding-right: 0}
  footer .grid-footer .grid-item.bloc-contact {padding: 2rem 0;}
  footer .grid-footer .grid-item.bloc-liens {padding: 0}
}
@media (max-width:768px){
  footer .grid-footer .grid-item {width: 100%}
}
/*
|
|
|
|
|
*/
/* ====== ACCUEIL ====== */
/* ------ Hero ------ */
.ap-hero-media {position: relative;overflow: hidden;min-height: clamp(520px, 75vh, 760px);padding-bottom: 150px;display: flex;align-items: center;margin-top: 100px}
.ap-hero-media__media {position: absolute;inset: 0;z-index: 0;pointer-events: none}
.ap-hero-media__media picture {display: block;width: 100%;height: 100%}
.ap-hero-media__bg {display: block;width: 100%;height: 100%;object-fit: cover}
.ap-hero-media .container {position: relative;z-index: 1}
.ap-hero-media__content {display: grid;gap: 18px;max-width: min(1024px, 100%);margin: 0 auto;color: #fff;text-align: center}
.ap-hero-media__eyebrow {display: inline-flex;width: fit-content;margin: 0 auto;padding: 8px 14px;border-radius: 5px;background: rgba(255, 255, 255, 0.12);border: 1px solid rgba(255, 255, 255, 0.18);font-size: 0.78rem;letter-spacing: 0.08em;text-transform: uppercase;font-weight: 700}
.ap-hero-media h1 {margin: 0;color: #fff;text-shadow: 0 5px 12px rgba(33, 33, 33, 0.5)}
.ap-hero-media p:not(.ap-hero-media__eyebrow) {margin: 0 auto;max-width: 75ch;color: #fff;text-shadow: 0 2px 6px rgba(33, 33, 33, 0.5)}
.ap-hero-media__actions {display: flex;flex-wrap: wrap;gap: 12px;margin: 1rem auto}
.ap-hero-media__actions a.btn-second {display: inline-flex;align-items: center;gap: 8px}
.ap-hero-media__actions a.btn-second .icon-phone{width: 18px;height: 18px;flex: 0 0 18px}
@media (max-width: 1024px) {
  .ap-hero-media {min-height: 480px;margin-top: 50px;padding-bottom: 50px}
}
@media (max-width: 768px) {
  .ap-hero-media {min-height: auto;padding-block: 2rem}
  .ap-hero-media h1 span.saut {display: none}
  .ap-hero-media__actions {flex-direction: column;align-items: stretch}
}

/* ------ Intro 3-icons ------ */
.ap-section-intro {margin-top: -150px;position: relative;z-index: 2;}
.ap-section-intro__panel {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 26px;padding: 50px 40px;border-radius: 10px;background: #fff;box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12)}
.ap-section-intro__item {display: grid;grid-template-columns: 56px 1fr;gap: 14px;align-items: start}
.ap-section-intro__icon {display: inline-flex;align-items: center;justify-content: center;width: 50px;height: 50px}
.ap-section-intro__item h3 {margin: 0 0 8px}
.ap-section-intro__item p {margin: 0;color: #666;line-height: 1.6}
@media (max-width: 1366px) {
  .ap-section-intro__panel {gap: 20px;padding: 40px 30px}
}
@media (max-width: 1279px) {
  .ap-section-intro__item {grid-template-columns: 46px 1fr;gap: 6px}
  .ap-section-intro__icon {width: 50px;height: 50px}
}
@media (max-width: 1024px) {
  .ap-section-intro {margin-top: 0}
  .ap-section-intro__item {grid-template-columns: 56px 1fr;gap: 14px;border-bottom: 1px solid #eee;padding-bottom: 30px}
  .ap-section-intro__item:last-child {border:none;padding-bottom: 0}
  .ap-section-intro__icon {width: 50px;height: 50px}
  .ap-section-intro__panel {grid-template-columns: 1fr;gap: 30px;box-shadow: none;padding: 0}
}

/* ------ Image Reverse ------ */
.ap-content-image-reverse {padding-top: 2rem;background: linear-gradient(to bottom,#ffffff 0%,rgba(255,255,255,0.95) 10%,rgba(255,255,255,0.6) 20%,rgba(255,255,255,0) 60%),url('../img/background-charpente.webp');background-size: cover}
#accueil .ap-content-image-reverse[data-lazy-bg]:not(.is-bg-loaded) {background-image:linear-gradient(to bottom,#ffffff 0%,rgba(255,255,255,.95) 10%,rgba(255,255,255,.6) 20%,rgba(255,255,255,0) 60%)}
.ap-content-image-reverse .grid {align-items: stretch;gap: 4rem}
.ap-content-image-reverse .media {position: relative;overflow: hidden;border-radius: 10px;min-height: 100%}
.ap-content-image-reverse .media img {position: absolute;inset: 0;width: 100%;height: 100%;display: block;object-fit: cover}
.ap-content-image-reverse .grid-2 .title h3 {margin: 40px 0 20px 0}
.ap-content-image-reverse .title p {text-align: justify}
.ap-content-image-reverse .title ul {margin: 20px 0 60px 0}
@media (max-width:1366px){
  .ap-content-image-reverse .grid {gap:3rem}
}
@media (max-width:1279px){
  .ap-content-image-reverse .grid {grid-template-columns: 1fr;gap: 0}
  .ap-content-image-reverse .media {min-height:500px;width: 100%;}
  .ap-content-image-reverse .grid .title {margin: 3rem auto 0 auto;padding:0 5rem}
}
@media (max-width:1024px){
  .ap-content-image-reverse {padding-top: 1rem;}
  .ap-content-image-reverse .media {min-height:400px;margin-top: 0}
  .ap-content-image-reverse .grid .title {padding:0 2rem}
}
@media (max-width:768px){
  .ap-content-image-reverse .media {min-height:350px}
  .ap-content-image-reverse .grid .title {padding:0}
}

/* ------ Avis ------ */
.ap-reviews-grid {background: #f5f5f5;border-top: 1px solid rgba(99,99,99,.15);border-bottom: 1px solid rgba(99,99,99,.15)}
.ap-reviews-grid .grid {gap: 24px;margin-top: 3rem}
.ap-reviews-grid .ap-review-card {background: #fff;padding: 34px 30px;border-radius: 10px;border: 1px solid rgba(0, 0, 0, 0.06);box-shadow: 0 18px 30px rgba(12, 12, 9, 0.05);display: flex;flex-direction: column;transition: transform 0.3s ease,box-shadow 0.3s ease}
.ap-reviews-grid .ap-review-card__stars {color: #f4b400;letter-spacing: 0.18em;font-size: 1rem;margin-bottom: 18px}
.ap-reviews-grid blockquote {margin: 0 0 22px 0;font-size: 1rem;line-height: 1.7;color: #2a2a2a}
.ap-reviews-grid .review-body {display: grid;gap: 12px}
.ap-reviews-grid .review-text {display: block}
.ap-reviews-grid .review-text::before { content: "«\202F"}
.ap-reviews-grid .review-text::after { content: "\202F»"}
.ap-reviews-grid .review-toggle {justify-self: start;border: 0;background: transparent;padding: 0;color: var(--main-color);font: inherit;font-weight: 700;cursor: pointer;text-decoration: underline}
.ap-reviews-grid .ap-review-card__author {display: flex;flex-direction: column;gap: 4px;margin-top: auto}
.ap-reviews-grid .ap-review-card__author strong {color: #1c1c1c}
.ap-reviews-grid .ap-review-card__author span {font-size: .9rem;color:var(--second-color)}
@media (hover: hover) and (min-width: 1024px) {
  .ap-reviews-grid .ap-review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 38px rgba(12, 12, 9, 0.15);
  }
}
@media (max-width: 1024px) {
  .ap-reviews-grid {padding: 5rem 0}
  .ap-reviews-grid .title {text-align: left}
  .ap-reviews-grid .title hr {margin-left: 0}
  .ap-reviews-grid .grid {grid-template-columns: 1fr}
}

/* ------ section-services ------ */
.section-services .title p {width: 60%;margin: 0 auto 40px auto}
.section-services .grid {gap:50px}
.section-services .card.card--overlay{position: relative;overflow: hidden;border-radius: 10px}
.section-services .card.card--overlay img{width: 100%;height: 100%;display: block;object-fit: cover;aspect-ratio: 4 / 3;transform: scale(1.01);transition: transform .35s ease}
.section-services .card.card--overlay::before{content:"";position:absolute;inset:0;background: rgba(55,78,84,.45);transition: background .2s ease;z-index:1}
.section-services .card__content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;color:#fff}
.section-services .card__content h4 {margin:0 0 8px;text-shadow: 2px 2px 4px rgba(33, 33, 33, 0.5);transition: transform .2s ease}
.section-services .card__content .small{margin:0 0 14px;max-width: 34ch;opacity:.95;color: #fff;transition: transform .2s ease}
.section-services .card__actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.section-services .card__actions .link{display:inline-block;padding:10px 14px;border-radius:5px;background: rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;transition: background .2s ease, transform .2s ease;font-weight: 700}
.section-services .card--overlay:hover::before{background: rgba(55,78,84,.65);transition: background .2s ease}
.section-services .card--overlay:hover img{transform: scale(1.05)}
.section-services .card--overlay:hover h4,.card--overlay:hover .small {transform: translateY(-1px)}
.section-services .card--overlay:hover .link{transform: translateY(-1px)}
.section-services .card--overlay:hover .link:hover{background: rgba(255,255,255,.25)}
.section-services .card--overlay:focus-within::before{opacity:.12}

@media (max-width:1366px){
  .section-services .grid {gap:30px}
}
@media (max-width:1279px){
  .section-services .grid {grid-template-columns: 1fr 1fr}
  .section-services .title p {width: 75%}
}
@media (max-width:1024px){
  .section-services .title p {width: 100%}
  .section-services .grid {gap:15px}
}
@media (max-width:768px){
  .section-services .grid {grid-template-columns: 1fr}
  .section-services .title {text-align: left;}
  .section-services .title hr {margin-left:0}
  .section-services .info-box {display: flex;flex-direction: column;text-align:justify}
  .section-services .info-box__icon {margin: -3.5rem auto 0 auto}
}

/* ------ focus-metier ------ */
.focus-metier {background: #1C1B1F;position: relative;padding-bottom: 6rem;}
.focus-metier .title h2 {color: #fff}
.focus-metier .title p {color: #999;width: 80%;margin: 0 auto 40px auto}
.focus-tabs__nav {display: grid;grid-template-columns: repeat(4, 1fr);margin: 0 auto;border: 1px solid #333}
.focus-tabs__btn {position: relative;appearance: none;border: 0;border-right: 1px solid #333;background: transparent;color: #fff;font: inherit;font-weight: 700;padding: 1.2rem 1rem;cursor: pointer;transition: background 0.25s ease, color 0.25s ease}
.focus-tabs__btn:last-child {border-right: 0}
.focus-tabs__btn:hover {background:rgba(255,255,255,.04)}
.focus-tabs__btn:focus-visible {background:rgba(255,255,255,.08);outline:3px solid #fff;outline-offset:-5px;box-shadow:0 0 0 2px var(--main-color)}
.focus-tabs__btn.is-active {background: var(--main-color);color: #fff}
.focus-tabs__content {margin-top: 60px }
.focus-panel {display: grid;grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 0.9fr);gap: clamp(1.5rem, 3vw, 4rem);align-items: center}
.focus-panel__media {position: relative;overflow: hidden;border-radius: 10px}
.focus-panel__media img {display: block;height:100%;aspect-ratio: 4 / 3;object-fit: cover}
.focus-panel__body h4 {margin: 0 0 1rem;color: #fff;font-size: 1.5rem;line-height: 1.15}
.focus-panel__body p {margin: 30px 0;color: #fff}
.focus-panel__body ul {margin-bottom: 40px}
.focus-panel__body ul li{color: #fff}
.focus-panel__body .btn:hover {background: transparent;color:#fff}
.focus-panel {display: none}
.focus-panel.is-active {display: grid}
.focus-panel[hidden] {display: none !important}
@media (max-width: 1366px) {
  .focus-panel {align-items:stretch}
}
@media (max-width: 1024px) {
  .focus-tabs__nav {grid-template-columns: repeat(2, 1fr)}
  .focus-panel {grid-template-columns: 1fr;align-items: center}
  .focus-tabs__btn:nth-child(1),.focus-tabs__btn:nth-child(2) {border-bottom: 1px solid #333}
}
@media (max-width: 768px) {
  .focus-metier .wrap {width: min(100% - 1rem, 1280px)}
  .focus-metier .title p {width: 100%}
  .focus-tabs__nav {grid-template-columns: 1fr}
  .focus-tabs__btn {border-right: 0;border-bottom: 1px solid #333}
  .focus-tabs__btn:last-child {border-bottom: 0}
  .focus-tabs__btn.is-active::after {display: none}
  .focus-tabs__content {margin-top: 2rem}
}

/* ------ real-recent ------ */
.real-recent {background: #f5f5f5;border-bottom: 1px solid rgba(99,99,99,.15)}
.real-recent .title p {width: 70%;margin-right: auto;margin-left: auto;margin-bottom:3rem}
.real-recent .grid-3 {gap: 2rem}
.real-recent-visual {overflow: hidden;border: 1px solid rgba(99,99,99,.15);box-shadow: 0 18px 30px rgba(12, 12, 9, 0.1);border-radius: 10px;transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out}
.real-recent-visual .real-recent__top {min-height: 120px;padding: 24px;display: flex;align-items: flex-end;position: relative;overflow: hidden}
.real-recent-visual .real-recent__top::before,
.real-recent-visual .real-recent__top::after {content: "";position: absolute;inset: 0}
.real-recent-visual .real-recent__top::before {background-repeat: no-repeat;background-position: center;background-size: cover;transform: scale(1);transition: transform 300ms ease-in-out;z-index: 0}
.real-recent-visual .real-recent__top::after {background: linear-gradient(rgba(55,78,84,.1), rgba(55,78,84,.5));opacity: 1;transition: opacity 300ms ease-in-out;z-index: 1}
.real-recent-visual .real-recent__top > * {position: relative;z-index: 2}
.real-recent-visual:hover .real-recent__top::before {transform: scale(1.05)}
.real-recent-visual:hover .real-recent__top::after {opacity: 0}
.real-recent-visual .real-recent__top.one::before {background-image: url('../img/realisations/renovation-charpente-toiture-zinc.webp')}
.real-recent-visual .real-recent__top.two::before {background-image: url('../img/realisations/refection-toiture-ardoises.webp')}
.real-recent-visual .real-recent__top.three::before {background-image: url('../img/realisations/realisation-bardage-bois.webp')}
#accueil .real-recent__top[data-lazy-bg]:not(.is-bg-loaded)::before {background-image:none}
.real-recent-visual .real-recent__top span {display: inline-flex;align-items: center;justify-content: center;min-height: 32px;padding: 6px 12px;border-radius: 5px;background: rgba(33,33,33,.5);backdrop-filter: blur(5px);color: white;font-size: 0.8rem;font-weight: 700;opacity: 1;transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;}
.real-recent-visual .real-recent__body {padding: 28px;display: flex;flex-direction: column;height: calc(100% - 120px);background: #fff}
.real-recent-visual .real-recent__body h3 {margin-bottom: 12px}
.real-recent-visual .real-recent__body p {margin-bottom: 30px}
.real-recent-visual .real-recent__body .btn, .real-recent-visual .real-recent__body a.btn {margin-top: auto;align-self: flex-start}
.real-recent-visual:hover .real-recent__top span {opacity: 0;transform: translateY(5px)}
.real-recent-visual:hover {box-shadow: 0 18px 30px rgba(12, 12, 9, 0.2);transform: translateY(-5px)}
@media (max-width: 1024px) {
  .real-recent .grid-3 {grid-template-columns: 1fr}
  .real-recent .title p {width: 100%}
}

/* ------ realisations-page ------ */
.realisations-hero {margin-top: 100px;background: linear-gradient(to bottom,#ffffff 0%,rgba(255,255,255,0.95) 10%,rgba(255,255,255,0.75) 18%,rgba(255,255,255,0) 58%),url('../img/background-charpente.webp');background-size: cover}
.realisations-hero .title p {max-width: 920px;margin: 0 auto 2.5rem auto}
.realisations-hero .title h2 {color: var(--main-color)}
.realisations-filters {display: flex;flex-wrap: wrap;justify-content: center;gap: 12px}
.realisations-filters button {padding: 12px 18px;border-radius: 999px;border: 1px solid rgba(41,57,135,.18);background: #fff;color: #222;font-weight: 700;cursor: pointer;transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease}
.realisations-filters button:hover,
.realisations-filters button.is-active {background: var(--main-color);border-color: var(--main-color);color: #fff}
.realisations-filters button:hover {transform: translateY(-2px)}
.realisations-listing {background: #f5f5f5}
.realisations-grid {gap: 28px}
.realisation-card {height: 100%;display: flex;transition: opacity .18s ease, transform .18s ease}
.realisation-card.is-filtering-out {opacity: 0;transform: translateY(10px);pointer-events: none}
.realisation-card.is-filtering-in {animation: fadeSlideUp .24s ease}
.realisation-card__button {width: 100%;height: 100%;display: flex;flex-direction: column;padding: 0;border: 1px solid rgba(99,99,99,.15);border-radius: 12px;overflow: hidden;background: #fff;color: inherit;text-align: left;box-shadow: 0 18px 30px rgba(12, 12, 9, 0.1);transition: box-shadow .2s ease, transform .2s ease;cursor: pointer}
.realisation-card__button:hover {box-shadow: 0 18px 30px rgba(12, 12, 9, 0.18);transform: translateY(-5px)}
.realisation-card__media {position: relative;overflow: hidden;background: #111;aspect-ratio: 16 / 10}
.realisation-card__media picture {display: block;width: 100%;height: 100%}
.realisation-card__media img {width: 100%;height: 100%;display: block;object-fit: cover;transition: transform .35s ease}
.realisation-card__button:hover .realisation-card__media img {transform: scale(1.05)}
.realisation-card__media::after {content: "";position: absolute;inset: 0;background: linear-gradient(to bottom,rgba(55,78,84,.06),rgba(55,78,84,.10) 35%,rgba(55,78,84,.55))}
.realisation-card__badge {position: absolute;left: 18px;bottom: 18px;z-index: 2;display: inline-flex;align-items: center;min-height: 34px;padding: 6px 12px;border-radius: 6px;background: rgba(33,33,33,.52);backdrop-filter: blur(5px);color: #fff;font-size: .8rem;font-weight: 700}
.realisation-card__body {display: flex;flex-direction: column;flex: 1;padding: 28px;background: #fff}
.realisation-card__meta {margin: 0 0 12px;color: var(--second-color);font-size: .9rem;font-weight: 700;text-transform: uppercase;letter-spacing: .08em}
.realisation-card__body h2,.realisation-card__body h3 {margin-bottom: 12px}
.realisation-card__body p {margin-bottom: 26px}
.realisation-card__link {display: inline-flex;align-items: center;gap: 10px;margin-top: auto;padding-top: 18px;border-top: 1px solid rgba(99,99,99,.15);font-weight: 700;color: var(--second-color)}
.realisation-card__link::after {content: "→";transition: transform .2s ease}
.realisation-card__button:hover .realisation-card__link::after {transform: translateX(3px)}
.realisations-empty {padding: 28px;border-radius: 12px;background: #fff;border: 1px dashed rgba(41,57,135,.25);text-align: center;color: rgba(41,57,135,.8)}
.realisation-modal .modal__dialog {padding: 4rem}
.realisation-modal__content {min-width: 0;margin-bottom: 0;display: block}
.realisation-modal__gallery {min-width: 0;max-width: 600px;margin: 0 0 28px}
.realisation-modal__gallery [data-ui-swiper] {min-height: 420px;max-height: 72vh;aspect-ratio: 16 / 11;box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14)}
.realisation-modal__content {min-width: 0;margin-bottom: 0}
.realisation-modal__content > p:not(.before) {margin-bottom: 22px}
.realisation-modal__facts {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 14px;margin: 0 0 26px}
.realisation-modal__facts article {padding: 18px;border-radius: 10px;background: rgba(41,57,135,.05);border: 1px solid rgba(41,57,135,.16);display: grid;gap: 6px}
.realisation-modal__facts span {font-size: .78rem;font-weight: 700;letter-spacing: .12em;text-transform: uppercase;color: rgba(41,57,135,.72)}
.realisation-modal__facts strong {color: #1c1c1c}
.realisation-modal__details {display: grid;gap: 16px;margin-bottom: 26px}
.realisation-modal__results {margin-bottom: 30px}
.realisation-modal__results h4 {margin: 0 0 16px;color: var(--second-color)}
.realisations-cta {border-top: 1px solid rgba(99,99,99,.15)}
@media (max-width: 1279px) {
  .realisations-grid {grid-template-columns: 1fr 1fr}
}
@media (max-width: 1024px) {
  .realisations-hero {margin-top: 50px}
  .realisations-hero .title {text-align: left}
  .realisations-hero .title hr {margin-left: 0}
  .realisations-hero .title p {max-width: none;margin: 0 0 2rem 0}
  .realisations-filters {justify-content: flex-start}
  .realisation-modal .modal__dialog {padding: 28px}
}
@media (max-width: 768px) {
  .realisations-grid {grid-template-columns: 1fr}
  .realisation-card__body {padding: 22px;height: auto}
  .realisation-modal__facts {grid-template-columns: 1fr}
  .realisation-modal .modal__dialog {padding: 20px 18px 18px}
  .realisation-modal__gallery {max-width: 100%;margin-bottom: 22px}
  .realisation-modal__gallery [data-ui-swiper] {min-height: 300px;aspect-ratio: 4 / 3}
}

/* ------ section-reno ------ */
.section-reno-moyen .container-reno .grid {gap: 65px}
.section-reno-moyen .container-reno .grid .title {padding: 2rem 0;}
.section-reno-moyen .container-reno .reno-img {background: url('../img/renovation-toiture.webp') no-repeat center;background-size: cover;border-radius: 10px}
.section-reno-moyen .container-reno .reno-card h2 {color:var(--second-color);font-size: 1.5rem;padding-right: 20px;}
.section-reno-moyen .container-reno .reno-card p.border {margin: 20px 0 40px 0}
.section-reno-moyen .container-moyen {margin-top: 65px}
.section-reno-moyen .container-moyen .grid {gap: 65px}
.section-reno-moyen .container-moyen .grid .title {padding: 2rem 0;}
.section-reno-moyen .container-moyen h2 {color:var(--second-color);font-size: 1.5rem;}
.section-reno-moyen .container-moyen ul {margin: 30px 0 40px 0;}
.section-reno-moyen .container-moyen .img {background: url('../img/atelier-joneau.webp') no-repeat center;background-size: cover;border-radius: 10px}
main.a-propos .section-reno-moyen .container-reno .reno-img {background: url('../img/equipe-joneau-entreprise.webp') no-repeat center;background-size: cover;border-radius: 10px}
#accueil .section-reno-moyen [data-lazy-bg]:not(.is-bg-loaded) {background-image:none;background-color:#f0f0f0}
main.a-propos .section-reno-moyen {border-top: 1px solid rgba(99,99,99,.15)}
@media (max-width: 1199px) {
  .section-reno-moyen .container-reno .grid .title {padding: 1rem 0;}
  .section-reno-moyen .container-reno .grid {gap: 50px}
  .section-reno-moyen .container-moyen .grid .title {padding: 1rem 0;}
  .section-reno-moyen .container-moyen .grid {gap: 50px}
  .section-reno-moyen .container-moyen {margin-top: 50px}
}
@media (max-width: 1024px){
  .section-reno-moyen {background-attachment: scroll}
  .section-reno-moyen .container-reno .grid .title {padding: 0 2rem 1rem 2rem;}
  .section-reno-moyen .container-reno .grid {gap: 50px;grid-template-columns: 1fr;}
  .section-reno-moyen .container-moyen .grid .title {padding: 1rem 2rem;}
  .section-reno-moyen .container-moyen .grid {gap: 50px;grid-template-columns: 1fr;}
  .section-reno-moyen .container-moyen {margin-top: 50px}
  .section-reno-moyen .container-reno .reno-img {height: 400px;}
  .section-reno-moyen .container-moyen .img {height: 400px;order: 2;}
}
@media (max-width: 768px){
  .section-reno-moyen .container-reno .grid .title {padding: 1rem 0;}
  .section-reno-moyen .container-moyen .grid .title {padding: 1rem 0;}
  .section-reno-moyen .container-reno .reno-img {height: 350px;}
  .section-reno-moyen .container-moyen .img {height: 350px}
}
/* ------ section-zone ------ */
.section-zone {background: #f5f5f5;border-top: 1px solid rgba(99,99,99,.15)}
.section-zone .grid-2{gap: 65px;align-items: center}
.section-zone .media {background: url('../img/map-joneau.webp') no-repeat center;background-size: cover;border-radius: 10px;overflow: hidden;box-shadow: 0 18px 45px rgba(0,0,0,.12);border: 1px solid rgba(0,0,0,.08);height: 100%}
#accueil .section-zone .media[data-lazy-bg]:not(.is-bg-loaded) {background-image:none;background-color:#e9ecef}
.section-zone .grid-2 .title {margin-bottom: 0;padding: 1rem 0 2rem 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 .chips{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;gap: 10px;margin: 30px 0 50px 0;align-self: flex-start;justify-content: flex-start;}
.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: 1199px){
  .section-zone .grid-2{gap: 50px}
  .section-zone .grid-2 .title {padding: 1rem 0 2rem 0;}
}
@media (max-width: 1024px){
  .section-zone .media {height:350px;width: 100%}
  .section-zone .grid-2 {grid-template-columns: 1fr;gap: 0px}
  .section-zone .grid-2 .title {padding: 0 2rem 4rem 2rem;margin-top: -30px;}
  .section-zone .media {order: 2;}
  .section-zone .media #map{height: 500px}
}
@media (max-width: 768px){
  .section-zone .grid-2 .title {padding: 0 0 4rem 0}
  .section-zone .media #map{height: 400px}
}

/* ------ section-certif ------ */
.section-certif {border-top: 1px solid rgba(99,99,99,.15)}
.section-certif .grid {margin-top: 50px;margin-bottom: 20px;}
.section-certif .elem {text-align: center}
.section-certif .elem img {width: 114px;height: 100px;margin: 0 auto;}
.section-certif .elem h4 {font-size: 1.1rem;font-weight: 700;margin-top: 10px;}
@media (max-width: 1199px){
  .section-certif .elem h4 {font-size: 1rem}
}
@media (max-width: 1024px){
  .section-certif .grid {grid-template-columns: 1fr 1fr;gap: 50px;margin: 4rem auto 0 auto;width: 512px;}
  .section-certif .elem img {width: 80px;height: 70px;}
}
@media (max-width: 768px){
  .section-certif .grid {width: 320px}
}

/* ------ FAQ ------ */
.ap-faq-columns {background: #f5f5f5;border-top: 1px solid rgba(99,99,99,.15)}
.ap-faq-columns .grid {gap: 20px;margin-top: 3rem}
.ap-faq-columns .ap-faq-column {display: grid;gap: 20px}
.ap-faq-columns .faq-item {background: #fff;border-radius: 18px;border: 1px solid rgba(0, 0, 0, 0.05);overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05)}
.ap-faq-columns .faq-question button {padding: 22px 56px 22px 24px;width: 100%;font-size: 1rem;color: #1c1c1c;text-align: left;background: inherit}
.ap-faq-columns .faq-question button:hover,
.ap-faq-columns .faq-question button[aria-expanded="true"] {color: var(--second-color)}
.ap-faq-columns .faq-answer {max-height: 0;overflow: hidden;opacity: 0;transition: max-height 0.3s ease, opacity 0.3s ease}
.ap-faq-columns .faq-answer p {padding: 0 24px 24px 24px;color: #555}
.ap-faq-columns .faq-toggle {position: relative;display: block;width: 100%;background: none;border: none;cursor: pointer}
.ap-faq-columns .faq-toggle::after {content: "+";font-size: 1.1rem;position: absolute;right: 24px;top: 50%;transform: translateY(-50%);transition: transform 0.3s ease;color: var(--second-color)}
.ap-faq-columns .faq-toggle.active::after {transform: translateY(-50%) rotate(45deg)}
.ap-faq-columns .faq-toggle[aria-expanded="true"]::after {transform: translateY(-50%) rotate(45deg)}
main.construction-bois .ap-faq-columns {border-top: none;padding-top: 2rem}
main.travaux-hauteur .ap-faq-columns {border-top: none;padding-top: 0rem}
@media (max-width: 1024px) {
  .ap-faq-columns {padding: 5rem 0}
  .ap-faq-columns .title {text-align: left}
  .ap-faq-columns .title hr {margin-left: 0}
  .ap-faq-columns .grid {grid-template-columns: 1fr}
}
/*
|
|
|
|
|
*/
/* ====== SS-HERO ====== */
.ss-hero {margin-top: 100px;background: #f5f5f5}
.ss-hero .grid {display: grid;grid-template-columns: minmax(320px, 450px) minmax(0, 1fr);gap: clamp(24px, 4vw, 68px);align-items: stretch}
.ss-hero__media {overflow: hidden;border-radius: 10px;width: 450px;height: 450px;}
.ss-hero__media img {width: 100%;height: 100%;display: block;object-fit: cover;aspect-ratio: 5/5}
.ss-hero__content {display: grid;align-content: center;gap: 18px}
.ss-hero__before {color: var(--main-color);font-size: 0.85rem;font-weight: 800;letter-spacing: 0.16em;text-transform: uppercase;line-height: 2}
.ss-hero__content h1,
.ss-hero__content p {margin: 0}
.ss-hero__content hr {width: 80px;height: 3px;border: 0;margin: 0;background: var(--main-color)}
.ss-hero__lists {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 18px}
nav#breadcrumb {background: #fff;padding: 12px 0;border-bottom: 1px solid #eee;border-top: 1px solid #eee}
nav#breadcrumb a, nav#breadcrumb span {font-size: .9rem;}
nav#breadcrumb a {color:#333;transition: color 200ms ease-in-out}
nav#breadcrumb a:hover {color:var(--main-color)}
nav#breadcrumb span.actif {text-decoration: underline;color:var(--main-color)}
nav#breadcrumb span {color:var(--second-color)}
@media (max-width: 1366px) {
  .ss-hero__media {width: 320px;height: 320px}
  .ss-hero {padding: 2.5rem 0 3rem 0}
  .ss-hero .grid {grid-template-columns: 320px 1fr}
  .ss-hero__lists {gap:0px}
}
@media (max-width: 1279px) {
  .ss-hero .grid {grid-template-columns: 1fr}
  .ss-hero__media {width: auto;height: auto}
  .ss-hero__media img {aspect-ratio: 16 / 10}
}

@media (max-width: 1024px) {
  .ss-hero {margin-top: 50px;padding: 2rem 0}
}

@media (max-width: 768px) {
  .ss-hero__lists {grid-template-columns: 1fr}
}
/*
|
|
|
|
|
*/
/* ====== NOS SERVICES ====== */
.list-services {background: linear-gradient(to bottom,#ffffff 0%,rgba(255,255,255,0.95) 10%,rgba(255,255,255,0.6) 20%,rgba(255,255,255,0) 60%),url('../img/background-charpente.webp');background-size: cover}
.list-services .title p {max-width: 768px;margin: 0 auto 3rem auto}
.list-services .services-grid {gap: 30px}
.list-services .service-card {background: #fff;border-radius: 10px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);transition: box-shadow .25s ease;height: 100%;display: flex}
.list-services .service-card:hover {box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10)}
.list-services .service-card__inner {display: flex;flex-direction: column;height: 100%;color: inherit;text-decoration: none}
.list-services .service-card__media {overflow: hidden;position: relative}
.list-services .service-card__media img {width: 100%;display: block;aspect-ratio: 16 / 10;object-fit: cover;transform: scale(1.01);transition: transform .45s ease}
.list-services .service-card:hover .service-card__media img {transform: scale(1.06)}
.list-services .service-card__media::after {content: "";position: absolute;inset: 0;background: linear-gradient(to bottom,rgba(55, 78, 84, 0.08),rgba(55, 78, 84, 0.00) 35%,rgba(55, 78, 84, 0.10));pointer-events: none}
.list-services .service-card__content {display: flex;flex-direction: column;padding: 20px 30px 30px 30px;min-height: 240px;flex: 1;position: relative}
.list-services .service-card__content::before {content: "";position: absolute;top: 0;left: 26px;width: 72px;height: 3px;background: var(--second-color);border-radius: 0px;transition: background .2s ease, width .2s ease}
.list-services .service-card:hover .service-card__content::before {background: var(--main-color);width: 82px}
.list-services .service-card__content h3 {margin: 14px 0 14px;font-size: 1.5rem;line-height: 1.25;color: #212121;transition: color .2s ease}
.list-services .service-card:hover .service-card__content h3 {color: var(--main-color)}
.list-services .service-card__content p {margin: 0 0 22px;color: #6b6b6b;flex-grow: 1}
.list-services .service-card__link {border-top: 1px solid rgba(110, 110, 110, .25);display: inline-flex;align-items: center;gap: 10px;font-weight: 700;letter-spacing: .02em;color: var(--second-color);text-decoration: none;transition: transform .2s ease, color .2s ease;margin-top: auto;padding-top: 20px}
.list-services .service-card__link::after {content: "→";font-size: 1rem;line-height: 1;transition: transform .2s ease}
.list-services .service-card:hover .service-card__link {transform: translateX(2px);color: var(--main-color)}
.list-services .service-card:hover .service-card__link::after {transform: translateX(3px)}
.list-services .info-box {display: flex;align-items: flex-start;gap: 1rem;margin-top: 50px;padding: 2rem;border: 1px solid rgba(41,57,135,.25);border-radius: 10px;background: rgba(41,57,135,.05)}
.list-services .info-box__icon {flex: 0 0 auto;width: 2.75rem;height: 2.75rem;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: #ffffff;color: rgba(41,57,135,.75);border: 1px solid rgba(41,57,135,.25);box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05)}
.list-services .info-box__content {flex: 1 1 auto}
.list-services .info-box__content p {margin: 0;line-height: 1.65;color: rgba(41,57,135,.8)}
.list-services .info-box__content strong {font-weight: 700}
@media (max-width: 1279px) {
  .list-services .services-grid {grid-template-columns: 1fr 1fr;gap: 28px}
  .list-services .title p {width: 75%}
}
@media (max-width: 1024px) {
  .list-services .title p {width: 100%}
  .list-services .service-card__content {min-height: 220px}
}
@media (max-width: 768px) {
  .list-services .title p {margin: 0 auto 2rem auto}
  .list-services .services-grid {grid-template-columns: 1fr}
  .list-services .service-card__content {min-height: auto;padding: 24px 22px 22px}
  .list-services .service-card__content::before {left: 22px}
  .list-services .info-box {display: flex;flex-direction: column;text-align:justify}
  .list-services .info-box__icon {margin: -3.5rem auto 0 auto}
}

/* ------ services-pk ------ */
.services-pk {border-top: 1px solid rgba(99,99,99,.15)}
.services-pk .grid {gap:4rem}
.services-pk .media {position: relative;overflow: hidden;width: 100%;height: 100%}
.services-pk .media img {width: 100%;height: 100%;display: block;object-fit: cover;border-radius: 10px;}
.services-pk .title {padding: 2rem 0}
.services-pk .title p {margin-bottom: 2rem}
main.construction-bois .services-pk {border-top: none}
main.construction-bois .services-pk .grid-3 {gap:2rem;margin-top: 2rem}
main.construction-bois .carte {position: relative;background: #fff;padding: 40px 50px 40px 120px;counter-increment: benefit;border-radius: 10px;border: 2px solid var(--main-color);transition: border .2s ease,background .2s ease}
main.construction-bois .carte::before {content: counter(benefit);position: absolute;left: 35px;top: 70px;transform: translateY(-50%);width: 56px;height: 56px;color: #fff;background: var(--main-color);display: flex;align-items: center;justify-content: center;font-size: 2rem;font-weight: 700;line-height: 1;border-radius: 5px;transition: color .2s ease,background .2s ease}
main.construction-bois .carte strong {font-size: clamp(1.2rem, 2vw, 1.4rem);color: var(--main-color);margin-bottom: 10px;display: block}
main.construction-bois .carte p {color: rgba(0, 0, 0, .75);line-height: 1.5;}
main.travaux-hauteur .services-pk {border-top: none}
main.a-propos .services-pk {border-top: none}
main.a-propos .services-pk .grid {display: grid;grid-template-columns: 250px 1fr;gap: 4rem;align-items: start}
main.a-propos .services-pk .media {height: auto}
main.a-propos .services-pk .media img {width: 100%;height: auto;display: block;object-fit: cover}
main.a-propos .services-pk .title {padding: 0}
@media (max-width: 1024px) {
  main.a-propos .services-pk .grid {grid-template-columns: 1fr}
  main.a-propos .services-pk .media {max-width: 250px;order:2}
}

/* ------ method ------ */
.method {background: #f5f5f5;border-top: 1px solid rgba(99,99,99,.15)}
.method .ap-process-split__layout {display: grid;grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);gap: 3rem;align-items: start}
.method .ap-process-split__steps {display: grid;gap: 18px}
.method .title p {margin-bottom: 2rem}
.method .ap-process-split__steps article {display: grid;grid-template-columns: 70px minmax(0, 1fr);gap: 18px;padding: 20px 22px;border-radius: 10px;background: #fff}
.method .ap-process-split__steps strong {display: inline-flex;width: 54px;height: 54px;align-items: center;justify-content: center;border-radius: 50%;background: rgba(41,57,135, 0.12);color: var(--second-color)}
.method .ap-process-split__steps div {display: grid;gap: 8px}
.method .btn {justify-self: start}
main.batiments-pro .method {background: #fff;border-top: none}
main.isolation .method {background: #fff;border-top: none;padding-top:0}
main.isolation .method .grid {gap:4rem;align-items: center}
main.isolation .method .ap-process-split__steps article,main.batiments-pro .method .ap-process-split__steps article {background: #1C1B1F;color: #fff;padding: 30px}
main.isolation .method .ap-process-split__steps strong,main.batiments-pro .method .ap-process-split__steps strong {background: #fff;color: var(--second-color)}
main.isolation .method .ap-process-split__steps h3,main.batiments-pro .method .ap-process-split__steps h3{color: var(--main-color)}
@media (max-width: 1024px) {
  .method .ap-process-split__layout {grid-template-columns: 1fr}
}
@media (max-width: 768px) {
  .method .ap-process-split__steps article {grid-template-columns: 1fr}
  .method .btn {width: 100%;text-align: center}
}

/* ------ service-list ------ */
.service-list {background: linear-gradient(to bottom,#ffffff 0%,rgba(255,255,255,0.95) 10%,rgba(245,245,245,1) 20%)}
.service-list .title p {max-width: 1024px;margin: 0 auto}
.service-list__stack {display: grid;gap: 40px}
.service-list__article {display: grid;grid-template-columns: 420px 1fr;gap:0;align-items: stretch;background: #fff;border-radius: 10px;box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);overflow: hidden}
.service-list__media img {width: 100%;height: 100%;display: block;object-fit: cover}
.service-list__body {display: grid;align-content: center;gap: 14px;padding: clamp(28px, 4vw, 54px)}
.service-list__body h3 {color:var(--main-color)}
.service-list__body p.small {color: rgba(41, 57, 135, 0.8);border-color:rgba(41, 57, 135, 0.6)}
.service-list .grid-3 {counter-reset: benefit;gap:20px}
.service-list .carte {position: relative;background: var(--main-color);padding: 40px 50px 40px 120px;counter-increment: benefit;border-radius: 10px;border: 2px solid var(--main-color);transition: border .2s ease,background .2s ease}
.service-list .carte::before {content: counter(benefit);position: absolute;left: 35px;top: 70px;transform: translateY(-50%);width: 56px;height: 56px;background: #fff;color: var(--main-color);display: flex;align-items: center;justify-content: center;font-size: 2rem;font-weight: 700;line-height: 1;border-radius: 5px;transition: color .2s ease,background .2s ease}
.service-list .carte strong {font-size: clamp(1.2rem, 2vw, 1.4rem);color: #fff;margin-bottom: 10px;display: block}
.service-list .carte p {color:#f1f1f1;line-height: 1.5;}
.service-list .carte:hover {background: #fff}
.service-list .carte:hover strong {color: var(--main-color)}
.service-list .carte:hover p {color: rgba(0, 0, 0, .75)}
.service-list .carte:hover::before {color: #fff;background: var(--main-color)}
main.couvreur .service-list .title p {max-width: 1024px;margin: 0 auto clamp(2rem, 2.5vw, 4rem) auto}
main.construction-bois .service-list {background: #f5f5f5;border-top: 1px solid rgba(99,99,99,.15)}
main.construction-bois .service-list .service-list__stack {margin-top: 4rem}
main.batiments-pro .service-list {background: #f5f5f5;border-top: 1px solid rgba(99,99,99,.15)}
main.travaux-hauteur .service-list .info-box {margin-bottom: 3rem}
@media (max-width: 1279px) {
  .service-list .grid-3 {grid-template-columns: 1fr;}
  .service-list__article {grid-template-columns: 1fr;}
}

/* ------ bandeau ------ */
.bandeau {background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 50%, #fff 50%, #fff 100%)}
.bandeau__shell {padding: 3rem 5rem;border-radius: 10px;background: var(--main-color)}
.bandeau__shell p.before{border: 1px solid rgba(245,245,245,.5);background: rgba(255,255,255,.1);color: #fff;margin-bottom: 10px}
.bandeau__shell p.before::before{background: #fff}
.bandeau__shell h2 {color:#fff;margin-bottom: 10px}
.bandeau__shell p {color: #f5f5f5}
@media (max-width: 1024px) {
  .bandeau__shell {padding: 40px}
  .bandeau__shell .title {text-align: left;}
}

/* ------ pourquoi ------ */
.pourquoi {background: #fff;border-top: 1px solid rgba(99,99,99,.15);border-bottom: 1px solid rgba(99,99,99,.15)}
main.couvreur .pourquoi {border-top: none}
.pourquoi .grid {grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);gap: 30px;align-items: stretch}
.pourquoi .ap-services-split__intro {background: #1C1B1F;border-radius: 10px;padding: 40px;color: #fff;display: flex;flex-direction: column;justify-content: center}
.pourquoi .ap-services-split__intro h2 {color: #fff;margin-bottom: 18px}
.pourquoi .ap-services-split__intro p { color: rgba(255, 255, 255, 0.82); margin-bottom: 30px; }
.pourquoi .ap-services-split__intro p {color: rgba(255, 255, 255, 0.82);margin-bottom: 30px}
.pourquoi .ap-services-split__list {display: grid; gap: 18px}
.pourquoi .ap-service-split-card {background: #f5f5f5;border-radius: 10px;padding: 28px;border: 1px solid rgba(0, 0, 0, 0.05)}
.pourquoi .ap-service-split-card strong {display: block;color: var(--second-color);font-size: 1.15rem;margin-bottom: 10px}
@media (max-width: 1024px) {
  .pourquoi .grid {grid-template-columns: 1fr}
}

/* ------ real-client ------ */
.real-client {background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%)}
.real-client .ap-project-story__layout {display: grid;grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);gap: clamp(32px, 4vw, 70px);align-items: start}
.real-client .ap-project-story__layout > * {min-width: 0}
.real-client .ap-project-story__content {margin-bottom: 0}
.real-client .ap-project-story__content > p:not(.before) {margin-bottom: 24px}
.real-client .ap-project-story__facts {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 14px;margin: 0 0 30px}
.real-client .ap-project-story__facts article {padding: 18px 20px;border-radius: 10px;background: rgba(41, 57, 135, .05);border: 1px solid rgba(41, 57, 135, .16);display: grid;gap: 6px}
.real-client .ap-project-story__facts span {font-size: .8rem;text-transform: uppercase;letter-spacing: .12em;font-weight: 700;color: rgba(41, 57, 135, .72)}
.real-client .ap-project-story__facts strong {font-size: 1rem;color: #1c1c1c}
.real-client .ap-project-story__text {margin-bottom: 26px}
.real-client .ap-project-story__results {margin-bottom: 34px}
.real-client .ap-project-story__results h4 {margin: 0 0 18px;color: var(--second-color)}
.real-client .ap-project-story__gallery {min-width: 0;display: grid;gap: 18px;align-self: start;position: sticky;top: clamp(84px, 8vw, 110px)}
.real-client .ap-project-story__gallery .small {margin: 0;color: rgba(0, 0, 0, .62)}
.real-client [data-ui-swiper] {width: 100%;max-width: 100%;height: auto;min-height: clamp(340px, 34vw, 520px);max-height: 72vh;aspect-ratio: 16 / 11;box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14)}
main.construction-bois .real-client {background: #fff;}
@media (max-width: 1279px) {
  .real-client .ap-project-story__layout {grid-template-columns: 1fr}
  .real-client .ap-project-story__gallery {position: static;top: auto}
  .real-client [data-ui-swiper] {min-height: 0;max-height: none}
}
@media (max-width: 1024px) {
  .real-client .ap-project-story__facts {grid-template-columns: 1fr 1fr}
}
@media (max-width: 768px) {
  .real-client .ap-project-story__facts {grid-template-columns: 1fr}
  .real-client [data-ui-swiper] {aspect-ratio: 4 / 3}
}