/* ============================================================
   ObjectifCréA — Motion layer (Phase 5)
   Mouvement éditorial. École Stripe / Apple, jamais TikTok.
   Tout est sous garde-fou prefers-reduced-motion.
   v1.0 · 2026-05-08
   ============================================================ */

/* --- 1. Scroll progress bar (utilitaire, mauve apex) --- */
.motion-scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  background:linear-gradient(90deg, #74529E 0%, #B8A4D4 100%);
  z-index:9999;
  width:0%;
  transition:width 80ms ease-out;
  pointer-events:none;
}

/* --- 2. Stagger reveal sur les h1 (hero) --- */
.motion-stagger-word{
  display:inline-block;
  opacity:0;
  transform:translateY(0.3em);
  transition:opacity 500ms cubic-bezier(0.16,1,0.3,1), transform 500ms cubic-bezier(0.16,1,0.3,1);
}
.motion-stagger-word.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* --- 2.bis · Hero "Toi + l'IA + moi." · chorégraphie sur-mesure --- */
/* Doctrine : "Toi" est le protagoniste — taille, couleur, entrée dramatique.
   Les "+" sont des chevilles graphiques, gris atelier, plus petits.
   "l'IA" arrive en italique mauve apex (le sujet).
   "moi." arrive en dernier, plus discret, le formateur s'efface devant l'élève. */
.hero h1.hero-h1-tim{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0.18em;
  line-height:1;
}
.hero-h1-tim .tim-word,
.hero-h1-tim .tim-sep{
  display:inline-block;
  opacity:0;
  will-change:transform,opacity;
}

/* "Toi" — protagoniste : plus grand (1.08x), entrée du bas avec scale */
.hero-h1-tim .tim-toi{
  font-size:1.08em;
  color:var(--noir-scribe);
  font-weight:800;
  letter-spacing:-0.04em;
  animation:tim-enter-toi 900ms cubic-bezier(0.16,1,0.3,1) 100ms forwards;
}

/* "+" — chevilles graphiques, plus petites, gris atelier */
.hero-h1-tim .tim-sep{
  font-size:0.55em;
  color:var(--gris-atelier);
  font-weight:400;
  font-family:var(--sans);
  font-style:normal;
  transform:translateY(-0.15em);
  align-self:center;
}
.hero-h1-tim .tim-sep-1{
  animation:tim-enter-sep 600ms cubic-bezier(0.16,1,0.3,1) 500ms forwards;
}
.hero-h1-tim .tim-sep-2{
  animation:tim-enter-sep 600ms cubic-bezier(0.16,1,0.3,1) 1000ms forwards;
}

/* "l'IA" — sujet, italique mauve apex */
.hero-h1-tim .tim-ia{
  color:var(--mauve-apex);
  font-style:italic;
  font-weight:700;
  animation:tim-enter-ia 700ms cubic-bezier(0.16,1,0.3,1) 700ms forwards;
}

/* "moi." — discret, plus petit, le formateur s'efface */
.hero-h1-tim .tim-moi{
  font-size:0.85em;
  color:var(--gris-atelier);
  font-weight:600;
  font-style:italic;
  letter-spacing:-0.02em;
  animation:tim-enter-moi 800ms cubic-bezier(0.16,1,0.3,1) 1200ms forwards;
}

@keyframes tim-enter-toi{
  0%{opacity:0;transform:translateY(0.4em) scale(0.85)}
  60%{opacity:1;transform:translateY(-0.04em) scale(1.04)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes tim-enter-sep{
  0%{opacity:0;transform:translateY(-0.15em) rotate(-90deg) scale(0.5)}
  100%{opacity:0.6;transform:translateY(-0.15em) rotate(0) scale(1)}
}
@keyframes tim-enter-ia{
  0%{opacity:0;transform:translateY(0.3em) skewX(-3deg)}
  100%{opacity:1;transform:translateY(0) skewX(0)}
}
@keyframes tim-enter-moi{
  0%{opacity:0;transform:translateY(0.2em)}
  100%{opacity:0.85;transform:translateY(0)}
}

/* Mobile : on baisse l'écart pour que les 5 éléments restent groupés */
@media (max-width:640px){
  .hero h1.hero-h1-tim{gap:0.12em}
  .hero-h1-tim .tim-sep{font-size:0.45em}
}

/* --- 3. Compteurs (chiffre__num qui s'anime au scroll) --- */
.motion-counter{
  font-variant-numeric:tabular-nums;
}

/* --- 4. Magnetic hover sur link-cta --- */
.link-cta{
  will-change:transform;
}

/* --- 5. Phoenix parallax subtil (watermarks) --- */
.hero__watermark,
.footer-watermark,
.cartel-watermark{
  will-change:transform;
  transition:transform 600ms cubic-bezier(0.16,1,0.3,1);
}

/* --- 6. Reveal au scroll : on laisse le CSS existant des pages, on n'override pas --- */

/* --- 7. Trust bar à la Anthropic — marquee horizontal --- */
.trust-bar{
  background:var(--blanc-toile);
  padding:var(--fib-5) 0;
  overflow:hidden;
  position:relative;
  border-top:1px solid var(--mauve-voile);
  border-bottom:1px solid var(--mauve-voile);
}
.trust-bar__title{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:18px;
  color:var(--noir-scribe);
  text-align:center;
  margin:0 0 var(--fib-4);
  letter-spacing:0.2px;
}
.trust-bar__viewport{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.trust-bar__track{
  display:flex;
  gap:var(--fib-7);
  width:max-content;
  animation:trust-scroll 45s linear infinite;
  will-change:transform;
}
.trust-bar:hover .trust-bar__track{animation-play-state:paused}
.trust-bar__logo{
  font-family:var(--sans);
  font-size:18px;
  font-weight:600;
  color:var(--gris-atelier);
  letter-spacing:0.3px;
  flex-shrink:0;
  white-space:nowrap;
  transition:color .25s;
  display:flex;
  align-items:center;
  text-decoration:none;
}
a.trust-bar__logo:hover{color:var(--mauve-apex);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.trust-bar__logo--acronym{
  letter-spacing:2.2px;
  font-size:16px;
}
.trust-bar:hover .trust-bar__logo{color:var(--mauve-apex)}
@keyframes trust-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media (max-width:640px){
  .trust-bar__track{gap:var(--fib-6);animation-duration:50s}
  .trust-bar__logo{font-size:15px}
  .trust-bar__logo--acronym{font-size:13px;letter-spacing:1.8px}
}

/* --- 8. Chat popup CréA+ (Claude Haiku) --- */
.chat-popup{
  position:fixed;
  bottom:96px;right:24px;
  width:380px;max-width:calc(100vw - 32px);
  height:520px;max-height:calc(100vh - 140px);
  background:var(--blanc-toile);
  border:1px solid var(--mauve-voile);
  border-radius:var(--fib-2);
  box-shadow:0 24px 60px rgba(26,26,26,0.18);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:98;
  animation:chat-pop 280ms cubic-bezier(0.16,1,0.3,1) both;
}
.chat-popup.active{display:flex}
@keyframes chat-pop{
  0%{opacity:0;transform:translateY(20px) scale(0.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.chat-popup-header{
  background:var(--mauve-apex);
  color:#FFFFFF;
  padding:var(--fib-3);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:0.3px;
}
.chat-popup-header strong{font-weight:700;letter-spacing:0.5px}
.chat-close{
  background:transparent;border:0;color:#FFFFFF;
  font-size:24px;line-height:1;cursor:pointer;padding:0 var(--fib-1);
  opacity:0.85;transition:opacity .15s;
}
.chat-close:hover{opacity:1}
.chat-messages{
  flex:1;overflow-y:auto;
  padding:var(--fib-3);
  display:flex;flex-direction:column;gap:var(--fib-2);
  background:var(--mauve-pale-fond);
  font-family:var(--sans);font-size:14px;line-height:1.55;
}
.chat-messages .message{
  padding:var(--fib-2) var(--fib-3);
  border-radius:var(--fib-2);
  max-width:85%;
  word-wrap:break-word;
}
.chat-messages .message-bot{
  background:#FFFFFF;
  border:1px solid var(--mauve-voile);
  color:var(--noir-scribe);
  align-self:flex-start;
  border-bottom-left-radius:4px;
}
.chat-messages .message-user{
  background:var(--mauve-apex);
  color:#FFFFFF;
  align-self:flex-end;
  border-bottom-right-radius:4px;
}
.chat-messages .message a{color:inherit;text-decoration:underline}
.chat-messages .message-typing{opacity:0.6;font-style:italic}
.chat-input-area{
  display:flex;gap:var(--fib-1);
  padding:var(--fib-2) var(--fib-3);
  background:#FFFFFF;
  border-top:1px solid var(--mauve-voile);
}
.chat-input-area input{
  flex:1;
  padding:var(--fib-2) var(--fib-3);
  border:1px solid var(--mauve-voile);
  border-radius:var(--fib-2);
  font-family:var(--sans);font-size:14px;
  background:var(--mauve-pale-fond);
}
.chat-input-area input:focus{
  outline:none;
  border-color:var(--mauve-apex);
  background:#FFFFFF;
}
.chat-input-area button{
  background:var(--mauve-apex);color:#FFFFFF;
  border:0;padding:0 var(--fib-3);
  border-radius:var(--fib-2);
  font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;transition:background .15s;
  min-width:80px;
}
.chat-input-area button:hover{background:#5d4180}
.chat-input-area button:disabled{opacity:0.5;cursor:not-allowed}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:540px){
  .chat-popup{
    bottom:80px;right:8px;left:8px;
    width:auto;max-width:none;
    height:calc(100vh - 100px);
  }
}

/* --- Garde-fou accessibilité absolu --- */
@media (prefers-reduced-motion:reduce){
  .motion-scroll-progress{display:none}
  .motion-stagger-word{opacity:1;transform:none;transition:none}
  .hero__watermark,.footer-watermark,.cartel-watermark{transition:none;transform:none !important}
  .hero-h1-tim .tim-word,.hero-h1-tim .tim-sep{opacity:1;animation:none;transform:none}
  .hero-h1-tim .tim-sep{opacity:0.6}
  .hero-h1-tim .tim-moi{opacity:0.85}
}