/* Le tracé : SVG en largeur 90%, collé à droite */
    .ax-fil {
      display: block;
      width: 90%;
      height: auto;
      margin-left: auto;   /* pousse le SVG contre le bord droit */
      background: #030819;  /* même fond que la section 1 pour la continuité */
    }


    /* Le "rail" = la ligne visible AVANT l'animation, en opacité 20% */
    .ax-fil .rail {
      stroke-opacity: 0.2;
    }

    /* Un point "allumé" devient jaune plein (fond + contour) */
    .ax-fil circle {
      transition: fill .2s ease, stroke .2s ease;
    }
    .ax-fil circle.is-on {
      fill: #FFE100;
      stroke: #FFE100;
    }

    /* Conteneur : le tracé + les cartes se superposent dedans */
    .ax-timeline {
      position: relative;
      width: 100%;
      background: #030819;
      color: #fff;
    }

    /* ---- Les 5 cartes (même style que dans index.html / styles.css) ---- */
    .ax-processus-child {
      position: absolute;            /* placées sur leur point par le JS */
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 300px;
      opacity: 0;                    /* cachées au départ */
      transition: opacity .3s ease, transform .3s ease;
    }
    .ax-processus-child.is-visible { opacity: 1; }  /* apparition (fondu) */

    /* Alignement du texte selon le côté */
    .ax-processus-child.right { align-items: end; }
    .ax-processus-child.left  { align-items: start; }
    .ax-processus-child.right p { text-align: end; }
    .ax-processus-child.left  p { text-align: start; }
    .ax-processus-child img { height: 48px; width: auto; }
    /* h3 repris de styles.css (style global du projet) */
    .ax-processus-child h3 {
      font-family: 'K2D', sans-serif;
      font-style: normal;
      font-weight: 700;
      font-size: 40px;
      line-height: 110%;
      text-align: left;
      color: #FFFFFF;
      padding: 0;
      margin: 0;
    }
    .ax-processus-child p  { font-family: Arial, sans-serif; margin: 0; }

    /* --- Position de la carte PAR RAPPORT à son point (+ petit glissement à l'apparition) --- */
    /* À GAUCHE du point (bord droit de la carte collé au point) + décalée de 24px vers la gauche */
    .ax-processus-child.pos-left  { transform: translate(calc(-100% - 24px), 16px); }
    .ax-processus-child.pos-left.is-visible  { transform: translate(calc(-100% - 24px), 0); }
    /* À DROITE du point (bord gauche de la carte collé au point) + décalée de 24px vers la droite */
    .ax-processus-child.pos-right { transform: translate(24px, 16px); }
    .ax-processus-child.pos-right.is-visible { transform: translate(24px, 0); }
    /* EN DESSOUS du point, ALIGNÉE sur le point (bord gauche = point, pas centrée) */
    .ax-processus-child.pos-below { transform: translate(0, 36px); }
    .ax-processus-child.pos-below.is-visible { transform: translate(0, 20px); }

    /* =====================================================================
       RESPONSIVE petit PC (<= 1280px) — placé EN FIN de CSS pour primer sur
       les règles de base (à spécificité égale, la dernière l'emporte).
       - SVG plus HAUT (preserveAspectRatio="none" => étirement vertical) pour
         réécarter les points et éviter que les cartes se chevauchent ;
       - polices réduites POUR CE MODULE uniquement (les cartes).
       ===================================================================== */
    @media (max-width: 1280px) {
      .ax-fil { height: 1100px; }            /* test : encore moins haut */
      .ax-processus-child { width: 200px; }  /* cartes plus étroites => la carte 5 ne sort plus à droite */
      .ax-processus-child h3 { font-size: 24px; }
      .ax-processus-child p  { font-size: 16px; }
    }