/******************
    User custom CSS
    ---------------
    Chargé en dernier — surcharge possible sur toutes les propriétés.
    Jamais écrasé par les mises à jour LimeSurvey.
******************/

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --color-primary:        #004b7f;
  --color-secondary:      #2D4576;
  --color-danger:         #e75041;
  --color-border:         #909090;
  --color-border-light:   #e7e7e7;
  --color-bg-page:        #f5f7fa;
  --color-bg-card:        #ffffff;
  --color-bg-question:    #f8f8f8;
  --color-bg-secondary:   #fbfbfb;
  --color-text-body:      #4a5568;
  --color-focus-ring:     rgba(26, 70, 102, 0.6);

  /* Bootstrap overrides */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  --bs-nav-link-padding-x:         1rem;
  --bs-nav-link-padding-y:         0.5rem;
  --bs-navbar-nav-link-padding-x:  0.5rem;
  --bs-heading-color:               var(--color-secondary);
  --bs-info-rgb:                    24, 70, 110;
  --bs-secondary-bg-rgb:            248, 248, 248;
  --bs-border-color:                var(--color-border);
}


/* ============================================================
   1. STRUCTURE GÉNÉRALE & TYPOGRAPHIE
   ============================================================ */
body {
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  background: var(--color-bg-page);
}

#main-col {
  margin-top: 3em;
}

img {
  max-width: 100%;
  height: auto !important;
}

.text-center {
  text-align: left !important;
}


/* ============================================================
   2. HEADER
   ============================================================ */
.navbar-header {
  display: flex;
}

.fr-header__brand-top {
  width: auto;
  float: left;
}

.fr-header__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.fr-header__service {
  float: left;
  color: #333;
  background: transparent;
  padding: 15px;
  font-size: 1.8rem;
  font-weight: 400;
  min-height: 60px;
  margin: auto 0 auto 25px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fr-logo-operateur {
  max-width: 10rem;
  margin: auto 1rem;
  float: left;
}

.logo-container > img {
  max-height: 10rem;
  padding: 15px;
  width: auto;
}


/* ============================================================
   3. SURVEY WRAPPER (desktop uniquement)
   ============================================================ */
@media (min-width: 768px) {
  #limesurvey {
    max-width: 960px;
    margin: 2.5rem auto;
    padding: 2rem 2.5rem;
    background: var(--color-bg-card);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }
}


/* ============================================================
   4. TITRES & TEXTES
   ============================================================ */
.survey-title,
.survey-description {
  text-align: left;
}

.survey-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.survey-description {
  color: var(--color-text-body);
  line-height: 1.5;
}

.progress {
  margin: 1.5rem 0 2rem;
}

/* Titre de question */
.ls-question-wrapper h4.question-title {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.question-title-container {
  padding-bottom: 0;
}


/* ============================================================
   5. QUESTIONS / FORMULAIRES
   ============================================================ */
.question-container {
  margin: 1.5em;
  padding: 0 1em 1em;
  border: 1px solid var(--color-border-light);
  background-color: var(--color-bg-question);
}

.asterisk {
  margin: 0.75rem 0.5rem 0.75rem 0;
}

.consent_label,
.consent_info {
  display: inline;
}

.display_none {
  display: none;
}


/* ============================================================
   6. ÉTATS / FOCUS / VALIDATION
   ============================================================ */
.ls-choice:focus {
  background: #e6e6e6;
  color: #333;
}

.ls-choice:focus-visible {
  border-color: #1A4666;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
              0 0 8px var(--color-focus-ring);
  z-index: 1;
}

.accepted-border {
  border: 3px solid #0d6efd !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

#datasecurity_accepted {
  border: 2px solid #8f8f9d;
}

/* Erreur */
.text-danger {
  color: var(--color-danger) !important;
  font-weight: 600;
}

/* Le titre de question obligatoire ne doit pas passer en rouge */
.ls-label-question.h4.text-danger {
  color: var(--color-secondary) !important;
  font-weight: 500;
}


/* ============================================================
   7. LISTES, RADIOS & CHECKBOXES — compact
   ============================================================ */

/* Espacement vertical réduit entre options */
.radio-list .radio-item,
.checkbox-list .checkbox-item {
  margin: 0 !important;
  padding: 0.1rem 0 !important;
}

/* Label compact */
.radio-item label,
.checkbox-item label {
  margin: 0 !important;
  line-height: 1.15 !important;
  display: flex !important;
  align-items: center !important;
}

/* Padding du groupe d'options */
.question-container .radio-list,
.question-container .checkbox-list {
  padding: 1.3rem !important;
}

/* Alignement vertical des puces */
.awesome-checkbox .radio-item label::before,
.awesome-checkbox .radio-item label::after,
.awesome-checkbox .checkbox-item label::before,
.awesome-checkbox .checkbox-item label::after {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Empêche l'effet "coché par défaut" */
.awesome-checkbox .radio-item label::after,
.awesome-checkbox .checkbox-item label::after {
  opacity: 0 !important;
  transform: translateY(-50%) scale(0) !important;
}

/* État coché */
.awesome-checkbox .radio-item input:checked + label::after,
.awesome-checkbox .checkbox-item input:checked + label::after {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
}

/* Padding du label checkbox inline */
.awesome-checkbox .checkbox-item label {
  padding-left: 8px;
}

.awesome-checkbox .radio-item label {
  padding-left: 0.5rem;
}

/* Layout grille pour "autre" checkbox */
.checkbox-item.mb-1 div.row div.col-auto,
.othertext-label-checkox-container {
  display: grid;
}

.checkbox-label.control-label {
  display: inline !important;
  white-space: normal !important;
}

/* Surveys list */
.surveys-list li,
.surveys-list li a {
  margin-left: 0;
  padding-left: 0;
}


/* ============================================================
   8. TYPES DE QUESTIONS SPÉCIFIQUES
   ============================================================ */

/* Question 5 points (boutons radio horizontaux) */
.choice-5-pt-radio.question-container {
  padding: 4px 12px !important;
}

.choice-5-pt-radio.question-container input[type="radio"] {
  margin: 0 16px !important;
}

/* Tableau radio (type E — Augmenter/Sans changement/Diminuer) */
table.radio-array td.answer-item {
  text-align: center !important;
  vertical-align: middle !important;
}

table.radio-array td.answer-item input[type="radio"] {
  display: block !important;
  margin: 0 auto !important;
}

table.radio-array td.answer-item label.ls-label-xs-visibility,
.checkbox-array.table .checkbox-item .ls-label-xs-visibility {
  margin: 0 auto !important;
}


/* ============================================================
   9. COULEURS DE FOND UTILITAIRES
   ============================================================ */
.bg-body-secondary,
.bg-body-tertiary {
  background: var(--color-bg-secondary) !important;
}


/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .fr-header__brand {
    flex-direction: column;
  }
}

@media only screen and (max-width: 760px) {
  .h3 {
    font-size: 1.5rem;
  }

  .question-container {
    margin-left: 0;
    margin-right: 0;
    padding-top: 1em;
  }
}

/* Tablette & mobile : reset padding listes, ajustement puce */
@media only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px) {

  .dir-ltr table.ls-answers .radio-item label.ls-label-xs-visibility::before,
  .dir-ltr table.ls-answers .checkbox-item label.ls-label-xs-visibility::before,
  .dir-ltr table.ls-answers .radio-item label.ls-label-xs-visibility::after,
  .dir-ltr table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
    margin-left: 10px;
  }
  

  .question-container .radio-list,
  .question-container .checkbox-list {
    padding: 0 !important;
  }

  .answer-item.radio-item label.ls-label-xs-visibility,
  .answer-item.checkbox-item label.ls-label-xs-visibility {
    padding-left: 2.5rem;
  }
  
  .list-with-comment .radio-label.control-label {
padding-left: 20px;
}

.list-with-comment .answer-item.radio-item label.radio-label.control-label::before,
.list-with-comment .answer-item.radio-item label.radio-label.control-label::after {
  margin-left: -8px ;
}

}