/* TERRA'PIET — lot Services.
   Structure et mouvements repris des pages services V3 de Nemelec, adaptés au fond noir
   (30/10/2026) et à l'accent orange Terra'Piet. Aucun reflet ne traverse les photos. */

.tts-page{
  --tts-ease:cubic-bezier(.2,.8,.2,1);
  --tts-spring:cubic-bezier(.34,1.56,.64,1);
  --tts-clair:#ffd2b0;
  --tts-encre:#24150c;
  overflow-x:clip;
}

.tts-page [data-progress]{box-shadow:0 0 12px rgba(232,116,30,.52)}
.tts-page [style*="background:var(--accent)"][style*="color:var(--sur-accent)"]{color:var(--tts-encre)!important}

/* Rythme vertical du modèle Nemelec. */
@media (min-width:768px){
  .tts-page section[style*="padding:100px 24px"]{padding:76px 24px 84px!important}
}
@media (max-width:767px){
  .tts-page section[style*="padding:100px 24px"]{padding:44px 16px 52px!important}
  .tts-page .grille-services-accueil{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:18px!important;padding:0!important;margin:0!important;scroll-snap-type:none!important}
  .tts-page .grille-services-accueil>div{min-width:0;flex:auto}
}

/* Bandeau photo de service. */
.tts-page .tts-hero{min-height:clamp(360px,48vw,560px)!important;isolation:isolate}
.tts-page .tts-hero-bg{scale:1.08;will-change:transform,translate;transition:translate .5s ease-out}
.tts-page .tts-hero::after{content:"";position:absolute;inset:auto 0 0;height:6px;background:linear-gradient(90deg,var(--accent-fonce),var(--accent),#f5b171);z-index:3}
.tts-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block;z-index:1}
.tts-page .tts-hero>div:last-child{z-index:2}
.tts-page .tts-hero [style*="color:var(--accent-texte)"]{color:var(--tts-clair)!important}
.tts-hw{display:inline-block}
.tts-hw>i{display:inline-block;font-style:normal;transition:opacity .7s var(--tts-ease),transform .85s var(--tts-ease),filter .7s ease;transition-delay:calc(var(--i,0)*80ms + .15s)}
.tts-pre .tts-hw>i{opacity:0;transform:translateY(.55em);filter:blur(6px)}
.tts-fil{display:block;width:84px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--tts-clair));transform-origin:left center;transition:transform 1s var(--tts-ease) .6s}
.tts-pre .tts-fil{transform:scaleX(0)}
.tts-hero-in>*:not(h1):not(.tts-fil){transition:opacity .8s ease .05s,transform .8s var(--tts-ease) .05s}
.tts-pre .tts-hero-in>*:not(h1):not(.tts-fil){opacity:0;transform:translateY(14px)}

/* Bloc éditorial court : il conserve les textes de la base mais les traite comme une signature métier. */
.tts-page .tts-intro{position:relative;padding-top:34px!important;padding-bottom:34px!important;background:var(--fond-2)!important}
.tts-page .tts-intro>div{position:relative;display:flex;align-items:center;gap:18px;padding:22px 24px;border:1px solid var(--bord);border-left:5px solid var(--accent);border-radius:18px;background:var(--carte);box-shadow:0 18px 42px -34px rgba(0,0,0,.9)}
.tts-page .tts-intro>div::before{content:"";width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:linear-gradient(145deg,var(--accent),var(--accent-fonce));box-shadow:0 10px 22px -12px rgba(197,98,25,.8)}
.tts-page .tts-intro>div::after{content:"";position:absolute;left:38px;top:34px;width:13px;height:13px;border:3px solid #fff;border-radius:50%;box-sizing:border-box}
.tts-page .tts-intro p{margin:0!important;color:var(--texte)!important;line-height:1.7}
.tts-page .tts-intro a{color:var(--accent-texte)!important;text-decoration-thickness:1.5px;text-underline-offset:4px}

/* Onglets du modèle : seule rangée horizontale sur petit écran. */
.tts-onglets{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;padding:0;list-style:none}
.tts-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:700;line-height:1.2;text-decoration:none;transition:background .25s,color .25s,border-color .25s,transform .4s var(--tts-spring),box-shadow .3s}
.tts-onglets a:hover{background:color-mix(in srgb,var(--accent) 16%,var(--carte));border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 24px -16px rgba(232,116,30,.6)}
.tts-onglets a[aria-current="page"]{background:var(--accent);color:var(--tts-encre);border-color:var(--accent-fonce);box-shadow:0 10px 22px -14px rgba(232,116,30,.7)}
.tts-onglets a:focus-visible{outline:3px solid var(--accent-fonce);outline-offset:3px}
.tts-onglets.tts-hide li{opacity:0;transform:translateY(16px)}
.tts-onglets li{transition:opacity .6s ease,transform .7s var(--tts-ease);transition-delay:calc(var(--i,0)*70ms)}

/* Cartes de la page Services : même langage de cartes que Nemelec. */
.tts-page .grille-services-accueil>div{transition:opacity .85s ease,transform .95s var(--tts-ease),filter .85s ease}
.tts-page .grille-services-accueil>div.is-hidden{opacity:0;filter:blur(5px);transform:perspective(900px) translateY(48px) rotateX(-9deg) scale(.97)}
.tts-page .grille-services-accueil a{position:relative;transform-style:preserve-3d;box-shadow:0 18px 42px -30px rgba(0,0,0,.9)}
.tts-page .grille-services-accueil a:hover{border-color:#df9a65!important;box-shadow:0 26px 52px -30px rgba(232,116,30,.3)}
.tts-page .grille-services-accueil a>div:first-child{position:relative}
.tts-page .grille-services-accueil a>div:first-child::after{content:"";position:absolute;inset:auto 0 0;height:5px;background:linear-gradient(90deg,var(--accent-fonce),var(--accent),#f3b27f)}
.tts-page .grille-services-accueil h3{color:var(--titre)!important}
.tts-page .grille-services-accueil p{color:var(--texte)!important}
.tts-page .grille-services-accueil a [style*="color:var(--accent-texte)"]{color:var(--accent-texte)!important}
.tts-page .grille-services-accueil a [style*="background:var(--accent)"]{color:var(--tts-encre)!important}

/* Cartes-carrousels : relief, loupe et contrôles nets du modèle Nemelec. */
.tts-page .grille-galeries{margin-top:30px}
.tts-page .grille-galeries>[data-reveal]{transition:opacity .85s ease,transform .95s var(--tts-ease),filter .85s ease}
.tts-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%}
.tts-page .grille-galeries .mini-gallery{transform-style:preserve-3d;will-change:transform;box-shadow:0 18px 40px -26px rgba(0,0,0,.9);transition:transform .6s var(--tts-ease),box-shadow .45s,border-color .35s}
.tts-page .grille-galeries .mini-gallery:hover{border-color:#db8c51!important;box-shadow:0 30px 56px -28px rgba(232,116,30,.3)}
.tts-page .grille-galeries .mini-gallery.tts-tilting{transition:transform .08s linear,box-shadow .3s,border-color .35s}
.tts-page .mini-gallery-track img{transition:transform 1.1s var(--tts-ease)}
.tts-page .mini-gallery:hover .mini-gallery-track img{transform:scale(1.045)}
.tts-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(36,21,12,.72);color:#fff;border:1px solid rgba(255,255,255,.38);pointer-events:none;opacity:0;transform:scale(.7);transition:opacity .3s,transform .45s var(--tts-spring)}
.tts-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tts-page .mini-gallery:hover .tts-zoom,.tts-page .mini-gallery:focus-within .tts-zoom{opacity:1;transform:none}
.tts-page .mini-gallery [data-prev],.tts-page .mini-gallery [data-next]{width:42px!important;height:42px!important;background:rgba(10,10,10,.78)!important;color:#fff!important;border:1px solid rgba(255,255,255,.34)!important;font-size:0!important;line-height:1;box-shadow:0 8px 22px -8px rgba(0,0,0,.8);transition:background .25s,color .25s,transform .35s var(--tts-spring),box-shadow .25s}
.tts-page .mini-gallery [data-prev]{left:12px!important}
.tts-page .mini-gallery [data-next]{right:12px!important}
.tts-page .mini-gallery [data-prev]::before,.tts-page .mini-gallery [data-next]::before{content:"";width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.tts-page .mini-gallery [data-prev]::before{transform:rotate(-135deg);margin-left:4px}
.tts-page .mini-gallery [data-next]::before{transform:rotate(45deg);margin-right:4px}
.tts-page .mini-gallery [data-prev]:hover,.tts-page .mini-gallery [data-next]:hover{background:var(--accent)!important;color:var(--tts-encre)!important;transform:translateY(-50%) scale(1.1)!important}
.tts-page .mini-gallery [data-prev]:focus-visible,.tts-page .mini-gallery [data-next]:focus-visible{outline:3px solid var(--accent-fonce);outline-offset:2px}

/* Avis conservés mot pour mot, mais séparés visuellement des réalisations. */
.tts-page section[style*="background:var(--fond-2)"]{position:relative}

/* Bandeau d'appel : vraie photo, composition identique au modèle. */
.tts-page .tts-cta{isolation:isolate}
.tts-cta .tts-kb{transition:transform 2.6s var(--tts-ease)}
.tts-cta.is-hidden .tts-kb{transform:scale(1.14)}
.tts-cta-sparks{position:absolute;top:0;bottom:0;right:0;left:42%;width:58%;height:100%;pointer-events:none;display:block;z-index:1}
.tts-cta .tts-cta-in{z-index:2}
.tts-page .tts-cta [style*="color:var(--accent)"]{color:var(--tts-clair)!important}
.tts-cta .hv20{position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--tts-spring),background .2s,box-shadow .25s,color .2s,border-color .2s!important}
.tts-cta .hv20:hover{transform:translateY(-3px) scale(1.045)}
.tts-cta .hv20:active{transform:scale(.97)}

@media (max-width:640px){
  .tts-page .tts-hero{min-height:390px!important}
  .tts-page .tts-hero>div:last-child{padding:84px 16px 38px!important}
  .tts-page .tts-intro>div{align-items:flex-start;padding:20px 18px;gap:14px}
  .tts-page .tts-intro>div::before{width:38px;height:38px;flex-basis:38px}
  .tts-page .tts-intro>div::after{left:31px;top:31px}
  .tts-page .grille-galeries>[data-reveal].is-hidden{transform:translateY(34px) scale(.97)}
  .tts-page .mini-gallery [data-prev],.tts-page .mini-gallery [data-next]{width:40px!important;height:40px!important}
  .tts-zoom{display:none}
  .tts-onglets{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 24px;padding:2px 16px 8px;scrollbar-width:none;overscroll-behavior-inline:contain}
  .tts-onglets::-webkit-scrollbar{display:none}
  .tts-onglets li{flex:none}
  .tts-onglets a{padding:10px 16px;font-size:13.5px;white-space:nowrap}
  .tts-page .tts-cta{display:block;min-height:0!important;border-radius:24px!important}
  .tts-page .tts-cta>.tts-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}
  .tts-page .tts-cta>.tts-cta-in{margin-left:0!important;max-width:none!important;padding:176px 22px 30px!important}
  .tts-page .tts-cta>.tts-kb{background-position:var(--tts-x,center) 45%!important}
  .tts-cta-sparks{left:0;width:100%}
}

@media (hover:none){.tts-page .mini-gallery:hover .mini-gallery-track img{transform:none}}

@media (prefers-reduced-motion:reduce){
  .tts-hero-bg{scale:1.03;transition:none!important}
  .tts-hw>i,.tts-fil,.tts-hero-in>*,.tts-onglets li,.tts-page .grille-galeries>[data-reveal],.tts-page .grille-galeries .mini-gallery,.tts-page .mini-gallery-track img,.tts-zoom,.tts-cta .tts-kb,.tts-page .grille-services-accueil>div{transition:none!important;animation:none!important}
  .tts-pre .tts-hw>i,.tts-pre .tts-hero-in>*:not(.tts-fil),.tts-onglets.tts-hide li{opacity:1!important;transform:none!important;filter:none!important}
  .tts-pre .tts-fil{transform:none!important}
  .tts-page .grille-galeries>[data-reveal].is-hidden,.tts-page .grille-services-accueil>div.is-hidden{opacity:1;filter:none;transform:none}
  .tts-page .mini-gallery:hover .mini-gallery-track img{transform:none}
  .tts-cta.is-hidden .tts-kb{transform:none}
  .tts-sparks,.tts-cta-sparks,.tts-zoom{display:none!important}
  .tts-cta .hv20:hover{transform:none}
}
