/* Composants interactifs (apparitions, titre animé, sélecteur de vitrage, compteurs, FAQ).
   S'appuie sur les variables de style.css (--accent, --ink, --line, --muted…). */

/* --- Apparition au défilement --------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-reveal="left"]{transform:translateX(-24px)}
[data-reveal][data-reveal="right"]{transform:translateX(24px)}
[data-reveal][data-reveal="zoom"]{transform:scale(.94)}
/* Cascade : décale les enfants directs d'un conteneur .reveal-stagger */
.reveal-stagger.is-in > *{animation:riseIn .6s both}
.reveal-stagger.is-in > *:nth-child(2){animation-delay:.08s}
.reveal-stagger.is-in > *:nth-child(3){animation-delay:.16s}
.reveal-stagger.is-in > *:nth-child(4){animation-delay:.24s}
.reveal-stagger.is-in > *:nth-child(5){animation-delay:.32s}
.reveal-stagger.is-in > *:nth-child(6){animation-delay:.40s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* --- Titre animé (mot qui défile) ----------------------------------------------- */
.rotator{display:inline-block;color:var(--accent);position:relative;
  transition:transform .32s ease,opacity .32s ease;will-change:transform,opacity}
.rotator.rot-out{opacity:0;transform:translateY(-.4em)}
.rotator.rot-in{animation:rotIn .42s ease}
@keyframes rotIn{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}

/* --- Compteurs / stats ---------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem;
  text-align:center}
.stat b{display:block;font-size:clamp(1.9rem,5vw,2.8rem);font-weight:800;color:var(--ink);
  line-height:1;letter-spacing:-.5px}
.band.dark .stat b{color:#fff}
.stat span{display:block;margin-top:.4rem;color:var(--muted);font-size:.95rem}
.band.dark .stat span{color:#aebbcb}

/* --- Sélecteur de vitrage interactif -------------------------------------------- */
.car-wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:1.6rem;align-items:start}
@media(max-width:800px){.car-wrap{grid-template-columns:1fr}}
.car-stage{background:radial-gradient(120% 120% at 50% 10%,#f3f6fa,#e8edf3);
  border:1px solid var(--line);border-radius:18px;padding:.6rem;box-shadow:var(--shadow)}
.car-stage svg{width:100%;height:auto;display:block}

/* Onglets de service (bascule le jeu de zones cliquables) */
.serv-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem}
.serv-tab{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;
  transition:.15s}
.serv-tab:hover{border-color:var(--accent);color:var(--ink)}
.serv-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Groupes de zones : seul le service actif est visible/cliquable */
[data-service]{display:none}
[data-service].is-active{display:inline}

/* Zones cliquables — base commune + 3 variantes (verre, panneau, roue) */
.car-zone{cursor:pointer;transition:fill .18s ease,filter .18s ease,stroke .18s ease}
.car-zone:focus{outline:none}
.car-zone:focus-visible{stroke:var(--accent);stroke-width:3}
.z-glass{stroke:#3f5169;stroke-width:2}
.z-glass:hover{fill:#7cc2ff;filter:drop-shadow(0 2px 6px rgba(31,157,255,.4))}
.z-panel{fill:rgba(227,6,19,0);stroke:rgba(227,6,19,.55);stroke-width:2;stroke-dasharray:5 3}
.z-panel:hover{fill:rgba(227,6,19,.18)}
.z-wheel{fill:rgba(227,6,19,0);stroke:rgba(227,6,19,.65);stroke-width:3}
.z-wheel:hover{fill:rgba(227,6,19,.16)}
.car-zone.on{fill:var(--accent);stroke:var(--accent-d)}
.z-panel.on{fill:rgba(227,6,19,.55);stroke:var(--accent-d);stroke-dasharray:none}
.z-wheel.on{fill:rgba(227,6,19,.5);stroke:var(--accent-d)}

/* --- Profondeur 3D : inclinaison au curseur + parallaxe + reflet + flottement -------- */
.car-stage{perspective:1150px;perspective-origin:50% 42%;overflow:hidden;
  animation:stageIn .7s cubic-bezier(.22,.61,.36,1) both}
@keyframes stageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.car-3d{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform}
.car-3d.is-tilting{transition:transform .12s ease-out}
.car-float{position:relative;z-index:2;animation:carFloat 5.5s ease-in-out infinite;
  transform-style:preserve-3d}
@keyframes carFloat{0%,100%{transform:translateZ(0) translateY(0)}
  50%{transform:translateZ(18px) translateY(-8px)}}

/* Couche arrière : ombre au sol (parallaxe via translateZ négatif) */
.car-shadow{position:absolute;left:9%;right:9%;bottom:5%;height:13%;z-index:0;pointer-events:none;
  transform:translateZ(-70px) scale(var(--sh,1));transform-origin:50% 40%;
  background:radial-gradient(58% 100% at 50% 50%,rgba(15,22,34,.4),rgba(15,22,34,0) 72%);
  filter:blur(3px);transition:transform .12s ease-out}
/* Couche avant : reflet spéculaire qui balaie la carrosserie au gré de l'inclinaison */
.car-gloss{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  transform:translateZ(48px) translate(var(--gx,0),var(--gy,0));
  background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.5) 49%,rgba(255,255,255,.7) 51%,transparent 60%);
  mix-blend-mode:screen;transition:opacity .35s ease}
.car-3d.is-tilting .car-gloss{opacity:.55}

/* Survol d'une zone : halo lumineux */
.z-glass:hover{filter:drop-shadow(0 0 7px rgba(124,194,255,.9))}
.z-panel:hover,.z-wheel:hover{filter:drop-shadow(0 0 7px rgba(227,6,19,.8))}
/* Zone sélectionnée : pop 3D à la sélection + pulsation lumineuse */
.car-zone{transform-box:fill-box;transform-origin:center}
.car-zone.on{animation:zoneGlow 1.9s ease-in-out infinite,zonePop .34s cubic-bezier(.34,1.56,.64,1) both}
@keyframes zoneGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(227,6,19,.55))}
  50%{filter:drop-shadow(0 0 11px rgba(227,6,19,.95))}}
@keyframes zonePop{0%{transform:scale(.72)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

.car-panel h3{margin:0 0 .3rem}
.car-panel .sub{margin:0 0 1rem}
.car-summary{list-style:none;padding:0;margin:0 0 1.1rem;display:grid;gap:.45rem}
.car-summary li{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:.55rem .8rem;font-weight:600;display:flex;align-items:center;gap:.5rem;
  animation:riseIn .3s both}
.car-summary li::before{content:"";width:.7rem;height:.7rem;border-radius:50%;
  background:var(--accent);flex:none}
.car-summary li.car-empty{background:transparent;border-style:dashed;color:var(--muted);
  font-weight:500;justify-content:center}
.car-summary li.car-empty::before{display:none}
.car-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.car-cta.is-off{opacity:.5;pointer-events:none}
.link-clear{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;
  text-decoration:underline;padding:.4rem}
.link-clear:hover{color:var(--ink)}

/* --- FAQ accordéon (details/summary — zéro JS) ---------------------------------- */
.faq{display:grid;gap:.7rem;max-width:760px}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;padding:1rem 1.1rem;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);line-height:1;
  transition:transform .2s ease;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .faq-body{padding:1rem 1.1rem;color:var(--muted);animation:riseIn .28s both}

/* --- Respect du confort de mouvement -------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-in{opacity:1!important;transform:none!important;transition:none!important}
  .reveal-stagger.is-in > *{animation:none!important}
  .rotator{transition:none}
  .car-summary li,.faq .faq-body{animation:none}
  .car-stage{animation:none!important;opacity:1!important;transform:none!important}
  .car-3d{transform:none!important;transition:none!important}
  .car-float{animation:none!important}
  .car-shadow{transform:none!important}
  .car-gloss{opacity:0!important}
  .car-zone.on{animation:none!important}
}