.cards-lesson-group {

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

.card-lesson {

  margin-top: 5px;
 	padding-top: 5px;
  padding-bottom: 5px;  
 	padding-left: 3px; 	
  padding-right: 3px;    
  border-top: solid 3px black;
  border-radius: 0px 0px 0px 0px;

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

/*  background: rgba(200,255,255,1);        */
}


.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:hover {

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

  border-color: #00ffff;

  box-shadow:
    0 0 8px #0000ff,
    0 0 16px #00ffff,

    0 15px 25px rgba(0,0,0,0.4);

  transition: all 0.15s 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;    

  text-shadow:
    0 2px 2px rgba(0,0,0,0.8),
    0 4px 6px rgba(0,0,0,0.4);    

  	border: solid 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: 1.1em;
  color: rgb(255,255,255);

  text-shadow:
    0 1px 0 rgba(0,0,0,1),
    1px 0 0 rgba(0,0,0,1),
    0px -1px rgba(0,0,0,1),
    -1px 0px 0 rgba(0,0,0,0.5);

}

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