/* ==========================================================================
   service.css — modèle des pages de services (/services/…)
   Formulaire de contact (repris de la page Débouchage) + blocs du modèle.
   ========================================================================== */
/* ============================================================
   sx-contact — brique formulaire_contact-form-split (sans carte)
   ============================================================ */
.sx-contact{
  --bg:#F7F5F3;--surface:#FFFFFF;--line-strong:#D9D5D2;
  --primary:var(--accent);--primary-fg:#ffffff;
  --maxw:72rem;--ease:cubic-bezier(.16,1,.3,1);--easeBack:cubic-bezier(.34,1.56,.64,1)}

.sx-contact.contact{background:var(--bg);color:var(--fg);font-family:var(--font);
  padding:clamp(3rem,8vh,5rem) clamp(1.4rem,5vw,3rem)}
.sx-contact .contact__inner{max-width:var(--maxw);margin:0 auto}

.sx-contact .contact__head{max-width:42rem;margin-bottom:2.6rem}
.sx-contact .contact__eyebrow{display:block;font-size:.78rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin-bottom:.7rem}
.sx-contact .contact__title{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700;
  letter-spacing:.005em;line-height:1.1}
.sx-contact .contact__sub{margin-top:.9rem;color:var(--muted);font-size:1rem;line-height:1.6;text-align:left}

.sx-contact .grid{display:grid;gap:2rem;grid-template-columns:1.2fr 1fr}

/* formulaire */
.sx-contact .form{display:flex;flex-direction:column;gap:1rem}
.sx-contact .form__row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.sx-contact .form__group{display:flex;flex-direction:column;gap:.4rem}
.sx-contact .form__label{font-size:.85rem;font-weight:500;transition:color .25s var(--ease)}
/* FOCUS — le label passe en accent quand le champ est actif */
.sx-contact .form__group:focus-within .form__label{color:var(--primary)}
.sx-contact .form__input,.sx-contact .form__textarea{
  width:100%;min-width:0;
  padding:.85rem 1rem;border-radius:.55rem;
  background:var(--surface);border:1px solid var(--line-strong);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
/* FOCUS — bordure accent + halo doux + léger lift du champ */
.sx-contact .form__input:focus,.sx-contact .form__textarea:focus{outline:none;
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(160,47,47,.16);
  transform:translateY(-1px)}
.sx-contact select.form__input{cursor:pointer}
.sx-contact .form__textarea{resize:vertical;min-height:8rem;font-family:inherit}
.sx-contact .form__btn{
  align-self:flex-start;margin-top:.4rem;
  padding:.9rem 1.4rem;border-radius:.55rem;
  background:var(--primary);color:var(--primary-fg);border:0;cursor:pointer;
  font-weight:600;font-size:.92rem;
  display:inline-flex;align-items:center;gap:.45rem;
  position:relative;isolation:isolate;overflow:hidden;
  transition:color .35s var(--ease),transform .2s var(--ease)}
.sx-contact .form__btn svg{width:.95rem;height:.95rem}
/* FILLBTN — disque clair qui grandit du point du curseur, texte inversé */
.sx-contact .form__btn::before{content:"";position:absolute;z-index:-1;
  top:var(--y,50%);left:var(--x,50%);width:0;height:0;border-radius:50%;
  background:var(--primary-fg);transform:translate(-50%,-50%);
  transition:width .5s var(--ease),height .5s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .sx-contact .form__btn:hover{color:var(--primary);transform:translateY(-1px)}
  .sx-contact .form__btn:hover::before{width:360px;height:360px}
}

/* infos (coordonnées seules — pas de carte sur cette page) */
.sx-contact .infos{display:flex;flex-direction:column;gap:1.4rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:.9rem;padding:1.6rem}
.sx-contact .infos__item{display:flex;align-items:flex-start;gap:.8rem}
.sx-contact .infos__icon{
  width:2.2rem;height:2.2rem;border-radius:.5rem;
  background:var(--accent-soft);color:var(--accent);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.sx-contact .infos__icon svg{width:1.1rem;height:1.1rem}
.sx-contact .infos__label{font-size:.78rem;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.sx-contact .infos__value{font-size:.95rem;line-height:1.4;margin-top:.15rem}
.sx-contact .infos__value a:hover{text-decoration:underline}

/* REVEAL — montée en cascade des textes/champs à l'entrée à l'écran */
.wf-js .sx-contact .wf-rev{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .8s var(--easeBack);
  transition-delay:var(--d,0s)}
.wf-js .sx-contact .wf-rev.is-in{opacity:1;transform:none}
/* IMGREVEAL — le bloc infos se dévoile (clip-path + fondu léger) */
.wf-js .sx-contact .wf-img{opacity:0;clip-path:inset(0 0 18% 0);transform:translateY(16px);
  transition:opacity .8s var(--ease),clip-path .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0s)}
.wf-js .sx-contact .wf-img.is-in{opacity:1;clip-path:inset(0 0 0 0);transform:none}

@media (max-width:780px){
  .sx-contact .grid{grid-template-columns:1fr}
  .sx-contact .form__row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .sx-contact *{transition:none!important}
  .wf-js .sx-contact .wf-rev,.wf-js .sx-contact .wf-img{opacity:1!important;transform:none!important;clip-path:none!important}
  .sx-contact .form__input:focus,.sx-contact .form__textarea:focus{transform:none}
  .sx-contact .form__btn::before{display:none}
  .sx-contact .form__btn:hover{color:var(--primary-fg)}
}

/* ==========================================================================
   Blocs du modèle de page de service
   ========================================================================== */
.sv{--ease:cubic-bezier(.16,1,.3,1)}
.sv-wrap{max-width:1180px;margin:0 auto}
.sv-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;margin:0}
.sv-head{text-align:center;max-width:46rem;margin:0 auto clamp(2rem,4vw,3rem)}
.sv-head p{margin:1rem auto 0;color:var(--muted);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.7;text-align:center}

/* fil d'Ariane dans le hero */
.sv-crumbs{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:0 0 1rem;padding:0;list-style:none;font-size:.85rem;color:rgba(255,255,255,.8)}
.sv-crumbs a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.sv-crumbs li+li::before{content:"›";margin-right:.35rem;opacity:.7}
@media (max-width:768px){.sv-crumbs{justify-content:center}}

/* introduction (paragraphe qui suit le hero) */
.sv-intro{max-width:52rem;margin:0 auto clamp(1.6rem,3vw,2.4rem);text-align:center;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.7;color:#4A4546}
.sv-intro strong{color:var(--fg)}

/* contenu des cartes de prestations : listes cochées */
.svc-stack__card .sv-p{margin:.8rem 0 0;font-size:.97rem;line-height:1.6;color:var(--muted);text-align:left}
.sv-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.45rem}
.sv-list li{display:flex;gap:.65rem;align-items:flex-start;font-size:.97rem;line-height:1.45;color:var(--fg);font-weight:500}
.sv-list li::before{content:"";flex:none;width:22px;height:22px;margin-top:.05rem;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.sv-list li b{font-weight:700}
.sv-list--cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.2rem}
@media (max-width:640px){.sv-list--cols{grid-template-columns:1fr}}

/* grille de prestations (fiches à simple liste) */
.sv-prest{padding:clamp(3rem,7vw,5.5rem) clamp(1.4rem,5vw,3rem);background:var(--bg,#fff)}
.sv-prest__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,4rem);align-items:center}
.sv-prest__fig{margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/3.3;background:var(--surface);box-shadow:0 30px 60px -36px rgba(34,31,32,.45)}
.sv-prest__fig img{width:100%;height:100%;object-fit:cover;display:block}
.sv-prest .sv-list{gap:.7rem}
.sv-prest .sv-list li{background:var(--surface);border-radius:14px;padding:.8rem 1rem}
.sv-prest .sv-p{margin:1.2rem 0 0;color:var(--muted);line-height:1.65;text-align:left}
@media (max-width:900px){.sv-prest__grid{grid-template-columns:1fr}.sv-prest__fig{order:-1;aspect-ratio:16/10}}

/* méthodes / procédés (liste de techniques en cartes) */
.sv-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:1.4rem}
.sv-method{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.25rem}
.sv-method strong{display:block;font-family:var(--font-display);font-weight:700;font-size:1.02rem;margin-bottom:.3rem;color:var(--fg)}
.sv-method span{font-size:.93rem;line-height:1.55;color:var(--muted)}

/* une réponse adaptée à chaque interlocuteur */
.sv-aud{padding:clamp(3rem,7vw,5.5rem) clamp(1.4rem,5vw,3rem);background:var(--surface)}
.sv-aud__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.sv-aud__tile{background:#fff;border-radius:22px;padding:1.5rem 1.4rem 1.6rem;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sv-aud__tile:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(34,31,32,.4)}
.sv-aud__ico{width:50px;height:50px;border-radius:15px;background:var(--accent);color:#fff;display:grid;place-items:center;margin-bottom:1rem}
.sv-aud__ico svg{width:24px;height:24px}
.sv-aud__tile h3{font-family:var(--font-display);font-weight:700;font-size:1.12rem;margin:0 0 .45rem}
.sv-aud__tile p{margin:0;font-size:.95rem;line-height:1.55;color:var(--muted);text-align:left}

/* pourquoi choisir Amoudruz : bandeau rouge */
.sv-why{position:relative;overflow:hidden;background:var(--accent);color:#fff;padding:clamp(3.2rem,7vw,5.2rem) clamp(1.4rem,5vw,3rem);
  background-image:radial-gradient(90% 140% at 100% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),radial-gradient(70% 120% at 0% 100%,rgba(0,0,0,.2),rgba(0,0,0,0) 60%)}
.sv-why .sv-h2{color:#fff;text-align:center;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.sv-why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.sv-why__item{display:flex;gap:.9rem;align-items:flex-start;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:1.2rem 1.25rem;font-size:1rem;line-height:1.5;font-weight:500}
.sv-why__item::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A02F2F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}

/* voir aussi : services liés */
.sv-see{padding:clamp(3rem,7vw,5.5rem) clamp(1.4rem,5vw,3rem);background:var(--bg,#fff)}
.sv-see__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sv-see__card{position:relative;display:block;border-radius:22px;overflow:hidden;aspect-ratio:4/3.1;background:#1a1716;color:#fff;isolation:isolate}
.sv-see__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.sv-see__card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,10,10,.05) 30%,rgba(14,10,10,.85) 100%)}
.sv-see__card span{position:absolute;left:1.3rem;right:3.8rem;bottom:1.2rem;font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.2}
.sv-see__card i{position:absolute;right:1.1rem;bottom:1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.sv-see__card i svg{width:1rem;height:1rem}
.sv-see__card:hover img{transform:scale(1.06)}
.sv-see__card:hover i{background:var(--accent);border-color:var(--accent);transform:rotate(-45deg)}
@media (max-width:900px){
  .sv-see__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin:0 calc(-1 * clamp(1.4rem,5vw,3rem));padding:0 clamp(1.4rem,5vw,3rem);scroll-padding-inline:clamp(1.4rem,5vw,3rem)}
  .sv-see__grid::-webkit-scrollbar{display:none}
  .sv-see__card{flex:0 0 78%;scroll-snap-align:start}
}
/* points sous les sliders mobiles (créés par service.js) */
.sv-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.sv-dots[hidden]{display:none}
.sv-dots i{width:7px;height:7px;border-radius:999px;background:var(--line-strong,#CFCAC8);transition:width .35s var(--ease),background .35s}
.sv-dots i.is-on{width:22px;background:var(--accent)}


/* apparition */
.sv-js [data-sv-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.sv-js [data-sv-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sv-js [data-sv-reveal]{opacity:1;transform:none;transition:none}}

/* mobile : tuiles interlocuteurs centrées */
@media (max-width:640px){.sv-aud__tile{text-align:center}.sv-aud__ico{margin-left:auto;margin-right:auto}.sv-aud__tile p{text-align:center}}

/* galerie photos de chantiers (page Collecteurs) */
.sv-gal{padding:clamp(3rem,7vw,5.5rem) clamp(1.4rem,5vw,3rem);background:var(--surface)}
.sv-gal__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sv-gal__item{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:#1a1716}
.sv-gal__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.sv-gal__item:hover img{transform:scale(1.05)}
@media (max-width:1000px){.sv-gal__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .sv-gal__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin:0 calc(-1 * clamp(1.4rem,5vw,3rem));padding:0 clamp(1.4rem,5vw,3rem);scroll-padding-inline:clamp(1.4rem,5vw,3rem)}
  .sv-gal__grid::-webkit-scrollbar{display:none}
  .sv-gal__item{flex:0 0 82%;scroll-snap-align:start}
}
