/*
======================================================
CXO SIMULATOR V5 — bandeau horizontal compact
Philosophie responsive :
  - Base (aucune media query) = desktop ≥1200px,
    bandeau compact 320-380px de haut.
  - 768-1199px = palier tablette, plus de hauteur
    autorisée, réorganisation.
  - <768px = empilement vertical naturel.
Isolé sous #cxo-simulator pour éviter tout conflit
avec le thème Colibri / WordPress. Aucune dimension
basée sur le viewport (vh/vw plein écran) : tout
dépend du container.
======================================================
*/

:root{
    --cxo-bg:#020617;
    --cxo-card:#050b1c;
    --cxo-blue:#149BFF;
    --cxo-purple:#8A35FF;
    --cxo-green:#31E6A1;
    --cxo-text:#ffffff;
    --cxo-muted:#98A6BC;
}


/* ===== RESET ISOLÉ ===== */

#cxo-simulator,
#cxo-simulator *{
    box-sizing:border-box;
}

/* Neutralise tout style de bordure/outline/box-shadow/typo que
   Colibri ou WordPress pourrait injecter sur le conteneur
   du shortcode (wrapper .entry-content, .uc-*, blocs Gutenberg,
   etc.) avant que nos propres règles ne s'appliquent plus bas. */
#cxo-simulator,
#cxo-simulator a,
#cxo-simulator button,
#cxo-simulator input,
#cxo-simulator .cxo-card,
#cxo-simulator .cxo-button{
    border:none;
    outline:none;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
    text-shadow:none;
}

#cxo-simulator{
    width:100%;
    padding:26px 16px 0;
    margin:0 auto;
    font-family:Inter, Arial, sans-serif;
    color:#fff;
    background:transparent;
    line-height:1.4;
}

#cxo-simulator ul,
#cxo-simulator li,
#cxo-simulator h1,
#cxo-simulator h3,
#cxo-simulator p{
    margin:0;
    padding:0;
    list-style:none;
}

.icon-svg{
    width:1em;
    height:1em;
    display:block;
}


/* ======================================================
   CARTE PRINCIPALE — bloc unique, une seule bordure
   ====================================================== */

#cxo-simulator .cxo-card{
    position:relative;
    width:100%;
    max-width:1280px;
    margin:auto;
    display:flex;
    flex-direction:column;

    background:
        radial-gradient(circle at 85% 0%, rgba(21,155,255,.10), transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(138,53,255,.10), transparent 35%),
        linear-gradient(160deg, #0A1730 0%, #060D1F 45%, #020617 100%);

    border-radius:26px;
    border:1.5px solid rgba(225,238,255,.82);
    overflow:hidden;

    box-shadow:
        0 0 0 1px rgba(140,190,255,.28),
        0 1px 12px rgba(160,205,255,.34),
        0 0 26px rgba(90,165,255,.18),
        0 20px 60px rgba(0,0,0,.4);
}

.cxo-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
    border-radius:26px;
    background:
        radial-gradient(ellipse 700px 220px at 6% -10%, rgba(190,220,255,.35), transparent 58%),
        radial-gradient(ellipse 700px 220px at 100% -10%, rgba(190,220,255,.26), transparent 58%),
        radial-gradient(ellipse 500px 180px at 0% 112%, rgba(140,170,255,.18), transparent 60%),
        radial-gradient(ellipse 500px 180px at 100% 112%, rgba(150,110,255,.18), transparent 60%);
}


/* ======================================================
   BLOC UNIQUE : GAUCHE (PARAMÈTRES) + ZONE FUSIONNÉE
   (RÉSULTAT + ESPACE), le tout dans une seule ligne
   ====================================================== */

.cxo-top{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:31% 1fr;
    align-items:stretch;
}


/* ======================================================
   COLONNE GAUCHE — PARAMÈTRES (compactée)
   ====================================================== */

.cxo-left{
    padding:26px 28px;
    border-right:1px solid rgba(255,255,255,.029);
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    background:radial-gradient(ellipse 420px 200px at 15% 0%, rgba(30,140,255,.05), transparent 65%);
}

.cxo-badge{
    display:flex;
    align-items:center;
    gap:9px;
    width:max-content;
    padding:6px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:#22B8FF;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.7px;
    margin-bottom:12px;
}

.badge-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:7px;
    background:rgba(21,155,255,.08);
    border:1px solid rgba(21,155,255,.4);
    color:#22B8FF;
    font-size:11px;
}

.badge-icon .icon-svg{
    width:11px;
    height:11px;
}

.cxo-title{
    margin:0 0 12px;
    font-size:20px;
    line-height:1.2;
    letter-spacing:-.4px;
    font-weight:800;
    color:#fff;
}

.cxo-description{
    display:none;
}

.cxo-field{
    margin-bottom:19px;
}

.cxo-field:last-of-type{
    margin-bottom:0;
}

.cxo-field-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.cxo-field label{
    display:block;
    color:#fff;
    font-size:12.5px;
    font-weight:600;
}

.value-box{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:64px;
    padding:5px 11px;
    border-radius:11px;
    background:rgba(255,255,255,.04);
}

.value-box span{
    color:#fff;
    font-size:12px;
    font-weight:700;
}

.value-box-blue{
    border:1px solid rgba(21,155,255,.45);
}
.value-box-blue span{
    color:#4FC3FF;
}

.value-box-purple{
    border:1px solid rgba(138,53,255,.45);
}
.value-box-purple span{
    color:#B98BFF;
}

.scale{
    display:flex;
    justify-content:space-between;
    margin-top:7px;
    color:#73829A;
    font-size:10.5px;
}


/* ===== SLIDERS CUSTOM (comportement/logique inchangés) ===== */

.cxo-range{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:5px;
    border-radius:999px;
    background:linear-gradient(90deg, #22B8FF 0%, #8A35FF 100%);
    outline:none;
    cursor:pointer;
}

.cxo-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(21,155,255,.3);
    box-shadow:0 2px 6px rgba(0,0,0,.28), 0 0 10px rgba(60,150,255,.45);
    cursor:pointer;
    margin-top:-1px;
}

.cxo-range::-moz-range-thumb{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(21,155,255,.3);
    box-shadow:0 2px 6px rgba(0,0,0,.28), 0 0 10px rgba(60,150,255,.45);
    cursor:pointer;
}

.cxo-range::-moz-range-track{
    height:5px;
    border-radius:999px;
    background:#232E44;
}


/* ===== ENCADRÉ INFO — masqué sur le bandeau compact desktop ===== */

.cxo-info{
    display:none;
}

.cxo-info .info-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    flex-shrink:0;
    border-radius:50%;
    background:rgba(138,53,255,.14);
    color:#B98BFF;
}

.cxo-info .info-icon .icon-svg{
    width:16px;
    height:16px;
}

.cxo-info strong{
    display:block;
    color:#fff;
    font-size:13px;
    font-weight:700;
    margin-bottom:3px;
}

.cxo-info span{
    display:block;
    color:#A7B3C7;
    font-size:12.5px;
    line-height:1.5;
}


/* ======================================================
   ZONE FUSIONNÉE : RÉSULTAT + SCÈNE SPATIALE
   Le résultat et l'illustration se mélangent dans un
   seul calque, sans séparation visible.
   ====================================================== */

.cxo-hero{
    position:relative;
    overflow:hidden;
    min-height:362px;
}

/* Image spatiale en fond, plein cadre */
.space-scene{
    position:absolute;
    inset:0;
    background-image:url('../images/space-background.png');
    background-repeat:no-repeat;
    background-size:120% auto;
    background-position:84% 50%;

    -webkit-mask-image:linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.03) 12%,
        rgba(0,0,0,.1) 20%,
        rgba(0,0,0,.22) 28%,
        rgba(0,0,0,.4) 36%,
        rgba(0,0,0,.62) 44%,
        rgba(0,0,0,.82) 52%,
        #000 64%
    );
    mask-image:linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.03) 12%,
        rgba(0,0,0,.1) 20%,
        rgba(0,0,0,.22) 28%,
        rgba(0,0,0,.4) 36%,
        rgba(0,0,0,.62) 44%,
        rgba(0,0,0,.82) 52%,
        #000 64%
    );
}

/* Voile dégradé : fond du bord gauche + haut + bas de
   l'image dans le bleu nuit, aucune limite rectangulaire
   perceptible, texte toujours lisible */
.cxo-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(3,7,20,1) 0%,
            rgba(3,7,20,.8) 5%,
            rgba(3,7,20,.4) 11%,
            rgba(3,7,20,.12) 18%,
            rgba(3,7,20,0) 26%
        ),
        linear-gradient(
            0deg,
            rgba(3,7,20,1) 0%,
            rgba(3,7,20,.7) 6%,
            rgba(3,7,20,.3) 13%,
            rgba(3,7,20,0) 22%
        ),
        linear-gradient(
            90deg,
            rgba(3,7,20,1) 0%,
            rgba(3,7,20,1) 26%,
            rgba(3,7,20,.9) 40%,
            rgba(3,7,20,.64) 56%,
            rgba(3,7,20,.3) 72%,
            rgba(3,7,20,.08) 88%,
            rgba(3,7,20,0) 100%
        );
}

.cxo-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        radial-gradient(ellipse 620px 320px at 0% 100%, rgba(3,7,20,.85) 0%, rgba(3,7,20,.55) 26%, rgba(3,7,20,.28) 46%, transparent 68%),
        radial-gradient(ellipse 460px 460px at 42% 55%, rgba(3,7,20,.2) 0%, rgba(3,7,20,.09) 40%, transparent 72%);
}

.astronaut{
    position:absolute;
    z-index:2;
    bottom:0;
    right:8%;
    height:82%;
    width:auto;
    max-width:none;
    filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));
    animation:cxoAstronautFloat 7s ease-in-out infinite alternate;
    transform-origin:50% 85%;
}

@keyframes cxoAstronautFloat{
    0%{
        transform:translate3d(0, 0, 0) rotate(-0.3deg);
    }
    100%{
        transform:translate3d(1px, -4px, 0) rotate(0.3deg);
    }
}

@media (prefers-reduced-motion: reduce){
    .astronaut{
        animation:none;
    }
}

.cxo-center{
    position:relative;
    z-index:3;
    max-width:420px;
    padding:35px 0 21px 36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.live-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    color:#8F9EB7;
    text-transform:uppercase;
    font-size:9.5px;
    letter-spacing:.8px;
    margin-bottom:8px;
    padding:5px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(6,13,31,.4);
}

.live-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#31E6A1;
    box-shadow:0 0 10px rgba(49,230,161,.7);
}

.result-label{
    color:var(--cxo-muted);
    font-size:13.5px;
    font-weight:500;
    margin-bottom:6px;
}

#salaryResult{
    font-size:clamp(56px, 5.8vw, 87px);
    line-height:.95;
    font-weight:800;
    margin-bottom:8px;
    letter-spacing:-1.8px;
    white-space:nowrap;
    background:linear-gradient(
        90deg,
        #00b4ff 0%,
        #0090ff 16%,
        #3f6dff 34%,
        #7a3fff 56%,
        #a51cff 80%,
        #b40fff 100%
    );
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}

.per-month{
    color:var(--cxo-muted);
    font-size:14px;
    font-weight:700;
    margin:0 0 14px;
}

.salary-line{
    position:relative;
    width:130px;
    height:2px;
    margin:0 0 14px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #159BFF 0%,
        #6A5CFF 52%,
        rgba(138,53,255,.35) 68%,
        rgba(138,53,255,0) 88%
    );
    box-shadow:0 0 8px rgba(90,150,255,.4);
}

.salary-line-dot{
    position:absolute;
    top:50%;
    left:52%;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#B98BFF;
    box-shadow:0 0 8px 2px rgba(160,110,255,.7);
    transform:translate(-50%, -50%);
}

#yearResult{
    max-width:360px;
    margin:0 0 16px;
    color:#A9B4D6;
    font-size:12.5px;
    line-height:1.5;
}

.highlight{
    color:#3B9EFF;
    font-weight:700;
}

.features{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin:0 0 18px;
}

.features li{
    display:flex;
    align-items:center;
    gap:6px;
    color:#fff;
    font-size:11.5px;
    white-space:nowrap;
}

.check-svg{
    width:14px;
    height:14px;
    flex-shrink:0;
    color:#159BFF;
    border:1.5px solid #159BFF;
    border-radius:50%;
    padding:2px;
    box-sizing:content-box;
    stroke-width:3;
}

#cxo-simulator .cxo-button{
    display:grid;
    grid-template-columns:24px 1fr 22px;
    align-items:center;
    width:min(100%, 390px);
    height:54px;
    align-self:flex-start;
    margin:10px 0 20px;
    padding:0 14px;
    border-radius:13px;
    background:linear-gradient(
        100deg,
        #079cff 0%,
        #247bff 32%,
        #6548ff 68%,
        #9b20ff 100%
    );
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(225,238,255,.4);
    transition:transform 250ms ease, box-shadow 250ms ease;
    box-shadow:
        -5px 5px 16px rgba(7,156,255,.38),
        5px 5px 16px rgba(155,32,255,.38),
        0 2px 8px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.cta-icon-left{
    justify-self:start;
    display:flex;
    align-items:center;
}

.cta-icon-left .icon-svg{
    width:15px;
    height:15px;
    flex-shrink:0;
    color:#fff;
}

.cta-label{
    text-align:center;
    color:#fff;
    font-size:14.5px;
    font-weight:600;
    white-space:nowrap;
}

.cta-arrow{
    justify-self:end;
    display:flex;
    align-items:center;
}

.cta-arrow .icon-svg{
    width:16px;
    height:16px;
    flex-shrink:0;
    color:#fff;
}

.cxo-button:hover{
    transform:translateY(-2px);
    box-shadow:
        -7px 7px 20px rgba(7,156,255,.46),
        7px 7px 22px rgba(155,32,255,.46),
        0 3px 10px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.32);
}

.secure{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--cxo-muted);
    font-size:10.5px;
}

.secure .icon-svg{
    width:11px;
    height:11px;
    flex-shrink:0;
}


/* ======================================================
   RESPONSIVE
   Base ci-dessus = desktop compact ≥1200px.
   768-1199px = palier tablette (plus de hauteur,
   réorganisation). <768px = empilement vertical.
   ====================================================== */

@media(max-width:1199px){

    #cxo-simulator{ padding:24px 18px; }

    #cxo-simulator .cxo-card{ border-radius:28px; }

    .cxo-top{ grid-template-columns:35% 65%; }

    .cxo-left{
        padding:24px 26px;
        justify-content:center;
    }

    .cxo-badge{ margin-bottom:10px; padding:6px 13px; font-size:10.5px; }
    .badge-icon{ width:20px; height:20px; }
    .badge-icon .icon-svg{ width:11px; height:11px; }

    .cxo-title{ font-size:19px; margin-bottom:12px; line-height:1.2; }

    /* Description et encadré info retirés en tablette pour
       tenir dans la cible de hauteur (430-500px) */
    .cxo-description{ display:none; }
    .cxo-info{ display:none; }

    .cxo-field{ margin-bottom:14px; }
    .cxo-field-top{ margin-bottom:7px; }
    .cxo-field label{ font-size:12.5px; }

    .cxo-hero{ min-height:400px; }

    .space-scene{ background-size:120% auto; background-position:85% 55%; }

    .cxo-hero::before{
        background:
            linear-gradient(180deg, rgba(3,7,20,1) 0%, rgba(3,7,20,.7) 6%, rgba(3,7,20,.25) 14%, rgba(3,7,20,0) 22%),
            linear-gradient(0deg, rgba(3,7,20,.9) 0%, rgba(3,7,20,.5) 10%, rgba(3,7,20,0) 20%),
            linear-gradient(90deg, rgba(3,7,20,1) 0%, rgba(3,7,20,.98) 28%, rgba(3,7,20,.82) 44%, rgba(3,7,20,.5) 60%, rgba(3,7,20,.18) 78%, rgba(3,7,20,0) 94%);
    }

    .astronaut{ right:6%; height:60%; }

    .cxo-center{ padding:22px 0 22px 30px; max-width:340px; justify-content:center; }

    .live-badge{ font-size:9.5px; margin-bottom:7px; padding:5px 11px; }
    .result-label{ font-size:13px; margin-bottom:2px; }
    #salaryResult{ font-size:clamp(38px, 5.5vw, 50px); margin-bottom:4px; }
    .per-month{ font-size:13.5px; margin-bottom:6px; }
    .salary-line{ width:130px; margin-bottom:6px; }
    #yearResult{ font-size:12px; margin-bottom:8px; }
    .features{ margin-bottom:10px; gap:12px; }
    .features li{ font-size:11.5px; }

    #cxo-simulator .cxo-button{
        height:46px;
        width:min(100%, 300px);
        grid-template-columns:22px 1fr 20px;
        padding:0 12px;
    }
    .cta-label{ font-size:12.5px; }
    .secure{ font-size:10.5px; }
}

@media(max-width:767px){

    #cxo-simulator{ padding:18px 12px; }

    .cxo-top{
        grid-template-columns:1fr;
    }

    .cxo-left{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.07);
        padding:24px 20px;
    }

    .cxo-badge{ margin-bottom:10px; }
    .cxo-title{ font-size:19px; margin-bottom:10px; }
    .cxo-field{ margin-bottom:14px; }
    .cxo-field-top{ margin-bottom:7px; }

    /* Composition mobile propre : on retire les éléments
       secondaires (checks, encadré info) pour garantir que
       rien ne chevauche jamais l'astronaute en dessous */
    .cxo-info{ display:none; }
    .features{ display:none; }

    .cxo-hero{
        min-height:520px;
        display:flex;
        flex-direction:column;
    }

    .cxo-center{
        max-width:none;
        width:100%;
        padding:26px 22px 0;
        justify-content:flex-start;
    }

    /* Fondu supérieur nettement accentué : le bloc résultat
       repose sur un fond bleu nuit plein, l'illustration ne
       se révèle que progressivement, bien en dessous du texte */
    .cxo-hero::before{
        background:linear-gradient(
            180deg,
            rgba(3,7,20,1) 0%,
            rgba(3,7,20,1) 52%,
            rgba(3,7,20,.92) 62%,
            rgba(3,7,20,.62) 72%,
            rgba(3,7,20,.28) 84%,
            rgba(3,7,20,.08) 94%,
            rgba(3,7,20,0) 100%
        );
    }

    .cxo-hero::after{
        background:radial-gradient(ellipse 320px 220px at 50% 100%, rgba(3,7,20,.5) 0%, transparent 70%);
    }

    .space-scene{
        -webkit-mask-image:none;
        mask-image:none;
        background-size:cover;
        background-position:62% 30%;
    }

    /* Astronaute réduit et cantonné à la zone basse du hero,
       sous le bloc de texte : ne peut jamais chevaucher le
       montant, la ligne annuelle ou le CTA */
    .astronaut{
        right:50%;
        transform:translateX(50%);
        height:30%;
        bottom:6%;
    }

    .live-badge{ margin-bottom:8px; }
    .result-label{ font-size:13px; margin-bottom:2px; }
    #salaryResult{ font-size:clamp(38px, 11vw, 48px); margin-bottom:4px; }
    .per-month{ font-size:14px; margin-bottom:6px; }
    .salary-line{ margin-bottom:6px; }
    #yearResult{ font-size:12.5px; margin-bottom:14px; }

    #cxo-simulator .cxo-button{
        grid-template-columns:24px 1fr 22px;
        height:50px;
        width:100%;
        max-width:340px;
    }
    .cta-label{ font-size:13.5px; white-space:normal; }
    .secure{ margin-top:10px; font-size:10.5px; }
}


/* ======================================================
   V19 — COLIBRI SHORTCODE SPACING FIX
   Ne modifie pas les dimensions internes de la carte.
   Supprime uniquement l'espace résiduel du wrapper direct
   lorsque le navigateur prend en charge :has().
   ====================================================== */
@supports selector(:has(*)) {
    .h-col:has(> #cxo-simulator),
    .h-column-container:has(> #cxo-simulator),
    .h-y-container:has(> #cxo-simulator) {
        min-height:0 !important;
        padding-bottom:0 !important;
        margin-bottom:0 !important;
    }
}