/* ==========================================================================
   nevaone-simulateur.css — Simulateur alarme & vidéosurveillance
   Réutilise .nv-alert et .nv-hp de nevaone-contact.css.
   ========================================================================== */

.nvsim {
  padding: 88px 0;
  background: linear-gradient(160deg, #12141a 0%, #1b2430 100%);
  color: #fff;

  /* Même raison que sur la page de création : le bandeau de résultat et le
     champ anti-robot viennent de nevaone-contact.css, dont les variables sont
     déclarées sur .nv-contact — absent ici. */
  --nv-ink: #1c1d24;
  --nv-muted: #6f7280;
  --nv-line: #e3e4ea;
  --nv-accent: #71c594;
  --nv-accent-dark: #4ea272;
  --nv-danger: #d9534f;
  --nv-radius: 14px;
}

.nvsim-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.nvsim-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  margin-bottom: 18px;
  border-radius: 100px;
  background: rgba(113, 197, 148, .13);
  border: 1px solid rgba(113, 197, 148, .3);
  color: #71c594;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nvsim-head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 14px;
}
.nvsim-head p { color: rgba(255, 255, 255, .68); font-size: 1.02rem; line-height: 1.7; margin: 0; }

/* ---------- Cadre ---------- */

.nvsim-box {
  max-width: 940px;
  margin: 0 auto;
  background: #fff;
  color: #14161c;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .4);
}

/* ---------- Progression ---------- */

.nvsim-steps {
  display: flex;
  border-bottom: 1px solid #e6e8ee;
  background: #fafbfc;
}
.nvsim-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 8px;
  font-size: .84rem;
  color: #8b93a1;
  border-right: 1px solid #e6e8ee;
  cursor: default;
}
.nvsim-step:last-child { border-right: 0; }
.nvsim-step span {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e6e8ee;
  color: #6b7280;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;

  /* Le chiffre est centré optiquement, pas seulement géométriquement : sans
     hauteur de ligne fixe ni tabulation des chiffres, « 1 » et « 4 » ne se
     posaient pas à la même hauteur dans le rond. */
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nvsim-step em { font-style: normal; }

.nvsim-step.on { color: #14161c; font-weight: 600; background: #fff; }
.nvsim-step.on span {
  background: #4ea272;
  color: #fff;
  /* Un halo signale l'étape en cours sans l'agrandir : agrandir le rond
     décalait le libellé et faisait sauter toute la barre. */
  box-shadow: 0 0 0 4px rgba(78, 162, 114, .16);
}

.nvsim-step.done { cursor: pointer; color: #2f7a52; }

/*
 * Étape franchie : le rond se remplit et le chiffre cède la place à une coche.
 *
 * L'ancienne version posait « content: '✓' » sur ::after alors que le chiffre
 * était toujours là. Le pseudo-élément devenait un SECOND élément de la
 * grille : celle-ci créait une deuxième ligne, le chiffre remontait et la
 * coche tombait sous le rond. D'où les deux défauts constatés — chiffres
 * décentrés et coches flottantes — qui n'en faisaient qu'un.
 *
 * La coche est maintenant dessinée (deux bords tournés) plutôt qu'écrite : le
 * caractère « ✓ » n'a ni la même graisse ni le même centrage d'une police à
 * l'autre, alors qu'un trait dessiné est net partout et à toute taille.
 */
.nvsim-step.done span {
  background: #4ea272;
  /* Le chiffre reste dans le balisage — il porte le numéro d'étape pour les
     lecteurs d'écran — mais il n'occupe plus de place à l'écran. */
  font-size: 0;
  color: transparent;
}
.nvsim-step.done span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  border-radius: 1px;
  /* -58 % et non -50 % : une coche pivotée paraît basse si on la centre sur
     sa boîte, parce que sa pointe descend plus bas que son épaule. */
  transform: translate(-50%, -58%) rotate(45deg);
}

/* Le retour en arrière est possible : on le montre au survol plutôt que de
   laisser deviner que ces onglets sont cliquables. */
.nvsim-step.done:hover { background: #f1f8f4; }
.nvsim-step.done:hover span { background: #3d8b60; }

/* ---------- Panneaux ---------- */

.nvsim-panel { display: none; border: 0; margin: 0; padding: 34px 36px; }
.nvsim-panel.is-active { display: block; }
.nvsim-panel legend {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 0;
  margin-bottom: 8px;
}
.nvsim-help { font-size: .87rem; color: #6b7280; margin: 0 0 22px; }

/* Sans JavaScript, tous les panneaux restent visibles et envoyables. */
.no-js .nvsim-panel { display: block; }

/* ---------- Choix ---------- */

.nvsim-grid { display: grid; gap: 12px; margin-bottom: 26px; }
.nvsim-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nvsim-grid--3 { grid-template-columns: repeat(3, 1fr); }

.nvsim-choice { display: block; cursor: pointer; }
.nvsim-choice input { position: absolute; opacity: 0; width: 0; height: 0; }

.nvsim-choice__in {
  display: block;
  height: 100%;
  padding: 20px 18px;
  border: 2px solid #e6e8ee;
  border-radius: 12px;
  text-align: center;
  transition: border-color .16s, background .16s, transform .16s;
}
.nvsim-choice--wide .nvsim-choice__in { text-align: left; }
.nvsim-choice:hover .nvsim-choice__in { border-color: #b9c3d3; transform: translateY(-2px); }

.nvsim-choice__in i { display: block; font-size: 1.5rem; color: #4ea272; margin-bottom: 10px; }
.nvsim-choice--wide .nvsim-choice__in i { margin-bottom: 8px; }
.nvsim-choice__in strong { display: block; font-size: .92rem; font-weight: 600; }
.nvsim-choice__in small { display: block; font-size: .79rem; color: #6b7280; line-height: 1.55; margin-top: 5px; }

.nvsim-choice input:checked + .nvsim-choice__in {
  border-color: #4ea272;
  background: #f2faf6;
}
.nvsim-choice input:focus-visible + .nvsim-choice__in {
  outline: 2px solid #2b6cd4;
  outline-offset: 2px;
}

/* ---------- Champs ---------- */

.nvsim-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.nvsim-field--full { grid-column: 1 / -1; }
.nvsim-field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.nvsim-field select,
.nvsim-field input,
.nvsim-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #dcdfe6;
  border-radius: 9px;
  font: inherit;
  font-size: .93rem;
  background: #fff;
  color: #14161c;
}
.nvsim-field textarea { resize: vertical; line-height: 1.6; }
.nvsim-field select:focus,
.nvsim-field input:focus,
.nvsim-field textarea:focus {
  outline: 0;
  border-color: #4ea272;
  box-shadow: 0 0 0 3px rgba(78, 162, 114, .18);
}

/* ---------- Plans des locaux ---------- */

.nvsim-plans {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px dashed #c3cad6;
  border-radius: 12px;
  background: #f8fafc;
}
.nvsim-plans__txt { flex: 1 1 300px; }
.nvsim-plans__txt strong { display: flex; align-items: center; gap: 8px; font-size: .92rem; margin-bottom: 6px; }
.nvsim-plans__txt strong i { color: #4ea272; }
.nvsim-plans__txt p { font-size: .83rem; color: #6b7280; line-height: 1.6; margin: 0; }
.nvsim-plans__txt em { font-style: italic; }

.nvsim-plans__drop { flex-shrink: 0; position: relative; }
.nvsim-plans__drop input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.nvsim-plans__cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 100px;
  background: #14161c;
  color: #fff;
  font-size: .89rem;
  font-weight: 600;
  pointer-events: none;
}
.nvsim-plans__drop:hover .nvsim-plans__cta { background: #262a33; }

.nvsim-plans__list { list-style: none; padding: 0; margin: 0 0 22px; }
.nvsim-plans__list li {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 8px 14px;
  border: 1px solid #e6e8ee;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: .85rem;
  background: #fff;
}
.nvsim-plans__list em { font-style: normal; color: #6b7280; flex-shrink: 0; }
.nvsim-plans__list li.is-too-big { border-color: #f5c4c0; background: #fdf6f5; }
.nvsim-plans__list li.is-too-big em { color: #a12a22; font-weight: 600; }
.nvsim-plans__list li.is-note { border-style: dashed; color: #8b7433; background: #fffaf0; }

.nvsim-captcha { margin-bottom: 18px; }
.nvsim-captcha .nv-field { margin: 0; }
.nvsim-captcha label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.nvsim-captcha input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #dcdfe6;
  border-radius: 9px;
  font: inherit;
  font-size: .93rem;
}
.nvsim-captcha .nv-hint { display: block; font-size: .77rem; color: #8b93a1; margin-top: 6px; }
.nvsim-captcha .nv-error { display: none; }

.nvsim-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .84rem;
  color: #4a5060;
  line-height: 1.6;
  margin-bottom: 24px;
}

/*
 * La case reçoit une taille explicite, et il le faut.
 *
 * La feuille générale du site pose « input { width: 100% } » pour les champs
 * de formulaire. Cette règle s'appliquait aussi à la case à cocher : mesurée,
 * elle occupait 858 × 2276 px et ne laissait que 13 px au texte, qui
 * s'affichait alors une lettre par ligne. « flex-shrink: 0 » ne suffisait
 * pas — il empêche de rétrécir, pas de s'étirer.
 */
.nvsim-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: #4ea272;
  border-radius: 4px;
}

/* Le texte prend tout le reste, et peut se réduire s'il le faut. */
.nvsim-consent span { flex: 1 1 auto; min-width: 0; }
.nvsim-consent a { color: #2f7a52; }

/* ---------- Résultat ---------- */

.nvsim-result {
  border: 1px solid #e6e8ee;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 30px;
}
.nvsim-result__kpis { display: grid; grid-template-columns: repeat(3, 1fr); background: #f6f8fa; }
.nvsim-result__kpis div { padding: 20px 22px; border-right: 1px solid #e6e8ee; }
.nvsim-result__kpis div:last-child { border-right: 0; }
.nvsim-result__kpis span { display: block; font-size: .76rem; color: #6b7280; margin-bottom: 6px; }
.nvsim-result__kpis strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }

.nvsim-result__list { list-style: none; padding: 0; margin: 0; }
.nvsim-result__list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 22px;
  border-top: 1px solid #eef0f4;
  font-size: .9rem;
}
.nvsim-result__list span { color: #6b7280; }
.nvsim-result__list strong { font-weight: 600; text-align: right; }

.nvsim-result__note {
  display: flex;
  gap: 10px;
  padding: 15px 22px;
  margin: 0;
  background: #fffaf0;
  border-top: 1px solid #f2e4c8;
  font-size: .82rem;
  color: #7a6432;
  line-height: 1.6;
}
.nvsim-result__note i { flex-shrink: 0; font-size: 1rem; }

.nvsim-formtitle { font-size: 1.05rem; font-weight: 700; margin: 0 0 18px; }

/* ---------- Boutons ---------- */

.nvsim-nav { display: flex; gap: 12px; align-items: center; }
.nvsim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: 100px;
  font: inherit;
  font-size: .94rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s, transform .16s;
}
.nvsim-btn:hover { transform: translateY(-1px); }
.nvsim-btn--next, .nvsim-btn--send { background: #4ea272; color: #fff; margin-left: auto; }
.nvsim-btn--next:hover, .nvsim-btn--send:hover { background: #43905f; }
.nvsim-btn--back { background: #f0f2f6; color: #4a5060; }
.nvsim-btn--back:hover { background: #e6e9ef; }
.nvsim-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.nvsim-btn__spin {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nvsimSpin .7s linear infinite;
}
.nvsim-btn.is-loading .nvsim-btn__spin { display: block; }
@keyframes nvsimSpin { to { transform: rotate(360deg); } }

/* ---------- Confirmation ---------- */

.nvsim-done { padding: 56px 40px; text-align: center; }
.nvsim-done__check {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8f6ee;
  color: #1d6b42;
  font-size: 1.9rem;
  font-weight: 700;
}
.nvsim-done h3 { font-size: 1.3rem; margin: 0 0 10px; }
.nvsim-done p { color: #6b7280; font-size: .96rem; line-height: 1.7; max-width: 460px; margin: 0 auto; }
.nvsim-done a { color: #2f7a52; font-weight: 600; }

/* ---------- Écrans étroits ---------- */

@media (max-width: 900px) {
  .nvsim-grid--4, .nvsim-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .nvsim-step em { display: none; }
  .nvsim-result__kpis { grid-template-columns: 1fr; }
  .nvsim-result__kpis div { border-right: 0; border-bottom: 1px solid #e6e8ee; }
}

@media (max-width: 600px) {
  .nvsim { padding: 60px 0; }
  .nvsim-panel { padding: 26px 20px; }
  .nvsim-grid--4, .nvsim-grid--3 { grid-template-columns: 1fr; }
  .nvsim-fields { grid-template-columns: 1fr; }
  .nvsim-nav { flex-wrap: wrap; }
  .nvsim-btn { width: 100%; margin-left: 0 !important; }
}