/* ============================================================
   BAYSTON — socle design / motion partagé
   Familles 1 à 8 du répertoire (desktop + mobile)
   Tout est neutralisé si l'utilisateur réduit les animations.
   ============================================================ */

/* ---------- variables de mouvement ---------- */
:root{
  --m-fast:150ms;
  --m-mid:280ms;
  --m-slow:450ms;
  --m-ease:cubic-bezier(.2,.8,.3,1);
  --m-spring:cubic-bezier(.34,1.36,.5,1);
}

/* ============================================================
   1 · MICRO-INTERACTIONS — boutons & liens
   ============================================================ */

/* enfoncement + ombre qui se resserre au clic */
[data-btn],button,a[data-cta]{
  position:relative;
  transition:transform var(--m-fast) var(--m-ease),
             box-shadow var(--m-mid) var(--m-ease),
             background-color var(--m-mid) ease,
             color var(--m-mid) ease;
}
[data-btn]:active,button:active,a[data-cta]:active{transform:scale(.972)}

/* halo de lumière qui balaie le bouton au survol */
@media (hover:hover){
  [data-btn]{overflow:hidden;isolation:isolate}
  [data-btn]::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
    background-size:260% 100%;background-position:130% 0;opacity:0;
    transition:background-position .7s var(--m-ease),opacity var(--m-fast) ease;
  }
  [data-btn]:hover::after{opacity:1;background-position:-40% 0}
}

/* flèche qui avance puis revient en élastique */
[data-arrow]{display:inline-flex;align-items:center;gap:8px}
[data-arrow] svg{transition:transform var(--m-mid) var(--m-spring)}
@media (hover:hover){ [data-arrow]:hover svg{transform:translateX(4px)} }

/* libellé qui glisse et laisse place à un second */
[data-swap]{position:relative;display:inline-grid;overflow:hidden}
[data-swap] > *{grid-area:1/1;transition:transform var(--m-mid) var(--m-ease),opacity var(--m-fast) ease}
[data-swap] > *:last-child{transform:translateY(110%);opacity:0}
@media (hover:hover){
  [data-swap]:hover > *:first-child{transform:translateY(-110%);opacity:0}
  [data-swap]:hover > *:last-child{transform:none;opacity:1}
}

/* icône qui pivote avec rebond */
[data-spin]{transition:transform var(--m-mid) var(--m-spring)}
@media (hover:hover){ [data-spin-host]:hover [data-spin]{transform:rotate(8deg) scale(1.08)} }

/* soulignement de lien qui se dessine */
[data-underline]{position:relative;text-decoration:none}
[data-underline]::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1.5px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform var(--m-mid) var(--m-ease);
}
@media (hover:hover){ [data-underline]:hover::after{transform:scaleX(1)} }

/* lien externe dont l'icône décolle */
[data-ext] svg{transition:transform var(--m-mid) var(--m-spring)}
@media (hover:hover){ [data-ext]:hover svg{transform:translate(3px,-3px)} }

/* bouton désactivé qui vibre quand on insiste */
[data-btn][aria-disabled="true"]:active,button:disabled:active{animation:m-shake .34s ease}
@keyframes m-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}

/* pastille de notification qui grossit puis retombe */
[data-badge]{animation:m-pop .42s var(--m-spring) both}
@keyframes m-pop{from{transform:scale(0);opacity:0}60%{transform:scale(1.18)}to{transform:scale(1);opacity:1}}

/* état de chargement : trois points */
[data-loading] [data-dots]{display:inline-flex;gap:4px}
[data-loading] [data-dots] i{
  width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:m-dot 1s ease-in-out infinite;
}
[data-loading] [data-dots] i:nth-child(2){animation-delay:.15s}
[data-loading] [data-dots] i:nth-child(3){animation-delay:.3s}
@keyframes m-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ============================================================
   2 · CARTES & SURFACES
   ============================================================ */

[data-card],[data-card2],[data-stat],[data-step],[data-why],[data-uni]{
  transition:transform var(--m-mid) var(--m-ease),
             box-shadow var(--m-mid) var(--m-ease),
             border-color var(--m-mid) ease,
             background-color var(--m-mid) ease;
}

/* ombre qui s'étend et se ramollit */
@media (hover:hover){
  [data-lift]:hover{transform:translateY(-6px)}
}

/* inclinaison 3D vers le curseur (piloté en JS via --rx/--ry) */
[data-tilt]{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform var(--m-mid) var(--m-ease);
  transform-style:preserve-3d;
}
[data-tilt][data-tilting]{transition:transform 80ms linear}

/* bord intérieur lumineux du côté du curseur */
[data-glowedge]{position:relative;isolation:isolate}
[data-glowedge]::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%);
  opacity:0;transition:opacity var(--m-mid) ease;mix-blend-mode:overlay;
}
@media (hover:hover){ [data-glowedge]:hover::before{opacity:1} }

/* reflet spéculaire à l'apparition */
[data-shine]{position:relative;overflow:hidden}
[data-card2]{position:relative}
[data-shine][data-shone]::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%);
  background-size:250% 100%;
  animation:m-shine .62s var(--m-ease) both;
}
@keyframes m-shine{
  0%{opacity:0;background-position:130% 0}
  25%{opacity:1}
  100%{opacity:0;background-position:-30% 0}
}

/* image de carte qui zoome lentement */
[data-zoom] img,[data-zoom] image-slot{transition:transform 1.1s var(--m-ease)}
@media (hover:hover) and (min-width:1101px){
  [data-zoom]:hover img,[data-zoom]:hover image-slot{transform:scale(1.06)}
}

/* grain fin sur les surfaces claires */
[data-grain]{position:relative}
[data-grain]::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* rangée qui apparaît en cascade */
[data-cascade] > *{animation:m-rise var(--m-slow) var(--m-ease) both}
[data-cascade] > *:nth-child(1){animation-delay:0ms}
[data-cascade] > *:nth-child(2){animation-delay:26ms}
[data-cascade] > *:nth-child(3){animation-delay:52ms}
[data-cascade] > *:nth-child(4){animation-delay:78ms}
[data-cascade] > *:nth-child(5){animation-delay:104ms}
[data-cascade] > *:nth-child(6){animation-delay:130ms}

/* ============================================================
   3 · DÉFILEMENT & RÉVÉLATION
   ============================================================ */

@keyframes m-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes m-riseBlur{
  0%{opacity:0;transform:translateY(18px);filter:blur(7px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    [data-reveal]{animation:m-rise linear both;animation-timeline:view();animation-range:entry 2% entry 34%}
    [data-reveal-blur]{animation:m-riseBlur linear both;animation-timeline:view();animation-range:entry 4% entry 38%}
    /* parallaxe douce des fonds */
    [data-parallax]{animation:m-para linear both;animation-timeline:view();animation-range:cover}
  }
}
@keyframes m-para{from{transform:translateY(-4%)}to{transform:translateY(4%)}}

/* mots du titre qui arrivent un par un */
[data-words] span{display:inline-block;animation:m-riseBlur .7s var(--m-ease) both}

/* barre de progression de lecture */
[data-progress]{
  position:fixed;top:0;left:0;right:0;height:2.5px;z-index:200;transform-origin:left center;
  background:linear-gradient(90deg,#24547e,#4a52c4);transform:scaleX(0);
}

/* image révélée derrière un masque qui s'ouvre */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    [data-unmask]{clip-path:inset(0 0 0 0);animation:m-unmask linear both;animation-timeline:view();animation-range:entry 6% entry 46%}
  }
}
@keyframes m-unmask{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ============================================================
   4 · NAVIGATION
   ============================================================ */

[data-navpill],[data-langpill]{
  transition:transform .42s var(--m-spring),width .42s var(--m-spring),opacity var(--m-mid) ease,background var(--m-mid) ease;
  will-change:transform,width;
}
[data-tobetop]{
  position:fixed;right:18px;bottom:84px;z-index:70;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(15,17,22,.1);
  background:rgba(255,255,255,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 2px 6px rgba(15,17,22,.08),0 14px 30px -14px rgba(15,17,22,.4);
  opacity:0;pointer-events:none;transform:translateY(10px) rotate(-90deg);
  transition:opacity var(--m-mid) ease,transform var(--m-slow) var(--m-spring);
}
[data-tobetop][data-show]{opacity:1;pointer-events:auto;transform:none}

/* ============================================================
   5 · FORMULAIRES
   ============================================================ */

[data-field]{position:relative}
[data-field] > input,[data-field] > textarea{width:100%;flex:1}
[data-field] > label{z-index:1;background:transparent;padding:0 2px}
[data-field]:focus-within > label,[data-field][data-filled] > label{
  transform:translateY(-50%) translateY(-26px) scale(.84);
  background:#fbfbfd;border-radius:4px;
}
[data-field] label{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-size:14px;font-weight:600;color:#8b93a5;
  transition:transform var(--m-mid) var(--m-ease),font-size var(--m-mid) ease,color var(--m-mid) ease;
}
[data-field]:focus-within label,
[data-field][data-filled] label{
  transform:translateY(-24px) scale(.86);transform-origin:left center;color:#24547e;
}
input,textarea,select{transition:border-color var(--m-mid) ease,box-shadow var(--m-mid) ease,background-color var(--m-mid) ease}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(36,84,126,.14)}

/* champ valide : coche dessinée */
[data-valid] path{stroke-dasharray:24;stroke-dashoffset:24;animation:m-check .34s var(--m-ease) forwards}
@keyframes m-check{to{stroke-dashoffset:0}}

/* champ en erreur */
[data-error]{animation:m-shake .34s ease}
[data-errmsg]{overflow:hidden;max-height:0;opacity:0;transition:max-height var(--m-mid) var(--m-ease),opacity var(--m-fast) ease}
[data-errmsg][data-show]{max-height:60px;opacity:1}

/* interrupteur avec dépassement */
[data-switch]{transition:background-color var(--m-mid) ease}
[data-switch] [data-knob]{transition:transform var(--m-mid) var(--m-spring)}

/* ============================================================
   6 · FILTRES, LISTES & TABLEAUX
   ============================================================ */

[data-out]{display:none!important}
[data-in]{animation:m-inCard var(--m-slow) var(--m-ease) both;animation-delay:var(--d,0ms)}
@keyframes m-inCard{
  0%{opacity:0;transform:translateY(18px) scale(.94);filter:blur(6px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
[data-in]::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.82) 50%,transparent 58%);
  background-size:250% 100%;
  animation:m-shine .62s var(--m-ease) both;animation-delay:calc(var(--d,0ms) + 90ms);
}

/* pastille de filtre actif, relief 3D */
[data-pill3d]{
  background:linear-gradient(180deg,#2b3040 0%,#0f1116 62%)!important;color:#fff!important;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -2px 6px rgba(0,0,0,.35) inset,
             0 4px 12px -2px rgba(15,17,22,.45)!important;
}

/* jeton supprimé qui se contracte */
[data-chip-out]{animation:m-chipOut .22s ease both}
@keyframes m-chipOut{to{opacity:0;transform:scale(.7);margin-right:-8px}}

/* ligne de tableau */
[data-row]{transition:background-color var(--m-mid) ease}
@media (hover:hover){ [data-row]:hover{background:rgba(36,84,126,.035)} }

/* barre de répartition qui se déploie */
[data-yearbar] > div{transform-origin:left center;animation:m-grow .9s var(--m-ease) both}
@keyframes m-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* squelette de chargement */
[data-skeleton]{
  background:linear-gradient(90deg,rgba(15,17,22,.05) 25%,rgba(15,17,22,.09) 37%,rgba(15,17,22,.05) 63%);
  background-size:400% 100%;animation:m-skel 1.4s ease-in-out infinite;border-radius:10px;
}
@keyframes m-skel{0%{background-position:100% 0}100%{background-position:0 0}}

/* accordéon */
[data-acc]{overflow:hidden;transition:max-height var(--m-slow) var(--m-ease)}
[data-acc-chev]{transition:transform var(--m-mid) var(--m-spring)}
[data-acc-open] [data-acc-chev]{transform:rotate(180deg)}

/* ============================================================
   7 · SCHÉMAS
   ============================================================ */

[data-wires] path{transition:stroke-dashoffset 1.2s var(--m-ease),opacity var(--m-mid) ease,stroke-width var(--m-fast) ease}

/* ============================================================
   8 · IMAGES & MÉDIAS
   ============================================================ */

[data-img]{background:rgba(15,17,22,.05)}
[data-img] img{opacity:0;filter:blur(12px);transition:opacity var(--m-slow) ease,filter var(--m-slow) ease}
[data-img] img[data-loaded]{opacity:1;filter:blur(0)}

[data-caption]{transform:translateY(8px);opacity:0;transition:transform var(--m-mid) var(--m-ease),opacity var(--m-mid) ease}
@media (hover:hover){ [data-figure]:hover [data-caption]{transform:none;opacity:1} }

/* ============================================================
   9 · MOBILE — gestes, retours & états
   ============================================================ */

@media (max-width:1100px){
  /* rangées aimantées */
  [data-snap-host]{scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  [data-snap-host] > a{scroll-snap-align:center}
  [data-snap]{
    display:flex!important;flex-direction:row!important;overflow-x:auto!important;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  [data-snap]::-webkit-scrollbar{display:none}
  [data-snap] > *{scroll-snap-align:center;flex:0 0 84%!important}

  /* défilement élastique aux extrémités */
  [data-snap]{overscroll-behavior-x:contain}

  /* réduction d'échelle au toucher */
  [data-card]:active,[data-uni]:active,[data-why]:active,[data-tap]:active{transform:scale(.98)}

  /* surbrillance instantanée, sans délai */
  a,button,[role="button"]{-webkit-tap-highlight-color:rgba(36,84,126,.12);touch-action:manipulation}

  /* pas de survol sur tactile */
  [data-lift]:hover{transform:none}

  /* bouton retour en haut au-dessus de la barre d'onglets */
  [data-tobetop]{bottom:calc(72px + env(safe-area-inset-bottom))}

  /* feuille inférieure */
  [data-sheet]{
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    transform:translateY(100%);transition:transform var(--m-slow) var(--m-ease);
    border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.96);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    box-shadow:0 -8px 40px -12px rgba(15,17,22,.35);
  }
  [data-sheet][data-open]{transform:none}
  [data-sheet-handle]{
    width:38px;height:4px;border-radius:999px;background:rgba(15,17,22,.18);
    margin:10px auto 4px;
  }
  [data-scrim]{
    position:fixed;inset:0;z-index:110;background:rgba(15,17,22,.42);
    opacity:0;pointer-events:none;transition:opacity var(--m-mid) ease;
  }
  [data-scrim][data-open]{opacity:1;pointer-events:auto}

  /* barre d'onglets qui se masque en descendant */
  [data-tabbar]{transition:transform var(--m-slow) var(--m-ease)}
  [data-tabbar][data-hide]{transform:translateY(120%)}

  /* bandeau hors ligne */
  [data-offline]{
    position:fixed;left:0;right:0;top:0;z-index:200;padding:9px 16px;text-align:center;
    background:#0f1116;color:#fff;font-size:12.5px;font-weight:700;
    transform:translateY(-100%);transition:transform var(--m-slow) var(--m-ease);
  }
  [data-offline][data-show]{transform:none}

  /* pastille de confirmation */
  [data-toast]{
    position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:150;
    transform:translate(-50%,14px);opacity:0;padding:12px 20px;border-radius:999px;
    background:#0f1116;color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;
    box-shadow:0 14px 34px -14px rgba(0,0,0,.6);
    transition:opacity var(--m-mid) ease,transform var(--m-slow) var(--m-spring);
  }
  [data-toast][data-show]{opacity:1;transform:translate(-50%,0)}

  /* indicateur de pages du carrousel */
  [data-dots-nav]{display:flex;gap:6px;justify-content:center;margin-top:12px}
  [data-dots-nav] i{
    width:6px;height:6px;border-radius:50%;background:rgba(15,17,22,.18);
    transition:width var(--m-mid) var(--m-ease),background-color var(--m-mid) ease;
  }
  [data-dots-nav] i[data-on]{width:18px;background:#0f1116}
}

/* ============================================================
   10 · RÉDUCTION D'ANIMATION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-parallax],[data-tilt]{transform:none!important}
}