/* =============================
   FinTrackPredict – Real Estate Profitability CSS
   Matches the visual style of credit2.css
   Author: Julien (styled by ChatGPT)
   ============================= */

/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary-gradient: linear-gradient(135deg, #2146ee 0%, #503768 100%);
  --secondary-gradient: linear-gradient(135deg, #f7000c 0%, #c5001a 100%);
  --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --dark: #1a1a2e;
  --dark-light: #16213e;
  --text-light: #e9eefc;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--dark);
  color: #fff;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background animated */
.background-pattern {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(45deg, #667eea, #3b0175, #8f0f16, #6d0b18);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}
.background-pattern::before,
.background-pattern::after {
  content: ""; position: absolute; opacity: .12; border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}
.background-pattern::before { top: 20%; left: 10%; width: 90px; height: 90px; background: var(--success-gradient); }
.background-pattern::after { bottom: 15%; right: 8%; width: 120px; height: 120px; background: var(--warning-gradient); border-radius: 24px; animation-delay: 2s; }

@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-18px) rotate(180deg)} }
 .card {
      background: var(--surface);
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: var(--shadow-lg);
      margin: 2rem 0;
      border: 1px solid var(--border);
      backdrop-filter: blur(10px);
    }
     /* Features Section */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 3rem 0;
    }

    .feature-card{
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 1rem;
      padding: 2rem;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: transform 0.3s ease;
      text-decoration: none;
      list-style: none;
      
    }
    .feature-card, li{
          text-decoration: none;
      list-style: none;
    }

    .feature-card:hover {
      transform: translateY(-5px);
    }

    .feature-icon {
      width: 4rem;
      height: 4rem;
      background: var(--gradient);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      color: white;
    }

    .feature-card h3 {
      color: white;
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }

    .feature-card p {
      color: rgba(255, 255, 255, 0.8);
    }


    .card h2 {
      color: var(--primary);
      margin-bottom: 1.5rem;
      font-size: 2rem;
      font-weight: 700;
    }
/* Language switch */
.lang-switch { position: fixed; top: .75rem; left: .75rem; z-index: 1000; display: inline-flex; gap: .5rem; align-items: center; }
.lang-btn {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all .3s ease;
  font-size: .9rem; font-weight: 600;
}
.lang-btn:hover,
.lang-btn[aria-pressed="true"],
.lang-btn.active { background: var(--primary-gradient); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(33,70,238,.45); }

/* Header */
header {
  text-align: center;
  padding: 4rem 2rem 2rem;
  background: rgba(26,26,46,.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}
header h1 {
  font-size: 2.8rem; margin-bottom: .75rem;
  background: var(--primary-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: slideUp 1s ease both;
}
header h2 { font-size: 1.15rem; color: rgba(255,255,255,.85); animation: slideUp 1s ease .15s both; }

/* Nav */
nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; animation: slideUp 1s ease .3s both; }
nav a {
  color:#fff; text-decoration: none; padding: .75rem 1.25rem; border-radius: 24px;
  background: var(--glass); border: 1px solid var(--glass-border); position: relative; overflow: hidden;
  transition: all .3s ease; font-size: .95rem;
}
nav a:hover { background: var(--primary-gradient); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(33,70,238,.4); }
nav a::before { content:""; position:absolute; inset:0; left:-100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); transition:left .5s ease; }
nav a:hover::before { left: 100%; }

/* Main layout */
main { display:flex; flex-direction: column; gap: 2rem; align-items: center; padding: 2rem 1rem 3rem; min-height: 65vh; }

/* Card section base */
.form-section,
.operations {
  width: 100%; max-width: 1100px; position: relative; overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  padding: 2.5rem;
  box-shadow: 0 22px 60px rgba(0,0,0,.32);
  animation: slideUp 1s ease .45s both;
}
.form-section::before,
.operations::before {
  content:""; position:absolute; inset:0; background: var(--primary-gradient); opacity:.03; z-index:-1;
}

.form-section h2, .operations h2 {
  font-size: 2.2rem; text-align:center; margin-bottom: 1.4rem;
  background: var(--success-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Floating deco */
.floating-elements::before,
.floating-elements::after { content:""; position:absolute; border-radius: 50%; background: var(--warning-gradient); opacity:.1; animation: floatSlow 8s ease-in-out infinite; }
.floating-elements::before{ top:10%; right:8%; width:64px; height:64px; }
.floating-elements::after{ bottom:16%; left:12%; width:44px; height:44px; animation-delay: 4s; }
@keyframes floatSlow { 0%,100%{ transform: translateY(0) scale(1)} 50%{ transform: translateY(-14px) scale(1.06)} }

/* Form styles */
#credit { display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 1.2rem 1.5rem; align-items: end; }
#credit label { display:flex; flex-direction: column; gap: .55rem; font-weight: 600; color: rgba(255,255,255,.9); }
#credit input {
  padding: 1.05rem; font-size: 1.05rem; color:#fff; border-radius: 14px; outline: none;
  background: var(--glass);
  border: 2px solid var(--glass-border);
  transition: all .25s ease;
}
#credit input::placeholder { color: rgba(255,255,255,.7); }
#credit input:focus { border-color: #4facfe; box-shadow: 0 0 18px rgba(79,172,254,.28); transform: translateY(-1px); background: var(--glass-strong); }
#credit input:valid { border-color: #43e97b; }

#btn { grid-column: 1 / -1; justify-self: center; margin-top: .3rem; }
#btn {
  background: var(--primary-gradient);
  border: none; padding: 1.1rem 1.6rem; border-radius: 16px; color:#fff;
  font-size: 1.15rem; font-weight: 700; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
#btn:hover { transform: translateY(-3px); box-shadow: 0 15px 36px rgba(33,70,238,.42); animation: pulse 1.6s infinite; }
#btn:active { transform: translateY(-1px); }
#btn::before{ content:""; position:absolute; top:50%; left:50%; width:0; height:0; background: rgba(255,255,255,.22); border-radius:50%; transform: translate(-50%,-50%); transition: .5s ease; }
#btn:active::before { width: 320px; height: 320px; }

/* Inline calc result container (kept for compatibility) */
#resultatCredit { margin-top: 1.2rem; text-align: center; padding: 1.2rem; background: var(--dark-light); border-radius: 14px; border: 1px solid var(--glass-border); }
#resultatCredit p { font-size: 1.05rem; color: rgba(255,255,255,.92); }
#resultatCredit strong { background: var(--success-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }

/* Results grid */
.tableaux {
  margin-top: .5rem;
  display: grid; grid-template-columns: repeat(4, minmax(220px,1fr)); gap: 1rem;
}
.colonne {
  background: var(--dark-light);
  border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 1.25rem 1.2rem;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
  position: relative; overflow: hidden;
}
.colonne::after { content:""; position:absolute; inset:0; background: var(--primary-gradient); opacity:.02; z-index:-1; }
.colonne:hover { background: var(--glass); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.34); }

.colonne h3 { font-size: 1.1rem; margin-bottom: .6rem; color: #dfe7ff; letter-spacing: .2px; }
.colonne ul { list-style: none; font-size: 1.35rem; font-weight: 800; }

/* Emphasis colors for dynamic values */
#loyerAnnuel, #rentabiliteBrute, #rentabiliteNette, #cashFlow {
  background: var(--success-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Footer */
footer { background: var(--dark); border-top: 1px solid var(--glass-border); padding: 2rem 1rem; text-align: center; margin-top: .5rem; }
footer p { color: rgba(255,255,255,.85); margin-bottom: .8rem; }
.footer-links { display:flex; justify-content:center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.footer-links a { color: rgba(255,255,255,.85); text-decoration:none; padding:.45rem .9rem; border:1px solid var(--glass-border); border-radius:20px; transition: all .25s ease; }
.footer-links a:hover { background: var(--glass); color:#4facfe; transform: translateY(-2px); }

footer button { background: var(--warning-gradient); border: none; padding: .9rem 1.4rem; border-radius: 22px; color:#fff; font-size: 1rem; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease; margin:.35rem; font-weight:700; }
footer button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.3); }

/* Cookie banner */
#cookie-banner { position: fixed; left:0; right:0; bottom:0; z-index:1000; background: rgba(26,26,46,.95); backdrop-filter: blur(20px); color:#fff; text-align:center; padding: 1.2rem; border-top: 1px solid var(--glass-border); display:none; }
#accept-cookies { margin-left: .75rem; padding: .7rem 1.2rem; border: none; border-radius: 24px; background: var(--warning-gradient); color:#fff; font-weight:700; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease; }
#accept-cookies:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(67,233,123,.38); }

/* Animations */
@keyframes slideUp { from{opacity:0; transform: translateY(28px)} to{opacity:1; transform: translateY(0)} }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(79,172,254,.42)} 70%{box-shadow:0 0 0 16px rgba(79,172,254,0)} 100%{box-shadow:0 0 0 0 rgba(79,172,254,0)} }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--primary-gradient); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary-gradient); }

/* Focus states for a11y */
button:focus, input:focus, a:focus { outline: 2px solid #4facfe; outline-offset: 2px; }

/* Responsive */
@media (max-width: 992px) {
  #credit { grid-template-columns: 1fr; }
  .tableaux { grid-template-columns: repeat(2, minmax(200px,1fr)); }
}
@media (max-width: 768px) {
  header { padding: 3.2rem 1rem 1.6rem; }
  header h1 { font-size: 2.1rem; }
  header h2 { font-size: 1rem; }
  nav a { padding: .6rem .95rem; font-size: .85rem; }
  .form-section, .operations { padding: 1.8rem; }
}
@media (max-width: 560px) {
  .tableaux { grid-template-columns: 1fr; }
  .lang-switch { top: .5rem; left: .5rem; }
  .lang-btn { padding: .4rem .8rem; font-size: .8rem; }
}

/* Subtle hover lift for cards */
.form-section:hover, .operations:hover { box-shadow: 0 26px 70px rgba(0,0,0,.4); }

/* Result pulse for JS class hook */
.colonne.updated, #resultatCredit.updated { animation: resultPulse .6s ease; }
@keyframes resultPulse { 0%{ transform: scale(1)} 50%{ transform: scale(1.02)} 100%{ transform: scale(1)} }