/* page Services — composants créatifs */
html,body{overflow-x:clip}
.bar{display:inline-flex;align-items:center;height:.56em;vertical-align:-.02em;margin:0 .1em;color:currentColor}
.bar svg{height:100%;width:auto;fill:currentColor}
.capmarq{overflow:hidden;padding:14px 0;margin-top:clamp(22px,4vw,52px);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.capmarq__t{display:flex;width:max-content;animation:capm 32s linear infinite}
@media(hover:hover){.capmarq:hover .capmarq__t{animation-play-state:paused}}
.capmarq b{font-family:var(--display);font-weight:500;font-size:clamp(16px,2.1vw,26px);letter-spacing:-.01em;padding:0 28px;color:var(--ink);display:inline-flex;align-items:center;gap:28px}
.capmarq b::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent)}
@keyframes capm{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.capmarq__t{animation:none}}

.sblock{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(54px,7vw,120px) var(--gut);border-top:1px solid var(--line)}
@media(max-width:860px){.sblock{grid-template-columns:1fr;gap:26px;padding-block:clamp(48px,9vw,72px)}}
.sblock--rev .sblock__media{order:2}
@media(max-width:860px){.sblock--rev .sblock__media{order:0}}
.sblock__media{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--panel)}
.sblock__media img,.sblock__media video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--eo)}
.sblock:hover .sblock__media img,.sblock:hover .sblock__media video{transform:scale(1.04)}
.sblock__num{font-style:italic;color:var(--m1);font-size:16px;margin-bottom:16px}
.sblock h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.8vw,62px);line-height:.98;letter-spacing:-.03em}
.sblock .lead{margin-top:18px;font-size:16px;line-height:1.65;color:var(--m2);max-width:46ch}
.sblock .tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px}
.sblock .tags span{font-size:12px;color:var(--m3);border:1px solid var(--line2);border-radius:100px;padding:7px 14px;transition:.3s var(--eo)}
.sblock .tags span:hover{border-color:var(--ink);color:var(--ink)}
.sblock .btn{margin-top:26px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg);padding:clamp(24px,3vw,40px);min-height:210px;display:flex;flex-direction:column}
.step .sn{font-style:italic;color:var(--m1);font-size:clamp(30px,4vw,52px);line-height:1}
.step h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,25px);margin:auto 0 10px;letter-spacing:-.01em}
.step p{font-size:13.5px;color:var(--m2);line-height:1.6}

/* bande d'images animée (punch) */
.srowm{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.srowm__t{display:flex;gap:clamp(14px,1.8vw,26px);width:max-content;align-items:center;padding:clamp(28px,4vw,56px) 0;animation:capm 50s linear infinite}
@media(hover:hover){.srowm:hover .srowm__t{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.srowm__t{animation:none}}
.smc{flex:0 0 auto;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.14);background:var(--panel)}
.smc img,.smc video{width:100%;height:100%;object-fit:cover;display:block}
.smc.a{width:clamp(200px,22vw,320px);height:clamp(160px,18vw,240px);transform:rotate(-3deg)}
.smc.b{width:clamp(150px,15vw,210px);height:clamp(200px,22vw,300px);transform:rotate(2deg)}
.smc.c{width:clamp(240px,26vw,380px);height:clamp(170px,19vw,250px);transform:rotate(2.5deg)}
.smc.d{width:clamp(160px,16vw,220px);height:clamp(160px,16vw,220px);transform:rotate(-4deg)}

/* médaillon (2e image) sur les blocs services */
.sblock__media{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:visible;background:transparent}
.sblock__media .m0{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:var(--panel)}
.sblock__media .m0 img,.sblock__media .m0 video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--eo)}
.sblock:hover .m0 img,.sblock:hover .m0 video{transform:scale(1.04)}
.sblock__inset{position:absolute;right:-5%;bottom:-9%;width:40%;aspect-ratio:1;border-radius:16px;overflow:hidden;z-index:2;
  box-shadow:0 26px 54px rgba(0,0,0,.24);border:5px solid var(--bg);transform:rotate(-3deg);transition:transform .6s var(--eo)}
.sblock__inset img{width:100%;height:100%;object-fit:cover}
.sblock:hover .sblock__inset{transform:rotate(0)}
.sblock--rev .sblock__inset{right:auto;left:-5%;transform:rotate(3deg)}
.sblock--rev:hover .sblock__inset{transform:rotate(0)}
@media(max-width:560px){.sblock__inset{width:36%;right:-3%;bottom:-7%}.sblock--rev .sblock__inset{left:-3%}}

/* CARTES EMPILÉES plein écran (sticky stack) */
.stack{position:relative;margin-top:100px}
.scard{position:sticky;top:0;min-height:100svh;background:var(--bg);border-radius:24px 24px 0 0;box-shadow:0 -24px 60px rgba(0,0,0,.13);display:flex;overflow:hidden}
.scard::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;background:#fff;opacity:calc(var(--dim,0)*.18)}
.scard__in{transform:scale(calc(1 - var(--dim,0)*.03));transform-origin:top center}
.scard:first-child{box-shadow:none;border-radius:0}
.scard:first-child::after{display:none}
.scard:first-child .scard__in{transform:none}
.scard__in{width:100%;min-height:100svh;padding:clamp(40px,5vh,50px) var(--gut) clamp(34px,5vh,56px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px)}
.scard__num{align-self:start;font-family:var(--display);font-weight:400;font-size:clamp(120px,19vw,300px);line-height:.74;letter-spacing:-.05em;color:var(--ink)}
.scard__r{display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(20px,3vw,40px);min-width:0;max-width:min(600px,100%);margin-left:auto}
.scard__bottom{margin-top:auto}
.scard__top{display:block}
.scard__top .eye{font-size:13px;color:var(--m2);margin-bottom:clamp(10px,1.4vw,16px)}
.scard__top h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.2vw,42px);line-height:1.0;letter-spacing:-.02em;max-width:20ch}
.scard__media{width:min(100%,720px);aspect-ratio:16/9;max-height:40vh;border-radius:16px;overflow:hidden;background:#0e0e0e}
.scard__media img,.scard__media video{width:100%;height:100%;object-fit:cover;display:block}
.scard__bottom hr{border:none;border-top:1px solid var(--line);margin:0 0 clamp(18px,2.4vw,28px)}
.scard__caps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.scard__caps ul{list-style:none}
.scard__caps li{font-size:15px;color:var(--m1);padding:5px 0;transition:color .3s var(--eo),padding-left .3s var(--eo);cursor:pointer}
.scard__caps li:hover{color:var(--ink);padding-left:6px}
.scard__media .capimg{transition:opacity .2s var(--eo),transform 1.2s var(--eo)}
@media(max-width:560px){.scard__caps{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
  .scard{position:static;min-height:0;box-shadow:none;border-radius:0}
  .scard::after{display:none}.scard__in{transform:none!important}
  .scard__in{grid-template-columns:1fr;min-height:0;gap:16px;padding:clamp(52px,9vw,76px) var(--gut)}
  .scard__num{font-size:clamp(78px,22vw,150px)}
  .scard__r{gap:18px;justify-content:flex-start;max-width:none;margin-left:0}.scard__media{width:100%;aspect-ratio:16/10;max-height:none}
  .scard__top{display:block}.scard__top .eye{margin-bottom:8px}
}


/* descriptions des savoir-faire (survol) */
.scard__caps li{cursor:default}
.scard__l{display:flex;flex-direction:column;gap:clamp(20px,3.4vh,36px);align-self:stretch;min-width:0}
.scard__desc{margin-top:clamp(16px,5vh,56px);max-width:clamp(250px,24vw,370px);font-size:clamp(16px,1.5vw,20px);font-weight:500;line-height:1.55;color:var(--ink)}
@media(max-width:880px){.scard__desc{max-width:none;font-size:15.5px}}
.scard__desc span{display:inline-block;opacity:.45;transition:opacity .3s var(--eo),transform .3s var(--eo)}
.scard__desc.on span{opacity:1}
.scard__desc.flip span{opacity:0;transform:translateY(4px);transition:none}
/* lien vers la page service détaillée */
.scard__more{display:inline-block;margin-top:clamp(12px,1.4vw,18px);font-size:14px;color:var(--ink);border-bottom:1px solid var(--line2);padding-bottom:2px;transition:border-color .3s}
.scard__more:hover{border-color:var(--accent)}
/* H1 plus long (mots recherchés) : un cran plus petit et plus large pour tenir en 2-3 lignes */
@media(min-width:761px){.phead h1{font-size:clamp(44px,6.4vw,104px);max-width:22ch}}