:root {

            --menu-height: 90px;

            --dark: #1e293b;
            --dark-2: #0f172a;

            --orange: #ef783b;
            --orange-light: #fff4ee;

            --text: #334155;
            --muted: #64748b;

            --bg: #f8fafc;
            --white: #ffffff;

            --border: #e2e8f0;

        }


        * {

            box-sizing: border-box;

            margin: 0;
            padding: 0;

        }


        html {

            scroll-behavior: smooth;

        }


        body {

            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Arial,
                sans-serif;

            background: var(--bg);

            color: var(--text);

            line-height: 1.7;

        }


        img {

            /*display: block; */

            max-width: 100%;

        }


        a {

            color: inherit;

            text-decoration: none;

        }


        /* =====================================================
           PAGE
        ===================================================== */

        .appc-page {

            margin-top: var(--menu-height);

            padding:
                65px 20px 90px;

        }


       /* .appc-container {

            width: 100%;

            max-width: 900px;

            margin: 0 auto;

        }*/


        /* =====================================================
           HEADER
        ===================================================== */


        .appc-label {

            display: flex;

            align-items: center;

            gap: 10px;

            margin-bottom: 15px;

            color: var(--orange);

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 2px;

            text-transform: uppercase;

        }


        .appc-label::before {

            content: "";

            width: 30px;

            height: 2px;

            background: var(--orange);

        }


        .appc-header h1 {

            max-width: 900px;

            color: var(--dark-2);

            font-size:
                clamp(32px, 3vw, 48px);

            line-height: 1.08;

            font-weight: 400;

            letter-spacing: -2.5px;

            text-transform: none !important;

        }


        .appc-header h1 strong {

            font-weight: 800;

        }

        .appc-header p{
          padding:20px 10px;
          text-align:center;
          font-size:16px;
        }


/* =====================================================
   PASTILLES
===================================================== */

.devis-steps {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 750px;

    margin: 0 auto 35px;
}

.devis-step {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #9aa3b2;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    border-radius: 50%;

    background: #e9edf2;
    color: #697586;

    font-size: 13px;
    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.devis-step.active {
    color: #1769aa;
}

.devis-step.active .step-number {
    background: var(--orange);
    color: #fff;

    box-shadow:
        0 3px 10px rgba(23, 105, 170, .20);
}

.step-line {
    width: 55px;
    height: 2px;

    flex: 0 0 55px;

    margin: 0 12px;

    background: #dfe4ea;
}


/* =====================================================
   SECTIONS FORMULAIRE
===================================================== */

.devis-section {
    margin-bottom: 20px;
    padding: 30px;

    background: #fff;

    border: 1px solid #e7ebf0;
    border-radius: 16px;

    box-shadow:
        0 5px 20px rgba(20, 35, 55, .04);

    box-sizing: border-box;
}

.section-title {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 25px;
}

.section-number {
    flex: 0 0 auto;

    color:var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.section-title h2 {
    margin: 0 0 5px;

    color: #172033;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.section-title p {
    margin: 0;

    color: #7a8494;

    font-size: 14px;
}


/* =====================================================
   FORM GRID
===================================================== */

.form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.form-group {
    width: 100%;
}

.form-group label {
    display: block;

    margin-bottom: 9px;

    color: #303949;

    font-size: 14px;
    font-weight: 650;
}

.form-group select,
.form-group input {
    width: 100%;
    min-height: 50px;

    padding: 0 15px;

    border: 1px solid #dce1e8;
    border-radius: 10px;

    outline: none;

    background: #fff;
    color: #273143;

    font-family: inherit;
    font-size: 15px;

    box-sizing: border-box;

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

.form-group select {
    cursor: pointer;
}

.form-group select:focus,
.form-group input:focus {
    border-color: #1769aa;

    box-shadow:
        0 0 0 3px rgba(23, 105, 170, .10);
}


/* =====================================================
   SERVICES
===================================================== */

.service-options {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;
}

.service-card {
    position: relative;

    display: block;

    cursor: pointer;
}

.service-card input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

.service-content {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    min-height: 100px;

    padding: 18px;

    border: 1px solid #dce1e8;
    border-radius: 12px;

    background: #fff;

    box-sizing: border-box;

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

.service-card:hover .service-content {
    border-color: #aeb9c7;
}

.service-card input:checked + .service-content {
    border-color: #1769aa;

    background: #f4f9ff;

    box-shadow:
        0 0 0 2px rgba(23, 105, 170, .08);
}

.service-radio {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin-top: 2px;

    border: 2px solid #c5ccd6;
    border-radius: 50%;

    box-sizing: border-box;
}

.service-card input:checked + .service-content .service-radio {
    border: 5px solid #1769aa;
}

.service-text {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.service-text strong {
    color: #202a3a;

    font-size: 15px;
}

.service-text small {
    color: #7a8494;

    font-size: 12px;
    line-height: 1.4;
}


/* =====================================================
   ESTIMATION
===================================================== */

.estimation-card {
    display: flex;
    align-items: center;

    gap: 20px;

    margin: 25px 0 20px;
    padding: 25px 30px;

    border: 1px solid #b9e1c6;
    border-radius: 16px;

    background: #f1fbf4;

    box-shadow:
        0 5px 20px rgba(30, 100, 50, .05);

    animation: estimationAppear .3s ease;
}

.estimation-card[hidden] {
    display: none;
}

.estimation-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    border-radius: 50%;

    background: #d9f2df;
    color: #21843d;

    font-size: 23px;
    font-weight: 800;
}

.estimation-content {
    min-width: 0;
}

.estimation-label {
    display: block;

    margin-bottom: 5px;

    color: #39834d;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .08em;
}

.estimation-price {
    color: #176b35;

    font-size: 28px;
    line-height: 1.3;

    font-weight: 800;
}

.estimation-content p {
    margin: 7px 0 0;

    color: #6e7b72;

    font-size: 12px;
    line-height: 1.5;
}


/* =====================================================
   ATTENTION
===================================================== */

.devis-attention {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 20px 0;

    padding: 18px 20px;

    border-left: 4px solid #e0a100;
    border-radius: 10px;

    background: #fff8e6;

    color: #6d5a25;

    font-size: 13px;
    line-height: 1.6;

    box-sizing: border-box;
}

.devis-attention strong {
    flex: 0 0 auto;

    color: #a06b00;
}


/* =====================================================
   SECTIONS INFORMATIONS
===================================================== */

.info-section {
    margin-top: 20px;
    padding: 30px;

    background: #fff;

    border: 1px solid #e7ebf0;
    border-radius: 16px;

    box-shadow:
        0 5px 20px rgba(20, 35, 55, .04);

    box-sizing: border-box;
}

.info-title {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 25px;
}

.info-number {
    flex: 0 0 auto;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.info-title h2 {
    margin: 0 0 5px;

    color: #172033;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.info-title p {
    margin: 0;

    color: #7a8494;

    font-size: 14px;
}


/* =====================================================
   DIAGNOSTIC
===================================================== */

.diagnostic-list {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;
}

.diagnostic-item {
    padding: 20px;

    border: 1px solid #e4e8ed;
    border-radius: 12px;

    background: #fafbfc;

    box-sizing: border-box;
}

.diagnostic-header {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 12px;
}

.diagnostic-header h3 {
    margin: 0;

    color: #202a3a;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: .03em;
}

.diagnostic-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;
}

.diagnostic-dot.urgent {
    background: #d64545;
}

.diagnostic-dot.express {
    background: #e09a27;
}

.diagnostic-dot.standard {
    background: #3d8b58;
}

.diagnostic-item p {
    margin: 0;

    color: #687386;

    font-size: 13px;
    line-height: 1.6;
}

.diagnostic-item strong {
    color: #303949;
}


/* =====================================================
   TARIFS
===================================================== */

.tarif-list {
    margin: 0;

    padding-left: 20px;

    color: #687386;

    font-size: 14px;
    line-height: 1.7;
}

.tarif-list li {
    margin-bottom: 12px;
}

.tarif-list li:last-child {
    margin-bottom: 0;
}

.tarif-list strong {
    color: #303949;
}

.tarif-final {
    margin-top: 25px;

    padding: 18px 20px;

    border-radius: 10px;

    background: #f4f7fa;

    color: #303949;

    font-size: 14px;
    line-height: 1.6;
}


/* =====================================================
   FOOTER
===================================================== */

.devis-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 20px;

    color: #8a94a3;

    font-size: 12px;

    text-align: center;
}

.devis-footer p {
    margin: 0;
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes estimationAppear {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .devis-page {
        padding: 30px 15px 50px;
    }


    /* HEADER */

    .devis-header h1 {
        font-size: 27px;
    }

    .devis-header p {
        font-size: 14px;
    }


    /* PASTILLES */

    .devis-steps {
        width: 100%;
    }

    .step-text {
        display: none;
    }

    .step-line {
        width: auto;

        flex: 1;

        margin: 0 8px;
    }


    /* SECTIONS */

    .devis-section,
    .info-section {
        padding: 22px 18px;
    }


    /* CHAMPS */

    .form-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /* SERVICES */

    .service-options {
        grid-template-columns: 1fr;
    }

    .service-content {
        min-height: auto;
    }


    /* ESTIMATION */

    .estimation-card {
        align-items: flex-start;

        padding: 20px;
    }

    .estimation-price {
        font-size: 23px;
    }


    /* ATTENTION */

    .devis-attention {
        flex-direction: column;

        gap: 5px;

        padding: 17px;
    }


    /* DIAGNOSTIC */

    .diagnostic-list {
        grid-template-columns: 1fr;
    }

    .diagnostic-item {
        padding: 18px;
    }

}