/* ==================================================
   CALLBACK POPUP — PREMIUM
================================================== */

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

    padding:28px;

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

    overflow-y:auto;

    background:rgba(0,13,32,.74);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

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

.callback-popup-overlay::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(7,87,249,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 84% 80%,
            rgba(37,99,235,.13),
            transparent 30%
        );
}

.callback-popup-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* ==================================================
   POPUP
================================================== */

.callback-popup{
    position:relative;
    z-index:2;

    width:100%;
    max-width:590px;
    max-height:calc(100vh - 56px);
    max-height:calc(100dvh - 56px);

    overflow-x:hidden;
    overflow-y:auto;

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

    background:#ffffff;

    text-align:center;

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

    opacity:0;

    transform:
        translateY(28px)
        scale(.955);

    transition:
        transform .42s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease;

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

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

.callback-popup::-webkit-scrollbar-track{
    background:transparent;
}

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

.callback-popup-overlay.is-open .callback-popup{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}

/* ==================================================
   FERMETURE
================================================== */

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

    width:42px;
    height:42px;

    padding:0;

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

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

    color:#ffffff;
    background:rgba(255,255,255,.08);

    cursor:pointer;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

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

.callback-popup-close svg{
    width:20px;
    height:20px;

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

.callback-popup-close:hover{
    color:#000d20;
    background:#ffffff;
    border-color:#ffffff;

    transform:rotate(90deg);
}

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

.callback-popup-header{
    position:relative;

    min-height:330px;

    padding:38px 52px 42px;

    overflow:hidden;

    display:flex;
    flex-direction:column;
    align-items:center;

    color:#ffffff;

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

.callback-popup-header::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.07),
            transparent 36%
        );
}

/* Cercles décoratifs */

.callback-popup-header-orbit{
    position:absolute;

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

    pointer-events:none;

    animation:callbackOrbit 22s linear infinite;
}

.callback-popup-header-orbit-one{
    top:-170px;
    right:-120px;

    width:380px;
    height:380px;
}

.callback-popup-header-orbit-two{
    bottom:-210px;
    left:-150px;

    width:420px;
    height:420px;

    animation-duration:29s;
    animation-direction:reverse;
}

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

.callback-popup-icon{
    position:relative;
    z-index:3;

    width:88px;
    height:88px;
    flex:0 0 88px;

    margin:0 auto 21px;

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

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

    color:#ffffff;

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

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

    animation:callbackIconFloat 5.5s ease-in-out infinite;
}

.callback-popup-icon svg{
    width:43px;
    height:43px;

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

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

.callback-popup-label{
    position:relative;
    z-index:3;

    display:inline-flex;
    align-items:center;
    gap:11px;

    margin-bottom:12px;

    color:#69a0ff;

    font-size:11px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:2.8px;
    text-transform:uppercase;
}

.callback-popup-label::before,
.callback-popup-label::after{
    content:"";

    width:25px;
    height:1.5px;

    border-radius:999px;
    background:#4d8cff;

    box-shadow:0 0 12px rgba(77,140,255,.55);
}

.callback-popup h2{
    position:relative;
    z-index:3;

    max-width:470px;

    margin:0 0 15px;

    color:#ffffff;

    font-size:36px;
    font-weight:900;
    line-height:1.1;
    letter-spacing:-1px;
}

.callback-popup h2 span{
    display:block;
    color:#4d8cff;
}

.callback-popup-intro{
    position:relative;
    z-index:3;

    max-width:455px;

    margin:0 auto 22px;
    padding-bottom:0 !important;

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

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

/* ==================================================
   BÉNÉFICES HEADER
================================================== */

.callback-popup-benefits{
    position:relative;
    z-index:3;

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

    flex-wrap:wrap;
}

.callback-popup-benefit{
    min-height:38px;
    padding:0 14px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;

    display:inline-flex;
    align-items:center;
    gap:8px;

    color:rgba(255,255,255,.90);
    background:rgba(255,255,255,.06);

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

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

.callback-popup-benefit svg{
    width:16px;
    height:16px;

    fill:none;
    stroke:#69a0ff;
    stroke-width:2.3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ==================================================
   BODY
================================================== */

.callback-popup-body{
    padding:31px 42px 30px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(7,87,249,.045),
            transparent 30%
        ),
        #ffffff;
}

/* ==================================================
   EMAIL
================================================== */

.callback-popup-email{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;

    margin:0 auto 24px;
}

.callback-popup-email-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;

    border-radius:50%;

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

    color:#0757f9;
    background:#edf4ff;

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

.callback-popup-email-icon svg{
    width:21px;
    height:21px;

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

.callback-popup-email > div{
    text-align:left;
}

.callback-popup-email small{
    display:block;

    margin-bottom:2px;

    color:#78859a;

    font-size:11px;
    font-weight:650;
    line-height:1.3;
}

.callback-popup-email a{
    color:#000d20;

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

    transition:color .25s ease;
}

.callback-popup-email a:hover{
    color:#0757f9;
}

/* ==================================================
   SÉPARATEUR
================================================== */

.callback-popup-separator{
    position:relative;

    width:100%;
    height:1px;

    margin:0 0 25px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,13,32,.12),
            transparent
        );
}

.callback-popup-separator span{
    position:absolute;
    top:50%;
    left:50%;

    padding:0 12px;

    color:#8995a6;
    background:#ffffff;

    font-size:10px;
    font-weight:800;
    text-transform:uppercase;

    transform:translate(-50%,-50%);
}

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

.callback-popup-form{
    display:flex;
    flex-direction:column;
    gap:19px;

    text-align:left;
}

.callback-popup-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.callback-popup-form label{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:8px;
}

.callback-field-label{
    color:#000d20;

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

.callback-field-label small{
    color:#0757f9;
    font:inherit;
}

.callback-input-wrap{
    position:relative;

    display:block;
}

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

    width:21px;
    height:21px;

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

    color:#8a96a8;

    transform:translateY(-50%);

    pointer-events:none;
}

.callback-input-icon svg{
    width:19px;
    height:19px;

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

.callback-popup-form input{
    width:100%;
    height:57px;

    padding:0 15px 0 47px;

    border:1px solid rgba(0,13,32,.13);
    border-radius:11px;

    color:#000d20;
    background:#fbfcff;

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

    outline:none;

    box-shadow:
        inset 0 1px 2px rgba(0,13,32,.025);

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

.callback-popup-form input::placeholder{
    color:rgba(0,13,32,.38);
    font-weight:500;
}

.callback-popup-form input:hover{
    border-color:rgba(7,87,249,.24);
    background:#ffffff;
}

.callback-popup-form input:focus{
    border-color:#0757f9;
    background:#ffffff;

    box-shadow:
        0 0 0 4px rgba(7,87,249,.10),
        inset 0 1px 2px rgba(0,13,32,.02);
}

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

/* ==================================================
   BOUTON
================================================== */

.callback-popup-submit{
    position:relative;

    width:100%;
    height:62px;

    margin-top:1px;
    padding:0 24px;

    overflow:hidden;

    border:0;
    border-radius:11px;

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

    color:#ffffff;

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

    cursor:pointer;

    box-shadow:
        0 18px 38px rgba(7,87,249,.28),
        inset 0 1px 0 rgba(255,255,255,.20);

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

.callback-popup-submit::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,.20) 48%,
            transparent 66%
        );

    transform:translateX(-115%);

    transition:transform .6s ease;
}

.callback-popup-submit:hover::before{
    transform:translateX(115%);
}

.callback-popup-submit:hover{
    transform:translateY(-3px);

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

    box-shadow:
        0 24px 48px rgba(7,87,249,.38),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.callback-btn-text{
    position:relative;
    z-index:2;

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

    color:#ffffff;

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

.callback-btn-text svg{
    width:22px;
    height:22px;

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

    transition:transform .3s ease;
}

.callback-popup-submit:hover .callback-btn-text svg{
    transform:translateX(5px);
}

/* ==================================================
   SÉCURITÉ
================================================== */

.callback-popup-secure{
    max-width:450px;

    margin:22px auto 0;

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

    color:#748197;

    font-size:10.5px;
    font-weight:600;
    line-height:1.45;
    text-align:left;
}

.callback-popup-secure-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;

    border-radius:50%;

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

    color:#0757f9;
    background:#edf4ff;

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

.callback-popup-secure svg{
    width:16px;
    height:16px;

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

/* ==================================================
   LOADER
================================================== */

.callback-loader{
    position:relative;
    z-index:3;

    display:none;

    width:23px;
    height:23px;

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

    animation:callbackSpin .8s linear infinite;
}

.callback-popup-submit.is-loading .callback-btn-text{
    display:none;
}

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

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

/* ==================================================
   ERREURS
================================================== */

.callback-popup-form label.has-error input{
    border-color:#ef4444;
    background:#fff8f8;

    box-shadow:
        0 0 0 4px rgba(239,68,68,.09);
}

.callback-popup-form label.has-error
.callback-input-icon{
    color:#ef4444;
}

.callback-field-error{
    margin-top:1px;

    color:#ef4444;

    font-size:11.5px;
    font-weight:750;
    line-height:1.4;

    animation:callbackErrorIn .25s ease;
}

@keyframes callbackErrorIn{
    from{
        opacity:0;
        transform:translateY(-4px);
    }

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

/* ==================================================
   BODY LOCK
================================================== */

body.callback-popup-open{
    overflow:hidden;
}

/* ==================================================
   TOAST
================================================== */

.callback-toast{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:99999999;

    width:min(440px,calc(100vw - 36px));

    padding:18px 20px;

    overflow:hidden;

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

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

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(7,87,249,.06),
            transparent 34%
        ),
        rgba(255,255,255,.98);

    box-shadow:
        0 26px 75px rgba(0,13,32,.23),
        inset 0 1px 0 rgba(255,255,255,.95);

    opacity:0;
    visibility:hidden;

    transform:
        translateY(20px)
        scale(.97);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s cubic-bezier(.22,.61,.36,1);
}

.callback-toast::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

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

.callback-toast.is-visible{
    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        scale(1);
}

.callback-toast-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;

    border-radius:50%;

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

    color:#ffffff;

    background:
        linear-gradient(
            145deg,
            #38b96c,
            #1f9853
        );

    box-shadow:
        0 12px 26px rgba(31,152,83,.24);
}

.callback-toast-icon svg{
    width:20px;
    height:20px;

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

.callback-toast-content{
    min-width:0;
}

.callback-toast strong{
    display:block;

    margin:0 0 4px;

    color:#000d20;

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

.callback-toast p{
    margin:0;
    padding-bottom:0 !important;

    color:#5e6d84;

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

/* ==================================================
   ANIMATIONS DÉCORATIVES
================================================== */

@keyframes callbackOrbit{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes callbackIconFloat{
    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }
}

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

@media(max-width:768px){

    .callback-popup-overlay{
        padding:16px;
        align-items:flex-start;
    }

    .callback-popup{
        max-height:calc(100vh - 32px);
        max-height:calc(100dvh - 32px);
        margin:auto 0;

        border-radius:22px;
    }

    .callback-popup-header{
        min-height:auto;
        padding:34px 24px 35px;
    }

    .callback-popup-close{
        top:14px;
        right:14px;

        width:39px;
        height:39px;
    }

    .callback-popup-icon{
        width:76px;
        height:76px;
        flex-basis:76px;

        margin-bottom:19px;
    }

    .callback-popup-icon svg{
        width:37px;
        height:37px;
    }

    .callback-popup h2{
        font-size:29px;
    }

    .callback-popup-intro{
        font-size:14px;
    }

    .callback-popup-body{
        padding:27px 22px 26px;
    }

    .callback-popup-fields{
        grid-template-columns:1fr;
        gap:15px;
    }

    .callback-popup-email{
        justify-content:flex-start;
    }

    .callback-popup-submit{
        height:59px;
    }

    .callback-toast{
        right:18px;
        bottom:18px;
        left:18px;

        width:auto;
    }

}

@media(max-width:430px){

    .callback-popup-overlay{
        padding:10px;
    }

    .callback-popup{
        max-height:calc(100vh - 20px);
        max-height:calc(100dvh - 20px);
    }

    .callback-popup-header{
        padding:
            30px
            18px
            31px;
    }

    .callback-popup-label{
        font-size:9.5px;
        letter-spacing:2px;
    }

    .callback-popup-label::before,
    .callback-popup-label::after{
        width:18px;
    }

    .callback-popup h2{
        font-size:26px;
    }

    .callback-popup-benefit{
        padding:0 11px;
        font-size:10.5px;
    }

    .callback-popup-body{
        padding:24px 17px;
    }

    .callback-popup-email a{
        font-size:13px;
    }

}

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

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

    .callback-popup,
    .callback-popup-overlay,
    .callback-popup-close,
    .callback-popup-submit,
    .callback-toast,
    .callback-popup-icon,
    .callback-popup-header-orbit{
        animation:none !important;
        transition:none !important;
    }

}

/* ==================================================
   AJUSTEMENTS POPUP CALLBACK
================================================== */

/* Popup un peu plus compact */

.callback-popup{
    width:min(560px,100%);
}

/* Header moins haut */

.callback-popup-header{
    min-height:auto;

    padding:28px 44px 32px;
}

/* Icône principale légèrement réduite */

.callback-popup-icon{
    width:76px;
    height:76px;
    flex-basis:76px;
    margin-bottom:17px;
}

.callback-popup-icon svg{
    width:37px;
    height:37px;
}

/* Label plus discret */

.callback-popup-label{
    margin-bottom:10px;
    font-size:10px;
    letter-spacing:2.5px;
}

/* Titre légèrement réduit */

.callback-popup h2{
    max-width:460px;
    margin-bottom:13px;

    font-size:clamp(21px,4vw,33px);

    line-height:1.08;
}

/* Texte d’introduction plus compact */

.callback-popup-intro{
    max-width:440px;
    margin-bottom:18px;

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

/* Petites pastilles */

.callback-popup-benefit{
    min-height:34px;
    padding:0 13px;

    font-size:10.5px;
}

/* Bouton fermer plus fin et plus rond */

.callback-popup-close{
    top:16px;
    right:16px;

    width:38px;
    height:38px;

    border-radius:10px;
}

.callback-popup-close svg{
    width:18px;
    height:18px;
}

/* Corps moins haut */

.callback-popup-body{
    padding:25px 36px 25px;
}

/* Email plus compact */

.callback-popup-email{
    margin-bottom:20px;
}

.callback-popup-email-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
}

.callback-popup-email-icon svg{
    width:19px;
    height:19px;
}

.callback-popup-email small{
    font-size:10px;
}

.callback-popup-email a{
    font-size:13.5px;
}

/* Séparateur */

.callback-popup-separator{
    margin-bottom:21px;
}

/* Champs */

.callback-popup-fields{
    gap:16px;
}

.callback-popup-form{
    gap:16px;
}

.callback-popup-form label{
    gap:7px;
}

.callback-field-label{
    font-size:12px;
}

/*
 * Correction importante :
 * l’icône ne doit plus toucher le texte du placeholder.
 */

.callback-input-icon{
    left:16px;

    width:20px;
    height:20px;
}

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

.callback-popup-form input{
    height:54px;

    /*
     * Plus d’espace après l’icône.
     */
    padding:0 14px 0 52px;

    background:#ffffff;

    font-size:14px;
}

/*
 * Même couleur pour les deux champs.
 * Certains navigateurs donnent un fond différent au téléphone.
 */

.callback-popup-form input[type="text"],
.callback-popup-form input[type="tel"]{
    background:#ffffff !important;
    color:#000d20;
    opacity:1;
}

.callback-popup-form input::placeholder{
    color:#9ca5b3;
    opacity:1;
}

/*
 * Supprime certains styles automatiques
 * appliqués par Chrome/Safari.
 */

.callback-popup-form input:-webkit-autofill,
.callback-popup-form input:-webkit-autofill:hover,
.callback-popup-form input:-webkit-autofill:focus{
    -webkit-text-fill-color:#000d20;
    -webkit-box-shadow:0 0 0 1000px #ffffff inset;
    transition:background-color 9999s ease-out 0s;
}

/* Bouton principal plus compact */

.callback-popup-submit{
    height:58px;
    margin-top:0;
}

.callback-btn-text{
    font-size:14px;
}

/* Sécurité plus proche du bouton */

.callback-popup-secure{
    margin-top:17px;
    gap:9px;

    font-size:10px;
}

.callback-popup-secure-icon{
    width:28px;
    height:28px;
    flex-basis:28px;
}

/* Responsive */

@media(max-width:768px){

    .callback-popup{
        max-width:520px;
    }

    .callback-popup-header{
        padding:27px 22px 29px;
    }

    .callback-popup h2{
        font-size:28px;
    }

    .callback-popup-body{
        padding:24px 20px;
    }

    .callback-popup-fields{
        grid-template-columns:1fr;
    }

}

/* ==================================================
   RESPONSIVE PREMIUM
================================================== */

@media (max-width:900px){

    .callback-popup-overlay{
        padding:14px;
        align-items:flex-start;
    }

    .callback-popup{
        width:100%;
        max-width:640px;
        max-height:calc(100vh - 28px);
        max-height:calc(100dvh - 28px);
        margin:auto;
    }

}

@media (max-width:768px){

    .callback-popup{
        border-radius:22px;
    }

    .callback-popup-header{
        padding:26px 22px 28px;
    }

    .callback-popup-body{
        padding:22px;
    }

    .callback-popup-fields{
        grid-template-columns:1fr;
    }

    .callback-popup-email{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

    .callback-popup-email>div{
        text-align:center;
    }

    .callback-popup-benefits{
        justify-content:center;
    }

    .callback-popup-submit{
        height:56px;
    }

}

@media (max-width:600px){

    .callback-popup-overlay{
        padding:10px;
    }

    .callback-popup{

        width:100%;
        max-width:none;

        max-height:calc(100vh - 20px);
        max-height:calc(100dvh - 20px);

        border-radius:18px;
    }

    .callback-popup-close{

        top:12px;
        right:12px;

        width:38px;
        height:38px;
    }

    .callback-popup-header{

        padding:
            26px
            18px
            24px;
    }

    .callback-popup-icon{

        width:66px;
        height:66px;
        flex-basis:66px;

        margin-bottom:16px;
    }

    .callback-popup-icon svg{

        width:32px;
        height:32px;
    }

    .callback-popup h2{

        font-size:24px;
        line-height:1.15;
    }

    .callback-popup-intro{

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

    .callback-popup-benefits{

        flex-direction:column;
        gap:10px;
    }

    .callback-popup-benefit{

        width:100%;
        justify-content:center;
    }

    .callback-popup-body{

        padding:18px;
    }

    .callback-popup-email{

        margin-bottom:18px;
    }

    .callback-popup-email a{

        word-break:break-word;
    }

    .callback-popup-form{

        gap:15px;
    }

    .callback-popup-form input{

        height:52px;
        font-size:16px;
    }

    .callback-popup-submit{

        height:54px;
    }

    .callback-btn-text{

        font-size:14px;
    }

    .callback-popup-secure{

        flex-direction:column;
        text-align:center;
        gap:8px;

        margin-top:16px;
    }

}

@media (max-width:380px){

    .callback-popup-overlay{

        padding:6px;
    }

    .callback-popup{

        max-height:calc(100vh - 12px);
        max-height:calc(100dvh - 12px);
        border-radius:16px;
    }

    .callback-popup-header{

        padding:
            22px
            14px
            20px;
    }

    .callback-popup h2{

        font-size:21px;
    }

    .callback-popup-label{

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

    .callback-popup-body{

        padding:16px;
    }

    .callback-popup-form input{

        height:50px;
        padding-left:48px;
    }

    .callback-popup-submit{

        height:52px;
    }

}

/* ==================================================
   CORRECTIF FINAL — POPUP COMPACT SUR PETITS ÉCRANS
   Ces règles doivent rester tout à la fin du fichier.
================================================== */

.callback-popup-overlay,
.callback-popup-overlay *,
.callback-popup-overlay *::before,
.callback-popup-overlay *::after{
    box-sizing:border-box;
}

.callback-popup-overlay{
    padding:24px;
    align-items:center;
    justify-content:center;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.callback-popup{
    width:min(560px,calc(100vw - 48px));
    max-width:none;
    max-height:min(780px,calc(100dvh - 48px));
    margin:auto;
}

/* Tablettes et petits ordinateurs */

@media(max-width:900px){

    .callback-popup-overlay{
        padding:20px;
    }

    .callback-popup{
        width:min(520px,calc(100vw - 40px));
        max-width:none;
        max-height:min(740px,calc(100dvh - 40px));
        margin:auto;
    }

}

/*
 * Mobile :
 * le popup reste centré et lisible sans occuper
 * quasiment toute la largeur de l’écran.
 */

@media(max-width:600px){

    .callback-popup-overlay{
        padding:16px;
        align-items:center;
    }

    .callback-popup{
        width:min(430px,calc(100vw - 32px));
        max-width:none;
        max-height:calc(100dvh - 32px);
        margin:auto;

        border-radius:20px;
    }

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

        width:36px;
        height:36px;
    }

    .callback-popup-header{
        min-height:0;
        padding:24px 18px 22px;
    }

    .callback-popup-icon{
        width:60px;
        height:60px;
        flex:0 0 60px;
        margin-bottom:13px;
    }

    .callback-popup-icon svg{
        width:29px;
        height:29px;
    }

    .callback-popup-label{
        margin-bottom:7px;

        font-size:8.8px;
        letter-spacing:1.8px;
    }

    .callback-popup-label::before,
    .callback-popup-label::after{
        width:16px;
    }

    .callback-popup h2{
        max-width:360px;
        margin-bottom:10px;

        font-size:23px;
        line-height:1.12;
    }

    .callback-popup-intro{
        max-width:360px;
        margin-bottom:14px;

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

    .callback-popup-benefits{
        flex-direction:row;
        gap:7px;
    }

    .callback-popup-benefit{
        width:auto;
        min-height:29px;
        padding:0 10px;

        font-size:9.3px;
    }

    .callback-popup-benefit svg{
        width:13px;
        height:13px;
    }

    .callback-popup-body{
        padding:18px;
    }

    .callback-popup-email{
        flex-direction:row;
        justify-content:center;
        gap:10px;
        margin-bottom:15px;
    }

    .callback-popup-email > div{
        text-align:left;
    }

    .callback-popup-email-icon{
        width:34px;
        height:34px;
        flex:0 0 34px;
    }

    .callback-popup-email a{
        font-size:12.5px;
        word-break:break-word;
    }

    .callback-popup-separator{
        margin-bottom:17px;
    }

    .callback-popup-fields{
        grid-template-columns:1fr;
        gap:12px;
    }

    .callback-popup-form{
        gap:13px;
    }

    .callback-popup-form input{
        height:49px;
        padding-left:47px;

        font-size:16px;
    }

    .callback-popup-submit{
        height:52px;
    }

    .callback-btn-text{
        font-size:13.5px;
    }

    .callback-popup-secure{
        flex-direction:row;
        gap:8px;
        margin-top:14px;

        font-size:9.5px;
        text-align:left;
    }

    .callback-toast{
        right:16px;
        bottom:16px;
        left:16px;

        width:auto;
    }

}

/* Petits mobiles */

@media(max-width:380px){

    .callback-popup-overlay{
        padding:12px;
    }

    .callback-popup{
        width:min(350px,calc(100vw - 24px));
        max-height:calc(100dvh - 24px);

        border-radius:17px;
    }

    .callback-popup-header{
        padding:21px 14px 19px;
    }

    .callback-popup-icon{
        width:54px;
        height:54px;
        flex-basis:54px;
        margin-bottom:11px;
    }

    .callback-popup h2{
        font-size:20.5px;
    }

    .callback-popup-intro{
        font-size:12px;
    }

    .callback-popup-benefit{
        min-height:27px;
        padding:0 8px;

        font-size:8.7px;
    }

    .callback-popup-body{
        padding:15px;
    }

    .callback-popup-email{
        margin-bottom:13px;
    }

    .callback-popup-form input{
        height:47px;
    }

    .callback-popup-submit{
        height:50px;
    }

    .callback-popup-secure{
        flex-direction:column;
        gap:7px;

        text-align:center;
    }

}

/*
 * Écrans peu hauts :
 * le contenu se compacte verticalement.
 */

@media(max-height:760px) and (min-width:601px){

    .callback-popup-overlay{
        padding:14px;
    }

    .callback-popup{
        width:min(520px,calc(100vw - 40px));
        max-height:calc(100dvh - 28px);
    }

    .callback-popup-header{
        padding:21px 38px 20px;
    }

    .callback-popup-icon{
        width:58px;
        height:58px;
        flex-basis:58px;
        margin-bottom:10px;
    }

    .callback-popup-icon svg{
        width:29px;
        height:29px;
    }

    .callback-popup h2{
        margin-bottom:8px;
        font-size:27px;
    }

    .callback-popup-intro{
        margin-bottom:12px;
        font-size:12.5px;
    }

    .callback-popup-benefit{
        min-height:28px;
    }

    .callback-popup-body{
        padding:17px 30px 18px;
    }

    .callback-popup-email{
        margin-bottom:13px;
    }

    .callback-popup-separator{
        margin-bottom:15px;
    }

    .callback-popup-form{
        gap:12px;
    }

    .callback-popup-form input{
        height:47px;
    }

    .callback-popup-submit{
        height:50px;
    }

    .callback-popup-secure{
        margin-top:12px;
    }

}

/*
 * Très faible hauteur : le popup reste accessible,
 * et les pastilles secondaires sont masquées.
 */

@media(max-height:650px){

    .callback-popup-overlay{
        padding-top:10px;
        padding-bottom:10px;
        align-items:flex-start;
    }

    .callback-popup{
        max-height:calc(100dvh - 20px);
        margin:auto;
    }

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

}

/* Compatibilité navigateurs sans unités dynamiques */

@supports not (height:100dvh){

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

    @media(max-width:600px){

        .callback-popup{
            max-height:calc(100vh - 32px);
            max-height:calc(100dvh - 32px);
        }

    }

    @media(max-width:380px){

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

    }

    @media(max-height:650px){

        .callback-popup{
            max-height:calc(100vh - 20px);
            max-height:calc(100dvh - 20px);
        }

    }

}

/* ==================================================
   POPUP — OFFRE EXCEPTIONNELLE
================================================== */

.special-offer-popup-summary{
    position:relative;
    z-index:3;

    width:min(390px,100%);

    margin:0 auto 20px;
    padding:15px 18px;

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

    display:grid;
    gap:4px;

    background:rgba(255,255,255,.07);

    backdrop-filter:blur(8px);

    color:#ffffff;
}

.special-offer-popup-summary strong{
    margin-bottom:5px;

    color:#69a0ff;

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

    letter-spacing:1.4px;
    text-transform:uppercase;
}

.special-offer-popup-summary span{
    color:#ffffff;

    font-size:13px;
    font-weight:800;
    line-height:1.4;
}

/* ==================================================
   POPUP OFFRE EXCEPTIONNELLE — SANS SCROLL DESKTOP
================================================== */

.special-offer-popup{
    width:min(860px,calc(100vw - 48px));
    max-width:860px;

    max-height:none;
    overflow:visible;

    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);

    text-align:left;
}


/* HEADER À GAUCHE */

.special-offer-popup .callback-popup-header{
    min-height:100%;
    padding:34px 38px;

    justify-content:center;

    border-radius:28px 0 0 28px;

    text-align:left;
    align-items:flex-start;
}


/* ICÔNE */

.special-offer-popup .callback-popup-icon{
    width:66px;
    height:66px;
    flex:0 0 66px;

    margin:0 0 17px;
}

.special-offer-popup .callback-popup-icon svg{
    width:31px;
    height:31px;
}


/* LABEL */

.special-offer-popup .callback-popup-label{
    margin-bottom:8px;

    font-size:9.5px;
    letter-spacing:2px;
}

.special-offer-popup .callback-popup-label::before,
.special-offer-popup .callback-popup-label::after{
    display:none;
}


/* TITRE */

.special-offer-popup .callback-popup-header h2{
    max-width:100%;

    margin:0 0 12px;

    font-size:31px;
    line-height:1.08;
}


/* TEXTE INTRO */

.special-offer-popup .callback-popup-intro{
    max-width:100%;

    margin:0 0 17px;

    font-size:13.5px;
    line-height:1.5;

    text-align:left;
}


/* RÉSUMÉ OFFRE */

.special-offer-popup-summary{
    width:100%;

    margin:0 0 16px;
    padding:14px 16px;

    gap:3px;
}

.special-offer-popup-summary strong{
    margin-bottom:4px;
}

.special-offer-popup-summary span{
    font-size:12.5px;
}


/* PASTILLES */

.special-offer-popup .callback-popup-benefits{
    justify-content:flex-start;

    gap:7px;
}

.special-offer-popup .callback-popup-benefit{
    min-height:31px;

    padding:0 10px;

    font-size:9.5px;
}


/* BODY À DROITE */

.special-offer-popup .callback-popup-body{
    padding:36px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border-radius:0 28px 28px 0;
}


/* EMAIL */

.special-offer-popup .callback-popup-email{
    justify-content:flex-start;

    margin-bottom:18px;
}


/* SÉPARATEUR */

.special-offer-popup .callback-popup-separator{
    margin-bottom:19px;
}


/* FORMULAIRE */

.special-offer-popup .callback-popup-form{
    gap:14px;
}

.special-offer-popup .callback-popup-fields{
    grid-template-columns:1fr;
    gap:12px;
}

.special-offer-popup .callback-popup-form input{
    height:50px;
}


/* BOUTON */

.special-offer-popup .callback-popup-submit{
    height:54px;
}


/* SÉCURITÉ */

.special-offer-popup .callback-popup-secure{
    margin-top:14px;

    font-size:9.5px;
}


/* CROIX */

.special-offer-popup .callback-popup-close{
    top:14px;
    right:14px;
}


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

@media(max-width:900px){

    .special-offer-popup{
        width:min(720px,calc(100vw - 32px));

        grid-template-columns:1fr 1fr;
    }

    .special-offer-popup .callback-popup-header{
        padding:28px 26px;
    }

    .special-offer-popup .callback-popup-body{
        padding:28px 24px;
    }

    .special-offer-popup .callback-popup-header h2{
        font-size:27px;
    }

}


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

@media(max-width:700px){

    .special-offer-popup{
        width:min(430px,calc(100vw - 24px));

        max-height:calc(100dvh - 24px);

        overflow-y:auto;

        display:block;
    }

    .special-offer-popup .callback-popup-header{
        padding:23px 18px 20px;

        border-radius:20px 20px 0 0;

        align-items:center;
        text-align:center;
    }

    .special-offer-popup .callback-popup-icon{
        width:54px;
        height:54px;
        flex-basis:54px;

        margin:0 auto 11px;
    }

    .special-offer-popup .callback-popup-icon svg{
        width:26px;
        height:26px;
    }

    .special-offer-popup .callback-popup-header h2{
        font-size:22px;
        text-align:center;
    }

    .special-offer-popup .callback-popup-intro{
        margin-bottom:12px;

        font-size:12px;

        text-align:center;
    }

    .special-offer-popup-summary{
        margin-bottom:12px;
        padding:11px 13px;
    }

    .special-offer-popup-summary span{
        font-size:11.5px;
    }

    .special-offer-popup .callback-popup-benefits{
        justify-content:center;
    }

    .special-offer-popup .callback-popup-body{
        padding:18px;

        border-radius:0 0 20px 20px;
    }

    .special-offer-popup .callback-popup-email{
        justify-content:center;
        margin-bottom:14px;
    }

    .special-offer-popup .callback-popup-separator{
        margin-bottom:15px;
    }

    .special-offer-popup .callback-popup-form{
        gap:12px;
    }

    .special-offer-popup .callback-popup-form input{
        height:47px;
    }

    .special-offer-popup .callback-popup-submit{
        height:50px;
    }

    .special-offer-popup .callback-popup-secure{
        margin-top:12px;
    }

}

@media(min-width:701px){

    #specialOfferPopup.callback-popup-overlay{
        overflow:hidden;
    }

    #specialOfferPopup .special-offer-popup{
        max-height:calc(100dvh - 40px);
        overflow:visible;
    }

}