/************************* STYLES DES VUES DEFAULT (accueil, vue, 404) *************************/
.page-content.vue {
  /* réinitialiser la marge et jouer avec le padding pour ajuster l'espace autour du contenu */
  margin: 0;
  padding: 3rem 3rem;
}

.vue h1 {
  color: var(--cereq-color);
  font-size: 3rem;
  margin-bottom: 0.8rem;
}

.vue .vue-descr {
  color: var(--text-grey);
  font-weight: 500;
  font-size: 1.6rem;
}

.vue .vue-links {
  margin-top: 2rem;
}
.vue .vue-links p {
  font-size: 1.2rem;
}

/* pour l'accessibilité de l'émoticône */
.vue .vue-links .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* LIENS EXTERNES */
.vue .external-link {
  color: var(--cereq-color);
  width: max-content;
  font-weight: 500;
}

.vue .external-link:hover {
  color: var(--cereq-color-dark);
}

.vue .external-link > i {
  font-size: 1rem;
}

/******************** RESPONSIVE ********************/

/* Breakpoints en em */
/* Mobile	480px	30em
Tablette	768px	48em
Petit laptop	1024px	64em
Desktop	1280px	80em */
@media screen and (min-width: 112em) {
  .page-content.vue {
    padding: 3rem 15rem;
  }
}
@media screen and (max-width: 64em) {
  .vue .vue-links p {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 48em) {
  /* ajuster l'espace autour du contenu de la page sur petits écrans */
  .page-content.vue {
    padding: 3rem 1.5rem;
  }
}
/******************** FIN RESPONSIVE ********************/