/* ===========================
   Animations on scroll / load
   =========================== */
:root {
  --anim_duration: 0.6s;
  --anim_easing: ease-out;

  /* Distance par défaut */
  --anim_distance_value: 20;
  --anim_distance_unit: 1px;

  /* Translation */
  --anim_translate_x: 0;
  --anim_translate_y: 0;

  /* Scale initial */
  --anim_scale_start: 1;
}

/* Base apparitions */
.appear {
  opacity: 0;
  transition: all var(--anim_duration) var(--anim_easing);
  transform: translate(
      calc(var(--anim_translate_x) * var(--anim_distance_value) * var(--anim_distance_unit)),
      calc(var(--anim_translate_y) * var(--anim_distance_value) * var(--anim_distance_unit))
    )
    scale(var(--anim_scale_start));
}

.appear.active {
  opacity: 1;
  transform: translate(0,0) scale(1); /* scale finale = 1 */
}

/* ===========================
   Directions
   =========================== */
.fade_in       { --anim_translate_x: 0;  --anim_translate_y: 0.5; }
.slide_in_left { --anim_translate_x: -1; --anim_translate_y: 0; }
.slide_in_right{ --anim_translate_x: 1;  --anim_translate_y: 0; }
.slide_in_up   { --anim_translate_x: 0;  --anim_translate_y: 1; }
.slide_in_down { --anim_translate_x: 0;  --anim_translate_y: -1; }

/* ===========================
   Durées
   =========================== */
.anim_fast   { --anim_duration: 0.3s; }
.anim_normal { --anim_duration: 0.6s; }
.anim_slow   { --anim_duration: 1.2s; }

/* ===========================
   Distances modulables
   =========================== */
/* px */
.dist_small_px  { --anim_distance_value: 10; --anim_distance_unit: 1px; }
.dist_medium_px { --anim_distance_value: 40; --anim_distance_unit: 1px; }
.dist_large_px  { --anim_distance_value: 80; --anim_distance_unit: 1px; }

/* vh */
.dist_small_vh  { --anim_distance_value: 10; --anim_distance_unit: 1vh; }
.dist_medium_vh { --anim_distance_value: 20; --anim_distance_unit: 1vh; }
.dist_large_vh  { --anim_distance_value: 40; --anim_distance_unit: 1vh; }

/* vw */
.dist_small_vw  { --anim_distance_value: 10; --anim_distance_unit: 1vw; }
.dist_medium_vw { --anim_distance_value: 20; --anim_distance_unit: 1vw; }
.dist_large_vw  { --anim_distance_value: 40; --anim_distance_unit: 1vw; }

/* pourcentages */
.dist_percent_10 { --anim_distance_value: 10; --anim_distance_unit: 1%; }
.dist_percent_20 { --anim_distance_value: 20; --anim_distance_unit: 1%; }
.dist_percent_50 { --anim_distance_value: 50; --anim_distance_unit: 1%; }

/* ===========================
   Scale / agrandissement ou rétrécissement
   =========================== */

/* Scale up : démarre petit → finit normal */
.scale_up_small   { --anim_scale_start: 0.95; }
.scale_up_medium  { --anim_scale_start: 0.9; }
.scale_up_large   { --anim_scale_start: 0.85; }

/* Scale down : démarre gros → finit normal */
.scale_down_small  { --anim_scale_start: 1.05; }
.scale_down_medium { --anim_scale_start: 1.1; }
.scale_down_large  { --anim_scale_start: 1.2; }

/* ===========================
   Carousel simple
   =========================== */
.carousel { display: flex; overflow: hidden; position: relative; }
.carousel_inner { display: flex; width: 100%; transition: transform 0.6s ease; }
.carousel_item { flex: 0 0 100%; }