/* RésAtout vitrine · couche d'animation (v2.53) : CSS + JS sans bibliothèque ; tout est coupé si le visiteur demande moins d'animations */
:root{--ra-ease:cubic-bezier(.2,.7,.2,1)}
/* A1 · titre de l'accueil, ligne par ligne */
.ra-on .hero h1 .ra-l{display:inline-block;opacity:0;transform:translateY(22px);animation:ra-up .8s var(--ra-ease) forwards}
.ra-on .hero h1 .ra-l:nth-of-type(2){animation-delay:.25s}
.ra-on .hero-grid>div:first-child>p,.ra-on .hero-grid>div:first-child>.cta,.ra-on .puces-hero{opacity:0;animation:ra-up .8s var(--ra-ease) .5s forwards}
.ra-on .hero-grid>div:first-child>.cta:nth-of-type(2){animation-delay:.6s}.ra-on .hero-grid>div:first-child>.cta:nth-of-type(3){animation-delay:.7s}
.ra-on .puces-hero{animation-delay:.85s}
@keyframes ra-up{to{opacity:1;transform:none}}
/* A9 · en-tête des autres pages : titre, chapeau et boutons qui se posent, dessin qui apparaît */
.ra-on :is(.hero-metier,.hero-dom,.hero-page) :is(h1,.lead,p,.cta,.puces){opacity:0;transform:translateY(20px);animation:ra-up .8s var(--ra-ease) forwards}
.ra-on :is(.hero-metier,.hero-dom,.hero-page) :is(.lead,p){animation-delay:.25s}
.ra-on :is(.hero-metier,.hero-dom,.hero-page) :is(.cta,.puces){animation-delay:.45s}
.ra-on :is(.hero-metier,.hero-dom,.hero-page) :is(img,svg,.illus,.dessin-tete){animation:ra-pose 1.1s var(--ra-ease) .2s both}
@keyframes ra-pose{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* A2 · le téléphone flotte, des réservations arrivent */
.ra-tel{width:min(300px,100%);aspect-ratio:620/1192;border-radius:30px;border:7px solid #10131a;box-shadow:0 30px 60px -28px rgba(10,22,44,.55);background:#fff;position:relative;overflow:hidden}
.ra-sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s ease}
.ra-sl.ra-act{opacity:1}
.ra-on .ra-tel{animation:ra-flotte 6s ease-in-out infinite}
.hero-capture-leg{transition:opacity .4s}
@keyframes ra-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ra-notif{position:absolute;left:-14%;z-index:3;background:#fff;color:var(--pin,#123282);border-radius:14px;padding:10px 14px 10px 12px;
  box-shadow:0 12px 30px rgba(18,41,75,.18);font-size:.86rem;line-height:1.3;display:flex;gap:10px;align-items:center;max-width:270px;
  opacity:0;transform:translateY(12px) scale(.96);transition:opacity .45s var(--ra-ease),transform .45s var(--ra-ease);pointer-events:none}
.ra-notif.ra-vu{opacity:1;transform:none}
.ra-notif .ra-pt{flex:0 0 30px;height:30px;border-radius:50%;background:#2E9E5B;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.ra-notif b{display:block;font-size:.78rem;color:#2E9E5B;letter-spacing:.02em}
.ra-n1{top:22%}.ra-n2{top:48%}
@media (max-width:760px){.ra-notif{left:4%;max-width:78%}.ra-n1{top:8%}.ra-n2{top:30%}}
/* A3 · l'illustration sous l'accueil bouge très lentement */
.ra-on .hero-illu{animation:ra-kb 22s ease-in-out infinite alternate;transform-origin:60% 50%}
@keyframes ra-kb{from{transform:scale(1)}to{transform:scale(1.06) translateX(-1%)}}
.ra-kb{display:block;overflow:hidden;border-radius:inherit}
.badge-marque{z-index:4}
/* A4 · apparition douce au défilement, en cascade */
.ra-on .ra-r{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ra-ease),transform .7s var(--ra-ease);transition-delay:calc(var(--ra-i,0)*90ms)}
.ra-on .ra-r.ra-in{opacity:1;transform:none}
/* A5 · survol des tuiles et des cartes */
.ra-on :is(.metier,.vig,.f,.ecran,.offre,.prix-carte,.carte,.bloc,.fiche,.seo-card,.encart,.cta-box,.devis-box,.encadre,.rel){transition:transform .35s var(--ra-ease),box-shadow .35s var(--ra-ease)}
.ra-on :is(.metier,.vig,.f,.ecran,.offre,.carte,.bloc,.fiche,.seo-card,.encart,.rel):hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(18,41,75,.16)}
.ra-on .metier img,.ra-on .ecran img{transition:transform .6s var(--ra-ease)}
.ra-on .metier:hover img,.ra-on .ecran:hover img{transform:scale(1.05)}
.ra-on .metier,.ra-on .ecran{overflow:hidden}
/* A6 · boutons : reflet au survol, flèche qui glisse */
.ra-on .cta{position:relative;overflow:hidden;transition:transform .2s var(--ra-ease),box-shadow .2s}
.ra-on .cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,41,75,.18)}
.ra-on .cta:active{transform:translateY(0) scale(.98)}
.ra-on .cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s var(--ra-ease)}
.ra-on .cta:hover::after{left:120%}
.ra-on .cta .fl,.ra-on .offre .fl{display:inline-block;transition:transform .25s var(--ra-ease)}
.ra-on .cta:hover .fl,.ra-on .offre:hover .fl{transform:translateX(5px)}
/* A8 · étapes qui s'allument l'une après l'autre */
.ra-on .etapes span{opacity:.25;transition:opacity .5s,transform .5s var(--ra-ease)}
.ra-on .etapes.ra-in span{opacity:1}
.ra-on .etapes.ra-in span:nth-child(1){transition-delay:.1s}.ra-on .etapes.ra-in span:nth-child(2){transition-delay:.6s}.ra-on .etapes.ra-in span:nth-child(3){transition-delay:1.1s}
/* A10 · feuilles de route : le trait se dessine, les points s'allument un à un, le texte arrive de la droite */
.ra-on :is(.route-v,.route,.etapes4){overflow-x:clip}
.ra-on .route-v::before{transform:scaleY(0);transform-origin:top;transition:transform 2s var(--ra-ease)}
.ra-on .route::before{transform:scaleX(0);transform-origin:left;transition:transform 2s var(--ra-ease)}
.ra-on :is(.route-v,.route).ra-in::before{transform:none}
.ra-on :is(.route-v,.route) .route-n{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--ra-k,0)*500ms + 150ms)}
.ra-on :is(.route-v,.route).ra-in .route-n{transform:none}
.ra-on :is(.route-v,.route) li>div,.ra-on .etapes4>div{opacity:0;transform:translateX(110px);transition:opacity .6s ease,transform .8s var(--ra-ease);transition-delay:calc(var(--ra-k,0)*500ms + 300ms)}
.ra-on :is(.route-v,.route).ra-in li>div,.ra-on .etapes4.ra-in>div{opacity:1;transform:none}
/* moins d'animations demandé par le visiteur : rien ne bouge */
/* impression : tout est imprimé, révélé ou non */
@media print{.ra-on .ra-r,.ra-on .hero h1 .ra-l,.ra-on :is(.route-v,.route) :is(.route-n,li>div),.ra-on .etapes4>div,.ra-on :is(.hero-metier,.hero-dom,.hero-page) *{opacity:1!important;transform:none!important;animation:none!important}.ra-notif{display:none}}
@media (prefers-reduced-motion:reduce){.ra-on *{animation:none!important;transition:none!important}.ra-on .hero-grid>div:first-child>p,.ra-on .hero-grid>div:first-child>.cta,.ra-on .puces-hero,.ra-on :is(.hero-metier,.hero-dom,.hero-page) :is(h1,.lead,p,.cta,.puces,img,svg,.illus,.dessin-tete),.ra-on .etapes span,.ra-on .ra-r,.ra-on .hero h1 .ra-l,.ra-on :is(.route-v,.route) :is(.route-n,li>div),.ra-on .etapes4>div{opacity:1!important;transform:none!important}.ra-notif{display:none}}