/* ════════════════════════════════════════════════════════════
   FEEDBACK — Equi Patrimoine · Design system identique au Flash
   ════════════════════════════════════════════════════════════ */

@font-face { font-family:'Publico'; src:url('Publico-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Publico'; src:url('Publico-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Publico'; src:url('Publico-Roman.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Publico'; src:url('Publico-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Publico'; src:url('Publico-MediumItalic.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Publico'; src:url('Publico-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Publico'; src:url('Publico-BoldItalic.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; }

:root {
  --bg:            #141311;
  --bg-deep:       #0E0D0B;
  --surface:       #1C1A17;
  --surface-2:     #252320;
  --surface-3:     #2F2B26;
  --surface-hi:    #353029;
  --text:          #F4F0EA;
  --text-muted:    #948E84;
  --text-light:    #CCC7BE;
  --text-faint:    rgba(244,240,234,0.30);
  --accent:        #CB8442;
  --accent-hover:  #DD964E;
  --accent-soft:   rgba(203,132,66,0.12);
  --accent-border: rgba(203,132,66,0.28);
  --accent-glow:   rgba(203,132,66,0.22);
  --border:        rgba(244,240,234,0.07);
  --border-strong: rgba(244,240,234,0.13);
  --danger:        #D85A4E;
  --danger-soft:   rgba(216,90,78,0.12);
  --warn:          #D4883A;
  --warn-soft:     rgba(212,136,58,0.12);
  --positive:      #7AB87A;
  --positive-soft: rgba(122,184,122,0.12);
  --radius-lg:     20px;
  --radius:        14px;
  --radius-sm:     10px;
  --radius-xs:     7px;
  --shadow:        0 8px 28px rgba(0,0,0,0.36), 0 20px 60px rgba(0,0,0,0.30);
  --shadow-accent: 0 8px 24px rgba(203,132,66,0.24);
  --font-title:    'Publico', Georgia, serif;
  --font-body:     'Aileron', 'Helvetica Neue', Arial, sans-serif;
  --ease-out:      cubic-bezier(0.22,1,0.36,1);
  --ease-spring:   cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Progress bar ──────────────────────────────────────── */
#progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--surface-2);
  z-index: 100;
}
#progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.5s var(--ease-out);
  width: 0%;
}

/* ─── Layout ────────────────────────────────────────────── */
#app { min-height:100dvh; }

.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 40px 24px 72px;
}
.screen.active { display:flex; animation: fadein 0.4s var(--ease-out); }

.screen-inner {
  width: 100%;
  max-width: 600px;
}
.screen-inner--center { text-align:center; display:flex; flex-direction:column; align-items:center; }

@keyframes fadein {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── Brand letterhead ──────────────────────────────────── */
.brand-letterhead {
  display: block;
  margin-bottom: 48px;
}
.brand-letterhead--center { margin-bottom: 40px; }
.brand-letterhead img {
  height: 20px;
  width: auto;
  display: block;
}

/* ─── Typography ────────────────────────────────────────── */
.step-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
}

h1 {
  font-family: var(--font-title);
  font-size: clamp(28px, 4.5vw, 40px);
  font-weight: 400;
  line-height: 1.18;
  color: var(--text);
  margin-bottom: 14px;
}

.subtitle {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 44px;
}

/* ─── Prestation pills ──────────────────────────────────── */
.prestation-block {
  margin-bottom: 44px;
}

.field-label-inline {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 14px;
  font-weight: 400;
}

.prestation-pills,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  border-radius: 100px;
  padding: 9px 20px;
  cursor: pointer;
  transition: all 0.18s var(--ease-out);
  white-space: nowrap;
}
.pill:hover {
  border-color: var(--accent-border);
  color: var(--text);
}
.pill.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ─── NPS Scale ─────────────────────────────────────────── */
.nps-block { margin-top: 4px; }

.nps-question {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--text-light);
  margin-bottom: 28px;
  line-height: 1.4;
}

.nps-scale { display:flex; flex-direction:column; gap:12px; }

.nps-buttons {
  display: flex;
  gap: 5px;
}

.nps-btn {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.16s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  position: relative;
}
.nps-btn:hover {
  transform: translateY(-3px);
  color: var(--text);
  border-color: var(--border-strong);
}
/* Couleurs sémantiques au hover */
.nps-btn[data-val="0"]:hover,.nps-btn[data-val="1"]:hover,.nps-btn[data-val="2"]:hover,
.nps-btn[data-val="3"]:hover,.nps-btn[data-val="4"]:hover,.nps-btn[data-val="5"]:hover,
.nps-btn[data-val="6"]:hover { background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }

.nps-btn[data-val="7"]:hover,.nps-btn[data-val="8"]:hover { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }

.nps-btn[data-val="9"]:hover,.nps-btn[data-val="10"]:hover { background:var(--positive-soft); border-color:var(--positive); color:var(--positive); }

/* États sélectionnés */
.nps-btn.selected-danger  { background:var(--danger-soft);  border-color:var(--danger);  color:var(--danger);  transform:translateY(-3px); box-shadow:0 6px 20px rgba(216,90,78,0.22); }
.nps-btn.selected-warn    { background:var(--warn-soft);    border-color:var(--warn);    color:var(--warn);    transform:translateY(-3px); box-shadow:0 6px 20px rgba(212,136,58,0.22); }
.nps-btn.selected-promo   { background:var(--positive-soft);border-color:var(--positive);color:var(--positive);transform:translateY(-3px); box-shadow:0 6px 20px rgba(122,184,122,0.22); }
.nps-btn.dim { opacity:0.28; transform:none; }

.nps-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

.nps-hint {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-light);
  font-style: italic;
  min-height: 22px;
  padding-left: 2px;
  transition: opacity 0.3s;
}

/* ─── Étoiles ───────────────────────────────────────────── */
.dimensions-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 44px;
}

.dimension-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s;
}
.dimension-item:has(.star.active) { border-color: var(--accent-border); }

.dimension-label {
  font-size: 14.5px;
  color: var(--text-light);
  line-height: 1.4;
}

.star-row { display:flex; gap:6px; flex-shrink:0; }

.star {
  background: none;
  border: none;
  font-size: 26px;
  color: var(--surface-3);
  cursor: pointer;
  transition: color 0.12s, transform 0.12s var(--ease-spring);
  padding: 0;
  line-height: 1;
  display: block;
}
.star:hover   { color: var(--accent); transform:scale(1.2); }
.star.active  { color: var(--accent); }
.star.hover-preview { color: rgba(203,132,66,0.5); }

/* ─── Qualitatif ────────────────────────────────────────── */
.form-field { margin-bottom: 32px; }

.field-label {
  display: block;
  font-size: 15px;
  color: var(--text-light);
  margin-bottom: 10px;
}

.field-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.6;
}

.field-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  padding: 14px 16px;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 90px;
}
.field-textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-textarea::placeholder { color: var(--text-muted); opacity:0.5; }

/* Testimonial block */
.testimonial-field {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 22px 22px 16px;
}
.temoignage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.temoignage-header .field-label { margin-bottom:0; }
.optional-badge {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 2px 8px;
  font-weight: 600;
}
.testimonial-field .field-textarea {
  background: var(--surface-2);
  border-color: var(--border);
  margin-top: 10px;
}

.accord-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.5;
}
.checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

.char-count {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 6px;
  opacity: 0.6;
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}
.btn-cta:active { transform:translateY(0); }
.btn-cta:disabled { opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-cta--light {
  background: transparent;
  border: 1px solid var(--accent-border);
  color: var(--accent);
}
.btn-cta--light:hover { background: var(--accent-soft); }

.btn-skip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.btn-skip:hover { color: var(--text-light); }

/* ─── Merci ─────────────────────────────────────────────── */
.merci-icon {
  font-size: 44px;
  color: var(--accent);
  margin-bottom: 28px;
  display: block;
  animation: pop-in 0.55s var(--ease-spring) both;
}
@keyframes pop-in {
  from { transform:scale(0.4); opacity:0; }
  to   { transform:scale(1);   opacity:1; }
}

.google-cta-block {
  margin-top: 44px;
  width: 100%;
  max-width: 480px;
}
.google-cta-inner {
  padding: 26px 26px 22px;
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  text-align: left;
}
.google-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.google-intro {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 18px;
}
.google-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
}

.merci-signature {
  margin-top: 52px;
}
.signature-img {
  height: 56px;
  width: auto;
  opacity: 0.85;
  display: block;
  margin: 0 auto;
}

/* ─── Misc ──────────────────────────────────────────────── */
.reassurance {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
  opacity: 0.7;
}
.link-amber {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 520px) {
  .screen { padding: 28px 16px 56px; }
  .brand-letterhead { margin-bottom: 36px; }
  .subtitle { margin-bottom: 32px; }
  .nps-buttons { gap: 3px; }
  .nps-btn { font-size: 11px; border-radius: 8px; }
  .dimension-item { grid-template-columns: 1fr; gap: 10px; }
  .star { font-size: 24px; }
  .pill { font-size: 13px; padding: 8px 16px; }
  h1 { font-size: 26px; }
}