/* DL AMÉNAGEMENT — pages services (aménagement extérieur, abattage & élagage), hub /services et /realisations.
   Mise en scène reprise de Nemelec / Com'in Clean (en-tête vivant, cartes qui entrent en 3D, relief au survol,
   bandeau d'appel qui respire), adaptée au contenu de DL : des carrousels de photos de chantiers, titres gardés.
   Aucun texte n'est écrit ici. À charger APRÈS /assets/eco/css/site.css.
   Tout ce qui est caché l'est par une classe 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. */

.sv-page{
  --sv-ease:cubic-bezier(.2,.8,.2,1);
  --sv-spring:cubic-bezier(.34,1.56,.64,1);
  /* vert clair pour ce qui est posé sur le bleu nuit : #7fc08f sur #071826 = 8,4:1, sur #0a2b42 = 6,9:1 (≥ 4,5:1) */
  --sv-clair:var(--accent-sur-sombre,#7fc08f);
}

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

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

/* ---------- HERO : titre mot par mot, photo qui respire, particules ---------- */
.sv-hero-bg{scale:1.12;will-change:transform,translate;transition:translate .5s ease-out}
.sv-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.sv-hw{display:inline-block}
.sv-hw>i{display:inline-block;font-style:normal;transition:opacity .7s var(--sv-ease),transform .85s var(--sv-ease),filter .7s ease;transition-delay:calc(var(--i,0)*80ms + .15s)}
.sv-pre .sv-hw>i{opacity:0;transform:translateY(.55em);filter:blur(6px)}
/* fil sous le titre : se trace une fois, à l'arrivée */
.sv-fil{display:block;width:84px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--sv-clair));transform-origin:left center;transition:transform 1s var(--sv-ease) .6s}
.sv-pre .sv-fil{transform:scaleX(0)}
/* fil d'Ariane et sur-titre : entrent avant le titre */
.sv-hero-in>*:not(h1):not(.sv-fil){transition:opacity .8s ease .05s,transform .8s var(--sv-ease) .05s}
.sv-pre .sv-hero-in>*:not(h1):not(.sv-fil){opacity:0;transform:translateY(14px)}
/* accent posé sur le fond sombre de l'en-tête : en vert clair (le vert du site, #4a7c59, n'y fait que 3,7:1) */
.sv-hero-in>span[style*="text-transform:uppercase"]{color:var(--sv-clair)!important}

/* ---------- onglets : « Toutes les réalisations » puis un onglet par service, page courante marquée ---------- */
.sv-onglets{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 34px;padding:0;list-style:none}
.sv-onglets:first-child{margin-top:0}
.sv-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(--sv-spring),box-shadow .3s}
.sv-onglets a:hover{background:color-mix(in srgb,var(--accent) 12%,var(--carte));border-color:color-mix(in srgb,var(--accent) 55%,var(--bord));transform:translateY(-3px);box-shadow:0 12px 24px -16px color-mix(in srgb,var(--accent) 80%,#000)}
.sv-onglets a[aria-current="page"]{background:var(--accent);color:var(--sur-accent);border-color:var(--accent);box-shadow:0 10px 22px -14px color-mix(in srgb,var(--accent) 85%,#000)}
.sv-onglets a:focus-visible{outline:3px solid var(--accent-fonce);outline-offset:3px}
.sv-onglets.sv-hide li{opacity:0;transform:translateY(16px)}
.sv-onglets li{transition:opacity .6s ease,transform .7s var(--sv-ease);transition-delay:calc(var(--i,0)*70ms)}

/* ---------- CARTES (galeries et services) : entrée 3D, relief au survol, flèches nettes ---------- */
.sv-page .grille-galeries>[data-reveal],.sv-page .grille-services-accueil>[data-reveal]{transition:opacity .85s ease,transform .95s var(--sv-ease),filter .85s ease}
.sv-page .grille-galeries>[data-reveal].is-hidden,.sv-page .grille-services-accueil>[data-reveal].is-hidden{opacity:0;filter:blur(6px);transform:perspective(900px) translateY(56px) rotateX(-14deg) scale(.95);transform-origin:50% 100%}
.sv-page .grille-galeries .mini-gallery{transform-style:preserve-3d;will-change:transform;
  box-shadow:0 18px 40px -26px rgba(var(--overlay-rgb),.55);
  transition:transform .6s var(--sv-ease),box-shadow .45s,border-color .35s}
.sv-page .grille-galeries .mini-gallery:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--bord));box-shadow:0 30px 56px -28px rgba(var(--overlay-rgb),.6)}
.sv-page .grille-galeries .mini-gallery.sv-tilting{transition:transform .08s linear,box-shadow .3s,border-color .35s}
/* zoom lent de la photo au survol (pas de reflet) */
.sv-page .mini-gallery-track img{transition:transform 1.1s var(--sv-ease)}
.sv-page .mini-gallery:hover .mini-gallery-track img{transform:scale(1.045)}
/* loupe : indique que la photo s'agrandit au clic */
.sv-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(var(--overlay-rgb),.62);color:#fff;border:1px solid rgba(255,255,255,.28);pointer-events:none;
  opacity:0;transform:scale(.7);transition:opacity .3s,transform .45s var(--sv-spring)}
.sv-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sv-page .mini-gallery:hover .sv-zoom,.sv-page .mini-gallery:focus-within .sv-zoom{opacity:1;transform:none}
/* flèches : disques blancs, accent au survol (reprise des flèches de Com'in Clean) */
.sv-page .mini-gallery [data-prev],.sv-page .mini-gallery [data-next]{
  width:42px!important;height:42px!important;background:#fff!important;color:var(--titre)!important;border:0!important;font-size:22px!important;line-height:1;
  box-shadow:0 8px 22px -8px rgba(var(--overlay-rgb),.55);transition:background .25s,color .25s,transform .35s var(--sv-spring),box-shadow .25s}
.sv-page .mini-gallery [data-prev]{left:12px!important}
.sv-page .mini-gallery [data-next]{right:12px!important}
.sv-page .mini-gallery [data-prev]:hover,.sv-page .mini-gallery [data-next]:hover{background:var(--accent)!important;color:var(--sur-accent)!important;transform:translateY(-50%) scale(1.1)!important}
.sv-page .mini-gallery [data-prev]:focus-visible,.sv-page .mini-gallery [data-next]:focus-visible{outline:3px solid var(--accent-fonce);outline-offset:2px}

/* ---------- 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){
  .sv-page .grille-galeries>[data-reveal].is-hidden{transform:translateY(34px) scale(.97)}
  .sv-page .mini-gallery [data-prev],.sv-page .mini-gallery [data-next]{width:40px!important;height:40px!important}
  .sv-zoom{display:none}
  .sv-onglets{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 24px;padding:2px 16px 8px;scrollbar-width:none}
  .sv-onglets:not(:first-child){margin-top:22px}
  .sv-onglets::-webkit-scrollbar{display:none}
  .sv-onglets li{flex:none}
  .sv-onglets a{padding:10px 16px;font-size:13.5px;white-space:nowrap}
}
/* /services : le thème met les deux cartes de service en rail horizontal sous 768 px ; ici elles s'empilent comme les galeries */
@media (max-width:767px){
  .sv-page .grille-services-accueil{display:grid!important;grid-template-columns:1fr;overflow:visible;gap:20px!important;padding:0!important;margin:0!important;scroll-snap-type:none}
  .sv-page .grille-services-accueil>div{flex:none;scroll-snap-align:none}
  .sv-page .grille-services-accueil>[data-reveal].is-hidden{transform:translateY(34px) scale(.97)}
}
/* écrans tactiles : pas de zoom au survol */
@media (hover:none){
  .sv-page .mini-gallery:hover .mini-gallery-track img{transform:none}
}

/* ---------- BANDEAU D'APPEL : vraie photo de chantier, qui respire à l'arrivée ---------- */
.sv-cta .sv-kb{transition:transform 2.6s var(--sv-ease)}
.sv-cta.is-hidden .sv-kb{transform:scale(1.14)}
.sv-cta-sparks{position:absolute;top:0;bottom:0;right:0;left:42%;width:58%;height:100%;pointer-events:none;display:block}
/* sur-titre « Devis gratuit » posé sur le bleu nuit : vert clair */
.sv-cta .sv-cta-in>span:first-child{color:var(--sv-clair)!important}
.sv-cta .hv20,.sv-cta .hv21b{position:relative;overflow:hidden;isolation:isolate}
.sv-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(--sv-ease)}
.sv-cta .hv20:hover::after{transform:translateX(260%) skewX(-20deg)}
html .sv-cta .hv20{transition:transform .5s var(--sv-spring),background .2s,box-shadow .25s,color .2s,border-color .2s!important}
html .sv-cta .hv20:hover{transform:translateY(-3px) scale(1.045)}
html .sv-cta .hv20:active{transform:scale(.97)}
@media (max-width:640px){
  /* la photo occupe le haut de la carte (sujet cadré par page), le texte se pose sur le bleu nuit en dessous (le thème noyait la photo sous 84 % de bleu) */
  .sv-page .sv-cta{display:block;min-height:0;border-radius:24px}
  .sv-page .sv-cta>.sv-kb{bottom:auto;height:262px;background-position:var(--sv-x,center) var(--sv-ym,50%)!important}
  .sv-page .sv-cta>.sv-ov{background:linear-gradient(180deg,rgba(var(--overlay-rgb),.04) 0,rgba(var(--overlay-rgb),.1) 34%,rgba(var(--overlay-rgb),.9) 56%,rgb(var(--overlay-rgb)) 63%)!important}
  .sv-page .sv-cta>.sv-cta-in{margin-left:0!important;max-width:none!important;padding:214px 22px 30px!important}
  .sv-cta-sparks{left:0;width:100%}
  /* cadrage du sujet de chaque photo sur mobile */
  body[data-page="amenagement-exterieur"] .sv-cta>.sv-kb{--sv-x:8%}
  body[data-page="abattage-elagage"] .sv-cta>.sv-kb{--sv-x:center;--sv-ym:48%}
  body[data-page="realisations"] .sv-cta>.sv-kb{--sv-x:50%;--sv-ym:60%}
  body[data-page="services"] .sv-cta>.sv-kb{--sv-x:28%}
}

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

/* =====================================================================================================
   TEXTE D'EN-TÊTE DES PAGES SERVICES — préfixe sv-intro-   (12/10/2026, retour de Wakny : « c'est trop brut »)
   Le texte d'avant (un seul <p> de 4 paragraphes) est découpé : chapeau, étapes, encarts, chips, cartes.
   Aucun mot n'est écrit ici. Majuscules d'initiale posées en CSS (::first-letter), jamais dans le texte.
   Apparition au scroll : data-reveal (site.js du thème, décalage de 70 ms entre éléments qui entrent ensemble).
   Aménagement extérieur = .sv-intro-ext (chapeau + étapes | carte exemples/matériaux | encart béton).
   Abattage & élagage    = .sv-intro-arb (chapeau | visuel | cartes des techniques).
   ===================================================================================================== */
.sv-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:30px 64px;align-items:start;margin:0 0 10px}
.sv-intro-chapeau{max-width:31em;margin:0 0 28px;font-size:clamp(19px,1.75vw,22px);line-height:1.6;font-weight:500;color:var(--texte-doux)}
.sv-intro-chapeau strong{display:block;margin-bottom:.35em;font-family:'Bricolage Grotesque',sans-serif;font-size:1.28em;line-height:1.22;font-weight:700;letter-spacing:-.01em;color:var(--titre)}
.sv-intro-arb .sv-intro-chapeau{margin-bottom:0;font-size:clamp(20px,1.95vw,24px);line-height:1.55;color:var(--titre);font-weight:500}
.sv-intro-main{min-width:0}
.sv-intro-arb .sv-intro-main{align-self:center}

/* pictogrammes : carré teinté, trait de l'accent foncé */
.sv-intro-ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 13%,var(--carte));color:var(--accent-fonce)}
.sv-intro-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* sur-titres de groupe (texte du site, passé en capitales par CSS) */
.sv-intro-h{margin:0 0 14px;font-size:12.5px;line-height:1.2;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-fonce)}
.sv-intro-h2{margin-top:26px;padding-top:24px;border-top:1px solid var(--bord)}

/* Aménagement extérieur : les travaux, un par ligne */
.sv-intro-etapes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sv-intro-etapes li{display:flex;align-items:center;gap:16px;padding:12px 20px 12px 14px;border-radius:18px;background:var(--carte);border:1px solid var(--bord);font-size:16.5px;line-height:1.5;color:var(--texte);
  transition:transform .45s var(--sv-spring),border-color .3s,box-shadow .35s}
.sv-intro-etapes li:hover{transform:translateX(5px);border-color:color-mix(in srgb,var(--accent) 50%,var(--bord));box-shadow:0 16px 30px -22px color-mix(in srgb,var(--accent) 80%,#000)}
.sv-intro-etapes li>span:last-child{min-width:0}

/* carte « Par exemple » + « Côté matériaux » */
.sv-intro-side{min-width:0}
.sv-intro-card{padding:28px 30px 30px;border-radius:24px;background:var(--carte);border:1px solid var(--bord);box-shadow:0 22px 44px -32px rgba(var(--overlay-rgb),.55)}
.sv-intro-ex{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sv-intro-ex li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.5;color:var(--titre);font-weight:600}
.sv-intro-ex li::before{content:"";position:absolute;left:3px;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.sv-intro-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.sv-intro-chip{padding:8px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,var(--carte));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--bord));font-size:14.5px;line-height:1.35;color:var(--texte-doux)}
.sv-intro-chip b{font-weight:700;color:var(--titre)}

/* encart discret (béton à l'intérieur) : sur toute la largeur, sous les deux colonnes */
.sv-intro-note{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:0;padding:15px 22px;border-radius:16px;background:color-mix(in srgb,var(--accent) 7%,var(--fond));border-left:4px solid var(--accent);font-size:15.5px;line-height:1.6;color:var(--texte-doux)}
.sv-intro-note svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--accent-fonce);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Abattage & élagage : visuel d'accompagnement (décor pur, aria-hidden) */
.sv-intro-visuel{position:relative;align-self:stretch;min-height:208px;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--carte)) 0%,color-mix(in srgb,var(--accent) 17%,var(--carte)) 100%);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--bord))}
.sv-intro-visuel svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sv-intro-sol{fill:color-mix(in srgb,var(--accent) 34%,var(--carte))}
.sv-intro-pin path,.sv-intro-pin rect{fill:var(--accent-fonce)}
.sv-intro-pin{opacity:.55}
.sv-intro-pin-p{opacity:1}
.sv-intro-pin-f{opacity:.3}
.sv-intro-corde{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round}
.sv-intro-grimpeur{fill:var(--accent);stroke:var(--carte);stroke-width:3}
.sv-intro-etincelle{fill:var(--accent);opacity:.35}

/* Abattage & élagage : les techniques en cartes (terme en gras + explication) */
.sv-intro-techs{grid-column:1/-1;display:grid;gap:16px}
.sv-intro-grid{display:grid;gap:16px}
.sv-intro-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv-intro-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-intro-tech{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:22px 24px 24px;border-radius:22px;background:var(--carte);border:1px solid var(--bord);
  box-shadow:0 18px 38px -30px rgba(var(--overlay-rgb),.55);transition:transform .5s var(--sv-spring),border-color .3s,box-shadow .4s}
.sv-intro-tech:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,var(--bord));box-shadow:0 26px 44px -28px color-mix(in srgb,var(--accent) 75%,#000)}
.sv-intro-tech .sv-intro-ico{margin-bottom:12px}
/* cartes à deux : icône à gauche, texte à droite (évite les grands vides) */
.sv-intro-g2 .sv-intro-tech{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;row-gap:3px;align-items:start;align-content:start}
.sv-intro-g2 .sv-intro-tech .sv-intro-ico{grid-column:1;grid-row:1/4;margin:0}
.sv-intro-g2 .sv-intro-tech>:not(.sv-intro-ico){grid-column:2}
.sv-intro-g2 .sv-intro-tech p{margin-top:2px}
.sv-intro-t{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--titre)}
.sv-intro-t::first-letter,.sv-intro-tech p::first-letter{text-transform:uppercase}
.sv-intro-liant{font-family:'Plus Jakarta Sans',sans-serif;font-size:.8em;font-weight:500;color:var(--texte-doux)}
.sv-intro-tech p{margin:4px 0 0;font-size:15.5px;line-height:1.6;color:var(--texte-doux)}
.sv-intro-h3{margin:14px 0 -2px}

/* largeurs moyennes et mobile */
@media (max-width:1099px){.sv-intro{gap:26px 40px}.sv-intro-card{padding:24px 24px 26px}}
@media (max-width:960px){
  .sv-intro{grid-template-columns:minmax(0,1fr);gap:22px}
  .sv-intro-chapeau{max-width:36em;margin-bottom:18px}
  .sv-intro-arb .sv-intro-chapeau{margin-bottom:0}
  .sv-intro-visuel{display:none}
  .sv-intro-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sv-intro{gap:18px;margin-bottom:6px}
  .sv-intro-chapeau{font-size:18px;line-height:1.6}
  .sv-intro-arb .sv-intro-chapeau{font-size:18.5px}
  .sv-intro-etapes li{padding:11px 16px 11px 12px;gap:14px;font-size:15.5px}
  .sv-intro-ico{width:40px;height:40px;border-radius:12px}
  .sv-intro-card{padding:22px 20px 24px;border-radius:20px}
  .sv-intro-chip{font-size:14px}
  .sv-intro-note{padding:14px 16px;font-size:15px}
  .sv-intro-g3,.sv-intro-g2{grid-template-columns:minmax(0,1fr)}
  .sv-intro-tech{padding:18px 20px 20px}
  .sv-intro-tech .sv-intro-ico{margin-bottom:8px}
  .sv-intro-g2 .sv-intro-tech{grid-template-columns:40px minmax(0,1fr);column-gap:14px}
}
@media (hover:none){.sv-intro-etapes li:hover,.sv-intro-tech:hover{transform:none}}
/* mouvement réduit : tout visible d'emblée, rien ne bouge */
@media (prefers-reduced-motion:reduce){
  .sv-intro [data-reveal],.sv-intro-etapes li,.sv-intro-tech{transition:none!important}
  .sv-intro [data-reveal].is-hidden{opacity:1!important;transform:none!important}
  .sv-intro-etapes li:hover,.sv-intro-tech:hover{transform:none}
}