/* Styles chargés uniquement sur tarifs.php */
.tarifs-page {
    color: #09182b;
    background: #cadce9;
}

.tarifs-page .tarifs-container-wide {
    width: min(1380px, calc(100% - 48px));
    max-width: none;
}

.tarifs-page .tarifs-container,
.tarifs-page .tarifs-header .container {
    width: min(1180px, calc(100% - 48px));
    max-width: none;
}

.tarifs-page .tarifs-header {
    position: relative;
    min-height: 330px;
    display: grid;
    align-items: center;
    overflow: hidden;
    padding: 0;
    color: #fff;
    background: linear-gradient(90deg, rgba(2, 8, 18, .98), rgba(2, 8, 18, .72)), url('../hero-reparation.webp') 72% center / cover no-repeat;
    border-bottom: 1px solid #17446d;
}

.tarifs-page .tarifs-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 90px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .28));
}

.tarifs-page .tarifs-header .container {
    position: relative;
    z-index: 1;
    padding-block: 58px;
}

.tarifs-page .tarifs-header h1 {
    max-width: 950px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.35rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.tarifs-page .tarifs-header h1 .tarifs-title-main,
.tarifs-page .tarifs-header h1 .tarifs-title-location {
    display: block;
}

.tarifs-page .tarifs-header h1 .tarifs-title-blue {
    color: #2e8eff;
}

.tarifs-page .tarifs-header h1 .tarifs-title-location {
    color: #fff;
}

.tarifs-page .tarifs-header p:not(.eyebrow) {
    max-width: 650px;
    margin: 20px 0 0;
    color: #d5dfeb;
    font-size: 1.05rem;
}

.tarifs-page .tarifs-primary {
    padding: 32px 0 48px;
    background: #cadce9;
}

.tarifs-page .tarifs-section-heading {
    margin-bottom: 20px;
}

.tarifs-page .tarifs-section-heading h2,
.tarifs-page .travel-fees-title h2,
.tarifs-page .tarifs-notes-inner h2 {
    margin: 0;
    font-size: clamp(1.75rem, 2.8vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -.025em;
}

.tarifs-page .tarifs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tarifs-page .tarif-card {
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 17px;
    border: 1px solid #9fbcd3;
    border-radius: 11px;
    background: #d9e7f1;
    box-shadow: 0 7px 17px rgba(13, 32, 59, .07);
    text-align: center;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.tarifs-page .tarif-card:hover {
    transform: translateY(-3px);
    border-color: #76a8ce;
    box-shadow: 0 11px 23px rgba(13, 32, 59, .11);
}

.tarifs-page .tarif-card h3 {
    margin: 0;
    color: #13263a;
    font-size: .91rem;
    line-height: 1.35;
}

.tarifs-page .tarif-description {
    margin: 5px 0 0;
    color: #4b6277;
    font-size: .76rem;
    line-height: 1.35;
}

.tarifs-page .tarif-price {
    margin: auto 0 0;
    padding-top: 9px;
    color: #075fbd;
    font-size: 1.62rem;
    font-weight: 900;
    line-height: 1;
}

.tarifs-page .tarif-price small {
    display: block;
    margin-bottom: 4px;
    color: #40576d;
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tarifs-page .tarifs-secondary {
    padding: 42px 0 46px;
    color: #fff;
    background: #0a1d31;
    border-block: 1px solid #17446d;
}

.tarifs-page .tarifs-secondary .tarifs-section-heading h2 {
    color: #fff;
}

.tarifs-page .tarifs-secondary .tarifs-container {
    width: min(1380px, calc(100% - 48px));
}

.tarifs-page .tarifs-secondary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.tarifs-page .tarifs-secondary-item {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid #2e5b84;
    border-radius: 10px;
    background: #102d4b;
}

.tarifs-page .tarifs-secondary-item h3 {
    margin: 0;
    color: #edf5fc;
    font-size: 1rem;
    line-height: 1.35;
}

.tarifs-page .tarifs-secondary-item p {
    margin: 4px 0 0;
    color: #adc1d4;
    font-size: .82rem;
    line-height: 1.35;
}

.tarifs-page .tarifs-secondary-item > strong {
    flex: 0 0 auto;
    color: #69b5ff;
    font-size: 1.35rem;
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
}

.tarifs-page .tarifs-secondary-item > strong small {
    display: block;
    color: #adc1d4;
    font-size: .68rem;
    font-weight: 800;
}

.tarifs-page .tarifs-secondary-wide {
    grid-column: 1 / -1;
    min-height: 92px;
}

.tarifs-page .travel-fees {
    padding: 34px 0;
    background: #cadce9;
}

.tarifs-page .travel-fees-inner {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 32px;
    align-items: center;
    padding: 23px 27px;
    border: 1px solid #9fbcd3;
    border-radius: 12px;
    background: #d9e7f1;
    box-shadow: 0 7px 17px rgba(13, 32, 59, .06);
}

.tarifs-page .travel-fees-inner dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.tarifs-page .travel-fees-inner dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid #aac4d8;
    border-radius: 9px;
    background: #c9ddea;
}

.tarifs-page .travel-fees-inner dt {
    color: #1d344a;
    font-weight: 800;
}

.tarifs-page .travel-fees-inner dd {
    margin: 0;
    color: #075fbd;
    font-weight: 900;
    text-align: right;
}

.tarifs-page .tarifs-notes {
    padding: 0 0 42px;
    background: #cadce9;
}

.tarifs-page .tarifs-notes-inner {
    padding: 19px 21px;
    border: 1px solid #a1bdd3;
    border-radius: 11px;
    background: #d9e7f1;
}

.tarifs-page .tarifs-notes-inner h2 {
    margin-bottom: 10px;
    font-size: 1.12rem;
}

.tarifs-page .tarifs-notes-inner p {
    margin: 0;
    color: #40566a;
    font-size: .82rem;
    line-height: 1.65;
}

.tarifs-page .tarifs-notes-inner p + p {
    margin-top: 8px;
    color: #18334c;
}

@media (max-width: 1040px) {
    .tarifs-page .tarifs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tarifs-page .tarifs-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tarifs-page .tarifs-secondary-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 780px) {
    .tarifs-page .tarifs-container-wide,
    .tarifs-page .tarifs-container,
    .tarifs-page .tarifs-secondary .tarifs-container,
    .tarifs-page .tarifs-header .container {
        width: min(100% - 28px, 640px);
    }

    .tarifs-page .tarifs-header {
        min-height: 290px;
        padding: 0;
    }

    .tarifs-page .tarifs-header .container {
        padding-block: 44px;
    }

    .tarifs-page .tarifs-header h1 {
        font-size: clamp(2rem, 9.8vw, 3rem);
    }

    .tarifs-page .tarifs-primary,
    .tarifs-page .tarifs-secondary {
        padding-block: 38px;
    }

    .tarifs-page .travel-fees-inner {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 21px;
    }

    .tarifs-page .travel-fees-inner dl {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .tarifs-page .tarifs-grid,
    .tarifs-page .tarifs-secondary-grid {
        grid-template-columns: 1fr;
    }

    .tarifs-page .tarif-card {
        min-height: 112px;
    }

    .tarifs-page .tarifs-secondary-wide {
        grid-column: auto;
    }

    .tarifs-page .tarifs-secondary-item {
        min-height: 76px;
    }
}

@media (max-width: 390px) {
    .tarifs-page .tarifs-secondary-item,
    .tarifs-page .travel-fees-inner dl > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .tarifs-page .tarifs-secondary-item > strong,
    .tarifs-page .travel-fees-inner dd {
        text-align: left;
    }
}