/******************
    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 de la police Lexend */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600;700&display=swap');

/* Exemple : taille de base responsive */

body {
font-size:5pt;
}

body, .survey-container, .question-text, .answer-container {
  font-family: 'Lexend', sans-serif !important;
  color: #255c5f !important;
  /* Utilisation de clamp pour que le texte s’adapte */
  /*font-size: clamp(12px, 1.1vw + 0.4rem, 16px) !important; */
  font-size: clamp(10px, 1vw + 0.3rem, 14px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Pour les titres de question */
 .question-text .question-text-container {
  font-size: clamp(16px, 1.5vw + 1rem, 22px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


.question-container .question-title-container {
  margin-bottom: 0px;
    font-size: clamp(16px, 1.5vw + 1rem, 22px) !important;
}
.question-container .question-help-container {
  margin-bottom: 0px;
  position: relative;
    font-size: clamp(16px, 1.5vw + 1rem, 22px) !important;
}
.question-container .question-valid-container {
  margin-top: 0px;
  margin-bottom: 0px;
    font-size: clamp(16px, 1.5vw + 1rem, 22px) !important;
}

.space-col {
  margin-top: 0em;
  margin-bottom: 0em;
    padding-top: 0 !important;
  padding-bottom: 0 !important;
}


.question-text .ls-label-question,
.question-text {
  font-size: clamp(14px, 2vw + 0.5rem, 16px) !important;  /*16px !important;     taille à ajuster selon ce que tu veux */
  line-height: 1.3 !important;
  color: #255c5f !important;      /* couleur si tu veux la changer aussi */
  margin: 0 !important;
  padding: 0 !important;
}



/* Cibler les labels des boutons de réponse */
label.btn.btn-primary {
  font-size: clamp(13px, 1vw + 0.3rem, 14px) !important;
  /* tu peux ajuster les valeurs min / max selon ce que tu veux */
}

/* Pour être plus ciblé (dans les réponses) */
.bootstrap-buttons-div .btn {
  font-size: clamp(13px, 1vw + 0.3rem, 14px) !important;
}

/* Aussi, si tu veux que les boutons soient un peu plus compacts */
.btn.btn-primary.w-100.btn-sm {
  padding-top: 0.3em !important;
  padding-bottom: 0.3em !important;
}

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


/******************
clickable image
*/


        /* Conteneur de l'image */
        .custom-image-container {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 100%;
        }

        /* Image responsive */
        .custom-image-container img {
            width: 100%;  /* S'adapte à la largeur du conteneur */
            height: auto; /* Maintient les proportions */
        }

        /* Les zones cliquables qui seront agrandies au survol */
        .zone {
            position: absolute;
            cursor: pointer;
            border: 3px solid red; /* Ajoute une bordure pour mieux visualiser les zones */
            transition: transform 0.3s ease;  /* Transition fluide pour l'agrandissement */
            z-index: 1;
        }

        /* Style de la zone au survol */
        .zone:hover {
            transform: scale(1.2); /* Agrandissement de 20% */
            z-index: 10; /* Apporte la zone au premier plan */
        }

        /* Zone agrandie avec classe "active" */
        .zone.active {
            transform: scale(1.2); /* Maintient l'agrandissement après sélection */
        }

        /* Couleurs différentes pour chaque zone */
        .zone-1 { background: rgba(255, 0, 0, 0.5); }
        .zone-2 { background: rgba(0, 255, 0, 0.5); }
        .zone-3 { background: rgba(0, 0, 255, 0.5); }
        .zone-4 { background: rgba(255, 255, 0, 0.5); }
        .zone-5 { background: rgba(0, 255, 255, 0.5); }
        .zone-6 { background: rgba(255, 165, 0, 0.5); }
        .zone-7 { background: rgba(128, 0, 128, 0.5); }
        .zone-8 { background: rgba(255, 20, 147, 0.5); }

        /* Ajout d'un texte au survol */
        .tooltip2 {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            display: none; /* Masqué par défaut */
            font-size: 14px;
        }

        /* Affichage du texte au survol */
        .zone:hover .tooltip2 {
            display: block;
        }
        
        
#toTop {
 position:fixed;
 bottom:15px;
 right:15px;
 cursor:pointer;
 background: #c7ebe3;
 width:50px;
 font-size:25px;
 line-height:45px;
 color:#9e249e;
 text-align:center;
 border-radius:50px;
 height:50px;
}


.div.yes-no .btn-check:checked + .btn-primary {
background-color: #00A9F8;
border: 1px solid #00A9F8;
}

.btn-check + .btn-primary:hover {
  /* background-color: #ED5046; */
  background-color: #A1ED46;
}

.star-rating {
        font-size: 44px;
        line-height: 44px;
        cursor: pointer;
        display: block;
        float: left;
        height: 44px;
        overflow: hidden;
        width: 44px;
}

.star-cancel{color: #727272;}
.star-cancel.star-drained{color: #932424}
.star-cancel.star-hover{color: #a12424; text-shadow: 1px 0 #a12424;}
.star-1{color: #797979}
.star-1.star-rated-on:not(.star-stub){color: hsl(10, 80%, 50%)}
.star-1.star-drained{color: hsl(10, 80%, 65%)}
.star-1.star-drained.star-hover{text-shadow: 1px 2px hsl(10, 80%, 65%);}
.star-2{color: #868686}
.star-2.star-rated-on:not(.star-stub){color: hsl(35,80%,50%)}
.star-2.star-drained{color: hsl(35,60%,65%)}
.star-2.star-drained.star-hover{text-shadow: 1px 2px hsl(35,60%,65%);}
.star-3{color: #929292}
.star-3.star-rated-on:not(.star-stub){color: hsl(60,80%,50%)}
.star-3.star-drained{color: hsl(60,60%,65%)}
.star-3.star-drained.star-hover{text-shadow: 1px 2px hsl(60,60%,65%);}
.star-4{color: #989898}
.star-4.star-rated-on:not(.star-stub){color: hsl(90,80%,50%)}
.star-4.star-drained{color: hsl(90,60%,65%)}
.star-4.star-drained.star-hover{text-shadow: 1px 2px hsl(90,60%,65%);}
.star-5{color: #a4a4a4}
.star-5.star-rated-on:not(.star-stub){color: hsl(120,80%,50%)}
.star-5.star-drained{color: hsl(120,60%,65%)}
.star-5.star-drained.star-hover{text-shadow: 1px 2px hsl(120,60%,65%);}
.star-6{color: #b0b0b0}
.star-6.star-rated-on:not(.star-stub){color: hsl(36,80%,50%)}
.star-6.star-drained{color: hsl(36,60%,65%)}
.star-6.star-drained.star-hover{text-shadow: 1px 2px hsl(36,60%,65%);}
.star-7{color: #b6b6b6}
.star-7.star-rated-on:not(.star-stub){color: hsl(30,80%,50%)}
.star-7.star-drained{color: hsl(30,60%,65%)}
.star-7.star-drained.star-hover{text-shadow: 1px 2px hsl(30,60%,65%);}
.star-8{color: #c2c2c2}
.star-8.star-rated-on:not(.star-stub){color: hsl(24,80%,50%)}
.star-8.star-drained{color: hsl(24,60%,65%)}
.star-8.star-drained.star-hover{text-shadow: 1px 2px hsl(24,60%,65%);}
.star-9{color: #c8c8c8}
.star-9.star-rated-on:not(.star-stub){color: hsl(18,80%,50%)}
.star-9.star-drained{color: hsl(18,60%,65%)}
.star-9.star-drained.star-hover{text-shadow: 1px 2px hsl(18,60%,65%);}
.star-10{color: #d4d4d4}
.star-10.star-rated-on:not(.star-stub){color: hsl(12,80%,50%)}
.star-10.star-drained{color: hsl(12,60%,65%)}
.star-10.star-drained.star-hover{text-shadow: 1px 2px hsl(12,60%,65%);}


/* espacement entre els questions */
body div.row .question-container {
    margin-bottom: 1em;
}
 
.question-title-container {
    padding: 0 1em 0;
}
 
.answer-container {
    padding-top: 0;
}
 
#navigator-container {
    margin-top: 0;
}

/* centrer button submit plus modif dans navigtor navigation https://forums.limesurvey.org/forum/can-i-do-this-with-limesurvey/116981-the-next-button-is-too-small#176963 */
#ls-button-submit {
    width: 100%;
}

/* pour changer tailel de tout le texte  body, .form-control, .questiontext, .answer {     font-size: 10px; } */

/* Normal */
 
/* .btn-primary  { */
/*   border-color :  #3d1100;*/
/*   color :  #3d1100; */
/*   background-color :  #702000; */
/* }*/
 
/* Active */
 
/* .btn-primary .active ,  .btn-primary .w-100 .btn-sm : active { */
/*   background-color :  #3d1100; */
/*   color :  #3d1100; */


/*#ls-question-text-621137X2X10 {  font-size: 16px !important;} */

/*   border-color :  #3d1100; */
/* }*/
 
/* Normal and mouse over */
 
/* .btn-primary : hover { */
/*   background-color :  #3d1100; */
/*   color :  #3d1100; */
/*   border-color :  #3d1100; */
/* }*/
 
/* Active and move the mouse over it */
 
/* .btn-primary .active : hover { */
/*   background-color :  #3d1100; */
/*   color :  #3d1100; */
/*   border-color :  #3d1100; */
/* }*/


.btn-primary:hover {
    background-color: #c6dbde !important;
    border-color : #c6dbde !important;
/*    color: red !important; */
}

.btn-check:checked + .btn-primary {
    background-color: #255c5f !important;
    color: white !important;
    border-color : #255c5f !important;
   }

.btn-primary {
 background-color :  #fe5a59; 
 color :  #3d1100; 
 border-color :  #fe5a59; 
 }
   
/*.btn-primary {   background-color:GoldenRod;    color:navy;} */