#jscl-root, .jscl {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 30px auto;
    font-family: inherit;
    color: #17202a;
}
.jscl *, .jscl *::before, .jscl *::after { box-sizing: border-box; }

.jscl-header { margin-bottom: 22px; }
.jscl-header h2 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; }
.jscl-header p { margin: 0; color: #66717d; }

.jscl-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.jscl-card {
    background:#fff;
    border:1px solid #dfe3e7;
    border-radius:16px;
    padding:24px;
    box-shadow:0 5px 18px rgba(0,0,0,.06);
}
.jscl-card h3 { margin:0 0 18px; font-size:21px; }
.jscl-subtitle { margin-top:25px !important; padding-top:20px; border-top:1px solid #eceff1; }

.jscl label {
    display:block;
    margin:0 0 13px;
    font-size:14px;
    font-weight:700;
}
.jscl input, .jscl select {
    width:100%;
    margin-top:7px;
    min-height:46px;
    padding:10px 12px;
    border:1px solid #cfd5da;
    border-radius:9px;
    background:#fff;
    color:#17202a;
    font-size:15px;
}
.jscl input:focus, .jscl select:focus {
    outline:2px solid #17202a;
    outline-offset:1px;
}
.jscl-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.jscl-primary, .jscl-secondary {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:2 !important;
    width:auto !important;
    min-height:48px !important;
    padding:12px 20px !important;
    border-radius:10px !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    cursor:pointer !important;
    text-decoration:none !important;
    box-shadow:none !important;
}
.jscl-primary {
    margin:16px 8px 0 0 !important;
    border:2px solid #000 !important;
    background:#000 !important;
    color:#fff !important;
}
.jscl-primary:hover, .jscl-primary:focus {
    background:#1d1d1d !important;
    color:#fff !important;
}
.jscl-secondary {
    margin:16px 0 0 !important;
    border:2px solid #000 !important;
    background:#000 !important;
    color:#fff !important;
}
.jscl-secondary:hover, .jscl-secondary:focus {
    background:#222 !important;
    color:#fff !important;
}
.jscl-secondary:active, .jscl-primary:active {
    transform:translateY(1px);
}

.jscl-empty { color:#6b7580; line-height:1.6; }
.jscl-summary { display:grid; gap:10px; }
.jscl-summary > div {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:14px 0;
    border-bottom:1px solid #eceff1;
}
.jscl-summary span { color:#66717d; }
.jscl-summary strong { font-size:19px; }
.jscl-highlight {
    padding:17px 14px !important;
    border:1px solid #dfe3e7;
    border-radius:10px;
    background:#f6f7f8;
}
.jscl-result-card h4 { margin:24px 0 10px; }
.jscl-breakdown > div {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:8px 0;
    font-size:14px;
}
.jscl-advice {
    margin-top:20px;
    padding:16px;
    border-radius:10px;
    background:#f3f4f5;
}
.jscl-advice p { margin:7px 0 0; line-height:1.55; }
.jscl-jobs {
    display:block;
    margin-top:20px;
    padding:13px 16px;
    border-radius:10px;
    background:#17202a;
    color:#fff !important;
    text-align:center;
    font-weight:700;
    text-decoration:none !important;
}
.jscl-jobs:hover { background:#000; color:#fff !important; }

@media (max-width: 760px) {
    .jscl-grid { grid-template-columns:1fr; }
    .jscl-card { padding:18px; }
    .jscl-header h2 { font-size:25px; }
    .jscl-primary, .jscl-secondary {
        display:flex !important;
        width:100% !important;
        margin:10px 0 0 !important;
    }
}

/* V0.1.3 - protection maximale contre les styles du thème WordPress */
.jscl #jscl-reset,
.jscl button#jscl-reset,
.jscl button.jscl-secondary#jscl-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    min-height: 48px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.jscl #jscl-reset:hover,
.jscl button#jscl-reset:hover,
.jscl button.jscl-secondary#jscl-reset:hover {
    background: #222222 !important;
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* V0.1.4 - Le contrôle est un DIV afin d'éviter les règles globales des thèmes sur les boutons */
.jscl .jscl-reset-control {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
    width: auto !important;
    min-width: 250px !important;
    min-height: 48px !important;
    margin: 16px 0 0 !important;
    padding: 12px 20px !important;
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.jscl .jscl-reset-control:hover,
.jscl .jscl-reset-control:focus,
.jscl .jscl-reset-control:active {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    opacity: 1 !important;
    outline: none !important;
}
@media (max-width: 760px) {
    .jscl .jscl-reset-control {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 10px !important;
    }
}