#page_content.order_track_page{
    width: 100%;
}




#page_content.order_track_page>.title_container{
    width: 100%;
    margin: auto;
    margin-top: 5vh;
    position: relative;
}



#page_content.order_track_page>.title_container .title{
    font-size: min(3.5em, 8vw);
    font-weight: 200;
    text-align: center;
    text-transform: uppercase;
}












.os-wrap {
    --bg: #fff;
    --text-1: #0f172a;
    --text-2: #64748b;
    --border: #e5e7eb;
    --surface: #ffffff;

    --accent: #19c5b9; /* turquoise principal */
    --accent-weak: #e9fbf9; /* anneau / focus */
    --success: #19c5b9; /* même teinte pour “done” */
    --danger: #ef4444;
    --warning: #f59e0b;

    --radius-md: 16px;
    --radius-lg: 20px;
    --shape: 10px; /* arrondi des “dots” (carré arrondi) */

    --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);

    --sp-2: 10px;
    --sp-3: 14px;
    --sp-4: 18px;
    --sp-5: 24px;

    /* clé d’alignement de la timeline */
    --dot: 24px; /* diamètre du dot (carré) */
    --line: 2px; /* épaisseur de la ligne */
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
    color: var(--text-1);
    width: 100%;
    padding: 2em;
    max-width: 60em;
    margin: 0 auto 10vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

/* ===== Card & champs ===== */
.os-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-1);
}

.os-search {
    margin-bottom: 5vh;
}

.os-label {
    display: block;
    font-size: 14px;
    color: var(--text-2);
    margin-bottom: 8px;
}

.os-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 14px 16px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.os-input:hover {
    border-color: #d1d5db;
}

.os-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-weak);
}

.os-input input {
    width: 100%;
    border: 0;
    outline: 0;
    font-size: 16px;
    background: transparent;
}

.os-input svg {
    width: 18px;
    height: 18px;
    opacity: .7;
}

.os-error {
    color: var(--danger);
    font-size: 13px;
    margin-top: 8px;
}

.os-hint, .os-empty {
    color: var(--text-2);
    font-size: 14px;
    padding: var(--sp-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: #fafafa;
}

/* ===== Timeline horizontale (desktop) ===== */
.os-card .os-steps {
    position: relative;
    display: flex;
    gap: 22px;
    align-items: flex-start;
    isolation: isolate;
}

/* Ligne de fond alignée sur le CENTRE des “dots” */
.os-card .os-steps::before {
    content: "";
    position: absolute;
    left: calc(var(--dot) / 2);
    right: calc(var(--dot) / 2);
    top: calc(var(--dot) / 2);
    height: var(--line);
    background: var(--border);
    z-index: 0;
}

.os-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

/* Segments progress: centre à centre, pile sur l’axe */
.os-step--done + .os-step::before {
    content: "";
    position: absolute;
    top: calc(var(--dot) / 2);
    left: calc(-50% - var(--dot) / 2);
    width: 100%;
    height: var(--line);
    background: var(--success);
    z-index: 1;
}


/* “Dots” -> carrés arrondis */
.os-step__dot {
    width: var(--dot);
    height: var(--dot);
    border-radius: var(--shape);
    border: 2px solid var(--border);
    background: #fff;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    position: relative;
    z-index: 2;
    transition: transform .18s, border-color .2s, background-color .2s, box-shadow .2s;
    box-shadow: 0 0 0 0.5em white;
}

/* done: plein turquoise + check blanc */
.os-step--done .os-step__dot {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    box-shadow: 0 0 0 0.5em white;
}

.os-step--done .os-step__dot svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* current: anneau turquoise + carré intérieur */
.os-step--current .os-step__dot {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px white;
}

.os-step__dot-inner {
    width: 10px;
    height: 10px;
    border-radius: var(--shape);
    background: var(--accent);
}

/* Labels */
.os-step__label {
    font-size: 14px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.os-step--current .os-step__label {
    color: var(--text-1);
    font-weight: 700;
}

.os-step--done .os-step__label {
    color: #0f766e;
}

/* Meta */
.os-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 0;
    font-size: 14px;
    color: var(--text-2);
    margin-bottom: 5em;
}

.os-meta strong {
    color: var(--text-1);
}

/* ===== États terminaux ===== */
.os-terminal {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--border);
    border-left: 6px solid var(--danger);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    background: #fff;
    box-shadow: var(--shadow-1);
}

.os-terminal--warning {
    border-left-color: var(--warning);
}

.os-terminal__icon svg {
    width: 20px;
    height: 20px;
}

.os-terminal__title {
    font-weight: 700;
}

/* ===== Micro-interactions ===== */
@media (hover: hover) {
    .os-step--current .os-step__dot {
        transform: scale(1.03);
    }

    .os-step--done .os-step__dot {
        transform: scale(1.02);
    }
}

/* ===== Mode colonne (mobile) =====
   - Stack des étapes en colonne
   - Layout propre “dot à gauche / label à droite”
   - On masque les segments horizontaux et la ligne de fond
*/
@media (max-width: 640px) {
    .os-card .os-steps {
        display: grid;
        grid-template-columns:1fr;
        row-gap: 18px;
        padding: 0;
        margin: 2em 0;
    }

    .os-card .os-steps::before {
        content: "";
        position: absolute;
        left: calc(var(--dot) / 2);
        right: calc(var(--dot) / 2);
        top: 2em;
        width: var(--line);
        height: calc(100% - 4em);
        background: var(--border);
        z-index: 0;
    }

    /* cache la ligne horizontale */
    .os-step {
        grid-template-columns:var(--dot) 1fr;
        column-gap: 12px;
        text-align: left;
        position: relative;
        height: 4em;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .os-step--done + .os-step::before {
        content: "";
        position: absolute;
        top: initial;
        bottom: 50%;
        left: calc(var(--dot) / 2);
        width: var(--line);
        height: 100%;
        background: var(--success);
        z-index: 1;
    }

    /* cache connecteurs horizontaux */
    .os-step__dot {
        margin: 0;
    }

    /* ancré à gauche */
    .os-step__label {
        margin-top: 2px;
        white-space: normal;
    }

    .os-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 2em;
        margin-bottom: 1em;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}