/* ============================= */
/* CupidAI — Premium Dark UI */
/* ============================= */

* { box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#0f172a;
  line-height:1.45;

  background:
    radial-gradient(circle at 20% 20%, rgba(255, 61, 106, 0.18), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(255, 106, 143, 0.20), transparent 45%),
    linear-gradient(180deg, #0b1020 0%, #0e1326 40%, #0b1020 100%);
}

:root{
  --pink-600:#ff3d6a;
  --pink-500:#ff4f7a;
  --pink-400:#ff6a8f;
  --pink-300:#ff84a3;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e7e9f2;
  --card:#ffffff;
  --shadow:0 12px 28px rgba(15,23,42,.08);
  --radius:18px;
}

/* ============================= */
/* Layout */
/* ============================= */

.container{
  max-width:1080px;
  margin:0 auto;
  padding:32px 16px 60px;
}

.hero{
  margin-bottom:40px;
  background:linear-gradient(90deg,var(--pink-600),var(--pink-400));
  color:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:
    0 20px 40px rgba(255,61,106,.35),
    0 8px 18px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15), transparent 40%);
  pointer-events:none;
}

.hero-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.brand{font-weight:900;font-size:22px}

.hero-sub{
  margin-top:4px;
  font-size:13px;
  opacity:.92;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(10px);
  font-size:13px;
}

/* ============================= */
/* Cards */
/* ============================= */

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}

@media (min-width:960px){
  .grid.cols-2{
    grid-template-columns:1.1fr .9fr;
  }
}

.card{
  background:#ffffff;
  border-radius:var(--radius);
  box-shadow:0 15px 40px rgba(0,0,0,.25);
  overflow:hidden;
  transition:transform .2s ease;
}

.card:hover{
  transform:translateY(-3px);
}

.card-hd{
  padding:16px 18px;
  /* Titre : fond rose dégradé (plus visible, comme la maquette) */
  background:linear-gradient(90deg, rgba(255,61,106,.22), rgba(255,106,143,.10));
  font-weight:900;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(15,23,42,.06);
}

.card-bd{ padding:22px }

/* ============================= */
/* Form */
/* ============================= */

.label{
  font-weight:800;
  margin-bottom:6px;
  display:block;
}

.help{
  margin-top:6px;
  font-size:12px; /* demandé : plus petit */
  color:var(--muted);
}

.req{ color:var(--pink-600); }

select, textarea, input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid #e6e8f0;
  background:#fff;
  transition:.2s;
}

select:focus, textarea:focus, input:focus{
  border-color:var(--pink-500);
  box-shadow:0 0 0 4px rgba(255,61,106,.15);
  outline:none;
}

.form-row{
  display:grid;
  gap:16px;
}

@media (min-width:820px){
  .form-row.cols-2{
    grid-template-columns:1fr 1fr;
  }
}

.hr{
  height:1px;
  background:#eceff5;
  margin:22px 0;
}

/* ============================= */
/* Index helpers (classes utilisées dans index.php) */
/* ============================= */

.title{display:flex;align-items:center;gap:8px}

.kicker{
  font-size:12px;
  font-weight:900;
  color:#111827;
  letter-spacing:.02em;
  margin:0 0 12px;
}

.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  color:#111827;
  background:linear-gradient(90deg, rgba(255,61,106,.18), rgba(255,106,143,.10));
  border:1px solid rgba(255,61,106,.22);
}

.btn-block{width:100%}

.btn-ghost{
  background:#f7f8fc;
  border:1px solid rgba(15,23,42,.10);
  color:#111827;
}
.btn-ghost:hover{transform:translateY(-1px)}

.note{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,61,106,.18);
  background:linear-gradient(90deg, rgba(255,61,106,.10), rgba(255,106,143,.06));
  color:#111827;
}

.checklist{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media(min-width:820px){
  .checklist{grid-template-columns:1fr 1fr}
}

.checkitem{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  cursor:pointer;
}
.checkitem input{margin-top:2px}
.checkitem span{font-weight:800;font-size:13px;color:#111827}

.error{
  background:#fff;
  border:1px solid rgba(255,61,106,.35);
  border-left:6px solid var(--pink-600);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.error ul{margin:8px 0 0;padding-left:18px}

.mt-12{margin-top:12px}

/* Consent checkbox : case à gauche du texte (sur une ligne) */
.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.35;
  user-select:none;
}
.consent input{
  width:auto;
  margin-top:2px;
}

/* ============================= */
/* Premium Button Glow */
/* ============================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 18px;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
  border:none;
  transition:.2s;
}

.btn-primary{
  background:linear-gradient(90deg,var(--pink-600),var(--pink-400));
  color:#fff;
  position:relative;
  box-shadow:0 0 0 rgba(255,61,106,0);
  overflow:hidden;
}

.btn-primary:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:16px;
  background:linear-gradient(90deg,var(--pink-400),var(--pink-600));
  z-index:-1;
  filter:blur(14px);
  opacity:.7;
  animation:glowPulse 2.5s infinite ease-in-out;
}

@keyframes glowPulse{
  0%{opacity:.4;transform:scale(.98)}
  50%{opacity:.9;transform:scale(1.03)}
  100%{opacity:.4;transform:scale(.98)}
}

.btn-primary:hover{
  transform:translateY(-2px);
}

/* ============================= */
/* Center Heart Glow */
/* ============================= */

.heart-circle{
  width:64px;
  height:64px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  box-shadow:
    0 0 0 6px rgba(255,61,106,.12),
    0 0 30px rgba(255,61,106,.35);
  animation:heartPulse 2s infinite ease-in-out;
}

.heart-circle span{
  font-size:22px;
  color:var(--pink-600);
}

@keyframes heartPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* ============================= */
/* Utilities */
/* ============================= */

.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.small{font-size:13px;color:#6b7280}

/* ===== Result UI ===== */

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(10px);
  font-size:13px;color:#fff;
}

.score-big{
  font-size:56px;
  font-weight:1000;
  letter-spacing:-1px;
  line-height:1;
  margin:0 0 6px;
}

.progress{
  height:10px;border-radius:999px;
  background:#eef0f7;overflow:hidden;
  border:1px solid rgba(15,23,42,.06);
}
.progress > i{
  display:block;height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--pink-600),var(--pink-400));
  border-radius:999px;
}

.kpi{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:14px 0;
}
.kpi .name{font-weight:900}
.kpi .val{font-weight:900;color:var(--pink-600)}

.list{
  margin:10px 0 0;padding-left:18px;
}
.list li{margin:6px 0}

.split{
  display:grid;grid-template-columns:1fr;gap:14px;
}
@media (min-width: 960px){
  .split{grid-template-columns:1fr 1fr}
}

.day{
  padding:12px 14px;border-radius:14px;
  border:1px solid #e6e8f0;background:#fff;
  display:flex;gap:10px;align-items:flex-start;
}
.day .d{
  width:34px;height:34px;border-radius:12px;
  background:rgba(255,61,106,.12);
  display:flex;align-items:center;justify-content:center;
  font-weight:1000;color:var(--pink-600);
  flex:0 0 auto;
}
/* ===== Result+ (bars + radar + chips) ===== */

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  border:1px solid #e6e8f0;background:#fff;
  font-weight:800;font-size:13px;
}

.meter{
  margin:14px 0 10px;
}
.meter .top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;gap:12px
}
.meter .name{font-weight:900}
.meter .pct{font-weight:900;color:var(--pink-600)}

.radar-wrap{
  display:flex;justify-content:center;align-items:center;
  padding:8px 0 0;
}
.radar{
  width:320px;max-width:100%;
  background: radial-gradient(circle at 50% 50%, rgba(255,61,106,.08), transparent 55%);
  border-radius:18px;
}

.section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 10px;
}
.section-title strong{font-size:15px}

.cols-2tight{
  display:grid;grid-template-columns:1fr;gap:14px;
}
@media(min-width: 960px){
  .cols-2tight{grid-template-columns:1fr 1fr}
}
/* ===== V4 Mini chart (Long terme) ===== */
.mini-chart{
  padding:10px 12px;
  border:1px solid #e6e8f0;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,61,106,.06), rgba(255,61,106,.02));
}

/* Fix checkboxes alignment */
.checkitem input{
  width:auto;
  flex:0 0 auto;
  margin-top:3px;
}

.checkitem{
  display:flex;
  align-items:center;
}