/* IS Digital - motion des pages (Maël, v1 du 30/10/2026) : transitions entre les pages et kit des pages intérieures.
   Chargé après motion.css sur les 15 pages. Chaque état caché dépend de .pg-on, posée par pages.js (jamais sur l'accueil, jamais en
   mouvement réduit) : sans JavaScript, tout est visible. Animations : transform et opacity ; seul le dévoilement de la nouvelle page
   pendant la transition utilise clip-path, comme les volets des photos du site. */

/* ===== 1. transitions entre les pages (View Transitions entre documents) =====
   Signature 0,46 s : l'ancienne page glisse légèrement et s'assombrit, la nouvelle se découvre de gauche à droite derrière un trait
   lumineux bleu (.pg-fil, posé par pages.js au départ). L'en-tête, la barre de progression, la barre mobile et le bouton WhatsApp
   restent en place. Mouvement réduit : aucune transition (navigation instantanée). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:isd-entete}
  .progress{view-transition-name:isd-progres}
  .mbar{view-transition-name:isd-barre}
  .wa-fab{view-transition-name:isd-wa}
  .pg-fil{view-transition-name:isd-fil}
  ::view-transition{background:#07152B}
  ::view-transition-group(*){animation-duration:.46s;animation-timing-function:cubic-bezier(.7,0,.25,1)}
  ::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:.46s;animation-timing-function:cubic-bezier(.7,0,.25,1);animation-fill-mode:both}
  ::view-transition-old(root){animation-name:pg-sort}
  ::view-transition-new(root){animation-name:pg-entre}
  ::view-transition-group(isd-fil){z-index:1;animation:none}
  ::view-transition-old(isd-fil){animation:pg-fil-x .46s cubic-bezier(.7,0,.25,1) both,pg-fil-o .46s linear both}
  ::view-transition-group(isd-entete),::view-transition-group(isd-progres),::view-transition-group(isd-barre),::view-transition-group(isd-wa){z-index:2}
}
@keyframes pg-sort{to{opacity:.35;transform:translate3d(4%,0,0)}}
@keyframes pg-entre{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pg-fil-x{to{transform:translate3d(100vw,0,0)}}
@keyframes pg-fil-o{0%,78%{opacity:1}to{opacity:0}}

/* le trait : cœur blanc, halo bleu, trois nœuds (centré sur le bord gauche de l'écran) */
.pg-fil{position:fixed;top:0;bottom:0;left:0;z-index:600;width:160px;margin-left:-80px;pointer-events:none;
  background:
    radial-gradient(circle at 50% 23%,#fff 0 2px,rgba(156,200,255,.95) 3px,rgba(156,200,255,0) 18px),
    radial-gradient(circle at 50% 56%,#fff 0 2px,rgba(156,200,255,.95) 3px,rgba(156,200,255,0) 18px),
    radial-gradient(circle at 50% 84%,#fff 0 2px,rgba(156,200,255,.95) 3px,rgba(156,200,255,0) 18px),
    linear-gradient(90deg,rgba(4,83,165,0) 0,rgba(4,83,165,.26) 30%,rgba(156,200,255,.8) 47.5%,#fff 50%,rgba(156,200,255,.8) 52.5%,rgba(4,83,165,.26) 70%,rgba(4,83,165,0) 100%)}
/* navigateur sans transitions entre documents : le trait balaie la page à l'arrivée */
.pg-fil--entree{view-transition-name:none;animation:pg-fil-in .62s cubic-bezier(.7,0,.25,1) both}
@keyframes pg-fil-in{from{transform:translate3d(0,0,0)}82%{opacity:1}to{transform:translate3d(calc(100vw + 80px),0,0);opacity:0}}
/* le curseur personnalisé ne part pas avec l'ancienne page */
.pg-swap .cursor{visibility:hidden}

/* ===== 2. pages intérieures : le kit (états cachés seulement sous .pg-on) ===== */

/* titres révélés ligne par ligne (découpe par pages.js, mêmes masques que motion.css) ; le décalage --d vient de la cascade */
.pg-on .pg-t[data-reveal]{opacity:1;transform:none;transition:none}
.pg-on .pg-t .m-wi{transition-delay:calc(var(--d,0s) + var(--l,0) * 95ms)}

/* surtitres : le petit trait se dessine */
.pg-on .eyebrow[data-reveal]::before,.pg-on .hero .eyebrow::before{transform:scaleX(0);transform-origin:0 50%}
.pg-on .eyebrow[data-reveal]::before{transition:transform .9s var(--m-ease) calc(var(--d,0s) + .2s)}
.pg-on .eyebrow[data-reveal].is-in::before{transform:none}
.pg-on .hero .eyebrow::before{animation:pg-trait .9s var(--m-ease) .35s both}
@keyframes pg-trait{from{transform:scaleX(0)}to{transform:none}}

/* listes cochées et coordonnées : les lignes arrivent en cascade, la pastille s'ouvre */
.pg-on .pg-list>li{opacity:0;transform:translate3d(-14px,0,0);transition:opacity .6s ease calc(var(--d,0s) + .1s + var(--k,0) * 90ms),transform .9s var(--m-ease) calc(var(--d,0s) + .1s + var(--k,0) * 90ms)}
.pg-on .pg-list.pg-in>li{opacity:1;transform:none}
.pg-on .ticks.pg-list>li::before{transform:scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .3s + var(--k,0) * 90ms)}
.pg-on .ticks.pg-list.pg-in>li::before{transform:none}

/* étapes 01-02-03 : chaque ligne s'allume à son tour (pages.js pose .is-lit) : trait, étincelle qui le parcourt, chiffre qui s'éclaire */
.pg-on .pg-steps>li>b{position:relative;isolation:isolate;justify-self:start;opacity:.26;transition:opacity .6s ease}
.pg-on .pg-steps>li.is-lit>b{opacity:1}
.pg-on .pg-steps>li>b::after{content:"";position:absolute;left:50%;top:50%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(156,200,255,.6),rgba(156,200,255,0));opacity:0}
.pg-on .pg-steps>li.is-lit>b::after{animation:pg-eclat 1.3s ease-out both}
.pg-on .pg-steps>li::before{transition:transform .9s var(--m-ease)}
.pg-on .pg-steps>li.is-in::before{transform:scaleX(0)}
.pg-on .pg-steps>li.is-lit::before{transform:none}
.pg-on .pg-steps>li::after{content:"";position:absolute;left:0;top:-2px;width:100%;height:3px;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,#fff,rgba(156,200,255,.9) 45%,rgba(156,200,255,0)) 0 50%/28px 3px no-repeat}
.pg-on .pg-steps:not(.why__list--light)>li::after{background-image:radial-gradient(closest-side,#0453A5,rgba(4,83,165,.55) 45%,rgba(4,83,165,0))}
.pg-on .pg-steps>li.is-lit::after{animation:pg-etincelle 1s var(--m-ease) both}
@keyframes pg-eclat{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@keyframes pg-etincelle{0%{opacity:0;transform:translate3d(-28px,0,0)}15%,75%{opacity:1}100%{opacity:0;transform:translate3d(calc(100% - 28px),0,0)}}

/* tuiles : une branche lumineuse court sur le bord haut et un nœud s'allume (après le rabat de motion.css) */
.pg-on .tile[data-reveal]::after{content:"";position:absolute;left:1.5rem;right:1.5rem;top:-1px;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,rgba(4,83,165,.95),rgba(4,83,165,0));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--m-ease) calc(var(--d,0s) + .55s)}
.pg-on .tile[data-reveal]::before{content:"";position:absolute;left:1.5rem;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;pointer-events:none;background:#fff;box-shadow:0 0 0 2px #0453A5,0 0 16px 4px rgba(156,200,255,.85);transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .45s)}
.pg-on .tile[data-reveal].is-in::after,.pg-on .tile[data-reveal].is-in::before{transform:none}
.pg-on .sec--dark .tile[data-reveal]::after{background:linear-gradient(90deg,rgba(156,200,255,.95),rgba(156,200,255,0))}
.pg-on .sec--dark .tile[data-reveal]::before{box-shadow:0 0 0 2px #9CC8FF,0 0 16px 4px rgba(156,200,255,.85)}

/* photos : un reflet passe une fois sur l'image révélée ; l'image de la FAQ se pose (léger zoom arrière). Parallaxe : main.js (.par) */
.pg-on .ph[data-clip]::after,.pg-on .faq__media[data-reveal]::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.18) 47%,rgba(214,234,255,.28) 50%,rgba(255,255,255,0) 68%);transform:translate3d(-105%,0,0)}
.pg-on .ph[data-clip].is-in::after{animation:pg-reflet 1.5s var(--m-ease) .85s both}
.pg-on .faq__media[data-reveal].is-in::after{animation:pg-reflet 1.5s var(--m-ease) calc(var(--d,0s) + .6s) both}
.pg-on .faq__media[data-reveal] img{transform:scale(1.12);transition:transform 1.8s var(--m-ease) var(--d,0s)}
.pg-on .faq__media[data-reveal].is-in img{transform:none}
@keyframes pg-reflet{from{transform:translate3d(-105%,0,0)}to{transform:translate3d(105%,0,0)}}

/* sections sombres : un trait lumineux s'ouvre sur le bord haut, une lueur s'allume dessous (sous le contenu) */
.pg-on main .sec--dark::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(156,200,255,0),rgba(156,200,255,.75) 30%,#fff 50%,rgba(156,200,255,.75) 70%,rgba(156,200,255,0));transform:scaleX(0);transition:transform 1.8s var(--m-ease)}
.pg-on main .sec--dark::after{content:"";position:absolute;left:0;right:0;top:-130px;width:min(56rem,92vw);height:260px;margin-inline:auto;pointer-events:none;background:radial-gradient(closest-side,rgba(156,200,255,.2),rgba(156,200,255,0));opacity:0;transition:opacity 2s ease .4s}
.pg-on main .sec--dark.pg-vu::before{transform:none}
.pg-on main .sec--dark.pg-vu::after{opacity:1}

/* pourcentages qui défilent (« 80 à 90 % ») : le vrai nombre reste dans la page (lecteurs d'écran, copier-coller, moteurs) et tient la
   largeur ; pendant le comptage il est transparent et le pseudo-élément affiche la valeur qui défile (ignorée par les lecteurs d'écran) */
.pg-num{position:relative;display:inline-block}
.pg-num[data-c]{-webkit-text-fill-color:transparent}
.pg-num[data-c]::after{content:attr(data-c);content:attr(data-c) / "";position:absolute;right:0;top:0;-webkit-text-fill-color:currentColor;font-variant-numeric:tabular-nums}

/* hero : canvas des branches lumineuses (pages.js), entre le voile et le texte ; aucun clic capté */
.pg-hero{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.4s ease;
  transform:translate3d(0,calc(var(--hp,0) * -50px),0)}   /* suit le texte du hero au défilement (même valeur que .hero__inner) : le masque reste juste */
.pg-hero.is-on{opacity:1}
.hero.pg-calme .hero__bg img{animation-play-state:paused}   /* repos (45 s sans geste, pages.js) : la photo s'arrête avec le dessin ; elle repart au premier geste */

/* mouvement réduit et impression : rien ne bouge, tout est visible */
.rm .pg-hero,.rm .pg-fil{display:none}
@media print{
  .pg-hero,.pg-fil{display:none!important}
  .pg-on .pg-list>li,.pg-on .pg-steps>li>b{opacity:1!important;transform:none!important}
}