/* ============================================================
   LES3 — page-index.css
   Sections redesignées de la page d'accueil :
   1) Services (liste éditoriale 2 colonnes)        .svc2
   2) Pourquoi « Les 3 » (liste à filets + parallaxe) .why
   3) Étapes (stepper + visuel héro + fil d'Ariane) .stp
   4) Déchets (bande orange, 40% monumental, cartes) .wst
   Tokens : main.css (--orange, --ink, --gray, --paper…) · ANGULEUX
   Reveal : le JS global ajoute .in-view sur [data-reveal]
   ============================================================ */


/* ============================================================
   0. APPROCHE : copy + stats à picto + visuel en calques
   ============================================================ */
.apr__grid{
  display:grid;gap:clamp(34px,5vw,64px);grid-template-columns:1fr;align-items:center;
}
.apr__copy .head{margin-bottom:clamp(22px,3vw,34px)}
.apr__copy .head__intro{max-width:48ch}
/* chiffres en barre horizontale (style chiffres clés : sans boîte ni icône, suffixe accent) */
.apr__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem 0;margin:clamp(10px,2vw,20px) auto 0;max-width:740px;text-align:center}
.apr__stat{position:relative;display:block;padding:.2rem 0}
.apr__stat .ico{display:none}
.apr__stat-body{min-width:0}
.apr__stat .stats__num{
  font-family:"General Sans",sans-serif;font-weight:700;color:var(--ink);
  font-size:clamp(2.8rem,6vw,4.4rem);line-height:1;letter-spacing:-.035em;display:inline-flex;align-items:baseline;
}
.apr__stat .stats__num .stats__suffix{font-size:.5em;color:var(--orange);font-weight:700;margin-left:.05em}
.apr__stat .stats__label{color:var(--muted);font-size:.84rem;font-weight:500;margin-top:.5rem;line-height:1.35}
.apr__stat + .apr__stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:2.8rem;width:.5px;background:var(--line)}
.apr__stat{padding-inline:clamp(1.1rem,2.5vw,2rem)}
.apr__stat:first-child{padding-left:0}
.apr__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:clamp(22px,3vw,32px)}

.apr__media{position:relative;margin:0;isolation:isolate}
.apr__media-back{
  position:absolute;z-index:-1;left:18px;top:18px;right:-18px;bottom:-18px;
  background:var(--ink);
}
.apr__media img{
  display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/5;box-shadow:var(--shadow-md);
}
.apr__badge{
  position:absolute;left:0;bottom:18px;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--orange);color:#fff;
  font-family:"General Sans",sans-serif;font-weight:600;font-size:.92rem;
  padding:.65rem 1rem;box-shadow:var(--shadow-md);
}
.apr__badge .ico{font-size:1.2rem;color:#fff}

@media(min-width:560px){
  .apr__stats{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:960px){
  .apr__grid{grid-template-columns:1fr}
}

/* ============================================================
   0bis. PREUVE SOCIALE : stats à picto + CTA
   ============================================================ */
.proof__stats{display:grid;gap:14px;grid-template-columns:1fr}
.proof__stat{
  display:flex;align-items:center;gap:.9rem;
  padding:1rem 1.1rem;background:var(--paper-alt);border:.5px solid var(--line);
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.proof__stat:hover{transform:translateY(-4px);border-color:var(--orange)}
.proof__stat .ico{color:var(--orange)}
.proof__stat .stats__num{
  font-family:"General Sans",sans-serif;font-weight:700;color:var(--ink);
  font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1;letter-spacing:-.02em;
}
.proof__stat .stats__label{color:var(--gray);font-size:.9rem;margin-top:.22rem;line-height:1.4}
.proof__foot{margin-top:clamp(28px,4vw,42px);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
@media(min-width:520px){.proof__stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   1. SERVICES — liste éditoriale ultra-moderne, 2 colonnes desktop
   ============================================================ */
.svc2__head{max-width:680px;margin-bottom:clamp(30px,4vw,52px)}

.svc2__list{
  display:grid;grid-template-columns:1fr;
  border-top:.5px solid var(--line);
}
.svc2__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:1rem 1.2rem;padding:1.4rem 0;border-bottom:.5px solid var(--line);
  position:relative;color:var(--ink-soft);
  transition:padding .4s var(--ease);
}
.svc2__row::before{
  content:"";position:absolute;left:-12px;top:0;bottom:0;width:3px;
  background:var(--orange);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);
}
.svc2__row:hover{padding-left:14px}
.svc2__row:hover::before{transform:scaleY(1)}
.svc2__num{
  font-family:"General Sans",sans-serif;font-weight:700;font-size:.82rem;
  color:var(--orange);letter-spacing:.06em;align-self:start;padding-top:.2rem;
}
.svc2__ico{font-size:30px;color:var(--orange);display:none}
.svc2__main{min-width:0}
.svc2__title{
  display:block;font-family:"General Sans",sans-serif;font-weight:700;font-size:1.2rem;
  color:var(--ink);margin-bottom:.3rem;letter-spacing:-.01em;
}
.svc2__desc{display:block;font-size:.98rem;color:var(--gray);line-height:1.55;max-width:60ch}
.svc2__go{
  display:inline-flex;align-items:center;gap:.4rem;align-self:center;white-space:nowrap;
  font-family:"General Sans",sans-serif;font-weight:600;font-size:.86rem;color:var(--ink);
  transition:color .3s var(--ease);
}
.svc2__go .ico{font-size:16px;transition:transform .35s var(--ease)}
.svc2__row:hover .svc2__go{color:var(--orange)}
.svc2__row:hover .svc2__go .ico{transform:translateX(5px)}

@media(min-width:680px){
  .svc2__row{grid-template-columns:auto 34px 1fr auto;gap:1.6rem}
  .svc2__ico{display:block}
}
/* Deux colonnes sur desktop */
@media(min-width:1040px){
  .svc2__list{
    grid-template-columns:1fr 1fr;
    column-gap:clamp(40px,5vw,72px);
    border-top:none;
  }
  .svc2__row{border-top:.5px solid var(--line);border-bottom:none}
}

.services__foot{margin-top:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;gap:.8rem}

/* ============================================================
   2. POURQUOI « LES 3 » — liste à filets + image parallaxe + voile
   ============================================================ */
.why{position:relative;overflow:hidden;isolation:isolate;color:#fff}
.why__bg{
  position:absolute;left:0;right:0;top:-16%;height:132%;z-index:-2;will-change:transform;
  background:url("../assets/img/heros/hero-apropos.webp") center/cover no-repeat;
}
.why__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(29,30,32,.82),rgba(29,30,32,.74));
}
.why__inner{position:relative;z-index:1}
.why__grid{display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:1fr}

.why__title{
  font-family:"General Sans",sans-serif;font-weight:700;color:#fff;
  font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.02em;margin-bottom:.5em;
}
.why__q{color:var(--orange)}
.why__intro{
  color:rgba(255,255,255,.82);font-size:var(--fs-lead);line-height:1.6;max-width:46ch;
}
.why__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

.why__rows{display:flex;flex-direction:column}
.why__row{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2.4vw,32px);
  padding-block:clamp(24px,3vw,34px);
  border-top:.5px solid rgba(255,255,255,.18);
  position:relative;
}
.why__row:last-child{border-bottom:.5px solid rgba(255,255,255,.18)}
.why__idx{
  font-family:"General Sans",sans-serif;font-weight:700;line-height:1;
  font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--orange);min-width:2.4ch;
}
.why__h{
  font-family:"General Sans",sans-serif;font-weight:700;color:#fff;
  font-size:1.35rem;margin-bottom:.4rem;letter-spacing:-.01em;
}
.why__p{color:rgba(255,255,255,.78);font-size:.98rem;line-height:1.6;max-width:54ch}
.why__ico{
  position:absolute;right:0;top:clamp(24px,3vw,34px);
  font-size:46px;color:var(--orange);
  opacity:.55;transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.why__row:hover .why__ico{opacity:1;transform:translateX(-4px)}

@media(min-width:960px){
  .why__grid{grid-template-columns:.86fr 1.14fr;align-items:start}
  .why__aside{position:sticky;top:96px}
}
/* Parallaxe désactivée si l'utilisateur réduit le mouvement */
@media(prefers-reduced-motion:reduce){
  .why__bg{background-attachment:scroll}
}

/* ============================================================
   3. ÉTAPES — timeline centrale, étapes alternées, jalons (effet scroll)
   (inspiration METADIR « process », recréé pour la DA LES3)
   ============================================================ */
.tl{position:relative;overflow:hidden;isolation:isolate;color:#fff}
/* fond en parallaxe TRANSLATÉE (plus fluide que background-attachment:fixed) */
.tl__bg{position:absolute;inset:-64px;z-index:-2;
  background:url("../assets/img/heros/hero-demolition.webp") center/cover no-repeat;will-change:transform}
.tl__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,21,23,.86) 0%,rgba(20,21,23,.78) 50%,rgba(20,21,23,.93) 100%)}
.tl__inner{position:relative;z-index:1}
.tl .head__title{color:#fff}
.tl .head__intro{color:rgba(255,255,255,.8)}

.tl__steps{position:relative;max-width:920px;margin:clamp(40px,6vw,78px) auto 0;
  padding-left:clamp(46px,7vw,96px);display:flex;flex-direction:column;gap:clamp(36px,6vw,66px)}
/* ligne LATÉRALE (à gauche) + remplissage orange qui suit le scroll */
.tl__line{position:absolute;left:14px;top:6px;bottom:6px;width:1px;
  background:rgba(255,255,255,.18);overflow:hidden}
.tl__line-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--orange);
  transform:scaleY(var(--prog,0));transform-origin:top;transition:transform .15s linear}

/* étapes alignées (pas d'alternance) — effet de focus au scroll piloté par --foc :
   l'étape centrée est opaque, les voisines s'estompent, les lointaines disparaissent. */
.tl__step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,42px);
  align-items:center;min-height:clamp(120px,16vh,168px);
  --foc:1;opacity:var(--foc);transition:opacity .55s var(--ease)}
.tl__num{font-family:"General Sans",sans-serif;font-weight:700;line-height:.82;letter-spacing:-.04em;
  font-size:clamp(2.6rem,7vw,5rem);color:var(--orange)}
.tl__content{min-width:0}
.tl__label{display:inline-block;position:relative;padding-left:44px;margin-bottom:.55rem;
  font-family:"General Sans",sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.tl__label::before{content:"";position:absolute;left:0;top:50%;width:32px;height:1px;background:var(--orange)}
.tl__title{font-family:"General Sans",sans-serif;font-weight:700;color:#fff;font-size:clamp(1.3rem,2.5vw,1.85rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:.5rem}
.tl__text{color:rgba(255,255,255,.74);font-size:1rem;line-height:1.7;margin:0;max-width:52ch}
/* jalon diamant orange (anguleux) sur la ligne de gauche */
.tl__dot{position:absolute;left:calc(14px - clamp(46px,7vw,96px));top:50%;width:13px;height:13px;background:var(--orange);
  transform:translate(-50%,-50%) rotate(45deg);z-index:5;
  box-shadow:0 0 0 5px rgba(236,91,64,.16),0 0 22px rgba(236,91,64,.5);
  transition:box-shadow .5s ease}
.tl__step.is-active .tl__dot{animation:tlPulse 3s ease-in-out infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 5px rgba(236,91,64,.16),0 0 22px rgba(236,91,64,.5)}
  50%{box-shadow:0 0 0 9px rgba(236,91,64,.10),0 0 34px rgba(236,91,64,.68)}}
.tl__cta{text-align:center;margin-top:clamp(34px,5vw,60px)}

@media(prefers-reduced-motion:reduce){.tl__dot{animation:none !important}.tl__step{opacity:1 !important}}
@media(max-width:680px){
  .tl__steps{padding-left:36px}
  .tl__line{left:9px}
  .tl__num{font-size:clamp(2.2rem,13vw,3.4rem)}
  .tl__step{gap:14px;min-height:auto}
  .tl__dot{left:calc(9px - 36px)}
}

/* ============================================================
   4. DÉCHETS — bande orange pleine, 40% monumental, cartes flottantes
   ============================================================ */
.wst{overflow:hidden}
.wst__panel{
  position:relative;overflow:hidden;
  background:var(--ink);color:#fff;
  border:.5px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg);
  padding:clamp(36px,5vw,64px) clamp(28px,5vw,60px);
  min-height:clamp(300px,34vw,430px);
}
/* fine rubalise premium en haut de l'encadré (accent LES3) */
.wst__panel::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:4;background:var(--balisage)}
.wst__mesh{
  position:absolute;inset:0;z-index:0;opacity:.07;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:52px 52px;
}
/* forêt détourée au fond de l'encadré, derrière les cartes ; monte au scroll */
.wst__trees{
  position:absolute;left:40%;right:0;bottom:0;top:51%;z-index:1;pointer-events:none;
  background:url("../assets/img/foret-sapins.webp") right bottom/contain no-repeat;
  transform:translateY(56px);opacity:0;
  transition:transform 1.2s var(--ease) .1s,opacity 1s ease .1s;
}
.wst__panel.in-view .wst__trees{transform:translateY(0);opacity:1}
@media(prefers-reduced-motion:reduce){.wst__trees{transition:none;transform:none;opacity:1}}
.wst__top{position:relative;z-index:2;display:grid;gap:36px;align-items:start}
.wst__title{
  font-family:"General Sans",sans-serif;font-weight:700;color:#fff;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.02em;max-width:15ch;
}
.wst__intro{
  margin-top:18px;color:rgba(255,255,255,.92);
  font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;max-width:44ch;
}
/* chiffre + légende alignés horizontalement */
.wst__megastat{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.9rem,1.6vw,1.5rem);text-align:left}
.wst__big{
  font-family:"General Sans",sans-serif;font-weight:700;color:#fff;line-height:.82;
  font-size:clamp(4.4rem,10vw,9rem);letter-spacing:-.04em;
  text-shadow:0 18px 40px rgba(193,63,40,.45);
  display:inline-block;white-space:nowrap;
}
/* le « 40 » : on NEUTRALISE la taille globale .stats__num (max 3.8rem) pour qu'il soit aussi grand que le « % » */
.wst__big .stats__num{color:#fff;font-size:1em;line-height:.82}
/* le « % » : exactement la même taille et la même ligne de base que les chiffres -> un seul bloc « 40% » */
.wst__big sup{color:var(--orange);font-size:1em;vertical-align:baseline;top:0;margin:0;line-height:.82}
.wst__src{margin:.55rem 0 0;font-size:.72rem;line-height:1.4;color:rgba(255,255,255,.6)}
.wst__src a{color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:2px}
.wst__cap{
  margin:0;color:rgba(255,255,255,.85);font-size:.9rem;line-height:1.5;max-width:20ch;
}

/* Cartes flottantes qui chevauchent la bande */
.wst__cards{
  position:relative;z-index:3;margin-top:-46px;
  display:grid;gap:18px;grid-template-columns:1fr;
}
.wst__card{
  background:var(--paper);border:.5px solid var(--line);
  box-shadow:0 34px 80px -28px rgba(29,30,32,.30);
  padding:28px 24px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.wst__card:hover{transform:translateY(-8px);box-shadow:0 44px 90px -26px rgba(29,30,32,.34)}
.wst__ico{font-size:32px;color:var(--orange);margin-bottom:18px}
.wst__card .fico{width:2rem;height:2rem;color:var(--orange);margin-bottom:16px;stroke-width:1.5}
.wst__h{font-family:"General Sans",sans-serif;font-weight:700;color:var(--ink);font-size:1.12rem}
.wst__p{color:var(--gray);margin-top:10px;font-size:.96rem;line-height:1.55}

.wst__foot{margin-top:clamp(30px,4vw,46px);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

@media(min-width:760px){
  .wst__top{grid-template-columns:1fr auto}
  .wst__megastat{justify-content:flex-end;flex-wrap:nowrap}
  .wst__cards{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1080px){
  .wst__cards{grid-template-columns:repeat(4,1fr)}
}

/* Reveal : géré par main.css ([data-reveal] -> .in-view, delay --d). */

/* (Vitrine services : remplacée par les panneaux « La Coste » .rv — voir direction.css §16) */

/* ===== Hero : vidéo de bannière (poster instantané + fondu) ===== */
.hero__media .hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.hero__video.is-playing{opacity:1}

/* ============================================================
   5. PRÉSENTATION SERVICES — une section par service (texte + image alternés)
   ============================================================ */
/* Sous-menu sticky des services (apparaît à la 1re section service) */
.srvnav{position:fixed;left:50%;top:clamp(74px,9vh,94px);z-index:190;
  max-width:calc(100% - 2*clamp(12px,3.5vw,30px));
  transform:translateX(-50%) translateY(-12px);opacity:0;visibility:hidden;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(9px) saturate(1.6);backdrop-filter:blur(9px) saturate(1.6);
  border:.5px solid rgba(255,255,255,.55);border-radius:999px;
  box-shadow:0 18px 44px -26px rgba(13,14,16,.5),inset 0 1px 0 rgba(255,255,255,.7);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.srvnav.is-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.srvnav__list{display:flex;justify-content:safe center;gap:.2rem;overflow-x:auto;padding:.34rem .4rem;scrollbar-width:none;-ms-overflow-style:none}
.srvnav__list::-webkit-scrollbar{display:none}
.srvnav__link{flex:none;font-family:"General Sans",sans-serif;font-weight:600;font-size:.84rem;
  padding:.48rem .95rem;color:var(--ink-soft);text-decoration:none;white-space:nowrap;border-radius:999px;
  transition:color .25s var(--ease),background .25s var(--ease)}
.srvnav__link:hover{color:var(--ink);background:rgba(13,14,16,.05)}
.srvnav__link.is-active{color:#fff;background:var(--orange)}

/* Section service */
.srv{scroll-margin-top:130px}
.srv__grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,56px);align-items:stretch}
.srv__title{font-family:"General Sans",sans-serif;font-weight:700;color:var(--ink);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.06;letter-spacing:-.02em;margin-bottom:.5em}
.srv__lead{color:var(--gray);font-size:var(--fs-lead);line-height:1.6;max-width:52ch;margin-bottom:1.3rem}
/* puces avec pictogramme line très fin, dans un encadré */
.srv__list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.65rem}
.srv__list li{display:flex;align-items:center;gap:.85rem;color:var(--ink);font-family:"General Sans",sans-serif;font-weight:500;font-size:1.04rem;letter-spacing:-.01em;line-height:1.35}
.bico{flex:none;width:2.6rem;height:2.6rem;padding:.58rem;box-sizing:border-box;
  border:.5px solid var(--line-2);background:var(--paper-alt);
  stroke:var(--orange);stroke-width:1.35;fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.srv__list li:hover .bico{border-color:var(--orange);background:#fff}
/* chiffre clé — mise en forme éditoriale (grand nombre serré + suffixe accent + libellé discret) */
.srv__kf{display:block;padding:.1rem 0 .1rem 1.15rem;margin-bottom:1.7rem;border-left:3px solid var(--orange)}
.srv__kf .ico{display:none}
.srv__kf-body{display:block}
.srv__kf-num{font-family:"General Sans",sans-serif;font-weight:700;color:var(--ink);
  font-size:clamp(2rem,4vw,2.8rem);line-height:1;letter-spacing:-.03em;display:inline-flex;align-items:baseline}
.srv__kf-num .stats__suffix{font-size:.55em;margin-left:.06em;color:var(--orange);font-weight:700}
.srv__kf-label{color:var(--muted);font-size:.84rem;font-weight:500;margin-top:.5rem;letter-spacing:.01em}
.srv__actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* Image à côté du bloc texte — CADRE 5 : filet intérieur + bandeau verre en surimpression */
.rbimg{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;border:.5px solid var(--line);isolation:isolate}
/* img en absolu : ne dicte pas la hauteur -> l'image épouse celle du bloc texte */
.rbimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
/* filet intérieur fin */
.rbimg::after{content:"";position:absolute;inset:12px;z-index:2;pointer-events:none;border:.5px solid rgba(255,255,255,.5)}
/* bandeau verre dépoli en bas */
.rbimg__band{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:.85rem;
  padding:.9rem 1.1rem;color:#fff;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(9px) saturate(1.5);backdrop-filter:blur(9px) saturate(1.5);
  border-top:.5px solid rgba(255,255,255,.32)}
.rbimg__tick{width:34px;height:6px;flex:none;background:var(--balisage)}
/* pictogramme du métier dans la bande (remplace l'ancienne rubalise) : orange, visible sur la photo */
.rbimg__ico{width:1.55rem;height:1.55rem;flex:none;color:var(--orange)}
/* #main pour battre la spécificité de #main .ico--svg{color:anthracite} -> pictos en orange */
#main .rbimg__band .ico,#main .rbimg__band .ico--svg{color:var(--orange)}
.rbimg__band .ico--svg svg{width:100%;height:100%}
.rbimg__band strong{display:block;font-family:"General Sans",sans-serif;font-weight:600;font-size:1rem;color:#fff;letter-spacing:-.01em;line-height:1.15}
.rbimg__band em{font-style:normal;font-size:.82rem;color:rgba(255,255,255,.84)}
.rbimg:hover img{transform:scale(1.04)}

@media(min-width:900px){
  .srv__grid{grid-template-columns:1fr 1fr}
  .srv--rev .srv__media{order:2}   /* image à droite : on alterne gauche/droite */
  /* l'image n'impose plus de ratio : elle s'étire à la hauteur du bloc texte */
  .rbimg{aspect-ratio:auto;height:100%}
}

/* ============================================================
   6. RÉASSURANCE — bande de points de confiance (tous les 3 services)
   ============================================================ */
.rea__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rea__item{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:2rem 1.3rem 1.8rem;background:var(--paper);border:.5px solid var(--line);
  transition:transform .35s var(--ease),border-color .35s var(--ease)}
.rea__item:hover{transform:translateY(-4px);border-color:var(--orange)}
.rea__item .ico{color:var(--orange);flex:none;font-size:1.95rem;margin-bottom:.35rem}
/* pictogrammes inline (fiables partout) */
.reaico{width:2rem;height:2rem;flex:none;fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.45rem}
/* bande de balisage (rubalise) en haut de carte, animée au survol */
.rea__item::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:1;
  background:var(--balisage)}
.rea__item:hover::before{animation:reaTape 1s linear infinite}
@keyframes reaTape{to{background-position:19.8px 0}}
@media(prefers-reduced-motion:reduce){.rea__item:hover::before{animation:none}}
.rea__h{font-family:"General Sans",sans-serif;font-weight:700;color:var(--ink);font-size:1.02rem;margin:0 0 .2rem}
.rea__p{color:var(--gray);font-size:.92rem;line-height:1.5;margin:0;max-width:30ch}
.rea__cta{text-align:center;margin-top:clamp(28px,4vw,46px)}
/* mobile : grille 2x2 compacte pour que 2 cartes tiennent par ligne */
@media(max-width:619.98px){
  .rea__item{padding:1.4rem .85rem 1.3rem}
  .reaico{width:1.7rem;height:1.7rem;margin-bottom:.3rem}
  .rea__h{font-size:.92rem}
  .rea__p{font-size:.8rem;line-height:1.45}
}
@media(min-width:620px){.rea__grid{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:1000px){.rea__grid{grid-template-columns:repeat(4,1fr)}}

/* === Cartes & encadrés de l'accueil arrondis (demande client) === */
.rea__item,.rbimg,.apr__media img,.apr__media-back,.why__bg{border-radius:clamp(12px,1.5vw,20px)}

/* === Section déchets accueil : légende 40% lisible et non coupée en mobile === */
@media(max-width:620px){
  .wst__panel{padding-bottom:clamp(54px,15vw,78px)}
  .wst__megastat{flex-direction:column;align-items:flex-start;gap:.45rem}
  .wst__big{font-size:clamp(3.2rem,12vw,5.5rem);line-height:.82}
  .wst__cap{max-width:34ch;color:rgba(255,255,255,.95)}
  .wst__trees{left:50%;top:auto;height:38%;opacity:.4}
}