@import url("./variables.css");

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--c-bg); color:var(--c-text); font-family:var(--ff-body); }
a { color:inherit; text-decoration:none; }

/* container */
.container{
  width:100%;
  margin:0 auto;
  padding-left:var(--page-margin-desktop);
  padding-right:var(--page-margin-desktop);
}
@media (max-width:1024px){
  .container{ padding-left:var(--page-margin-tablet); padding-right:var(--page-margin-tablet); }
}
@media (max-width:640px){
  .container{ padding-left:var(--page-margin-mobile); padding-right:var(--page-margin-mobile); }
}

/* header */
.header{
  position:fixed; inset:0 0 auto 0;
  height:var(--header-h);
  background:var(--c-header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(0,0,0,0.04);
  z-index:50;
}
.header-inner{
  height:100%;
  display:flex; align-items:center; justify-content:center;
}
.nav{ display:flex; gap:36px; font-size:15px; }
.nav a{
  padding:7px 13px;
  border-radius:999px;
  transition:.15s ease;
}
.nav a.active{ background:#000; color:#fff; }
.nav a:hover{ background:rgba(0,0,0,.06); }
@media (max-width:640px){
  .nav{ gap:10px; font-size:14px; overflow-x:auto; padding:0 6px; }
  .nav a{ white-space:nowrap; }
}

/* main / hero */
.main{ padding-top:calc(var(--header-h) + 60px); }

.hero{
  text-align:center;
  padding-top:60px;
  position:relative;
}
.hero-title{
  font-family:var(--ff-title);
  font-size:56px;
  line-height:1.05;
  margin:0 auto var(--space-title-sub);
  color:#000;
}
.hero-subtitle{
  width:min(740px,100%);
  margin:0 auto;
  font-size:18px;
  line-height:1.45;
  color:#000;
}
.hero-cta{
  margin-top:var(--space-sub-btn);
  height:var(--btn-h);
  padding:0 26px;
  border-radius:999px;
  background:var(--c-primary);
  color:#fff;
  font-weight:600;
  border:none;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  transition:.12s ease;
}
.hero-cta:hover{ transform:translateY(-1px); background:#0b2b47; }
.hero-gap-after-btn{ margin-top:var(--space-btn-gray); }

/* tryfree label + arrow */
.tryfree{
  position:absolute;
  left:var(--page-margin-desktop);
  top:360px;
  display:flex; flex-direction:column; gap:4px;
  transform:rotate(-10deg);
  font-size:18px;
}
.tryfree svg{ transform:rotate(10deg); margin-left:50px; }
@media (max-width:1024px){
  .tryfree{ left:var(--page-margin-tablet); top:320px; font-size:16px; }
}
@media (max-width:640px){
  .tryfree{ position:static; transform:none; align-items:center; margin-top:18px; }
  .tryfree svg{ margin-left:0; }
}

/* section grise */
.grey-section{
  background:var(--c-card);
  border-radius:22px 22px 0 0;  /* réduit */
  padding:48px 0 64px;
  min-height:520px;
}

/* générateur intégré */
.gen-shell{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}
@media (max-width:1024px){
  .gen-shell{ grid-template-columns:1fr; }
}

.gen-card{
  background:#fff;
  padding:22px;
  border-radius:var(--r-14);
  border:1px solid var(--c-border);
  box-shadow:var(--shadow-soft);
}

.gen-title{
  font-size:20px;
  font-weight:700;
  margin:0 0 14px;
}

/* grille des inputs */
.gen-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media (max-width:1024px){ .gen-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .gen-grid{ grid-template-columns:1fr; } }

.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
  color:#111827;
}
.field input, .field select{
  width:100%;
  padding:10px 11px;
  border-radius:var(--r-8);
  border:1px solid #CBD5E1;
  font-size:14px;
  outline:none;
  background:#fff;
}
.field input:focus, .field select:focus{
  border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(13,137,255,.18);
}

/* slider étoiles */
.stars-wrap{ grid-column:1 / -1; }
.rating-slider{
  position:relative;
  height:44px;
  border-radius:var(--r-8);
  border:1px solid var(--c-border);
  background:rgba(241,245,249,.7);
  padding:10px;
  touch-action:none;
  user-select:none;
}
.rating-slider .bar{
  position:absolute; left:10px; right:10px; top:50%;
  height:8px; transform:translateY(-50%);
  border-radius:999px;
  border:1px solid var(--c-border);
  background:linear-gradient(#f3f4f6,#e5e7eb);
}
.rating-slider .fill{
  position:absolute; top:50%;
  height:8px; transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,var(--c-accent));
}
.rating-slider input[type="range"]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none;
}

.rating-nums{
  margin-top:8px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:280px;
}
.stars-hint{
  margin-top:8px;
  font-size:12px; color:#475569;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.stars-chip{
  font-size:11px;
  border-radius:999px;
  padding:6px 9px;
  background:#fff;
  border:1px solid var(--c-border);
  cursor:pointer;
}
.stars-chip.active{
  border-color:rgba(13,137,255,.5);
  background:rgba(13,137,255,.08);
  color:#0b67c2;
}

/* actions */
.gen-actions{
  margin-top:16px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.btn{
  height:42px;
  padding:0 14px;
  border-radius:var(--r-8);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
}
.btn-outline{
  background:#fff; border:1px solid #CBD5E1; color:#0f172a;
}
.btn-outline:hover{ background:#f8fafc; }
.btn-primary{
  background:#0f172a; color:#fff; border:1px solid transparent;
}
.btn-primary:hover{ background:#111827; }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }

.info{ font-size:14px; color:#475569; }

/* KPIs colonne à droite */
.kpis{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.kpi{
  background:#fff; border:1px solid var(--c-border);
  padding:12px; border-radius:var(--r-10);
}
.kpi small{
  display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#64748b;
}
.kpi b{ display:block; margin-top:4px; font-size:22px; }

/* historique à droite */
.history{
  margin-top:12px;
  background:#fff; border:1px solid var(--c-border);
  border-radius:var(--r-10);
  padding:12px;
}
.history-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}
.history table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.history th, .history td{
  padding:7px 6px; border-top:1px solid var(--c-border); vertical-align:top;
}
.history th{ text-align:left; font-size:11px; text-transform:uppercase; color:#64748b; }

.note{ font-size:12px; color:#64748b; margin-top:10px; }