/* =====================================================================
   TravelFamily.AI — Design System
   Foundations + components.  Light first, dark mode via [data-theme="dark"].
   Fonts: Poppins (display), Mulish (UI/body), Caveat (Webbina's voice).
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root {
  /* Brand palette */
  --ocean-50:#EEF4FE; --ocean-100:#DBE7FD; --ocean-200:#BACFFB;
  --ocean:#2563EB; --ocean-600:#1D4ED8; --ocean-700:#1A43B8; --ocean-900:#15307E;
  --turq-50:#ECFCFF; --turq-100:#CFF6FC; --turq:#06B6D4; --turq-600:#0596B0; --turq-700:#0A7C92;
  --coral-50:#FFF2EC; --coral-100:#FFE0D4; --coral:#FF7A59; --coral-600:#F15F3C; --coral-700:#CC4A2C;
  --gold-50:#FBF6E4; --gold-100:#F6EAC0; --gold:#D4AF37; --gold-600:#B8932A; --gold-700:#937319;

  --marine:#0F172A; --slate-800:#1E293B; --slate-700:#334155; --slate-600:#475569;
  --slate-500:#64748B; --slate-400:#94A3B8; --slate-300:#CBD5E1; --slate-200:#E2E8F0;
  --slate-100:#F1F5F9; --slate-50:#F8FAFC;
  --sand:#FBF6EC; --cream:#FFFDF8; --white:#FFFFFF;

  /* Status */
  --success:#15A34A; --success-bg:#E7F6EE; --success-border:#BCE6CD;
  --warning:#E8920C; --warning-bg:#FDF3E0; --warning-border:#F6DCA8;
  --error:#E23B3B;   --error-bg:#FCEBEB;   --error-border:#F4C5C5;
  --info:#2563EB;    --info-bg:#EEF4FE;    --info-border:#C8DAFB;

  /* Gradients */
  --grad-ocean:linear-gradient(135deg,#2563EB 0%,#06B6D4 100%);
  --grad-sunset:linear-gradient(135deg,#FF7A59 0%,#FBBF52 100%);
  --grad-premium:linear-gradient(135deg,#0F172A 0%,#334155 55%,#D4AF37 160%);
  --grad-gold:linear-gradient(135deg,#E7C766 0%,#D4AF37 50%,#B8932A 100%);
  --grad-sky:linear-gradient(180deg,#EAF3FF 0%,#F4FAFF 40%,var(--sand) 100%);
  --grad-aurora:radial-gradient(120% 120% at 0% 0%,rgba(37,99,235,.18),transparent 45%),
                radial-gradient(120% 120% at 100% 10%,rgba(6,182,212,.18),transparent 45%),
                radial-gradient(140% 120% at 70% 100%,rgba(255,122,89,.14),transparent 50%);

  /* Typography */
  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Mulish',system-ui,sans-serif;
  --font-hand:'Caveat',cursive;

  --fs-display:60px; --fs-h1:46px; --fs-h2:36px; --fs-h3:28px;
  --fs-h4:23px; --fs-h5:20px; --fs-h6:18px;
  --fs-lg:19px; --fs-body:17px; --fs-sm:15px; --fs-xs:13px;
  --lh-tight:1.12; --lh-snug:1.3; --lh-body:1.62;

  /* Spacing (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  /* Radii */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;

  /* Shadows */
  --sh-xs:0 1px 2px rgba(15,23,42,.06);
  --sh-sm:0 2px 10px -2px rgba(15,23,42,.08);
  --sh-md:0 10px 28px -10px rgba(15,23,42,.14);
  --sh-lg:0 24px 56px -20px rgba(15,23,42,.22);
  --sh-ocean:0 16px 34px -12px rgba(37,99,235,.45);
  --sh-coral:0 16px 34px -12px rgba(255,122,89,.42);
  --sh-gold:0 16px 34px -12px rgba(212,175,55,.4);

  /* Semantic — light */
  --bg:var(--sand);
  --surface:var(--white);
  --surface-2:#FBFCFE;
  --surface-sunk:var(--slate-50);
  --text:var(--marine);
  --text-2:var(--slate-600);
  --text-muted:var(--slate-400);
  --border:#E9ECF3;
  --border-strong:var(--slate-200);
  --ring:rgba(37,99,235,.28);

  /* Accent (default = coral). Switch via [data-accent] */
  --accent:var(--coral); --accent-600:var(--coral-600);
  --accent-50:var(--coral-50); --accent-100:var(--coral-100);
  --accent-sh:var(--sh-coral);
}

[data-accent="turquoise"]{ --accent:var(--turq); --accent-600:var(--turq-600); --accent-50:var(--turq-50); --accent-100:var(--turq-100); --accent-sh:0 16px 34px -12px rgba(6,182,212,.4); }
[data-accent="gold"]{ --accent:var(--gold); --accent-600:var(--gold-600); --accent-50:var(--gold-50); --accent-100:var(--gold-100); --accent-sh:var(--sh-gold); }

/* Semantic — dark */
[data-theme="dark"]{
  --bg:#0A1120;
  --surface:#121C2E;
  --surface-2:#16223A;
  --surface-sunk:#0E1828;
  --text:#EAF1FB;
  --text-2:#9FB0C8;
  --text-muted:#6C7C96;
  --border:#22304A;
  --border-strong:#2B3A57;
  --ring:rgba(59,130,246,.5);
  --ocean:#3B82F6; --ocean-600:#2563EB;
  --ocean-50:#15233E; --ocean-100:#1A2C4B;
  --turq-50:#10303A; --coral-50:#3A2018; --gold-50:#332A12;
  --slate-100:#1B2740; --slate-200:#2B3A57; --slate-50:#10192B;
  --success-bg:#10261B; --warning-bg:#2A2110; --error-bg:#2C1518; --info-bg:#15233E;
  --sh-sm:0 2px 12px -2px rgba(0,0,0,.5);
  --sh-md:0 14px 32px -12px rgba(0,0,0,.6);
  --sh-lg:0 28px 60px -22px rgba(0,0,0,.7);
  --grad-sky:linear-gradient(180deg,#0E1A30 0%,#0A1120 60%);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:500; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); color:var(--text); margin:0; line-height:var(--lh-tight); font-weight:700; letter-spacing:-.02em; }
h1{font-size:var(--fs-h1);} h2{font-size:var(--fs-h2);} h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);} h5{font-size:var(--fs-h5);} h6{font-size:var(--fs-h6);}
p{margin:0;}
a{color:var(--ocean); text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--ocean-100); color:var(--marine);}

/* ---------- TYPE HELPERS ---------- */
.display{ font-family:var(--font-display); font-size:var(--fs-display); font-weight:700; line-height:1.04; letter-spacing:-.03em; }
.lead{ font-size:var(--fs-lg); color:var(--text-2); line-height:1.5; }
.eyebrow{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-600); }
.hand{ font-family:var(--font-hand); font-weight:600; }
.label{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm); color:var(--text); letter-spacing:-.01em; }
.muted{ color:var(--text-2); }
.micro{ font-size:var(--fs-xs); color:var(--text-muted); letter-spacing:.01em; }

/* ---------- BUTTONS ---------- */
.btn{
  --bg-btn:var(--ocean); --fg-btn:#fff;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; min-height:52px; border-radius:var(--r-pill);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  background:var(--bg-btn); color:var(--fg-btn);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring); }
.btn svg{ width:20px; height:20px; }

.btn--primary{ background:var(--grad-ocean); color:#fff; box-shadow:var(--sh-ocean); }
.btn--primary:hover{ box-shadow:0 22px 40px -12px rgba(37,99,235,.5); }
.btn--secondary{ background:var(--surface); color:var(--ocean); border-color:var(--border-strong); box-shadow:var(--sh-xs); }
.btn--secondary:hover{ border-color:var(--ocean); background:var(--ocean-50); }
.btn--ghost{ background:transparent; color:var(--text-2); }
.btn--ghost:hover{ background:var(--slate-100); color:var(--text); transform:none; }
.btn--accent{ background:var(--accent); color:#fff; box-shadow:var(--accent-sh); }
.btn--premium{ background:var(--grad-premium); color:var(--gold-50); border-color:rgba(212,175,55,.5); box-shadow:var(--sh-gold); }
.btn--premium .crown{ color:var(--gold); }
.btn--cta{ background:var(--grad-sunset); color:#fff; font-size:var(--fs-body); padding:18px 32px; min-height:60px; box-shadow:var(--sh-coral); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; filter:grayscale(.2); }
.btn--lg{ min-height:60px; padding:18px 30px; font-size:var(--fs-body); }
.btn--sm{ min-height:42px; padding:9px 16px; font-size:var(--fs-xs); }
.btn--block{ width:100%; }
.btn--icon{ padding:0; width:52px; min-height:52px; }

/* ---------- FIELDS ---------- */
.field{ display:flex; flex-direction:column; gap:8px; }
.field > .label{ display:flex; align-items:center; gap:6px; }
.input, .select, .textarea{
  font-family:var(--font-body); font-size:var(--fs-body); font-weight:500; color:var(--text);
  background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--r-md);
  padding:15px 18px; min-height:56px; width:100%;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.textarea{ min-height:auto; line-height:1.5; resize:vertical; }
.input::placeholder, .textarea::placeholder{ color:var(--text-muted); }
.input:hover, .select:hover, .textarea:hover{ border-color:var(--slate-300); }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--ocean); box-shadow:0 0 0 4px var(--ring); background:var(--surface); }
.input--error{ border-color:var(--error); box-shadow:0 0 0 4px rgba(226,59,59,.16); }
.field-hint{ font-size:var(--fs-xs); color:var(--text-muted); }
.field-error{ font-size:var(--fs-xs); color:var(--error); font-weight:600; }
.input-group{ position:relative; display:flex; align-items:center; }
.input-group .input{ padding-left:50px; }
.input-group .lead-icon{ position:absolute; left:18px; color:var(--text-muted); width:20px; height:20px; pointer-events:none; }

/* search / AI input */
.ai-search{
  display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1.5px solid var(--border-strong); border-radius:var(--r-pill);
  padding:8px 8px 8px 20px; box-shadow:var(--sh-sm); transition:border-color .15s, box-shadow .15s;
}
.ai-search:focus-within{ border-color:var(--ocean); box-shadow:0 0 0 4px var(--ring); }
.ai-search input{ border:none; background:none; outline:none; flex:1; font-family:var(--font-body); font-size:var(--fs-body); font-weight:500; color:var(--text); min-height:44px; }
.ai-search input::placeholder{ color:var(--text-muted); }
.ai-search .spark{ width:24px; height:24px; color:var(--turq); }

/* ---------- CHIPS / BADGES / PILLS ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-sm); padding:9px 16px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--text-2); border:1.5px solid var(--border-strong); cursor:pointer;
  transition:all .15s; -webkit-tap-highlight-color:transparent;
}
.chip:hover{ border-color:var(--ocean); color:var(--ocean); }
.chip--active{ background:var(--ocean); color:#fff; border-color:var(--ocean); box-shadow:var(--sh-ocean); }
.chip--accent.chip--active{ background:var(--accent); border-color:var(--accent); box-shadow:var(--accent-sh); }
.chip svg{ width:18px; height:18px; }

.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs); padding:5px 11px; border-radius:var(--r-pill); letter-spacing:.01em; }
.badge svg{ width:14px; height:14px; }
.badge--ocean{ background:var(--ocean-50); color:var(--ocean-700); }
.badge--turq{ background:var(--turq-50); color:var(--turq-700); }
.badge--coral{ background:var(--coral-50); color:var(--coral-700); }
.badge--gold{ background:var(--gold-50); color:var(--gold-700); }
.badge--success{ background:var(--success-bg); color:var(--success); }
.badge--premium{ background:var(--grad-gold); color:#5A4708; }

/* ---------- CARDS ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.card--pad{ padding:var(--s6); }
.card--hover{ transition:transform .2s ease, box-shadow .2s ease; cursor:pointer; }
.card--hover:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }

/* destination card */
.dest-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh-md); cursor:pointer; transition:transform .2s, box-shadow .2s; }
.dest-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.dest-card .photo{ aspect-ratio:4/3; background-size:cover; background-position:center; position:relative; }
.dest-card .photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(15,23,42,.55)); }
.dest-card .fav{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:var(--r-pill); background:rgba(255,255,255,.92); display:grid; place-items:center; z-index:2; border:none; cursor:pointer; color:var(--coral); }
.dest-card .ribbon{ position:absolute; top:14px; left:14px; z-index:2; }
.dest-card .cap{ position:absolute; left:16px; bottom:14px; right:16px; z-index:2; color:#fff; }
.dest-card .body{ padding:16px 18px 18px; }

/* ---------- AVATAR / WEBBINA ---------- */
.avatar{ border-radius:var(--r-pill); object-fit:cover; background:var(--ocean-50); border:2px solid #fff; box-shadow:var(--sh-sm); }
.webbina-badge{ position:relative; display:inline-flex; }
.webbina-badge .pulse{ position:absolute; right:2px; bottom:2px; width:14px; height:14px; border-radius:50%; background:var(--success); border:2.5px solid var(--surface); }

/* ---------- CHAT / AI ---------- */
.bubble{ max-width:78%; padding:14px 18px; border-radius:var(--r-lg); font-size:var(--fs-body); line-height:1.5; }
.bubble--ai{ background:var(--surface); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:6px; box-shadow:var(--sh-xs); }
.bubble--user{ background:var(--grad-ocean); color:#fff; border-bottom-right-radius:6px; box-shadow:var(--sh-ocean); }
.bubble--system{ background:var(--gold-50); color:var(--gold-700); border:1px dashed var(--gold-100); font-size:var(--fs-sm); text-align:center; max-width:100%; border-radius:var(--r-md); }
.msg-row{ display:flex; gap:10px; align-items:flex-end; }
.msg-row--user{ flex-direction:row-reverse; }
.typing{ display:inline-flex; gap:5px; padding:16px 18px; }
.typing span{ width:9px; height:9px; border-radius:50%; background:var(--slate-300); animation:typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2){ animation-delay:.18s; } .typing span:nth-child(3){ animation-delay:.36s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-6px); opacity:1;} }

.quick-suggest{ display:flex; gap:10px; flex-wrap:wrap; }
.quick-suggest .chip{ background:var(--ocean-50); border-color:transparent; color:var(--ocean-700); }
.quick-suggest .chip:hover{ background:var(--ocean-100); }

/* ---------- LAYOUT HELPERS ---------- */
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.wrap{ flex-wrap:wrap; }
.between{ justify-content:space-between; }
.center{ align-items:center; justify-content:center; }
.gap2{gap:8px;} .gap3{gap:12px;} .gap4{gap:16px;} .gap6{gap:24px;} .gap8{gap:32px;}

@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes fadeUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }

/* Résultat du vérificateur de formalités (HTML du moteur partagé avec travelfamilyai.fr) */
.vr-app { margin:14px 0 8px; font-size:13.5px; line-height:1.5; color:var(--text-2); }
.vr-app .vr-title { font-family:var(--font-display); font-size:16px; color:var(--text); margin:0 0 2px; }
.vr-app .meta, .vr-app .vr-src { color:var(--text-muted); font-size:12px; }
.vr-app .vr-block { margin-top:14px; }
.vr-app h3 { font-family:var(--font-display); font-size:14px; color:var(--text); margin:0 0 6px; }
.vr-app .vr-cards { display:flex; flex-direction:column; gap:8px; }
.vr-app .vr-card, .vr-app .vr-item { padding:10px 12px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); margin:6px 0; }
.vr-app .vr-card { border-left:4px solid var(--border-strong); }
.vr-app .vr-card.tone-green { border-left-color:var(--success); }
.vr-app .vr-card.tone-orange { border-left-color:var(--warning); }
.vr-app .vr-card.tone-red { border-left-color:var(--error); }
.vr-app .vr-card p, .vr-app .vr-item p { margin:3px 0; }
.vr-app .vr-who span::before { content:' · '; }
.vr-app .vr-status { font-family:var(--font-display); font-weight:700; color:var(--text); }
.vr-app .tone-green .vr-status { color:var(--success); }
.vr-app .tone-orange .vr-status { color:var(--warning); }
.vr-app .tone-red .vr-status { color:var(--error); }
.vr-app .vr-status-official { font-weight:600; font-size:12.5px; color:var(--text-muted) !important; }
.vr-app .vr-src q { display:block; margin-top:2px; padding-left:8px; border-left:2px solid var(--border); font-style:italic; }
.vr-app .vr-alert { margin:6px 0; padding:8px 10px; border-radius:var(--r-md); background:var(--error-bg); border:1px solid var(--error-border); }
.vr-app .vr-alert b { color:var(--error); }
.vr-app .vr-warn { margin-top:12px; padding:8px 10px; border-radius:var(--r-md); background:var(--warning-bg); font-size:12.5px; }
.vr-app .vr-review { margin:6px 0; padding:8px 10px; border-radius:var(--r-md); background:var(--warning-bg); border:1px solid var(--warning-border); }
.vr-app .vr-review b { color:var(--warning); }