:root{
  --brand:#ff7a1a;
  --brand-dark:#e56b10;
  --muted:#6c757d;
  --primary:#1A3E6A;
  --primary-dark:#122c4d;
  --accent:#C9A84C;
  --accent-light:#FFF7ED;
  --border:#e9eef2;
  --text:#111827;
  --surface:#ffffff;
  --bg-soft:#f8fafc;
  --success:#10B981;
  --danger:#EF4444;
  --font-display: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

body{font-family:var(--font-body); background:var(--bg-soft); color:var(--text);}

/* ============================================================
   HERO (page d'accueil connectée)
   ============================================================ */
.hero{
  background-image: linear-gradient(120deg, rgba(26,62,106,0.92), rgba(102,16,242,0.78)), url('/static/img/hero.jpg');
  background-size:cover; background-position:center; color:white;
  padding:80px 0; border-radius:0 0 28px 28px;
}
.hero .lead{font-size:1.1rem; opacity:0.92}
.hero h1{font-size:2.6rem; line-height:1.05; margin-bottom:0.6rem}

.card-feature{border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(16,24,40,0.08); transition:transform .25s ease, box-shadow .25s ease}
.card-feature:hover{transform:translateY(-6px); box-shadow:0 14px 40px rgba(16,24,40,0.12)}

.btn-primary{background:var(--brand); border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark); border-color:var(--brand-dark)}
.navbar-brand{font-weight:700; color:var(--brand)}
.footer-cta{background:#fff4ee; border-radius:10px; padding:18px}

.card{border:none; border-radius:12px}
.card p, .card .small{color:var(--muted)}

/* landing animations */
.fade-in-up{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
.card{opacity:1; transform:none}

/* ============================================================
   AUTH PAGES (login + signup) — design unifié
   ============================================================ */
.auth-page{
  min-height:100vh;
  display:flex;
  background:linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.auth-aside{
  flex:1;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff;
  padding:4rem 3rem;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.auth-aside::before{
  content:'';
  position:absolute; right:-100px; top:-100px;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(201,168,76,0.2), transparent 70%);
  border-radius:50%;
}
.auth-aside-content{position:relative; z-index:1; max-width:440px}
.auth-aside h2{font-size:2rem; font-weight:700; line-height:1.2; margin-bottom:1rem}
.auth-aside h2 em{font-style:normal; color:var(--accent)}
.auth-aside p{opacity:0.85; font-size:1rem; line-height:1.6}

.auth-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:2.5rem; position:relative; z-index:1}
.auth-stat{background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:1rem}
.auth-stat .num{font-size:1.6rem; font-weight:700; color:#fff}
.auth-stat .label{font-size:0.78rem; opacity:0.75; text-transform:uppercase; letter-spacing:0.05em; margin-top:0.2rem}

.auth-aside-footer{position:relative; z-index:1; font-size:0.8rem; opacity:0.6}

.auth-main{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:3rem 1.5rem;
}
.auth-wrapper{width:100%; max-width:440px}

.auth-header{text-align:center; margin-bottom:2rem}
.auth-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px;
  background:var(--primary); border-radius:16px;
  margin-bottom:1.25rem; font-size:1.6rem; color:#fff;
}
.auth-header h1{font-family:var(--font-display); font-size:1.75rem; color:var(--primary); margin-bottom:0.4rem; font-weight:700}
.auth-header p{color:var(--muted); font-size:0.9rem; margin:0}

.auth-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:2.25rem 2rem;
  box-shadow:0 4px 32px rgba(15,43,76,0.08);
}

.field-group{margin-bottom:1.1rem}
.field-group label{display:block; font-size:0.78rem; font-weight:600; color:var(--primary); letter-spacing:0.03em; margin-bottom:0.4rem; text-transform:uppercase}
.field-wrap{position:relative}
.field-icon{position:absolute; left:0.9rem; top:50%; transform:translateY(-50%); font-size:1rem; pointer-events:none; opacity:0.45}
.field-group input,
.field-group select{
  width:100%;
  padding:0.7rem 0.9rem 0.7rem 2.5rem;
  border:1.5px solid var(--border); border-radius:10px;
  font-family:var(--font-body); font-size:0.92rem; color:var(--text);
  background:#fff; transition:border-color 0.18s, box-shadow 0.18s; outline:none;
}
.field-group input:focus,
.field-group select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,168,76,0.15)}
.field-group .field-help{font-size:0.75rem; color:var(--muted); margin-top:0.35rem}
.field-group .field-error{font-size:0.78rem; color:var(--danger); margin-top:0.35rem}

.toggle-pw{position:absolute; right:0.9rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1rem; opacity:0.45; padding:0}
.toggle-pw:hover{opacity:0.85}

.form-footer{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:0.5rem}
.remember{display:flex; align-items:center; gap:0.4rem; font-size:0.82rem; color:var(--muted); cursor:pointer; margin:0}
.remember input[type="checkbox"]{accent-color:var(--accent); width:15px; height:15px}
.forgot-link{font-size:0.82rem; color:var(--accent); text-decoration:none; font-weight:600}
.forgot-link:hover{text-decoration:underline}

.btn-auth{
  width:100%;
  background:var(--primary); color:#fff;
  font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  padding:0.85rem; border-radius:10px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  transition:background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-auth:hover{background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 8px 20px rgba(26,62,106,0.25)}
.btn-auth:disabled{opacity:0.55; cursor:not-allowed; transform:none}

.divider{display:flex; align-items:center; gap:0.75rem; margin:1.5rem 0; color:var(--muted); font-size:0.78rem}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--border)}

.signup-prompt{text-align:center; font-size:0.88rem; color:var(--muted); margin-top:1.5rem}
.signup-prompt a{color:var(--accent); font-weight:600; text-decoration:none}
.signup-prompt a:hover{text-decoration:underline}

.alert-error{background:#FEF2F2; border:1px solid #FECACA; border-radius:10px; color:#991B1B; font-size:0.85rem; padding:0.75rem 1rem; margin-bottom:1.25rem; display:flex; align-items:flex-start; gap:0.5rem}
.alert-error ul{margin:0; padding-left:1rem}
.alert-success{background:#ECFDF5; border:1px solid #A7F3D0; border-radius:10px; color:#065F46; font-size:0.85rem; padding:0.75rem 1rem; margin-bottom:1.25rem}

.secure-badge{display:flex; align-items:center; justify-content:center; gap:0.4rem; color:var(--muted); font-size:0.75rem; margin-top:1.25rem}
.secure-badge .dot{width:6px; height:6px; background:var(--success); border-radius:50%; display:inline-block; animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* Role picker (signup) */
.role-picker{display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; margin-bottom:1.25rem}
.role-card{
  position:relative;
  border:1.5px solid var(--border); border-radius:12px;
  padding:0.9rem 0.6rem; text-align:center; cursor:pointer;
  transition:border-color 0.18s, background 0.18s, transform 0.15s;
  background:#fff;
}
.role-card:hover{border-color:#C9A84C77; transform:translateY(-2px)}
.role-card input[type="radio"]{position:absolute; opacity:0; pointer-events:none}
.role-card input[type="radio"]:checked + .role-content{color:var(--primary)}
.role-card:has(input:checked){border-color:var(--accent); background:#FFFDF5; box-shadow:0 4px 14px rgba(201,168,76,0.15)}
.role-card .role-icon{font-size:1.6rem; margin-bottom:0.3rem; display:block}
.role-card .role-name{font-size:0.82rem; font-weight:600; color:var(--text)}
.role-card .role-desc{font-size:0.7rem; color:var(--muted); margin-top:0.2rem; line-height:1.3}

.row-2{display:grid; grid-template-columns:1fr 1fr; gap:0.7rem}

.password-hint{font-size:0.72rem; color:var(--muted); margin-top:0.35rem; line-height:1.4}

/* Mobile: aside disparaît */
@media (max-width: 991px){
  .auth-page{flex-direction:column}
  .auth-aside{display:none}
  .auth-main{padding:2rem 1rem}
  .hero{padding:56px 0; border-radius:0}
  .hero h1{font-size:1.8rem}
}

/* Page wrapper */
.page-wrapper{max-width:1100px; margin:26px auto; padding:0 16px}

/* ============================================================
   ONBOARDING (sélection des activités)
   ============================================================ */
.onboarding-page{min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1rem}
.onboarding-header{text-align:center; margin-bottom:2.5rem; max-width:560px}
.onboarding-header .step-pill{display:inline-block; background:var(--accent-light); color:#7A5F1A; font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:0.3rem 0.9rem; border-radius:99px; margin-bottom:1rem}
.onboarding-header h1{font-family:var(--font-display); font-size:clamp(1.6rem, 3vw, 2.2rem); color:var(--primary); margin-bottom:0.75rem; line-height:1.25}
.onboarding-header h1 em{color:var(--accent); font-style:normal}
.onboarding-header p{color:var(--muted); font-size:0.95rem; line-height:1.6; margin:0}

.activities-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem; width:100%; max-width:900px; margin-bottom:2rem}
.activity-card{
  background:#fff; border:2px solid var(--border); border-radius:14px;
  padding:1.5rem 1.25rem; cursor:pointer;
  transition:border-color 0.18s, box-shadow 0.18s, transform 0.15s;
  position:relative; user-select:none;
}
.activity-card:hover{border-color:#C9A84C88; box-shadow:0 4px 20px rgba(201,168,76,0.12); transform:translateY(-2px)}
.activity-card.selected{border-color:var(--accent); background:#FFFDF5; box-shadow:0 4px 20px rgba(201,168,76,0.18)}
.activity-card .check{position:absolute; top:0.75rem; right:0.75rem; width:22px; height:22px; border-radius:50%; border:2px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; transition:background 0.18s, border-color 0.18s}
.activity-card.selected .check{background:var(--accent); border-color:var(--accent)}
.activity-card .check svg{opacity:0; transition:opacity 0.15s}
.activity-card.selected .check svg{opacity:1}
.activity-icon{width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:0.9rem; transition:background 0.18s}
.activity-card h5{font-weight:600; font-size:0.9rem; color:var(--text); margin:0 0 0.3rem; line-height:1.3}
.activity-card p{font-size:0.78rem; color:var(--muted); margin:0; line-height:1.5}

.selection-counter{text-align:center; font-size:0.85rem; color:var(--muted); margin-bottom:1.5rem; height:1.2em; transition:color 0.2s}
.selection-counter strong{color:var(--accent)}

.btn-confirm{
  background:var(--primary); color:#fff;
  font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  padding:0.85rem 3rem; border-radius:10px; border:none; cursor:pointer;
  transition:background 0.2s, transform 0.15s, opacity 0.2s;
  display:inline-flex; align-items:center; gap:0.5rem;
}
.btn-confirm:hover:not(:disabled){background:var(--primary-dark); transform:translateY(-1px)}
.btn-confirm:disabled{opacity:0.4; cursor:not-allowed; transform:none}
.btn-confirm .arrow{transition:transform 0.2s}
.btn-confirm:hover:not(:disabled) .arrow{transform:translateX(4px)}

[data-color="blue"] .activity-icon{background:#EFF6FF}
[data-color="green"] .activity-icon{background:#F0FDF4}
[data-color="amber"] .activity-icon{background:#FFFBEB}
[data-color="indigo"] .activity-icon{background:#EEF2FF}
[data-color="rose"] .activity-icon{background:#FFF1F2}
[data-color="teal"] .activity-icon{background:#F0FDFA}
[data-color="orange"] .activity-icon{background:#FFF7ED}
[data-color="purple"] .activity-icon{background:#FAF5FF}
.activity-card.selected[data-color="blue"] .activity-icon{background:#DBEAFE}
.activity-card.selected[data-color="green"] .activity-icon{background:#DCFCE7}
.activity-card.selected[data-color="amber"] .activity-icon{background:#FEF3C7}
.activity-card.selected[data-color="indigo"] .activity-icon{background:#E0E7FF}
.activity-card.selected[data-color="rose"] .activity-icon{background:#FFE4E6}
.activity-card.selected[data-color="teal"] .activity-icon{background:#CCFBF1}
.activity-card.selected[data-color="orange"] .activity-icon{background:#FFEDD5}
.activity-card.selected[data-color="purple"] .activity-icon{background:#F3E8FF}