/******************
    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
*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,300&display=swap');

/* ---- Global Colors ---- */
/* Couleurs utlisées dans le thème. Il suffit de les changer ici. Par défaut : couleurs n-clique. */
:root {
    --bs-danger : #da5252;           /* couleur d'alerte si absence de réponse à une question * */
    --bs-info: #da5252;
    --bs-danger-rgb: 218, 82, 82;    /* idem en rgb car utilié dans le thème * */
    --contrast-color1: #1797a2;      /* bleu n-clique */
    --contrast-color2: #a3276e;      /* violet n-clique */
    --light-grey: #dfdfdf;           /* un gris clair ça sert toujours… */
    --text-color: #484848;           /* couleur du texte */
    --text-color-contrast: #ffffff;  /* couleur du texte si fond coloré par défaut : blanc */
    --uncheck-answer: #484848;       /* couleur des réponses possibles + contours checkbox/radio + en-tetes tableaux  */
    --progressbar-todo: #f2f2f2;     /* couleur bar de progression : reste à faire */
    --progressbar-done: #1797a2;     /* couleur bar de progression : fait */
}

/* ---- Global layout ---- */
/* Font et couleur du texte par défaut */
body {
    font-family: "Lato"; 
    color: var(--text-color);
}
/* Top container : définit la hauteur de début du questionnaire  */
body article .top-container {
    margin-top: 5px;
}
/* lien hypertext par défaut  */
a {
  color: var(--contrast-color1);
}
a:hover {
  color: var(--contrast-color1);
  text-decoration: underline;
}

.brand-logo .top-container .top-content {
    padding-top: 0 /*2em*/;
}
/* Espace entre la progress bar + Titre et le questionnaire  */
.top-container {
    margin-bottom: 0;
}

/* ---- Bar d'alerte ---- */
.alert-danger {
    border: none;
    background-color: var(--bs-danger);
    color: var(--text-color-contrast);
}

/* ---- Menu du questionnaire ---- */
.dropdown-menu > li > a:hover {
    background-color: var(--contrast-color1); !important;
}
#survey-nav .dropdown-menu > li > a {
    color: var(--text-color);
}
#survey-nav .dropdown-menu > li > a:hover {
    color: var(--text-color-contrast);
}

/* ---- Logo ---- */
.logo-container > img {
    max-height: 150px; /* hauteur du logo (la larguer s'ajuste automatiquement ) */
}

/* ---- Progress bar ---- */
/* épaisseur de la bar */
.top-container .progress {
    height: 20px;
}
 /* Couleur "reste à faire" & coins arrondis de la barre */
.progress {
    background-color: var(--progressbar-todo);
    border-radius: 4px;
}
/* Couleur questionnaire "complété" */
.progress-bar {
    background-color: var(--progressbar-done);
}

/* ---- Intro ---- */
/* Titre du questionnaire  */
.large-heading {
    font-family: Raleway, Lato;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 30px;
    color: var(--contrast-color1);
    text-transform: uppercase; /* Mettre à "none" pour un titre en minuscule */
}
/* Texte de bienvenue  */
.form-heading {
    font-weight: 400;
    font-size: 1rem;
    line-height: 24px;
}
/* Espace autour du titre   */
.survey-name {
  margin-top: 0;
  margin-bottom: 0;
}
/* Espace entre description, bienvenue  */
.survey-description, .survey-welcome {
  margin-bottom: 20px;
}
/* Pol de Conf  */
#datasecurity_notice, #datasecurity_notice_label, .datasecurity-checkbox-label {
    color: #8a8a8a;
}
.privacy {
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 20px;
}
/* Couleur du checkbox de pol de conf  */
.privacy .checkbox-item label::before {
    border: 3px solid var(--bs-danger);
}
.ls-privacy-block .text-primary {
    color: var(--bs-danger); !important
}

/* ---- Questions ---- */
/* Taille, graisse de la question */
.question-container .ls-label-question {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: var(--text-color);
}
/* Écart de la mention d'aide à la question */
.question-container .question-valid-container {
    margin-top: 0 /* 10px */;
}
/* Couleur et typo du message d'aide à la question */
.question-container .ls-question-message {
    color: var(--text-color);
    font-style: italic;
    font-size: 0.9975rem;
    font-weight: 300;
}

/* ---- Checkbox ---- */
.control-label {
    margin-bottom: 0px;
    font-weight: 300;
}
/* Épaisseur du contour et couleur de la checkbox non cliquée */
.checkbox-item label::before {
    border: 2px solid var(--uncheck-answer);
}
/* Couleur du checkbox & texte une fois checké (changer les 3)  */
.checkbox-item input[type="checkbox"]:checked + label::after {
    color: var(--contrast-color1);
}
.checkbox-item input[type="checkbox"]:checked + label::before {
    border-color: var(--contrast-color1);
}
.checkbox-item input[type="checkbox"]:checked + label {
    color: var(--contrast-color1);
}

/* ---- List Radio ---- */
/* Interligne entre les listes à cocher  */
li.radio-item {
    margin-bottom: 1em;
}
/* Couleur & typo du texte radio */
.ls-answers label, .answer-item label, .control-label {
    color: var(--uncheck-answer);
    font-weight: 300;
    font-size: 1.14rem;
}
/* Épaisseur du contour et couleur du bouton radio non cliquée */
.radio-item label::before {
    border: 2px solid var(--uncheck-answer);
}
/* List Radio : Couleur du choix */
/* Couleur du texte de la case cochée  */
.radio-item input[type="radio"]:checked + label {
    color: var(--contrast-color1);
}
/* Couleur de la case cochée (changer les 2)  */
.radio-item input[type="radio"]:checked + label::after {
    background-color: var(--contrast-color1);
}
.radio-item input[type="radio"]:checked + label::before {
    border-color: var(--contrast-color1);
}

/* ---- Tableau de choix ---- */
/* Couleur et Typo des textes d'entête des tableau */
.ls-answers .ls-heading th, .ls-answers th {
    font-weight: 300;
    font-size: 1.14rem;
    line-height: 24px;
    color: var(--uncheck-answer);
}
.ls-answers .ls-heading th {
      text-wrap: balance;
}
.table-hover > tbody > tr > td,
.table-hover > tbody > tr > th {
   transition: background-color 0.2s ease;
}
   
/* Hover sur tableau si sur ordi */
/* else : pa */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:active > td,
.table-hover > tbody > tr:focus > td {
    background-color: #ffffff;
}
.table-hover > tbody > tr:hover > th,
.table-hover > tbody > tr:active > th,
.table-hover > tbody > tr:focus > th {
    background-color: #ffffff;
}

@media only screen and (min-width: 760px) {
.table-hover > tbody > tr:hover > td {
    background-color: var(--contrast-color1);
    color: var(--text-color-contrast);
    }
.table-hover > tbody > tr:hover > th {
    background-color: var(--contrast-color1);
    color: var(--text-color-contrast);
    }
}

/* ---- Champs à remplir ---- */
/* couleur et épaisseur du contour, couleur et taille du texte */
.form-control {
    border-color: var(--text-color); 
    border-width: 1px;
    font-size: 14px;
    color: var(--text-color);
}
.form-control:focus {
  box-shadow: 4px 4px 0 var(--light-grey);
}

/* ---- Groupes ---- */
.group-container .group-title {
    font-weight: 600;
    font-size: 1.85rem;
    line-height: 52px;
    margin-top: 0 /*1em*/;
    margin-bottom: 10px;
    color: var(--contrast-color1);
}
.group-container .group-description {
  border-bottom: 1px solid var(--light-grey);
  padding-bottom: 20px;
}

/* ---- Boutons ---- */
/* largeur (padding) et typo des Boutons */
.btn-lg {
    padding-left: 40px;
    padding-right: 40px;
    font-weight: 600;
    font-size: 1.1rem;
}
/* Bouton Suivant */
.btn-primary {
    background-color: var(--contrast-color1);
    color: var(--text-color-contrast);
    border: 1px solid var(--contrast-color1);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary.dropdown-toggle.show, .btn-primary.dropdown-toggle.show:focus {
    color: var(--contrast-color1);
    background-color: var(--text-color-contrast);
    box-shadow: none;
    border: 1px solid var(--contrast-color1);
}
/* Bouton Précédent */
.btn-outline-secondary {
    color: var(--contrast-color1);
    border-color: var(--contrast-color1);
    box-shadow: none;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
    background-color: var(--contrast-color1);
    color: var(--text-color-contrast);
    border-color: var(--contrast-color1);
    box-shadow: none;
}

/* ---- Transition hauteur header fixe & logo ---- */
/* le max-height du .logo-container > img sera peut-être à modifier en fonction de la forme du logo  */
#survey-nav { transition: all .5s ease-in-out; padding-bottom: 15px; }
#survey-nav.shrink { border-bottom: 1px solid #f2f2f2; padding-bottom: 5px; }
#survey-nav .logo-container > img {
	-moz-transition: .5s all;
	-webkit-transition: .5s all;
	-o-transition: .5s all;
	transition: all .5s ease-in-out;
}
#survey-nav.shrink .logo-container > img {
    max-height: 90px;
}

/* Curseur de choix */
.slider-list .slider .slider-selection {
    background-color: var(--contrast-color1);
}
.slider-list .slider .slider-handle {
    background-color: var(--contrast-color1);
}
.slider-list .slider .tooltip .tooltip-inner {
    color: var(--contrast-color1);
}