h1{
  background: #50a4fd!important;
  font-size: 1.7em !important;
  color: #f8f9fa;
}
aside h2{
  color: #65afff;
  border-bottom: 1px solid #007bff;
}
aside ul{
  display: flex;
  flex-direction: column;
}
#listCours li{
  border: 1px solid #000;
  margin: 2px;
  list-style: none;
  padding: 2px;
  transition: .5s;
}
#listCours li:hover{
  transform: scale(1.1);
}
#listCours li a{
  display: inline-block;
  width: 100%;
  text-decoration: none;
  color: #000;
}
#descCours{
  min-height: 80px;
  height: auto;
  background: #fbeea3;
  padding: 2px;
}
aside ul li{
  border: 1px solid #666;
  margin: 2px;
  list-style: none;
  background: #e8fba3;
  transition: .5s;
}
aside ul li:hover{
  transform: scale(1.2);
}
aside ul li a{
  text-decoration: none;
}
.listTheme {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.listTheme li {
  flex: 1 1 100px;
  text-align: center;
  transition: transform 0.3s ease;
}

.listTheme li:hover {
  transform: scale(1.05);
}
span.badge{
  background: #003FEF;
  color: #FFF;
  display: inline-block;
  border-radius: 5px;
}
.icon_theme {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
#contentCours{
  max-height: 450px;
  overflow-x: auto;
  background: #f9ffb5;
  scrollbar-width: thin;        /* auto | thin | none */
  scrollbar-color: #999 #eee;   /* thumb | track */
  direction: rtl;
  display: flex;
  flex-direction: column;
}
#contentCours>*{
  direction: ltr;  
}
/* Largeur de la scrollbar */
#contentCours::-webkit-scrollbar {
  width: 10px;
}

/* Couleur du fond de la scrollbar */
#contentCours::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 10px;
}

/* Partie qui défile */
#contentCours::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 10px;
}

/* Au survol */
#contentCours::-webkit-scrollbar-thumb:hover {
  background: #666;
}
#contentCours h2{
  background: #007bff ;
  font-size: 1.5em;
}
#contentCours h3{
  background: #65afff;
  font-size: 1.3em;
}
.descTheme p {
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-top: 1rem;
}
.mime {
    display: inline-block;
    width: 25px;
    height: 25px;
    align-self: center;
    background-size: contain;
    margin-right: 5px;
}

.mime.PDF {
    background-image: url('../img/pdf.jpg');
}

.mime.PPT {
    background-image: url('../img/ppp.png');
}

.mime.rar {
    background-image: url('../img/rar.png');
}
/*
CONTENU DU COURS
*/
.code {
    width: 300px;
    background: #D4812B;
    margin: 1px;
}

#contentCours {
    max-height: 500px;
    overflow: auto;
}

.cours_item {
    width: 250px;
    height: 175px;
    background: #7773;
    border: 1px solid #777;
    border-radius: 3px;
    transition: 0.2s;
    float: left;
    margin: 2px;
}

.cours_item:hover {
    border: 3px solid #77A;
    background: #7779;
}

#contentCours ul {
    list-style: none;
}

#contentCours h2 {
    font-size: 20px;
    background: #FAD8CE;
    color: #3A3A3A;
    width: 100%;
    padding: 7px;
    margin: 2px;
}

#contentCours h4 {
    color: #003FEF;
    font-size: 15px;
    background: #FAD8CE;
    padding: 0.5em;
    margin-left: 15px;
    width: 80%;
}

#contentCours h3 {
    font-size: 15px;
    background: #FAD8CE;
    color: #3A3A3A;
    width: 75%;
    padding: 5px;
    margin: 10px;
    align-self: self-start;
}

#contentCours .code {
    background: #000;
    color: #777;
    margin: 15px;
    padding: 5px;
    width: 75%;
    align-self: self-start;
}

#contentCours .code::before {
    content: "exemple " attr(type);
    display: block;
    color: #AAD;
}

#contentCours dt {
    margin-top: 5px;
    font-size: 15px;
    margin-left: 10px;
}

#contentCours dd:first-child {
    margin-left: 10px;
}
#contentCours p.important{
    background: #A66;
    padding: 6px;
    margin: 0;
    font-size: .9em;
}
/*=======*/
/* BUBBLE*/
/*=======*/

[speech-bubble]{
  --bbColor: grey;
  --bbArrowSize: 1.5rem;
  --bbBorderRadius: 0.25rem;
  --bbPadding: 1rem;
  background: var(--bbColor);
  border-radius: var(--bbBorderRadius);
  padding: var(--bbPadding);
  position: relative;
}

[speech-bubble]::before{
  content: ''; 
  position: absolute;
  background: var(--bbColor);
}

[speech-bubble][pbottom]{ margin-bottom: var(--bbArrowSize) }
[speech-bubble][ptop]   { margin-top: var(--bbArrowSize); }
[speech-bubble][pleft]  { margin-left: var(--bbArrowSize); }
[speech-bubble][pright] { margin-right: var(--bbArrowSize); }


/* bottom and top  */
[speech-bubble][pbottom]::before,
[speech-bubble][ptop]::before{
  --width: calc(var(--bbArrowSize) / 2 * 3);
  height: var(--bbArrowSize);
  width: var(--width);
}

/* bottom */
[speech-bubble][pbottom]::before{
  top: calc(100% - 2px);
}
[speech-bubble][pbottom][aleft]::before{
  left: 1rem;
  clip-path: polygon(25% 0, 100% 0, 0% 100%)
}
[speech-bubble][pbottom][acenter]::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
}
[speech-bubble][pbottom][aright]::before{
  right: 1rem;
  clip-path: polygon(0 0, 75% 0, 100% 100%)
}

/* top */
[speech-bubble][ptop]::before{
  bottom: calc(100% - 2px);
}
[speech-bubble][ptop][aleft]::before{
  left: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 25% 100%)
}
[speech-bubble][ptop][acenter]::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
}
[speech-bubble][ptop][aright]::before{
  right: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 75% 100%)
}

/* left and right  */
[speech-bubble][pleft]::before,
[speech-bubble][pright]::before{
  --height: calc(var(--bbArrowSize) / 2 * 3);
  width: var(--bbArrowSize);
  height: var(--height);
}

/* right */
[speech-bubble][pright]::before{
  left: calc(100% - 2px);
}
[speech-bubble][pright][atop]::before{
  top: var(--bbPadding);
  clip-path: polygon(100% 0, 0 100%, 0 25%)
}
[speech-bubble][pright][acenter]::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
}
[speech-bubble][pright][abottom]::before{
  bottom: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 0 75%)
}

/* left */
[speech-bubble][pleft]::before{
  right: calc(100% - 2px);
}
[speech-bubble][pleft][atop]::before{
  top: var(--bbPadding);
  clip-path: polygon(0 0, 100% 25%, 100% 100%)
}
[speech-bubble][pleft][acenter]::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
}
[speech-bubble][pleft][abottom]::before{
  bottom: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 100% 75%)
}

/* flip */
[speech-bubble][pbottom][flip]::before,
[speech-bubble][ptop][flip]::before{
  transform: scaleX(-1)
}
[speech-bubble][pleft][flip]::before,
[speech-bubble][pright][flip]::before{
  transform: scaleY(-1)
}






.middle{
  grid-area: cc;
  align-self: center;
  justify-self: center;
  text-align:center;
  color: white;
}

[speech-bubble][pbottom][aleft]   {grid-area: bl}
[speech-bubble][pbottom][acenter] {grid-area: bc}
[speech-bubble][pbottom][aright]  {grid-area: br}

[speech-bubble][pright][atop]     {grid-area: rt}
[speech-bubble][pright][acenter]  {grid-area: rc}
[speech-bubble][pright][abottom]  {grid-area: rb}

[speech-bubble][pleft][atop]      {grid-area: lt}
[speech-bubble][pleft][acenter]   {grid-area: lc}
[speech-bubble][pleft][abottom]   {grid-area: lb}

[speech-bubble][ptop][aleft]      {grid-area: tl}
[speech-bubble][ptop][acenter]    {grid-area: tc}
[speech-bubble][ptop][aright]     {grid-area: tr}

[speech-bubble][pbottom],
[speech-bubble][ptop]{margin: 0}

[speech-bubble]{ 
  filter: drop-shadow(0px 0px 0.2rem black);
  transition: transform 0.25s ease
}
[speech-bubble]:hover{
  transform: scale(1.05);
  filter: 
    drop-shadow(0px 0px 0.2rem black)
    drop-shadow(0px 0px 1rem var(--bbColor));
}

[speech-bubble] .title{
  font-weight: 600;
  color: white; 
  text-shadow: 1px 1px 2px black;
  margin-bottom: 0.5rem
}
[speech-bubble] code {
  background: white;
  margin: 0.125rem;
  box-shadow: 0px 0px 5px rgba(0,0,0,.5);
  white-space: nowrap;
  font-size: .9rem
}

.middle code{
  font-size: 1rem;
}