/* ═══════════════════════════════════════════════════════════
   JuridCI — animations.css · effet premium navy profond + or
   Chargé sur toutes les pages (avec animations.js en defer).
   Règle : tout ce qui BOUGE est sous prefers-reduced-motion:no-preference ;
   le décor statique (hero navy, verre de la nav, lueurs au survol) reste.
   ═══════════════════════════════════════════════════════════ */

:root{
  --fx-gold:#56D37D; --fx-gold-hi:#E2FD70; --fx-gold-lo:#177A43;
  --fx-navy-deep:#0A0E0C;
  --fx-gold-hi-rgb:226,253,112; --fx-navy-deep-rgb:10,14,12; --fx-bleu-halo-rgb:79,91,213;
  --fx-particule-rgb:244,255,205;
  --fx-gold-survol:#E2FD70; --fx-gold-lien:#E2FD70; --fx-gold-reflet:#F4FFD0;
  --fx-shine-1:#56D37D; --fx-shine-2:#9BE878; --fx-shine-3:#E2FD70; --fx-bleu-mid:#177A43;
  --fx-ease:cubic-bezier(.22,1,.36,1);
}

/* ─────────── TRANSITIONS DE PAGE (View Transitions natives, même origine) ─────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.2s cubic-bezier(.4,0,1,1) both fx-fade-out}
::view-transition-new(root){animation:.34s var(--fx-ease) both fx-fade-in}
@keyframes fx-fade-out{to{opacity:0}}
@keyframes fx-fade-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ─────────── INDICATEUR DE SCROLL (fin, doré) ─────────── */
.fx-scrollbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:10000;pointer-events:none;
  background:linear-gradient(90deg,var(--fx-gold-lo),var(--fx-gold-hi) 55%,var(--fx-gold));
  box-shadow:0 0 8px rgba(var(--or-rgb),.55);
  transform-origin:0 50%;transform:scaleX(0);
}

/* ─────────── CURSEUR DORÉ + CANVAS D'EFFETS (desktop) ─────────── */
.fx-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9998}
.fx-cursor{
  position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--fx-gold);pointer-events:none;z-index:9999;opacity:0;
  box-shadow:0 0 0 1px rgba(var(--vert-rgb),.35),0 0 12px 2px rgba(var(--or-rgb),.65);
  transition:opacity .2s;
}
.fx-cursor.on{opacity:1}

/* ─────────── NAVIGATION : verre ─────────── */
/* pages formulaires / courtes : verre clair teinté navy */
.nav{
  background:linear-gradient(180deg,rgba(var(--vert-clair-rgb),.78),rgba(var(--craie-rgb),.68));
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  border-bottom-color:rgba(var(--vert-rgb),.1);
}
.hero :focus-visible{outline-color:rgba(var(--fx-gold-hi-rgb),.85)}

/* soulignement doré animé */
.nav-links a,.nav-back{position:relative}
.nav-links a::after,.nav-back::after{
  content:'';position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--fx-gold-lo),var(--fx-gold-hi));
  transform:scaleX(0);transform-origin:right center;
}
.nav-links a:hover::after,.nav-back:hover::after{transform:scaleX(1);transform-origin:left center}

/* « CI » du logo : vert foncé sur fond clair (variante B), dégradé sur fond sombre */
.brand .ci,.nav-logo > span:not(.nav-logo-mark){color:var(--vert-texte,#177A43)}
.sb-brand .ci{
  background:linear-gradient(100deg,var(--fx-gold) 0%,var(--fx-gold) 38%,var(--fx-gold-reflet) 50%,var(--fx-gold) 62%,var(--fx-gold) 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}

/* ─────────── HERO (index) : navy profond + or ─────────── */
.hero{
  position:relative;isolation:isolate;color:#fff;
  background:
    radial-gradient(900px 520px at 78% 18%,rgba(var(--or-rgb),.16),transparent 62%),
    radial-gradient(820px 480px at 6% 96%,rgba(var(--fx-bleu-halo-rgb),.22),transparent 62%),
    var(--fx-navy-deep);
  margin:8px clamp(8px,1.5vw,20px) 0;border-radius:24px;overflow:clip;
}
/* colonne de texte un peu plus large : le titre tient sur 3 lignes au lieu de 4 */
.hero-in{position:relative;z-index:1;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
/* Desktop : la colonne photo s'élargit (≈ 560-600 px) en débordant dans la marge de droite ;
   le bord gauche du texte reste aligné sur la nav et les sections (wrap 1120 px).
   Photo centrée sur le bloc titre + paragraphe + boutons, chiffres clés sur la ligne suivante. */
@media (min-width:901px){
  .hero-in{
    grid-template-columns:minmax(0,1fr) clamp(520px,44vw,600px);
    max-width:calc(var(--wrap) + 160px);margin-left:max(0px,calc((100% - var(--wrap)) / 2));margin-right:0;
    row-gap:var(--space-12);
  }
  .hero-visual{grid-column:2;grid-row:1}
  .hero-stats{grid-column:1;grid-row:2}
}
/* chiffres clés : élément de la grille, l'écart vient du gap */
.hero-in > .hero-stats{margin-top:0}
@media (max-width:900px){.hero-in{grid-template-columns:1fr}}
.fx-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* plafond abaissé : le titre tient sur 3 lignes à 1280 px (il en faisait 4 à 3,4 rem) ; sur mobile c'est le plancher qui s'applique, rien ne change */
.hero h1{color:#fff;font-size:clamp(2.25rem,1.6rem + 2.2vw,3.05rem)}
.hero .lead{color:rgba(255,255,255,.78)}
.hero .btn-primary{background:var(--degrade,var(--fx-gold));color:var(--fx-navy-deep)}
.hero .btn-primary:hover{background:var(--fx-gold-survol)}
/* bordure à 50 % : 4,52:1 sur le navy (34 % ne donnait que 2,85:1, sous le seuil 3:1 d'un élément d'interface) */
.hero .btn-secondary{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.5)}
.hero .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--fx-gold)}
.hero .link-quiet{color:var(--fx-gold-lien)}
.hero .link-quiet:hover{border-color:var(--fx-gold-lien)}

/* « JuridCI » dans le titre : or brillant */
.gold-shimmer{
  background:linear-gradient(100deg,var(--fx-shine-1) 0%,var(--fx-shine-2) 30%,var(--fx-shine-3) 45%,var(--fx-shine-2) 60%,var(--fx-shine-1) 100%);
  background-size:220% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}

/* titre découpé en mots (animations.js) */
.fx-word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.fx-word{display:inline-block}

/* chiffres clés — faits déjà affichés sur le site, pas de statistiques inventées */
.hero-stats{
  display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(18px,3vw,40px);
  margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.12);
}
.hero-stat b{
  display:block;font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.1;color:var(--or-doux);font-variant-numeric:tabular-nums;
}
/* enfant direct : le <span class="fx-count"> inséré par le compteur dans le <b> garde la typo du chiffre */
.hero-stat > span{display:block;margin-top:4px;font-size:.8125rem;line-height:1.4;color:rgba(255,255,255,.62)}
@media (max-width:640px){.hero-stats{grid-template-columns:repeat(2,1fr);margin-top:var(--space-8)}}

.fx-count{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}

/* cartes offres : lueur qui suit le curseur (--mx / --my posés par animations.js) */
.offer{position:relative;isolation:isolate}
.offer::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--vert-rgb),.13),transparent 60%);
}
.offer:hover::before{opacity:1}

/* ─────────── FORMULAIRES ─────────── */
.progress-bar{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--vert) 0%,var(--fx-bleu-mid) 70%,var(--fx-gold) 100%)}
.step-item.done .step-circle{background:var(--or-lt);border-color:var(--or-ligne);color:var(--vert)}

/* boutons qui reçoivent l'onde (ripple) */
.btn-next,.btn-pay,.hero .btn-primary,.cta .btn-primary,.nav-cta,.btn-verif-submit,.scan-btn{position:relative;overflow:hidden;isolation:isolate}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.38);transform:scale(0)}

/* ─────────── ADMIN ─────────── */
.sb-nav a{position:relative}
.sb-nav a.active{
  background:linear-gradient(90deg,rgba(var(--or-rgb),.18),rgba(255,255,255,.08));
  box-shadow:inset 3px 0 0 var(--fx-gold),0 10px 24px -14px rgba(var(--or-rgb),.7);
}

/* ═══════════════════════ MOUVEMENT ═══════════════════════ */
@media (prefers-reduced-motion:no-preference){

  /* hero : masqué jusqu'à ce qu'animations.js découpe le titre (html.js-anim posé dans le <head> d'index).
     Filet de sécurité : visible au bout de 3 s si le script ne se charge pas. */
  html.js-anim:not(.anim-ready) .hero h1,
  html.js-anim:not(.anim-ready) .hero-stats{visibility:hidden;animation:fx-failsafe 0s 3s forwards}

  .gold-shimmer{animation:fx-shimmer 4.5s ease-in-out 1.2s infinite}
  .hero .btn-primary{animation:fx-pulse 2.8s ease-out 1.8s infinite}
  .hero .btn-primary:hover{animation-play-state:paused}
  .hero.is-offscreen .gold-shimmer,.hero.is-offscreen .btn-primary{animation-play-state:paused}

  .nav-links a::after,.nav-back::after{transition:transform .32s var(--fx-ease)}
  .brand:hover .ci,.nav-logo:hover > span:not(.nav-logo-mark),.sb-brand:hover .ci{animation:fx-logo-shine .9s var(--fx-ease)}
  .offer::before{transition:opacity .35s var(--fx-ease)}
  .offer{transition:border-color var(--dur-fast,.13s) var(--ease),background var(--dur-fast,.13s) var(--ease),box-shadow .35s var(--fx-ease)}

  /* formulaires */
  html.has-gsap .step-panel.active{animation:none}       /* GSAP fait entrer les blocs en cascade */
  .progress-bar{transition:width .7s var(--fx-ease)}
  .progress-bar.fx-shine::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
    transform:translateX(-100%);animation:fx-bar-shine 1.1s var(--fx-ease) .2s;
  }
  .step-item.done .step-circle{animation:fx-check-pop .5s var(--fx-ease)}
  .fx-ripple{animation:fx-ripple .6s var(--fx-ease) forwards}

  /* champ en focus : un filet or se trace sous la saisie */
  .field input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.dp-input):focus,
  .field textarea:focus,.vfield input:focus,.s-input-wrap input:focus{
    background-image:linear-gradient(var(--fx-gold),var(--fx-gold));background-repeat:no-repeat;
    background-position:left bottom;background-size:100% 2px;animation:fx-trace .45s var(--fx-ease);
  }

  /* pages courtes : la carte entre en douceur */
  .verif-card,.suivi-card,.success-wrap{animation:fx-rise .6s var(--fx-ease) both}

  /* WhatsApp : petit rebond toutes les 7 s */
  .wa-float,.wa{animation:fx-nudge 7s ease-in-out 3s infinite}
  .wa-float:hover,.wa:hover{animation-play-state:paused}

  /* admin */
  .kpi-grid .kpi,.rev-head .kpi{animation:fx-rise .55s var(--fx-ease) both}
  .kpi-grid .kpi:nth-child(2),.rev-head .kpi:nth-child(2){animation-delay:.05s}
  .kpi-grid .kpi:nth-child(3),.rev-head .kpi:nth-child(3){animation-delay:.1s}
  .kpi-grid .kpi:nth-child(4){animation-delay:.15s}
  .kpi-grid .kpi:nth-child(5){animation-delay:.2s}
  .kpi-grid .kpi:nth-child(6){animation-delay:.25s}
  .kpi-grid .kpi:nth-child(7){animation-delay:.3s}
  .kpi-grid .kpi:nth-child(8){animation-delay:.35s}
  .sb-nav a.active::after{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(100deg,transparent 25%,rgba(var(--fx-gold-hi-rgb),.3) 50%,transparent 75%);
    background-size:250% 100%;animation:fx-sweep 1s var(--fx-ease) both;
  }
}

@keyframes fx-failsafe{to{visibility:visible}}
@keyframes fx-shimmer{0%{background-position:100% 0}55%,100%{background-position:0 0}}
@keyframes fx-logo-shine{from{background-position:100% 0}to{background-position:0 0}}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(var(--fx-gold-hi-rgb),.6)}70%,100%{box-shadow:0 0 0 14px rgba(var(--fx-gold-hi-rgb),0)}}
@keyframes fx-bar-shine{to{transform:translateX(100%)}}
@keyframes fx-check-pop{0%{transform:scale(.6)}60%{transform:scale(1.18);box-shadow:0 0 0 6px rgba(var(--or-rgb),.25)}100%{transform:scale(1)}}
@keyframes fx-ripple{to{transform:scale(1);opacity:0}}
@keyframes fx-trace{from{background-size:0% 2px}}
@keyframes fx-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes fx-nudge{0%,86%,100%{transform:translateY(0)}90%{transform:translateY(-6px)}94%{transform:translateY(0)}97%{transform:translateY(-2px)}}
@keyframes fx-sweep{from{background-position:100% 0}to{background-position:0 0}}