/* ════════════════════════════════════════════════════════════════════
   Charte 2026 — « minimalisme chaleureux »
   Chargée APRÈS les styles inline de chaque page : elle ne fait que
   surcharger. Pour revenir à l'ancienne charte, retirer le <link>.

   Tendances retenues (koul.io, UI 2026) :
   - Minimalisme : plus d'air, titres fins et élégants (serif léger)
   - Interfaces chaleureuses : tons crème, coins très arrondis
   - Glassmorphism discret : barres de navigation en verre dépoli
   - Profondeur douce (3D light) : ombres en couches, cartes qui flottent
   Écartée : palettes saturées en aplats (ton trop « soda » pour de
   l'introspection).
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&display=swap');

:root {
  --bg: #FAF8F4;
  --card: rgba(255, 255, 255, 0.78);
  --card-hover: rgba(255, 255, 255, 0.95);
  --border: rgba(28, 25, 23, 0.07);
  --border-light: rgba(28, 25, 23, 0.14);
  --radius: 16px;
  --radius-lg: 28px;
  --font-display: 'Fraunces', Georgia, serif;
  /* Ombres en couches : proche + diffuse, teintée chaud */
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.04), 0 4px 12px rgba(60, 40, 20, 0.04);
  --shadow-md: 0 2px 4px rgba(60, 40, 20, 0.04), 0 12px 32px rgba(60, 40, 20, 0.08);
  --shadow-lg: 0 4px 8px rgba(60, 40, 20, 0.05), 0 24px 56px rgba(60, 40, 20, 0.12);
  --glass: rgba(250, 248, 244, 0.65);
}

/* ── Fond « aurore » : halos flous aux couleurs du site, sous le verre ── */
body { background: var(--bg); }
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 40vmax at 15% 10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    radial-gradient(35vmax 35vmax at 90% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(30vmax 30vmax at 50% 95%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%);
  filter: blur(40px);
}

/* ── Titres : serif fin, léger, élégant ── */
.hero h1, .section-title, .card-title, .about-right h3, .modal-form-title,
#form-header h1, h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero h1 { font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; }
.hero h1 span, #form-header h1 { font-style: italic; }
.card-title { font-weight: 500; }

/* ── Navigation en verre dépoli ── */
nav, #form-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
#form-nav { position: fixed; }

/* ── Plus d'air ── */
.hero { padding: 120px 24px 88px; }
.section { padding: 96px 0; }

/* ── Cartes : verre léger + profondeur douce ── */
.card, .step, .about, .faq-item, .report-preview-wrap, .modal-info-box, .modal, .intro-block {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card, .step, .about, .report-preview-wrap, .modal-info-box, .modal { border-radius: var(--radius-lg); }
.card { transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s, background 0.35s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(255, 255, 255, 0.9); }
.card-avance { box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.card-icon { filter: drop-shadow(0 6px 10px rgba(60, 40, 20, 0.15)); }

/* ── Boutons : pilules, relief doux ── */
.hero-cta, .btn-start, .btn-next, .btn-submit, .modal-form-cta, .intro-start-btn {
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent);
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}
.hero-cta:hover, .btn-start:hover, .btn-next:hover, .btn-submit:hover, .modal-form-cta:hover, .intro-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 14px 28px color-mix(in srgb, var(--primary) 34%, transparent);
}
.btn-prev, .btn-secondary, .btn-info, #save-btn { border-radius: 999px; }

/* ── Formulaires : options en cartes douces ── */
.radio-option, .checkbox-option, .form-input, .form-textarea {
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
}
.radio-option:has(input:checked), .checkbox-option:has(input:checked) {
  box-shadow: 0 0 0 2px var(--primary), var(--shadow-sm);
}
#progress-bar-container { background: transparent; }
#progress-bar { border-radius: 0 999px 999px 0; }

/* ── Accessibilité : moins de mouvement si demandé ── */
@media (prefers-reduced-motion: reduce) {
  .card, .card:hover, .hero-cta:hover, .btn-start:hover, .btn-next:hover { transform: none; transition: none; }
}