body { font-family: Arial, sans-serif; margin: 20px; }
        
.form-row { margin-bottom: 10px; }
label { display: inline-block; width: 120px; }
input[type="number"], input[type="text"] { width: 120px; padding: 4px; }
button { padding: 6px 12px; border-radius:15px; border-width:1px; background:#f0f7f7; cursor:pointer;}
 #resultat { margin-top: 20px; padding: 10px; border: 1px solid #ccc; background: #f7f7f7; display: none; }
 #erreur   { margin-top: 20px; color: #b00000; font-weight: bold; display: none; }
 
 /*------ Display DIV Affichage CSV ------*/
.container_csv { display:flex; align-items:stretch; width:100%; height:100%; }
.content_col1  { white-space:normal; overflow-x:hidden; }
.content_col2  { flex:1;  overflow-x:hidden; overflow-y:hidden; width:100%; }

/*------ Graphique CSV  -----------------*/
#chart-container { position:relative; width:100%; height:100%; }        
#csvChart 		 { width:100%; height:100%; }  
     
#info-wrapper 	 { position:absolute; top:10px; right:10px; }      
            
#info-icon 		 { width:24px; height:24px; background-color:#fff; border:1px solid #fff; border-radius:50%;
                   cursor:pointer; z-index:10;
                   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='8'/><line x1='12' y1='12' x2='12' y2='16'/></svg>");
                   background-repeat:no-repeat; background-position:center; background-size:24px; transition: background-color 0.2s ease;
            	 }
            
#info-icon:hover { background-color: #f9f9c3; }
        
.shortcut-popup  { display:none; position:absolute; top:30px; right:10px;
    			   background-color:white; border:1px solid #ccc; padding:6px 8px; border-radius:5px; box-shadow:0 0 8px rgba(0, 0, 0, 0.2);
    			   font-size: 11px; z-index: 20; width: max-content; max-width: 320px; line-height: 1.8; }
            
#info-wrapper:hover .shortcut-popup { display: block; }
#shortcut-popup strong { display: block; margin-bottom: 4px; font-weight: bold; }

.shortcut-grid 	 	{ display: grid; grid-template-columns: max-content max-content max-content auto; gap: 2px 5px; align-items: center; font-size: 10px; }
.shortcut-grid div 	{ display: flex; align-items: center; padding: 0px 0px; }
.shortcut-grid kbd 	{ background-color:#eee; border:1px solid #ccc; border-radius:3px; padding:1px 4px; font-family:monospace; margin:0px 0px; line-height: 1.2; }