@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,800&display=swap');

/* ══════════════════════════════════════════════════════════════
   NIGHT KITCHEN · CONTACT
   ══════════════════════════════════════════════════════════════ */
:root{
  --g1:#34d399;--g2:#10b981;
  --amber:#fbbf24;--amber2:#d97706;
  --ink:#050e08;
}

.ct-page{
  min-height:100vh;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  padding:88px 16px 64px;
  position:relative;overflow:hidden;
}
.ct-page::before{
  content:'';position:fixed;top:-25%;left:-20%;
  width:80vw;height:80vw;
  background:radial-gradient(circle,rgba(16,185,129,0.06) 0%,transparent 58%);
  pointer-events:none;z-index:0;
}
.ct-page::after{
  content:'';position:fixed;bottom:-20%;right:-15%;
  width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(217,119,6,0.045) 0%,transparent 58%);
  pointer-events:none;z-index:0;
}
.ct-grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* ── CARD ──────────────────────────────────────────────────── */
.ct-card{
  position:relative;z-index:1;
  max-width:1060px;width:100%;
  display:grid;grid-template-columns:1fr 1.5fr;
  border-radius:38px;overflow:hidden;
  background:rgba(3,14,8,0.94);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.025),
    0 70px 130px rgba(0,0,0,0.75),
    0 0 100px rgba(16,185,129,0.03);
  animation:ct-reveal 0.75s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes ct-reveal{
  from{opacity:0;transform:translateY(36px) scale(0.975)}
  to  {opacity:1;transform:none}
}
.ct-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(52,211,153,0.35),rgba(251,191,36,0.2),transparent);
  z-index:10;
}

/* ── LEFT ───────────────────────────────────────────────────── */
.ct-left{
  position:relative;
  padding:52px 40px 52px 48px;
  display:flex;flex-direction:column;gap:30px;
  background:linear-gradient(155deg,rgba(5,28,16,0.98) 0%,rgba(3,14,8,0.96) 100%);
  overflow:hidden;
}
.ct-left::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    -52deg,transparent,transparent 44px,
    rgba(52,211,153,0.011) 44px,rgba(52,211,153,0.011) 45px
  );pointer-events:none;
}
.ct-left::after{
  content:'';position:absolute;
  top:0;bottom:0;right:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(52,211,153,0.14),rgba(251,191,36,0.09),transparent);
}

/* ── CLOCHE SVG ─────────────────────────────────────────────── */
.ct-cloche-wrap{display:flex;justify-content:center;flex-shrink:0}
.ct-cloche-svg{width:170px;height:170px;overflow:visible;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5))}

.ct-dome{animation:ct-lift 3.2s cubic-bezier(0.4,0,0.2,1) infinite;transform-origin:80px 104px}
@keyframes ct-lift{0%,100%{transform:translateY(0)}28%,52%{transform:translateY(-18px)}80%{transform:translateY(0)}}

.ct-ring{animation:ct-ring-turn 12s linear infinite;transform-origin:80px 82px}
@keyframes ct-ring-turn{to{stroke-dashoffset:-80}}

.ct-tray{animation:ct-tray-shake 3.2s ease infinite;transform-origin:80px 106px}
@keyframes ct-tray-shake{0%,78%,100%{transform:rotate(0)}82%{transform:rotate(-0.7deg)}86%{transform:rotate(0.7deg)}90%{transform:rotate(-0.3deg)}94%{transform:rotate(0)}}

.ct-badge-g{animation:ct-badge-pulse 3.2s ease-in-out infinite;transform-origin:116px 36px}
@keyframes ct-badge-pulse{0%,22%,100%{transform:scale(1)}36%{transform:scale(1.18)}48%{transform:scale(1)}}

.ct-spark{animation:ct-spark 3.2s ease-in-out infinite}
.ct-sp1{animation-delay:0.32s}.ct-sp2{animation-delay:0.50s}
.ct-sp3{animation-delay:0.42s}.ct-sp4{animation-delay:0.60s}
@keyframes ct-spark{
  0%,20%,80%,100%{opacity:0;transform:scale(0) translate(0,0)}
  40%{opacity:1;transform:scale(1) translate(0,0)}
  62%{opacity:0;transform:scale(0.3) translate(var(--dx),var(--dy))}
}
.ct-sp1{--dx:-9px;--dy:-12px}.ct-sp2{--dx:10px;--dy:-10px}
.ct-sp3{--dx:-11px;--dy:-7px}.ct-sp4{--dx:12px;--dy:-14px}

.ct-steam{animation:ct-steam-a 3.2s ease-in-out infinite}
.ct-stm1{animation-delay:0.28s}.ct-stm2{animation-delay:0.44s}.ct-stm3{animation-delay:0.36s}
@keyframes ct-steam-a{
  0%,22%,75%,100%{opacity:0;transform:translateY(0) scaleX(1)}
  38%{opacity:0.65;transform:translateY(-8px) scaleX(1.15)}
  58%{opacity:0;transform:translateY(-22px) scaleX(0.6)}
}

/* ── TEXTE LEFT ─────────────────────────────────────────────── */
.ct-eyebrow{
  font-family:'DM Sans',sans-serif;
  font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:3.5px;
  color:var(--g1);opacity:0.6;
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.ct-live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--g1);box-shadow:0 0 10px rgba(52,211,153,0.7);
  animation:ct-dot-p 2s ease-in-out infinite;flex-shrink:0;
}
@keyframes ct-dot-p{
  0%,100%{box-shadow:0 0 6px rgba(52,211,153,0.5)}
  50%    {box-shadow:0 0 18px rgba(52,211,153,1),0 0 35px rgba(52,211,153,0.25)}
}
.ct-headline{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,2.8vw,36px);
  font-weight:900;color:#fff;
  line-height:1.1;letter-spacing:-0.5px;margin-bottom:12px;
}
.ct-headline em{font-style:italic;color:var(--g1)}
.ct-tagline{
  font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:400;
  color:rgba(255,255,255,0.35);line-height:1.75;
}

.ct-info-stack{display:flex;flex-direction:column;gap:10px}
.ct-info-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 15px;border-radius:16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  transition:all 0.22s;
}
.ct-info-item:hover{
  background:rgba(52,211,153,0.05);
  border-color:rgba(52,211,153,0.14);
  transform:translateX(3px);
}
.ct-info-ico{
  width:38px;height:38px;border-radius:12px;
  background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.14);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
}
.ct-info-lbl{
  font-family:'DM Sans',sans-serif;font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:2px;
  color:rgba(52,211,153,0.45);margin-bottom:2px;
}
.ct-info-val{
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  color:rgba(255,255,255,0.72);
}
.ct-info-val a{color:inherit;text-decoration:none;transition:color 0.15s}
.ct-info-val a:hover{color:var(--g1)}

.ct-quote{
  position:relative;
  padding:18px 20px 16px;border-radius:18px;
  background:rgba(251,191,36,0.04);
  border:1px solid rgba(251,191,36,0.1);
  border-left:3px solid rgba(251,191,36,0.38);
}
.ct-quote::before{
  content:'"';position:absolute;top:-10px;left:14px;
  font-family:'Playfair Display',serif;font-size:64px;line-height:1;
  color:rgba(251,191,36,0.18);pointer-events:none;
}
.ct-quote-text{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:13px;color:rgba(255,255,255,0.42);line-height:1.75;
}
.ct-quote-by{
  font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.5px;
  color:rgba(251,191,36,0.5);margin-top:9px;text-align:right;
}

/* ── RIGHT ──────────────────────────────────────────────────── */
.ct-right{padding:56px 56px 56px 48px;display:flex;flex-direction:column}
.ct-form-title{
  font-family:'Playfair Display',serif;
  font-size:28px;font-weight:700;color:#fff;
  letter-spacing:-0.4px;margin-bottom:5px;
}
.ct-form-sub{
  font-family:'DM Sans',sans-serif;font-size:13px;
  color:rgba(255,255,255,0.26);margin-bottom:38px;
}
.ct-field{margin-bottom:22px}
.ct-lbl{
  display:block;font-family:'DM Sans',sans-serif;
  font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:2.5px;
  color:rgba(52,211,153,0.48);margin-bottom:8px;
}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}

/* Widget overrides */
.ct-right input[type=text],
.ct-right input[type=email],
.ct-right select,
.ct-right textarea{
  width:100%;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:15px;padding:13px 17px;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;
  color:#fff;outline:none;
  transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
}
.ct-right input::placeholder,
.ct-right textarea::placeholder{color:rgba(255,255,255,0.17)}
.ct-right input:focus,
.ct-right select:focus,
.ct-right textarea:focus{
  background:rgba(52,211,153,0.055);
  border-color:rgba(52,211,153,0.42);
  box-shadow:0 0 0 4px rgba(52,211,153,0.07),0 0 24px rgba(52,211,153,0.04);
}
.ct-right textarea{resize:vertical;min-height:130px;line-height:1.65}
.ct-right select{
  cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.28)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
  background-color:rgba(255,255,255,0.04);
}
.ct-right select option{background:#0a1f12;color:#fff}

.ct-fw{position:relative}
.ct-fw::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,var(--g1),transparent);
  opacity:0;transform:scaleX(0);
  transition:opacity 0.3s,transform 0.3s;
  pointer-events:none;border-radius:1px;
}
.ct-fw:focus-within::after{opacity:1;transform:scaleX(1)}
.ct-err{
  font-family:'DM Sans',sans-serif;font-size:11px;color:#f87171;
  margin-top:5px;display:flex;align-items:center;gap:5px;
}
.ct-err::before{content:'⚠';font-size:10px}

.ct-success-msg{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:15px;
  background:rgba(52,211,153,0.07);border:1px solid rgba(52,211,153,0.2);
  font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g1);
  margin-bottom:22px;animation:ct-in 0.4s ease both;
}

/* Submit */
.ct-btn{
  width:100%;padding:15px 24px;border-radius:16px;border:none;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  color:#041a0a;font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:800;cursor:pointer;letter-spacing:0.1px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 28px rgba(16,185,129,0.28);
  transition:transform 0.22s,box-shadow 0.22s;
  position:relative;overflow:hidden;margin-top:10px;
}
.ct-btn::before{
  content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);
  transition:left 0.55s ease;
}
.ct-btn:hover::before{left:160%}
.ct-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(16,185,129,0.42)}
.ct-btn:active{transform:translateY(0) scale(0.99)}
.ct-btn-ico{transition:transform 0.22s}
.ct-btn:hover .ct-btn-ico{transform:translateX(4px) rotate(-10deg)}

/* Stagger */
@keyframes ct-in{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}
.ct-s1{animation:ct-in 0.5s 0.10s ease both}
.ct-s2{animation:ct-in 0.5s 0.18s ease both}
.ct-s3{animation:ct-in 0.5s 0.26s ease both}
.ct-s4{animation:ct-in 0.5s 0.32s ease both}
.ct-s5{animation:ct-in 0.5s 0.38s ease both}

/* Responsive */
@media(max-width:860px){
  .ct-card{grid-template-columns:1fr}
  .ct-left{padding:40px 28px}
  .ct-right{padding:40px 28px}
  .ct-row{grid-template-columns:1fr;gap:0}
  .ct-row .ct-field{margin-bottom:22px}
  .ct-cloche-svg{width:130px;height:130px}
  .ct-left::after{display:none}
}
@media(max-width:480px){
  .ct-page{padding:74px 10px 56px}
  .ct-card{border-radius:26px}
  .ct-headline{font-size:24px}
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE — contact
═══════════════════════════════════════════════════ */
[data-theme="light"] .ct-page { background: #f2faf5; }
[data-theme="light"] .ct-page::before { background: radial-gradient(circle, rgba(16,185,129,0.05) 0%, transparent 58%); }
[data-theme="light"] .ct-page::after { background: radial-gradient(circle, rgba(217,119,6,0.03) 0%, transparent 58%); }

[data-theme="light"] .ct-card {
    background: rgba(255,255,255,0.92);
    border-color: rgba(52,211,153,0.18);
    box-shadow: 0 12px 50px rgba(0,0,0,0.08);
}
[data-theme="light"] .ct-left {
    background: linear-gradient(155deg, rgba(255,255,255,0.98) 0%, rgba(240,250,244,0.96) 100%);
}
[data-theme="light"] .ct-left::after {
    background: linear-gradient(180deg, transparent, rgba(52,211,153,0.2), rgba(251,191,36,0.15), transparent);
}

[data-theme="light"] .ct-headline { color: #0a1f12; }
[data-theme="light"] .ct-tagline { color: rgba(10,31,18,0.55); }

[data-theme="light"] .ct-info-item {
    background: rgba(10,31,18,0.03); border-color: rgba(10,31,18,0.08);
}
[data-theme="light"] .ct-info-item:hover {
    background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.25);
}
[data-theme="light"] .ct-info-lbl { color: rgba(5,150,105,0.65); }
[data-theme="light"] .ct-info-val { color: #0a1f12; }

[data-theme="light"] .ct-quote {
    background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.18);
}
[data-theme="light"] .ct-quote-text { color: rgba(10,31,18,0.65); }
[data-theme="light"] .ct-quote-by { color: rgba(217,119,6,0.8); }

[data-theme="light"] .ct-form-title { color: #0a1f12; }
[data-theme="light"] .ct-form-sub { color: rgba(10,31,18,0.50); }
[data-theme="light"] .ct-lbl { color: rgba(5,150,105,0.7); }

[data-theme="light"] .ct-right input[type=text],
[data-theme="light"] .ct-right input[type=email],
[data-theme="light"] .ct-right select,
[data-theme="light"] .ct-right textarea {
    background: rgba(255,255,255,0.95); border-color: rgba(10,31,18,0.12); color: #0a1f12;
}
[data-theme="light"] .ct-right input::placeholder,
[data-theme="light"] .ct-right textarea::placeholder { color: rgba(10,31,18,0.28); }
[data-theme="light"] .ct-right input:focus,
[data-theme="light"] .ct-right select:focus,
[data-theme="light"] .ct-right textarea:focus {
    background: #fff; border-color: rgba(52,211,153,0.45);
    box-shadow: 0 0 0 3px rgba(52,211,153,0.09);
}
[data-theme="light"] .ct-right select option { background: #fff; color: #0a1f12; }