/* Styles additionnels et overrides légers pour une apparence professionnelle */
:root {
  --brand: #4f46e5; /* indigo-600 */
  --brand-hover: #4338ca; /* indigo-700 */
  --text-muted: #6b7280; /* gray-500 */
  --border: #e5e7eb; /* gray-200 */
}

/* Boutons génériques */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:.5rem; font-weight:600; transition:all .2s ease; }
.btn:focus { outline: 2px solid rgba(79,70,229,.3); outline-offset:2px; }

.btn-primary { background: var(--brand); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.btn-primary:hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow:0 6px 24px rgba(79,70,229,.25); }

.btn-outline { border:1px solid var(--border); color:#111827; background:#fff; }
.btn-outline:hover { border-color:#c7cdd4; box-shadow:0 2px 6px rgba(0,0,0,.06); transform: translateY(-1px); }

/* Liens de navigation */
.nav-link { font-size:.875rem; color:#374151; padding:.375rem .5rem; border-radius:.375rem; }
.nav-link:hover { color:var(--brand); background:rgba(79,70,229,.08); }
.nav-link-active { color:var(--brand); font-weight:600; }

/* Cartes */
.card { border:1px solid var(--border); border-radius:.75rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card:hover { box-shadow:0 3px 10px rgba(0,0,0,.08); }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem; padding:.125rem .5rem; border-radius:9999px; border:1px solid var(--border); color:#374151; background:#f9fafb; }
.badge-version { border-color:#c7d2fe; color:#3730a3; background:#eef2ff; }
.badge-status { border-color:#d1fae5; color:#065f46; background:#ecfdf5; }

/* Dark mode tweaks (complément Tailwind) */
.dark .btn-outline { color:#e5e7eb; background:#111827; border-color:#374151; }
.dark .nav-link { color:#d1d5db; }
.dark .nav-link:hover { color:#a5b4fc; background:rgba(79,70,229,.15); }
.dark .card { background:#1f2937; border-color:#374151; }
.dark .badge { color:#e5e7eb; background:#111827; border-color:#374151; }
.dark .badge-version { color:#c7d2fe; background:#1f2937; border-color:#4f46e5; }
.dark .badge-status { color:#34d399; background:#111827; border-color:#10b981; }

/* ——— Modernisation additionnelle ——— */
/* Typo affinée */
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing:.01em; }

/* Hero modernisé (arrière-plan doux + légère mise en avant) */
.hero { position:relative; padding-top:3rem; padding-bottom:3rem; }
.hero::before { content:""; position:absolute; inset:-10% -10%; background:
  radial-gradient(800px 400px at 10% 0%, rgba(79,70,229,.12), transparent 60%),
  radial-gradient(600px 300px at 90% 20%, rgba(14,165,233,.10), transparent 60%);
  pointer-events:none; z-index:-1;
}
.hero h1 { line-height:1.15; }
.hero .actions .btn { transform: translateZ(0); will-change: transform, box-shadow; }

/* Cartes en verre (glass) pour encarts informatifs) */
.glass { background: rgba(255,255,255,.6); border:1px solid rgba(229,231,235,.7); backdrop-filter: blur(8px); border-radius:.75rem; }
.dark .glass { background: rgba(17,24,39,.35); border-color: rgba(55,65,81,.6); }

/* Accent de section (titre dégradé) */
.section-title { background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); -webkit-background-clip: text; background-clip:text; color:transparent; }

/* Footer harmonisé */
.site-footer { background: rgba(255,255,255,.65); border-top: 1px solid var(--border); }
.site-footer .copyright { color: var(--text-muted); }
.dark .site-footer { background: rgba(17,24,39,.6); border-top-color:#374151; }
.dark .site-footer .copyright { color:#9ca3af; }

/* Formulaires harmonisés */
.label { font-size:.875rem; color:#374151; }
.dark .label { color:#d1d5db; }

.input { width:100%; background:#ffffff; color:#000000; border:1px solid var(--border); border-radius:.5rem; padding:.5rem .75rem; transition: box-shadow .2s ease, border-color .2s ease, transform .08s ease; font-weight: 500; }
.input::placeholder { color:#6b7280; }
.input:hover { border-color:#c7cdd4; }
.input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,70,229,.25); }
.dark .input { background:#1f2937; color:#ffffff; border-color:#4b5563; }
.dark .input::placeholder { color:#9ca3af; }
.dark .input:hover { border-color:#6b7280; }
.dark .input:focus { border-color:#818cf8; box-shadow:0 0 0 3px rgba(129,140,248,.35); }

.select { width:100%; background:#fff; color:#111827; border:1px solid var(--border); border-radius:.5rem; padding:.5rem .75rem; }
.dark .select { background:#111827; color:#e5e7eb; border-color:#374151; }

.textarea { width:100%; min-height:120px; background:#fff; color:#111827; border:1px solid var(--border); border-radius:.5rem; padding:.5rem .75rem; }
.dark .textarea { background:#111827; color:#e5e7eb; border-color:#374151; }

/* Fallback pour éléments sans classes utilitaires */
input:not(.input), select:not(.select), textarea:not(.textarea) {
  color:#111827; background:#ffffff; border:1px solid var(--border); border-radius:.5rem; padding:.5rem .75rem;
}
input:not(.input)::placeholder, textarea:not(.textarea)::placeholder { color:#6b7280; }
.dark input:not(.input), .dark select:not(.select), .dark textarea:not(.textarea) {
  color:#ffffff; background:#1f2937; border-color:#374151;
}
.dark input:not(.input)::placeholder, .dark textarea:not(.textarea)::placeholder { color:#9ca3af; }

/* Form container width on desktop */
.form-wrap { width:100%; max-width:640px; margin-left:auto; margin-right:auto; }
@media (min-width: 1280px) { .form-wrap { max-width:560px; } }

/* Option compacte (si nécessaire) */
.input.compact { padding:.375rem .625rem; }
.select.compact, .textarea.compact { padding:.375rem .625rem; }
.form-card { border:1px solid var(--border); border-radius:.75rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.dark .form-card { background:#1f2937; border-color:#374151; }

.form-help { font-size:.75rem; color:#6b7280; }
.dark .form-help { color:#9ca3af; }

.form-error { font-size:.875rem; color:#b91c1c; }
.dark .form-error { color:#f87171; }

/* Group spacing */
.form-group { display:grid; gap:.375rem; }

/* Align actions */
.form-actions { display:flex; gap:.5rem; align-items:center; }

/* Helpers responsive généraux */
img { max-width: 100%; height: auto; }
html, body { overflow-x: hidden; }

/* Compact desktop sizing for inputs to avoid oversized fields */
@media (min-width: 1024px) {
  /* Apply to both custom classes and fallback elements */
  .input, .select, .textarea,
  input, select, textarea {
    padding: 0.5rem 0.75rem; /* reduce vertical and horizontal padding */
    min-height: 2.25rem;     /* smaller height than default */
    font-size: 0.95rem;      /* slightly smaller text */
    line-height: 1.25rem;
  }

  /* Tighten vertical rhythm between form groups on desktop */
  .form-group {
    margin-bottom: 0.75rem;
  }
}