/* ============================================================
   Traço de Iara — Quiz (5 étapes) — CSS partagé
   Continuité directe de la LP v2 (styles-v2.css).
   - Montserrat partout. ZÉRO italique.
   - Voix = poids (700-800) + couleur (bordeaux / or foncé #9c7b22).
   - Système .mark / .mark-b highlighter sur les phrases-pivots.
   - Texte body noir pur. Padding compact (40/52).
   - Mobile only, viewport cible 360-430px.
   ============================================================ */

/* ---------- 0. Tokens ---------- */
:root {
  --bordeaux: #7A1F2B;
  --brique: #B8332E;          /* CTA uniquement */
  --or: #C9A24A;              /* SVG, ombres, bordures, séparateurs */
  --or-soft: #D9B968;         /* gradient progress, hover or atténué */
  --or-mark: rgba(201, 162, 74, 0.42);  /* fond .mark highlighter */
  --or-fonce: #9c7b22;        /* OR DES MISES EN RELIEF (texte) */
  --creme: #F5E9D8;           /* fond global pages quiz */
  --creme-clair: #FAF7F2;     /* fond inputs, cards avis */
  --beige: #E8D5B5;           /* fond cards selected, progress empty */
  --noir: #000000;            /* TEXTE BODY = NOIR PUR */
  --bordeaux-sombre: #5A1018;
  --gris-60: #000000;
  --gris-50: #000000;
  --overlay-bg: #2A1410;      /* fond overlay fake-loading */

  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --cursive: 'Allura', cursive;

  --shadow-card: 0 4px 16px rgba(122, 31, 43, 0.10);
  --shadow-cta: 0 6px 16px rgba(122, 31, 43, 0.34);
  --shadow-cta-hover: 0 10px 26px rgba(122, 31, 43, 0.45);
  --shadow-topbar: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.5);

  --maxw: 440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  font-family: var(--sans);
  color: var(--noir);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.app {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--creme);
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
  box-shadow: 0 0 60px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
}

/* Mount fade-in */
.app-main {
  opacity: 0;
  animation: page-mount .4s ease forwards;
  flex: 1 0 auto;
}
@keyframes page-mount { to { opacity: 1; } }

/* ---------- 0b. Scroll progress bar (top) ---------- */
.scroll-prog {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--or-soft), var(--or));
  z-index: 220;
  transition: width .08s linear;
  pointer-events: none;
}

/* ---------- 0c. Emphasis system (NO italics) ---------- */
strong, b { font-weight: 800; }
em { font-style: normal; font-weight: 800; color: var(--bordeaux); }
.b-bordeaux { color: var(--bordeaux); font-weight: 800; }
.c-bordeaux { color: var(--bordeaux); font-weight: 700; }
.b-or { color: var(--or-fonce); font-weight: 800; }
.i-or, .i-or-b { font-style: normal; color: var(--or-fonce); font-weight: 800; }
.whisper, .term { font-style: normal; font-weight: 700; }
.mark {
  font-weight: 800;
  color: var(--noir);
  background: linear-gradient(transparent 56%, var(--or-mark) 56%);
  padding: 0 2px;
  border-radius: 1px;
}
.mark-b {
  font-weight: 800;
  color: var(--bordeaux);
  background: linear-gradient(transparent 56%, rgba(122,31,43,0.16) 56%);
  padding: 0 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   1. TOPBAR TRUST (sticky, identique sur les 5 pages)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-top: 12px;
  background: var(--bordeaux);
  color: #fff;
  box-shadow: var(--shadow-topbar);
  border-bottom: 1.5px solid var(--or);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.topbar-photo {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--or);
}
.topbar-id { display: flex; flex-direction: column; flex: none; }
.topbar-id .tb-name {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.02;
  color: var(--or-soft);
  letter-spacing: 0.2px;
}
.topbar-pills {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  text-align: right;
}
.topbar-pills .pill {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--creme-clair);
  border: 1.3px solid var(--or);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #2A1410;
}
.topbar-pills .pill .star { color: var(--or); font-size: 10px; line-height: 1; }

/* ============================================================
   2. HEADER ÉTAPE (H2 + progress bar + sous-barre)
   ============================================================ */
.step-head {
  padding: 15px 22px 14px;
  text-align: left;
  background: #EFE1CC;
  border-bottom: 1px solid rgba(201,162,74,0.28);
}
.step-h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.1px;
  color: var(--bordeaux);
  max-width: none;
  margin: 0;
  text-wrap: pretty;
}
.step-progress {
  height: 6px;
  background: var(--creme-clair);
  border-radius: 3px;
  margin: 10px 0 0;
  overflow: hidden;
}
.step-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--or-soft), var(--brique) 78%, var(--bordeaux));
  border-radius: 3px;
  transition: width 1500ms ease-out;
}
.step-sub {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  color: var(--noir);
  text-align: left;
  margin: 8px 0 0;
}

/* ============================================================
   3. BLOC QUESTION
   ============================================================ */
.q-block {
  padding: 28px 24px 40px;
  text-align: center;
}
.q-h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--bordeaux);
  max-width: 392px;
  margin: 0 auto;
  text-wrap: balance;
}
.q-sub {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--noir);
  max-width: 392px;
  margin: 14px auto 0;
  text-wrap: pretty;
}
.q-sub + .q-sub { margin-top: 10px; }

/* ============================================================
   4. CARDS OPTION (étape 1)
   ============================================================ */
.option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 392px;
  margin: 28px auto 0;
}
.option-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 16px 20px;
  background: var(--creme-clair);
  border: 1px solid var(--or);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform .1s ease, background .2s ease, border-color .2s ease;
}
.option-card .opt-label {
  flex: 1 1 auto;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--noir);
}
.option-card .opt-emoji { font-size: 25px; line-height: 1; flex: none; width: 32px; text-align: center; }
.option-card .opt-check {
  position: absolute;
  top: 10px; right: 10px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity .2s ease, transform .2s ease;
}
.option-card.is-selected {
  background: var(--beige);
  border: 2px solid var(--bordeaux);
  padding: 15px 19px;
}
.option-card.is-selected .opt-check { opacity: 1; transform: scale(1); }
.option-card.is-pressed { transform: scale(0.99); }

/* ============================================================
   5. INPUT FIELD (étapes 2, 3, 4, 5)
   ============================================================ */
.field { max-width: 392px; margin: 28px auto 0; text-align: left; }
.field + .field { margin-top: 14px; }
.input {
  width: 100%;
  height: 52px;
  padding: 14px 16px;
  background: var(--creme-clair);
  border: 1.5px solid var(--beige);
  border-radius: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--noir);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input::placeholder { font-weight: 500; color: rgba(0,0,0,0.4); }
.input:focus {
  outline: none;
  border: 2px solid var(--brique);
  box-shadow: 0 0 0 4px rgba(184, 51, 46, 0.12);
}
.input.is-error { border: 2px solid var(--brique); }
.field-error {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bordeaux);
  margin: 8px 2px 0;
  min-height: 0;
  display: none;
}
.field-error.is-visible { display: block; }

.iara-input-shell {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  background: var(--creme-clair);
  border: 1.5px solid var(--beige);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.iara-input-shell:focus-within {
  border: 2px solid var(--brique);
  box-shadow: 0 0 0 4px rgba(184, 51, 46, 0.12);
}
.iara-input-shell.is-error {
  border: 2px solid var(--brique);
}
.iara-field-emoji {
  flex: none;
  width: 24px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}
.iara-field-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--noir);
  outline: none;
}
.iara-field-input::placeholder { font-weight: 500; color: rgba(0,0,0,0.4); }
.field-valid-icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #22C55E;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.field-error-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brique);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
}
.iara-date-shell { gap: 8px; }
.iara-date-inputs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.iara-date-part {
  width: 38px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--noir);
}
.iara-date-year { width: 58px; }
.iara-date-part::placeholder { color: rgba(0,0,0,0.4); font-weight: 500; }
.iara-date-sep { color: rgba(0,0,0,0.35); font-weight: 600; }
.iara-phone-shell { position: relative; }
.iara-phone-country {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 6px 0 0;
  border: 0;
  background: transparent;
  color: var(--noir);
  font-weight: 800;
  font-size: 17px;
}
.iara-phone-caret { font-size: 10px; color: var(--or-fonce); }
.iara-phone-dial {
  flex: none;
  font-weight: 800;
  font-size: 15px;
  color: var(--noir);
  white-space: nowrap;
}
.iara-phone-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--noir);
}
.iara-phone-input::placeholder { color: rgba(0,0,0,0.4); font-weight: 500; }
.iara-country-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--creme-clair);
  border: 1px solid var(--or);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.iara-country-item {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 28px 1fr auto 20px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgba(201,162,74,0.22);
  background: transparent;
  text-align: left;
  color: var(--noir);
}
.iara-country-item:last-child { border-bottom: 0; }
.iara-country-item:hover,
.iara-country-item.is-active { background: var(--beige); }
.iara-country-name { font-weight: 700; font-size: 14px; }
.iara-country-dial { font-weight: 800; color: var(--noir); font-size: 13px; }
.iara-country-custom {
  width: 68px;
  height: 30px;
  border: 1px solid var(--beige);
  border-radius: 6px;
  background: var(--creme);
  padding: 0 8px;
  font-weight: 800;
  color: var(--bordeaux);
}

/* Signe révélé (étape 3, sous le champ après validation) */
.signo-reveal {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 17px;
  color: var(--or-fonce);
  text-align: center;
}
.signo-reveal.is-visible { display: flex; }
.signo-reveal svg { flex: none; }

/* Autocomplete ville (étape 4) */
.ac-wrap { position: relative; }
.iara-field-ac { flex: 1 1 auto; min-width: 0; }
.ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 30;
  background: var(--creme-clair);
  border: 1px solid var(--or);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-height: 222px;
  overflow-y: auto;
  display: none;
}
.ac-list.is-open { display: block; }
.ac-item {
  padding: 11px 16px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--noir);
  border-bottom: 1px solid rgba(201,162,74,0.22);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.is-active { background: var(--beige); }

/* ============================================================
   6. CTA (toutes étapes)
   ============================================================ */
.cta-zone { max-width: 392px; margin: 26px auto 0; }
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  min-height: 58px;
  padding: 18px 28px;
  background: var(--brique);
  color: #fff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  border: none;
  border-radius: 10px;
  box-shadow: var(--shadow-cta);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  line-height: 1.2;
}
.cta .arrow { transition: transform .2s ease; }
.cta:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }
.cta:not(:disabled):hover .arrow { transform: translateX(3px); }
.cta:not(:disabled):active { transform: translateY(0); }
.cta:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.cta.cta-final { width: 100%; font-size: 15px; min-height: 64px; }

.cta-micro {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  color: var(--noir);
  text-align: center;
  margin: 12px auto 0;
  max-width: 340px;
  text-wrap: pretty;
}

/* ============================================================
   7. CARD AVIS (style Trustpilot, 1 par étape, sous CTA)
   ============================================================ */
.avis-zone { padding: 8px 24px 30px; }
.tp-review {
  max-width: 380px;
  margin: 26px auto 0;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--creme-clair);
  border: 1px solid rgba(201,162,74,0.3);
  border-radius: 12px;
  padding: 18px 18px 19px;
}
.tp-avatar {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
}
.tp-content { flex: 1 1 auto; min-width: 0; }
.tp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin-bottom: 9px;
}
.tp-stars-sm { width: 92px; height: auto; flex: none; }
.tp-name {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 14px;
  color: var(--noir);
}
.tp-posted {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  color: #9aa0a6;
  white-space: nowrap;
}
.tp-posted img { width: 64px; height: auto; }
.tp-quote {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: #2c2622;
  margin: 0;
  text-wrap: pretty;
}
.tp-quote strong,
.tp-quote .b-bordeaux { font-weight: 800; color: var(--bordeaux); }

/* ============================================================
   8. FOOTER MINIMAL (identique sur les 5 pages)
   ============================================================ */
.footer {
  flex: none;
  background: var(--creme);
  padding: 32px 24px;
}
.footer-wrap {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  color: rgba(0,0,0,0.7);
}
.footer-legal a { text-decoration: none; transition: text-decoration .15s ease; }
.footer-legal a:hover { text-decoration: underline; }
.footer-legal .sep { color: rgba(0,0,0,0.35); }
.footer-disclaimer {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(0,0,0,0.6);
  max-width: 540px;
  margin: 0;
}
.footer-copy {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  color: rgba(0,0,0,0.4);
  margin: 0;
}

/* ============================================================
   9. OVERLAY FAKE-LOADING (composant clé, 5 étapes)
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.overlay[data-active="true"] { opacity: 1; visibility: visible; }
.overlay-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, rgba(122,31,43,0.18) 0%, transparent 60%),
    var(--overlay-bg);
}
.overlay-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 360px;
  padding: 0 24px;
}
.overlay-eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--or-fonce);
  opacity: 0.9;
  margin: 0 0 24px;
}
.overlay-candle svg { width: 80px; height: 100px; margin: 0 auto; display: block; }
.overlay-candle svg .flame {
  transform-origin: 40px 38px;
  animation: candle-flicker 2s ease-in-out infinite;
}
.overlay-message {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--creme);
  max-width: 320px;
  margin: 32px auto 0;
  text-wrap: balance;
  transition: opacity 200ms ease;
}
.overlay-message .b-or { color: var(--or-soft); font-weight: 800; }
.overlay-message strong { color: var(--creme); font-weight: 800; }
.overlay-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 48px;
}
.overlay-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--or);
  animation: dot-pulse 1.4s ease-in-out infinite;
}
.overlay-dots span:nth-child(2) { animation-delay: 200ms; }
.overlay-dots span:nth-child(3) { animation-delay: 400ms; }
.overlay-microcopy {
  position: absolute;
  bottom: 40px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  color: var(--or);
  opacity: 0.7;
  margin: 0;
  padding: 0 24px;
}

@keyframes candle-flicker {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 1; }
  25% { transform: scaleY(1.05) translateY(-1px); opacity: 0.92; }
  50% { transform: scaleY(0.98) translateY(0.5px); opacity: 0.98; }
  75% { transform: scaleY(1.03) translateY(-0.5px); opacity: 0.94; }
}
@keyframes dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .app-main { animation: none; opacity: 1; }
  .overlay-candle svg .flame { animation: none; }
  .cta { transition: none; }
}