/* Animations des deux sites : discrètes, fluides, uniquement en opacité et en déplacement.
   Elles ne s'appliquent que sous html.anim, ajoutée par animations.js quand le visiteur n'a pas
   demandé à réduire les animations : sans JavaScript ou en mouvement réduit, tout reste statique. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* Apparition au défilement, en cascade entre éléments voisins (--i posé par le script) */
.anim .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.anim .reveal.visible { opacity: 1; transform: none; }
.anim .about-photo.reveal { transform: scale(.96); }
.anim .about-photo.reveal.visible { transform: none; }

/* Pointillés entre les étapes : ils se tracent quand l'étape apparaît */
.anim .step.reveal::after { transform: scaleX(0); transform-origin: left; transition: transform .9s .35s var(--ease-out); }
.anim .step.reveal.visible::after { transform: scaleX(1); }

/* En-tête : ombre légère et barre de lecture jaune */
.site-header { transition: border-color .2s, box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(29, 34, 40, .06); }
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* Survols */
.btn { transition: transform .2s var(--ease-out), background-color .2s, border-color .2s, box-shadow .25s; }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(36, 69, 122, .22); }
.btn-accent:hover { box-shadow: 0 8px 20px rgba(245, 197, 24, .3); }
.btn:active { transform: translateY(0) scale(.98); }
.card { transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
.card:hover { border-color: #c5d0e0; }
.card-icon { transition: background-color .25s, color .25s, transform .3s var(--ease-out); }
.card:hover .card-icon { background: var(--primary); color: #fff; transform: translateY(-2px) rotate(-4deg); }
.pain, .usecase, .offer, .phase { transition: transform .25s var(--ease-out), box-shadow .25s; }
.pain:hover, .usecase:hover, .phase:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Haut de page : le texte arrive en cascade, le mot surligné se souligne */
.anim .hero-copy > * { animation: rise .8s var(--ease-out) both; }
.anim .hero-copy > :nth-child(1) { animation-delay: .05s; }
.anim .hero-copy > :nth-child(2) { animation-delay: .15s; }
.anim .hero-copy > :nth-child(3) { animation-delay: .3s; }
.anim .hero-copy > :nth-child(4) { animation-delay: .42s; }
.anim .hero-copy > :nth-child(5) { animation-delay: .54s; }
.anim .hl::after { transform: scaleX(0); transform-origin: left; animation: draw .7s .8s var(--ease-out) forwards; }

/* Site TPE : la carte « Cette semaine » glisse, se remplit ligne à ligne, puis flotte doucement */
@keyframes card-in { from { opacity: 0; transform: translateX(40px) rotate(0deg); } to { opacity: 1; transform: rotate(-1.5deg); } }
@keyframes float { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-6px); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(16px) scale(.92) rotate(1.5deg); } to { opacity: 1; transform: rotate(1.5deg); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(245, 197, 24, 0); } }
.anim .mock-card { animation: card-in .9s .3s var(--ease-out) both, float 7s 1.6s ease-in-out infinite; }
.anim .mock-list li { animation: rise .5s var(--ease-out) both; }
.anim .mock-list li:nth-child(1) { animation-delay: 1s; }
.anim .mock-list li:nth-child(2) { animation-delay: 1.15s; }
.anim .mock-list li:nth-child(3) { animation-delay: 1.3s; }
.anim .mock-list li:nth-child(4) { animation-delay: 1.45s; }
.anim .mock-list .dot.ok { animation: pop .4s var(--ease-out) both; }
.anim .mock-list li:nth-child(1) .dot { animation-delay: 1.2s; }
.anim .mock-list li:nth-child(2) .dot { animation-delay: 1.35s; }
.anim .mock-list li:nth-child(3) .dot { animation-delay: 1.5s; }
.anim .mock-list .dot.wait { animation: ring 1.8s 1.8s ease-out infinite; }
.anim .mock-bubble { animation: bubble-in .6s 1.8s var(--ease-out) both; }
.anim .mock-bubble .reply { animation: rise .5s 2.5s var(--ease-out) both; }

/* Site Entreprises : le schéma se construit, puis l'information circule des systèmes vers les résultats */
@keyframes chip-pulse {
  0%, 30%, 100% { border-color: var(--on-dark-line); background-color: rgba(255, 255, 255, .06); }
  8%, 16% { border-color: rgba(245, 197, 24, .9); background-color: rgba(245, 197, 24, .12); }
}
@keyframes chip-pulse-out {
  0%, 30%, 100% { border-color: rgba(245, 197, 24, .5); background-color: rgba(255, 255, 255, .06); }
  8%, 16% { border-color: var(--accent); background-color: rgba(245, 197, 24, .18); }
}
@keyframes core-glow {
  0%, 35%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
  12%, 20% { box-shadow: 0 0 0 6px rgba(245, 197, 24, .14); }
}
@keyframes core-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.anim .flow .chip, .anim .flow-label { animation: rise .5s var(--ease-out) both; }
.anim .flow-col:first-child > :nth-child(1) { animation-delay: .5s; }
.anim .flow-col:first-child > :nth-child(2) { animation-delay: .58s, 2.2s; }
.anim .flow-col:first-child > :nth-child(3) { animation-delay: .66s, 2.45s; }
.anim .flow-col:first-child > :nth-child(4) { animation-delay: .74s, 2.7s; }
.anim .flow-col:first-child > :nth-child(5) { animation-delay: .82s, 2.95s; }
.anim .flow-col:first-child .chip { animation-name: rise, chip-pulse; animation-duration: .5s, 6s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease-out), ease-in-out; }
.anim .flow-core { animation: core-in .6s 1s var(--ease-out) both, core-glow 6s 3.2s ease-in-out infinite; }
.anim .flow-col:last-child > :nth-child(1) { animation-delay: 1.3s; }
.anim .flow-col:last-child > :nth-child(2) { animation-delay: 1.38s, 3.8s; }
.anim .flow-col:last-child > :nth-child(3) { animation-delay: 1.46s, 4.05s; }
.anim .flow-col:last-child > :nth-child(4) { animation-delay: 1.54s, 4.3s; }
.anim .flow-col:last-child > :nth-child(5) { animation-delay: 1.62s, 4.55s; }
.anim .flow-col:last-child .chip { animation-name: rise, chip-pulse-out; animation-duration: .5s, 6s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease-out), ease-in-out; }
.anim .proof li { animation: rise .6s var(--ease-out) both; }
.anim .proof li:nth-child(1) { animation-delay: 1.5s; }
.anim .proof li:nth-child(2) { animation-delay: 1.6s; }
.anim .proof li:nth-child(3) { animation-delay: 1.7s; }
.anim .proof li:nth-child(4) { animation-delay: 1.8s; }

/* FAQ : ouverture en douceur dans les navigateurs qui savent animer une hauteur automatique */
@supports (interpolate-size: allow-keywords) {
  .anim { interpolate-size: allow-keywords; }
  .anim .faq details::details-content {
    height: 0; overflow: clip;
    transition: height .35s var(--ease-out), content-visibility .35s allow-discrete;
  }
  .anim .faq details[open]::details-content { height: auto; }
}