/* =========================================================================
   Sitero — anim-sections.css
   L'IDENTITÉ EN MOUVEMENT DE CHAQUE SECTION (point 3 de « Modif 3 »)

   Ce fichier accompagne assets/js/anim-sections.js. Il ne réécrit AUCUNE
   règle de style.css : tout ce qui est nouveau est préfixé « an- » ou
   accroché à l'attribut [data-an] que le script pose lui-même. Il n'y a
   donc rien à ajouter à la main dans le HTML.

   ─────────────────────────────────────────────────────────────────────
   LA RÈGLE QUI COMMANDE TOUT LE FICHIER
   Une animation ne doit JAMAIS être la seule chose qui rend un contenu
   visible. On ne trouvera donc ici AUCUNE règle du genre « opacity:0 ».
   L'état de repos, celui que le navigateur applique tout seul, est
   « visible ». C'est le script qui masque, juste le temps d'animer, et
   il a son propre filet de sécurité (voir anim-sections.js).
   Conséquence : si ce fichier CSS se charge et que le JavaScript ne
   s'exécute pas, le site est exactement le site d'aujourd'hui.
   ─────────────────────────────────────────────────────────────────────

   Ce qu'on trouve ici, dans l'ordre :
     1. l'interrupteur d'urgence (html.an-off)
     2. le respect du « mouvement réduit » et de l'impression
     3. les micro-interactions au survol — du CSS pur, donc gratuit

   VOCABULAIRE DES COURBES (le même que le reste du site)
     --e-out : cubic-bezier(.16,1,.3,1) — les arrivées. Ça part vite et
               ça se pose doucement : la sensation de matière.
     Côté script : power3.out pour les arrivées, power2.out pour les
     petits éléments. Une seule famille, jamais de rebond.
   ========================================================================= */


/* =========================================================================
   1. L'INTERRUPTEUR D'URGENCE
   Le script pose l'attribut [data-an] sur chaque élément qu'il pilote.
   Si quoi que ce soit tourne mal, il pose la classe « an-off » sur la
   page et TOUT redevient visible immédiatement, sans exception.
   (Le script sait aussi effacer les styles élément par élément ; cette
   classe est la deuxième corde à l'arc, indépendante de GSAP.)
   ========================================================================= */
html.an-off [data-an]{
  opacity:1 !important;
  transform:none !important;
}


/* =========================================================================
   2. MOUVEMENT RÉDUIT ET IMPRESSION
   Si le visiteur a demandé moins d'animations dans les réglages de son
   ordinateur, le script ne démarre même pas. Ces règles sont la ceinture
   par-dessus les bretelles : tout est visible, rien ne bouge.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  [data-an]{opacity:1 !important;transform:none !important}
  .bc:hover .bc__i,
  .ab-num:hover .ab-num__u,
  .ft__nav a:hover,
  html .pbc.vu:hover{transform:none !important}
}
@media print{
  [data-an]{opacity:1 !important;transform:none !important}
}


/* =========================================================================
   3. LES MICRO-INTERACTIONS
   Elles ne coûtent rien : c'est le navigateur qui les joue, sur sa couche
   de composition, et uniquement pendant que la souris est dessus. Aucune
   ligne de JavaScript n'est concernée.
   Règle suivie partout : on ne touche qu'à « transform » et à la couleur.
   Jamais d'ombre animée, jamais de flou, jamais de will-change.

   ⚠ POURQUOI CE « :not([data-an]) » PARTOUT SUR LES TRANSITIONS
   Le script pose l'attribut « data-an » sur un élément pendant qu'il
   l'anime, et il le retire à la fin. Une transition CSS sur « transform »
   pendant que le script réécrit ce même transform à chaque image, c'est le
   navigateur qui essaie d'interpoler une valeur déjà interpolée : ça
   traîne et ça bave. Les transitions ne s'allument donc qu'une fois
   l'apparition finie. Le survol, lui, n'a pas besoin de la précaution :
   un style écrit par le script l'emporte toujours sur une feuille de style.
   ========================================================================= */

/* --- BÉNÉFICES : l'icône de la carte se soulève -------------------------
   La carte a déjà son changement de fond au survol (style.css). L'icône
   qui monte de 3 px par-dessus, c'est le petit détail qui fait qu'on a
   l'impression de toucher un objet et pas une case de tableau.
   Le script efface son propre style à la fin de l'apparition : cette
   règle reprend donc la main proprement, sans jamais entrer en conflit. */
.bc__i:not([data-an]){transition:transform .45s var(--e-out,cubic-bezier(.16,1,.3,1))}
.bc:hover .bc__i{transform:translateY(-3px)}

/* --- CHIFFRES : l'unité (€, %, h) monte d'un cheveu ---------------------
   Le panneau turquoise éclaircit déjà sa case au survol. On ajoute le
   seul élément coloré de la case : l'unité. Deux pixels suffisent. */
.ab-num__u{transition:transform .4s var(--e-out,cubic-bezier(.16,1,.3,1))}
.ab-num:hover .ab-num__u{transform:translateY(-2px)}

/* --- PIED DE PAGE : le lien avance vers la droite -----------------------
   Le soulignement existe déjà. Le décalage de 3 px lui donne la même
   direction que toutes les flèches du site : on va vers la droite. */
.ft__nav a{transition:transform .35s var(--e-out,cubic-bezier(.16,1,.3,1)),color .25s}
.ft__nav a:hover{transform:translateX(3px)}

/* --- LE PROBLÈME : les trois cartes sombres se soulèvent ----------------
   ⚠ Le « html … .vu » n'est pas une coquetterie. style.css contient la
   règle « html .pbc.vu{transform:none} », plus forte que « .pbc:hover ».
   Sans ce préfixe, le survol ne se verrait tout simplement jamais.
   La transition, elle, est déjà déclarée par style.css sur .pbc. */
html .pbc.vu:hover,
html .pbc.vu:focus-within{transform:translateY(-4px)}

/* --- APERÇU DES FORMULES : le prix accompagne la carte ------------------
   La carte monte déjà de 5 px au survol. Le prix monte de 2 px de plus :
   il se détache très légèrement, comme s'il flottait au-dessus. */
.apc__p:not([data-an]){transition:transform .5s var(--e-out,cubic-bezier(.16,1,.3,1))}
.apc:hover .apc__p{transform:translateY(-2px)}

/* --- OÙ ALLER ENSUITE : le titre suit le filet de couleur ---------------
   La carte a déjà son filet coloré qui se tire en travers et sa flèche
   qui avance. Le titre qui glisse de 2 px complète le geste vers la
   droite, sans rien ajouter de nouveau à l'écran. */
.goc h3{transition:transform .5s var(--e-out,cubic-bezier(.16,1,.3,1))}
.goc:hover h3{transform:translateX(2px)}

/* --- MÉTHODE : la puce de l'étape survolée --------------------------
   ⚠ style.css pose déjà « .st.is-done .st__n{transform:scale(1.06)} ».
   On ne touche donc PAS au transform de la puce : on n'agit que sur la
   couleur de son contour, pour ne rien écraser. */
.st:hover .st__n{border-color:var(--tint,#0092b5)}

/* --- CONTACT : la ligne de coordonnées avance --------------------------- */
.ct__co li:not([data-an]){transition:transform .4s var(--e-out,cubic-bezier(.16,1,.3,1))}
.ct__co li:hover{transform:translateX(3px)}


/* =========================================================================
   4. CE QU'ON NE TROUVERA PAS ICI, ET POURQUOI
   - overflow-x sur <html> : cela casse « position:sticky » sur certains
     navigateurs, et le portrait de la page Contact en dépend.
     body{overflow-x:hidden} de style.css suffit déjà pour les quelques
     pixels de glissement horizontal des apparitions.
   - backdrop-filter, filter:blur(), filter:grayscale, content-visibility :
     tous ont déjà fait ramer ce site. Aucun n'est utilisé ici.
   - will-change : posé nulle part. Les déplacements du script passent par
     translate3d, qui suffit à obtenir une couche graphique dédiée sans
     réserver de la mémoire en permanence.
   ========================================================================= */