/* =========================================================
   AIKLORE - components.css
   Composants reutilisables : barre de progression, reveals au scroll, pills.
   Ordre de chargement : apres tokens.css (NE PAS reordonner : cascade CSS).
   ========================================================= */
/* ---------- barre de progression scroll ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--teal),var(--cobalt));box-shadow:0 0 12px rgba(0,168,126,.5);
  transition:width .08s linear;}

/* ---------- reveals au scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:opacity,transform;}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal="left"]{transform:translateX(-40px);}
[data-reveal="right"]{transform:translateX(40px);}
[data-reveal="scale"]{transform:scale(.94);}
/* mode scroll-driven : le JS pilote opacité/transform image par image, pas de transition CSS */
html.reveal-scroll [data-reveal]{transition:none;}

/* ---------- pill buttons ---------- */
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;
  padding:14px 32px;font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:0;
  cursor:pointer;border:2px solid transparent;overflow:hidden;
  transition:transform .25s var(--ease), opacity .2s ease, background .2s ease, color .2s ease;}
.pill:hover{opacity:.92;transform:translateY(-2px);}
.pill:active{transform:translateY(0);}
/* éclat lumineux qui traverse le bouton au survol */
.pill::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);
  transition:left .6s var(--ease);}
.pill:hover::after{left:140%;}
.pill--light{background:var(--white);color:#000;}
.pill--dark{background:var(--dark);color:var(--white);}
.pill--dark::after{background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);}
.pill--outline-dark{background:transparent;color:var(--dark);border-color:var(--dark);}
.pill--outline-dark::after{background:linear-gradient(120deg,transparent,rgba(0,0,0,.08),transparent);}
.pill--ghost{background:rgba(244,244,244,.1);color:var(--surface);border-color:var(--surface);}