/* ==========================================================================
   MBB — Styles complémentaires (charte inchangée : bleu MBB / ambre)
   ========================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { overflow-x: hidden; }
[x-cloak], .is-hidden { display: none !important; }

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.gradient-text {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.view-section { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Accessibilité : lien d'évitement + focus visible */
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: #f59e0b; color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; border-radius: 6px; }

/* Navigation : état "scrollé" géré par une seule classe */
#navbar { transition: background-color .3s, box-shadow .3s, padding .3s; }
#navbar.is-scrolled { background: rgba(255,255,255,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px -8px rgba(6,42,74,.25); padding-top: 0; padding-bottom: 0; }
#navbar .nav-fg { color: #fff; }
#navbar.is-scrolled .nav-fg { color: #062a4a; }
#navbar .nav-link { color: rgba(255,255,255,.9); }
#navbar.is-scrolled .nav-link { color: #4b5563; }
#navbar .nav-link:hover, #navbar .nav-link.is-active { color: #f59e0b; }
#navbar .logo-stroke { stroke: #fff; transition: stroke .3s; }
#navbar.is-scrolled .logo-stroke { stroke: #062a4a; }
#navbar .nav-ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
#navbar.is-scrolled .nav-ghost { background: #f3f4f6; border-color: #e5e7eb; color: #062a4a; }
.nav-link.is-active::after { content: ''; display: block; height: 2px; background: #f59e0b; border-radius: 2px; margin-top: 2px; }

#mobile-menu { transition: transform .3s ease-in-out, opacity .3s ease-in-out; }

/* Timeline du déroulé */
.timeline { position: relative; }
.timeline::before { content: ''; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#f59e0b, #0b4f8a); opacity: .35; }
@media (min-width: 768px) { .timeline::before { left: 0; right: 0; top: 19px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, #f59e0b, #0b4f8a); } }

/* Formulaires */
.field-label { display: block; font-size: .875rem; font-weight: 600; color: #374151; margin-bottom: .35rem; }
.field-label .req { color: #d97706; }
.field-input { width: 100%; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid #e5e7eb; background: #f9fafb; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; font-size: .95rem; }
.field-input:focus { border-color: #0b4f8a; box-shadow: 0 0 0 3px rgba(11,79,138,.15); background: #fff; }
.field-input[aria-invalid="true"] { border-color: #dc2626; background: #fef2f2; }
.field-help { font-size: .75rem; color: #6b7280; margin-top: .3rem; }
.field-error { font-size: .78rem; color: #b91c1c; margin-top: .3rem; font-weight: 500; }
select.field-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; }

.choice { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: .75rem; border: 1px solid #e5e7eb; cursor: pointer; transition: all .15s; }
.choice:hover { background: #f9fafb; }
.choice:has(input:checked) { border-color: #0b4f8a; background: rgba(11,79,138,.05); }
.choice input { width: 1rem; height: 1rem; accent-color: #0b4f8a; }

.dropzone.is-drag { border-color: #f59e0b; background: rgba(245,158,11,.06); }

.btn-loading { pointer-events: none; opacity: .8; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Étapes du formulaire Story */
.step-pill { transition: all .2s; }
.step-pill.is-done { background: #0b4f8a; color: #fff; border-color: #0b4f8a; }

dialog::backdrop { background: rgba(6,42,74,.55); backdrop-filter: blur(3px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}