/* =========================================================
   AM MOTORS — SIMULATEUR REPROGRAMMATION
   Complément de am-refonte.css + pages-refonte.css
   ========================================================= */


.simulator-page .page-hero {
    min-height: 560px;
}


.simulator-section {
    position: relative;
    padding: 90px 0 120px;
    background:
        radial-gradient(circle at 85% 10%, rgba(198,0,0,.08), transparent 25%),
        #050505;
}


.simulator-intro {
    display: grid;
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    gap: clamp(35px, 7vw, 100px);
    margin-bottom: 46px;
}


.simulator-intro h2 {
    margin: 0;
    color: white;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 300;
    line-height: 1.02;
}


.simulator-intro p {
    max-width: 700px;
    margin: 0;
    color: #929292;
    font-size: 16px;
    line-height: 1.75;
}


.simulator-workspace {
    position: relative;
    display: grid;
    grid-template-columns: 290px minmax(0,1fr);
    min-height: 560px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #0d0d0d 0%, #080808 100%);
    box-shadow: 0 36px 100px rgba(0,0,0,.38);
}


.simulator-workspace .selection {
    width: auto;
    min-height: 100%;
    padding: 30px 26px;
    border-right: 1px solid rgba(255,255,255,.09);
    border-bottom: 0;
    background: #090909;
    color: white;
}


.simulator-workspace .selection:empty::before {
    content: "Sélection";
    color: #6f6f6f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}


.simulator-workspace .selection .titlebold {
    position: relative;
    margin: 0;
    padding: 16px 34px 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #e8e8e8;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
}


.simulator-workspace .selection .titlebold:first-child {
    border-top: 1px solid rgba(255,255,255,.08);
}


.simulator-workspace .back-btn {
    position: absolute;
    top: 50%;
    right: 0;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: transparent;
    color: #777;
    font-size: 12px;
}


.simulator-workspace .back-btn:hover {
    border-color: rgba(198,0,0,.7);
    background: rgba(198,0,0,.10);
    color: white;
}


.simulator-workspace .marque {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 32px;
    align-content: flex-start;
    justify-content: flex-start;
    background: transparent;
}


/* La liste des marques occupe toute la largeur du simulateur. */
.simulator-workspace.is-brand-grid {
    grid-template-columns: minmax(0, 1fr);
}


.simulator-workspace.is-brand-grid .marque {
    grid-column: 1 / -1;
}


/* Une seule grille pour toutes les marques.
   Le navigateur gère automatiquement les retours à la ligne. */
.simulator-workspace .marque-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}


.simulator-workspace .marque-row button {
    width: 100%;
    min-width: 0;
    height: 120px;
    min-height: 120px;
    margin: 0;
    padding: 18px 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: #0d0d0d;
    box-shadow: none;
    color: white;
    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.simulator-workspace .marque-row button:hover {
    transform: translateY(-2px);
    border-color: rgba(198,0,0,.70);
    background: #121212;
    box-shadow: 0 12px 30px rgba(0,0,0,.24);
}


.simulator-workspace .marque-row button:focus-visible {
    outline: none;
    border-color: #c60000;
    box-shadow: 0 0 0 4px rgba(198,0,0,.12);
}


.simulator-workspace .marque-row button img {
    width: 64px;
    height: 42px;
    margin: 0;
    object-fit: contain;
    filter: grayscale(.05);
}


.simulator-workspace .marque-row button span {
    display: block;
    width: 100%;
    margin: 0;
    color: #f0f0f0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}



.simulator-workspace .marque > button {
    width: auto;
    min-width: 170px;
    min-height: 76px;
    margin: 0 12px 12px 0;
    padding: 16px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: #0d0d0d;
    box-shadow: none;

    color: #eaeaea;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.simulator-workspace .marque > button:hover {
    transform: translateY(-2px);
    border-color: rgba(198,0,0,.62);
    background: #121212;
}


.simulator-workspace .marque > button:focus-visible {
    outline: none;
    border-color: #c60000;
    box-shadow: 0 0 0 4px rgba(198,0,0,.10);
}


.simulator-workspace .marque > button span {
    margin: 0 !important;
    color: inherit;
}


.simulator-workspace .marque > div:not(.search-container):not(.marque-row):not(.stage-tabs):not(.am-table-container):not(.stage-price) {
    width: 100%;
    padding: 18px;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.015);
}


.simulator-workspace .marque > div:not(.search-container):not(.marque-row):not(.stage-tabs):not(.am-table-container):not(.stage-price) .titlebold {
    width: 100%;
    margin: 0 0 6px;
    text-align: left !important;
}


/* Boutons moteur */
.simulator-workspace .marque > div:not(.search-container):not(.marque-row):not(.stage-tabs):not(.am-table-container):not(.stage-price) button {
    flex: 1 1 180px;
    min-width: 180px;
    min-height: 82px;
    margin: 0;
    padding: 16px 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: #0d0d0d;
    box-shadow: none;

    color: #eaeaea;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.simulator-workspace .marque > div:not(.search-container):not(.marque-row):not(.stage-tabs):not(.am-table-container):not(.stage-price) button:hover {
    transform: translateY(-2px);
    border-color: rgba(198,0,0,.62);
    background: #121212;
}


.simulator-workspace .marque > div:not(.search-container):not(.marque-row):not(.stage-tabs):not(.am-table-container):not(.stage-price) button:focus-visible {
    outline: none;
    border-color: #c60000;
    box-shadow: 0 0 0 4px rgba(198,0,0,.10);
}


.simulator-workspace .marque > div:not(.search-container):not(.marque-row):not(.stage-tabs):not(.am-table-container):not(.stage-price) button span {
    margin: 0 !important;
    color: inherit;
}


.simulator-workspace .marque > div:not(.search-container):not(.marque-row):not(.stage-tabs):not(.am-table-container):not(.stage-price) button small {
    display: block;
    margin-top: 6px;
    color: #8f8f8f !important;
    font-size: 12px !important;
    font-weight: 400;
}


.simulator-workspace .titlebold {
    color: white;
    font-weight: 500;
}


.simulator-workspace .search-container {
    position: relative;
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
    margin: 0 0 24px;
}


.simulator-workspace .search-input {
    width: 100%;
    min-height: 58px;
    padding: 0 20px 0 50px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    outline: none;
    background: #0b0b0b;
    color: white;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}


.simulator-workspace .search-input:focus {
    border-color: #c60000;
    box-shadow: 0 0 0 4px rgba(198,0,0,.10);
}


.simulator-workspace .search-container::before {
    content: "";
    position: absolute;
    z-index: 20;
    left: 20px;
    top: 22px;
    width: 13px;
    height: 13px;
    border: 1.5px solid #8a8a8a;
    border-radius: 50%;
}


.simulator-workspace .search-container::after {
    content: "";
    position: absolute;
    z-index: 20;
    left: 32px;
    top: 35px;
    width: 7px;
    height: 1.5px;
    transform: rotate(45deg);
    border-radius: 2px;
    background: #8a8a8a;
}


.simulator-workspace .results-box {
    position: absolute;
    z-index: 100;
    top: 66px;
    left: 0;
    right: 0;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background: #101010;
    box-shadow: 0 25px 70px rgba(0,0,0,.55);
}


.simulator-workspace .results-box:empty {
    display: none;
}


.simulator-workspace .search-result-item {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    cursor: pointer;
}


.simulator-workspace .search-result-item:hover {
    background: #171717;
}


.simulator-workspace .search-marque {
    margin-bottom: 3px;
    color: #767676;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.simulator-workspace .search-modele {
    color: white;
    font-size: 14px;
    font-weight: 500;
}


.simulator-workspace .stage-tabs {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 18px;
}


.simulator-workspace .stage-tab {
    min-width: auto;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: #0f0f0f;
    color: #d7d7d7;
    font-size: 12px;
    font-weight: 600;
}


.simulator-workspace .stage-tab:hover {
    transform: none;
    border-color: #c60000;
}


.simulator-workspace .stage-tab.active {
    border-color: #c60000;
    background: #c60000;
    color: white;
}


.simulator-workspace .am-table-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: #090909;
    box-shadow: none;
    opacity: 1;
    transition: opacity .25s ease;
}


.simulator-workspace .am-table-container.fade-out {
    opacity: 0;
}


.simulator-workspace .am-table-container.fade-in {
    opacity: 1;
}


.simulator-workspace .am-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}


.simulator-workspace .header-cell,
.simulator-workspace .operation-cell,
.simulator-workspace .price-cell {
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
}


.simulator-workspace .header-cell {
    min-width: 190px;
    background: #111;
}


.simulator-workspace .operation-cell {
    min-width: 160px;
    background: #0d0d0d;
    color: white;
    font-weight: 500;
}


.simulator-workspace .price-cell {
    color: #cfcfcf;
}


.simulator-workspace .vehicule-marque {
    margin-bottom: 6px;
    color: #777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.simulator-workspace .vehicule-modele {
    color: white;
    font-size: 16px;
    font-weight: 600;
}


.simulator-workspace .stat-value {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
}


.simulator-workspace .stat-bar {
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #242424;
}


.simulator-workspace .stat-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8f0000, #e11717);
    transition: width .6s ease;
}


.simulator-workspace .stage-price {
    width: 100%;
    margin: 22px 0 0;
    color: white;
    font-size: 24px;
    font-weight: 500;
    text-align: right;
}


.simulator-note {
    margin: 22px 0 0;
    color: #6d6d6d;
    font-size: 12px;
    line-height: 1.65;
}


#loading {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(4px);
}


#loading .loading-card {
    padding: 22px 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: #0d0d0d;
    color: white;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
}


@media (max-width: 1300px) {
    .simulator-workspace .marque-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}


@media (max-width: 1100px) {
    .simulator-workspace {
        grid-template-columns: 1fr;
    }


    .simulator-workspace .selection {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.09);
    }


    .simulator-workspace .marque-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {
    .simulator-workspace .marque-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {
    .simulator-section {
        padding: 65px 0 85px;
    }


    .simulator-intro {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    .simulator-workspace {
        border-radius: 18px;
    }


    .simulator-workspace .selection {
        padding: 20px;
    }


    .simulator-workspace .marque {
        padding: 18px;
    }


    .simulator-workspace .search-container {
        margin-bottom: 20px;
    }


    .simulator-workspace .search-input {
        min-height: 54px;
        padding-left: 50px;
        border-radius: 16px;
        font-size: 16px;
    }


    .simulator-workspace .marque-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }


    .simulator-workspace .marque-row button {
        height: 110px;
        min-height: 110px;
        padding: 14px 10px;
        gap: 12px;
        border-radius: 16px;
    }


    .simulator-workspace .marque-row button img {
        width: 58px;
        height: 38px;
    }


    .simulator-workspace .marque-row button span {
        font-size: 15px;
        line-height: 1.2;
    }


    .simulator-workspace .stage-price {
        font-size: 20px;
        text-align: left;
    }
}


@media (max-width: 380px) {
    .simulator-workspace .marque {
        padding: 14px;
    }


    .simulator-workspace .marque-row {
        gap: 10px;
    }


    .simulator-workspace .marque-row button {
        height: 106px;
        min-height: 106px;
        padding: 12px 8px;
    }


    .simulator-workspace .marque-row button img {
        width: 54px;
        height: 36px;
    }


    .simulator-workspace .marque-row button span {
        font-size: 14px;
    }
}