/* =================================================================
   omamori-survey.css — Charte Omamori appliquée au module Survey.
   Chargé uniquement sur les pages /survey/* via l'override du
   templates_layout.xml (link conditionnel injecté).
   ================================================================= */

/* ---------- Hero / en-tête du sondage ---------- */
.oma-survey-hero {
  padding: 60px 0 30px;
  background: linear-gradient(135deg, #0B1220 0%, #1B2740 100%);
  color: #FFFFFF;
}

.oma-survey-hero .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #FFD24A;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.oma-survey-title {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 18px;
}

.oma-survey-intro {
  font-size: 17px;
  line-height: 1.55;
  color: #E6ECF7;
  max-width: 760px;
}

.oma-survey-intro p {
  margin: 0 0 10px;
}

.oma-survey-intro strong {
  color: #FFD24A;
}

.oma-survey-intro em {
  color: #9AA4B8;
  font-style: italic;
}

.oma-survey-hero--thanks {
  padding-bottom: 40px;
}

/* ---------- Carte sondage ---------- */
.oma-survey-body {
  padding: 30px 0 80px;
  background: #F8FAFC;
}

.oma-survey-card {
  max-width: 820px;
  margin: -30px auto 0;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(11, 18, 32, 0.08);
  padding: 36px 40px;
}

@media (max-width: 600px) {
  .oma-survey-card {
    padding: 24px 18px;
    border-radius: 12px;
  }
  .oma-survey-title {
    font-size: 28px;
  }
}

/* ---------- En-tête de page (numérotation + titre + intro) ---------- */
.oma-survey-card .page-header {
  border-bottom: 1px solid #E6ECF7;
  padding-bottom: 18px;
  margin-bottom: 24px;
}

.oma-survey-card .page-header p.pull-right {
  font-size: 13px;
  color: #8FA0BD;
  font-weight: 500;
}

.oma-survey-card .page-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0B1220;
  margin: 6px 0 10px;
}

.oma-survey-card .page-header > div.oe_no_empty {
  font-size: 15px;
  color: #475569;
  line-height: 1.55;
}

/* ---------- Question wrapper ---------- */
.js_question-wrapper {
  padding: 24px 0;
  border-bottom: 1px solid #E6ECF7;
}

.js_question-wrapper:last-of-type {
  border-bottom: none;
}

.js_question-wrapper h2 {
  font-size: 18px;
  font-weight: 600;
  color: #0B1220;
  line-height: 1.4;
  margin: 0 0 6px;
}

.js_question-wrapper h2 .text-danger {
  color: #DC2626 !important;
  font-weight: 700;
  margin-left: 4px;
}

/* Description sous le titre de la question */
.js_question-wrapper > div.text-muted {
  font-size: 14px;
  color: #64748B;
  font-style: italic;
  margin: 0 0 16px;
}

.js_question-wrapper > div.text-muted p {
  margin: 0;
}

/* ---------- Champs de saisie ---------- */
.oma-survey-card .form-control,
.oma-survey-card select.form-control,
.oma-survey-card input[type="text"].form-control {
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  background-color: #FFFFFF;
  color: #0B1220;
  height: auto;
  box-shadow: none;
}

.oma-survey-card .form-control:focus {
  border-color: #FFD24A;
  box-shadow: 0 0 0 3px rgba(255, 210, 74, 0.18);
  outline: none;
}

/* ---------- Radios / cases à cocher ---------- */
.oma-survey-card .js_radio label {
  display: block;
  padding: 12px 16px;
  margin: 6px 0;
  background: #F8FAFC;
  border: 1px solid #E6ECF7;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-weight: 500;
  color: #1E293B;
}

.oma-survey-card .js_radio label:hover {
  background: #FEF7DD;
  border-color: #FFD24A;
}

.oma-survey-card .js_radio input[type="radio"],
.oma-survey-card .js_radio input[type="checkbox"] {
  margin-right: 10px;
  accent-color: #FFD24A;
}

/* En mode "columns" (display_mode='columns'), garder une grille propre */
.oma-survey-card .js_radio [class*="col-md-"] {
  padding-left: 6px;
  padding-right: 6px;
}

/* ---------- Boutons d'action ---------- */
.oma-survey-card .text-center {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid #E6ECF7;
}

.oma-survey-card .btn-primary,
.oma-survey-card .btn-default {
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  transition: transform 0.1s, box-shadow 0.15s;
}

.oma-survey-card .btn-primary {
  background: #FFD24A;
  color: #0B1220;
  box-shadow: 0 2px 8px rgba(255, 210, 74, 0.35);
}

.oma-survey-card .btn-primary:hover,
.oma-survey-card .btn-primary:focus {
  background: #F0B82E;
  color: #0B1220;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 210, 74, 0.45);
}

.oma-survey-card .btn-default {
  background: #FFFFFF;
  color: #475569;
  border: 1px solid #CBD5E1;
  margin-right: 12px;
}

.oma-survey-card .btn-default:hover {
  background: #F8FAFC;
  color: #0B1220;
  border-color: #94A3B8;
}

/* ---------- Page de remerciement ---------- */
.oma-survey-card--thanks {
  text-align: center;
  padding: 50px 40px;
}

.oma-survey-thanks p {
  font-size: 16px;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 14px;
}

.oma-survey-thanks strong {
  color: #0B1220;
  font-size: 18px;
}

.oma-survey-thanks a {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 22px;
  background: #FEF7DD;
  border: 1px solid #FFD24A;
  border-radius: 8px;
  color: #0B1220;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.oma-survey-thanks a:hover {
  background: #FFD24A;
}

/* ---------- Messages d'erreur ---------- */
.oma-survey-card .js_errzone {
  margin-top: 10px;
  padding: 10px 14px;
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
  font-size: 14px;
}

/* ---------- Indicateur de page (Page X / Y) plus discret ---------- */
.oma-survey-card .page-header p.pull-right {
  background: #F8FAFC;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}