/* =========================================================
   ACCUEIL « FILM SCROLLÉ » — scroll3d.css (07/11/2026)
   Chargé après refonte.css. Tout est préfixé .fx : cette classe est posée sur <html>
   par js/scroll3d.js, uniquement si GSAP est chargé et si le visiteur n'a PAS demandé
   « moins d'animations ». Sans JavaScript ou en mouvement réduit, l'ancien rendu s'affiche.
   Aucun texte du site n'est modifié ; les éléments décoratifs sont injectés par le script (aria-hidden).
   ========================================================= */
html.fx-rich{scroll-behavior:auto}

/* ---------- Fond vivant : trois halos de couleur qui dérivent et changent de teinte selon la scène ---------- */
.fx-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;--c1:rgba(27,63,114,.55);--c2:rgba(75,146,208,.2);--c3:rgba(12,41,82,.6)}
.fx-ambient i{position:absolute;border-radius:50%;will-change:transform}
.fx-ambient .a1{width:95vmax;height:95vmax;left:-40vmax;top:-38vmax;background:radial-gradient(circle,var(--c1),transparent 62%)}
.fx-ambient .a2{width:75vmax;height:75vmax;right:-34vmax;top:18vh;background:radial-gradient(circle,var(--c2),transparent 62%)}
.fx-ambient .a3{width:85vmax;height:85vmax;left:8vw;bottom:-62vmax;background:radial-gradient(circle,var(--c3),transparent 64%)}
.fx-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;background:url(../images/grain-64.png) 0 0/64px 64px repeat}

/* Sections transparentes : le fond vivant se voit partout, les bandes se fondent les unes dans les autres */
.fx .brand-rail{background:linear-gradient(180deg,#070D18 0,rgba(7,13,24,0) 72%);border:0}
.fx .hero-stats{background:transparent;border:0}
.fx .commit{background:linear-gradient(180deg,rgba(11,34,51,0),rgba(11,34,51,.6) 18%,rgba(11,34,51,.6) 82%,rgba(11,34,51,0));border:0}
.fx .dgs,.fx .reviews,.fx .award,.fx .certif,.fx .faq{background:transparent;border-top-color:transparent}
.fx .contact{background:linear-gradient(180deg,rgba(7,13,24,0),var(--darkest) 60%);border-top:0}
.fx .rev-card,.fx .audit-card{background-color:rgba(19,32,57,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------- Mots qui se lèvent (titres) ---------- */
.fx .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .16em;margin:0 -.03em -.16em}
.fx .w>span{display:inline-block}

/* ---------- Ouverture : la façade avance vers l'entrée ---------- */
.fx .hero-home .hero-media{transform:none!important;will-change:auto}
.fx .hero-home .hero-media img{animation:none;will-change:transform}
.fx-veil{position:absolute;inset:0;background:var(--darkest);opacity:0;pointer-events:none}

/* ---------- Marques : légère inclinaison au survol (souris) ---------- */
.fx .brand-rail .brand-tile{transition:border-color .2s ease}
@media (min-width:981px){
  .fx .brand-tile .plate{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease-out,box-shadow .7s ease}
  .fx .brand-tile:hover .plate,.fx .brand-tile:focus-visible .plate{transform:perspective(700px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
}

/* ---------- Preuves : jauge sous la note DEKRA ---------- */
.fx-meter{display:block;align-self:center;width:min(132px,72%);height:3px;margin-top:.75rem;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.fx-meter b{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--brand),var(--brand-light) 60%,#a9d4ff)}
.fx .audit-card .fx-meter{align-self:flex-start;width:min(220px,100%);margin:0 0 1rem;position:relative}

/* ---------- Services : piste horizontale épinglée (ordinateur) ---------- */
.fx #services .svc-grid.reveal{opacity:1;transform:none;transition:none}
.fx #services .stagger.in>*{animation:none}
.fx #services .svc-card{transition:border-color .5s ease,background-color .5s ease}
.fx #services.is-h .wrap{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-areas:"head view" "note view";grid-template-rows:auto 1fr;column-gap:clamp(1.5rem,4vw,4rem);max-width:none;padding-left:max(22px,calc((100vw - var(--maxw))/2 + 22px));padding-right:0;align-items:start}
.fx #services.is-h .block-head{grid-area:head;margin:0;align-self:end;max-width:none}
.fx #services.is-h .certif-note{grid-area:note;margin:1.2rem 0 0;align-self:start}
.fx #services.is-h .svc-view{grid-area:view;grid-row:1 / span 2;overflow:hidden;overflow:clip;align-self:center;padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px);mask-image:linear-gradient(90deg,transparent 0,#000 70px)}
.fx #services.is-h .svc-grid{display:flex;gap:22px;width:max-content;padding-left:72px;padding-right:6vw;position:relative}
.fx #services.is-h .svc-card{flex:0 0 clamp(290px,22.5vw,350px);transform:perspective(1100px) rotateY(var(--ry,0deg)) scale(var(--sc,1));will-change:transform}
.fx #services.is-h .svc-card:hover{transform:perspective(1100px) rotateY(var(--ry,0deg)) translateY(-4px) scale(var(--sc,1))}
/* ---------- Services : pile de cartes (téléphone) ---------- */
@media (max-width:760px){
  .fx #services.is-stack .svc-grid{display:block}
  .fx #services.is-stack .svc-card{position:sticky;top:calc(18px + var(--i,0) * 15px);margin-bottom:18px;transform-origin:50% 0;box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
}

/* ---------- Engagements : titre fixe, phrases qui s'allument une à une ---------- */
@media (min-width:981px){
  .fx .commit.is-split .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,5rem);align-items:start;padding-block:clamp(4rem,9vw,7rem)}
  .fx .commit.is-split .commit-top{position:sticky;top:calc(var(--hdr-h,80px) + 50px);flex-direction:column;align-items:flex-start;gap:1rem;margin:0}
  .fx .commit.is-split .commit-top h2{font-size:clamp(2.2rem,4vw,3.3rem);line-height:1.04}
  .fx .commit.is-split .commit-list{grid-template-columns:1fr;gap:0}
  .fx .commit.is-split .commit-item{font-size:clamp(1.05rem,1.5vw,1.28rem);color:#fff;padding:1.2rem 0;border-top:1px solid rgba(255,255,255,.1);align-items:center;gap:1rem}
  .fx .commit.is-split .commit-item svg{width:26px;height:26px;margin-top:0}
}

/* ---------- Vidéo ---------- */
.fx #visite-video .video-card{transition:none;will-change:transform}
.fx #visite-video .stagger.in>*{animation:none}

/* ---------- Avis / distinction / audit ---------- */
.fx .reviews .stagger.in>*,.fx .certif .stagger.in>*,.fx .contact .stagger.in>*,.fx .dgs .stagger.in>*{animation:none}
.fx .award-badge{transition:none}
.fx .award-inner:hover .award-badge{transform:none}
/* Badge Auto Plus : médaille à deux faces qui tourne en continu (js/scroll3d.js) */
.fx .award-spin{flex:0 0 auto;width:clamp(150px,22vw,220px);perspective:900px}
.fx .award-coin{position:relative;transform-style:preserve-3d}
.fx .award-coin .award-badge{display:block;width:100%;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fx .award-coin .award-back{position:absolute;inset:0;width:100%;height:100%;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 10px 28px rgba(242,106,18,.28))}
.fx .audit-card{transition:border-color .5s ease}
.fx .rev-card{will-change:transform}

/* Correctif : la règle d'origine « .audit-score span{font-size:.4em} » rapetissait aussi le chiffre lui-même (le <span class="count"> des compteurs). */
.audit-score .count{font-size:1em;color:inherit;font-weight:inherit}

/* Encart « Reconnu par la presse auto » : le filet qui précède la phrase est repris à la fin, pour l'encadrer */
.award-copy .eyebrow::after{content:"";width:26px;height:1px;background:var(--brand-light)}

/* ---------- Contact : numéro fantôme qui dérive ---------- */
.fx-ghost{position:absolute;left:0;right:0;bottom:-.14em;z-index:0;text-align:center;white-space:nowrap;font:900 clamp(64px,13.5vw,230px)/1 var(--font-display);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.075);pointer-events:none;user-select:none}

/* ---------- Fil conducteur : une route lumineuse qui se dessine sur le côté ---------- */
.fx-route{position:fixed;left:clamp(14px,2.2vw,40px);top:22vh;height:56vh;width:1px;z-index:40;pointer-events:none;opacity:0;transition:opacity .6s ease}
.fx-route.on{opacity:1}
.fx-route-bar{position:absolute;inset:0;background:rgba(255,255,255,.14)}
.fx-route-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(180deg,var(--brand-light),#a9d4ff);transform-origin:top;transform:scaleY(0)}
.fx-route-tick{position:absolute;left:-3px;width:7px;height:1px;background:rgba(255,255,255,.38)}
.fx-route-dot{position:absolute;left:-4px;top:0;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(75,146,208,.3),0 0 18px 4px rgba(75,146,208,.6)}
.fx-route-label{position:absolute;left:20px;top:0;margin-top:-.7em;font:500 .66rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap;transition:opacity .3s ease}
@media (max-width:1279px){.fx-route{display:none}}
@media (max-width:1499px){.fx-route-label{display:none}}

/* =========================================================
   Scène 3D du toit ouvrant — styles propres à l'accueil
   (décor commun : css/sunroof-scene.css, chargé avant ce fichier)
   ========================================================= */
.fx .dgs.is-3d .dgs-media img{opacity:0;transition:opacity .9s ease}

/* Version « épinglée » (ordinateur) : la scène occupe tout l'écran, le texte flotte à droite */
.fx .dgs.is-pin{position:relative;overflow:hidden;padding:0;min-height:100vh;min-height:100svh;display:flex;align-items:center}
.fx .dgs.is-pin>.wrap{position:relative;z-index:2;width:100%}
.fx .dgs.is-pin .dgs-grid.reveal,.fx .dgs.is-auto .dgs-grid.reveal{opacity:1;transform:none;transition:none}
.fx .dgs.is-pin .dgs-grid{grid-template-columns:minmax(0,1fr) minmax(420px,540px)}
.fx .dgs.is-pin .dgs-media{min-height:0;height:min(62vh,560px)}
.fx .dgs.is-pin .dgs-body{margin-left:0;padding:2.6rem 2.6rem 2.4rem;background:rgba(10,18,32,.78)}
.fx .dgs.is-3d .dgs-media .stamp{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s .6s}
.fx .dgs.is-pin .dgs-stage::before{content:"";position:absolute;left:-6%;top:8%;width:78%;height:84%;background:radial-gradient(closest-side,rgba(75,146,208,.2),rgba(75,146,208,.06) 55%,transparent 75%)}
@media (max-height:760px){
  .fx .dgs.is-pin .dgs-body{padding:1.9rem 2.1rem 1.8rem}
  .fx .dgs.is-pin .dgs-body p{font-size:.95rem;margin-top:.7rem}
  .fx .dgs.is-pin .dgs-feats{margin:1.1rem 0;gap:.5rem}
}
/* Version « lecture automatique » (téléphone, tablette) : la 3D remplace la photo, en boucle */
.fx .dgs.is-auto .dgs-media{min-height:clamp(300px,64vw,470px);border-radius:var(--radius);overflow:hidden}
.fx .dgs.is-auto .dgs-stage{border-radius:var(--radius);overflow:hidden;background:radial-gradient(closest-side at 50% 52%,rgba(75,146,208,.22),transparent 78%)}
.fx .dgs.is-auto .dgs-stage .dgs-labels{display:none}
.fx .dgs.is-auto .dgs-media .stamp{z-index:2}
.fx .dgs.is-auto .dgs-hud{left:12px;right:12px;bottom:12px;font-size:.58rem}
/* Téléphone / tablette : la vue 3D vient SOUS le titre (marque, titre, puis la 3D, puis le texte et le bouton) */
@media (max-width:980px){
  .fx .dgs.is-auto .dgs-body{display:contents}
  .fx .dgs.is-auto .dgs-brand{order:1;justify-self:start;margin:0 0 .9rem}
  .fx .dgs.is-auto .dgs-body h2{order:2}
  .fx .dgs.is-auto .dgs-media{order:3;margin:1.5rem 0 .6rem}
  .fx .dgs.is-auto .dgs-body p{order:4}
  .fx .dgs.is-auto .dgs-feats{order:5}
  .fx .dgs.is-auto .dgs-body .btn{order:6;justify-self:start}
}

/* =========================================================
   Badges du haut d'accueil : logos Bosch Car Service et Auto Plus (07/11/2026)
   Remplacent les petites icônes. Indépendant de .fx : fonctionne aussi sans JavaScript.
   ========================================================= */
.hero-award .ha-logo{flex:0 0 auto;display:block;width:auto;height:30px}
.hero-award .ha-logo--bosch{height:32px;border-radius:5px}
.hero-award .ha-logo--autoplus{height:34px;filter:drop-shadow(0 2px 8px rgba(242,106,18,.35))}