/* ==================================================
   POPUP PROJET — 2 ÉTAPES / RESPONSIVE COMPLET
================================================== */

body.popup-open{
    overflow:hidden;
}

.project-popup,
.project-popup *,
.project-popup *::before,
.project-popup *::after,
.project-toast,
.project-toast *,
.project-toast *::before,
.project-toast *::after{
    box-sizing:border-box;
}

/* ==================================================
   CORRECTIONS SVG ET ALIGNEMENTS
================================================== */

.project-popup svg{
    display:block;
}

.project-benefit-icon,
.project-label-icon,
.project-left-phone > span,
.project-input-icon,
.project-security > span,
.summary-item-icon,
.project-ready > span,
.project-toast-icon{
    line-height:0;
}

.project-benefit-icon svg,
.project-label-icon svg,
.project-left-phone svg,
.project-input-icon svg,
.project-security svg,
.summary-item-icon svg,
.project-ready svg,
.project-toast-icon svg{
    margin:auto;
}

/* OVERLAY */

.project-popup{
    position:fixed;
    inset:0;
    z-index:9999999;

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

    padding:24px;
}

.project-popup.active{
    display:flex;
}

.project-popup-overlay{
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at 20% 15%,rgba(7,87,249,.16),transparent 30%),
        rgba(0,13,32,.80);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/* MODAL */

.project-popup-modal{
    position:relative;
    z-index:2;

    width:min(1100px,calc(100vw - 48px));
    max-height:calc(100dvh - 48px);

    overflow:hidden;

    border:1px solid rgba(255,255,255,.16);
    border-radius:26px;

    background:#fff;

    box-shadow:
        0 40px 110px rgba(0,0,0,.40),
        0 0 0 1px rgba(255,255,255,.08);

    animation:projectPopupIn .38s cubic-bezier(.22,.61,.36,1);
}

@keyframes projectPopupIn{
    from{
        opacity:0;
        transform:translateY(24px) scale(.97);
    }

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

/* CLOSE */

.project-popup-close{
    position:absolute;
    top:18px;
    right:18px;
    z-index:20;

    width:40px;
    height:40px;
    padding:0;

    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;

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

    color:#fff;
    background: radial-gradient(circle at 50% 0, rgba(37, 99, 235, .40), transparent 38%), linear-gradient(145deg, #000d20 0%, #00183f 56%, #002762 100%);

    cursor:pointer;

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

.project-popup-close svg{
    width:19px;
    height:19px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.project-popup-close:hover{
    color:#000d20;
    background:#fff;
    border-color:#fff;
    transform:rotate(90deg);
}

/* LAYOUT */

.project-popup-main{
    display:grid;
    grid-template-columns:340px minmax(0,1fr);

    max-height:calc(100dvh - 48px);
    overflow:hidden;
}

/* ==================================================
   COLONNE GAUCHE
================================================== */

.project-popup-left{
    position:relative;

    padding:34px 30px;

    overflow-y:auto;

    color:#fff;

    background:
        radial-gradient(circle at 20% 10%,rgba(37,99,235,.28),transparent 30%),
        linear-gradient(145deg,#000b1c,#000d20 52%,#001b47);
}

.project-popup-left::after{
    content:"";

    position:absolute;
    right:-175px;
    bottom:-175px;

    width:390px;
    height:390px;

    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;

    box-shadow:
        0 0 0 42px rgba(255,255,255,.018),
        0 0 0 84px rgba(255,255,255,.010);

    pointer-events:none;
}

.project-popup-left > *{
    position:relative;
    z-index:2;
}

.project-popup-label{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:31px;

    color:#75a5ff;

    font-size:12px;
    font-weight:900;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.project-label-icon{
    width:43px;
    height:43px;
    flex:0 0 43px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

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

    color:#fff;

    background:linear-gradient(145deg,#2879ff,#0757f9);

    box-shadow:0 14px 30px rgba(7,87,249,.28);
}

.project-label-icon svg{
    width:21px;
    height:21px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.project-popup-left h2{
    margin:0 0 18px;

    color:#fff;

    font-size:40px;
    font-weight:950;
    line-height:1.08;
    letter-spacing:-1.3px;
}

.project-popup-left h2 span{
    color:#4d8cff;
}

.project-popup-left > p{
    margin:0;
    padding-bottom:0 !important;

    color:rgba(255,255,255,.70);

    font-size:14px;
    font-weight:500;
    line-height:1.65;
}

/* BENEFITS */

.project-popup-benefits{
    display:flex;
    flex-direction:column;
    gap:24px;

    margin-top:34px;
}

.project-benefit{
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    align-items:center;
    gap:16px;

    min-width:0;
}

.project-benefit-icon{
    width:56px;
    height:56px;
    min-width:56px;
    min-height:56px;
    flex:0 0 56px;

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

    border:1px solid rgba(77,140,255,.22);
    border-radius:50%;

    color:#76a6ff;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.10),
            transparent 38%
        ),
        rgba(7,87,249,.11);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 28px rgba(0,0,0,.12);

    overflow:hidden;

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

.project-benefit-icon svg{
    width:26px;
    height:26px;
    flex:0 0 26px;

    display:block;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;

    overflow:visible;
}

.project-benefit > div{
    min-width:0;
}

.project-benefit strong{
    display:block;

    margin:0 0 5px;

    color:#ffffff;

    font-size:14px;
    font-weight:900;
    line-height:1.3;
}

.project-benefit > div > span{
    display:block;

    margin:0;

    color:rgba(255,255,255,.60);

    font-size:12.5px;
    font-weight:500;
    line-height:1.5;
}

.project-benefit:hover .project-benefit-icon{
    color:#ffffff;

    border-color:rgba(77,140,255,.42);

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.20),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #2879ff,
            #0757f9
        );

    transform:translateY(-3px);

    box-shadow:
        0 16px 34px rgba(7,87,249,.26),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* PHONE */

.project-left-phone{
    margin-top:34px;
    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.10);

    display:flex;
    align-items:center;
    gap:14px;
}

.project-left-phone > span{
    width:43px;
    height:43px;
    flex:0 0 43px;

    border-radius:50%;

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

    color:#fff;
    background:#0757f9;

    box-shadow:0 14px 28px rgba(7,87,249,.28);
}

.project-left-phone svg{
    width:21px;
    height:21px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.project-left-phone small,
.project-left-phone strong{
    display:block;
}

.project-left-phone small{
    margin-bottom:3px;

    color:rgba(255,255,255,.50);

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

.project-left-phone strong a{
    color:#fff;

    font-size:14px;
    font-weight:900;
    text-decoration:none;
}

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

.project-popup-form{
    min-width:0;

    padding:30px 44px 32px;

    overflow-y:auto;
    overscroll-behavior:contain;

    background:
        radial-gradient(circle at 100% 0,rgba(7,87,249,.05),transparent 26%),
        #fff;

    scrollbar-width:thin;
    scrollbar-color:rgba(7,87,249,.22) transparent;
}

.project-popup-form::-webkit-scrollbar{
    width:6px;
}

.project-popup-form::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(7,87,249,.22);
}

/* PROGRESS */

.project-steps{
    position:relative;

    max-width:460px;
    margin:0 auto 28px;

    display:flex;
    justify-content:space-between;
}

.project-progress-line{
    position:absolute;
    top:17px;
    left:38px;
    right:38px;

    height:3px;

    overflow:hidden;

    border-radius:999px;

    background:#dfe6f1;
}

.project-progress{
    display:block;

    width:0;
    height:100%;

    border-radius:inherit;

    background:linear-gradient(90deg,#0757f9,#4d8cff);

    transition:width .35s ease;
}

.project-step-indicator{
    position:relative;
    z-index:2;

    min-width:90px;

    text-align:center;

    color:#7a879b;

    font-size:11px;
    font-weight:700;
}

.project-step-indicator > span{
    width:36px;
    height:36px;

    margin:0 auto 8px;

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

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

    color:#000d20;
    background:#fff;

    font-size:12px;
    font-weight:900;

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

.project-step-indicator.active > span,
.project-step-indicator.done > span{
    color:#fff;
    border-color:#0757f9;
    background:#0757f9;

    box-shadow:0 10px 23px rgba(7,87,249,.22);
}

.project-step-indicator.done > span{
    font-size:0;
}

.project-step-indicator.done > span::before{
    content:"✓";
    font-size:13px;
}

.project-step-indicator.active small{
    color:#0757f9;
    font-weight:900;
}

/* STEPS */

.project-step{
    display:none;
}

.project-step.active{
    display:block;
    animation:projectStepIn .3s ease;
}

@keyframes projectStepIn{
    from{
        opacity:0;
        transform:translateX(12px);
    }

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

.project-step-heading{
    margin-bottom:24px;
}

.project-step-heading > span{
    display:block;

    margin-bottom:6px;

    color:#0757f9;

    font-size:10px;
    font-weight:900;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.project-step-heading h3{
    margin:0 0 8px;

    color:#000d20;

    font-size:28px;
    font-weight:950;
    line-height:1.18;
    letter-spacing:-.6px;
}

.project-step-heading p{
    max-width:620px;

    margin:0;
    padding-bottom:0 !important;

    color:#647289;

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

/* FIELDS */

.project-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px 20px;
}

.project-field{
    min-width:0;
}

.project-field-full{
    grid-column:1 / -1;
}

.project-field label{
    display:block;

    margin-bottom:7px;

    color:#000d20;

    font-size:12.5px;
    font-weight:900;
    line-height:1.35;
}

.project-field label span{
    color:#0757f9;
}

.project-input-wrap,
.project-textarea-wrap{
    position:relative;
}

.project-input-icon{
    position:absolute;
    top:50%;
    left:15px;
    z-index:2;

    width:20px;
    height:20px;

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

    color:#8b97a9;

    transform:translateY(-50%);

    pointer-events:none;
}

.project-input-icon svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.project-field input,
.project-field textarea{
    width:100%;

    border:1.5px solid #d4dce9;
    border-radius:11px;

    color:#000d20;
    background:#fff;

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

    outline:none;

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

.project-field input{
    height:52px;
    padding:0 15px 0 49px;
}

.project-field textarea{
    min-height:145px;
    padding:14px 16px 36px;

    line-height:1.6;

    resize:vertical;
}

.project-field input::placeholder,
.project-field textarea::placeholder{
    color:#9ba5b5;
    font-weight:500;
    opacity:1;
}

.project-field input:focus,
.project-field textarea:focus{
    border-color:#0757f9;

    box-shadow:0 0 0 4px rgba(7,87,249,.09);
}

.project-input-wrap:focus-within .project-input-icon{
    color:#0757f9;
}

.project-field input.is-error,
.project-field textarea.is-error{
    border-color:#dc2626;
    background:#fff8f8;

    box-shadow:0 0 0 4px rgba(220,38,38,.08);
}

.project-character-count{
    position:absolute;
    right:13px;
    bottom:10px;

    color:#8a95a7;

    font-size:10px;
    font-weight:700;
}

.field-error{
    display:none;

    margin-top:5px;

    color:#dc2626;

    font-size:11px;
    font-weight:750;
    line-height:1.4;
}

.project-field.has-error .field-error{
    display:block;
}

/* SECURITY */

.project-security{
    margin-top:18px;
    padding:14px 16px;

    border:1px solid #dce8ff;
    border-radius:11px;

    display:flex;
    gap:12px;

    color:#000d20;
    background:#f4f8ff;
}

.project-security > span{
    width:34px;
    height:34px;
    flex:0 0 34px;

    border-radius:50%;

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

    color:#0757f9;
    background:#e8f1ff;
}

.project-security svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.project-security strong,
.project-security small{
    display:block;
}

.project-security strong{
    margin-bottom:2px;

    font-size:12px;
    font-weight:900;
}

.project-security small{
    color:#657389;

    font-size:10.5px;
    font-weight:500;
    line-height:1.45;
}

/* ACTIONS */

.project-actions{
    margin-top:20px;
    justify-self: right;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.project-actions-right{
    justify-content:flex-end;
}

.project-btn-primary,
.project-btn-secondary{
    min-height:54px;
    padding:0 24px;

    border-radius:11px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    cursor:pointer;

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

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

.project-btn-primary{
    min-width:210px;

    border:0;

    color:#fff;

    background:linear-gradient(135deg,#1f73ff,#0757f9 58%,#0048d5);

    box-shadow:
        0 16px 35px rgba(7,87,249,.26),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.project-btn-primary:hover{
    transform:translateY(-3px);

    box-shadow:
        0 22px 44px rgba(7,87,249,.34),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.project-btn-secondary{
    min-width:150px;

    border:1px solid rgba(7,87,249,.24);

    color:#0757f9;
    background:#fff;
}

.project-btn-secondary:hover{
    color:#0048d5;
    background:#f4f8ff;

    transform:translateY(-2px);
}

.project-actions svg{
    width:19px;
    height:19px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* SUMMARY */

.project-summary-card{
    padding:18px;

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

    background:linear-gradient(145deg,#f9fbff,#f3f7ff);
}

.project-summary{
    display:grid;
    gap:11px;
}

.summary-item{
    min-width:0;

    padding:13px;

    border:1px solid rgba(7,87,249,.08);
    border-radius:12px;

    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:12px;
    align-items:flex-start;

    background:#fff;
}

.summary-item-icon{
    width:40px;
    height:40px;

    border-radius:50%;

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

    color:#0757f9;
    background:#edf4ff;
}

.summary-item-icon svg{
    width:20px;
    height:20px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.summary-item-content{
    min-width:0;
}

.summary-item-content strong,
.summary-item-content span{
    display:block;
}

.summary-item-content strong{
    margin-bottom:4px;

    color:#0757f9;

    font-size:9.5px;
    font-weight:900;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.summary-item-content span{
    color:#000d20;

    font-size:13px;
    font-weight:650;
    line-height:1.5;

    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.summary-item-project{
    align-items:flex-start;
}

/* READY */

.project-ready{
    margin-top:14px;
    padding:13px 15px;

    border:1px solid #ccefd8;
    border-radius:11px;

    display:flex;
    gap:12px;

    color:#047857;
    background:#eefcf3;
}

.project-ready > span{
    width:32px;
    height:32px;
    flex:0 0 32px;

    border:2px solid currentColor;
    border-radius:50%;

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

.project-ready svg{
    width:16px;
    height:16px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.project-ready strong,
.project-ready small{
    display:block;
}

.project-ready strong{
    margin-bottom:2px;

    color:#065f46;

    font-size:12px;
    font-weight:900;
}

.project-ready small{
    color:#33735d;

    font-size:10.5px;
    line-height:1.45;
}

/* LOADER / SUCCESS */

.project-submit-loader{
    display:none;

    width:20px;
    height:20px;

    border:3px solid rgba(255,255,255,.34);
    border-top-color:#fff;
    border-radius:50%;

    animation:projectLoader .8s linear infinite;
}

.project-submit.is-loading .project-submit-text,
.project-submit.is-loading .project-submit-icon{
    display:none;
}

.project-submit.is-loading .project-submit-loader{
    display:block;
}

@keyframes projectLoader{
    to{
        transform:rotate(360deg);
    }
}

.project-success{
    display:none;

    margin-top:14px;
    padding:14px 16px;

    border:1px solid #ccefd8;
    border-radius:11px;

    color:#065f46;
    background:#eefcf3;
}

.project-success.active{
    display:block;
}

.project-success strong,
.project-success span{
    display:block;
}

.project-success strong{
    margin-bottom:3px;
    font-size:13px;
}

.project-success span{
    font-size:11px;
}

/* TOAST */

.project-toast{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:99999999;

    width:min(420px,calc(100vw - 32px));
    padding:17px 19px;

    border:1px solid rgba(7,87,249,.12);
    border-radius:17px;

    display:flex;
    align-items:flex-start;
    gap:13px;

    color:#000d20;
    background:#fff;

    box-shadow:0 25px 70px rgba(0,13,32,.22);

    opacity:0;
    visibility:hidden;

    transform:translateY(18px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;
}

.project-toast.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.project-toast-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;

    border-radius:50%;

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

    color:#fff;
    background:#22a45d;
}

.project-toast-icon svg{
    width:19px;
    height:19px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.project-toast strong,
.project-toast span{
    display:block;
}

.project-toast strong{
    margin-bottom:3px;

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

.project-toast span{
    color:#5b6a80;

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

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

@media(max-width:960px){

    .project-popup{
        padding:18px;
    }

    .project-popup-modal{
        width:min(720px,calc(100vw - 36px));
        max-height:calc(100dvh - 36px);
    }

    .project-popup-main{
        grid-template-columns:1fr;
        max-height:calc(100dvh - 36px);
        overflow-y:auto;
    }

    .project-popup-left{
        min-height:auto;
        padding:27px 62px 25px 28px;
        overflow:visible;
    }

    .project-popup-left h2{
        max-width:500px;
        font-size:31px;
    }

    .project-popup-left > p{
        max-width:570px;
    }

    .project-popup-benefits{
        display:none;
    }

    .project-left-phone{
        margin-top:20px;
        padding-top:18px;
    }

    .project-popup-form{
        overflow:visible;
        padding:28px;
    }

}

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

@media(max-width:640px){

    .project-popup{
        padding:12px;
        align-items:center;
    }

    .project-popup-modal{
        width:min(470px,calc(100vw - 24px));
        max-height:calc(100dvh - 24px);

        border-radius:20px;
    }

    .project-popup-main{
        max-height:calc(100dvh - 24px);
    }

    .project-popup-close{
        top:11px;
        right:11px;

        width:36px;
        height:36px;
    }

    .project-popup-left{
        padding:22px 54px 21px 20px;
    }

    .project-popup-label{
        margin-bottom:18px;

        font-size:9px;
        letter-spacing:1.4px;
    }

    .project-label-icon{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .project-label-icon svg{
        width:18px;
        height:18px;
    }

    .project-popup-left h2{
        margin-bottom:10px;

        font-size:25px;
        letter-spacing:-.7px;
    }

    .project-popup-left > p{
        font-size:12px;
        line-height:1.5;
    }

    .project-left-phone{
        margin-top:15px;
        padding-top:14px;
    }

    .project-left-phone > span{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .project-left-phone small{
        font-size:9px;
    }

    .project-left-phone strong a{
        font-size:12.5px;
    }

    .project-popup-form{
        padding:21px 17px 22px;
    }

    .project-steps{
        max-width:320px;
        margin-bottom:22px;
    }

    .project-step-heading{
        margin-bottom:19px;
    }

    .project-step-heading h3{
        font-size:22px;
    }

    .project-step-heading p{
        font-size:12px;
    }

    .project-form-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .project-field-full{
        grid-column:auto;
    }

    .project-field input{
        height:50px;
        font-size:16px;
    }

    .project-field textarea{
        min-height:130px;
        font-size:16px;
    }

    .project-actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .project-btn-primary,
    .project-btn-secondary{
        width:100%;
        min-width:0;
    }

    .project-security{
        padding:12px 13px;
    }

    .project-toast{
        right:14px;
        bottom:14px;
        left:14px;
        width:auto;
    }

}

/* ==================================================
   RESPONSIVE — PETITS MOBILES
================================================== */

@media(max-width:380px){

    .project-popup{
        padding:8px;
    }

    .project-popup-modal{
        width:calc(100vw - 16px);
        max-height:calc(100dvh - 16px);
        border-radius:17px;
    }

    .project-popup-main{
        max-height:calc(100dvh - 16px);
    }

    .project-popup-left{
        padding:19px 49px 18px 16px;
    }

    .project-popup-left h2{
        font-size:22px;
    }

    .project-popup-left > p{
        font-size:11.5px;
    }

    .project-left-phone{
        display:none;
    }

    .project-popup-form{
        padding:18px 14px 19px;
    }

    .project-step-indicator{
        min-width:74px;
        font-size:9.5px;
    }

    .project-step-heading h3{
        font-size:20px;
    }

    .project-field textarea{
        min-height:115px;
    }

    .project-ready{
        padding:11px 12px;
    }

}

/* ÉCRANS PEU HAUTS */

@media(max-height:700px) and (min-width:641px){

    .project-popup{
        padding:12px;
    }

    .project-popup-modal,
    .project-popup-main{
        max-height:calc(100dvh - 24px);
    }

    .project-popup-left{
        padding-top:24px;
        padding-bottom:24px;
    }

    .project-popup-benefits{
        gap:14px;
    }

    .project-popup-form{
        padding-top:22px;
        padding-bottom:22px;
    }

    .project-steps{
        margin-bottom:20px;
    }

    .project-step-heading{
        margin-bottom:17px;
    }

    .project-field textarea{
        min-height:105px;
    }

}

/* FALLBACK */

@supports not (height:100dvh){

    .project-popup-modal{
        max-height:calc(100vh - 48px);
    }

    .project-popup-main{
        max-height:calc(100vh - 48px);
    }

    @media(max-width:960px){

        .project-popup-modal,
        .project-popup-main{
            max-height:calc(100vh - 36px);
        }

    }

    @media(max-width:640px){

        .project-popup-modal,
        .project-popup-main{
            max-height:calc(100vh - 24px);
        }

    }

}

/* ACCESSIBILITÉ */

@media(prefers-reduced-motion:reduce){

    .project-popup-modal,
    .project-step,
    .project-progress,
    .project-btn-primary,
    .project-btn-secondary,
    .project-toast{
        animation:none !important;
        transition:none !important;
    }

}