/* ============================================================
   LES3 — polish.css
   Passe QA / finitions (octobre 2026), chargée en DERNIER sur chaque page.
   Aucune modification de la direction artistique : uniquement des
   corrections d'alignement, de lisibilité et de parcours mobile.
   ============================================================ */

/* 1. Étapes (timeline) : colonne des numéros à largeur fixe
      -> « 01 », « 02 », « 03 » n'ont pas la même chasse : le texte se décalait d'une étape à l'autre. */
.tl__num{min-width:1.2em;text-align:left}

/* 2. Accueil · chiffres clés (150+ / 100% / 48h) : débordaient de l'écran sous ~420px */
@media(max-width:480px){
  .apr__stat{padding-inline:.55rem}
  .apr__stat .stats__num{font-size:clamp(2rem,10vw,2.8rem)}
  .apr__stat .stats__label{font-size:.78rem}
}

/* 3. Mobile : boutons empilés de même largeur (au lieu de largeurs « au texte » décalées) */
@media(max-width:480px){
  .hero__actions,.cta__actions,.services__foot,.eqd__foot,.ctxa__foot,.dpr__foot,.steps__foot,.psoc-foot,
  .proof__foot,.why__actions,.srv__actions,.pa-actions,.apr__actions,.nf__actions,.eco__foot,.dz-resp__foot,
  .wst__foot,.tr-acc-foot,.tr-presta__foot,.tr-mosaic__foot,.tr-proof__foot,.rea__cta{
    flex-direction:column;align-items:stretch}
  :is(.hero__actions,.cta__actions,.services__foot,.eqd__foot,.ctxa__foot,.dpr__foot,.steps__foot,.psoc-foot,
  .proof__foot,.why__actions,.srv__actions,.pa-actions,.apr__actions,.nf__actions,.eco__foot,.dz-resp__foot,
  .wst__foot,.tr-acc-foot,.tr-presta__foot,.tr-mosaic__foot,.tr-proof__foot,.rea__cta) > .btn{
    width:100%;max-width:340px;margin-inline:auto;justify-content:center}
}

/* 4. Chiffre clé des services : sur mobile, le libellé passe sous le chiffre
      (« Ø 3000 mm diamètre de carottage / maxi » se coupait mal) */
@media(max-width:560px){
  .srv__kf-label{display:block;margin-top:.35rem}
}

/* 5. Formulaires : retour visible après envoi + mention de confidentialité */
.form-status{margin:.9rem 0 0;padding:.8rem 1rem;font-size:.9rem;line-height:1.5;border-left:3px solid var(--orange);
  background:rgba(236,91,64,.10);color:inherit}
.form-status--err{border-left-color:#d93a2b;background:rgba(217,58,43,.12)}
.form-status--info{border-left-color:currentColor;background:rgba(127,127,127,.10)}
.form-status a,.form-status strong{color:inherit}
.form-status a{text-decoration:underline;text-underline-offset:2px}
.qform .form-status{color:#fff;background:rgba(236,91,64,.22)}
.form .form-status{color:var(--ink)}
.qform__legal{margin:.2rem 0 0;font-size:.76rem;line-height:1.45;color:rgba(255,255,255,.62)}
.qform__legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.qform__legal a:hover{color:#fff}
button[type="submit"]:disabled{opacity:.6;cursor:progress}

/* 6. Page contact : champ « Pièces jointes » aligné sur le style des autres champs */
.form .field--file input[type="file"]{padding:.55rem;font-size:.88rem;color:var(--gray);border-style:dashed;background:var(--paper-alt);cursor:pointer}
.form .field--file input[type="file"]::file-selector-button{
  font-family:"General Sans",sans-serif;font-weight:600;font-size:.85rem;color:#fff;background:var(--ink);
  border:0;border-radius:8px;padding:.62rem 1.05rem;margin-right:.9rem;cursor:pointer;transition:background .25s var(--ease)}
.form .field--file input[type="file"]:hover::file-selector-button{background:var(--orange)}

/* 7. Hero : légère ombre portée sur le titre et le texte pour la lisibilité sur les photos claires/orangées */
.hero__title{text-shadow:0 2px 24px rgba(0,0,0,.28)}
.hero__title .hl{text-shadow:0 2px 6px rgba(0,0,0,.35),0 0 30px rgba(0,0,0,.55)}
.hero__text{text-shadow:0 1px 12px rgba(0,0,0,.35)}

/* 8. Ancres internes : le contenu ciblé ne passe plus sous la barre flottante */
[id]{scroll-margin-top:96px}

/* ============================================================
   FLUIDITÉ (scroll / survol) — mesures GPU réelles à l'appui
   ============================================================ */

/* P1. En-tête : passage en « verre » au 1er pixel de scroll. On n'anime plus le flou ni l'ombre
       (re-floutage de toute la barre à chaque image pendant 0,4 s = ~120 ms de gel au début du scroll). */
.site-header{transition:background .4s var(--ease),border-color .4s var(--ease)}

/* P2. Sections : rendu normal (plus de content-visibility:auto). Le rendu différé provoquait
       un à-coup à l'entrée de chaque section et retardait le chargement de ses images (apparition tardive).
       On garde la « containment » qu'il impliquait (mêmes débordements masqués qu'avant). */
main > section:not(.hero):not(.why):not(.no-cv){content-visibility:visible;contain-intrinsic-size:none;contain:layout style paint}

/* P3. « 85 % » (bloc déchets) : le halo orange était une text-shadow floue de 40 px, re-peinte à chaque image
       du compteur animé. Même halo, mais en dégradé statique derrière le chiffre (peint une seule fois). */
.wst__big{text-shadow:none;position:relative;isolation:isolate}
.wst__big::before{content:"";position:absolute;z-index:-1;left:-8%;right:-4%;top:18%;bottom:-42%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(193,63,40,.55),rgba(193,63,40,.2) 58%,rgba(193,63,40,0))}

/* P4. Formulaires sur fond verre : les champs avaient leur propre flou par-dessus le panneau déjà flouté
       (flous imbriqués = passes de rendu GPU en plus). Rendu visuel identique sans. */
.qform input,.qform textarea,.qform select,.qform__more,.qform__file{-webkit-backdrop-filter:none;backdrop-filter:none}

/* P5. Très grands panneaux à effets lourds (verre flouté + ombres larges) : plus d'apparition en glissé.
       Les animer forçait le navigateur à recalculer flou et ombres à chaque image (gel ~120 ms).
       Leur contenu (titres, cartes) garde ses propres animations d'apparition.
   (Autres corrections de fluidité : images de contenu en version 1100 px « -md », fonds en 1600 px « -lg »,
    decoding="async", carte Google chargée au repos — voir main.js « deferMaps ».) */
.qcontact[data-reveal],.wst__panel[data-reveal],.tcar--reasons[data-reveal]{opacity:1;transform:none;transition:none}

/* P6. Animations en boucle mises en pause hors écran (classe posée par main.js « pauseOffscreen »).
       Avant : recalcul des styles 60 fois/s sur toute la page, même au repos. */
.hero.anim-off::after,
.zones__map.anim-off .zones__link,
.zones__map.anim-off .zones__pin-ring,
.tl.anim-off .tl__dot{animation-play-state:paused}

/* P6b. Ligne du hero : même dégradé orange et même rythme, mais animée en transform/opacité (prise en charge
        par le GPU) au lieu de background-position (recalcul des styles à chaque image). */
.hero::after{background-size:100% 100%;transform-origin:50% 0;animation:heroLineDraw 2.3s var(--ease) infinite;will-change:transform,opacity}
@keyframes heroLineDraw{
  0%{transform:translateX(-50%) scaleY(0);opacity:1}
  65%{transform:translateX(-50%) scaleY(1);opacity:1}
  100%{transform:translateX(-50%) scaleY(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero::after{animation:none}}

/* P7. Apparitions au scroll : déclenchées dès l'entrée à l'écran (main.js), plus courtes, délais plafonnés
       -> le contenu est déjà là quand on arrive dessus, plus de zones vides ou « en retard » en défilant. */
[data-reveal]{transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:min(var(--d,0s),.12s)}
[data-reveal].in-view{transform:none}
.sr-wi{transition-duration:.42s}

/* P8. Transition entre pages (volet rubalise) raccourcie : ~0,75 s de couverture au lieu de ~1,1 s */
#l3vt{animation-duration:.42s}

/* 9. Mobile : en bas de page, le bouton WhatsApp flottant masquait « Politique de confidentialité » */
@media(max-width:879px){
  .footer__bottom{padding-bottom:calc(1.5rem + 64px)}
}