/* BLEU QUÉBEC 0 51 153 003399 */

/* ????? ????? ????? ????? */

* {
  box-sizing: border-box;
}



/* SETTING THE DEFAULT FONT */

html {
  font-family: Tahoma, "Trebuchet MS", sans-serif;
/*  font-family: Arial, Helvetica, sans-serif; */
}



/* AFFICHAGE */

/* For mobile phones: */
[class*="dossier"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For portrait tablets and large phones: */
  .dossier25 {width: 100%;}
  .dossier33 {width: 100%;}
  .dossier50 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For portrait tablets and large phones: */
  .dossier25 {width: 25%;}
  .dossier33 {width: 33.33%;}
  .dossier50 {width: 50%;}
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For portrait tablets and large phones: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For landscape tablets: */
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 992px) {
  /* laptops/desktops: */
  .col-l-1 {width: 8.33%;}
  .col-l-2 {width: 16.66%;}
  .col-l-3 {width: 25%;}
  .col-l-4 {width: 33.33%;}
  .col-l-5 {width: 41.66%;}
  .col-l-6 {width: 50%;}
  .col-l-7 {width: 58.33%;}
  .col-l-8 {width: 66.66%;}
  .col-l-9 {width: 75%;}
  .col-l-10 {width: 83.33%;}
  .col-l-11 {width: 91.66%;}
  .col-l-12 {width: 100%;}
}

@media only screen and (min-width: 1200px) {
  /* large laptops and desktops: */
  .col-1 {width: 8%;}
  .col-2 {width: 16%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33%;}
  .col-5 {width: 41%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58%;}
  .col-8 {width: 66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83%;}
  .col-11 {width: 91%;}
  .col-12 {width: 100%;}
}



/* BODY */

body {
  margin: 0;
  padding: 0;
  font-size: 100%; /* Nécessaire */
  counter-reset: titre3 tdm-num;
}



/* ????? ????? ????? ????? */

.restricted {
  color: red;
}



/* LIENS GÉNÉRAUX */

a {
  color: rgb(0,51,153);
}

a:link {
  text-decoration-color: #d8d8d8;
}

a:visited, a:active {
  text-decoration-color: #d8d8d8;
}

a:hover {
  text-decoration-color: rgb(0,51,153);
}



/* GUILLEMENTS FRANÇAIS */

.fr {
  quotes: "\00AB  " " \00BB" "“" "”";
}




/* ????? ????? ????? ????? */

dt {
  margin-top: 20px;
}

dd {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 80%;
}



/* COURS */

.tags {
  text-align: right;
}

.tag  {
  font-family: "Courier New", Courier, monospace;
  font-size: 80%;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 0 5px;
  border-radius: 5px;
  display: inline-block;
}



/* ????? ????? ????? ????? */

.hide {
  display: none;
}



/* COURS: OUI */

.usp, .ghc {
  background-color: #ff0080;
  color: white;
}

.geo {
  background-color: #ff8000;
  color: white;
}

.h01, .h02 {
  background-color: #88f;
  color: white;
}

.h03, .h04 {
  background-color: #039;
  color: white;
}

.mon {
  background-color: #ff00ff;
  color: white;
}

.fin {
  background-color: #080;
  color: white;
}

.h20 {
  background-color: #00f;
  color: white;
}

.gcu {
  background-color: #ff0;
  color: black;
}



/* COURS: TOTAL */

.tot {
  background-color: black;
  color: white;
}



/* COURS: NON */

.tago {
  color: #bbb;
  background-color: #ddd;
}



/* HEADER - MENU - LOGO */

header hover {
  text-decoration: none;
}



/* HEADER */

header {
  background-color: white;
  border-bottom: 1px solid rgb(204,204,204);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
  height: 51px;
  top: 0;
}



/* HEADER: ECO */

#eco-small {
  margin-right: 11px;
  z-index: 1;
  right: 0;
  position: absolute;
  top: 11px;
  display: block;
}

@media screen and (max-width:768px) {
  #eco-small {
    display: none;
  }
}



/* HEADER: BOUTON MENU */

#menu {
  font-size: 16px;
  font-weight: bold;
  background-color: white;
  border: 1px solid white;
/*  background-color: rgb(178,178,178);
  background-color: rgba(0,0,0,0.03);
  border: 1px solid rgb(204,204,204);
  border: 1px solid rgba(0,0,0,0.2); */
  color: #444;
  cursor: pointer;
  padding: 5px 10px;
  margin: 1px 11px 6px 11px;
  position: relative;
  top: -19px;
  width: 37px;
  text-decoration: none;
  display: inline-block;
  z-index: 1;
}

#menu:hover {
  background-color: rgb(204,204,204);
  background-color: rgba(0,0,0,0.2);
}



/* HEADER: LOGO */

#logo {
  position: relative;
  display: inline-block;
}

@media screen and (max-width:768px) {
  #opening-logo {
    display: none;
  }
}



/* HEADER: SLOGAN */

.slogan-top {
  float: none;
  position: absolute;
  top: 19pt;
  left: 50%;
  font-family: Georgia, Times, Serif;
  font-style: italic;
  font-size: 24px;
  transform: translate(-50%, -50%);
}

@media screen and (max-width:1200px) {
  .slogan-top {
  font-size: 17px;
  top: 26px;
  }
}

@media screen and (max-width:768px) {
  .slogan-top {
    display:none;
  }
}



/* SIDE NAVIGATION */

.sidenav {
  height: 100%;
  width: 280px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: -280px;
  background-color: RGB(0,51,153);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

#select {
  color: black;
  background-color: white;
  font-weight: bold;
}

.sidenav a:hover {
  color: white;
  background-color: black;
}

.sidenav #closebtn {
  padding: 8px 8px 8px 8px;
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}



/* MAIN - CORPS DE LA PAGE */

@media screen and (max-width:1200px) {  
  #main {
    margin-left: 2vw;
    margin-right: 2vw;
  }
}

main {
  margin: 0 20vw 15px;
  line-height: 1.6;
  padding: 0 0 40px;
}

/*#main {
  padding: 16px;
}*/



/* CHEMIN - BREADCRUMBS */

ul.chemin {
  border-bottom: 2px solid rgb(204,204,204);
  border-bottom: 2px solid rgba(0,0,0,0.2);
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  margin: 10px 0;
  padding: 10px 0 30px;
  list-style-type: none;
  font-size: 80%;
}

ul.chemin li {
  display: inline;
}

ul.chemin li+li:before {
  color: black;
  padding: 8px;
  content: "/\00a0";
}

ul.chemin li a {
  color: rgb(0,51,153);
}

ul.chemin li hover {
  color: rgb(0,51,153);
}



/* TITRAGE - HEADINGS - TITRE */

h1 {
  font-family: Georgia, Times, Serif;
  font-style: italic;
  font-size: 4.5vw;
  color: rgb(0,51,153);
  margin: 40px 0 10px;
  line-height: 1;
}



@media screen and (max-width:768px) {  
  h1 {
  font-size: 7.5vw;
  }
}



/* TITRE: Mon dossier */

.dossier-titre {
  color: #808080;
}



/* TITRE: SOUS */

h2 {
  margin: 0;
  padding-top: 37px;
}



/* TITRE: SECTIONS */

h3 {
  font-family: Tahoma, "Trebuchet MS", sans-serif;
/*  text-transform: uppercase; */
}

h4 {
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  text-transform: uppercase;
}

.titre-num::before {
  counter-increment: titre3;
  content: counter(titre3) ". ";
}



/* IDENTIFICATION - AUTEUR - ADDRESS - DATE - SOURCE */

.identification {
  padding: 10px 0;
  margin: 0;
  background-color: white;
}

address {
  font-weight: bold;
  font-style: normal;
  line-height: 150%;
}

.auteur {
  font-family: Georgia, Times, Serif;
  font-size: 120%;
}

.ville {
  font-family: Georgia, Times, Serif;
  font-style: italic;
}

.date {
  font-family: Georgia, Times, Serif;
  font-size: 100%;
  font-weight: bold;
  margin: 0 0 10px;
}



/* SOURCE: POST-IT VERT */

@media screen and (max-width:1200px) {  
  .source {
    margin: 0 1% 0 1%;
    width: 98%;
  }
}

.source{
  font-size: 80%;
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  max-width: 600px;
  background-color: #ddffdd;
  border-left: 6px solid #4caf50;
  padding: 15px;
  margin: 1% 49% 0 1%;
}



/* COMMUTATEURS: CONCEPT vs. DOSSIER */

/*  border-color: #004de6 #003cb3 #039 #002b80; */

button.dssrcncpt-g {
  background-color: #f7f7f7;
  border-style: solid;
  border-width: 5px 2.5px 5px 5px;
  border-color: #fff #ababab #ababab #dedede;
  border-radius: 25px 0 0 25px;
  margin-bottom: 5px;
  color: #444;
  height: 50px;
  width: 110px;
  font-weight: bold;
  font-size: 80%;
}

button.dssrcncpt-d {
  background-color: #f7f7f7;
  border-style: solid;
  border-width: 5px 5px 5px 2.5px;
  border-color: #fff #c4c4c4 #ababab #c4c4c4;
  border-radius: 0 25px 25px 0;
  margin-bottom: 5px;
  color: #444;
  height: 50px;
  width: 110px;
  font-weight: bold;
  font-size: 80%;
}

button.actif {
  background-color: #039;
  border-color: #003cb3 #002266 #001a4d #002b80;
  color: white;
}

button.inactif:hover {
  background-color: #039;
  cursor: pointer;
  border-color: #003cb3 #002266 #001a4d #002b80;
  color: white;
}



/* ????? ????? ????? ????? */

.switch {
  text-align: right;
}



/* TABLE DES MATIÈRES */

.tdm {
  background-color: rgb(178,178,178);
  background-color: rgba(0,0,0,0.03);
  border: 1px solid rgb(204,204,204);
  border: 1px solid rgba(0,0,0,0.2);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  max-width: 635px;
  margin-bottom: 20px;
  line-height: 2;
}

.tdm-num::before {
  counter-increment: tdm-num;
  content: counter(tdm-num) ". ";
}


/* TABLEAU */

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0 10px;
}

caption {
  font-weight: bold;
  text-transform: uppercase;
}

/* NAVIGATION BUTTONS */

/*.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}*/



/* BOUTON DE NAVIGATION */

.navbutton {
  background-color: rgb(178,178,178);
  background-color: rgba(0,0,0,0.03);
  border: 1px solid rgb(204,204,204);
  border: 1px solid rgba(0,0,0,0.2);
  color: #444;
  font-weight: bold;
  cursor: pointer;
  padding: 20px;
  margin: 1% 0 0;
  text-align: center;
  outline: none;
  font-size: 116%;
  position: relative;
  display: inline;
}

/* .navbutton:hover {
  background-color: rgb(204,204,204);
  background-color: rgba(0,0,0,0.2);
} */

.navbutton:hover {
  color: rgb(255,255,255);
  background-color: rgb(0,51,153);
}



/* ????? ????? ????? ????? */

.nav-list a {
  text-decoration: none;
}

ul.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}



/* SOURCE: POST-IT JAUNE */

@media screen and (max-width:1200px) {  
  .note-jaune {
    margin: 0 1% 1% 1%;
    width: 98%;
  }
}

.note-jaune {
  font-size: 80%;
  background-color: #ffffcc;
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  border-left: 6px solid #ffeb3b;
  padding: 15px;
  margin: 1% 49% 1% 1%;
}



/* SOURCE: POST-IT ROUGE */

@media screen and (max-width:1200px) {  
  .note-rouge {
    margin: 0 1% 1% 1%;
    width: 98%;
  }
}

.note-rouge {
  font-size: 80%;
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  background-color: #ffdddd;
  border-left: 6px solid #af4c50;
  padding: 15px;
  margin: 1% 49% 1% 1%;
}



/* NUMÉROTATION ALPHANUMÉRIQUE */

@media screen and (max-width:1200px) {  
  .az09 {
    display: none;
  }
}

.az09 {
  font-size: 80%;
  float: right;
  position: absolute;
  left: 80%;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  margin: 0.5% 1%;
}

/* ????? ????? ????? ????? */

.za90 {
  font-family: "Courier New", Courier, monospace;
}



/* TEXTE PRINCIPAL */

#chapeau {
  font-family: Georgia, Times, Serif;
  font-size: 140%;
}

#chapeau::first-line {
  font-variant: small-caps;
}

.corps-texte p {
  text-align: left;
/*  text-justify:inter-word; */
}


/* RÉFÉRENCE BOUTON */

@media screen and (max-width:200px) {  
  .reference {
    margin: 0 1% 0 1%;
    width: 98%;
  }
}

.reference {
  background-color: #ddffdd;
  border: 1px solid #4caf50;
  font-size: 80%;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
  outline: none;
  position: relative;
}


.active, .reference:hover {
  background-color: rgb(0,51,153);
  border: 1px solid rgb(0,51,153);
  color: white;
}

@media screen and (max-width:1200px) {  
  .citationsource {
    margin: 0 1% 0 1%;
    width: 98%;
  }
}

.citationsource{
  font-size: 80%;
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  max-width: 800px;
  background-color: #ddffdd;
  border-left: 6px solid #4caf50;
  padding: 15px;
  margin: 1% 24% 0 1%;
  display: none;
  overflow: hidden;
}




/* COLLAPSIBLE BOUTON */

.volet {
  background-color: rgb(178,178,178);
  background-color: rgba(0,0,0,0.03);
  border: 1px solid rgb(204,204,204);
  border: 1px solid rgba(0,0,0,0.2);
  color: #444;
  cursor: pointer;
  padding: 0 20px;
  margin: 10px 0 0;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 116%;
  position: relative;
}



/* COLLAPSIBLE BOUTON */

.active, .volet:hover {
  background-color: rgb(0,51,153);
  border: 1px solid rgb(0,51,153);
  color: white;
/*  background-color: rgb(204,204,204);
  background-color: rgba(0,0,0,0.2); */
}



/* COLLAPSIBLE BOUTON: AIDE */

.aide, .aide:hover {
  background-color: rgb(153,51,0);
  border: 1px solid rgb(153,51,0);
  color: white;
}



/* COLLAPSIBLE CACHÉ */

.accordeon {
  display: none;
  overflow: hidden;
}



/* MENU BAS: BOUTON */

.collapsible {
  background-color: #f8f8f8;
  border: 0;
  color: #444;
  cursor: pointer;
  padding: 20px;
  margin: 0;
  width: 100%;
  text-align: left;
  outline: none;
  font-weight: bold;
  position: relative;
}



/* MENU BAS: CACHÉ */

@media screen and (min-width:1200px) {  
  .content {
    display: inline-block;
  }
}



/* MENU BAS: CACHÉ */

@media screen and (max-width:1200px) {  
  .content {
    display: none;
    overflow: hidden;
  }



/* MENU BAS: BOUTON */

  .collapsible:hover {
    background-color: rgb(204,204,204);
    background-color: rgba(0,0,0,0.2);
  }
}

/*
.content {
  display: none;
  overflow: hidden;
}*/



/* DRACULA: ICONE DE DRAGON */

.fa-dragon {
  color: red;
}



/* DRACULA: BOUTON */

.dracula {
  color: red;
  font-style: italic;
}


/* DRACULA: BOUTON */

.voletdracula {
  background-color: black;
  border: 1px solid red;
  color: white;
  cursor: pointer;
  padding: 0 20px;
  margin: 10px 0 0;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 116%;
  position: relative;
}



/* DRACULA: BOUTON */

.voletdracula.active, .voletdracula:hover {
  background-color: #400000;
  color: white;
}



/* DRACULA: BOUTON DE NAVIGATION */

.navbuttondracula {
  background-color: black;
  border: 1px solid red;
  color: white;
  font-weight: bold;
  cursor: pointer;
  padding: 20px;
  margin: 1% 0 0;
  text-align: center;
  outline: none;
  font-size: 116%;
  position: relative;
  display: inline;
}

.navbuttondracula:hover {
  background-color: #400000;
}



/* INDEX: DOSSIER */

.dossier {
  font-size: 160%;
  font-weight: bold;
}



/* INDEX: SOUS-DOSSIER */

.ssdossier {
  font-size: 110%;
  font-weight: bold;
}



/* INDEX: BOUTONS et RENVOIS */

.lettre {
  text-transform: uppercase;
}



/* INDEX: BOUTONS */

ul.alphabet {
  list-style-type: none;
  text-align: center;
  line-height: 50px;
}

ul.alphabet li {
  display: inline;
}

ul.alphabet li a {
  color: white;
  background-color: black;
  padding: 10px 20px;
  text-decoration: none;
}



/* INDEX: ENTRÉES */

ul.index {
  list-style-type: none;
  padding-left: 0;
}


/* COORDONNÉES (CSSDM...) */

.coordonnees {
  font-size: 0.9rem;
  margin: 2px 0 0 25px;
}



/* ????? ????? ????? ????? */

.reponse {
  font-family: Georgia, Times, Serif;
  padding: 24px;
  font-style: italic;
}



/* ????? ????? ????? ????? */

.operation {
  text-align: right;
  padding-right: 24px;
  font-size: 80%;
}



/* ACCORDÉON: CONTENU */

.contenu {
  box-sizing: border-box;
}

ul.contenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.contenu li.contenu {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: rgb(178,178,178);
  background-color: rgba(0,0,0,0.03);
  padding: 12px;
}

li.contenu a {
/*  text-decoration: none; */
}

li.contenu a:hover {
  color: red;
}



/* ????? ????? */

.ou {
  text-transform: uppercase;
  padding: 12px;
  margin: 0;
}



/* LIEN HAUT-BAS */

.haut-bas {
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  font-size: 90%;
  text-align: right;
  margin: 10px 0;
}



/* ????? ICONES */

.icone-r {
  background-color: black;
}

.icone-ca {
  background-color: #ff0000;
}

.icone-qc {
  background-color: #003399;
}

.icone-mtl {
  background-color: green;
}

[class^="icone"] {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 60%;
  font-weight: bold;
  color: white;
  border-radius: 8px;
  padding: 0 5px 3px;
  margin: 0 10px 20px;
  vertical-align: text-top;
}



/* MENU DU BAS - COMPLET */

@media screen and (min-width:992px) {
  .navbasmenu {
    margin: 0;
  }
}

@media screen and (min-width:1200px) {
  .navbasmenu {
    margin: 0 8.33%;
  }
}



/* MENU DU BAS - COLONNE */

[class^="navbas-"] {
  text-align: left;
  display: inline-block;
  vertical-align: text-top;
  border-top: 1px solid rgb(204,204,204);
  border-top: 1px solid rgba(0,0,0,0.2);
  color: black;
}

.navbas-6, #reseaux, #siteb {
  display: none;
}



/* MENU DU BAS - Lien pour le site B */

#siteb::after {
  content: "Site B";
}



/* MENU DU BAS - Lien pour le site A */

#sitea::after {
  content: "maPerspective.ca";
}



/* MENU DU BAS - SECTION */

.section {
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-bottom: 20px;
}



/* MENU DU BAS - SOUS-SECTION */

.sssection {
  line-height: 20px;
  padding: 0 0 20px 0;
}

ul.sssection {
  list-style-type: none;
  padding-left: 20px;
}



/* À CHANGER ????? ????? ????? ????? MENU DU BAS - FLÈCHE */

@media screen and (min-width:1200px) {  
  .drop {
    display: none;
  }
}

.drop {
  float: right;
  position: absolute;
  right: 0;
  margin-right: 20px;
}



/* COPYRIGHT - APRÈS */

#cr {
  padding: 30px 0;
  background: black;
}

#cr::after {
  content: " Bruno Charette 2019-2021";
}



/* NOTE DE BAS DE PAGE */

.nbp {
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  font-size: 90%;
  margin: 0;
}



/* FILET NOTE DE BAS DE PAGE */

.filet-bas {
  width: 50%;
  margin-left: 0;
  border: 1px solid rgb(204,204,204);
  border: 1px solid rgba(0,0,0,0.2);
}



/* MENUS DU BAS + COPYRIGHT */

footer { 
  position: relative;
  left: 0;
  bottom: 0;
  margin: 0;
  background-color: #f8f8f8;
  padding: 0px;
  font-size: 90%;
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  color: white;
  text-align: center;
}