:root {
  --color-spe: hsl(234, 12%, 34%);
  --color-com: #e0e0e0;
  --color-al: hsl(34, 97%, 90%);

  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --orange: hsl(34, 97%, 64%);
  --blue: hsl(212, 86%, 64%);
  --veryDarkBlue: hsl(234, 12%, 34%);
  --grayishBlue: hsl(229, 6%, 66%);
  --veryLightGray: hsl(0, 6%, 80%);

  --com-color :hsl(0, 78%, 62%);
  --ino-color :hsl(180, 62%, 55%);
  --jou-color :hsl(322, 47%, 38%);
  --mlp-color :hsl(212, 86%, 64%);
  --pub-color :hsl(34, 97%, 64%);

  --clr-ue1 :hsl(0, 78%, 62%);
  --clr-ue2 :hsl(18, 89%, 66%);
  --clr-ue3 :hsl(34, 97%, 64%);
  --clr-ue4 :hsl(143, 62%, 55%);
  --clr-ue5 :hsl(212, 86%, 64%);
  --clr-ue6 :hsl(322, 47%, 38%);

  --weight1: 200;
  --weight2: 400;
  --weight3: 600;

  font-size: 0.9rem;
}
header {
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 100;
}
header h2 {
  font-size: 18pt;
}
header h2>a{
  text-decoration: none;
}

div.content-flex {
  display: flex;
}

aside {
  padding: 1rem;
  padding-top: 10rem;
  border-right: thin solid lightgray;
  box-shadow: 1px 0px 8px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  overflow-y: auto;
  transition: all 0.3s ease-in-out;
  background-color: white;
  z-index: 99;
}
aside.hidden {
  left: -185px;
  opacity: 1;
}
#left-hover-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100vh;
  z-index: 98;
  background-color: transparent;
}
main {
  flex:7;
  transition: margin-left 0.3s ease-in-out;
}
main.expanded {
  margin-left: 0;
}
#toggle-filter-btn {
  position: fixed;
  top: 6rem;
  left: 200px;
  z-index: 1000;
  box-shadow: 1px 0px 8px rgba(0, 0, 0, 0.2);
  border-radius: 0 0.5rem 0.5rem 0;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  transform: translateX(0);
  transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
  background-color: white;
  border: thin solid lightgray;
  border-left: none;
  color: #6c757d;
  margin-left: -1px;
  clip-path: inset(0 -10px -10px 0);
}

#toggle-filter-btn:hover {
  transform: translateX(3px);
  background-color: white;
  border-color: lightgray;
  color: #495057;
}

body:has(aside.hidden) #toggle-filter-btn {
  left: 15px;
}

/* FORMULAIRE */
form > div {
  padding: 0.4rem;
  border-bottom:thin solid lightgray;
  padding-inline: 0.4rem;
  padding-bottom: 1rem;
  flex: 1 1;
}

form > div > div {
  margin-inline: 1rem;
  /* outline:thin solid red; */
}
form > div.preco {
  margin: 2rem 0rem;
  border-radius: 0.2rem;
}
form > div.preco > div{
  margin-inline: 1rem;
  /* border-block: thin solid grey; */
}
form > div.preco > div{
  margin-inline: 1rem;
  /* border-block: thin solid grey; */
}


section {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
}
.gridish {
  gap: 1rem;
}
.flex-1 {
  flex: 1;
  min-width: 0;
}
.gridish.lg > * {
  flex: 1 1 max(30rem, calc(50% - 1rem));
}
.gridish.md > * {
  flex: 1 1 max(22rem, calc(33% - 1rem));
}
.gridish.sm > * {
  flex: 1 1 100%;
}
article.spe{
  border-top: 3px solid var(--color-spe);
}
article.com{
  border-top: 3px solid var(--color-com);
}
article.v_al{
  background-color: var(--color-al);
}

/* Programme actuel - tableau de gauche */
.old-program-opacity {
  opacity: 0.6;
  pointer-events: auto;
}
.old-program-opacity table tr {
  pointer-events: auto;
}
.old-program-label {
  position: relative;
}
.old-program-label::before {
  content: "Programme actuel (BUT 2020)";
  position: absolute;
  top: -1.5rem;
  left: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  pointer-events: none;
}

/* Nouveau programme - tableau de droite */
.new-program {
  position: relative;
}
.new-program::before {
  content: "Programme à venir (BUT 2027) - en cours de rédaction";
  position: absolute;
  top: -1.5rem;
  left: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #28a745;
  text-transform: uppercase;
  pointer-events: none;
}

/* Switch de comparaison en vert quand activé */
#compare-toggle:checked {
  background-color: #28a745;
  border-color: #90ee90;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}

#compare-toggle:checked:focus {
  border-color: #90ee90;
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}


article:hover {
  transform: scale(1.02);
  box-shadow: 0px 0px 0.8rem #bbbbbb;
  transition-duration: 0.2s;
}

.c-pointer:hover{
  cursor: pointer;
}
/* article h6 {
  font-weight: 300;
} */

table{
  font-size:0.9rem;
  line-height: 1.3rem;
  table-layout: fixed;
  width: 100%;
}

/* Largeurs fixes pour l'alignement des colonnes */
table th:nth-child(1), table td:nth-child(1) { width: 40px; }   /* Semestre */
table th:nth-child(2), table td:nth-child(2) { width: auto; }  /* Libellé */
table th:nth-child(3), table td:nth-child(3) { width: 80px; }  /* UE */
table th:nth-child(4), table td:nth-child(4) { width: 50px; }  /* h. form. */
table th:nth-child(5), table td:nth-child(5) { width: 50px; }  /* dont TP */
table th:nth-child(6), table td:nth-child(6) { width: 50px; }  /* h. projet */

/* Empêcher le retour à la ligne et tronquer le texte */
table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Développer les lignes tronquées au survol */
table tr:hover td {
  white-space: normal;
  overflow: visible;
}

th{
  line-height: 1rem;
}

tr.spe{
  /* background-color: var(--color-spe); */
  border-left: thick solid var(--color-spe);
}

tr.com{
  background-color: whitesmoke;
  border-left: thick solid var(--color-com);
}

tr.v_al{
  background-color: var(--color-al);
  border-left: thick solid var(--color-al);
}
/* tr.spe.sae {
  background-color: var(--color-spe);
} */
p.card-title{
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0px;
}
p.card-subtitle{
  margin-top: 1rem;
  font-size: small;
}
p.card-subtitle::before{
  position:absolute;
  transform: translateY(-0.5rem);
  content: "";
  width: 2em;
  border-top: thin solid currentColor;
}


section.index {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
section.index > * {
  flex: 1 1 max(15rem, calc(25% - 1rem));
  /*background-color: bisque;*/
}

.box{
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  box-shadow: 0px 0px 40px -20px var(--grayishBlue);
  padding: 30px;
}

.box:hover{
  box-shadow: 0px 20px 40px -20px var(--grayishBlue);
}

.box p {
  color: var(--grayishBlue);
  text-align: justify;
  hyphens: auto;
  padding-top: 0.5rem;
}
.box > p:first-of-type::after{
  content:"[...]";
  display: block;
}

.box > p.more{
  display:none;
}
.box > p.more::before{
  display: block;
  content:"[...]";
}

.box > abbr{
  text-decoration: none;
  outline: thin solid currentColor;
  padding: 0 .3em 0 .3em;
  border-radius: .2em;
  width: fit-content;
  margin-bottom: .2rem;
}

.modal-body p{
  margin-bottom: .8em;;
}
.modal-body li p{
  margin-bottom: .4em;;
}
.modal-body li p+p{
  /* to fix list markdown issue */
  transform: translateX(-2em);
  margin-top: 0.8em;
}

abbr.com {
  color: var(--com-color);
}
abbr.ino {
  color: var(--ino-color);
}
abbr.jou {
  color: var(--jou-color);
}
abbr.mlp {
  color: var(--mlp-color);
}
abbr.pub {
  color: var(--pub-color);
}

.box.com {
  border-top: 3px solid var(--com-color);
}
.box.ino {
  border-top: 3px solid var(--ino-color);
}
.box.jou {
  border-top: 3px solid var(--jou-color);
}
.box.mlp {
  border-top: 3px solid var(--mlp-color);
}
.box.pub {
  border-top: 3px solid var(--pub-color);
}

.box > .btn{
  margin-top: auto;
  align-self: flex-end;

  transition: filter 200ms;
}

.btn-com{
  background-color: var(--com-color);
  color: white;
}
.btn-ino{
  background-color: var(--ino-color);
  color: black;
}
.btn-jou{
  background-color: var(--jou-color);
  color: white;
}
.btn-mlp{
  background-color: var(--mlp-color);
  color: white;
}
.btn-pub{
  background-color: var(--pub-color);
  color: black;
}

.btn-com:hover{
  filter:brightness(90%);
  color: white;
} 
.btn-ino:hover{
  filter:brightness(90%);
  color: black;
}
.btn-jou:hover{
  filter:brightness(90%);
  color: white;
}
.btn-mlp:hover{
  filter:brightness(90%);
  color: white;
}
.btn-pub:hover{

  filter:brightness(90%);
  color: black;
}

.btn-outline-com{
  border-color: var(--com-color);
  color: var(--com-color);
}
.btn-outline-ino{
  border-color: var(--ino-color);
  color: var(--ino-color);
}
.btn-outline-jou{
  border-color: var(--jou-color);
  color: var(--jou-color);
}
.btn-outline-mlp{
  border-color: var(--mlp-color);
  color: var(--mlp-color);
}
.btn-outline-pub{
  border-color: var(--pub-color);
  color: var(--pub-color);
}

.btn-outline-com:hover{
  background-color: var(--com-color);
  color:white;
}
.btn-outline-ino:hover{
  background-color: var(--ino-color);
  color:black;
}
.btn-outline-jou:hover{
  background-color: var(--jou-color);
  color:white;
}
.btn-outline-mlp:hover{
  background-color: var(--mlp-color);
  color:white;
} 
.btn-outline-pub:hover{
  background-color: var(--pub-color);
  color:black;;
}


.box>h4 {
  color: var(--varyDarkBlue);
  font-weight: var(--weight3);
}


.card-body {
  padding: 0.8rem 1rem;
}

.bg-parcours{
 background-color: var(--color-spe);
}

.form-check-input:checked {
  background-color: #6c757d; /* rgb(108,117,125) */
  border-color: #adb5bd; /* rgb(173, 181, 189) */
}

.form-check-input:focus {
  border-color: #b6bdad;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(173 181 189 / 25%);
}
.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb(108,117,125)'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb(173, 181, 189)'/%3e%3c/svg%3e");
}

.preco .form-check-input:checked{
  /* background-color: var(--color-al); */
  background-color: var(--color-al);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb(108,117,125)'/%3e%3c/svg%3e");

}

.badge{
  height: fit-content;
}
.badge + .badge{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.badge.bg-parcours{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.ue{
  display: inline-block;
  font-size: x-small;
  font-weight: bold;
  background-color: var(--grayishBlue);
  color: white;
  border-radius:.2em;
  text-align: center;
  padding-left: .5em;
  padding-right: .5em;
  padding-top: .2em;
  padding-bottom: .2em;
}

.ue-num{
  display: inline-block;
  font-size: x-small;
  font-weight: bold;
  color: white;

  border-radius:.2em;
  text-align: center;
  padding-left: .2em;
  padding-right: .2em;
  padding-top: .1em;
  padding-bottom: .1em;

  width: 1.1em;

  /*border: thin solid white;*/
}
.ue-num:not(:last-child){
  margin-right: 0.1em;
}
.ue-num-1{
  background-color:var(--clr-ue1);
}
.ue-num-2{
  background-color:var(--clr-ue2);
}
.ue-num-3{
  background-color:var(--clr-ue3);
}
.ue-num-4{
  background-color:var(--clr-ue4);
}
.ue-num-5{
  background-color:var(--clr-ue5);
}
.ue-num-6{
  background-color:var(--clr-ue6);
}

.ue-outline{
  display: inline-block;
  font-size: x-small;
  font-weight: bold;
  border-radius:.2em;
  text-align: center;
  padding-left: .3em;
  padding-right: .3em;
  padding-top: .1em;
  padding-bottom: .1em;

  /*border: thin solid white;*/
}
.ue-outline:not(:last-child){
  margin-right: 0.1em;
}
.ue-outline-1{
  color:var(--clr-ue1);
  border:thin solid var(--clr-ue1);
}
.ue-outline-2{
  color:var(--clr-ue2);
  border:thin solid var(--clr-ue2);
}
.ue-outline-3{
  color:var(--clr-ue3);
  border:thin solid var(--clr-ue3);
}
.ue-outline-4{
  color:var(--clr-ue4);
  border:thin solid var(--clr-ue4);
}
.ue-outline-5{
  color:var(--clr-ue5);
  border:thin solid var(--clr-ue5);
}
.ue-outline-6{
  color:var(--clr-ue6);
  border:thin solid var(--clr-ue6);
}

.ue:not(:last-child){
  margin-right: 0.2em;
}
.ue-1{
 background-color: var(--clr-ue1);
}
.ue-2{
  background-color:  var(--clr-ue2);
 }
 .ue-3{
  background-color:  var(--clr-ue3);
 }
 .ue-4{
  background-color:  var(--clr-ue4);
 }
 .ue-5{
  background-color:  var(--clr-ue5);
 }
 .ue-6{
  background-color:  var(--clr-ue6);
 }
/*
tbody tr:hover td, tbody tr:hover th {
  background-color: hsl(var(--color-spe), 0%);
}
*/
.dropdown-item.active{
  background-color: var(--color-spe);
}
.dropdown-item:focus{
  background-color: var(--color-spe);
}

.t-hover>tbody>tr:not(.spacer):hover {
  background-color: #dddddd;
}
tr.spacer{
  height: 3rem;
}

footer{
  margin-top: 4rem;
  padding: 1rem;
  background-color: var(--color-com);
  font-size: smaller;
  color: var(--grayishBlue);
  /* box-shadow: inset 0 .1em .2em var(--grayishBlue); */
}
footer>*{
  margin: 0;
}

.alert {
  position:fixed;
  bottom:1rem;
  right:1rem;
}