/*
* 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%;

  scroll-behavior: smooth;
}
.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: var(--font-normal);
  font-size: 1.6rem; /* 1.4rem = 16px */
  font-style: normal;
  font-weight: normal;
  color: #2d2d31;
  background-color: var(--blancpale);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-deco);
  font-weight: 600;
  letter-spacing: -0.015em;
}
h1 {
  font-size: 4rem;
}
h2 {
  font-size: 3.2rem;
}
h3 {
  font-size: 2.8rem;
}
h4 {
  font-size: 2.4rem;
}

a,
a:visited {
  -webkit-transition: color 100ms ease-out;
  transition: color 100ms ease-out;
  color: var(--lien);
  font-weight: 600;
}
a:hover,
a:active {
  color: var(--lien-hover);
}
hr {
  height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: none;
  background-color: var(--lignes-footer);
}
hr.sansMarge {
  margin-top: 0;
  margin-bottom: 0;
}

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

/*Liste à puces */
ul li::marker {
  color: #5d5e6d;
}

.u20-page ul li,
.u20-bloc ul li {
  margin: 10px 0;
}

.lien-liste-uqtr a {
  color: var(--lien);
  font-weight: 600;
  text-decoration: none !important;
}

.lien-liste-uqtr a:hover {
  text-decoration: underline;
  color: var(--lien-hover);
}

/* Blockquote 
blockquote {
  font-family: var(--font-normal);
  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;
}
.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("http://www.uqtr.ca/u20-img/img-deco/guillemets-vert.svg");
  background-size: 54px 54px;
}
.u20-citation blockquote.gvert::before {
  background-image: url("http://www.uqtr.ca/u20-img/img-deco/guillemets-vert.svg");
}
.u20-citation blockquote.gmauve::before {
  background-image: url("http://www.uqtr.ca/u20-img/img-deco/guillemets-mauve.svg");
}
.u20-citation blockquote.ggris::before {
  background-image: url("http://www.uqtr.ca/u20-img/img-deco/guillemets-gris.svg");
}
.u20-citation blockquote.ggrisfonce::before {
  background-image: url("http://www.uqtr.ca/u20-img/img-deco/guillemets-grisfonce.svg");
}

.u20-citation blockquote span {
  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-fonce);
}

/* 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: var(--font-deco);
  font-weight: bold;
  text-decoration: none;
  color: var(--grisfonce);
  border: 1px solid var(--grispale);
  border-radius: 4px;
  background-color: var(--blanc);
  background-color: var(--blanc);
  -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;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 4%;
  border-bottom: 1px solid #eee;
  background-color: var(--blancpale);
}
header.u20-entete .u20-entete-gauche {
  order: 1;
  display: flex;
  height: 80px;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
header.u20-entete .u20-entete-droite {
  order: 2;
  display: flex;
  flex: 1;
  width: 100%;
  height: 80px;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
header.u20-entete nav.u20-entete-nav {
  order: 3;
  width: 100%;
  border-top: 1px solid #eee;
}

/* -------------------------------------------------------
   Variante : Menu de navigation au centre (entre logo et recherche)
   Pour activer  : ajouter la classe "nav-centre" sur <header id="u20e">
   Pour désactiver : retirer la classe (menu revient en bas, séparé)
------------------------------------------------------- */
header.u20-entete.nav-centre {
  flex-wrap: nowrap;
  align-items: center;
}
header.u20-entete.nav-centre nav.u20-entete-nav {
  order: 2;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  height: 80px;
  display: flex;
  align-items: center;
  border-top: none;
}
header.u20-entete.nav-centre .u20-entete-droite {
  order: 3;
  flex: 0 0 auto;
  width: auto;
  height: 80px;
}
/* Contraindre la largeur du champ de recherche */
header.u20-entete.nav-centre #contenantRecherche {
  width: 237px; /* 190px input + 47px bouton loupe */
}
header.u20-entete.nav-centre #contenantRecherche form.gsc-search-box {
  max-width: 237px !important;
}
@media all and (min-width: 1600px) {
  header.u20-entete.nav-centre #contenantRecherche {
    width: 347px; /* 300px input + 47px bouton loupe */
  }
  header.u20-entete.nav-centre #contenantRecherche form.gsc-search-box {
    max-width: 347px !important;
  }
}
@media all and (min-width: 1700px) {
  header.u20-entete.nav-centre #contenantRecherche {
    width: 447px; /* 400px input + 47px bouton loupe */
  }
  header.u20-entete.nav-centre #contenantRecherche form.gsc-search-box {
    max-width: 447px !important;
  }
}
/* Boutons icônes seulement (sans texte) */
header.u20-entete.nav-centre .zone-btn a.btn.bottin span,
header.u20-entete.nav-centre .zone-btn .connexion button.list-btn span {
  display: none;
}
header.u20-entete.nav-centre .zone-btn a.btn.bottin,
header.u20-entete.nav-centre .zone-btn .connexion button.list-btn {
  min-width: inherit;
  width: 47px;
  border: 1px solid var(--contour);
  box-shadow: none;
}
header.u20-entete.nav-centre .zone-btn .connexion button.list-btn img {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* Réinitialisation sur mobile/tablette : la variante nav-centre n'a pas d'effet */
@media all and (max-width: 1375px) {
  header.u20-entete.nav-centre {
    flex-wrap: wrap;
  }
  header.u20-entete.nav-centre nav.u20-entete-nav {
    order: 3;
    width: 100%;
    flex: none;
    min-width: unset;
    height: auto;
    display: block;
  }
  header.u20-entete.nav-centre .u20-entete-droite {
    order: 2;
    flex: 1;
    width: 100%;
    height: 80px;
  }
}

/* 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 {
  display: flex;
  align-items: center;
  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;
}

@media screen and (max-width: 800px) {
  header.u20-entete #contenantRecherche {
    margin: 0px 10px;
  }
}

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;
}

header.u20-entete #contenantRecherche form.gsc-search-box {
  margin: 0px 0px !important;
  max-width: 500px !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(--iconefonce);
}
.gsc-input-box input[type="text"] {
  position: relative;
  width: 190px !important;
  max-width: 100%;
  height: 47px !important;
  padding: 7px !important;
  font-family: var(--font-normal);
  font-size: 1.36rem;
  line-height: 1em;
  color: var(--texte-pale);
  border: 1px solid var(--contour) !important;
  border-radius: 8px 0 0 8px !important;
  background-image: none !important;
  background-color: var(--blanc) !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 8px 8px 0 !important;
  border: 1px solid var(--contour) !important;
  background-color: var(--fond-clair, #f5f6f9) !important;
  background-image: url("http://www.uqtr.ca/u20-ico/biu-search.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(--fond-clair, #f5f6f9);
  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 8px 8px 0;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 2px var(--contour-focus);
}
button.gsc-search-button svg {
  display: none !important;
}

/* -----------------------------------------------
   BOUTON LOUPE - CONTEXTES SÉPARÉS
   (nav header vs page résultats de recherche)
   Les styles ci-dessous remplacent l'ancienne règle
   "body .gsc-search-button" qui positionnait en
   absolute avec top/left fixes (non-responsive).
   ----------------------------------------------- */

/* Masquer le TD gsib_b (bouton X "effacer" de Google) dans les deux contextes.
   Ce TD occupe 52px et crée un gap visuel entre l'input et le bouton loupe. */
header.u20-entete #contenantRecherche .gsib_b,
.page-resultats #champ-recherche .gsib_b {
  display: none !important;
}

/* CONTEXTE NAV : l'input occupe toute la largeur du conteneur (responsive automatique) */
header.u20-entete #contenantRecherche .gsc-input-box input[type="text"] {
  width: 100% !important;
}

/* CONTEXTE NAV : le TD.gsc-search-button doit rester display:table-cell
   pour respecter le layout tableau de Google.
   On neutralise tout positionnement absolu résiduel. */
header.u20-entete #contenantRecherche td.gsc-search-button {
  display: table-cell !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

/* CONTEXTE NAV : bouton loupe */
header.u20-entete #contenantRecherche .gsc-search-button-v2 {
  display: block !important;
  position: static !important;
  width: 47px !important;
  height: 47px !important;
  padding: 7px !important;
  margin: -1px 0 0 -1px !important;
  border-radius: 0 8px 8px 0 !important;
  border: 1px solid var(--contour) !important;
  background-color: var(--fond-clair, #f5f6f9) !important;
  background-image: url("http://www.uqtr.ca/u20-ico/biu-search.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;
}

/* Ciblage pour Firefox uniquement (@-moz-document est ignoré par Chrome/Edge) */
@-moz-document url-prefix() {
  header.u20-entete #contenantRecherche .gsc-search-button-v2 {
    margin: 1px 0 0 -1px !important;
  }
}

/* Windows + Chrome : décalage de +1px par rapport à macOS */
html.os-windows header.u20-entete #contenantRecherche .gsc-search-button-v2 {
  margin: 1px 0 0 -1px !important;
}

/* Windows + Firefox */
@-moz-document url-prefix() {
  html.os-windows header.u20-entete #contenantRecherche .gsc-search-button-v2 {
    margin: 1px 0 0 -1px !important;
  }
}

header.u20-entete #contenantRecherche .gsc-search-button-v2:hover {
  background-color: var(--blanc) !important;
}
header.u20-entete #contenantRecherche .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;
}
header.u20-entete #contenantRecherche .gsc-search-button-v2:focus-visible {
  outline: none;
  border-radius: 0 8px 8px 0;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 2px var(--contour-focus);
}

.gsc-input {
  vertical-align: revert;
  margin-top: 1px;
}

/* menu deroulant */
.gsq_a span,
.gsq_a span b {
  font-family: var(--font-normal);
  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;
}

/* ========================================
   FORMULAIRE DE RECHERCHE CUSTOM
   ======================================== */

/* Formulaire */
.header-search-form {
  display: flex;
  align-items: stretch;
  height: 47px;
  margin: 0;
  padding: 0;
}

/* Wrapper de l'input */
.search-input-wrapper {
  display: flex;
  margin: 0;
  padding: 0;
}

/* Input - Réutilise le design du CSS Google existant (lignes 423-447) */
.header-search-form .search-input {
  position: relative;
  width: 190px;
  max-width: 100%;
  height: 47px;
  padding: 7px;
  margin: 0;
  font-family: var(--font-normal);
  font-size: 1.36rem;
  line-height: 1em;
  color: var(--texte);
  border: 1px solid var(--contour);
  border-right: none; /* Pas de bordure à droite pour coller au bouton */
  border-radius: 4px 0 0 4px;
  background-image: none;
  background-color: var(--blancpale);
  box-sizing: border-box;
  transition: all 120ms ease-out;
}

.header-search-form .search-input:hover {
  border-color: var(--contour-hover);
  background-color: var(--blanc);
}

.header-search-form .search-input:focus,
.header-search-form .search-input:focus-visible {
  outline: none;
  border-color: var(--contour-focus);
}

/* Responsive - Input plus large sur desktop */
@media all and (min-width: 1600px) {
  .header-search-form .search-input {
    width: 300px;
  }
}

@media all and (min-width: 1700px) {
  .header-search-form .search-input {
    width: 400px;
  }
}

/* Bouton - Réutilise le design du CSS Google existant (lignes 461-495) */
.header-search-form .search-button {
  width: 47px;
  height: 47px;
  padding: 7px;
  margin: 0;
  border-radius: 0 8px 8px 0;
  border: 1px solid var(--contour);
  background-color: var(--blancpale);
  background-image: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 120ms ease-out;
}

.header-search-form .search-button:hover {
  background-color: var(--blancpale);
}

.header-search-form .search-button: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;
}

.header-search-form .search-button:focus,
.header-search-form .search-button:focus:not(:focus-visible) {
  outline: none;
}

.header-search-form .search-button:focus-visible {
  outline: none;
  border-radius: 0 8px 8px 0;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 2px var(--contour-focus);
}

/* Image SVG dans le bouton */
.header-search-form .search-button img {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
  margin: auto;
}

/* Header Zone Boutons */
header.u20-entete .zone-btn {
  display: flex;
  height: 47px;
  margin-left: 12px;
}
/* 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: 8px;
  border: 1px solid var(--grispale);
  background-color: var(--fond-clair, #f5f6f9);
  -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(--blancpale);
}