/* =========================================================
   TripCooking — Signup / Landing (Clean + Pro)
   - Cards glassy + séparations
   - Topbar sticky
   - Layout 2 colonnes
   - Recettes: images mêmes hauteurs + NO CROP (contain)
   ========================================================= */

/* =========================
   THEME
   ========================= */
:root{
  --bg: #f5f2ff;
  --text: #1e1633;
  --muted: rgba(30, 22, 51, .62);

  --primary: #6d4dff;
  --primary2: #a17bff;

  --card: rgba(255,255,255,.82);
  --stroke: rgba(118, 96, 214, .16);

  --shadow: 0 22px 60px rgba(28, 12, 66, .10);
  --shadow2: 0 12px 28px rgba(28, 12, 66, .08);

  --r: 22px;
  --r2: 28px;

  --maxw: 1200px;
  --pad: 22px;

  --topbarH: 76px;

  --focus: rgba(109,77,255,.28);
}

/* =========================
   RESET
   ========================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 550 14px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, select{ font:inherit; }
::selection{ background: rgba(109,77,255,.20); }
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 12px;
}

/* =========================
   TOPBAR
   ========================= */
.tc-signupTopbar{
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbarH);
  background: rgba(245,242,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}

.tc-signupTopbar__inner{
  max-width: var(--maxw);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  align-items: center;
  gap: 14px;
}

.tc-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tc-brand__logo{
  width: 42px; height: 42px;
  border-radius: 16px;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 950;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: var(--shadow2);
}
.tc-brand__name{
  font-weight: 950;
  letter-spacing: .2px;
  white-space: nowrap;
}

.tc-signupNav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  min-width:0;
}
.tc-signupNav__link{
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(30,22,51,.70);
  font-weight: 850;
}
.tc-signupNav__link.is-active{
  color: rgba(55,32,125,.98);
  background: rgba(109,77,255,.10);
  border: 1px solid rgba(109,77,255,.18);
}

.tc-signupTopbar__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* =========================
   BUTTONS
   ========================= */
.tc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(118,96,214,.18);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 20px rgba(28,12,66,.06);
  font-weight: 950;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.tc-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
}
.tc-btn--primary{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 16px 30px rgba(109,77,255,.22);
}
.tc-btn--ghost{
  background: transparent;
  box-shadow:none;
}
.tc-btn--wide{ width:100%; }

/* =========================
   PAGE + LAYOUT
   ========================= */
.tc-signupPage{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--pad) 48px;
}

.tc-signupLayout{
  display:grid;
  grid-template-columns: minmax(520px, 1fr) 440px;
  gap: 22px;
  align-items: start;
}

/* =========================
   CARDS
   ========================= */
.tc-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
}

/* =========================
   HERO
   ========================= */
.tc-heroCard{ padding: 22px; }

.tc-heroCard__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(109,77,255,.10);
  border: 1px solid rgba(109,77,255,.18);
  color: rgba(55,32,125,.98);
  font-weight: 950;
  width: max-content;
}

.tc-heroCard__title{
  margin: 14px 0 8px;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.8px;
}
.tc-heroCard__title span{ color: rgba(109,77,255,.98); }

.tc-heroCard__desc{
  margin: 0;
  max-width: 70ch;
  color: rgba(30,22,51,.70);
  font-weight: 700;
  font-size: 15px;
}

/* stats row */
.tc-heroStats{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.tc-stat{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(118,96,214,.14);
  border-radius: 18px;
  padding: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.tc-stat__icon{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(109,77,255,.10);
  border: 1px solid rgba(109,77,255,.16);
}
.tc-stat__big{ font-weight: 950; font-size: 18px; }
.tc-stat__small{ color: var(--muted); font-weight: 850; font-size: 12px; }

/* =========================
   SECTION ROWS
   ========================= */
.tc-sectionRow{ margin-top: 16px; }

.tc-sectionRow__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 14px 4px 10px;
}
.tc-sectionRow__title{
  margin:0;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .2px;
}
.tc-sectionRow__line{
  height: 1px;
  flex: 1;
  background: rgba(118,96,214,.18);
  border-radius: 999px;
  margin-left: 8px;
}
.tc-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(109,77,255,.95);
  box-shadow: 0 10px 18px rgba(109,77,255,.25);
}
.tc-dot--gold{ background: #ffb55c; box-shadow: 0 10px 18px rgba(255,181,92,.25); }
.tc-dot--purple{ background: rgba(109,77,255,.95); }

/* =========================
   FEATURES
   ========================= */
.tc-featureRow{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.tc-feature{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(118,96,214,.14);
  border-radius: 18px;
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:center;
}
.tc-feature__icon{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(109,77,255,.10);
  border: 1px solid rgba(109,77,255,.16);
}
.tc-feature__title{ font-weight: 950; }
.tc-feature__sub{ color: var(--muted); font-weight: 850; font-size: 12px; }

/* =========================
   PILLS
   ========================= */
.tc-pillRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px;
}
.tc-pill{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(118,96,214,.14);
  font-weight: 950;
  color: rgba(55,32,125,.98);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.tc-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(28,12,66,.08);
}
.tc-pill--cta{
  background: rgba(109,77,255,.10);
  border-color: rgba(109,77,255,.20);
}

/* =========================
   RECETTES (images same height + contain)
   ========================= */
/* ====== GRID ====== */
.tc-recipesGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* ====== CARD ====== */
.tc-recipeCard{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(118,96,214,.14);
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 180px 1fr; /* ✅ image même hauteur */
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.tc-recipeCard:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
}

/* ====== IMAGE (1 SEULE) ====== */
.tc-recipeThumb{
  width: 100%;
  height: 180px;        /* ✅ */
  display: block;
  object-fit: cover;    /* ✅ joli, remplit */
  background: rgba(245,242,255,.8);
  border-bottom: 1px solid rgba(118,96,214,.12);
}

/* ====== BODY ====== */
.tc-recipeCard__body{
  padding: 12px 12px 14px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.tc-recipeCard__title{
  font-weight: 950;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.15em * 2);
}

.tc-recipeCard__meta{
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
}

/* ====== Responsive ====== */
@media (max-width: 1120px){
  .tc-recipesGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .tc-recipesGrid{ grid-template-columns: 1fr; }
}
/* =========================
   SKELETON (optionnel)
   ========================= */
.skel{ position: relative; }
.skel::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.65),
    rgba(255,255,255,0)
  );
  transform: translateX(-60%);
  animation: sk 1.25s ease-in-out infinite;
  opacity: .55;
}
@keyframes sk{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(120%); }
}

/* =========================
   RIGHT COLUMN (sticky)
   ========================= */
.tc-signupRight{
  position: sticky;
  top: calc(var(--topbarH) + 18px);
  display:grid;
  gap: 14px;
}

/* =========================
   FORM CARD
   ========================= */
.tc-formCard{ padding: 18px; }

.tc-formCard__title{
  margin:0 0 12px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .2px;
}

.tc-form{ display:grid; gap: 10px; }

.tc-field{ display:grid; gap: 6px; }
.tc-field__label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
}
.tc-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(118,96,214,.16);
  background: rgba(255,255,255,.92);
  outline: none;
  box-shadow: 0 10px 22px rgba(28,12,66,.06);
}
.tc-input:focus{
  border-color: rgba(109,77,255,.28);
  box-shadow: 0 14px 28px rgba(109,77,255,.12);
}

.tc-field--password{ position: relative; }
.tc-eye{
  position:absolute;
  right: 10px;
  top: 30px;
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(118,96,214,.16);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.tc-formCard__footer{
  margin-top: 8px;
  text-align:center;
  color: var(--muted);
  font-weight: 800;
}
.tc-formCard__footer a{
  color: rgba(109,77,255,.95);
  font-weight: 950;
}

/* =========================
   JOIN CARD
   ========================= */
.tc-joinCard{
  padding: 14px;
  display:grid;
  gap: 12px;
}
.tc-joinCard__row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.tc-joinCard__spark{
  width: 36px; height: 36px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,181,92,.16);
  border: 1px solid rgba(255,181,92,.28);
}
.tc-joinCard__big{ font-weight: 950; }
.tc-joinCard__sub{ color: var(--muted); font-weight: 850; font-size: 12px; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1120px){
  .tc-signupTopbar__inner{ grid-template-columns: 220px 1fr 220px; }
  .tc-signupLayout{ grid-template-columns: 1fr; }
  .tc-signupRight{ position: relative; top: auto; }
  .tc-featureRow{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tc-recipesGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  .tc-signupNav{ display:none; }
  .tc-signupTopbar__inner{ grid-template-columns: 1fr auto; }
  .tc-heroCard__title{ font-size: 34px; }
  .tc-heroStats{ grid-template-columns: 1fr; }
  .tc-featureRow{ grid-template-columns: 1fr; }
  .tc-recipesGrid{ grid-template-columns: 1fr; }
}