body {
  background-image: 
    linear-gradient(
      to right,
      transparent 0px,
      transparent 1.8em,

      /* trait gauche */
      rgba(0,0,0) 1.8em,
      rgba(200,200,200) 2em,

      /* trait central */
      rgba(255,255,0) 2em,
      rgba(255,255,0) 3.4em,

      /* trait droite */
      rgba(200,200,200) 3.4em,
      rgba(0,0,0) 3.6em,

      transparent 3.6em
    ),
    linear-gradient(to bottom, #d0e1ff 1px, transparent 2px);

  background-size: auto, 100% 24px;
  background-repeat: repeat-y, repeat;
}
 


/* Navigation */
/* .lesson-nav {
	background-color: #ddd;

	padding: 0.5em 1em;
} */

header {
  color: #f0e6d2;                 /* couleur claire pour le texte */
  padding: 1.0em 0.2em;             /* espace intérieur */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;


}

header h1.titre {

  display: inline-block;    

  font-size: 3em;

  /* contour net lisible */
  color: gold;
  text-shadow:
      -2px -2px 0 black,
       2px -2px 0 black,
      -2px  2px 0 black,
       2px  2px 0 black;

  margin: 0;
  margin-left: .1em;
  padding-right: 1em;
  padding-bottom: 0.1em;

  background-color: rgba(245,245,245,1);
  border-top: solid 1px black;
  border-right: solid 1px black;  
  border-left: solid 20px rgba(100, 200,255, 1);    
  border-bottom: solid 1px black;  
  border-radius: 0.5em 5px 5px 1.5em;      

  /* ton motif */
/*  background: radial-gradient(black 15%, transparent 16%) 0 0,
              radial-gradient(black 15%, transparent 16%) 8px 8px,
              radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
              radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color: #f0f0f0;
  background-size: 4px 4px;*/

  box-shadow: 6px 6px 3px rgba(0,0,0,0.4);
}


.lesson-nav {
	background-color: #fff;
	background-image: 
		linear-gradient(to bottom, #d0e1ff 1px, transparent 1px);
	background-size: 100% 10px; /* lignes espacées de 24px */
  margin-top: .5em;  
	padding-top: 10px;
	padding-bottom: 10px;  
	padding-left: 10px;    
	padding-right: 10px;      
	color: #333;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border-top: 2px solid #88b;
	border-bottom: 2px solid #88b;
}

.lesson-nav ul {

  	background-color: #fdfbf7; /* ton ivoire clair, papier beaux-arts */
	background-image:
		repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 3px, transparent 3px, transparent 12px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.02) 0px, rgba(0, 0, 0, 0.02) 3px, transparent 3px, transparent 12px);
	background-size: 24px 24px;
	box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.06); 
  
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1em;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000;

}

.lesson-nav a {
	color: #0055aa;
	text-decoration: none;
	font-weight: bold;
}

.lesson-nav a:hover {
	color: #0055aa;
	text-decoration: underline;
}

.lesson-content {

  display: flex;
  padding: 0.5em;
	padding-top: 0.2em;
  
  margin-right: .5em;    
  margin-top: 1.1em;
  margin-left: 0.5em;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #cccccc;    
  border-left: 10px solid #aacccc; 
  font-size: 1.2em;
  align-items: top;   /* Centre verticalement si hauteur différente */

 	box-shadow: 8px 10px 3px 1px rgba(0, 0, 0, 0.6);     

}

.lesson-content .text {
    flex: 1 1 100px;       Texte prend l’espace restant, minimum 300px
    min-width: 300px;      
	  margin-top: -0.4em;        
 }  

.lesson-content .image {
  flex: 0 0 40%;         /* Image prend 40% fixe */
  max-width: 40%;
}

.lesson-content .image img {
    max-width: 70%;     
    width: 100%;
    height: auto;
    display: block;      
    margin-left: 1em;    
    border: 1px solid #888;
    background-color: #e3edfc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

	  box-shadow: 3px 2px 3px 1px rgba(0, 0, 0, 1);           
}

.lesson-content .image img:hover {
  transform: scale(1.8);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

/* Pied de page */
footer {
	text-align: center;
	padding: 1em;
	background-color: #eee;
	color: #555;
	border-top: 1px solid #000000;
	margin-top: 2em;
	margin-left:5px;  
  margin-right:5px;
}


.lesson-content .text p::first-letter {

  font-size: 3em;
  border: 1px solid black;
  padding:3px;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 8px;
  color: darkred;
    background-color: rgb(200,200,255);  
  font-family: "Times New Roman", serif;
  text-shadow: 
    1px 1px 0 gold, 
   -1px -1px 0 gold, 
    1px -1px 0 gold, 
   -1px 1px 0 gold;
  	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);       
}

.lesson-content.piece {

    position: relative; /* nécessaire pour positionner le ::before */


  padding-left: 2.8em;
  margin-left: 1.0em;    
  margin-right: 2.0em;  

  border-left: 25px solid rgba(0, 200,255, 1);
  border-right: 5px solid rgba(100, 200,255, 1);  
  border-top: 2px solid rgba(100, 200,255, 1);    
  border-bottom: 2px solid rgba(100, 200,255, 1);
  border-radius: 0.1em 5px 5px 1.5em;    

background-color: #fffdf6; 

  background-image: linear-gradient(
    to right,
    transparent 0px,
    transparent 20px,
    rgba(200,0,0) 20px,
    rgba(200,0,0) 22px,
    transparent 22px
  ),linear-gradient(to bottom, #d0e1ff 1px, transparent 2px);





  background-size: 100% 24px;  /* distance entre les lignes */

}
.lesson-content.piece::before {
    content: "🎵";

    position: absolute;    

    left: -10px;         /* décale sur la bordure */
    top: 13px;  

    font-size: 38px;
    margin-right: 10px;
    border: solid 1px;   
    background-color: rgb(255,255,235);    
    align-self: flex-start;
    box-shadow: 4px 6px 1px rgba(0, 0, 0, 0.6);        
}