/* ================================
 * Thème LimeSurvey - Institut Agro Rennes-Angers (custom.css)
 * Basé sur le thème Fruity
 * Dernière révision : MAI 2025
 * ================================= */


/* ---------------- TITRES GÉNÉRAUX ---------------- */
/* Harmonise la typographie des titres (tous niveaux) */
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;           /* hérite de la police par défaut du thème */
  font-weight: 500;               /* poids intermédiaire : visible mais pas lourd */
  line-height: 1.3;               /* lisibilité verticale */
  color: #1d1d1b;                 /* gris anthracite : bon contraste sans agressivité */
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* Ajustement des tailles selon la hiérarchie typographique */
h1 { font-size: 2.4rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; }


/* ---------------- TITRES DE QUESTIONS ---------------- */
/* Mise en valeur des titres de type "question-title" */
h2.question-title,
h3.question-title {
  color: #f26c1f;                 /* orange institutionnel */
  font-weight: 700;               /* plus fort que les titres globaux */
  border-bottom: 2px solid #f26c1f;
  padding-bottom: 4px;
  margin-bottom: 10px;
}


/* ---------------- ASTÉRISQUES (champs obligatoires) ---------------- */
/* Améliore la lisibilité et la mise en forme des indicateurs obligatoires */
.asterisk,
.question .asterisk,
.important-asterisk {
  color: #D40000;                 /* rouge vif pour marquer la contrainte */
  margin-left: 0.3em;
  margin-right: 0.4em;
  vertical-align: middle;
  display: inline-block;
  font-weight: 500;
  font-size: 1.25rem;
}


/* ---------------- BLOCS D’INTRO / DESCRIPTION ---------------- */
/* Habillage des blocs de description (titre de groupe ou introduction) */
.question-title-container,
.group-description.row.well.space-col {
  background-color: #ffcfb3;      /* beige/orangé clair : doux mais repérable */
  border-left: 6px solid #ff9800; /* soulignement orange vif à gauche */
  color: #8d6e63;                 /* brun doux pour le texte */
  font-weight: 600;
  font-size: 1.5rem;
  text-align: justify;
}


/* ---------------- BOUTONS OUI/NON ---------------- */
/* Boutons type "Oui/Non" personnalisés aux couleurs de l’établissement */
.ls-answers .button-item {
  background-color: #f26c1f;      /* orange vif */
  color: #ffffff;                 /* texte blanc pour contraste */
  border: 1px solid #cc4c00;      /* bordure légèrement plus sombre */
  font-weight: normal;
  transition: all 0.3s ease;      /* effet fluide au survol */
}

.ls-answers .button-item:hover {
  background-color: #d35400;      /* orange foncé au survol */
  cursor: pointer;
}

.ls-answers .button-item.active {
  background-color: #772400 !important; /* orange brûlé pour l’état actif */
  border-color: #ffffff !important;
  font-weight: bold;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); /* halo blanc */
}

/* Couleur d’icône dans le bouton actif (utile uniquement si icônes présentes) */
.ls-answers .button-item.active .ls-icon {
  color: #ffffff !important;
}


/* ---------------- RADIO & CHECKBOX ---------------- */
/* Apparence personnalisée des boutons radio cochés et cases à cocher */
.radio-list .radio input[type="radio"]:checked + label,
.checkbox-list .checkbox input[type="checkbox"]:checked + label {
  background-color: #f26c1f;
  color: #ffffff;
  border-color: #cc4c00;
  font-weight: bold;
}


/* ---------------- ESPACEMENT ENTRE QUESTIONS ---------------- */
/* Réduction de l'espacement vertical si trop d’air entre les blocs */
.question-item {
  padding-top: 0;
  padding-bottom: 0;
}


/* ---------------- IMAGES RESPONSIVES ---------------- */
/* Centrage horizontal + adaptation automatique à l’écran */
.img-responsive {
  display: block;
  max-width: 100%;                /* s’adapte à la largeur de son conteneur */
  height: auto;                   /* conserve le ratio */
  margin-left: auto;
  margin-right: auto;
}

.survey-welcome {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}

/* LS 3.x : s'assurer que le calendrier passe au-dessus des autres blocs */
body .bootstrap-datetimepicker-widget,
body .bootstrap-datetimepicker-widget.dropdown-menu {
  z-index: 99999 !important;
}

/* 1) Toujours au-dessus de tout */
body .bootstrap-datetimepicker-widget,
body .bootstrap-datetimepicker-widget.dropdown-menu {
  z-index: 999999 !important;
}

/* 2) Empêcher la "découpe" du calendrier par les blocs voisins */
.question-container,
.question-container .panel,
.question-container .panel-body,
.group-container,
.group-container .panel,
.group-container .panel-body {
  overflow: visible !important;
}

/* 3) Le conteneur du champ date doit pouvoir "porter" un z-index */
.date-timepicker-group {
  position: relative !important;
  z-index: 2; /* faible mais explicite */
}

/* 4) Certains thèmes mettent un z-index élevé sur les titres: on le rabaisse */
.question-title-container,
.ls-question .question-title-container {
  position: relative;
  z-index: 1 !important;
}