/* ============================================================
   MADE IN SAINTÉ — Couche d'animations
   Chargée après styles.css.
   - Tout est sous prefers-reduced-motion:no-preference.
   - Les effets au curseur sont sous (hover:hover) and (pointer:fine).
   - Seules transform / translate / rotate / scale / opacity / clip-path sont animées
     (aucune propriété de mise en page), à quelques exceptions signalées.
   - Sans JavaScript et à l'impression, tout est visible : voir la dernière section.
   ============================================================ */

@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg;}

/* Décalages d'apparition (utilisés par .reveal-d1 à d3) */
.reveal-d1{--rd:.08s;}
.reveal-d2{--rd:.16s;}
.reveal-d3{--rd:.24s;}

@media (prefers-reduced-motion:no-preference){

  /* ---------- Séquences réutilisées ---------- */
  @keyframes rise{from{opacity:0;translate:0 26px;}to{opacity:1;translate:0 0;}}
  @keyframes slideIn{from{opacity:0;translate:-14px 0;}to{opacity:1;translate:0 0;}}
  @keyframes pop{0%{scale:.4;opacity:0;}65%{scale:1.2;opacity:1;}100%{scale:1;}}
  @keyframes stamp{0%{opacity:0;scale:1.9;}60%{opacity:1;scale:.92;}100%{opacity:1;scale:1;}}
  @keyframes floatE{0%,100%{rotate:-2deg;}50%{rotate:2deg;}}
  @keyframes bob{0%,100%{translate:0 0;}50%{translate:0 -10px;}}
  @keyframes wobble{0%,100%{rotate:0deg;}25%{rotate:-2.5deg;}75%{rotate:2.5deg;}}
  @keyframes underlinePulse{0%,100%{scale:1 1;}50%{scale:1.04 1.5;}}
  @keyframes travel{from{translate:-100% 0;}to{translate:400% 0;}}
  @keyframes sweep{0%,70%{translate:-120% 0;}100%{translate:120% 0;}}
  @keyframes beacon{from{scale:1;opacity:.7;}to{scale:1.35 1.7;opacity:0;}}
  @keyframes ripple{from{scale:.2;opacity:.55;}to{scale:1;opacity:0;}}
  @keyframes spinAngle{to{--angle:360deg;}} /* exception : anime une variable, repeint à chaque image */

  /* ---------- Structure du site : progression, bouton flottant ---------- */
  .scroll-progress{
    position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
    background:var(--green);transform-origin:left;transform:scaleX(var(--scroll,0));
  }

  .float-cta{
    position:fixed;right:22px;bottom:22px;z-index:55;
    font-family:var(--font-display);font-weight:600;font-size:.92rem;letter-spacing:.02em;
    padding:14px 22px;border-radius:999px;background:var(--green-btn);color:#fff;
    box-shadow:0 10px 28px rgba(0,113,58,.35);
    /* visibility : caché, il n'est ni focalisable au clavier ni lu par les lecteurs d'écran */
    opacity:0;visibility:hidden;translate:0 90px;scale:.8;pointer-events:none;
    transition:opacity .4s var(--ease-out),translate .6s var(--ease-out),scale .6s var(--ease-out),
      background .25s,visibility 0s .6s;
  }
  .float-cta.is-shown{
    opacity:1;visibility:visible;translate:0 0;scale:1;pointer-events:auto;
    transition-delay:0s,0s,0s,0s,0s;
  }
  .float-cta:hover{background:var(--green-deep);}
  .float-cta.is-shown::after{
    content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--green);
    animation:beacon 2.6s var(--ease-out) infinite;pointer-events:none;
  }
  @media(max-width:640px){.float-cta{right:14px;bottom:14px;padding:12px 18px;font-size:.85rem;}}

  /* ---------- Boutons : reflet au survol (dans le fond du bouton : rien ne dépasse, aucun rognage nécessaire) ---------- */
  .btn::before{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%) no-repeat;
    background-size:250% 100%;background-position:130% 0;
    transition:background-position .7s var(--ease-out);
  }
  .btn:hover::before{background-position:-30% 0;}

  /* ---------- Hero de l'accueil ---------- */
  .hero-center .hero-logo,
  .hero-center .eyebrow,
  .hero-center h1 > span,
  .hero-center .lead,
  .hero-center .hero-cta{animation:rise .9s var(--ease-out) both;}
  .hero-center .hero-logo{animation-delay:.05s;}
  .hero-center .eyebrow{animation-delay:.15s;}
  .hero-center h1 > span:nth-child(1){animation-delay:.25s;}
  .hero-center h1 > span:nth-child(2){animation-delay:.38s;}
  .hero-center h1 > span:nth-child(3){animation-delay:.5s;}
  .hero-center .lead{animation-delay:.65s;}
  .hero-center .hero-cta{animation-delay:.8s;}

  .hero .mark svg path{animation-delay:1s;} /* le trait démarre une fois le mot apparu */
  .hero .mark svg{transform-origin:left center;animation:underlinePulse 5s ease-in-out 2.2s infinite;}

  .hero .deco-e{translate:0 var(--par,0px);animation:floatE 14s ease-in-out infinite;}
  .hero-logo{transition:rotate .5s var(--ease-out),scale .5s var(--ease-out);}
  .hero-logo:hover{rotate:-5deg;scale:1.08;}

  /* ---------- Hero des pages intérieures ---------- */
  .hero:not(.hero-center) .wrap > *{animation:rise .9s var(--ease-out) both;}
  .hero:not(.hero-center) .wrap > *:nth-child(1){animation-delay:.1s;}
  .hero:not(.hero-center) .wrap > *:nth-child(2){animation-delay:.22s;}
  .hero:not(.hero-center) .wrap > *:nth-child(3){animation-delay:.34s;}
  .hero:not(.hero-center) .wrap > *:nth-child(4){animation-delay:.46s;}
  .hero:not(.hero-center) .wrap > *:nth-child(n+5){animation-delay:.58s;}

  /* ---------- Bandeaux : chiffres clés, métiers, étapes ---------- */
  .facts,.steps{position:relative;overflow:hidden;}
  .facts::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 40%,rgba(0,149,67,.09) 50%,transparent 60%);
    animation:sweep 7s ease-in-out infinite;
  }
  .fact{transition:background .3s;}
  .fact b{display:inline-block;transition:transform .35s var(--ease-out),color .3s;}
  .fact:hover{background:var(--green-tint);}
  .fact:hover b{transform:translateY(-3px);color:var(--green-deep);}

  .marquee:hover .marquee-track{animation-play-state:paused;}
  .marquee span{transition:color .25s;}
  .marquee span:hover{color:var(--ink);}

  .steps::after{
    content:"";position:absolute;left:0;top:0;width:25%;height:3px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--green),transparent);
    animation:travel 5.5s var(--ease-out) infinite;
  }
  .step::before{
    content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--green);
    transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out);
  }
  .step:hover::before{transform:scaleX(1);}
  .step .num{display:inline-block;transition:transform .45s var(--ease-out);}
  .step:hover .num{transform:translateX(6px) rotate(-4deg);}
  .step.in-view .num{animation:pop .6s var(--ease-out) .25s both;}

  /* ---------- Titres de section : dévoilés par un balayage ---------- */
  .sec-title.reveal,
  .cta-in h2.reveal{
    clip-path:inset(0 0 110% 0);translate:0 .35em;
    transition:clip-path .9s var(--ease-out),translate .9s var(--ease-out),opacity .5s var(--ease-out);
  }
  .sec-title.reveal.in-view,
  .cta-in h2.reveal.in-view{clip-path:inset(0 0 -20% 0);translate:0 0;}

  /* ---------- Cartes d'offres et de réalisations : apparition ---------- */
  :is(.cards .card,.works .work).reveal{
    scale:.94;
    transition-property:opacity,translate,scale,transform,box-shadow;
    transition-duration:.7s,.7s,.8s,.5s,.3s;
    transition-timing-function:var(--ease-out);
    transition-delay:var(--rd,0s),var(--rd,0s),var(--rd,0s),0s,0s;
  }
  :is(.cards .card,.works .work).reveal.in-view{scale:1;}

  /* Offres */
  .card .promo-badge{opacity:0;}
  .card.in-view .promo-badge{animation:stamp .55s var(--ease-out) .5s both;}
  .card li{opacity:0;}
  .card.in-view li{animation:slideIn .5s var(--ease-out) both;}
  .card.in-view li:nth-child(1){animation-delay:.45s;}
  .card.in-view li:nth-child(2){animation-delay:.55s;}
  .card.in-view li:nth-child(3){animation-delay:.65s;}
  .card.in-view li:nth-child(4){animation-delay:.75s;}
  .card.in-view li:nth-child(5){animation-delay:.85s;}
  .card.in-view .price{animation:rise .8s var(--ease-out) .3s both;}
  .card .corner-e{display:inline-block;transition:rotate .7s var(--ease-out),scale .4s var(--ease-out);}
  .card:hover .corner-e{rotate:360deg;scale:1.25;}
  .card.feat .badge{transform-origin:left center;animation:wobble 4s ease-in-out 1.5s infinite;}
  .card.feat::before{ /* liseré lumineux qui tourne autour de l'offre « Pro » */
    content:"";position:absolute;inset:-2px;padding:2px;border-radius:inherit;pointer-events:none;
    background:conic-gradient(from var(--angle),transparent 0 62%,#7FD6A4 82%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    animation:spinAngle 5s linear infinite;
  }

  /* ---------- « Pourquoi » : icônes qui se dessinent ---------- */
  .why .ico svg :is(path,circle){
    stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-out) .3s;
  }
  .why .reveal.in-view .ico svg :is(path,circle){stroke-dashoffset:0;}
  .why .ico{transition:transform .5s var(--ease-out);}
  .why > div:hover .ico{transform:rotate(-10deg) scale(1.15);}

  /* ---------- Réalisations ---------- */
  .work-cover{position:relative;overflow:hidden;}
  .work.reveal .work-cover{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-out) .2s;}
  .work.reveal.in-view .work-cover{clip-path:inset(0 0 0 0);}
  .work-cover .big-letter{animation:bob 6s ease-in-out infinite;transition:transform .8s var(--ease-out);}
  .work:nth-child(2) .work-cover .big-letter{animation-delay:-2s;}
  .work:nth-child(3) .work-cover .big-letter{animation-delay:-4s;}
  .work:hover .work-cover .big-letter{transform:scale(1.14) translateX(10px) rotate(-3deg);}
  .work-cover::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
    translate:-120% 0;transition:translate .9s var(--ease-out);
  }
  .work:hover .work-cover::after{translate:120% 0;}

  /* ---------- Bandeau final ---------- */
  .cta-band .deco-e{animation:floatE 16s ease-in-out infinite reverse;}
  .contact-side .big-tel{
    background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
    transition:background-size .5s var(--ease-out);
  }
  .contact-side .big-tel:hover{background-size:100% 2px;}

  /* ---------- Pied de page ---------- */
  .foot-grid > div,.foot-legal{
    opacity:0;translate:0 24px;transition:opacity .8s var(--ease-out),translate .8s var(--ease-out);
  }
  .foot-grid > div.in-view,.foot-legal.in-view{opacity:1;translate:0 0;}
  .foot-grid > div:nth-child(2){transition-delay:.1s;}
  .foot-grid > div:nth-child(3){transition-delay:.2s;}
  .foot-grid a{display:inline-block;transition:translate .3s var(--ease-out),color .3s;}
  .foot-grid li a:hover{translate:6px 0;}

  .skyline :is(path,circle){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease-out);}
  .skyline.is-drawn :is(path,circle){stroke-dashoffset:0;}

  /* ---------- Zones hors écran : animations en boucle en pause (classe posée par motion.js) ---------- */
  .is-offscreen,.is-offscreen *,.is-offscreen::before,.is-offscreen::after,
  .is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused !important;}
  /* Les animations d'apparition (courtes, non répétées) vont toujours à leur terme */
  .is-offscreen .step .num,
  .is-offscreen .card li,
  .is-offscreen .card .promo-badge,
  .is-offscreen .card .price,
  .is-offscreen .mark svg path,
  .is-offscreen .hero-center :is(.hero-logo,.eyebrow,.lead,.hero-cta),
  .is-offscreen .hero-center h1 > span,
  .is-offscreen .hero:not(.hero-center) .wrap > *{animation-play-state:running !important;}

  /* ---------- Onde au clic ---------- */
  .click-ripple{
    position:fixed;z-index:1999;pointer-events:none;width:120px;height:120px;margin:-60px 0 0 -60px;
    border-radius:50%;border:2px solid var(--green);background:rgba(0,149,67,.1);
    animation:ripple .7s var(--ease-out) forwards;
  }
}

/* ============================================================
   Effets au curseur (ordinateur uniquement)
   ============================================================ */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){

  /* Curseur natif masqué : seul le rond vert reste (sauf dans les champs de saisie) */
  html.has-ring,html.has-ring *{cursor:none;}
  html.has-ring :is(input,textarea,select){cursor:text;}

  .cursor-ring{
    position:fixed;top:0;left:0;z-index:2000;pointer-events:none;
    width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
    border:1.5px solid var(--green);background:rgba(0,149,67,.14);opacity:0;
    transition:opacity .3s var(--ease-out),width .3s var(--ease-out),height .3s var(--ease-out),
      margin .3s var(--ease-out),background .3s var(--ease-out),scale .15s var(--ease-out);
  }
  .cursor-ring.is-on{opacity:.8;}
  .cursor-ring.is-hot{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(0,149,67,.16);}
  .cursor-ring.is-down{scale:.72;}
  .cursor-ring.is-label{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(0,127,60,.92);border-color:transparent;}
  .cursor-ring::after{
    content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;
    font-family:var(--font-display);font-size:.72rem;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s var(--ease-out);
  }
  .cursor-ring.is-label::after{opacity:1;}

  /* Halo vert qui suit le curseur dans le hero */
  .hero-center::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(520px circle at var(--mx,50%) var(--my,40%),rgba(0,149,67,.13),transparent 70%);
    opacity:0;transition:opacity .5s var(--ease-out);
  }
  .hero-center.is-spot::before{opacity:1;}

  /* Boutons magnétiques (hero et menu) */
  .hero-cta .btn{
    translate:var(--tx,0px) var(--ty,0px);
    transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s,translate .3s var(--ease-out);
  }
  .nav-cta{translate:var(--tx,0px) var(--ty,0px);}

  /* Inclinaison 3D + reflet (offres et réalisations). Pas de preserve-3d : il rend la détection du survol instable (clignotement) */
  .cards,.works{perspective:1200px;}
  :is(.cards .card,.works .work):hover{
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(-3px,-3px);
  }
  :is(.cards .card,.works .work).reveal.is-tilting{
    transition-duration:.7s,.7s,.8s,.12s,.3s;
    transition-timing-function:var(--ease-out),var(--ease-out),var(--ease-out),linear,var(--ease-out);
  }
  .cards .card::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(0,149,67,.14),transparent 65%);
    opacity:0;transition:opacity .35s var(--ease-out);
  }
  .cards .card.feat::after{
    background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),transparent 65%);
  }
  .cards .card:hover::after{opacity:1;}
}

/* ============================================================
   Sans JavaScript et à l'impression : tout est visible
   (les états « caché avant apparition » ne servent qu'avec le script)
   ============================================================ */
@media (scripting:none),print{
  .reveal,.card li,.card .promo-badge,.step .num,.foot-grid > div,.foot-legal,
  .sec-title.reveal,.cta-in h2.reveal,.work.reveal .work-cover{
    opacity:1 !important;translate:none !important;scale:none !important;
    clip-path:none !important;animation:none !important;
  }
  .why .ico svg :is(path,circle),.skyline :is(path,circle){stroke-dashoffset:0 !important;}
}