/* ========================================================================
   R&J Terrassement - Motion & signature layer (add-on, non intrusif)
   Chargé par toutes les pages via <link rel="stylesheet"> APRÈS le CSS main.
   ======================================================================== */

/* -------- Variables motion (héritent de la charte) -------- */
:root{
  --rj-acc:#ea580c;
  --rj-ink:#171c24;
  --rj-ease:cubic-bezier(.2,.7,.1,1);
  --rj-slow:cubic-bezier(.16,.84,.28,1);
}

/* ============================================================
   ESTIMATEUR UNIFIÉ (accueil) - bloc sombre style footer
   État 1 : question + 2 grandes tuiles de choix
   État 2 : outil ouvert avec bouton retour
   ============================================================ */
.est{
  padding:110px 0;
  background:linear-gradient(180deg, #171c24 0%, #1e252f 100%);
  color:#f4efe3; position:relative; overflow:hidden;
}
.est::before{
  /* fine grille lumineuse en fond, très subtile */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 400px at 15% 0%, rgba(234,88,12,.08), transparent 60%),
    radial-gradient(1000px 500px at 100% 100%, rgba(234,88,12,.05), transparent 60%);
}
.est > .wrap{ position:relative; z-index:1; }

/* --- Header --- */
.est-top{ max-width:820px; margin:0 0 40px; }
.est-top .eyebrow{
  display:block; margin-bottom:10px;
  font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.22em; text-transform:uppercase; color:var(--rj-acc);
}
.est-top h2{
  margin:0 0 14px; color:#f4efe3;
  font-size:clamp(32px,4.2vw,52px);
}
.est-top .est-sub{
  color:rgba(244,239,227,.72); max-width:620px; margin:0;
  font:400 16px/1.55 "Barlow",sans-serif;
}

/* --- État CHOIX (visible par défaut) --- */
.est-choice{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin-top:8px;
}
.est-card{
  position:relative; overflow:hidden;
  padding:36px 32px 32px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(244,239,227,.14);
  border-radius:2px;
  color:#f4efe3;
  text-align:left; cursor:pointer;
  font-family:inherit; display:block; text-decoration:none;
  transition:background .28s var(--rj-ease), border-color .28s var(--rj-ease), transform .28s var(--rj-ease);
}
.est-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--rj-acc);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .42s var(--rj-ease);
}
.est-card:hover, .est-card:focus-visible{
  background:rgba(255,255,255,.07);
  border-color:rgba(234,88,12,.5);
  transform:translateY(-2px);
  outline:none;
}
.est-card:hover::after, .est-card:focus-visible::after{ transform:scaleX(1); }

.est-card .ec-icon{
  width:56px; height:56px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(234,88,12,.14);
  border:1px solid rgba(234,88,12,.35);
  border-radius:2px;
  color:var(--rj-acc);
  font:700 22px/1 "JetBrains Mono",ui-monospace,monospace;
}
.est-card .ec-num{
  position:absolute; top:22px; right:22px;
  font:600 10px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.22em; color:rgba(244,239,227,.45);
}
.est-card h3{
  margin:0 0 10px; color:#f4efe3;
  font:700 clamp(24px,2.6vw,32px)/1.05 "Barlow Condensed",sans-serif;
  letter-spacing:-.01em;
}
.est-card .ec-desc{
  margin:0 0 24px; color:rgba(244,239,227,.72);
  font:400 15px/1.5 "Barlow",sans-serif;
}
.est-card .ec-cta{
  display:inline-flex; align-items:center; gap:10px;
  font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--rj-acc);
  padding:10px 0 6px;
  border-bottom:1px solid rgba(234,88,12,.5);
  transition:gap .28s var(--rj-ease);
}
.est-card:hover .ec-cta{ gap:14px; }

/* --- État OUTIL OUVERT --- */
.est-tool{ display:none; }
.est.on-mat .est-choice, .est.on-eng .est-choice{ display:none; }
.est.on-mat #estToolMat, .est.on-eng #estToolEng{ display:block; }

.est-tool-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin:0 0 26px;
  padding:16px 20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(244,239,227,.14);
  border-radius:2px;
}
.est-back{
  display:inline-flex; align-items:center; gap:8px;
  padding:0; border:none; background:transparent; cursor:pointer;
  font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,239,227,.7);
  transition:color .24s var(--rj-ease), gap .24s var(--rj-ease);
}
.est-back:hover{ color:var(--rj-acc); gap:12px; }
.est-tool-lb{
  font:700 14px/1 "Barlow Condensed",sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--rj-acc);
}

/* Le contenu du calc/selecteur est un carton clair posé sur le fond sombre */
.est-tool-body{
  background:#f4efe3;
  color:var(--rj-ink);
  border-radius:2px;
  padding:38px 34px 34px;
}
.est-tool-body .wrap{ padding:0 !important; max-width:none; }
.est-tool-body > *:first-child, .est-tool-body .wrap > *:first-child{ margin-top:0 !important; }

/* ============================================================
   SECTION "AVANT / APRÈS" v3 (accueil)
   Slider avant/après en tête + double bandeau photo & mots-clés
   ============================================================ */
.ripbn{ padding:110px 0 0; background:#f4efe3; overflow:hidden; }
.ripbn-top{ max-width:820px; margin:0 0 26px; }
.ripbn-top .eyebrow{
  display:block; margin-bottom:8px;
  font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rj-acc);
}
.ripbn-top h2{ margin:0 0 12px; }
.ripbn-top p{ color:rgba(23,28,36,.72); max-width:640px; margin:0; }

/* Le slider ba (réutilise le style ba-* existant, on renforce marginales) */
.ripbn .ba{ margin-bottom:56px; }

/* Ribbon photos (défile ← , vitesse lente) */
.ripbn-photos{
  position:relative; overflow:hidden;
  padding:22px 0;
  border-top:1px solid rgba(23,28,36,.14);
  border-bottom:1px solid rgba(23,28,36,.14);
  background:#f4efe3;
}
.ripbn-photos .rp-tr{
  display:flex; gap:14px; white-space:nowrap;
  animation:rj-ph-scroll 48s linear infinite;
  will-change:transform;
}
.ripbn-photos .rp-i{
  flex:none; width:220px; height:150px;
  background-size:cover; background-position:center;
  border-radius:2px;
  filter:grayscale(10%) contrast(1.02);
  transition:filter .28s var(--rj-ease), transform .28s var(--rj-ease);
}
.ripbn-photos .rp-i:hover{ filter:none; transform:scale(1.03); }
@keyframes rj-ph-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Ribbon mots-clés - fond sombre, défile → (sens inverse) */
.ripbn-kw{
  background:#171c24;
  padding:22px 0;
  overflow:hidden;
}
.ripbn-kw .rk-tr{
  display:flex; gap:48px; white-space:nowrap;
  animation:rj-kw-scroll 38s linear infinite;
  will-change:transform;
}
.ripbn-kw .rk-i{
  flex:none; display:inline-flex; align-items:center; gap:16px;
  font:700 16px/1 "Barlow Condensed",sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:#f4efe3;
}
.ripbn-kw .rk-i::after{
  content:"◆"; color:var(--rj-acc); font-size:10px; margin-left:10px;
}
@keyframes rj-kw-scroll{ from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* Pause au hover pour laisser lire */
.ripbn-photos:hover .rp-tr,
.ripbn-kw:hover .rk-tr{ animation-play-state:paused; }

@media (max-width:640px){
  .ripbn{ padding:80px 0 0; }
  .ripbn-photos .rp-i{ width:160px; height:110px; }
  .ripbn .ba{ margin-bottom:36px; }
}

/* ============================================================
   Fix débordement : bloc .adv (materiaux "acheter en direct")
   ============================================================ */
.adv{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:20px;
  max-width:1200px;
  margin-left:auto; margin-right:auto;
  padding:0;
  box-sizing:border-box;
}
.adv .av{
  min-width:0;
  padding:28px 22px 24px;
  background:#fff;
  border:1px solid rgba(23,28,36,.14);
  border-radius:2px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
  transition:border-color .28s var(--rj-ease), transform .28s var(--rj-ease), box-shadow .28s var(--rj-ease);
}
.adv .av:hover{
  border-color:rgba(234,88,12,.4);
  transform:translateY(-2px);
  box-shadow:0 12px 30px -20px rgba(23,28,36,.3);
}
.adv .av-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:transparent;
  margin-bottom:4px;
}
.adv .av-ic .ci{ display:inline-block; width:48px; height:48px; }
.adv .av-ic .ci svg{ width:100%; height:100%; }
.adv .av h3{
  margin:0;
  font:700 18px/1.15 "Barlow Condensed",sans-serif;
  letter-spacing:.02em; color:var(--rj-ink);
}
.adv .av p{
  margin:0; color:rgba(23,28,36,.7);
  font:400 14px/1.5 "Barlow",sans-serif;
  max-width:26ch;
}
@media (max-width:1024px){
  .adv{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width:520px){
  .adv{ grid-template-columns:1fr !important; }
}

/* ============================================================
   .rj-ct-row : forcé au 100% du .wrap parent (posé côté HTML)
   ============================================================ */
.rj-ct-row{
  width:100%;
  box-sizing:border-box;
}
@media (max-width:640px){
  .rj-ct-row{ gap:16px 20px; }
  .rj-ct-cell .rj-ct{ font-size:clamp(30px,7vw,44px); }
}

/* "Recommandation indicative" - plus grand, plus lisible */
.est-tool-body .disc{
  margin-top:24px;
  padding:18px 22px;
  background:rgba(23,28,36,.05);
  border-left:3px solid var(--rj-acc);
  border-radius:2px;
  font:400 15px/1.55 "Barlow",sans-serif;
  color:rgba(23,28,36,.82);
}
.est-tool-body .disc b{
  color:var(--rj-ink);
  font-weight:700;
  display:inline;
  margin-right:4px;
}

@media (max-width:820px){
  .est{ padding:80px 0; }
  .est-choice{ grid-template-columns:1fr; gap:14px; }
  .est-card{ padding:28px 22px 24px; }
  .est-tool-body{ padding:24px 18px 22px; }
  .est-tool-body .disc{ padding:14px 16px; font-size:14px; }
}

/* ============================================================
   BLOC "LES 3 MÉTIERS" - grille asymétrique 2 col
   1 grande card à gauche (Terrassement) + 2 empilées à droite
   ============================================================ */
.metiers{ padding:120px 0 100px; background:#f4efe3; }
.metiers-top{ max-width:820px; margin:0 0 44px; }
.metiers-top .eyebrow{
  display:block; margin-bottom:8px;
  font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--rj-acc);
}
.metiers-top h2{ margin:0 0 14px; }
.metiers-top p{ color:rgba(23,28,36,.72); max-width:640px; }
.metiers-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:16px;
  grid-auto-rows:1fr;
}
.metiers-grid .mc{
  position:relative; overflow:hidden; border-radius:2px;
  min-height:280px; display:block; color:inherit; text-decoration:none;
  background:#171c24;
  transition:transform .38s var(--rj-slow), box-shadow .38s var(--rj-slow);
}
.metiers-grid .mc.mc-lg{ grid-row:span 2; min-height:100%; }
.metiers-grid .mc:hover{ transform:translateY(-3px); box-shadow:0 24px 60px -30px rgba(23,28,36,.5); }
.metiers-grid .mc-im{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:grayscale(18%) contrast(1.02);
  transition:transform .8s var(--rj-slow), filter .5s var(--rj-slow);
}
.metiers-grid .mc:hover .mc-im{ transform:scale(1.06); filter:none; }
.metiers-grid .mc::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(23,28,36,0) 30%, rgba(23,28,36,.86) 92%);
}
.metiers-grid .mc::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--rj-acc); transform:scaleX(0); transform-origin:left center;
  transition:transform .42s var(--rj-ease); z-index:2;
}
.metiers-grid .mc:hover::after{ transform:scaleX(1); }
.metiers-grid .mc-in{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:28px 26px 26px; color:#f4efe3;
}
.metiers-grid .mc-fam{
  display:block; margin-bottom:10px;
  font:600 10px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--rj-acc);
}
.metiers-grid .mc-in h3{
  margin:0 0 10px; color:#f4efe3;
  font:700 clamp(22px,2.4vw,32px)/1.05 "Barlow Condensed",sans-serif;
  letter-spacing:-.01em;
}
.metiers-grid .mc-in p{
  margin:0 0 14px; color:rgba(244,239,227,.82);
  font:400 14px/1.5 "Barlow",sans-serif; max-width:44ch;
}
.metiers-grid .mc-cta{
  display:inline-flex; align-items:center; gap:6px;
  font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--rj-acc);
  padding:8px 0 4px; border-bottom:1px solid rgba(234,88,12,.5);
  transition:border-color .28s var(--rj-ease), gap .28s var(--rj-ease);
}
.metiers-grid .mc:hover .mc-cta{ border-color:var(--rj-acc); gap:12px; }
@media (max-width:820px){
  .metiers-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .metiers-grid .mc.mc-lg{ grid-row:auto; min-height:280px; }
}

/* ============================================================
   BLOC "RAPHAËL + ENGAGEMENTS" fusionné
   ============================================================ */
.abt{ padding:120px 0 100px; background:#fff; }
.abt-sp{ display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:center; }
.abt-ph{ position:relative; }
.abt-ph img{ width:100%; height:auto; border-radius:2px; display:block;
  filter:grayscale(10%) contrast(1.02); }
.abt-ph .fr{ position:absolute; inset:16px -16px -16px 16px;
  background:var(--rj-acc); z-index:-1; }
.abt-right .eyebrow{
  display:block; margin-bottom:8px;
  font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--rj-acc);
}
.abt-right h2{ margin:0 0 14px; }
.abt-right .lead{ font:400 17px/1.55 "Barlow",sans-serif;
  color:rgba(23,28,36,.85); margin:0 0 22px; max-width:56ch; }
.abt-eng{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:14px 24px; margin:22px 0 28px;
  padding:22px 0 6px; border-top:1px solid rgba(23,28,36,.14);
}
.abt-eng .eng-i{ display:flex; gap:12px; align-items:flex-start; }
.abt-eng .eng-i .n{
  flex:none; width:28px;
  font:700 12px/1 "JetBrains Mono",ui-monospace,monospace;
  color:var(--rj-acc); padding-top:3px; letter-spacing:.06em;
}
.abt-eng .eng-i .t{
  font:600 14px/1.35 "Barlow",sans-serif; color:var(--rj-ink);
}
.abt-eng .eng-i .d{
  display:block; font-weight:400; margin-top:4px;
  color:rgba(23,28,36,.65); font-size:13px; line-height:1.45;
}
.abt-ctas{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-top:6px; }
.abt-ctas .btn-hi{
  display:inline-block; padding:14px 22px;
  background:var(--rj-acc); color:#fff; text-decoration:none;
  font:700 13px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.14em; text-transform:uppercase; border-radius:2px;
}
.abt-ctas .tel{
  font:700 22px/1 "Barlow Condensed",sans-serif;
  color:var(--rj-ink); text-decoration:none; letter-spacing:.02em;
  padding:8px 0; border-bottom:2px solid var(--rj-acc);
}
@media (max-width:820px){
  .abt-sp{ grid-template-columns:1fr; gap:36px; }
  .abt-eng{ grid-template-columns:1fr; }
}

/* ============================================================
   1) SIGNATURE HOVER : rectangle noir qui glisse sous le CTA orange
   Se pose sur : .nv-cta, .zcta, .btn-hi (CTA principaux orange)
   Aussi disponible via .rj-swipe (utilisable partout au besoin)
   ============================================================ */
.nv-cta,.zcta,.btn-hi,.rj-swipe{
  position:relative; z-index:0; overflow:hidden;
  isolation:isolate;
}
.nv-cta::before,.zcta::before,.btn-hi::before,.rj-swipe::before{
  content:""; position:absolute; inset:0;
  background:var(--rj-ink);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .32s var(--rj-ease);
  z-index:-1;
}
.nv-cta:hover::before,.nv-cta:focus-visible::before,
.zcta:hover::before,.zcta:focus-visible::before,
.btn-hi:hover::before,.btn-hi:focus-visible::before,
.rj-swipe:hover::before,.rj-swipe:focus-visible::before{
  transform:scaleX(1);
}
.nv-cta,.zcta,.btn-hi,.rj-swipe{
  transition:color .28s var(--rj-ease), box-shadow .28s var(--rj-ease);
}
.nv-cta:hover,.zcta:hover,.btn-hi:hover,.rj-swipe:hover{
  color:#f4efe3 !important;
  box-shadow:0 6px 24px -8px rgba(23,28,36,.35);
}
/* Trait orange en bas qui reste visible pendant que le fond noir glisse */
.nv-cta::after,.zcta::after,.btn-hi::after,.rj-swipe::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--rj-acc);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .38s var(--rj-ease) .06s;
}
.nv-cta:hover::after,.zcta:hover::after,.btn-hi:hover::after,.rj-swipe:hover::after{
  transform:scaleX(1);
}

/* ============================================================
   2) WALL RÉALISATIONS - hover riche
   ============================================================ */
.rcard{
  position:relative; overflow:hidden;
  transition:transform .38s var(--rj-slow), box-shadow .38s var(--rj-slow);
}
.rcard::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--rj-acc);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .42s var(--rj-ease);
}
.rcard:hover{ transform:translateY(-3px); box-shadow:0 14px 42px -18px rgba(23,28,36,.35); }
.rcard:hover::after{ transform:scaleX(1); }
.rcard img,.rcard video{
  transition:transform .9s var(--rj-slow), filter .5s var(--rj-slow);
}
.rcard:hover img,.rcard:hover video{
  transform:scale(1.06);
  filter:contrast(1.03) saturate(1.05);
}
.rcard .rc-meta,.rcard .rc-fam,.rcard .rc-count{
  transition:transform .38s var(--rj-ease), color .38s var(--rj-ease);
}
.rcard:hover .rc-meta{ transform:translateX(4px); }
.rcard:hover .rc-fam{ color:var(--rj-acc); }

/* Video cards hero du mur (autoplay muted loop) */
.rcard.rc-video video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.rcard.rc-video{ position:relative; }
.rcard.rc-video::before{
  content:"● VIDÉO"; position:absolute; top:10px; left:10px; z-index:3;
  font:600 10px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.14em; padding:5px 8px; border-radius:2px;
  background:rgba(23,28,36,.82); color:#f4efe3;
  animation:rj-pulse 2.6s ease-in-out infinite;
}
@keyframes rj-pulse{ 0%,100%{opacity:.85} 50%{opacity:1} }

/* Cascade par famille (le container reçoit .stag-fam) */
.stag-fam > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--rj-slow), transform .7s var(--rj-slow);
}
.stag-fam.in > *{ opacity:1; transform:none; }

/* ============================================================
   3) COMPTEURS - style monospace inséré si pas déjà présent
   (le .ct existant sur les pages garde son style ; on ajoute juste
    .rj-ct pour les compteurs qu'on injecte)
   ============================================================ */
.rj-ct{
  font-family:"Barlow Condensed","Barlow",sans-serif;
  font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--rj-ink); line-height:1;
}
.rj-ct-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:22px 32px; margin:22px 0 6px;
}
.rj-ct-cell{
  padding:16px 0 14px; border-top:1px solid rgba(23,28,36,.14);
}
.rj-ct-cell .rj-ct{ font-size:clamp(38px,4.6vw,58px); }
.rj-ct-cell .rj-ct-lb{
  display:block; margin-top:8px;
  font:600 11px/1.35 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(23,28,36,.62);
}

/* ============================================================
   4) CALCULATEUR - pile de graviers SVG qui se remplit
   ============================================================ */
.rj-pile-wrap{
  display:flex; align-items:flex-end; justify-content:center;
  padding:10px 0 4px;
}
.rj-pile{ width:min(220px,60%); height:auto; }
.rj-pile .pile-fill{
  fill:none; stroke:var(--rj-acc); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:600; stroke-dashoffset:600;
  transition:stroke-dashoffset .9s var(--rj-slow);
}
.rj-pile .pile-shade{
  fill:rgba(234,88,12,.10); opacity:0;
  transition:opacity .9s var(--rj-slow);
}
.rj-pile.on .pile-fill{ stroke-dashoffset:0; }
.rj-pile.on .pile-shade{ opacity:1; }
.rj-pile-cap{
  text-align:center;
  font:600 11px/1.4 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(23,28,36,.62); margin-top:6px;
}

/* ============================================================
   5) SÉLECTEUR ENGIN - camion qui se remplit (icônes qui tombent)
   ============================================================ */
.rj-truck-wrap{
  position:relative; margin:14px 0 6px;
  padding:10px 12px 12px; border:1px solid rgba(23,28,36,.14);
  background:#f8f5ee; border-radius:2px;
}
.rj-truck-lb{
  font:600 10px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(23,28,36,.62); margin-bottom:8px;
}
.rj-truck{
  position:relative; height:74px;
  display:flex; align-items:flex-end; justify-content:flex-start;
  gap:8px; padding:0 4px;
  background:
    linear-gradient(#eae4d2 0 100%) bottom/100% 4px no-repeat,
    #f8f5ee;
}
.rj-truck-load{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:2px;
  background:#fff; border:1px solid rgba(23,28,36,.16);
  font:700 11px/1 "Barlow Condensed",sans-serif;
  color:var(--rj-ink); opacity:0; transform:translateY(-40px);
}
.rj-truck-load.in{ animation:rj-drop .55s var(--rj-slow) forwards; }
@keyframes rj-drop{
  0%{opacity:0; transform:translateY(-48px)}
  62%{opacity:1; transform:translateY(4px)}
  78%{transform:translateY(-3px)}
  100%{opacity:1; transform:translateY(0)}
}

/* ============================================================
   6) PARALLAX - hint utilitaire (le JS fait le vrai boulot avec anime.onScroll)
   ============================================================ */
[data-pll]{ will-change:transform; }

/* ============================================================
   7) DRAW-IN SVG SOUS H2 - trait orange qui se trace
   ============================================================ */
.rj-h2-line{
  display:block; height:8px; width:min(160px,42%);
  margin:10px 0 18px; overflow:visible;
}
.rj-h2-line path{
  fill:none; stroke:var(--rj-acc); stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:200; stroke-dashoffset:200;
  transition:stroke-dashoffset 1.1s var(--rj-slow);
}
.rj-h2-line.in path{ stroke-dashoffset:0; }
/* Variante centrée */
h1[style*="text-align:center"] + .rj-h2-line,
h2[style*="text-align:center"] + .rj-h2-line,
.center > .rj-h2-line{ margin-left:auto; margin-right:auto; }

/* ============================================================
   8) KINBURNS HERO - respiration très lente sur la photo active
   ============================================================ */
.hero-bg{
  will-change:transform;
}
.hero-bg.on{
  animation:rj-kinburns 12s var(--rj-slow) both;
}
@keyframes rj-kinburns{
  0%  { transform:scale(1)    translate3d(0,0,0); }
  100%{ transform:scale(1.08) translate3d(-1.4%,-1.6%,0); }
}

/* ============================================================
   9) MARQUEE COMMUNES - variante bas de page zone
   ============================================================ */
.rj-mq-comm{
  overflow:hidden; border-top:1px solid rgba(23,28,36,.14);
  border-bottom:1px solid rgba(23,28,36,.14);
  padding:14px 0; margin:36px 0 0; background:#f8f5ee;
}
.rj-mq-comm .rj-mq-tr{
  display:flex; gap:44px; white-space:nowrap;
  animation:rj-mq-scroll 42s linear infinite;
  will-change:transform;
}
.rj-mq-comm .rj-mq-i{
  font:700 15px/1 "Barlow Condensed",sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:var(--rj-ink);
  display:inline-flex; align-items:center; gap:12px;
}
.rj-mq-comm .rj-mq-i::before{
  content:"●"; color:var(--rj-acc); font-size:10px;
}
@keyframes rj-mq-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============================================================
   10) PRELOADER GRAVIERS - trait orange qui trace un tas
   S'active si le HTML contient déjà #pre ; on remplit son contenu en JS.
   ============================================================ */
#pre .rj-pre-svg{ width:120px; height:auto; }
#pre .rj-pre-svg path{
  fill:none; stroke:var(--rj-acc); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:rj-pre-draw 1.1s var(--rj-slow) .08s forwards;
}
#pre .rj-pre-lb{
  display:block; margin-top:14px;
  font:600 10px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(23,28,36,.62);
  opacity:0; animation:rj-pre-lb .5s ease-out .9s forwards;
}
@keyframes rj-pre-draw{ to{ stroke-dashoffset:0 } }
@keyframes rj-pre-lb{ to{ opacity:1 } }

/* ============================================================
   Cursor accent : léger tint pour hover CTA orange
   ============================================================ */
.rj-swipe,.nv-cta,.zcta,.btn-hi{ backface-visibility:hidden; }

/* ============================================================
   BROWSER SURFACES - text selection, caret, scrollbar, focus ring
   Signal "fait main" que les modèles skippent le plus systématiquement.
   ============================================================ */
::selection{ background:var(--rj-acc); color:#f4efe3; text-shadow:none; }
::-moz-selection{ background:var(--rj-acc); color:#f4efe3; text-shadow:none; }

html{ caret-color:var(--rj-acc); }
:focus-visible{
  outline:2px solid var(--rj-acc);
  outline-offset:3px;
  border-radius:2px;
}
button:focus-visible, a:focus-visible, .rj-swipe:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--rj-acc);
  outline-offset:3px;
}

/* Scrollbar Firefox */
html{ scrollbar-color:var(--rj-acc) transparent; scrollbar-width:thin; }

/* Scrollbar WebKit / Blink */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(23,28,36,.32), rgba(23,28,36,.55));
  border:2px solid #f4efe3;
  border-radius:2px;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--rj-acc);
}
::-webkit-scrollbar-corner{ background:transparent; }

/* Numeric alignment : tabular figures dans les compteurs, prix, coordonnées */
.rj-ct, .ct[data-to], .rj-mq-comm, [class*="tarif"], time, .phone, .tel{
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   PREFERS REDUCED MOTION - kill toutes les animations décoratives
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .nv-cta::before,.zcta::before,.btn-hi::before,.rj-swipe::before,
  .nv-cta::after,.zcta::after,.btn-hi::after,.rj-swipe::after,
  .rcard, .rcard img, .rcard video, .rcard::after,
  .rj-h2-line path, .rj-pile .pile-fill, .rj-pile .pile-shade,
  .rj-truck-load, .hero-bg.on, .rj-mq-comm .rj-mq-tr,
  #pre .rj-pre-svg path, #pre .rj-pre-lb, .rcard.rc-video::before{
    transition:none !important; animation:none !important;
  }
  .rj-pile .pile-fill{ stroke-dashoffset:0 }
  .rj-pile .pile-shade{ opacity:1 }
  .rj-h2-line path{ stroke-dashoffset:0 }
  .rj-truck-load{ opacity:1; transform:none }
  #pre .rj-pre-svg path{ stroke-dashoffset:0 }
  #pre .rj-pre-lb{ opacity:1 }
}

/* Bandeau pleine largeur en rotation : pile d'images, une seule visible (opacity) */
.pband.rot img{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease }
.pband.rot img.on{ opacity:1 }