.cards-lesson-group {

	margin-top: 0.5em;
	margin-left: 0.5em;
	margin-right: 1em;	
	padding: 0.5em;
	border-radius: 5px;
	border: solid 1px black;
  	max-width: 1200px;
  	background: rgba(0,255,255,0.05);	    
  	box-shadow: 0.1em 0.1em 2px rgba(0,0, 0, 2),
  	0.1em 0.1em 5px rgba(0,0, 0, 2);
}

.group-title {
  margin-bottom: 4px;
  font-size: 2em;

  text-align: center;
  box-shadow: .2em 5px 2px rgba(0,0, 0, 0.2);    
}

.card-lesson {

 	padding-top: 3px;
 	padding-left: 3px; 	
  	border-top: dotted 3px black;
  	border-left: solid 3px black;  	
  	border-radius: 1em 0em 0em 0em;

  	display: grid;
  	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  	gap: 1em;
}


.card {
  background: rgba(225,255,255,1);


  background-image:
  linear-gradient(90deg, transparent 19px, #abced4 19px, #abced4 22px, transparent 22px),
  linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% 1.2em;

  background-color: rgb(180,225,180);  
  background-image:
    linear-gradient(90deg,transparent 19px,#abced4 19px,#abced4 22px,transparent 22px),
    linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% .2em;


  position: relative;

  min-height: 4.5em;   /* ajuste si besoin */  

  padding-left: 3.5em;  
  padding-top: 0.2em;

  border-radius: 12px;
  border: solid 2px rgba(0,0,0,1);
  text-decoration: none;

  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  transition: all 0.25s ease;

  display: flex;
  align-items: flex-start;   /* 👈 clé */
}
.card::before {
  content: "🎵";
  position: absolute;
  font-size: 4em;
  opacity: 0.2;
  top: 60%;
  left: 60%;
  transform: translate(-50%, -65%);
  pointer-events: none;
}
.card:hover {

  transform: translateY(-8px) scale(1.03);

  background: linear-gradient(
    135deg,
    rgba(0,155,255,0.9),
    rgba(0,255,255,0.9)
  );

  border-color: #00ffff;

  box-shadow:
    0 0 8px #00ffff,
    0 0 16px #00ffff,
    0 0 30px rgba(0,1,0,0.8),
    0 15px 25px rgba(0,0,0,0.4);

  transition: all 0.25s ease;
}
.card-icon {

  border-radius: 4px 8px 8px 4px;

    position: absolute;
    top: 0.2em;
    left: 5px;
    background: rgba(255,200,200,1);		  
  	font-size: 2.5em;

    width: 1.2em;    

  	border: dotted 2px rgba(255,0,0,0.5);    
  	box-shadow: 2px 2px 4px rgba(0,0,0,0.8);  


}

.card p {
  margin: 0;
  padding: 0;  
  margin-left: 5px;      

  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 1em;
  color: rgb(100,200,200);

  text-shadow:
    0 2px 0 rgba(0,100,255,1),
    2px 0 0 rgba(0,100,255,1),
    2px 2px 4px rgba(0,0,255,0.8);
}

.group-1 .card{

  background-color: rgb(180,225,180);  
  background-image:
    linear-gradient(90deg,transparent 19px,#abced4 19px,#abced4 22px,transparent 22px),
    linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% .2em;
}

.group-2 .card{

  background-color: rgb(200,200,255);  
  background-image:
    linear-gradient(90deg,transparent 19px,#abced4 19px,#abced4 22px,transparent 22px),
    linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% .2em;
}

.group-3 .card{

  background-color: rgb(255,255,255);  
  background-image:
    linear-gradient(90deg,transparent 19px,#abced4 19px,#abced4 22px,transparent 22px),
    linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% .2em;
}

.group-4 .card{

  background-color: rgb(100,100,100);  
  background-image:
    linear-gradient(90deg,transparent 95%,#000 95%,#000 97%,transparent 97%),
    linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% .2em;
}



.group-5 .card{
  background-image:
  linear-gradient(90deg, transparent 19px, #abced4 19px, #abced4 22px, transparent 22px),
  linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% 1.2em;

  background-color: rgb(255,255,255);  
  background-image:
    linear-gradient(90deg,transparent 19px,#abced4 19px,#abced4 22px,transparent 22px),
    linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% .2em;
}