/* =========================================================
   VARIABLES
========================================================= */

:root {

    --project-background:
        #FEF8E7;

    --project-text:
        #000000;

    --project-primary:
        #92003B;

    --project-primary-hover:
        #76002F;

    --project-border:
        rgba(0, 0, 0, 0.12);

    --project-border-active:
        #92003B;

    --project-card:
        rgba(255, 255, 255, 0.42);

    --project-shadow:
        0 18px 50px rgba(40, 25, 15, 0.08);

    --project-font:
        "Montserrat",
        sans-serif;

    --project-button-font:
        "Cardo",
        serif;

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    min-width:
        320px;

    background:
        var(--project-background);

    color:
        var(--project-text);

    font-family:
        var(--project-font);

}


button,
textarea,
input {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


button:disabled {

    cursor:
        not-allowed;

}


/* =========================================================
   APPLICATION
========================================================= */

.project-app {

    width:
        100%;

    min-height:
        100vh;

    overflow:
        hidden;

    background:
        var(--project-background);

}


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

.project-header {

    width:
        100%;

    max-width:
        1440px;

    margin:
        0 auto;

    padding:
        28px 50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


.project-logo {

    display:
        inline-flex;

    align-items:
        center;

}


.project-logo img {

    display:
        block;

    width:
        auto;

    max-width:
        180px;

    height:
        auto;

}


.project-progress {

    width:
        min(300px, 35vw);

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.project-progress-track {

    flex:
        1;

    height:
        4px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(0, 0, 0, 0.1);

}


.project-progress-bar {

    display:
        block;

    width:
        33.333%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--project-primary);

    transition:
        width 0.35s ease;

}


.project-progress-label {

    white-space:
        nowrap;

    font-size:
        0.78rem;

    font-weight:
        500;

    opacity:
        0.65;

}


/* =========================================================
   CONTENU
========================================================= */

.project-main {

    width:
        100%;

    min-height:
        calc(100vh - 110px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.project-step {

    width:
        100%;

    min-height:
        calc(100vh - 110px);

    padding:
        30px 50px 70px;

    animation:
        projectFadeIn 0.45s ease both;

}


.project-step[hidden] {

    display:
        none;

}


.project-step-content {

    width:
        100%;

    max-width:
        1200px;

    min-height:
        calc(100vh - 210px);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(260px, 0.8fr)
        minmax(0, 1.2fr);

    align-items:
        center;

    gap:
        clamp(50px, 8vw, 140px);

}


.project-welcome {

    max-width:
        1050px;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(0, 1fr);

}


/* =========================================================
   LUVI
========================================================= */

.luvi-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.luvi-container-welcome {

    animation:
        luviAppear 0.7s 0.15s ease both;

}


.luvi-step-side {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    align-self:
        center;

}


.luvi-sprite {

    display:
        block;

    flex:
        0 0 auto;

    background-image:
        url("https://lucilebourdet.com/mascotte-luvi_9-variantes_sprite-sheet_1.png");

    background-repeat:
        no-repeat;

}


.luvi-sprite-small {

    max-width:
        100%;

}


/* =========================================================
   TYPOGRAPHIE
========================================================= */

.project-eyebrow {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--project-primary);

    font-size:
        0.82rem;

    font-weight:
        600;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.project-title {

    margin:
        0;

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        clamp(2rem, 4vw, 2.5rem);

    font-weight:
        500;

    line-height:
        1.2;

}


.project-title-large {

    font-size:
        clamp(2.4rem, 5vw, 3.8rem);

}


.project-text {

    margin-top:
        28px;

}


.project-text p {

    margin:
        0 0 16px;

    font-size:
        clamp(1.05rem, 1.6vw, 1.3rem);

    font-weight:
        400;

    line-height:
        1.65;

}


.project-introduction {

    max-width:
        760px;

    margin:
        20px 0 35px;

    font-size:
        clamp(1rem, 1.5vw, 1.18rem);

    font-weight:
        400;

    line-height:
        1.65;

}


/* =========================================================
   ACCUEIL
========================================================= */

.project-welcome-content {

    max-width:
        550px;

}


.project-welcome-text {

    max-width:
        510px;

}


.project-duration {

    width:
        fit-content;

    margin:
        28px 0 32px;

    padding:
        10px 16px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid var(--project-border);

    border-radius:
        999px;

    font-size:
        0.9rem;

    background:
        rgba(255, 255, 255, 0.25);

}


.project-duration-icon {

    color:
        var(--project-primary);

    font-size:
        1.15rem;

}


/* =========================================================
   BOUTONS
========================================================= */

.project-button {

    min-height:
        52px;

    padding:
        13px 28px;

    border:
        none;

    border-radius:
        2px;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;

    font-family:
        var(--project-button-font);

    font-size:
        20px;

    font-weight:
        600;

}


.project-button:hover:not(:disabled) {

    transform:
        translateY(-2px);

}


.project-button-primary {

    color:
        #FEF8E7;

    background:
        var(--project-primary);

}


.project-button-primary:hover:not(:disabled) {

    background:
        var(--project-primary-hover);

}


.project-button-primary:disabled {

    opacity:
        0.35;

}


.project-button-secondary {

    color:
        var(--project-text);

    background:
        transparent;

    border:
        1px solid var(--project-border);

}


/* =========================================================
   CONTENEUR QUESTION
========================================================= */

.project-question-container {

    width:
        100%;

    max-width:
        760px;

}


/* =========================================================
   CARDS RADIO
========================================================= */

.project-options {

    display:
        grid;

    gap:
        14px;

}


.project-option-card {

    position:
        relative;

    width:
        100%;

    padding:
        22px 24px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    border:
        1px solid var(--project-border);

    border-radius:
        4px;

    background:
        var(--project-card);

    cursor:
        pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.project-option-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(146, 0, 59, 0.4);

    box-shadow:
        var(--project-shadow);

}


.project-option-card input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;

}


.project-option-radio {

    width:
        22px;

    height:
        22px;

    margin-top:
        2px;

    flex:
        0 0 22px;

    border:
        1.5px solid rgba(0, 0, 0, 0.35);

    border-radius:
        50%;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.project-option-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.project-option-content strong {

    font-size:
        1rem;

    font-weight:
        600;

    line-height:
        1.35;

}


.project-option-content small {

    font-size:
        0.9rem;

    line-height:
        1.55;

    opacity:
        0.7;

}


.project-option-card.is-selected {

    border-color:
        var(--project-border-active);

    background:
        rgba(146, 0, 59, 0.04);

}


.project-option-card.is-selected .project-option-radio {

    border:
        6px solid var(--project-primary);

}

/* =========================================================
   SITE EXISTANT
========================================================= */

.existing-site-wrapper {

    width:
        100%;

    margin-top:
        18px;

    animation:
        existingSiteAppear 0.3s ease;

}


.existing-site-wrapper[hidden] {

    display:
        none;

}


.existing-site-label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        0.9rem;

    font-weight:
        600;

}


.existing-site-input-wrapper {

    position:
        relative;

    width:
        100%;

}


.existing-site-prefix {

    position:
        absolute;

    top:
        50%;

    left:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--project-primary);

    font-size:
        0.9rem;

    transform:
        translateY(-50%);

    pointer-events:
        none;

}


.existing-site-input {

    width:
        100%;

    min-height:
        52px;

    padding:
        14px 18px 14px 46px;

    border:
        1px solid var(--project-border);

    border-radius:
        4px;

    outline:
        none;

    color:
        var(--project-text);

    background:
        rgba(255, 255, 255, 0.38);

    font-family:
        var(--project-font);

    font-size:
        0.95rem;

    line-height:
        1.4;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


.existing-site-input::placeholder {

    opacity:
        0.45;

}


.existing-site-input:focus {

    border-color:
        var(--project-primary);

    background:
        rgba(255, 255, 255, 0.55);

    box-shadow:
        0 0 0 4px rgba(146, 0, 59, 0.08);

}


.existing-site-input.is-invalid {

    border-color:
        var(--project-primary);

}


.existing-site-note {

    margin:
        8px 0 0;

    color:
        rgba(0, 0, 0, 0.58);

    font-family:
        var(--project-font);

    font-size:
        0.78rem;

    line-height:
        1.5;

}


@keyframes existingSiteAppear {

    from {

        opacity:
            0;

        transform:
            translateY(-6px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 640px) {

    .existing-site-wrapper {

        margin-top:
            14px;

    }


    .existing-site-input {

        min-height:
            48px;

        padding:
            12px 16px 12px 43px;

        font-size:
            0.9rem;

    }


    .existing-site-prefix {

        left:
            16px;

    }


    .existing-site-note {

        font-size:
            0.76rem;

    }

}


/* =========================================================
   TEXTAREA ACTIVITÉ
========================================================= */

.activity-input-wrapper {

    width:
        100%;

}


.project-textarea {

    width:
        100%;

    min-height:
        230px;

    padding:
        22px;

    resize:
        vertical;

    border:
        1px solid var(--project-border);

    border-radius:
        4px;

    outline:
        none;

    color:
        var(--project-text);

    background:
        rgba(255, 255, 255, 0.38);

    font-family:
        var(--project-font);

    font-size:
        1rem;

    line-height:
        1.65;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.project-textarea::placeholder {

    opacity:
        0.45;

}


.project-textarea:focus {

    border-color:
        var(--project-primary);

    box-shadow:
        0 0 0 4px rgba(146, 0, 59, 0.08);

}


/* =========================================================
   DICTÉE VOCALE
========================================================= */

.voice-input-container {

    margin-top:
        14px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px 18px;

}


.voice-input-button {

    min-height:
        42px;

    padding:
        8px 14px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid var(--project-border);

    border-radius:
        999px;

    color:
        var(--project-text);

    background:
        transparent;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;

}


.voice-input-button:hover {

    border-color:
        var(--project-primary);

    background:
        rgba(146, 0, 59, 0.04);

}


.voice-input-button.is-listening {

    border-color:
        var(--project-primary);

    color:
        #FEF8E7;

    background:
        var(--project-primary);

    animation:
        voicePulse 1.3s infinite;

}


.voice-input-button svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.voice-input-button span {

    font-size:
        0.85rem;

    font-weight:
        500;

}


.voice-input-status {

    font-size:
        0.82rem;

    opacity:
        0.6;

}


.project-field-note {

    margin:
        14px 0 0;

    font-size:
        0.82rem;

    font-style:
        italic;

    opacity:
        0.55;

}


/* =========================================================
   NAVIGATION
========================================================= */

.project-navigation {

    margin-top:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes projectFadeIn {

    from {

        opacity:
            0;

        transform:
            translateY(12px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes luviAppear {

    from {

        opacity:
            0;

        transform:
            translateY(20px)
            scale(0.96);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes voicePulse {

    0% {

        box-shadow:
            0 0 0 0 rgba(146, 0, 59, 0.35);

    }

    70% {

        box-shadow:
            0 0 0 10px rgba(146, 0, 59, 0);

    }

    100% {

        box-shadow:
            0 0 0 0 rgba(146, 0, 59, 0);

    }

}


/* =========================================================
   RESPONSIVE — TABLETTE
========================================================= */

@media (max-width: 900px) {

    .project-header {

        padding:
            24px 30px;

    }


    .project-step {

        padding:
            25px 30px 60px;

    }


    .project-step-content,
    .project-welcome {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        gap:
            30px;

    }


    .luvi-step-side {

        order:
            -1;

    }


    .project-question-container {

        max-width:
            100%;

    }


    .project-welcome-content {

        max-width:
            680px;

        margin:
            0 auto;

        text-align:
            center;

    }


    .project-duration {

        margin-right:
            auto;

        margin-left:
            auto;

    }


    .project-welcome .luvi-container {

        margin-bottom:
            -20px;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 640px) {

    .project-header {

        padding:
            18px 20px;

        gap:
            20px;

    }


    .project-logo img {

        max-width:
            130px;

    }


    .project-progress {

        width:
            auto;

        flex:
            1;

        justify-content:
            flex-end;

    }


    .project-progress-label {

        display:
            none;

    }


    .project-step {

        min-height:
            calc(100vh - 80px);

        padding:
            20px 20px 45px;

    }


    .project-main {

        min-height:
            calc(100vh - 80px);

    }


    .project-step-content {

        min-height:
            calc(100vh - 145px);

        gap:
            22px;

    }


    .project-title {

        font-size:
            2rem;

    }


    .project-title-large {

        font-size:
            2.45rem;

    }


    .project-introduction {

        margin-bottom:
            28px;

        font-size:
            1rem;

    }


    .project-option-card {

        padding:
            18px;

        gap:
            14px;

    }


    .project-option-content strong {

        font-size:
            0.95rem;

    }


    .project-option-content small {

        font-size:
            0.82rem;

    }


    .project-textarea {

        min-height:
            210px;

        padding:
            18px;

        font-size:
            0.95rem;

    }


    .voice-input-container {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .project-navigation {

        margin-top:
            28px;

    }


    .project-navigation .project-button {

        flex:
            1;

        padding:
            12px 18px;

        font-size:
            18px;

    }

}


/* =========================================================
   RESPONSIVE — PETITS ÉCRANS
========================================================= */

@media (max-width: 420px) {

    .project-title-large {

        font-size:
            2.15rem;

    }


    .project-option-card {

        padding:
            16px;

    }


    .project-option-radio {

        width:
            20px;

        height:
            20px;

        flex-basis:
            20px;

    }

}

/* =========================================================
   ÉTAPE 4 — OBJECTIFS ET BESOINS
========================================================= */

.objective-phase {
    display: none;
    animation: objectivePhaseIn 0.35s ease;
}

.objective-phase.active {
    display: block;
}

@keyframes objectivePhaseIn {

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

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

}

.feature-group-heading{
	margin-top: 25px;
	margin-bottom: 15px;
}

.feature-card-price {
	color: #92003B;
}


/* =========================================================
   COMPTEUR
========================================================= */

.selection-counter {
    display: inline-flex;
    align-items: center;

    margin-bottom: 24px;
    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(146, 0, 59, 0.08);

    color: #92003B;

    font-family: Montserrat, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
}


/* =========================================================
   GRILLES
========================================================= */

.objective-cards-grid,
.features-cards-grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        14px;

}


/* =========================================================
   CARD
========================================================= */

.objective-card {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    min-height:
        auto;

    padding:
        20px 22px;

    cursor: pointer;

    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.45);

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

.objective-card:hover {
    transform: translateY(-2px);

    border-color: rgba(146, 0, 59, 0.45);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.06);
}

.objective-card input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   ÉTAT SÉLECTIONNÉ
========================================================= */

.objective-card:has(input:checked) {
    border-color: #92003B;

    background:
        rgba(146, 0, 59, 0.055);

    box-shadow:
        0 10px 28px rgba(146, 0, 59, 0.08);
}


/* =========================================================
   ICÔNE
========================================================= */

.objective-card-icon {
    flex-shrink: 0;

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

    width: 46px;
    height: 46px;

    border-radius: 14px;

    background: rgba(146, 0, 59, 0.08);

    color: #92003B;

    font-size: 1.15rem;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.objective-card:has(input:checked)
.objective-card-icon {
    background: #92003B;
    color: #FEF8E7;
}


/* =========================================================
   CONTENU
========================================================= */

.objective-card-content {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding-right: 20px;
}

.objective-card-content strong {
    color: #000;

    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    font-weight: 600;

    line-height: 1.35;
}

.objective-card-content small {
    color: rgba(0, 0, 0, 0.65);

    font-family: Montserrat, sans-serif;
    font-size: 0.82rem;
    font-weight: 400;

    line-height: 1.55;
}


/* =========================================================
   CHECK
========================================================= */

.objective-card-check {
    position: absolute;

    top: 18px;
    right: 18px;

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

    width: 22px;
    height: 22px;

    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;

    color: transparent;

    font-size: 0.65rem;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.objective-card:has(input:checked)
.objective-card-check {
    border-color: #92003B;

    background: #92003B;

    color: #FEF8E7;
}


/* =========================================================
   PRIORITÉ
========================================================= */

.priority-card {
    min-height: 120px;
}


/* =========================================================
   NOTE FONCTIONNALITÉS
========================================================= */

.features-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 24px;

    color: rgba(0, 0, 0, 0.58);

    font-family: Montserrat, sans-serif;
    font-size: 0.82rem;

    line-height: 1.55;
}

.features-note i {
    margin-top: 3px;

    color: #92003B;
}


/* =========================================================
   RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 900px) {

    .objective-cards-grid,
    .features-cards-grid,
    .priority-cards-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 600px) {

    .objective-card {
        min-height: auto;

        gap: 14px;

        padding: 18px;
    }

    .objective-card-icon {
        width: 42px;
        height: 42px;

        border-radius: 12px;
    }

    .objective-card-content strong {
        font-size: 0.95rem;
    }

    .objective-card-content small {
        font-size: 0.78rem;
    }

    .objective-card-check {
        top: 14px;
        right: 14px;
    }

    .selection-counter {
        margin-bottom: 18px;
    }

}

/* =========================================================
   ÉTAPE 5 — RESTITUTION INTELLIGENTE
========================================================= */

.project-summary-wrapper {

    width: 100%;

}


.project-summary-label {

    display: block;

    margin-bottom: 8px;

    font-size: 0.88rem;

    font-weight: 600;

    color: var(--project-text, #17213a);

}


.project-summary-textarea {

    min-height: 240px;

    resize: vertical;

}


.project-summary-loading {

    *display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 14px;

    font-size: 1.2rem;

    color: #92003B;

}


.project-summary-loading-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: white;

    color: #92003B;

}


.project-summary-error {

    margin-top: 14px;

    padding: 12px 14px;

    border-radius: 6px;

    background: rgba(190, 60, 60, 0.08);

    border: 1px solid rgba(190, 60, 60, 0.2);

    font-size: 0.82rem;

    line-height: 1.45;

}


.project-timing-wrapper {

    margin-top: 26px;

}


.project-timing-heading {

    margin-bottom: 12px;

}


.project-timing-heading .project-summary-label {

    margin-bottom: 4px;

}


.project-timing-heading p {

    margin: 0;

    font-size: 0.88rem;

    line-height: 1.45;

    color: var(--project-text-muted, #687080);

}


.project-timing-options {

    display: grid;

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

    gap: 12px;

}


.project-timing-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 58px;

    padding: 14px 16px;

    border: 1px solid rgba(23, 33, 58, 0.14);

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.42);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.project-timing-card input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.project-timing-card:hover {

    border-color: rgba(58, 141, 255, 0.45);

}


.project-timing-card.is-selected {

    border-color: #3A8DFF;

    background: rgba(58, 141, 255, 0.06);

    box-shadow:
        0 0 0 1px rgba(58, 141, 255, 0.08);

}


.project-timing-radio {

    flex: 0 0 18px;

    width: 18px;

    height: 18px;

    border: 1px solid rgba(23, 33, 58, 0.28);

    border-radius: 50%;

    background: #fff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.project-timing-card.is-selected
.project-timing-radio {

    border-color: #3A8DFF;

    box-shadow:
        inset 0 0 0 4px #fff;

    background: #3A8DFF;

}


.project-timing-content {

    display: block;

    font-size: 0.86rem;

    line-height: 1.35;

}


.project-timing-content strong {

    font-weight: 600;

}


@media (max-width: 900px) {

    .project-timing-options {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 640px) {

    .project-summary-textarea {

        min-height: 220px;

    }

    .project-timing-wrapper {

        margin-top: 22px;

    }

}

/* =========================================================
   ÉTAPE 6 — ESTIMATION ET CONTACT
========================================================= */

.project-question-container-estimation {

    max-width:
        920px;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.estimation-introduction {

    margin-bottom:
        34px;

}


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

.project-estimation-section {

    margin-top:
        34px;

}


.project-estimation-section:first-of-type {

    margin-top:
        0;

}


.project-estimation-section-heading {

    margin-bottom:
        18px;

}


.project-estimation-section-heading h3 {

    margin:
        0 0 6px;

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        1.05rem;

    font-weight:
        600;

    line-height:
        1.35;

}


.project-estimation-section-heading p {

    margin:
        0;

    color:
        var(--project-text-muted, #687080);

    font-family:
        var(--project-font);

    font-size:
        0.84rem;

    line-height:
        1.5;

}


/* =========================================================
   CONDITIONS
========================================================= */

.estimation-conditions-list {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;

}


.estimation-condition-card {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    padding:
        17px 18px;

    cursor:
        pointer;

    border:
        1px solid rgba(23, 33, 58, 0.12);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, 0.42);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

}


.estimation-condition-card:hover {

    border-color:
        rgba(146, 0, 59, 0.35);

    transform:
        translateY(-1px);

}


.estimation-condition-card.is-selected {

    border-color:
        #92003B;

    background:
        rgba(146, 0, 59, 0.055);

    box-shadow:
        0 8px 22px rgba(146, 0, 59, 0.06);

}


.estimation-condition-card input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;

}


.estimation-condition-icon {

    flex:
        0 0 40px;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(146, 0, 59, 0.08);

    color:
        #92003B;

    font-size:
        1rem;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.estimation-condition-card.is-selected
.estimation-condition-icon {

    background:
        #92003B;

    color:
        #FEF8E7;

}


.estimation-condition-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding-right:
        20px;

}


.estimation-condition-content strong {

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        0.88rem;

    font-weight:
        600;

    line-height:
        1.35;

}


.estimation-condition-content small {

    color:
        rgba(0, 0, 0, 0.58);

    font-family:
        var(--project-font);

    font-size:
        0.76rem;

    line-height:
        1.45;

}


.estimation-condition-check {

    position:
        absolute;

    top:
        16px;

    right:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        20px;

    height:
        20px;

    border:
        1px solid rgba(23, 33, 58, 0.18);

    border-radius:
        50%;

    color:
        transparent;

    font-size:
        0.6rem;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

}


.estimation-condition-card.is-selected
.estimation-condition-check {

    border-color:
        #92003B;

    background:
        #92003B;

    color:
        #FEF8E7;

}


/* =========================================================
   PRESTATIONS
========================================================= */

.estimation-services-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.estimation-service-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        16px 18px;

    border:
        1px solid rgba(23, 33, 58, 0.11);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, 0.42);

}


.estimation-service-content {

    min-width:
        0;

}


.estimation-service-content strong {

    display:
        block;

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        0.9rem;

    font-weight:
        600;

    line-height:
        1.4;

}


.estimation-service-content small {

    display:
        block;

    margin-top:
        4px;

    color:
        rgba(0, 0, 0, 0.55);

    font-family:
        var(--project-font);

    font-size:
        0.76rem;

    line-height:
        1.4;

}


.estimation-service-price {

    flex:
        0 0 auto;

    color:
        #92003B;

    font-family:
        var(--project-font);

    font-size:
        0.9rem;

    font-weight:
        600;

    white-space:
        nowrap;

}


.estimation-service-price.is-discounted {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.estimation-service-price-original {

    color:
        rgba(0, 0, 0, 0.38);

    font-size:
        0.76rem;

    font-weight:
        400;

    text-decoration:
        line-through;

}

/* =========================================================
   ACTION — RETIRER UNE PRESTATION
========================================================= */

.estimation-service-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex:
        0 0 auto;

}


.estimation-service-remove {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        28px;

    padding:
        5px 10px;

    border:
        1px solid rgba(146, 0, 59, 0.18);

    border-radius:
        5px;

    background:
        rgba(146, 0, 59, 0.035);

    color:
        #92003B;

    font-family:
        var(--project-font);

    font-size:
        0.68rem;

    font-weight:
        600;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}


.estimation-service-remove:hover {

    border-color:
        rgba(146, 0, 59, 0.35);

    background:
        rgba(146, 0, 59, 0.09);

    color:
        #92003B;

    transform:
        translateY(-1px);

}


.estimation-service-remove:active {

    transform:
        translateY(0);

}


/* =========================================================
   OPTIONS COMPLÉMENTAIRES
========================================================= */

.estimation-optional-services {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.estimation-optional-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        16px 18px;

    cursor:
        pointer;

    border:
        1px solid rgba(23, 33, 58, 0.11);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, 0.42);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.estimation-optional-card:hover {

    border-color:
        rgba(146, 0, 59, 0.35);

}


.estimation-optional-card.is-selected {

    border-color:
        #92003B;

    background:
        rgba(146, 0, 59, 0.055);

    box-shadow:
        0 8px 22px rgba(146, 0, 59, 0.06);

}


.estimation-optional-card input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;

}


.estimation-optional-check {

    flex:
        0 0 20px;

    width:
        20px;

    height:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(23, 33, 58, 0.18);

    border-radius:
        50%;

    color:
        transparent;

    font-size:
        0.6rem;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

}


.estimation-optional-card.is-selected
.estimation-optional-check {

    border-color:
        #92003B;

    background:
        #92003B;

    color:
        #FEF8E7;

}


.estimation-optional-content {

    flex:
        1;

    min-width:
        0;

}


.estimation-optional-content strong {

    display:
        block;

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        0.88rem;

    font-weight:
        600;

    line-height:
        1.4;

}


.estimation-optional-content small {

    display:
        block;

    margin-top:
        4px;

    color:
        rgba(0, 0, 0, 0.55);

    font-family:
        var(--project-font);

    font-size:
        0.76rem;

    line-height:
        1.4;

}


.estimation-optional-price {

    flex:
        0 0 auto;

    color:
        #92003B;

    font-family:
        var(--project-font);

    font-size:
        0.86rem;

    font-weight:
        600;

    white-space:
        nowrap;

}

/* =========================================================
   ACTION — AJOUTER UNE PRESTATION
========================================================= */

.estimation-optional-card {

    justify-content:
        space-between;

}


.estimation-optional-add {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    min-height:
        30px;

    padding:
        6px 12px;

    border:
        1px solid rgba(146, 0, 59, 0.24);

    border-radius:
        5px;

    background:
        #92003B;

    color:
        #FEF8E7;

    font-family:
        var(--project-font);

    font-size:
        0.68rem;

    font-weight:
        600;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

}


.estimation-optional-add:hover {

    border-color:
        #92003B;

    background:
        rgba(146, 0, 59, 0.88);

    box-shadow:
        0 4px 12px rgba(146, 0, 59, 0.14);

    transform:
        translateY(-1px);

}


.estimation-optional-add:active {

    transform:
        translateY(0);

}


/* =========================================================
   TOTAL
========================================================= */

.project-estimation-total {

    margin-top:
        38px;

    padding:
        24px 26px;

    border:
        1px solid rgba(146, 0, 59, 0.16);

    border-radius:
        10px;

    background:
        white;

}


.project-estimation-total-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.project-estimation-total-label {

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        0.9rem;

    font-weight:
        600;

}


.project-estimation-total-price {

    color:
        #92003B;

    font-family:
        var(--project-font);

    font-size:
        1.65rem;

    font-weight:
        700;

    white-space:
        nowrap;

}


.project-estimation-total-note {

    margin:
        10px 0 0;

    color:
        rgba(0, 0, 0, 0.55);

    font-family:
        var(--project-font);

    font-size:
        0.76rem;

    line-height:
        1.5;

}

/* =========================================================
   ESTIMATION — TOTAL STICKY
========================================================= */

#project-estimation-total-sticky {

    position: fixed;

    left: 50%;

    bottom: 24px;

    transform:
        translateX(-50%)
        translateY(20px);

    width:
        min(
            calc(100% - 40px),
            760px
        );

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

}


#project-estimation-total-sticky.is-visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);

    pointer-events: auto;

}

/* =========================================================
   RÉASSURANCE
========================================================= */

.project-estimation-reassurance {

    margin-top:
        28px;

    padding:
        20px;

    border:
        1px solid rgba(23, 33, 58, 0.09);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, 0.30);

}


.project-estimation-reassurance-list {

    display:
        grid;

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

    gap:
        18px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.project-estimation-reassurance-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

}


.project-estimation-reassurance-icon {

    flex:
        0 0 26px;

    width:
        26px;

    height:
        26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(146, 0, 59, 0.08);

    color:
        #92003B;

    font-size:
        0.72rem;

}


.project-estimation-reassurance-item strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        0.78rem;

    font-weight:
        600;

}


.project-estimation-reassurance-item span {

    *display:
        block;

    *color:
        rgba(0, 0, 0, 0.55);

    font-family:
        var(--project-font);

    font-size:
        0.72rem;

    line-height:
        1.45;

}


/* =========================================================
   CONTACT
========================================================= */

.project-contact-section {

    margin-top:
        42px;

    padding-top:
        34px;

    border-top:
        1px solid rgba(23, 33, 58, 0.10);

}


.project-contact-section .project-estimation-section-heading {

    margin-bottom:
        24px;

}


.project-contact-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        20px 16px;
		
	margin-bottom: 20px;

}


.project-contact-grid .project-field {

    min-width:
        0;

}


.project-contact-grid .project-field-full {

    grid-column:
        1 / -1;

}


.project-contact-grid label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        0.78rem;

    font-weight:
        600;

    line-height:
        1.35;

}


.project-contact-grid input,
.project-contact-grid textarea {

    display:
        block;

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        12px 14px;

    border:
        1px solid rgba(23, 33, 58, 0.15);

    border-radius:
        6px;

    outline:
        none;

    color:
        var(--project-text);

    background:
        rgba(255, 255, 255, 0.48);

    font-family:
        var(--project-font);

    font-size:
        0.82rem;

    line-height:
        1.45;

    appearance:
        none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.project-contact-grid input {

    min-height:
        46px;

}


.project-contact-grid textarea {

    min-height:
        110px;

    resize:
        vertical;

}


.project-contact-grid input::placeholder,
.project-contact-grid textarea::placeholder {

    color:
        rgba(0, 0, 0, 0.40);

    opacity:
        1;

}


.project-contact-grid input:hover,
.project-contact-grid textarea:hover {

    border-color:
        rgba(23, 33, 58, 0.25);

    background:
        rgba(255, 255, 255, 0.60);

}


.project-contact-grid input:focus,
.project-contact-grid textarea:focus {

    border-color:
        #92003B;

    background:
        rgba(255, 255, 255, 0.68);

    box-shadow:
        0 0 0 3px rgba(146, 0, 59, 0.07);

}


.project-contact-grid input.is-invalid,
.project-contact-grid textarea.is-invalid {

    border-color:
        #92003B;

    box-shadow:
        0 0 0 3px rgba(146, 0, 59, 0.06);

}


/* =========================================================
   CONSENTEMENT
========================================================= */

label.project-consent-card{
	margin-top: 20px;
}


.project-contact-consent {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        20px;

}


.project-contact-consent input {

    flex:
        0 0 auto;

    width:
        17px;

    height:
        17px;

    margin-top:
        2px;

    accent-color:
        #92003B;

}


.project-contact-consent label {

    color:
        rgba(0, 0, 0, 0.60);

    font-family:
        var(--project-font);

    font-size:
        0.76rem;

    line-height:
        1.5;

    cursor:
        pointer;

}


.project-contact-consent label strong {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--project-text);

    font-weight:
        600;

}


/* =========================================================
   ERREUR
========================================================= */

.project-estimation-error {

    margin-top:
        18px;

    padding:
        12px 14px;

    border:
        1px solid rgba(190, 60, 60, 0.20);

    border-radius:
        6px;

    background:
        rgba(190, 60, 60, 0.08);

    color:
        var(--project-text);

    font-family:
        var(--project-font);

    font-size:
        0.82rem;

    line-height:
        1.45;

}


/* =========================================================
   RESPONSIVE — ÉTAPE 6
========================================================= */

@media (max-width: 900px) {

    .estimation-conditions-list {

        grid-template-columns:
            1fr;

    }


    .project-estimation-reassurance-list {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }

}


@media (max-width: 640px) {

    .project-question-container-estimation {

        width:
            100%;

    }


    .project-estimation-section {

        margin-top:
            28px;

    }


    .estimation-condition-card {

        padding:
            15px;

    }


    .estimation-condition-content strong {

        font-size:
            0.84rem;

    }


    .estimation-condition-content small {

        font-size:
            0.73rem;

    }


    .estimation-service-card {

        align-items:
            flex-start;

        gap:
            12px;

        padding:
            15px;

    }


    .estimation-service-price {

        font-size:
            0.82rem;

    }


    .estimation-optional-card {

        align-items:
            flex-start;

        padding:
            15px;

    }


    .estimation-optional-price {

        font-size:
            0.8rem;

    }


    .project-estimation-total {

        margin-top:
            30px;

        padding:
            20px;

    }


    .project-estimation-total-content {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            8px;

    }


    .project-estimation-total-price {

        font-size:
            1.45rem;

    }


    .project-estimation-reassurance {

        padding:
            17px;

    }


    .project-contact-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .project-contact-field-full {

        grid-column:
        auto;

    }


    .project-contact-input,
    .project-contact-textarea {

        font-size:
            0.86rem;

    }

}

/* =========================================================
   ASSISTANT DE PRÉ-DEVIS
========================================================= */


/* =========================================================
   CONTENEUR PRINCIPAL
========================================================= */

#assistant-main {

    width:
        100%;

}


#assistant-main .project-step-content {

    align-items:
        flex-start;

}


#assistant-main
.project-question-container-estimation {

    width:
        100%;

    max-width:
        760px;

}


/* =========================================================
   EN-TÊTE
========================================================= */

#assistant-main .step-heading {

    margin-bottom:
        36px;

}


#assistant-main .step-heading h1 {

    margin-bottom:
        14px;

}


/* =========================================================
   SECTIONS D'ESTIMATION
========================================================= */

#assistant-main .project-estimation-section {

    width:
        100%;

    margin-bottom:
        38px;

}


#assistant-main
.project-estimation-section-heading {

    margin-bottom:
        20px;

}


#assistant-main
.project-estimation-section-heading h3 {

    margin:
        0 0 8px;

}


#assistant-main
.project-estimation-section-heading p {

    margin:
        0;

}


/* =========================================================
   FIELDSET FORFAITS
========================================================= */

.assistant-package-fieldset {

    width:
        100%;

    padding:
        0;

    margin:
        0;

    border:
        0;

    min-width:
        0;

}


/* =========================================================
   LISTE DES FORFAITS
========================================================= */

.assistant-package-list {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        14px;

}


/* =========================================================
   CARTE FORFAIT
========================================================= */

.assistant-package-option {

    position:
        relative;

    width:
        100%;

    display:
        block;

}


.assistant-package-option input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;

}


/*
 * La carte reprend exactement le principe
 * des .project-option-card de l'étape 2.
 */

.assistant-package-card {

    position:
        relative;

    width:
        100%;

    padding:
        22px 24px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    border:
        1px solid var(--project-border);

    border-radius:
        4px;

    background:
        var(--project-card);

    cursor:
        pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


/* =========================================================
   HOVER
========================================================= */

.assistant-package-option:hover
.assistant-package-card {

    transform:
        translateY(-2px);

    border-color:
        rgba(146, 0, 59, 0.4);

    box-shadow:
        var(--project-shadow);

}


/* =========================================================
   RADIO
========================================================= */

.assistant-package-card-radio {

    width:
        22px;

    height:
        22px;

    margin-top:
        2px;

    flex:
        0 0 22px;

    border:
        1.5px solid rgba(0, 0, 0, 0.35);

    border-radius:
        50%;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


/* =========================================================
   CONTENU
========================================================= */

.assistant-package-card-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    min-width:
        0;

}


.assistant-package-card-content strong {

    font-size:
        1rem;

    font-weight:
        600;

    line-height:
        1.35;

}


.assistant-package-card-content small {

    font-size:
        0.9rem;

    line-height:
        1.55;

    opacity:
        0.7;

}


/* =========================================================
   PRIX
========================================================= */

.assistant-package-card-price {

    margin-top:
        5px;

    font-size:
        0.95rem;

    font-weight:
        600;

    line-height:
        1.4;

    color:
        var(--project-primary);

}


/* =========================================================
   FORFAIT SÉLECTIONNÉ
========================================================= */

.assistant-package-option.is-selected
.assistant-package-card {

    border-color:
        var(--project-border-active);

    background:
        rgba(146, 0, 59, 0.04);

}


.assistant-package-option.is-selected
.assistant-package-card-radio {

    border:
        6px solid var(--project-primary);

}


/* =========================================================
   FOCUS CLAVIER
========================================================= */

.assistant-package-option input:focus-visible
+ .assistant-package-card {

    outline:
        2px solid var(--project-primary);

    outline-offset:
        3px;

}


/* =========================================================
   CONDITIONS / PRESTATIONS
========================================================= */

#assistant-main .estimation-conditions-list,
#assistant-main .estimation-services-list,
#assistant-main .estimation-optional-services {

    width:
        100%;

}


/* =========================================================
   TOTAL
========================================================= */

#assistant-estimation-total {

    margin-top:
        36px;

}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

.sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 640px) {

    #assistant-main
    .project-step-content {

        display:
            block;

    }


    #assistant-main
    .luvi-step-side {

        width:
            100%;

        display:
            flex;

        justify-content:
            center;

        margin-bottom:
            8px;

    }


    #assistant-main
    .step-heading {

        margin-bottom:
            30px;

    }


    #assistant-main
    .project-estimation-section {

        margin-bottom:
            30px;

    }


    #assistant-main
    .project-estimation-section-heading {

        margin-bottom:
            16px;

    }


    .assistant-package-list {

        gap:
            12px;

    }


    .assistant-package-card {

        padding:
            19px 20px;

        gap:
            15px;

    }


    .assistant-package-card-content strong {

        font-size:
            0.95rem;

    }


    .assistant-package-card-content small {

        font-size:
            0.85rem;

    }


    .assistant-package-card-price {

        font-size:
            0.9rem;

    }

}

/* =========================================================
   ASSISTANT — TOTAL STICKY
========================================================= */

#assistant-estimation-total-sticky {

    position:
        fixed;

    left:
        50%;

    bottom:
        24px;

    transform:
        translateX(-50%)
        translateY(20px);

    width:
        min(
            calc(100% - 40px),
            760px
        );

    z-index:
        1000;

    margin:
        0;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

}


#assistant-estimation-total-sticky.is-visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(-50%)
        translateY(0);

    pointer-events:
        auto;

}


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

@media (max-width: 640px) {

    #assistant-estimation-total-sticky {

        bottom:
            14px;

        width:
            calc(100% - 28px);

    }


    #assistant-estimation-total-sticky
    .project-estimation-total-content {

        gap:
            12px;

    }


    #assistant-estimation-total-sticky
    .project-estimation-total-price {

        font-size:
            1.35rem;

    }

}