/* --- Header Container Layout --- */
    .header-container.progress-header {
        position: relative; /* Critical for absolute positioning of the line */
        display: flex;
        justify-content: space-between;
        margin: 0px auto 40px;
        /* Increased padding to give space for the text above the line */
        padding-top: 16px;
        padding-bottom: 0px; 
        border-bottom: none; /* Removed the old border */
        max-width: 1120px;
        max-height: 58px;
        font-family: 'Open Sans', sans-serif;
    }

    @media (max-width: 1025px) {
        .header-container.progress-header {
            padding-inline: 20px;
        }
    }


    /* --- The New Full Width Line --- */
    .header-separator {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px; /* Thickness of the line */
        background-color: #C5CAD2;
        /* 
           Calculation: The dots are 16px high. 
           To go through the center, we position the line at 8px from the bottom.
           (plus a tiny adjustment if needed for border thickness)
        */
        bottom: 6px; 
        z-index: 0; /* Behind the text and dots */
    }

    /* --- Left Side Text --- */
    .header-info-section {
        display: flex;
        flex-direction: column;
        gap: 5px;
        /* Push the text up so it sits ABOVE the line */
        margin-bottom: 20px; 
        position: relative;
        z-index: 1; 
    }

    .step-text-container {
        color: #223654;
        font-family: "Open Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height:20px;
    }

   .header-step-text strong {
        font-weight: 600;
    }
    
    .header-step-text, .header-case-number {
        font-size: 14px;
        color: #223654;
    }

    /* --- Right Side Progress Bar --- */
    .progress-track-container {
        width: auto;
        position: relative;
        z-index: 1; /* Above the line */
        /* No margin-bottom, so the dots sit exactly at bottom: 0 */
    }

    .progressbar {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
    }

    .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        text-align: center;
    }

    /* Text & Arrow Area */
    .step-text-container {
        margin-bottom: 8px; /* Space between text and dot */
        font-size: 14px;
        color: #223654;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .step-arrow {
        width: 8px;
        align-self: stretch;
        stroke-width: 1px;
        stroke: var(--Niveaux-de-gris-Gris, #8893A2);
    }
    
    .step-item:last-child .step-arrow {
        display: none;
    }

    /* Dot Area */
    .step-dot-container {
        display: flex;
        justify-content: center;
        align-items: center;
        /* Important: White background prevents line from showing through the dot box */
        /* But we need the line to stop at the dot edge. */
        /* Actually, simply giving the .radio-dot a white background is enough */
        padding: 0 5px; 
    }

    .radio-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid #C5CAD2;
        background-color: #fff; /* CRITICAL: Hides the line running behind it */
        position: relative;
        box-sizing: border-box;
        z-index: 2; /* Sits on top of the separator line */
    }

    /* --- Active/Completed States (Same as before) --- */
    .step-item.completed .step-label,
    .step-item.active .step-label {
        font-weight: 600;
        color: #223654;
    }

    .step-item.completed .radio-dot,
    .step-item.active .radio-dot {
        border-color: #223654;
    }

    .step-item.completed .radio-dot::after,
    .step-item.active .radio-dot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        background-color: #223654;
        border-radius: 50%;
        border: 1px solid #C5CAD2;
    }

    .step-item .step-label {
        display: flex;
        align-items: center;
    }

    .step-item:not(:last-child) .step-label::after {
        content: '';
        display: inline-block;
        width: 9px;
        height: 8px;
        margin: 0 8px;
        vertical-align: middle;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8" fill="none"><path d="M8.35355 4.03553C8.54882 3.84027 8.54882 3.52369 8.35355 3.32842L5.17157 0.146442C4.97631 -0.0488198 4.65973 -0.0488198 4.46447 0.146442C4.2692 0.341705 4.2692 0.658287 4.46447 0.853549L7.29289 3.68198L4.46447 6.5104C4.2692 6.70567 4.2692 7.02225 4.46447 7.21751C4.65973 7.41277 4.97631 7.41277 5.17157 7.21751L8.35355 4.03553ZM0 3.68198V4.18198H8V3.68198V3.18198H0V3.68198Z" fill="%238893A2"/></svg>');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .step-item:not(:last-child) .step-dot-container {
        position: relative;
        left: -10px;
    }

    .header-pageNumber {
      display: flex;
    }
    .header-pageNumber p
    {
      color: #223654;
      text-align: center;
      font-feature-settings: 'liga' off, 'clig' off;

      /* Paragraphes (Open Sans)/Small (14px)/Regular */
      font-family:'Open Sans', 'Helvetica Neue', Inter, sans-serif;
      font-size: var(--font-size-sm, 14px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-90, 20px); /* 142.857% */
    }