/* Enquête de satisfaction SAMEDIA — surcouche du design system (V2, 2026-10-01)
   Typo alignée sur samedia.com : Prompt 400 / 600 uniquement, texte #2C2C2C.
   Direction « fondu dans le site » : carte gris clair, pastilles rondes jaunes comme les pictos du site. */
:root {
  --smd-font: "Prompt", Helvetica, Arial, sans-serif;
  --smd-fw-bold: 600;
  --smd-fw-black: 600;
  --smd-ink: #2C2C2C;
  --enq-bg: #F5F5F5;
  --enq-line: #DCDCDC;
}

html, body { background: var(--enq-bg); }
body { margin: 0; font-family: var(--smd-font); color: var(--smd-ink); }

/* En-tête visible seulement hors iframe (classe posée par enquete.js) */
.enq-header { display: none; padding: 20px 24px; background: #fff; border-bottom: 4px solid var(--smd-yellow); }
.is-standalone .enq-header { display: block; }
.enq-header img { display: block; height: 48px; width: auto; }

.enq { max-width: 860px; margin: 0 auto; padding: 32px 32px 36px; }

/* Progression : pastilles numérotées */
.enq-dots { list-style: none; display: flex; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; }
.enq-dots li {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--enq-line); color: #9A9A9A;
  font-size: 14px; font-weight: 600; z-index: 1;
}
.enq-dots li + li { margin-left: 28px; }
.enq-dots li + li::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 32px; height: 2px;
  margin-right: -2px; background: var(--enq-line); z-index: -1;
}
.enq-dots li.is-done { background: #000; border-color: #000; color: var(--smd-yellow); }
.enq-dots li.is-done + li::before, .enq-dots li.is-current::before { background: #000; }
.enq-dots li.is-current { background: var(--smd-yellow); border-color: #000; color: #000; transform: scale(1.12); }
.enq-progress__text { margin: 10px 0 28px; text-align: center; font-size: 13px; color: #6E6E6E; }

/* Étapes */
.enq-step { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.js .enq-step { display: none; }
.js .enq-step.is-active { display: flex; animation: enq-in .25s ease; }
@keyframes enq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .enq-step.is-active { animation: none; } }
.enq-step + .enq-step { margin-top: 48px; }
.js .enq-step + .enq-step { margin-top: 0; }

/* Titre d'étape : comme les titres du site (majuscules 600 + filet jaune) */
.enq-step__title {
  display: block; width: 100%; padding: 0 0 12px; margin: 0 0 22px;
  font-size: 22px; font-weight: 600; text-transform: uppercase; color: #2C2C2C; text-align: center;
  background: linear-gradient(var(--smd-yellow), var(--smd-yellow)) center bottom / 64px 3px no-repeat;
}
.enq-step__num { display: none; }
.enq-intro { margin: 0; text-align: center; font-size: 14px; color: #6E6E6E; }

/* Questions à choix */
.enq-q { background: #fff; padding: 16px 20px 18px; border-radius: 6px; }
.enq-step > .enq-q + .enq-q { margin-top: -12px; }
.enq-q .smd-label { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: #2C2C2C; }
.enq-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.enq-choice { position: relative; cursor: pointer; display: flex; }
.enq-choice input, .enq-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.enq-choice span {
  flex: 1; display: flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 8px 14px; border: 2px solid var(--enq-line); border-radius: 6px; background: #fff;
  font-size: 15px; line-height: 1.25; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.enq-choice span::before {
  content: ""; flex: none; width: 18px; height: 18px; border: 2px solid #9A9A9A; border-radius: 50%;
  background: #fff; transition: all .15s;
}
.enq-choice input[type="checkbox"] + span::before { border-radius: 3px; }
.enq-choice:hover span { border-color: #2C2C2C; }
.enq-choice input:checked + span { border-color: #000; background: #FFFBD6; box-shadow: inset 0 0 0 1px #000; font-weight: 600; }
.enq-choice input:checked + span::before { border-color: #000; background: #000; box-shadow: inset 0 0 0 3px var(--smd-yellow); }
.enq-choice input[type="checkbox"]:checked + span::before { box-shadow: none; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23FFE500' stroke-width='2.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.enq-choice input:focus-visible + span, .enq-pill input:focus-visible + span { outline: 3px solid #000; outline-offset: 2px; }

/* Lignes de notes : ronds comme les pastilles du site */
.enq-step > .enq-rate:first-of-type { margin-top: 0; }
.enq-rate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  background: #fff; padding: 16px 22px; border-radius: 6px; margin-top: -12px;
}
.enq-rate__label { flex: 1 1 240px; margin: 0; font-size: 15px; font-weight: 600; }
.enq-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.enq-pill { position: relative; cursor: pointer; }
.enq-pill span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--enq-line); background: #fff;
  font-size: 16px; font-weight: 600; color: #2C2C2C; transition: all .15s;
}
.enq-pill:hover span { border-color: #2C2C2C; }
.enq-pill input:checked + span { background: var(--smd-yellow); border-color: #000; color: #000; transform: scale(1.08); }
.enq-pill--na { margin-left: 6px; }
.enq-pill--na span { width: auto; height: 36px; padding: 0 14px; border-radius: 18px; font-size: 13px; font-weight: 400; color: #6E6E6E; }
.enq-pill--na input:checked + span { background: #2C2C2C; border-color: #2C2C2C; color: #fff; transform: none; }

.enq-scale--nps { gap: 6px; }
.enq-scale--nps .enq-pill span { width: 40px; height: 40px; font-size: 15px; }
.enq-nps-legend { display: flex; justify-content: space-between; max-width: 506px; margin: 8px 0 0; font-size: 13px; color: #6E6E6E; }

/* Champs texte */
.enq-step > .smd-field, .enq-step > .smd-form-grid { background: #fff; padding: 20px 22px; border-radius: 6px; }
.enq-step .smd-label { font-size: 15px; font-weight: 600; color: #2C2C2C; }
.enq-step .smd-input, .enq-step .smd-textarea { border-width: 2px; border-color: var(--enq-line); border-radius: 6px; background: #fff; }
.enq-step .smd-input:focus, .enq-step .smd-textarea:focus { border-color: #000; box-shadow: 0 0 0 3px rgb(255 229 0 / .6); outline: none; }
.enq-step > .smd-form-grid { margin-bottom: -12px; }

/* Erreurs */
.enq-err { display: none; margin: 10px 0 0; }
.is-invalid .enq-err, .enq-err.is-shown { display: block; }
.enq-q.is-invalid { box-shadow: inset 0 0 0 2px var(--smd-danger); }

.enq-recontact { background: #fff; padding: 16px 22px; border-radius: 6px; font-size: 15px; }
.enq-recontact input { accent-color: #000; }
.enq-rgpd { margin: -8px 0 0; font-size: 12px; line-height: 1.5; color: #6E6E6E; }
.enq-rgpd a { color: #2C2C2C; }

/* Navigation */
.enq-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.enq-nav .smd-btn { min-height: 50px; padding: 0 28px; font-size: 15px; font-weight: 600; border-radius: 4px; }
.enq-back {
  background: none; border: 0; padding: 10px 4px; cursor: pointer;
  font-family: inherit; font-size: 15px; color: #6E6E6E; text-decoration: underline; text-underline-offset: 3px;
}
.enq-back:hover { color: #000; }
.js #enq-prev[hidden], .js #enq-next[hidden], .js #enq-submit[hidden] { display: none; }
.js .enq-nav #enq-next, .js .enq-nav #enq-submit { margin-left: auto; }
html:not(.js) #enq-prev, html:not(.js) #enq-next { display: none; }

.enq-hp { position: absolute; left: -9999px; }

/* Page merci */
.enq-thanks { text-align: center; padding: 64px 24px; }
.enq-thanks__mark {
  display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px;
  border-radius: 50%; background: var(--smd-yellow); color: #000; font-size: 34px; font-weight: 600;
}
.enq-thanks h1 { font-size: 26px; font-weight: 600; text-transform: uppercase; margin: 20px 0 12px; }
.enq-sign { margin-top: 32px; font-size: 13px; font-weight: 600; letter-spacing: 2px; color: #000; }

@media (max-width: 600px) {
  .enq { padding: 22px 14px 28px; }
  .enq-dots li { width: 28px; height: 28px; font-size: 12px; }
  .enq-dots li + li { margin-left: 14px; }
  .enq-dots li + li::before { width: 18px; }
  .enq-step__title { font-size: 19px; }
  .enq-q, .enq-rate, .enq-step > .smd-field, .enq-step > .smd-form-grid, .enq-recontact { padding: 16px; }
  .enq-choices { gap: 6px; }
  .enq-choice span { padding: 8px 10px; font-size: 14px; min-height: 48px; }
  .enq-choice span::before { display: none; }
  .enq-pill span { width: 42px; height: 42px; }
  .enq-scale--nps .enq-pill span { width: 36px; height: 36px; font-size: 14px; }
  .enq-nav .smd-btn { flex: 1 1 auto; }
}

.enq-step .smd-textarea { min-height: 80px; }