@font-face {
  font-family: "Avenir Next";
  src: url("fonts/AvenirNextLTPro-Bold.otf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Avenir Next";
  src: url("fonts/AvenirNextLTPro-Regular.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Avenir Next";
  src: url("fonts/AvenirNextLTPro-It.otf");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueBold.otf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueMedium.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueItalic.ttf");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueLight.otf");
  font-weight: lighter;
  font-style: normal;
}

* {
  font-family: 'Helvetica Neue';
}

:root {
    /* Palette courante */
    /*------------------*/
    /* Les bleus MediSAP */
    --couleur-bleu-apropos: #000c92;
    --couleur-bleu-apropos-clair: hsl(235, 100%, 90%);

    --couleur-urgsap-base: #00ABED;
    --couleur-urgsap-moyen: #a2dffd;
    --couleur-urgsap-clair: #e7f7fe;
    
    --couleur-med-fonce: #578AB8;
    --couleur-med-moyen: #CDD9E6;
    --couleur-med-clair: #E1EAF4;
}

/* Pour une marge avant l'élément */
.marge-avant {
  margin-top: 10px;
}

/* Séparateur avant l'élément */
.separateur-avant {
  padding: 10px 0px;
  border-top: 1px solid var(--couleur-med-fonce);
}

/* Fenêtre modale de questionnaire */
.q-modal {
  position: fixed; /* Prend tout l'écran */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050; /* Pour tout masquer, y compris les bandeaux header et footer */
  background: rgba(0,0,0,0.8); /* Opacité de 80% pour qu'on ne voit pas ce qu'il y a derrière */

  display: flex; /* On utilise une flex box (sur le parent), l'objectif étant de centrer la modale sur l'écran */
  align-items: center; /* Les enfants seront centrés verticalement (i.e / à l'axe Y) */
  justify-content: center; /* Les enfants seront centrés horizontalement (i.e / à l'axe X) */

  animation: fadeIn .3s both;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.q-modal[aria-hidden="true"] { /* Sur la modale ayant l'attribut aria-hidden="true" */
    animation-name: fadeOut; /* On ne change que le nom de l'animation ==> les autres param sont conservés */
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Contenu de la fenêtre modale de questionnaire */
.q-modal-wrapper {
  background-color: #fff;
  width: 600px; /* Si fenetre trop petite, le contenu va déborder car taille de 600px ==> on utilise en dessous le max-width */
  max-width: calc(100vw - 20px); /* 1 fois la largeur de la taille de l'écran - 20px */
  height: 780px;
  max-height: calc(100vh - 100px); /* 1 fois la hauteur de la taille de l'écran - 100px */
  overflow: auto; /* En cas de débordement, une scrollbar apparait */
  padding: 0px 10px;

  animation: slideFromTop .5s both;
}
@keyframes slideFromTop {
    from { transform: translateY(-50px); }
    to { transform: translateY(0px); }
}
.q-modal[aria-hidden="true"] .q-modal-wrapper { /* Sur la modal ayant l'attribut aria-hidden="true" on aura une animation sur le q-modal-wrapper */
    animation-name: slideToBottom;
}
@keyframes slideToBottom {
    from { transform: translateY(0px); }
    to { transform: translateY(50px); }
}

/* Panneau figé */
.sticky_panel {
  background: #fff;
  position: sticky;
  top: 0px;
  padding: 10px 0px;
}

/* Nom de l'agent sur le questionnaire */
.q-nom_agent {
  color: var(--couleur-med-fonce);
}

/* Groupe de boutons du questionnaire */
.q-buttons {
  margin: 15px auto 0px; /* haut | horizontal | bas */ 
  width: 180px;
}

/* Boutons */
button {
  background-color: var(--couleur-urgsap-base);
  color: white;
  border-radius: 10px 10px;
  padding: 4px 12px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

/* Survol des boutons */
button:hover {
  background: var(--couleur-urgsap-moyen);
  color: var(--couleur-urgsap-base);
  cursor: pointer;
}

/* Boutons désactivés */
button:disabled {
  background: var(--couleur-urgsap-clair);
  color: #C0C0C0;
  cursor: not-allowed;
}

/* Bloc question/reponse du questionnaire */
.q-quest_rep {
  padding: 10px;
  border-top: 1px solid var(--couleur-urgsap-base);
}

/* Question du questionnaire */
.q-quest {
  margin-bottom: 5px;
  color: var(--couleur-bleu-apropos);
}

/* Ensemble de radio boutons de questionnaire */
.q-rep_radio {
  display: inline; /* Pour affichage du commentaire à la suite des radio boutons */
}

/* Commentaire de questionnaire */
.q-rep_comment {
  width: 400px;
  outline: none;
  border: 1px solid var(--couleur-urgsap-base);
  border-radius: 3px;
  padding: 4px 8px;
}

/* Footer */
.bg-footer {
  background-color: var(--couleur-urgsap-clair);
  border-top: 1px solid var(--couleur-urgsap-clair);
}

/* Header */
.bg-header {
  background-color: var(--couleur-urgsap-clair);
}

#btn_creeAgent > img {
  padding: 5px;
}

#btn_creeAgent, #btn_accueil, #btn_retour {
  background: #fff;
  border: 2px solid var(--couleur-urgsap-base);
  padding: 4px;
  border-radius: 10px;
}

#btn_creeAgent > img, #btn_accueil > img, #btn_retour > img {
  margin: 0 !important;
}

#btn_accueil:hover, #btn_creeAgent:hover, #btn_retour:hover {
  background: hsl(0, 0%, 95%);
}

#btn_accueil:hover > img {
  /* filter: brightness(5) saturate(0.5); */
}

.text-14 {
  font-size: 14px;
}

.text-16 {
  font-size: 16px;
}

.text-18 {
  font-size: 18px;
}

.text-21 {
  font-size: 21px;
}

.bold {
  font-weight: bold;
}