/* =========================================================
   Motion design — France Habitat 78
   Tout est décoratif : sans support ou avec "réduire les
   animations", la page reste complète et statique.
   ========================================================= */

/* ---------- Ligne de toits qui se dessine (hero) ---------- */
.roofline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(46px,7vw,92px);z-index:1;pointer-events:none;display:block}
.roofline path{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.roofline .l-red{stroke:#E1262D;stroke-width:4}
.roofline .l-blue{stroke:#4C7DFF;stroke-width:2.5;opacity:.9}
.roofline .ground{fill:var(--bg);stroke:none}
.page-hero .roofline .ground{fill:var(--bg)}

/* ---------- Bandeau défilant des métiers ---------- */
.ticker{background:var(--band);color:var(--band-fg);overflow:hidden;position:relative;border-block:1px solid rgba(255,255,255,.06)}
.ticker-track{display:flex;width:max-content}
.ticker ul{list-style:none;margin:0;padding:14px 0;display:flex;gap:0;flex:none}
.ticker li{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,34px);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;display:flex;align-items:center;gap:28px;padding-right:28px}
.ticker li::after{content:"";width:12px;height:12px;background:#E1262D;transform:rotate(45deg);flex:none}
.ticker li:nth-child(even){color:#7DA2FF}
.ticker-pause{position:absolute;right:max(10px,env(safe-area-inset-right,0px));top:50%;translate:0 -50%;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:var(--band);color:var(--band-fg);cursor:pointer;font-size:13px;line-height:1}
.ticker.paused .ticker-track{animation-play-state:paused!important}

/* ---------- Chiffres ---------- */
.figures{background:var(--surface);border-bottom:1px solid var(--line)}
.figures ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.figures li{padding:28px 18px;border-left:1px solid var(--line);display:grid;gap:2px}
.figures li:first-child{border-left:0;padding-left:0}
.figures .v{font-family:var(--display);font-weight:800;font-size:clamp(46px,6vw,72px);line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.figures .v small{font-size:.45em;margin-left:4px;color:var(--tuile)}
.figures .k{font-family:var(--display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.06em}
.figures .d{font-size:15px;color:var(--muted)}
@media (max-width:820px){.figures ul{grid-template-columns:1fr 1fr}.figures li:nth-child(3){border-left:0;padding-left:0}.figures li:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- Survol : cartes, boutons, galerie ---------- */
.svc,.others a{transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.svc img,.others img{transition:scale .6s cubic-bezier(.2,.7,.2,1)}
.svc{overflow:hidden}
.svc:hover,.others a:hover{translate:0 -6px;box-shadow:0 18px 40px -18px rgba(11,30,63,.45)}
.svc:hover img,.others a:hover img{scale:1.06}
.others a{overflow:hidden}

.btn{position:relative;overflow:hidden;isolation:isolate;transition:translate .2s,box-shadow .2s,background-color .2s}
.btn-call::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);translate:-120% 0;transition:translate .7s ease}
.btn-call:hover::after{translate:120% 0}
.btn-call:hover{translate:0 -2px;box-shadow:0 10px 24px -10px rgba(225,38,45,.7)}
.btn-ghost:hover{background:rgba(125,162,255,.14)}

/* Le combiné qui sonne sur le bouton flottant */
@keyframes ring{0%,86%,100%{rotate:0}88%{rotate:-14deg}90%{rotate:12deg}92%{rotate:-10deg}94%{rotate:8deg}96%{rotate:-4deg}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(225,38,45,.55)}70%{box-shadow:0 0 0 18px rgba(225,38,45,0)}100%{box-shadow:0 0 0 0 rgba(225,38,45,0)}}

/* Barre de progression de lecture sous l'en-tête */
header.top{view-transition-name:site-header}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#E1262D,#4C7DFF);transform-origin:0 50%;scale:0 1}

/* Visionneuse */
.lb{transition:opacity .25s,display .25s allow-discrete,overlay .25s allow-discrete}
.lb img{transition:scale .3s cubic-bezier(.2,.7,.2,1)}
@starting-style{.lb{opacity:0}.lb img{scale:.94}}

/* =========================================================
   Animations actives seulement si l'utilisateur les accepte
   ========================================================= */
@media (prefers-reduced-motion: no-preference){

  /* Transitions entre les pages */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.28s ease-in both vt-out}
  ::view-transition-new(root){animation:.42s cubic-bezier(.2,.7,.2,1) both vt-in}
  @keyframes vt-out{to{opacity:0;translate:0 -24px}}
  @keyframes vt-in{from{opacity:0;translate:0 36px}}

  /* Hero : entrée en cascade */
  @keyframes rise{from{opacity:0;translate:0 28px}}
  @keyframes kenburns{from{scale:1.14}to{scale:1}}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes wipe{from{clip-path:inset(0 100% 0 0)}}

  .hero img.bg,.page-hero img.bg{animation:kenburns 9s cubic-bezier(.2,.6,.2,1) both}
  .hero .wrap>*,.page-hero .wrap>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards}
  .hero .wrap>:nth-child(1),.page-hero .wrap>:nth-child(1){animation-delay:.1s}
  .hero .wrap>:nth-child(2),.page-hero .wrap>:nth-child(2){animation-delay:.22s}
  .hero .wrap>:nth-child(3),.page-hero .wrap>:nth-child(3){animation-delay:.36s}
  .hero .wrap>:nth-child(4),.page-hero .wrap>:nth-child(4){animation-delay:.5s}
  .hero .wrap>:nth-child(5),.page-hero .wrap>:nth-child(5){animation-delay:.62s}
  .hero h1 span{display:inline-block;animation:wipe 1s .7s cubic-bezier(.7,0,.2,1) backwards}
  .roofline path.l-red,.roofline path.l-blue{stroke-dasharray:1;animation:draw 2.2s .3s cubic-bezier(.6,0,.2,1) backwards}
  .roofline path.l-blue{animation-delay:.7s;animation-duration:2.4s}

  /* Bandeau défilant */
  .ticker-track{animation:ticker 32s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  @keyframes ticker{to{translate:-50% 0}}

  /* Bouton flottant */
  .fab{animation:pulse 2.4s 1.5s infinite}
  .fab svg{animation:ring 4s 2s infinite;transform-origin:50% 50%}

  /* Défilement : apparitions et parallaxe (navigateurs compatibles) */
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    @keyframes fade-up{from{opacity:0;translate:0 48px}}
    @keyframes fade-left{from{opacity:0;translate:-48px 0}}
    @keyframes fade-right{from{opacity:0;translate:48px 0}}
    @keyframes pop{from{opacity:0;scale:.9}}
    @keyframes parallax{to{translate:0 22%}}
    @keyframes progress{to{scale:1 1}}
    @keyframes reveal-after{from{clip-path:inset(0 0 0 100%)}}

    .sec-head,.svc,.steps li,.signs>div,.others a,.promises li,.figures li,.checks li,.side-info>*,.towns li,.aside>*{
      animation:fade-up linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}
    .gallery button{animation:pop linear backwards;animation-timeline:view();animation-range:entry 0% entry 60%}
    .ba figure:first-child,.zone>div{animation:fade-left linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}
    .ba figure.after,.zone img{animation:fade-right linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}
    .ba figure.after img{animation:reveal-after linear backwards;animation-timeline:view();animation-range:entry 10% cover 45%}
    .aerial img{animation:pop linear backwards;animation-timeline:view();animation-range:entry 0% entry 80%}

    /* Décalage dans une même rangée */
    .services>.svc:nth-child(3n+2),.steps li:nth-child(2),.signs>div:nth-child(2),.figures li:nth-child(2),.promises li:nth-child(2){animation-range:entry 8% entry 78%}
    .services>.svc:nth-child(3n),.steps li:nth-child(3),.signs>div:nth-child(3),.figures li:nth-child(3),.promises li:nth-child(3){animation-range:entry 16% entry 86%}
    .steps li:nth-child(4),.figures li:nth-child(4),.promises li:nth-child(4){animation-range:entry 24% entry 94%}

    /* Parallaxe de l'image du haut */
    .hero img.bg,.page-hero img.bg{animation:kenburns 9s cubic-bezier(.2,.6,.2,1) both,parallax linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}

    /* Progression de lecture */
    header.top::after{animation:progress linear both;animation-timeline:scroll(root)}
  }
}

@media (max-width:520px){.figures ul{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    .vcard,.rcard,.near,.qa,.prose-long h2,.bref{animation:fade-up linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}

/* ---- Avis : deux rangées qui défilent en sens inverse ---- */
@media (prefers-reduced-motion: no-preference){
  .rv-track{animation:rv-scroll 70s linear infinite}
  .rv-row.rev .rv-track{animation-direction:reverse;animation-duration:80s}
  .rv-rows:hover .rv-track{animation-play-state:paused}
  @keyframes rv-scroll{to{translate:-50% 0}}
  @keyframes star-pop{0%{scale:0;rotate:-90deg;opacity:0}70%{scale:1.3}100%{scale:1;rotate:0;opacity:1}}
  .rv-big-stars svg,.gbadge .gb-stars svg{animation:star-pop .6s cubic-bezier(.3,1.6,.5,1) backwards}
  .rv-big-stars svg:nth-child(2),.gb-stars svg:nth-child(2){animation-delay:.12s}
  .rv-big-stars svg:nth-child(3),.gb-stars svg:nth-child(3){animation-delay:.24s}
  .rv-big-stars svg:nth-child(4),.gb-stars svg:nth-child(4){animation-delay:.36s}
  .rv-big-stars svg:nth-child(5),.gb-stars svg:nth-child(5){animation-delay:.48s}
  .hero .gbadge .gb-stars svg{animation-delay:1s}
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    .rv-big-stars svg{animation-timeline:view();animation-range:entry 20% cover 40%;animation-delay:0s}
    .rv-big-stars svg:nth-child(2){animation-range:entry 25% cover 42%}
    .rv-big-stars svg:nth-child(3){animation-range:entry 30% cover 44%}
    .rv-big-stars svg:nth-child(4){animation-range:entry 35% cover 46%}
    .rv-big-stars svg:nth-child(5){animation-range:entry 40% cover 48%}
    .rv-score{animation:pop linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
/* Sans animation : une rangée qui se fait défiler à la main */
@media (prefers-reduced-motion: reduce){
  .rv-row{overflow-x:auto}
  .rv .rv-track,.rv-track{animation:none}
  .rv[aria-hidden="true"]{display:none}
  .rv-pause{display:none}
}