/* ==========================================================================
   MOUVEMENT

   Une règle : le mouvement révèle du contenu, il ne décore pas. Un statut qui
   apparaît raconte une séance manquée ; un chiffre qui s'incrémente ne raconte
   rien.

   Tout ce qui suit part du principe que la page est lisible SANS mouvement :
   les états d'arrivée sont les états par défaut, et c'est le module
   `js/motion.js` qui pose `.motion` sur la racine pour armer les départs. Sans
   JavaScript, sans prise en charge, ou sous `prefers-reduced-motion`, la page
   s'affiche entière et immobile.
   ========================================================================== */

/* --- Arrivée au défilement ----------------------------------------------- */

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-out),
              transform 480ms var(--ease-entrance);
}

/* Les enfants d'un même bloc arrivent en cascade courte : assez pour qu'on
   sente une direction, trop peu pour qu'on attende. */
.motion [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
}
.motion [data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-out),
              transform 480ms var(--ease-entrance);
}
.motion [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 70ms; }
.motion [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 140ms; }
.motion [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 210ms; }

/* --- La série de statuts, jouée ------------------------------------------ */

/* Six séances d'un joueur qui arrivent l'une après l'autre : deux présences,
   un retard, puis trois absences. Le silence se voit parce qu'il se construit
   sous les yeux. */
.motion .status-run .status-chip {
  opacity: 0;
  transform: translateY(6px) scale(0.94);
}
.motion .status-run.is-in .status-chip {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-2) var(--ease-out),
              transform var(--duration-3) var(--ease-entrance);
}
.motion .status-run.is-in .status-chip:nth-of-type(1) { transition-delay: 120ms; }
.motion .status-run.is-in .status-chip:nth-of-type(2) { transition-delay: 340ms; }
.motion .status-run.is-in .status-chip:nth-of-type(3) { transition-delay: 560ms; }
/* Les trois absences arrivent plus serrées : c'est la chute. */
.motion .status-run.is-in .status-chip:nth-of-type(4) { transition-delay: 820ms; }
.motion .status-run.is-in .status-chip:nth-of-type(5) { transition-delay: 960ms; }
.motion .status-run.is-in .status-chip:nth-of-type(6) { transition-delay: 1100ms; }

/* --- Le filet de sécurité ------------------------------------------------ */

/* `prefers-reduced-motion` est déjà neutralisé globalement dans tokens.css, qui
   ramène toutes les durées à 0,01 ms. On coupe ici en plus les départs, pour
   qu'aucun élément ne reste invisible si une transition n'aboutit pas. */
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal],
  .motion [data-reveal-stagger] > *,
  .motion .status-run .status-chip {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   VIVANT — ce qui bouge en dehors du défilement
   ========================================================================== */

/* --- 1. Le fil de lecture ------------------------------------------------ */

/* Une page de 10 000 pixels ne dit pas où l'on en est. Deux pixels d'encre le
   disent, et ils bougent en continu — c'est le seul mouvement permanent de la
   page. */
.readbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--z-sticky) + 1);
  background: transparent;
  pointer-events: none;
}
.readbar span {
  display: block;
  height: 100%;
  background: var(--readbar);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- 2. La barre qui se resserre ----------------------------------------- */

.nav {
  transition: height var(--duration-3) var(--ease-out),
              box-shadow var(--duration-3) var(--ease-out);
}
.nav.is-compact {
  height: 58px;
  box-shadow: var(--shadow-2);
}
.brand-mark, .brand-name {
  transition: height var(--duration-3) var(--ease-out),
              font-size var(--duration-3) var(--ease-out);
}
.nav.is-compact .brand-mark { height: 28px; }
.nav.is-compact .brand-name { font-size: 24px; }

/* --- 3. Le titre qui s'installe mot à mot -------------------------------- */

.motion .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
}
.motion .hero-title.is-in .word {
  opacity: 1;
  transform: none;
  transition: opacity 380ms var(--ease-out),
              transform 520ms var(--ease-entrance);
}

/* --- 4. Micro-réactions -------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .btn { transition: background-color var(--duration-2) var(--ease-out),
                     border-color var(--duration-2) var(--ease-out),
                     transform var(--duration-2) var(--ease-out),
                     box-shadow var(--duration-2) var(--ease-out); }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
  .btn:active { transform: translateY(0); box-shadow: none; }

  .plan { transition: transform var(--duration-3) var(--ease-out),
                      border-color var(--duration-2) var(--ease-out),
                      box-shadow var(--duration-3) var(--ease-out); }
  .plan:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-2);
  }

  /* Les trois appareils de « Chacun son écran » s'animent au survol : un objet
     qu'on regarde de près n'est jamais parfaitement de face. */
  .view .phone, .view .tablet, .view .laptop {
    transition: transform var(--duration-3) var(--ease-out);
  }
  .view:hover .phone  { transform: rotate(-3deg); }
  .view:hover .tablet { transform: rotate(3deg); }
  .view:hover .laptop { transform: translateY(-6px); }

  .faq-question { transition: padding-left var(--duration-2) var(--ease-out); }
  .faq-question:hover { padding-left: var(--space-3); }

  /* Le trait sous un lien du pied de page se déroule depuis la gauche au lieu
     de surgir. Le repos reste lisible sans lui : rien n'en dépend. */
  .footer-links a {
    position: relative;
    text-decoration: none;
  }
  .footer-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.15em;
    height: 1px;
    background: var(--link-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-2) var(--ease-out);
  }
  .footer-links a:hover::after { transform: scaleX(1); }
  .footer-links a:hover { text-decoration: none; }

  /* Le menu, lui, n'a plus de trait du tout : un soulignement sur trois mots
     serrés alourdit une barre qui doit rester légère. Le lien se soulève de
     deux pixels et pose un point d'encre sous lui — assez pour dire « c'est
     cliquable », assez peu pour ne rien encombrer.

     `inline-block` est nécessaire : une transformation ne s'applique pas à un
     élément en ligne non remplacé. */
  .nav-menu a {
    position: relative;
    display: inline-block;
    transition: transform var(--duration-2) var(--ease-out),
                color var(--duration-2) var(--ease-out);
  }
  .nav-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: var(--ink);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity var(--duration-2) var(--ease-out),
                transform var(--duration-3) var(--ease-entrance);
  }
  .nav-menu a:hover {
    transform: translateY(-2px);
    color: var(--ink-hover);
  }
  .nav-menu a:hover::after { opacity: 1; transform: scaleX(1); }
}

/* Glissements utilisés par le décor de la section import. */
@keyframes derive {
  from { transform: translateY(26px); }
  to { transform: translateY(-26px); }
}
@keyframes derive-inverse {
  from { transform: translateY(-18px); }
  to { transform: translateY(18px); }
}

/* Le téléphone de l'import se redresse en montant, et son décor dérive à
   contre-sens : trois plans, trois vitesses — la profondeur vient de là. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .import-visual .laptop,
    .motion .import-dots,
    .motion .import-ring {
      animation: linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .motion .import-visual .laptop { animation-name: derive; }

    /* Le téléphone du hero se redresse au défilement, et c'est tout : son
       flottement permanent a été retiré. Rien ne bouge sur cette page tant
       que la personne ne fait rien. */
    .motion .hero-visual .phone {
      animation: redresser-inverse linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    /* La photo du hero zoome de 4 % pendant que la section sort de l'écran. */
    .motion .hero--photo::before {
      animation: respirer linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes redresser {
  from { transform: rotate(-9deg) translateY(36px); }
  to { transform: rotate(-3deg) translateY(-36px); }
}
@keyframes respirer {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

@keyframes redresser-inverse {
  from { transform: rotate(9deg); }
  to { transform: rotate(3deg); }
}

/* ==========================================================================
   AMBIANCE DE FOND
   ========================================================================== */

/* ==========================================================================
   ANNOTATIONS

   Un surligneur qui ne surligne rien n'est pas une texture, c'est un gribouillage.
   Ce qui rend la trace crédible, c'est qu'elle marque quelque chose : la phrase
   qu'un dirigeant aurait soulignée lui-même en lisant la page.

   Surlignages et tour de feutre ont été essayés puis écartés par le client :
   il ne reste de cette section que les teintes propres à la vitrine.
   ========================================================================== */

/* ==========================================================================
   AUTRES MARQUES — même main, autres gestes
   ========================================================================== */

/* --- Le filet entre les sections : retiré --------------------------------
   L'alternance des fonds de la maquette du 03/10 marque le passage d'une
   section à la suivante. Le filet tracé au défilement n'avait plus rien à
   séparer. */
  to { clip-path: inset(0 0 0 0); }
}