/*
* Framework U20
* Universite du Quebec a Trois-Rivieres
* STI UQTR - Marc Bernier - Nancy Dodier
* Aide et exemples: https://www.uqtr.ca/u20
* Version: 1.0
*/

/* Reset */

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body,
div,
dl,
dd,
form,
img,
input,
figure {
  padding: 0;
  margin: 0;
}
body,
html {
  margin: 0;

  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.clearfix::after {
  display: table;
  visibility: hidden;
  height: 0;
  clear: both;
  content: "";
}
img,
iframe {
  max-width: 100%;
  border: 0;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: none !important;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}

/* Selections */
::-webkit-selection,
::-moz-selection,
::selection {
  color: rgba(0, 0, 0, 0.9);
  background-color: var(--vert);
}

/* Form */
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a:focus,
input:focus,
button:focus,
select:focus,
textarea:focus {
  outline-color: var(--contour-focus);
}
textarea::-webkit-selection,
input::-webkit-selection {
  color: rgba(0, 0, 0, 0.87);
  background-color: rgba(100, 100, 100, 0.4);
}
textarea::-moz-selection,
input::-moz-selection {
  color: rgba(0, 0, 0, 0.87);
  background-color: rgba(100, 100, 100, 0.4);
}
textarea::selection,
input::selection {
  color: rgba(0, 0, 0, 0.87);
  background-color: rgba(100, 100, 100, 0.4);
}

input[type="text"],
input[type="email"] {
  -webkit-user-select: text;
  user-select: text;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-touch-callout: text;
}
button {
  font: inherit;
  cursor: pointer;
  text-transform: none;
  color: inherit;
  border: none;
  background: none;
}
button:active {
  outline: none;
}

/* ScrollReveal */
html.sr .load-hidden {
  visibility: hidden;
}

/* Lecteur d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- MAIN --- */

:root {
  font-size: 62.5%; /* 10px = 1rem - Plus facile a calculer */
}
body {
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem; /* 1.4rem = 14px */
  font-style: normal;
  font-weight: normal;
  color: #2d2d31;
  background-color: #fcfcfc;
}
h1,
h2,
h3,
h4 {
  font-family: "Montserrat", sans-serif;
}
a,
a:visited {
  -webkit-transition: color 100ms ease-out;
  transition: color 100ms ease-out;
  color: var(--lien);
}
a:hover,
a:active {
  color: var(--lien-hover);
}
hr {
  height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: none;
  background-color: #e0e1eb;
}
hr.sansMarge {
  margin-top: 0;
  margin-bottom: 0;
}

/* Fontes */
.font-normal {
  font-family: var(--font-normal);
}
.font-deco {
  font-family: var(--font-deco);
}

/* Blockquote */
blockquote {
  font-family: "Montserrat", sans-serif;
  font-style: italic;
}
/* U20 Citation */
.u20-citation {
  margin-left: 62px; /* Annule le 62px de blockquote:before */
}
.u20-citation img {
  border-radius: 30px 0 30px 0;
}
.u20-citation blockquote {
  position: relative;
  margin-left: 0;
  font-size: 2rem;
  font-weight: 600;
  color: var(--texte-pale);
}
.u20-citation blockquote p {
  line-height: 1.5em;
}
.u20-citation blockquote::before {
  position: absolute;
  top: -14px;
  left: -62px;
  width: 54px;
  height: 54px;
  content: "";
  background-image: url("/https/www.uqtr.ca/u20-img/img-deco/guillemets-vert.svg");
  background-size: 54px 54px;
}
.u20-citation blockquote.gvert::before {
  background-image: url("/https/www.uqtr.ca/u20-img/img-deco/guillemets-vert.svg");
}
.u20-citation blockquote.gmauve::before {
  background-image: url("/https/www.uqtr.ca/u20-img/img-deco/guillemets-mauve.svg");
}
.u20-citation blockquote.ggris::before {
  background-image: url("/https/www.uqtr.ca/u20-img/img-deco/guillemets-gris.svg");
}
.u20-citation blockquote.ggrisfonce::before {
  background-image: url("/https/www.uqtr.ca/u20-img/img-deco/guillemets-grisfonce.svg");
}

.u20-citation blockquote footer {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  color: var(--texte);
}
.u20-citation blockquote cite {
  display: block;
  margin-top: 2px;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  color: var(--texte-pale);
}

/* Citation Mobile */
@media all and (max-width: 480px) {
  .u20-citation blockquote {
    margin-right: 0;
  }
}

/* Wrapper */
.u20-wrapper {
  display: block;
  width: 100%;
}

/* --- HEADER UQTR --- */

/* Accessibilite - Bouton pour aller au contenu */
a.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
a.skip-link:focus {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 9999;
  display: block;
  width: auto;
  height: auto;
  padding: 16px 22px;
  clip: auto;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: var(--grisfonce);
  border: 1px solid var(--grispale);
  border-radius: 4px;
  background-color: var(--blanc);
  background-color: #fff;
  -webkit-box-shadow: 0 12px 22px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 12px 22px -1px rgba(0, 0, 0, 0.3);
}

header.u20-entete {
  position: relative;
  display: flex;
  width: 100%;
  padding: 0 10px;
  border-bottom: 1px solid #eee;
}
header.u20-entete .u20-entete-gauche,
header.u20-entete .u20-entete-droite {
  display: flex;
  width: 100%;
  height: 110px;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}
header.u20-entete .u20-entete-gauche {
  justify-content: flex-start;
}
header.u20-entete .u20-entete-droite {
  justify-content: flex-end;
}

/* Logo UQTR */
header.u20-entete .zone-logouqtr {
  display: block;
  margin-right: 20px;
}
header.u20-entete .zone-logouqtr a.logouqtr {
  display: block;
  width: 180px;
  height: 70px;
}

/* Champ de recherche Google CSE */
header.u20-entete #contenantRecherche {
  height: 47px;
  margin-left: 10px;
  -webkit-transition: box-shadow 120ms ease-out;
  transition: box-shadow 120ms ease-out;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: none;
}
header.u20-entete #contenantRecherche:hover {
  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.05);
}

/* Moteur de recherche */
.gsc-control-searchbox-only {
  white-space: nowrap !important;
  box-shadow: none !important;
  -webkit-transition: box-shadow 120ms ease-out;
  transition: box-shadow 120ms ease-out;
}
table.gsc-search-box td.gsc-input {
  padding-right: 0 !important;
}
.gsc-input-box {
  height: 47px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1em !important;
  border: none !important;
  background-color: transparent !important;
}
.gsc-input-box .gsib_a {
  padding: 0 !important;
}
.gsc-input-box .gsst_b {
  height: 47px !important;
  padding: 0 !important;
}
.gsc-input-box .gsst_b a.gsst_a {
  position: absolute !important;
  top: 3px !important;
  right: 5px !important;
  height: 47px !important;
  padding: 0 10px !important;
  line-height: 47px !important;
}
.gsc-input-box a.gsst_a .gscb_a {
  color: var(--icone);
  -webkit-transition: all 120ms ease-out;
  transition: all 120ms ease-out;
}
.gsc-input-box a.gsst_a .gscb_a:hover {
  color: var(--icone-over);
}
.gsc-input-box input[type="text"] {
  position: relative;
  width: 190px !important;
  max-width: 100%;
  height: 47px !important;
  padding: 7px !important;
  font-family: "Open Sans", sans-serif;
  font-size: 1.36rem;
  line-height: 1em;
  color: var(--texte-pale);
  border: 1px solid var(--contour) !important;
  border-radius: 4px 0 0 4px !important;
  background-image: none !important;
  background-color: var(--blancpale) !important;
  -webkit-transition: all 120ms ease-out;
  transition: all 120ms ease-out;
}
.gsc-input-box input[type="text"]:hover {
  border-color: var(--contour-hover) !important;
  background-color: var(--blanc) !important;
}
.gsc-input-box input[type="text"]:focus-visible {
  outline: none !important;
  border: 1px solid var(--contour-focus) !important;
}
/* Input plus large pour desktop */
@media all and (min-width: 1600px) {
  .gsc-input-box input[type="text"] {
    width: 300px !important;
  }
}
@media all and (min-width: 1700px) {
  .gsc-input-box input[type="text"] {
    width: 400px !important;
  }
}

/* Bouton avec loupe */
.gsc-search-button-v2 {
  width: 47px !important;
  height: 47px !important;
  padding: 7px !important;
  margin: 0 !important;
  margin-left: -1px !important;
  border-radius: 0 4px 4px 0 !important;
  border: 1px solid var(--contour) !important;
  background-color: var(--blancgris) !important;
  background-image: url("/https/www.uqtr.ca/u20-ico/ico-loupe.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 24px 24px !important;
  -webkit-transition: all 120ms ease-out;
  transition: all 120ms ease-out;
}
.gsc-search-button-v2:hover {
  background-color: var(--blanc) !important;
}
.gsc-search-button-v2:active {
  outline: none;
  border-color: var(--grispale);
  background-color: var(--blancpale);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.08), inset -2px -1px 4px #fff;
}
.gsc-search-button-v2:focus,
.gsc-search-button-v2:focus:not(:focus-visible) {
  outline: none;
}
.gsc-search-button-v2:focus-visible {
  outline: none;
  border-radius: 0 4px 4px 0;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 2px var(--contour-focus);
}
button.gsc-search-button svg {
  display: none !important;
}
/* menu deroulant */
.gsq_a span,
.gsq_a span b {
  font-family: "Open Sans", sans-serif;
  font-size: 1.3rem;
  font-weight: 600 !important;
  color: var(--texte);
}
.gsq_a span:hover,
.gsq_a span:hover b {
  color: #000 !important;
}
.gsq_a {
  padding: 5px 0 !important;
}

/* Header Zone Boutons */
header.u20-entete .zone-btn {
  display: flex;
  height: 47px;
  margin-left: 10px;
}
/* Bouton bottin */
header.u20-entete .zone-btn a.btn.bottin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  height: 47px;
  padding: 0;
  margin-right: 6px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1em;
  color: var(--texte);
  border-radius: 3px;
  border: 1px solid transparent;
  background-color: var(--blancpale);
  -webkit-transition: background 120ms ease-out;
  transition: background 120ms ease-out;
}
header.u20-entete .zone-btn a.btn.bottin span {
  display: block;
  margin-left: 4px;
}
header.u20-entete .zone-btn a.btn.bottin img {
  display: block;
  width: 24px;
  height: 24px;
}
header.u20-entete .zone-btn a.btn.bottin:hover {
  color: var(--noir);
  background-color: var(--grispale2);
}