/* ===========================================================
   Dans la sauce — Design system partagé
   Source de vérité pour tous les écrans (landing + onboarding).
   =========================================================== */

:root{
  --bg:#FFFFFF;
  --ink:#1F1D22;
  --muted:#7A756C;
  --panel-dark:#2E2C38;
  --panel-dark-2:#232130;
  --green:#8CC63F;
  --pink:#EC1E79;
  --orange:#F5A623;
  --red:#D64B2F;
  --plate-1:#141414;
  --plate-2:#1E1E1E;
  --border:#ECE8DF;
  --tint:#F4EEE3;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.02em;
}
a{color:inherit;text-decoration:none;}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
button{font-family:inherit;cursor:pointer;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:100px;
  font-size:14.5px;
  font-weight:600;
  border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-outline{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn-outline:hover{background:var(--ink);color:#fff;}
.btn-dark{
  background:var(--red);
  color:#fff;
}
.btn-dark:hover{background:#BC4025;}
.btn-light{
  background:#fff;
  color:var(--ink);
  border-color:#fff;
}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
}
.logo{
  font-family:'Fraunces', serif;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.logo span{color:var(--pink);}
.header-actions{display:flex;gap:10px;}

/* ---------- Social login buttons ---------- */
.social-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.social-row .label{
  font-size:13px;
  color:var(--muted);
  margin-right:2px;
}
.social-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:100px;
  font-size:13.5px;
  font-weight:500;
  background:#fff;
  transition:border-color .2s ease, background .2s ease;
}
.social-btn:hover{border-color:var(--ink);background:#FAFAF8;}
.social-btn svg{width:16px;height:16px;flex:0 0 auto;}

/* ---------- Capsules (catalogue de plats) ---------- */
.capsule{
  border-radius:var(--radius-md);
  padding:22px;
  color:#fff;
  position:relative;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.capsule.c-green{background:linear-gradient(160deg, #9ED454, var(--green));}
.capsule.c-pink{background:linear-gradient(160deg, #F2418C, var(--pink));}
.capsule.c-orange{background:linear-gradient(160deg, #F7B44C, var(--orange));}
.capsule .country{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  opacity:0.85;
}
.capsule .dish{
  font-family:'Fraunces', serif;
  font-size:19px;
  font-weight:600;
  margin:14px 0 18px;
}
.capsule .fact{
  font-size:12.5px;
  font-weight:500;
  background:rgba(255,255,255,0.22);
  padding:6px 12px;
  border-radius:100px;
  display:inline-block;
  width:fit-content;
}
.capsule-btn{
  border:none;
  text-align:left;
  width:100%;
}

/* ---------- Disclaimer ---------- */
.disclaimer{
  background:var(--tint);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px 26px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.disclaimer .icon{
  width:34px;height:34px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
}
.disclaimer p{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}
.disclaimer strong{color:var(--ink);}

/* ---------- Forms ---------- */
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
  margin-bottom:8px;
}
.field input[type="text"],
.field select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:'Inter', sans-serif;
  font-size:14.5px;
  color:var(--ink);
  background:#fff;
}
.field input[type="text"]:focus,
.field select:focus{
  outline:none;
  border-color:var(--ink);
}

/* ---------- Chips (préférences, allergies) ---------- */
.chip-group{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  padding:9px 16px;
  border:1px solid var(--border);
  border-radius:100px;
  font-size:13.5px;
  font-weight:500;
  background:#fff;
  color:var(--muted);
  transition:all .15s ease;
}
.chip.selected{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

/* ---------- Progress dots (stepper) ---------- */
.progress-dots{
  display:flex;
  align-items:center;
  gap:8px;
}
.progress-dots .seg{
  height:4px;
  width:44px;
  border-radius:100px;
  background:var(--border);
  transition:background .25s ease;
}
.progress-dots .seg.done{background:var(--green);}
.progress-dots .seg.active{background:var(--ink);}

/* ---------- Modal / overlay ---------- */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(31,29,34,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:100;
}
.overlay.open{display:flex;}
.modal{
  background:#fff;
  border-radius:var(--radius-lg);
  max-width:440px;
  width:100%;
  padding:34px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.35);
}
.modal .eyebrow-mono{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
  margin-bottom:14px;
  display:block;
}
.modal h3{font-size:22px;margin-bottom:12px;}
.modal p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0 0 24px;}
.modal .modal-actions{display:flex;gap:12px;flex-wrap:wrap;}
.modal .modal-actions .btn{flex:1;}