/* =========================================================================
   AH Développement — Bibliothèque de composants UI
   ========================================================================= */

/* ---------- Focus clavier ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; }
.input:focus-visible, .select:focus-visible, textarea.input:focus-visible { outline: none; }
.card-hover:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--border-2); }
.chip:focus-visible { border-color: var(--accent); color: var(--accent); }
.chip.active:focus-visible { color: var(--accent-contrast); }

/* ---------- Layout utilitaires ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-6); }
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.gap-5{gap:var(--sp-5)}.gap-6{gap:var(--sp-6)}
.grow{flex:1}.center{align-items:center;justify-content:center}
.muted{color:var(--text-muted)}.faint{color:var(--text-faint)}.t2{color:var(--text-2)}
.small{font-size:13px}.tiny{font-size:11.5px}.big{font-size:18px}
.bold{font-weight:700}.semi{font-weight:600}.mono{font-family:var(--font-mono)}
.right{text-align:right}.nowrap{white-space:nowrap}.hidden{display:none!important}
.accent-text{color:var(--accent)}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-5); border-radius: var(--r-full);
  font-weight: 650; font-size: 14.5px; white-space: nowrap;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad-accent); color: var(--accent-contrast); box-shadow: var(--sh-accent); }
.btn-primary:hover { box-shadow: 0 14px 32px rgba(var(--accent-glow), .45); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); box-shadow: var(--sh-xs); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-soft { background: var(--accent-weak); color: var(--accent); }
.btn-soft:hover { background: var(--accent-weak-2); }
.btn-sm { height: 36px; padding: 0 var(--sp-4); font-size: 13px; }
.btn-lg { height: 52px; padding: 0 var(--sp-7); font-size: 16px; }
.btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--r-full); }
.btn-block { width: 100%; }

/* ---------- Cartes ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
}
.card-pad { padding: var(--sp-5); }
.card-hover { transition: transform .18s ease, box-shadow .2s ease, border-color .2s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--border-2); }
.card-glass {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* ---------- Badges / pastilles ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 650; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge-green {background:var(--green-bg);color:var(--green)}
.badge-amber {background:var(--amber-bg);color:var(--amber)}
.badge-red   {background:var(--red-bg);color:var(--red)}
.badge-blue  {background:var(--blue-bg);color:var(--blue)}
.badge-violet{background:var(--violet-bg);color:var(--violet)}
.badge-accent{background:var(--accent-weak);color:var(--accent)}

/* ---------- Champs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.input, .select, textarea.input {
  height: 44px; padding: 0 14px; width: 100%;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-sm);
  color: var(--text); font-size: 14.5px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: auto; padding: 12px 14px; resize: vertical; min-height: 92px; }
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-glow), .14);
}
.input::placeholder { color: var(--text-faint); }

/* ---------- Avatars ---------- */
.avatar {
  width: 40px; height: 40px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
  background: var(--grad-accent); box-shadow: var(--sh-xs); overflow: hidden;
}
.avatar.sm { width: 30px; height: 30px; font-size: 11.5px; }
.avatar.lg { width: 56px; height: 56px; font-size: 19px; }
.avatar.a1{background:linear-gradient(135deg,#f97316,#dc2626)}
.avatar.a2{background:linear-gradient(135deg,#0ea5a4,#2563eb)}
.avatar.a3{background:linear-gradient(135deg,#7c3aed,#db2777)}
.avatar.a4{background:linear-gradient(135deg,#16a34a,#0ea5a4)}
.avatar.a5{background:linear-gradient(135deg,#f59e0b,#f97316)}
.avatar.a6{background:linear-gradient(135deg,#3b82f6,#6366f1)}

/* ---------- Icône encadrée ---------- */
.iconbox {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; color: var(--accent);
  background: var(--accent-weak);
}
.iconbox svg { width: 22px; height: 22px; }
.iconbox.lg { width: 54px; height: 54px; border-radius: var(--r-md); }
.iconbox.g-green {background:var(--green-bg);color:var(--green)}
.iconbox.g-amber {background:var(--amber-bg);color:var(--amber)}
.iconbox.g-red   {background:var(--red-bg);color:var(--red)}
.iconbox.g-blue  {background:var(--blue-bg);color:var(--blue)}
.iconbox.g-violet{background:var(--violet-bg);color:var(--violet)}

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); }
table.tbl th {
  text-align: left; padding: 12px 16px; font-size: 11.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .12s; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Barre de progression ---------- */
.progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--grad-accent); }
.progress.thin { height: 5px; }

/* ---------- KPI / stat ---------- */
.stat { padding: var(--sp-5); }
.stat .kpi { font-size: 30px; font-weight: 780; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; }
.trend.up { color: var(--green); } .trend.down { color: var(--red); }

/* ---------- Liste d'items ---------- */
.list-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); transition: background .12s; }
.list-item:hover { background: var(--surface-2); }
.divide > * + * { border-top: 1px solid var(--border); }

/* ---------- Chips / segmented ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  height: 34px; padding: 0 14px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border-2);
  font-size: 13px; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); box-shadow: var(--sh-accent); }
.segmented { display: inline-flex; background: var(--surface-3); border-radius: var(--r-full); padding: 4px; gap: 2px; }
.segmented button { height: 34px; padding: 0 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 650; color: var(--text-muted); transition: all .15s; }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); }

/* ---------- Section headers ---------- */
.sec-title { display: flex; align-items: center; gap: var(--sp-2); font-size: 15px; font-weight: 700; }
.eyebrow { font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--border-2); }
.tl-item { position: relative; padding-bottom: var(--sp-5); }
.tl-item::before { content:""; position:absolute; left:-22px; top:3px; width:12px; height:12px; border-radius:999px; background:var(--surface); border:2px solid var(--accent); }
.tl-item.done::before { background: var(--accent); }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9000; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #0f1729; color:#fff; padding: 12px 18px; border-radius: var(--r-full); font-size: 14px; font-weight: 600; box-shadow: var(--sh-lg); display:flex; align-items:center; gap:10px; animation: toastIn .3s cubic-bezier(.2,.9,.3,1.3); }
.toast svg { width: 18px; height: 18px; color: #4ade80; }
@keyframes toastIn { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }

/* ---------- Animations d'entrée ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
.reveal-2{animation-delay:.08s}.reveal-3{animation-delay:.16s}.reveal-4{animation-delay:.24s}.reveal-5{animation-delay:.32s}
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } * { scroll-behavior: auto; } }

/* ---------- Grilles ---------- */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 900px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

/* ---------- Cadre téléphone (pour prévisualiser l'app sur desktop) ---------- */
.phone {
  width: 390px; height: 800px; max-height: 88vh; position: relative;
  background: #0b0f1a; border-radius: 52px; padding: 13px;
  box-shadow: var(--sh-xl), inset 0 0 0 2px rgba(255,255,255,.06);
  flex: none;
}
.phone::after { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:120px; height:30px; background:#0b0f1a; border-radius:999px; z-index:20; }
.phone-screen { width: 100%; height: 100%; background: var(--bg); border-radius: 40px; overflow: hidden; position: relative; }

/* Divider */
.hr { height: 1px; background: var(--border); border: none; margin: 0; }