/* =========================
   Fonts / Icons
========================= */
@font-face {
  font-family: 'themify';
  src: url('../fonts/themify.woff') format('woff'),
       url('../fonts/themify.ttf') format('truetype'),
       url('../fonts/themify.svg#themify') format('svg');
  font-weight: normal;
  font-style: normal;
}


/*
* {
    outline: 1px solid rgba(255, 0, 0, .2);
  }*/

/* =========================
   1) Tokens
========================= */
:root{
  --bg: #FFFFFC;
  --ocre: #d3bf07;
  --dark: #28282B;
  --grey: #C9C3C3;
  --dark-grey: #B8B3B2;
  --light-grey: #F5F3F0;
  --green: #8AF72A;
  --heavy-green: #65C90A;


  --ink: #141414;
  --muted: rgba(20,20,20,.62);
  --line: rgba(20,20,20,.10);
  --text: #424141;

  --radius: 5px;
  --max: 1180px;
  --pad: clamp(18px, 4vw, 44px);
  --navH: 80px;
  --ui-gutter: clamp(12px, 2vw, 35px);
}

@media (max-width:760px){
  :root{ --navH:64px; }
}


/* =========================
   2) Base / Reset
========================= */
*,*::before,*::after{ box-sizing:border-box; }

html, body{
  height:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  scroll-padding-top: var(--navH);
}

body{
  margin:0;
  min-height:100vh;
  overflow-y: visible;     /* <-- au lieu de auto */
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;

  /* layout footer always bottom */
  display:flex;
  flex-direction:column;

  /* nav fixed */
  padding-top: 0;
}
body, .hs-form, .hs-form *{
  font-family: "DM Sans", sans-serif !important;
}
/* ============ OVERLAY (haut de page) ============ */
body.nav-overlay .site-header{
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* liens BLANCS en overlay (structure grid/div) */
body.nav-overlay .nav-desktop a{
  color:#fff !important;
  opacity:.9;                 /* optionnel */
}

/* hover blanc + bien visible */
body.nav-overlay .nav-desktop a:hover{
  opacity:1;
}

/* quand on n’est PLUS en overlay (navbar solide) */
body:not(.nav-overlay) .nav-desktop a{
  color: var(--ink) !important;
}

main{ flex: 1 0 auto; }
.footer{ flex-shrink: 0; }

a{ color:inherit; text-decoration:none; }

img{
  max-width:100%;
  height:auto;
  display:block;
  pointer-events:none;
}

/* no scroll state */
html.no-scroll,
body.no-scroll{
  overflow:hidden;
  overscroll-behavior:none;
}

/* sections: une seule règle (pas 3 versions contradictoires) */
section{
  margin:0;
  padding: 5vh 0;
  display:block;
}

/* container */
.container{
  width:100%;
  max-width: 90%;
  margin: 50px auto;
}
@media (min-width:1900px){
  .container{ width:70%; }
}

.justify{ text-align:justify; }

/* iOS: remove tap highlight & outlines */
a, button, .btn,
button:focus, button:active, button:focus-visible{
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}

@media (max-width: 900px){
  .rellax{
    transform: none !important;
  }
}

/* =========================
   3) Typographie
========================= */
p{
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.hero :is(p){ color:#fff; }

p + p{ margin-top:20px; }

h1{
  font-size: clamp(50px, 12vw, 120px);
  line-height: 1.02;
  font-weight:100;
  margin: 0 0 18px;
}

h2{
  font-family:"DM Sans", sans-serif;
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 100;
  color: var(--text);
  line-height: .95;
  margin: 0 0 50px;
}
@media (max-width:668px){
  h2{ width:85%; }
}

h3{
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  padding: 0;
}


h4{
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
strong{
  font-weight: 900;
  letter-spacing: -0.05em;
}



/* =========================
   4) Couleurs / backgrounds utiles
========================= */
.bg-light-grey{ background: var(--light-grey);}
.bg-ocre{ background: var(--ocre); }
.ocre{ color: var(--ocre); }
.bg-grey{ background: var(--grey); }
.bg-dark{ background: var(--dark); color:#fff; }

.bg-logo{ position:relative; pointer-events:none; z-index:0; }
.bg-logo::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/logo/m.svg") center no-repeat;
  background-size: min(45vw, 450px);
  opacity:.08;
}
.heavy-green{
  color: var(--heavy-green);
}

/* =========================
   5) NAV (nav.php)
========================= */
/* =========================
   NAV (nav.php) — CLEAN
   - Desktop nav + underline
   - Burger + mobile menu
   - Overlay (start) -> scrolled (JS: body.nav-overlay)
   - Menu open (JS: body.menu-open)
========================= */

/* Header base */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--navH);
  z-index: 1000;

  /* état “scrollé” par défaut */
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(0,0,0,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(10px);

  /* animation “arrive doucement” */
  transform: translateY(-18px);
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    background-color .55s ease,
    border-color .55s ease,
    backdrop-filter .55s ease,
    -webkit-backdrop-filter .55s ease;
}
body:not(.nav-overlay) .site-header{ transform: translateY(0); }

.site-header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding-left: var(--ui-gutter);
  padding-right: var(--ui-gutter);
  overflow: visible;
}

/* Brand */
a.brand{
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
}
img.brand-logo{
  height:50px;
  width:auto;
  transition: transform .25s ease;
}
img.brand-logo:hover{ transform: scale(1.1); }
@media (max-width:668px){
  img.brand-logo{ margin-left:2px; }
  img.brand-logo:hover{ transform: scale(1.05); }
}



/* NAV DESKTOP = flex + cases fixes */
.nav-desktop{
  display:flex;
  align-items:center;
  gap: clamp(16px, 2vw, 30px);
  height: var(--navH);
  overflow: visible;
}


/* Underline desktop */
@media (min-width:1025px){
  .nav-desktop > a,
  .nav-desktop .nav-parent{
    opacity:1 !important;
    position:relative;
    display:inline-block;
  }

  /* IMPORTANT: ne pas “affaiblir” l'actif ici */
  .nav-desktop a.is-active{
    font-weight:900 !important;
    opacity:.35 !important;
    pointer-events:none;
  }

  .nav-desktop > a:not(.is-active)::after,
  .nav-desktop .nav-parent::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom:-4px;
    height:1px;
    background:currentColor;
    transform: scaleX(0);
    transform-origin:left;
    transition: transform .25s cubic-bezier(.22,.8,.22,1);
  }
  .nav-desktop > a:not(.is-active):hover::after,
  .nav-desktop > a:not(.is-active):focus-visible::after,
  .nav-desktop .nav-parent:hover::after,
  .nav-desktop .nav-parent:focus-visible::after{
    transform: scaleX(1);
  }
}

/* Burger */
.burger{
  display:none;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  position:relative;
  align-self:center;
}
.burger .line{
  position:absolute;
  left:50%;
  top:50%;
  width:30px;
  height:2px;
  background: rgba(20,20,20,.85);
  border-radius:2px;
  transform: translateX(-50%);
  transition: transform .22s ease, opacity .18s ease, background-color .18s ease;
}
.burger .line:nth-child(1){ transform: translate(-50%, -10px); }
.burger .line:nth-child(2){ transform: translate(-50%, 0); }
.burger .line:nth-child(3){ transform: translate(-50%, 10px); }

.burger.is-open{
  position:fixed;
  top: calc((var(--navH) - 46px) / 2);
  right: var(--ui-gutter);
  z-index:1100;
}
.burger.is-open .line:nth-child(1){ transform: translate(-50%,0) rotate(45deg); }
.burger.is-open .line:nth-child(2){ opacity:0; }
.burger.is-open .line:nth-child(3){ transform: translate(-50%,0) rotate(-45deg); }

/* Mobile menu */
.mobile-menu{
  position:fixed;
  left:0; right:0; bottom:0;
  top: var(--navH); /* par défaut sous la nav */
  z-index:900;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
}
.mobile-menu.is-open{
  opacity:1;
  pointer-events:auto;
}
.mobile-menu-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.22);
}
.mobile-menu-panel{
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(10px);
  display:flex;
  justify-content:center;
}
.mobile-menu-nav{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0;
  padding:0;
  min-width:200px;
  margin-top:20vh;
}
.mobile-menu-nav a{
  font-size:25px;
  letter-spacing:-.02em;
  line-height: .95;
  opacity:.78;
  transition: opacity .18s ease, transform .18s ease, font-weight .15s ease;
  margin:10px 0;
}
.mobile-menu-nav a:hover{ opacity:1; font-weight:900; }
.mobile-menu-nav a.is-active{ opacity:.35; pointer-events:none; }

/* Mobile submenu */
.mobile-menu-nav details{ width:100%; }
.mobile-menu-nav summary::-webkit-details-marker{ display:none; }
.mobile-menu-nav summary::marker{ content:""; }

.nav-subsummary--mobile{
  position:relative;
  width:100%;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  font-size:25px;
  letter-spacing:-.02em;
  opacity:.78;
  cursor:pointer;
  user-select:none;
  padding-right:32px;
  padding-left:25px;
}
.nav-subsummary--mobile::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  opacity:.6;
  transition: transform .25s ease, opacity .2s ease;
}
.mobile-menu-nav details[open] > .nav-subsummary--mobile::after{
  transform: translateY(-50%) rotate(45deg);
  opacity:1;
}
.subnav--mobile{
  margin-top:6px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition: max-height .22s ease, opacity .18s ease;
}
.mobile-menu-nav details[open] .subnav--mobile{
  max-height:420px;
  opacity:1;
  pointer-events:auto;
  padding-left:14px;
}


/* Responsive switch */
@media (max-width:1024px){
  .nav-desktop{ display:none !important; }
  .burger{ display:block !important; }
}
@media (min-width:1025px){
  .burger{ display:none !important; }
  .mobile-menu{ opacity:0 !important; pointer-events:none !important; }
}
/* DESKTOP NAV — GRID (anti shift, 900 autorisé) */
/*
.nav-desktop{
  display:grid;
grid-template-columns: repeat(3, 120px);
gap: clamp(12px, 1.6vw, 24px);
justify-content:end;
align-items:center;
height: var(--navH);

  width: min(640px, 58vw);
  justify-self:end;
}

.nav-desktop .nav-item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 0;
}*/
.nav-desktop{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
  height:var(--navH);
  width:auto;
  gap:0;
}

.nav-desktop .nav-item{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.nav-desktop .nav-item > a{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  padding:6px 0;
  white-space:nowrap;
  text-align:right;

  font-size:14px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;

  opacity:.85;
  transition:opacity .05s ease, font-weight .05s ease, letter-spacing .05s ease;
}


.nav-desktop .nav-item > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:100%;
  padding: 6px 8px;
  white-space: nowrap;
  text-align:center;

  font-size:14px;
  font-weight:600;   /* ← voilà le vrai endroit */
  letter-spacing:.14em;
  text-transform:uppercase;

  opacity:.85;       /* sinon avec 600 ça paraît trop light */
  transition: opacity .05s ease, font-weight .05s ease, letter-spacing .05s ease;
}

/* hover 900 sans décaler car la cellule est fixe */
.nav-desktop .nav-item > a:hover{
  opacity:1;
  font-weight:600;
}

/* actif stable */
.nav-desktop .nav-item > a.is-active{
  opacity:1;
  font-weight:900;
  pointer-events:none;
}
@media (min-width:1025px){
  .nav-desktop a.is-active{
    opacity: .35 !important;
  }
}


/* =========================================
   OVERLAY state (au chargement / haut de page)
   JS ajoute body.nav-overlay
========================================= */
body.nav-overlay .site-header{
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(0);
}

/* liens blancs en overlay */
body.nav-overlay .nav-desktop > a,
body.nav-overlay .nav-desktop .nav-parent{
  color:#fff;
}

/* burger blanc en overlay */
body.nav-overlay .burger .line{
  background:#fff;
}

/* logo blanc en overlay (cible l'IMG) */
body.nav-overlay img.brand-logo{
  filter: brightness(0) invert(1);
}
a.brand{
  display:flex;
  align-items:center;
}

/* c’est CE wrapper qui scale */
.brand-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .28s cubic-bezier(.22,.8,.22,1);
  will-change: transform;
}

/* l’image garde son filter (overlay), pas de transform ici */
img.brand-logo{
  height:50px;
  width:auto;
  display:block;
}

/* hover: zoom sur wrapper */
a.brand:hover .brand-wrap{
  transform: scale(1.12);
}
/* =========================================
   MENU OPEN state (mobile) — force “solid”
   JS ajoute body.menu-open
========================================= */
body.menu-open .mobile-menu{
  top: 0; /* le menu couvre TOUT */
}
body.menu-open .mobile-menu-panel{
  padding-top: var(--navH); /* garde la zone nav respirante */
}

/* nav forcée en mode “solid” quand menu ouvert */
body.menu-open .site-header{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* burger noir + logo noir en menu-open */
body.menu-open .burger .line{
  background: rgba(20,20,20,.85);
}
body.menu-open img.brand-logo{
  filter: none !important;
}

/* =========================
   BTN
========================= */
.btn{
  background-color: #fff;
  color: var(--dark);
  font-size: clamp(16px, 1.5vw, 20px);
  text-transform:uppercase;
  font-weight: 600;
  padding:25px 30px;
  border-radius: 10px;
  margin:50px 0;
  transition: background-color .35s ease, color .25s ease, transform .35s cubic-bezier(.22,.8,.22,1);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
}

.btn:hover{
  background-color: rgba(0,0,0,0.45);
  color:#fff;
  transform: translateY(-5px);
}

.cta{
  display: inline-block;
  background: #000;
  color: #fff;
  border-radius: 50px;
}

/* Desktop */
.btn.cta{
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .25s ease;
}
/* Desktop */
.btn.cta:hover{
  color: #000;
  background:var(--green);
  transform: translateY(0);
}
/* Mobile */
@media (max-width: 768px){
  .btn.cta{
    white-space: normal;
  }
}
/* =========================
  6) HERO — services (OPEN DESKTOP)
========================= */

.hero.hero--services{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}


/* ---------- Swiper fond ---------- */

.hero.hero--services .hero-swiper{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero.hero--services .swiper,
.hero.hero--services .swiper-wrapper,
.hero.hero--services .swiper-slide{
  height: 100%;
}

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

/* ---------- Overlay lisibilité ---------- */

.hero.hero--services .hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background: rgba(0,0,0,.38);
}


/* ---------- Contenu centré ---------- */

.hero.hero--services .hero__center{
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  /* ✅ OPEN : vrai padding desktop */
  padding-inline: clamp(24px, 5vw, 90px);
  padding-top: var(--navH);

  text-align: center;
  color: #fff;
  box-sizing: border-box;
}

.hero.hero--services .hero__center-inner{
  /* ✅ OPEN : plus de “container article” */
  width: min(1680px, 96vw);
  max-width: none;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: clamp(14px, 2.2vh, 24px);
}

/* ---------- Typo ---------- */

.hero.hero--services .hero__kicker{
  margin:0;
  font-size: clamp(13px, 1.35vw, 25px);
  font-weight: 600;
  letter-spacing:.42em;
  text-transform:uppercase;
  opacity:.9;
}

.hero.hero--services h1{
  margin:0;

  /* ✅ OPEN : gros titre + largeur contrôlée */
  font-size: clamp(56px, 6.2vw, 118px);
  line-height:.96;
  font-weight:300;

  max-width: 22ch;      /* ouvre (et évite un wrap dégueu) */
  text-wrap: balance;
}

.hero.hero--services .hero__lead{
  margin:0;

  /* ✅ OPEN : texte large mais lisible */
  max-width: 78ch;
  font-weight: 400;
  font-size: clamp(20px, 1.55vw, 30px);
  line-height:1.55;
  opacity:.95;
}

/* ---------- Bouton ---------- */

.hero.hero--services .btn.btn--hero{
  margin-top: clamp(10px, 2vh, 22px);
  width:auto;
  max-width:360px;
  padding:16px 28px;
  white-space:nowrap;
}

/* ---------- Flèche ---------- */

.hero-scroll{
  position:absolute;
  left:50%;
  bottom: clamp(14px, 2.5vh, 26px);
  transform:translateX(-50%);
  z-index:3;

  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  text-decoration:none;
  opacity:.9;
}

.hero-scroll svg{
  width:26px;
  height:26px;
  animation:arrowFloat 1.6s ease-in-out infinite;
}

@keyframes arrowFloat{
  0%,100%{ transform:translateY(0); opacity:.9; }
  50%{ transform:translateY(8px); opacity:1; }
}

/* ---------- Mobile ---------- */

@media (max-width:760px){
  .hero.hero--services .hero__center-inner{
    width: min(720px, 92vw);
  }

  .hero.hero--services h1{
    font-size: clamp(40px, 10vw, 66px);
    max-width: 18ch;
  }

  .hero.hero--services .hero__lead{
    max-width: 52ch;
    font-size: clamp(16px, 4.2vw, 19px);
  }
}



/* =========================
   8) MODA SERVICES — ms-block
   -> on garde ta structure 12 colonnes
   -> on simplifie ms-left (images) : FLEX unique, sans auto-detect
========================= */

.ms-block{
  display:flex;
  align-items:center;
  min-height: calc(100vh - var(--navH));
}

/* texte */
.ms-text{
  max-width: 96ch;
  line-height:1.45;
  padding: 0;

}
.ms-text p{ margin:0 0 10px; }
.ms-text ul{ list-style:none; padding:0; margin: 18px 0 22px; }

.ms-text li{
  position:relative;
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight:300;
  padding-left: 30px;
  margin: 0 0 14px;
}

.ms-text li::before{
  content:"";
  position:absolute;
  left:0;
  top:.2em;
  width:20px;
  height:20px;

  background-color:var(--grey); /* ← LA couleur vient d’ici */

  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;

  opacity:.9;
}




@media (max-width:560px){
  .ms-text{ max-width: 100%; }
}

/* logo bloc */
.ms-picto{
  width: clamp(140px, 5vw, 200px);
  margin: 0;
}
.ms-picto img{ width:100%; height:auto; display:block; }








.ms-container{
  width:100%;
  max-width:1450px;
  margin:0 auto;
  padding:clamp(28px, 5vw, 50px) 4vw;
  display:block;   /* <-- extrêmement important */
}

/* le layout */
.ms-grid-1{
  display:grid ;
  grid-template-columns: 1fr 1.5fr;
  align-items:center;   /* ← centrage vertical */
  gap: 50px;
}

.ms-grid-2{
  display:grid ;
  grid-template-columns: 1fr 1.5fr;
  align-items:center;   /* ← centrage vertical */
  gap: 50px;
}

@media (max-width: 968px){
  .ms-grid-2{
    display:grid ;
    grid-template-columns: 1fr;
    gap:30px;
  }
}

@media (max-width: 968px){
  .ms-grid-2--stack-reverse{
    grid-template-columns:1fr;
  }

  .ms-grid-2--stack-reverse > .ms-text{
    order:1;
  }

  .ms-grid-2--stack-reverse > :not(.ms-text){
    order:2;
  }
}




.ms-block{
  width:100%;
}

.grid-1-img{
  display:grid;
  grid-template-columns: 1fr;
}

.grid-2-img{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* LES BLOCS IMAGES */
.flex-img .ms-item{
  position:relative;
  overflow:hidden;
}

/* l’image remplit sa forme */
.flex-img .ms-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


















/* FULL WIDTH SIMPLE */


.ms-split{
  grid-column: 1 / -1;               /* important si ms-split est dans .ms-container */
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(18px, 2vw, 25px);
  align-items: center;

  width: 100%;
}

.ms-split > *{ min-width:0; } /* évite les débordements chelous */

/* responsive */
@media (max-width: 968px){
  .ms-split{
    grid-template-columns: 1fr;
  }
}


/* =========================
   10) Footer
========================= */
.footer{
  display:flex;
  justify-content:space-around;
  align-items:center;
  background: var(--dark);
  min-height: 400px;
  padding: 26px 0 0;
  color:#fff;
}

.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 15px;
}

.footer-logo{ margin-bottom:10px; height:55px; }

.footer-social{
  display:flex;
  gap:18px;
  margin-top:12px;
}

.footer-social a{
  color:#fff;
  font-size:21px;
  transition: opacity .25s ease, transform .25s ease;
}
.footer-social a:hover{
  opacity:.65;
  transform: translateY(-4px);
}

.footer-copy,
.footer-links{
  font-size:14px;
  font-weight:300;
  letter-spacing: 0;
}
.footer-links{ opacity:.85; }


/* =========================
   12) Interlude / Jarallax (nettoyé)
========================= */
/* ===== Interlude vidéo ===== */
.ms-interlude{
  position: relative;
  height: 55vh;
  min-height: 260px;
  overflow: hidden;
  background:#000; /* sécurité si rien ne charge (rare) */
}

/* jarallax fallback image */
.ms-interlude .jarallax-img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
}

/* overlay (assombrit proprement, pas d'usine à gaz) */
.ms-interlude__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.28);
  z-index:1;
  pointer-events:none;
}

.ms-interlude__content{
  position: relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.ms-interlude__content p{
  margin:0;
  font-weight:300;
  font-size: clamp(25px,2.65vw,45px);
  color:#fff;
  text-align:center;
}

#ms section.ms-band{
  padding:0;
}



.ms-image-line{
  width:100%;              /* IMPORTANT : empêche le shrink */
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr)); /* évite des colonnes bizarres */
  overflow:hidden;
  gap: 0;
}

@media (max-width: 768px){
  .ms-image-line{
    grid-template-columns:repeat(2, 1fr); /* évite des colonnes bizarres */
  }
}
@media (max-width: 768px){
  .hide-xs{
    display: none;
  }
}


.ms-img{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;   /* ← chaque case devient un carré parfait */
}

.ms-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}


/* =========================
   13) MASK SHAPES (décoratifs)
   IMPORTANT: on NE FIXE PLUS la taille ici (pas d'aspect-ratio 1/1).
   Les tailles viennent de .ms-img-small / .ms-img-large / etc.
========================= */
.mask-shape,
.mask-shape-2,
.mask-shape-3,
.mask-shape-4,
.mask-shape-5,
.mask-shape-6,
.mask-shape-7
{
  position: relative;
  width: 100%;
  overflow: hidden;

  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;

  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;

  transform: translateZ(0);
}
.mask-shape-1,
.mask-shape-2,
.mask-shape-3,
.mask-shape-4,
.mask-shape-5,
.mask-shape-6,
.mask-shape-7{
  position:relative;
  overflow:hidden;

  /* LA CLÉ : une boîte stable */
  aspect-ratio: 4 / 5;     /* ajuste */
  /* option: min-height si tu veux */
  /* min-height: 320px; */
}
.mask-shape-1 img,
.mask-shape-2 img,
.mask-shape-3 img,
.mask-shape-4 img,
.mask-shape-5 img,
.mask-shape-6 img,
.mask-shape-7 img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  display:block;
}

/* URL des shapes */
.mask-shape-1  { -webkit-mask-image: url("../img/shapes/shape-1.svg"); mask-image: url("../img/shapes/shape-1.svg"); }
.mask-shape-2 { -webkit-mask-image: url("../img/shapes/shape-2.svg"); mask-image: url("../img/shapes/shape-2.svg"); }
.mask-shape-3 { -webkit-mask-image: url("../img/shapes/shape-3.svg"); mask-image: url("../img/shapes/shape-3.svg"); }
.mask-shape-4 { -webkit-mask-image: url("../img/shapes/shape-4.svg"); mask-image: url("../img/shapes/shape-4.svg"); }
.mask-shape-5 { -webkit-mask-image: url("../img/shapes/shape-5.svg"); mask-image: url("../img/shapes/shape-5.svg"); }
.mask-shape-6 { -webkit-mask-image: url("../img/shapes/shape-6.svg"); mask-image: url("../img/shapes/shape-6.svg"); }
.mask-shape-7 { -webkit-mask-image: url("../img/shapes/shape-7.svg"); mask-image: url("../img/shapes/shape-7.svg"); }






/* === Return to Top === */
#return-to-top {
    position: fixed;
    bottom: 50px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: var(--grey);
    border-radius: 50%;
    display: none;
    transition: all .3s ease;
    z-index: 10;
}

#return-to-top:hover {
    background-color: var(--dark-grey);
}

#return-to-top i {
    color: #fff;
    position: relative;
    left: 9px;
    top: 10px;
    font-size: 22px;
    transition: all .3s ease;
}

#return-to-top:hover i {
    top: 5px;
}

@media (max-width: 768px) {
    #return-to-top {
        right: 19px;
    }

    #return-to-top:hover i {
        top: 10px;
    }
}



#section-next{
  position: relative;
  overflow: hidden;
}

#section-next .ms-container{
  position: relative;
  z-index: 5;
}

.ms-underlogo{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}




/*  LOGO/IMG SOUS LES SECTIONS  */
.ms-block, .ms-hero, .ms-interlude{ position:relative; overflow:hidden; }

.ms-underlogo{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}

.ms-underlogo__img{
  position:absolute;
  left:0;
  top:50%;
  height:  105vh;

  width:auto;
  max-width:none;
  opacity:1;
  will-change: transform;

  /* ✅ le mouvement vient de --x */
  --x: -200px;
  transform: translate3d(var(--x), -50%, 0);
}



/*
 * ----------------------------------------
 * INTRO MODA SERVICES
 * ----------------------------------------
 */


 html.ms-lock, body.ms-lock { overflow: hidden; }

 .ms-intro{
   position: fixed;
   inset: 0;
   z-index: 99999;
   background: transparent;
   pointer-events: none;
   overflow: hidden;
 }

 .ms-intro__stage{
   position: relative;
   width: 100%;
   height: 100%;
 }
 .ms-intro__panel--top{ bottom: calc(50% - 1px); }
 .ms-intro__panel--bot{ top:    calc(50% - 1px); }
 /* rideaux */
 .ms-intro__panel{
   position: absolute;
   left: 0;
   right: 0;
   background: #fff;
   will-change: transform;
 }

 .ms-intro__panel--top{
   top: 0;
   height: 50vh;
 }

 .ms-intro__panel--bot{
   bottom: 0;
   height: 50vh;
 }

 /* couture centrale */
 .ms-intro__seam{
   position:absolute;
   left:0; right:0;
   top:50%;
   height:1px;
   background: rgba(255,255,255,.18);
   transform: translateY(-.5px);
   opacity: 0;
 }

 /* logo */
 .ms-intro__logo{
   position: absolute;
   left: 50%;
   top: 50%;
   height: 150px;
   width: auto;
   transform: translate(-50%, -50%) scale(0);
   transform-origin: center;
   will-change: transform, opacity;
 }

 .ms-underlogo{ z-index:-1; }
 .ms-block, .ms-hero, .ms-interlude{ position:relative; z-index:0; }




 /* CAROUSEL BANDE IMAGES */
 .ms-band{
   padding:0 !important;
   margin:0 !important;
   min-height:0 !important;
   height:auto !important;
   display:block !important;
 }

 /* viewport */
 .marquee{
   width:100%;
   overflow:hidden;
 }

 /* ruban */
 .marquee__rail{
   display:flex;
   flex-wrap:nowrap;
   will-change:transform;
 }

 /* 4 visibles desktop */
 .marquee__item{
   flex:0 0 25vw;
   height:25vw;
   position:relative;
   overflow:hidden;
 }
 @media (min-width: 1024px){
   .marquee__item{
     flex-basis:16.6667vw; /* 100/6 */
     height:16.6667vw;     /* carré */
   }
 }
 /* 2 visibles mobile */
 @media(max-width:768px){
   .marquee__item{
     flex-basis:50vw;
     height:50vw;
   }
 }

 .marquee__item img{
   position:absolute;
   inset:0;
   width:100%;
   height:100%;
   object-fit:cover;
   pointer-events:none;
 }





 /* HUBSPOT MODAL - CLEAN */
 .hs-modal{
   position:fixed;
   inset:0;
   z-index:9999;

   display:flex;
   align-items:center;
   justify-content:center;

   opacity:0;
   visibility:hidden;
   pointer-events:none;
   transition:opacity .25s ease, visibility .25s ease;
 }

 .hs-modal.is-open{
   opacity:1;
   visibility:visible;
   pointer-events:auto;
 }

 /* overlay DERRIÈRE le panel */
 .hs-modal__overlay{
   position:absolute;
   inset:0;
   background:rgba(0,0,0,.72);
 }

 /* le panel AU-DESSUS de l’overlay */
 .hs-modal__panel{
   position:relative;
   z-index:1;

   width:min(780px, calc(100% - 28px));
   max-height:min(84vh, 1000px);
   overflow:auto;
   -webkit-overflow-scrolling:touch;

   background:#fff;
   border-radius:10px;
   padding: 10px;

   box-shadow: 0 30px 120px rgba(0,0,0,.35);
 }

 /* bouton fermer DANS le panel (pas en haut de l’écran) */
 .hs-modal__close{
   position:absolute;
   top:16px;
   right:10px;

   width:34px;
   height:34px;

   border:0;
   background:transparent;
   cursor:pointer;

   display:flex;
   align-items:center;
   justify-content:center;
 }

 /* les 2 traits de la croix */
 .hs-modal__close::before,
 .hs-modal__close::after{
   content:"";
   position:absolute;
   width:22px;
   height:2px;
   background:#111;
   transition:transform .25s ease, opacity .2s ease;
 }

 /* orientation */
 .hs-modal__close::before{
   transform:rotate(45deg);
 }
 .hs-modal__close::after{
   transform:rotate(-45deg);
 }

 /* hover subtil */
 .hs-modal__close:hover::before{
   transform:rotate(45deg) scaleX(1.15);
 }
 .hs-modal__close:hover::after{
   transform:rotate(-45deg) scaleX(1.15);
 }

 .hs-modal .hs-form-frame{
   width:100%;
   margin:0 auto;
 }

 .hs-modal iframe{
   width:100% !important;
   max-width:100% !important;
   border:0 !important;
   display:block;
 }

 /* mobile */
 @media (max-width:700px){
   .hs-modal__panel{
     padding:22px 18px 18px;
     border-radius:18px;
   }
 }
 .bg-boxes{
   display:grid;
   justify-content:start;
   row-gap:60px;

   /* colonne = largeur du plus large, MAIS plafonnée */
   grid-template-columns: fit-content(min(740px, 100%));
 }

 .bg-box{
   background:#fff;
   border-radius:20px;
   padding:30px 26px 20px;
   position:relative;
   z-index:1;

   /* IMPORTANT */
   width:100%;
   max-width:none;
 }

 /* la vraie pointe */
 .bg-box::after{
   content:"";
   position:absolute;

   bottom:-18px;
   left: 30px;

   width:34px;
   height:18px;
   background:#8AF72A;
   background:#fff;
   /* triangle parfait */
   clip-path:polygon(50% 100%, 0 0, 100% 0);

   z-index:0;
 }

.ms-text .bg-box li{
  position:relative;
  padding-left:34px;
}

.ms-text .bg-box li::before {
  content:"";
  position:absolute;
  left:0;
  top:.25em;
  width:20px;
  height:20px;

  background-color:var(--heavy-green);

  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;

  opacity:1;
}

.bg-box-outlined{
  border: 1px dashed #A1A1A1;
  background: rgba(290,290,290,0.55);
  border-radius:20px;
  padding: 0 30px 20px 30px;
  overflow:hidden;
  z-index:1;

  /* IMPORTANT */
  width:100%;
  max-width:none;
}

.bg-box-outlined p{
  font-weight: 400;
}

.bg-box-outlined li::before{
  content:"";
  position:absolute;
  left:0;
  top:.25em;
  width:20px;
  height:20px;

  background-color:var(--heavy-green);

  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;

  opacity:1;
}



.fx-scramble{
  display:inline-block;
  white-space:nowrap;
}

/* la section */
.ms-block{
  position:relative;
}
/* ================================
   LOGO: bas du VP -> monte -> sticky
================================ */

/* IMPORTANT: sticky doit respirer */
.ms-block{
  position: relative !important;
  overflow: visible !important; /* écrase ton overflow:hidden global */
}


.ping {
	-webkit-animation: ping 0.8s ease-in-out infinite both;
	        animation: ping 0.8s ease-in-out infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-2-23 22:39:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation ping
 * ----------------------------------------
 */
@-webkit-keyframes ping {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0.8;
  }
  80% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(2.2);
            transform: scale(2.2);
    opacity: 0;
  }
}