/* ══════════════════════════════════════
       HORIZONTAL — grand écran (lg+)
    ══════════════════════════════════════ */
    @media (min-width: 992px) {
      .tl-track {
        position: relative;
        display: flex;
        align-items: flex-start;
        min-height: 400px;
      }
      .tl-line-h {
        position: absolute;
        top: 50%;
        left: 0; right: 0;
        height: 2px;
        transform: translateY(-50%);
        z-index: 0;
      }
      .tl-item {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 600px;
      }
      .tl-dot {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 16px; height: 16px;
        border-radius: 50%;
        z-index: 2;
        flex-shrink: 0;
      }
      .tl-connector {
        width: 2px;
        z-index: 1;
        flex-shrink: 0;
      }
      .tl-item.above { justify-content: flex-start; }
      .tl-item.above .tl-card { width: 100%; }
      .tl-item.above .tl-connector { flex: 1; min-height: 20px; }
      .tl-item.below { justify-content: flex-end; }
      .tl-item.below .tl-card { width: 100%; }
      .tl-item.below .tl-connector { flex: 1; min-height: 20px; }
    }

    /* ══════════════════════════════════════
       SURCHARGE — timeline formations (parcours.html)
    ══════════════════════════════════════ */
    #timeline .tl-track { min-height: 500px; }
    #timeline .tl-item  { height: 570px; }

    /* ══════════════════════════════════════
       SURCHARGE — timeline méthodo (index.html)
    ══════════════════════════════════════ */
    #methodo .tl-track { min-height: 560px; }
    #methodo .tl-item  { height: 560px; }

    /* ══════════════════════════════════════
       VERTICAL — petit écran (< lg)
    ══════════════════════════════════════ */
    @media (max-width: 991px) {
      .tl-track { position: relative; padding-left: 40px; }
      .tl-line-h {
        position: absolute;
        top: 0; bottom: 0;
        left: 7px;
        width: 2px;
        z-index: 0;
      }
      .tl-item { height: auto !important; position: relative; display: block !important; }
      .tl-dot {
        position: absolute;
        top: 20px;
        left: -41px;
        width: 16px; height: 16px;
        border-radius: 50%;
        z-index: 2;
      }
      .tl-connector { display: none !important; }
    }