/******************
    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 utilisées dans le thème. Il suffit de les changer ici.
   Ici : charte de la Communauté d'Agglomération du Nord Basse-Terre.
   Les sept couleurs de charte sont celles du logo officiel de la CANBT
   (fichier canbt-1.svg du site canbt.fr) et des variables CSS de son site.
   Les valeurs appliquées plus bas sont parfois assombries : les contrastes
   ont été vérifiés selon le référentiel WCAG niveau AA. */
:root {
    /* --- charte CANBT, valeurs de référence, à ne pas modifier --- */
    --canbt-anthracite:  #1C1A29;
    --canbt-bleu:        #1F97D1;
    --canbt-bleu-clair:  #7CD2EF;
    --canbt-vert:        #4F8D44;
    --canbt-vert-clair:  #96C748;
    --canbt-orange:      #F37F30;
    --canbt-jaune:       #FACF33;

    /* --- variables du thème --- */
    --bs-danger : #B3261E;           /* couleur d'alerte si absence de réponse à une question.
                                        Rouge franc, volontairement éloigné de l'orange de
                                        charte : une alerte orange serait prise pour un accent. */
    --bs-info: #B3261E;
    --bs-danger-rgb: 179, 38, 30;    /* idem en rgb car utilisé dans le thème */
    --contrast-color1: #17719C;      /* bleu CANBT assombri d'un quart. Le bleu de charte
                                        (#1F97D1) ne porte pas de texte blanc lisible :
                                        2,7 contre les 4,5 exigés. Ici 5,4. */
    --contrast-color2: #F37F30;      /* orange CANBT, en aplat uniquement */
    --light-grey: #dfdfdf;           /* un gris clair ça sert toujours… */
    --text-color: #1C1A29;           /* anthracite CANBT */
    --text-color-contrast: #ffffff;  /* couleur du texte si fond coloré, par défaut : blanc */
    --uncheck-answer: #1C1A29;       /* réponses possibles, contours des cases, en-têtes de tableaux */
    --progressbar-todo: #f2f2f2;     /* barre de progression : reste à faire */
    --progressbar-done: #D2650F;     /* barre de progression : fait. Orange CANBT assombri :
                                        l'orange pur ne se détache pas assez de la piste grise. */
}

/* ---- 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: none; /* Mettre à "uppercase" pour un titre en capitales.
                             Laissé en minuscules : le titre de l'enquête CANBT dépasse
                             cent caractères et devient illisible en capitales sur mobile. */
}
/* 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);
}