/* =========================================================
   STYLE GLOBAL - SIMULATEUR RENTABILITÉ LOCATIVE AVANCÉE
   Fichier complet (formulaire + page résultats)
   ========================================================= */

/* ================== VARIABLES THEME ================== */
:root {
    --bg-gradient-start:#c6ede3;
    --bg-gradient-end:#c6ede3;

    --primary:#0033a0;
    --primary-darker:#002a80;
    --accent:#0044cc;
    --accent2:#005bbb;

    --border:#0fd3a0;
    --table-border:#0fd3a0;

    --danger:#c0392b;
    --warning:#f39c12;
    --ok:#1e8449;
    --text:#0d2348;
    --muted:#5e6d85;

    /* Surfaces (tu as demandé fond vert uniforme) */
    --surface:#c6ede3;
    --surface-alt:#c6ede3;

    --focus:#ffca3a;

    --radius:16px;
    --shadow:0 6px 18px -6px rgba(0,40,110,.25);
    --shadow-soft:0 3px 10px -4px rgba(0,40,110,.20);
    font-size:16px;
}

/* ================== RESET DE BASE ================== */
html,body { margin:0; padding:0; }
body {
    font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif;
    background:linear-gradient(135deg,var(--bg-gradient-start),var(--bg-gradient-end));
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}

/* ====================================================
   CONTENEUR PRINCIPAL (Formulaire & Résultats)
   ==================================================== */
.rlav-app {
    max-width:980px;          /* largeur formulaire */
    margin:0 auto;
    padding:26px 34px 38px;
    background:var(--surface);
    border-radius:var(--radius);
    position:relative;
    overflow:hidden;          /* évite halos qui dépassent */
}

/* Halos décoratifs allégés */
.rlav-app:before,
.rlav-app:after {
    content:'';
    position:absolute;
    z-index:-1;
    filter:blur(34px);
    opacity:.22;
}
.rlav-app:before {
    width:180px;height:180px;
    background:radial-gradient(circle at 30% 30%, var(--border) 0%, transparent 70%);
    top:-35px;left:-35px;
}
.rlav-app:after {
    width:200px;height:200px;
    background:radial-gradient(circle at 70% 70%, var(--accent2) 0%, transparent 70%);
    bottom:-40px;right:-40px;
}

/* ====================================================
   PAGE RESULTATS (largeur réduite)
   Pour ajuster la largeur change juste max-width ci-dessous
   (760px recommandé / 720px compact / 700px / 640px très étroit)
   ==================================================== */
.rlav-results {
    max-width:760px;
    padding:24px 30px 34px;
}
.rlav-results h1 { font-size:1.75rem; }

/* KPI plus compacts sur la page résultats étroite */
.rlav-results .kpi-wrap { gap:10px; }
.rlav-results .kpi-card { padding:10px 9px 12px; }
.rlav-results .kpi-card .val { font-size:.98rem; }
.rlav-results .kpi-card h3 { font-size:.55rem; }

/* Tables plus serrées sur page résultats */
.rlav-results table.data th,
.rlav-results table.data td {
    padding:9px 12px;
    font-size:.8rem;
}

/* Option responsive : passer KPI sur 2 colonnes en dessous de 560px */
@media (max-width:560px){
  .rlav-results .kpi-wrap {
     grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ================== TITRES ================== */
h1,h2,h3 {
    margin:0 0 18px;
    font-weight:600;
    line-height:1.15;
    letter-spacing:.5px;
}
h1 {
    font-size:1.95rem;
    color:var(--primary);
    background:linear-gradient(90deg,var(--primary),var(--accent2));
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    text-align:center;
}
h2 { font-size:1.25rem; color:var(--primary); margin-top:36px; }

/* ================== GRILLES UTILITAIRES ================== */
.grid-2, .grid-3 {
    display:grid;
    gap:18px 22px;
}
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
@media (max-width:640px){
    .grid-2, .grid-3 { gap:14px 16px; }
}

/* ================== FIELDSET / FORM ================== */
fieldset {
    border:2px solid var(--border);
    background:var(--surface-alt);
    padding:22px 22px 26px;
    margin:26px 0 0;
    border-radius:22px;
    position:relative;
    box-shadow:var(--shadow-soft);
    transition:.35s;
}
fieldset:first-of-type { margin-top:10px; }
legend {
    padding:0 12px;
    font-weight:600;
    font-size:.92rem;
    letter-spacing:.5px;
    color:var(--primary-darker);
}
.input-group {
    display:flex;
    flex-direction:column;
    gap:6px;
}
.input-group label {
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.9px;
    color:var(--accent2);
}
.input-group input,
.input-group select {
    padding:11px 13px;
    border:2px solid var(--border);
    border-radius:14px;
    font:600 0.88rem/1.2 'Inter',sans-serif;
    background:#fff;
    color:var(--text);
    outline:none;
    transition:.25s;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35),
                0 3px 8px -5px rgba(0,0,0,.18);
}
.input-group input:focus,
.input-group select:focus {
    border-color:var(--border);
    box-shadow:0 0 0 3px rgba(15,211,160,.35);
}
.checkbox-line { justify-content:flex-end; }
.checkbox-line label {
    font-size:.74rem;
    font-weight:600;
    text-transform:none;
    letter-spacing:.5px;
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--primary-darker);
}
.checkbox-line input { transform:scale(1.1); }

/* ================== BLOCS CONDITIONNELS ================== */
.conditional { display:none; }

/* ================== BOUTONS ================== */
.button-area {
    margin-top:34px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}
.button-area input[type=submit],
.action-btn {
    background:linear-gradient(90deg,var(--primary),var(--accent2));
    color:#fff!important;
    border:none;
    border-radius:19px;
    padding:14px 26px;
    font:600 .95rem/1 'Inter',sans-serif;
    letter-spacing:.5px;
    cursor:pointer;
    position:relative;
    box-shadow:0 10px 18px -10px rgba(0,40,110,.45),
               0 3px 7px -2px rgba(0,0,0,.25);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.35s cubic-bezier(.65,.05,.36,1);
}
.button-area input[type=submit]:hover,
.action-btn:hover {
    transform:translateY(-4px);
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    box-shadow:0 15px 24px -10px rgba(0,40,110,.55),
               0 5px 12px -3px rgba(0,0,0,.33);
}
.button-area input[type=submit]:active,
.action-btn:active { transform:translateY(0); }
.action-btn.secondary {
    background:linear-gradient(90deg,#0fd3a0,#00b782);
}
.action-btn.secondary:hover {
    background:linear-gradient(90deg,#00b782,#009e6d);
}

/* ====================================================
   TABLEAUX (utilisés sur la page résultats)
   ==================================================== */
table.data {
    width:100%;
    border-collapse:collapse;
    margin:14px 0 4px;
    background:rgba(255,255,255,.65);
    border:2px solid var(--border);
    overflow:hidden;
    border-radius:14px;
}
table.data th,table.data td {
    padding:11px 15px;
    text-align:left;
    font-size:.85rem;
    border-bottom:1px solid var(--table-border);
    vertical-align:top;
}
table.data tr:last-child td { border-bottom:none; }
table.data th {
    /* Gradient inversé (plus foncé côté texte) */
    background:linear-gradient(120deg,#e8fff8,#d9fcf3);
    font-weight:600;
    color:var(--primary-darker);
    letter-spacing:.5px;
    font-size:.75rem;
    text-transform:uppercase;
}
table.data th:first-child {
    background:linear-gradient(120deg,#d9fcf3,#e8fff8);
}
table.data th:first-child,
table.data td:first-child { width:58%; }
table.data th:last-child,
table.data td:last-child { width:42%; text-align:right; }
table.data .highlight td {
    background:#fff;
    font-weight:600;
}
table.data .total td {
    background:linear-gradient(90deg,var(--primary) 0%, var(--accent2) 100%);
    color:#fff;
    font-weight:700;
    font-size:.88rem;
}

/* ====================================================
   KPI (page résultats) – grille 5 colonnes
   ==================================================== */
.kpi-wrap {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin:8px 0 30px;
}
.kpi-card {
    background:#fff;
    border:2px solid var(--border);
    border-radius:14px;
    padding:12px 10px 14px;
    position:relative;
    box-shadow:var(--shadow-soft);
    overflow:hidden;
    min-width:0;
    transition:.3s;
}
.kpi-card h3 {
    margin:0 0 4px;
    font-size:.60rem;
    letter-spacing:.9px;
    text-transform:uppercase;
    color:var(--accent2);
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.kpi-card .val {
    font-size:1.05rem;
    font-weight:700;
    line-height:1.1;
    color:var(--primary);
    background:linear-gradient(90deg,var(--primary),var(--accent2));
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.kpi-card:before {
    content:'';
    position:absolute;
    width:150%;height:160%;
    top:-55%;left:50%;
    transform:translateX(-50%) rotate(25deg);
    background:linear-gradient(90deg,
        rgba(15,211,160,.12),
        rgba(0,91,187,.12));
    opacity:0;
    transition:.45s;
}
.kpi-card:hover {
    border-color:var(--border);
    box-shadow:0 8px 18px -6px rgba(0,40,110,.26);
}
.kpi-card:hover:before { opacity:.6; }

/* Responsive KPI générique */
@media (max-width:760px){
    .kpi-card .val { font-size:.95rem; }
    .kpi-card h3 { font-size:.55rem; }
}
@media (max-width:600px){
    .kpi-card .val { font-size:.9rem; }
}

/* ================== NOTES ================== */
.small-note {
    margin-top:22px;
    font-size:.69rem;
    letter-spacing:.3px;
    line-height:1.3;
    color:#114d41;
    opacity:.9;
}

/* ================== RESPONSIVE GLOBAL ================== */
@media (max-width:820px){
    .rlav-app { padding:24px 22px 34px; border-radius:26px; }
    h1 { font-size:1.74rem; }
    fieldset { padding:20px 18px 24px; }
}
@media (max-width:560px){
    body { font-size:15px; }
    h1 { font-size:1.55rem; }
    .button-area { gap:12px; }
}

/* ================== ACCESSIBILITE ================== */
:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:2px;
}

/* ====================================================
   NOTES:
   - Pour resserrer encore la page résultats: changer .rlav-results max-width.
   - Pour une largeur fluide type "lecture": utiliser width:clamp(320px, 90ch, 760px);
   - Pour aligner les valeurs des tables à gauche: retire text-align:right dans table.data td:last-child.
   ==================================================== */