/* ============================= */
/*  Bloc Ajustement R3GUL+       */
/*  Style néon / cyber-banking   */
/* ============================= */

.r3gul-card {
    position: relative;
    margin-top: 18px;
}

/* Titre avec petit underline néon */
.r3gul-card h2 {
    position: relative;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    font-size: 1.2rem;
    color: #c7d7ff;
}

.r3gul-card h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 110px;
    height: 2px;
    background: linear-gradient(90deg, #6b8bff, #ff6ec7);
    border-radius: 999px;
}

/* Formulaire R3GUL+ */
.r3gul-card form {
    background: radial-gradient(circle at top left,
                rgba(80, 120, 255, 0.18),
                transparent 55%)
                ,rgba(10, 12, 30, 0.95);
    border-radius: 10px;
    padding: 12px 12px 14px 12px;
    border: 1px solid rgba(120, 130, 255, 0.4);
    box-shadow:
        0 0 12px rgba(80, 120, 255, 0.25),
        0 0 26px rgba(12, 8, 40, 0.85);
}

/* Label + champs */
.r3gul-card form label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.86rem;
    color: #a6b2e8;
}

.r3gul-card form input[type="number"] {
    width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(90, 100, 180, 0.8);
    background: radial-gradient(circle at top,
                rgba(40, 50, 90, 0.8),
                rgba(5, 5, 20, 0.95));
    color: #e5e9ff;
    padding: 8px 10px;
    font-size: 0.9rem;
    box-sizing: border-box;
}

/* Bouton Calculer */
.r3gul-card form button[type="submit"] {
    margin-top: 6px;
    width: 100%;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(120, 255, 200, 0.9);
    background: radial-gradient(circle at top,
                rgba(120, 255, 200, 0.25),
                rgba(10, 35, 30, 0.98));
    color: #e6fff9;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        0 0 8px rgba(120, 255, 200, 0.6),
        0 0 20px rgba(40, 160, 120, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.r3gul-card form button[type="submit"]:hover {
    transform: translateY(-1px);
    background: radial-gradient(circle at top,
                rgba(150, 255, 215, 0.4),
                rgba(15, 55, 45, 0.98));
    box-shadow:
        0 0 10px rgba(150, 255, 225, 0.75),
        0 0 26px rgba(50, 180, 140, 0.6);
}

.r3gul-card form button[type="submit"]:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        0 0 6px rgba(120, 255, 200, 0.55),
        0 0 16px rgba(35, 140, 105, 0.5);
}

/* Zone d'affichage du résultat / bouton copier */
.r3gul-output {
    margin-top: 12px;
    padding: 10px 10px 12px 10px;
    border-radius: 10px;
    background: rgba(6, 8, 26, 0.96);
    border: 1px dashed rgba(130, 145, 255, 0.6);
    font-size: 0.88rem;
}

/* Texte d'info (le <p> que ton JS crée) */
.r3gul-output p {
    margin: 0;
    line-height: 1.4;
}

/* Bouton de copie créé par r3gul.js */
.r3gul-output button {
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(135, 190, 255, 0.9);
    background: radial-gradient(circle at top,
                rgba(135, 190, 255, 0.25),
                rgba(16, 30, 60, 0.98));
    color: #e4f1ff;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        0 0 8px rgba(135, 190, 255, 0.6),
        0 0 18px rgba(60, 120, 220, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.r3gul-output button:hover {
    transform: translateY(-1px);
    background: radial-gradient(circle at top,
                rgba(160, 205, 255, 0.4),
                rgba(20, 38, 76, 0.98));
    box-shadow:
        0 0 10px rgba(160, 205, 255, 0.8),
        0 0 24px rgba(70, 135, 230, 0.7);
}

.r3gul-output button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        0 0 6px rgba(120, 175, 245, 0.6),
        0 0 16px rgba(55, 110, 205, 0.55);
}

/* Mobile */
@media (max-width: 480px) {
    .r3gul-card form {
        padding: 10px 10px 12px 10px;
    }
}