/* MHM CONSTRUCT — pages services et réalisations (services, 4 pages bardage, aménagement extérieur, réalisations).
   Mise en scène reprise de Nemelec (en-tête vivant, onglets, cartes-carrousels en relief, bandeau d'appel vivant)
   et de Com'in Clean (cartes qui entrent en 3D, étapes reliées), aux couleurs de MHM : or #bea677 sur fond sombre.
   Aucun texte n'est écrit ici. À charger APRÈS /assets/eco/css/site.css. Préfixe : ms-.
   Tout ce qui est caché l'est par une classe (ms-pre, ms-hide) posée par services.js juste avant d'observer :
   sans JS, tout reste visible. Pas de reflet qui balaie les photos (règle V3) : seule la brillance des boutons est gardée.
   Transform / opacity uniquement. */

.ms-page{
  --ms-ease:cubic-bezier(.2,.8,.2,1);
  --ms-spring:cubic-bezier(.34,1.56,.64,1);
  /* or clair pour les fils et dégradés posés sur le fond noir */
  --ms-clair:#e3d3ac;
}

/* barre de progression de lecture : un peu de lumière */
.ms-page [data-progress]{box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}

/* ---------- rythme vertical (80 px en grand écran, 56 px sur mobile) ---------- */
@media (min-width:768px){.ms-page section[style*="padding:100px 24px"]{padding:76px 24px 84px!important}}
@media (max-width:767px){.ms-page section[style*="padding:100px 24px"]{padding:44px 16px 52px!important}}

/* ---------- HERO : titre mot par mot, photo qui respire, particules dorées ---------- */
.ms-hero-bg{scale:1.12;will-change:transform,translate;transition:translate .5s ease-out}
.ms-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.ms-hw{display:inline-block}
.ms-hw>i{display:inline-block;font-style:normal;transition:opacity .7s var(--ms-ease),transform .85s var(--ms-ease),filter .7s ease;transition-delay:calc(var(--i,0)*80ms + .15s)}
.ms-pre .ms-hw>i{opacity:0;transform:translateY(.55em);filter:blur(6px)}
/* fil doré sous le titre : se trace une fois, à l'arrivée */
.ms-fil{display:block;width:84px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--ms-clair));transform-origin:left center;transition:transform 1s var(--ms-ease) .6s}
.ms-pre .ms-fil{transform:scaleX(0)}
/* fil d'Ariane, sur-titre et chapeau : entrent avant le titre */
.ms-hero-in>*:not(h1):not(.ms-fil){transition:opacity .8s ease .05s,transform .8s var(--ms-ease) .05s}
.ms-pre .ms-hero-in>*:not(h1):not(.ms-fil){opacity:0;transform:translateY(14px)}

/* ---------- onglets : « Toutes les réalisations » + un par service, page courante marquée ---------- */
.ms-onglets{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;padding:0;list-style:none}
.ms-onglets a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:40px;background:var(--carte);color:var(--titre);border:1px solid var(--bord);
  font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;transition:background .25s,color .25s,border-color .25s,transform .4s var(--ms-spring),box-shadow .3s}
.ms-onglets a:hover{background:color-mix(in srgb,var(--accent) 14%,var(--carte));border-color:color-mix(in srgb,var(--accent) 60%,var(--bord));transform:translateY(-3px);box-shadow:0 12px 24px -16px color-mix(in srgb,var(--accent) 80%,#000)}
/* page courante : or plein, texte noir (le blanc du thème ne fait que 2,3:1 sur l'or ; #0d0d0d sur #bea677 = 8,4:1) */
.ms-onglets a[aria-current="page"]{background:var(--accent);color:#0d0d0d;border-color:var(--accent);box-shadow:0 10px 22px -14px color-mix(in srgb,var(--accent) 85%,#000)}
.ms-onglets a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ms-onglets.ms-hide li{opacity:0;transform:translateY(16px)}
.ms-onglets li{transition:opacity .6s ease,transform .7s var(--ms-ease);transition-delay:calc(var(--i,0)*70ms)}

/* ---------- CARTES-CARROUSELS : photos seules, entrée 3D, relief au survol, flèches nettes ---------- */
.ms-page .grille-galeries>[data-reveal]{transition:opacity .85s ease,transform .95s var(--ms-ease),filter .85s ease}
.ms-page .grille-galeries>[data-reveal].is-hidden{opacity:0;filter:blur(6px);transform:perspective(900px) translateY(56px) rotateX(-14deg) scale(.95);transform-origin:50% 100%}
.ms-page .grille-galeries .mini-gallery{transform-style:preserve-3d;will-change:transform;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.8);
  transition:transform .6s var(--ms-ease),box-shadow .45s,border-color .35s}
.ms-page .grille-galeries .mini-gallery:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--bord));box-shadow:0 30px 56px -28px rgba(0,0,0,.9)}
.ms-page .grille-galeries .mini-gallery.ms-tilting{transition:transform .08s linear,box-shadow .3s,border-color .35s}
/* zoom lent de la photo au survol (pas de reflet) */
.ms-page .mini-gallery-track img{transition:transform 1.1s var(--ms-ease)}
.ms-page .mini-gallery:hover .mini-gallery-track img{transform:scale(1.045)}
/* loupe : indique que la photo s'agrandit au clic */
.ms-zoom{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(13,13,13,.66);color:#fff;border:1px solid rgba(255,255,255,.28);pointer-events:none;
  opacity:0;transform:scale(.7);transition:opacity .3s,transform .45s var(--ms-spring)}
.ms-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ms-page .mini-gallery:hover .ms-zoom,.ms-page .mini-gallery:focus-within .ms-zoom{opacity:1;transform:none}
/* flèches : disques blancs, or au survol (texte noir sur l'or) */
.ms-page .mini-gallery [data-prev],.ms-page .mini-gallery [data-next]{
  width:42px!important;height:42px!important;background:#fff!important;color:#0d0d0d!important;border:0!important;font-size:22px!important;line-height:1;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7);transition:background .25s,color .25s,transform .35s var(--ms-spring),box-shadow .25s}
.ms-page .mini-gallery [data-prev]{left:12px!important}
.ms-page .mini-gallery [data-next]{right:12px!important}
.ms-page .mini-gallery [data-prev]:hover,.ms-page .mini-gallery [data-next]:hover{background:var(--accent)!important;color:#0d0d0d!important;transform:translateY(-50%) scale(1.1)!important}
.ms-page .mini-gallery [data-prev]:focus-visible,.ms-page .mini-gallery [data-next]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* points : au-delà de 7 photos le thème affiche un compteur « 03 / 11 » ; on le remplace par des points (règle carrousels : photos, flèches, points) */
.ms-page .mini-gallery [data-dots][data-compteur]{display:none!important}
.ms-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:5px;align-items:center;background:rgba(0,0,0,.45);border-radius:20px;padding:6px 10px;line-height:1}

/* ---------- MOBILE : les cartes restent empilées en une colonne verticale (grille du thème), seuls les onglets défilent au doigt ---------- */
@media (max-width:599px){
  .ms-page .grille-galeries>[data-reveal].is-hidden{transform:translateY(34px) scale(.97)}
  .ms-page .mini-gallery [data-prev],.ms-page .mini-gallery [data-next]{width:40px!important;height:40px!important}
  .ms-zoom{display:none}
  .ms-onglets{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 24px;padding:2px 16px 8px;scrollbar-width:none}
  .ms-onglets::-webkit-scrollbar{display:none}
  .ms-onglets li{flex:none}
  .ms-onglets a{padding:10px 16px;font-size:13.5px;white-space:nowrap}
}
/* écrans tactiles : pas de zoom au survol */
@media (hover:none){
  .ms-page .mini-gallery:hover .mini-gallery-track img{transform:none}
}

/* ---------- CARTES SERVICES / PRESTATIONS (hub, aménagement extérieur) : entrée pivotante, relief au survol ---------- */
.ms-grid{perspective:1100px}
.ms-cell.ms-pre{opacity:0!important;transform:perspective(900px) translateY(40px) rotateX(-24deg)!important;transition:none!important}
.ms-cell.ms-go{transition:none!important;transform-origin:50% 100%;animation:ms-cell-in .85s var(--ms-ease) backwards;animation-delay:var(--ms-d,0ms)}
.ms-cell>.hv23.ms-tilting{transition:transform .08s linear,box-shadow .3s!important;box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}
.ms-cell>.hv23{transition:transform .35s var(--ms-ease),box-shadow .35s,border-color .35s}
.ms-cell>.hv23:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--bord))}
/* numéro de la carte et pastille flèche : petit rebond à l'arrivée */
.ms-cell.ms-go>.hv23>div:last-child>span:first-child{display:inline-block;animation:ms-bounce .8s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--ms-d,0ms) + 380ms)}
.ms-cell.ms-go>.hv23>div:last-child>span:last-child>span{animation:ms-bounce .8s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--ms-d,0ms) + 480ms)}

/* ---------- ÉTAPES (« 4 étapes simples ») : pastilles reliées par un fil d'or qui se trace ---------- */
.ms-steps{position:relative}
.ms-seg{position:absolute;height:2px;border-radius:2px;pointer-events:none;z-index:2;transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),var(--ms-clair));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 55%,transparent);transform:scaleX(1);
  transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ms-seg.ms-pre{transform:scaleX(0)}
.ms-seg-track{position:absolute;height:0;border-top:2px dashed rgba(255,255,255,.18);pointer-events:none;z-index:1}
.ms-step>.hv09>span:first-child{position:relative;transition:opacity .5s,filter .5s,box-shadow .5s}
.ms-step.ms-dim>.hv09>span:first-child{opacity:.38;filter:grayscale(.7)}
.ms-step.ms-lit>.hv09>span:first-child{animation:ms-glow 1.1s ease-out 1}
.ms-step.ms-lit>.hv09>span:first-child::after{content:"";position:absolute;inset:-4px;border-radius:18px;border:2px solid var(--accent);
  pointer-events:none;animation:ms-ring 1.1s ease-out 1 both}
.ms-step.ms-go>.hv09>span:first-child{animation:ms-bounce .8s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--ms-d,0ms) + 380ms)}
.ms-step.ms-lit.ms-go>.hv09>span:first-child{animation:ms-bounce .8s cubic-bezier(.3,1.4,.5,1) backwards,ms-glow 1.1s ease-out 1}

/* ---------- BANDEAU D'APPEL : la vraie photo, qui se pose à l'arrivée ; particules dorées sur la partie sombre ---------- */
.ms-cta .ms-kb{transition:transform 2.6s var(--ms-ease)}
.ms-cta.is-hidden .ms-kb{transform:scale(1.14)}
.ms-cta-sparks{position:absolute;top:0;bottom:0;right:0;left:42%;width:58%;height:100%;pointer-events:none;display:block}
.ms-cta .hv20,.ms-cta .hv21b{position:relative;overflow:hidden;isolation:isolate}
.ms-cta .hv20::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-140%) skewX(-20deg);transition:transform .75s var(--ms-ease)}
.ms-cta .hv20:hover::after{transform:translateX(260%) skewX(-20deg)}
html .ms-cta .hv20{transition:transform .5s var(--ms-spring),background .2s,box-shadow .25s,color .2s,border-color .2s!important}
html .ms-cta .hv20:hover{transform:translateY(-3px) scale(1.045)}
html .ms-cta .hv20:active{transform:scale(.97)}
@media (max-width:640px){
  /* la photo se voit en haut, le texte se pose sur le noir en dessous (le thème noyait la photo sous 84 % de noir) */
  .ms-page .ms-cta{display:block;min-height:0;border-radius:24px}
  .ms-page .ms-cta>.ms-ov{background:linear-gradient(180deg,rgba(var(--overlay-rgb),.05) 0,rgba(var(--overlay-rgb),.35) 26%,rgba(var(--overlay-rgb),.94) 52%,rgb(var(--overlay-rgb)) 66%)!important}
  .ms-page .ms-cta>.ms-cta-in{margin-left:0!important;max-width:none!important;padding:176px 22px 30px!important}
  .ms-cta-sparks{left:0;width:100%}
}

@keyframes ms-cell-in{from{opacity:0;transform:perspective(900px) translateY(40px) rotateX(-24deg)}to{opacity:1;transform:perspective(900px) translateY(0) rotateX(0)}}
@keyframes ms-bounce{0%{transform:scale(.3)}55%{transform:scale(1.28)}75%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes ms-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}100%{box-shadow:0 0 0 16px color-mix(in srgb,var(--accent) 0%,transparent)}}
@keyframes ms-ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}}

@media (max-width:760px){.ms-seg,.ms-seg-track{display:none}.ms-step.ms-dim>.hv09>span:first-child{opacity:1;filter:none}}

/* ---------- mouvement réduit : tout est coupé ---------- */
@media (prefers-reduced-motion:reduce){
  .ms-hero-bg{scale:1.04;transition:none!important}
  .ms-hw>i,.ms-fil,.ms-hero-in>*,.ms-onglets li,.ms-page .grille-galeries>[data-reveal],.ms-page .grille-galeries .mini-gallery,.ms-page .mini-gallery-track img,.ms-zoom,.ms-cta .ms-kb,.ms-cell,.ms-step>.hv09>span:first-child,.ms-seg{transition:none!important;animation:none!important}
  .ms-pre .ms-hw>i,.ms-pre .ms-hero-in>*:not(.ms-fil),.ms-onglets.ms-hide li{opacity:1!important;transform:none!important;filter:none!important}
  .ms-pre .ms-fil{transform:none!important}
  .ms-cell.ms-pre{opacity:1!important;transform:none!important}
  .ms-page .grille-galeries>[data-reveal].is-hidden{filter:none;transform:none}
  .ms-page .mini-gallery:hover .mini-gallery-track img{transform:none}
  .ms-cta.is-hidden .ms-kb{transform:none}
  .ms-sparks,.ms-cta-sparks,.ms-zoom,.ms-seg,.ms-seg-track{display:none!important}
  .ms-step.ms-dim>.hv09>span:first-child{opacity:1;filter:none}
  .ms-cta .hv20::after{display:none}
  html .ms-cta .hv20:hover{transform:none}
}