/******************
User custom CSS
---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you’ll still benefit of all the updates
*/

/******************
  ENSC - LimeSurvey 7
  Thème compact propre
******************/

:root {
  --ensc-page-width: 900px;
  --ensc-card-width: 650px;
  --ensc-logo-width: 310px;

  --ensc-green: #1f9d55;
  --ensc-red: #d93025;
  --ensc-border: #6f7488;
  --ensc-text: #232f3e;
  --ensc-bg: #f4f6f4;
  --ensc-card-bg: #ffffff;
  --ensc-border-light: #e2e5e8;
  --ensc-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* =========================================================
   BASE
   ========================================================= */

html,
body {
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: var(--ensc-text) !important;
  background-color: var(--ensc-bg) !important;
}

/* Conteneur principal */
#outerframeContainer,
.outerframe,
.survey-container,
#welcome-container,
#dynamicReloadContainer {
  max-width: var(--ensc-page-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   HEADER
   Pleine largeur, fond blanc, ombre légère
   ========================================================= */

header,
.navbar,
.navbar-default,
.survey-header {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--ensc-border-light) !important;
  box-shadow: var(--ensc-shadow) !important;
}

/* Conteneur interne du logo aligné avec les cartes */
header .container,
header .container-fluid,
.navbar .container,
.navbar .container-fluid,
.navbar-header,
.logo-container,
.survey-logo,
#logo {
  width: 100% !important;
  max-width: var(--ensc-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

/* Zone du logo */
.navbar-brand,
.logo,
#logo,
.logo-container a,
.survey-logo a {
  display: block !important;
  width: 100% !important;
  max-width: var(--ensc-card-width) !important;
  margin: 0 !important;
  padding: 16px 0 12px 0 !important;
  text-align: left !important;
}

/* Image du logo */
.navbar-brand img,
.logo-container img,
.survey-logo img,
.logo img,
#logo img,
img.logo,
img[src*="logo"],
img[src*="Logo"],
img[src*="logos"],
img[src*="pdn"],
img[src*="conum"],
img[src*="ENSC"] {
  width: var(--ensc-logo-width) !important;
  max-width: var(--ensc-logo-width) !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  object-fit: contain !important;
}

/* =========================================================
   BARRE DE PROGRESSION
   Conteneur blanc aligné avec les cartes, coins bas arrondis
   ========================================================= */

body .top-container.container-fluid {
  width: 100% !important;
  max-width: var(--ensc-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1rem !important;
  padding: 0.55rem 2rem 0.75rem 2rem !important;
  background-color: #ffffff !important;
  border: 1px solid var(--ensc-border-light) !important;
  border-top: none !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: var(--ensc-shadow) !important;
  overflow: hidden !important;
}

/* Barre grise */
body .top-container.container-fluid .progress,
.progress,
.ls-progress,
.survey-progress {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 4px !important;
  min-height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #d9ded9 !important;
  border: none !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Partie verte */
body .top-container.container-fluid .progress-bar,
.progress-bar,
.ls-progress .progress-bar,
.survey-progress .progress-bar {
  height: 4px !important;
  min-height: 4px !important;
  background-color: var(--ensc-green) !important;
  border-radius: 999px !important;
}

/* =========================================================
   ALERTES / BANDEAUX
   ========================================================= */

.alert,
.alert-warning,
.ls-js-hidden-warning {
  max-width: var(--ensc-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   ACCUEIL / DESCRIPTION
   ========================================================= */

.survey-name,
.survey-name h1,
h1 {
  font-size: 1.65rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin-top: 0.6rem !important;
  margin-bottom: 0.9rem !important;
  color: var(--ensc-text) !important;
}

.survey-description,
.survey-description *,
.welcome-container,
.welcome-container *,
.group-description,
.group-description * {
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

.survey-description p,
.welcome-container p,
.group-description p {
  margin-top: 0 !important;
  margin-bottom: 0.45rem !important;
}

.survey-description ul,
.welcome-container ul,
.group-description ul {
  margin-top: 0.2rem !important;
  margin-bottom: 0.35rem !important;
  padding-left: 1.2rem !important;
}

.survey-description li,
.welcome-container li,
.group-description li {
  margin: 0 0 0.08rem 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Masquer les titres redondants sur la page d'accueil */
#welcome-container .group-title,
#welcome-container .group-name,
#welcome-container .survey-group-title,
#welcome-container .question-group-title,
#welcome-container h2,
#welcome-container h3 {
  display: none !important;
}

/* =========================================================
   TITRES DE GROUPES
   ========================================================= */

.group-title,
.group-title h1,
h1.group-title {
  font-size: 1.45rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin: 0 0 1rem 0 !important;
  color: var(--ensc-text) !important;
}

/* =========================================================
   CARTES DE QUESTIONS
   ========================================================= */

.ls-question,
.question-container,
.survey-question,
.question-wrapper {
  position: relative !important;
  max-width: var(--ensc-card-width) !important;
  margin: 0 auto 1rem auto !important;
  padding: 1rem 1.1rem 1.05rem 1.1rem !important;
  background-color: var(--ensc-card-bg) !important;
  border: 1px solid var(--ensc-border-light) !important;
  border-radius: 10px !important;
  box-shadow: var(--ensc-shadow) !important;
}

/* Titre de question */
.question-title-container {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 0.45rem 0 !important;
  padding: 0 !important;
  gap: 0.25rem !important;
}

.question-title-container .question-text,
.question-title-container .ls-label-question,
.question-title-container .ls-question-text,
.question-text,
.ls-label-question,
.ls-question-text {
  order: 1 !important;
  display: inline !important;
  flex: 0 1 auto !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #333333 !important;
}

/* Astérisque obligatoire légèrement remontée */
.question-title-container .asterisk,
.ls-question .question-title-container .asterisk,
.question-container .question-title-container .asterisk,
.asterisk {
  order: 2 !important;
  position: static !important;
  display: inline-block !important;
  float: none !important;
  color: var(--ensc-red) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: -0.35rem 0 0 0.15rem !important;
  padding: 0 !important;
  transform: translateY(-0.15rem) !important;
}

/* Texte d'aide */
.question-help-container,
.question-help-container *,
.ls-questionhelp,
.ls-questionhelp *,
.text-info {
  font-size: 1rem !important;
  line-height: 1.3 !important;
  margin: 0.25rem 0 0.45rem 0 !important;
  padding: 0 !important;
  color: #555555 !important;
}

/* Réponses */
.answer-container,
.answer-wrapper,
.ls-answers,
.answers-list {
  margin-top: 0.45rem !important;
  padding-top: 0 !important;
}

/* =========================================================
   BOUTONS OUI / NON
   ========================================================= */

.ls-answers .btn,
.answer-item .btn,
.radio-item .btn,
.checkbox-item .btn,
label.btn,
.btn-lg {
  font-size: 0.82rem !important;
  line-height: 1.1 !important;
  padding: 0.28rem 0.5rem !important;
  min-width: 52px !important;
  min-height: 32px !important;
  height: auto !important;
  margin: 0 0.35rem 0.25rem 0 !important;
  border-width: 1px !important;
  border-radius: 4px !important;
}

/* État neutre */
.ls-answers label.btn,
.answer-container label.btn,
.answer-wrapper label.btn,
.answers-list label.btn {
  background-color: #ffffff !important;
  border-color: var(--ensc-border) !important;
  color: var(--ensc-border) !important;
}

.ls-answers label.btn *,
.answer-container label.btn *,
.answer-wrapper label.btn *,
.answers-list label.btn * {
  color: inherit !important;
  fill: currentColor !important;
}

/* Oui : vert au survol et actif */
.ls-answers label.btn:nth-of-type(1):hover,
.answer-container label.btn:nth-of-type(1):hover,
.answer-wrapper label.btn:nth-of-type(1):hover,
.answers-list label.btn:nth-of-type(1):hover,
.ls-answers label.btn:nth-of-type(1).active,
.answer-container label.btn:nth-of-type(1).active,
.answer-wrapper label.btn:nth-of-type(1).active,
.answers-list label.btn:nth-of-type(1).active,
.ls-answers label.btn:nth-of-type(1)[aria-pressed="true"],
.answer-container label.btn:nth-of-type(1)[aria-pressed="true"],
.answer-wrapper label.btn:nth-of-type(1)[aria-pressed="true"],
.answers-list label.btn:nth-of-type(1)[aria-pressed="true"],
.ls-answers label.btn:nth-of-type(1):has(input:checked),
.answer-container label.btn:nth-of-type(1):has(input:checked),
.answer-wrapper label.btn:nth-of-type(1):has(input:checked),
.answers-list label.btn:nth-of-type(1):has(input:checked),
.ls-answers input[value="Y"]:checked + label.btn,
.answer-container input[value="Y"]:checked + label.btn,
.answer-wrapper input[value="Y"]:checked + label.btn,
.answers-list input[value="Y"]:checked + label.btn {
  background-color: var(--ensc-green) !important;
  border-color: var(--ensc-green) !important;
  color: #ffffff !important;
}

/* Non : rouge au survol et actif */
.ls-answers label.btn:nth-of-type(2):hover,
.answer-container label.btn:nth-of-type(2):hover,
.answer-wrapper label.btn:nth-of-type(2):hover,
.answers-list label.btn:nth-of-type(2):hover,
.ls-answers label.btn:nth-of-type(2).active,
.answer-container label.btn:nth-of-type(2).active,
.answer-wrapper label.btn:nth-of-type(2).active,
.answers-list label.btn:nth-of-type(2).active,
.ls-answers label.btn:nth-of-type(2)[aria-pressed="true"],
.answer-container label.btn:nth-of-type(2)[aria-pressed="true"],
.answer-wrapper label.btn:nth-of-type(2)[aria-pressed="true"],
.answers-list label.btn:nth-of-type(2)[aria-pressed="true"],
.ls-answers label.btn:nth-of-type(2):has(input:checked),
.answer-container label.btn:nth-of-type(2):has(input:checked),
.answer-wrapper label.btn:nth-of-type(2):has(input:checked),
.answers-list label.btn:nth-of-type(2):has(input:checked),
.ls-answers input[value="N"]:checked + label.btn,
.answer-container input[value="N"]:checked + label.btn,
.answer-wrapper input[value="N"]:checked + label.btn,
.answers-list input[value="N"]:checked + label.btn {
  background-color: var(--ensc-red) !important;
  border-color: var(--ensc-red) !important;
  color: #ffffff !important;
}

/* Icônes et textes blancs si survol/actif */
.ls-answers label.btn:hover *,
.answer-container label.btn:hover *,
.answer-wrapper label.btn:hover *,
.answers-list label.btn:hover *,
.ls-answers label.btn.active *,
.answer-container label.btn.active *,
.answer-wrapper label.btn.active *,
.answers-list label.btn.active *,
.ls-answers label.btn[aria-pressed="true"] *,
.answer-container label.btn[aria-pressed="true"] *,
.answer-wrapper label.btn[aria-pressed="true"] *,
.answers-list label.btn[aria-pressed="true"] *,
.ls-answers label.btn:has(input:checked) *,
.answer-container label.btn:has(input:checked) *,
.answer-wrapper label.btn:has(input:checked) *,
.answers-list label.btn:has(input:checked) * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* =========================================================
   CHAMPS
   ========================================================= */

textarea,
input,
select {
  font-size: 0.95rem !important;
}

textarea {
  min-height: 90px !important;
  margin-top: 0.4rem !important;
}

/* =========================================================
   BOUTONS DE NAVIGATION
   ========================================================= */

button,
.btn-primary,
.btn-success,
.nav-button,
.ls-move-btn {
  font-size: 1rem !important;
  padding: 0.55rem 1rem !important;
  min-height: 38px !important;
  border-radius: 5px !important;
}

.btn-success {
  background-color: var(--ensc-green) !important;
  border-color: var(--ensc-green) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
  :root {
    --ensc-page-width: calc(100vw - 24px);
    --ensc-card-width: calc(100vw - 24px);
    --ensc-logo-width: 240px;
  }

  body .top-container.container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 0 0 14px 14px !important;
  }

  .ls-question,
  .question-container,
  .survey-question,
  .question-wrapper {
    padding: 0.9rem !important;
  }

  .survey-name,
  .survey-name h1,
  h1 {
    font-size: 1.4rem !important;
  }
}