* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
   user-select: none;
}

html {
    scroll-behavior: smooth;
    min-height: 100vh;
    min-height: 100dvh;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
}

body {
	 font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    background: black;
    color: black;
	 min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
	 /*padding-top: env(safe-area-inset-top); */
	 /*padding-bottom: env(safe-area-inset-bottom); */
	 /*padding-left: env(safe-area-inset-left); */
	 /*padding-right: env(safe-area-inset-right); */
}
		
.container {
    max-width: none;           /* Supprime limite 1280px */
    margin: 0;                 /* Supprime marges auto */
    overflow: visible;
    background: black;
    /*border-radius: 14px;*/
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

		
/* === LAYOUT PRINCIPAL MANQUANT === */
.main-content {
    /* Styles de base uniquement */
    width: 100%;
    flex: 1;
}


.section {
	 /*background: linear-gradient(135deg, #f8f9fa, #c8c9ca,#d8d9da, #e8e9ea ,#c8c9ca,#c8c9ca, #e8e9ea , #c8c9ca, #c8c9ca 100%);*/
	 background: linear-gradient(90deg, #cacaca, #efefef, #cacaca, #cacaca, #cacaca 100%);
    background-attachment: fixed;
   /*border-radius: 14px;*/
    margin-top: 5px;
    padding: 5px;
    /*border-right: 0px solid #aFaBa5;*/
    /*border-bottom: 0px solid #aFaBa5;*/
    /*box-shadow: 0px 4px 4px rgba(0,0,0,0.8);*/
	 contain: content;
}


.section h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 5px;
}

.section h2::before {
    margin-right: 10px;
    font-size: 1.5rem;
}

.section h2.moteur::before { content: "🔧"; }
.section h2.chaine::before { content: "⚙️"; }
.section h2.carburant::before { content: "⛽"; }
.section h2.circuit::before { content: "🏁"; }
.section h2.pilotage::before { content: "🏎️"; }
.section h2.masses::before { content: "⚖️"; }
.section h2.pressions::before { content: "🛞"; }
.section h2.resultats::before { content: "📊"; }
.section h2.comparaison::before { content: "⚙️"; }
.section h2.previsions::before { content: "🌤"; }
.section h2.sauvegarde::before { content: "💾"; }
.section h2.timing::before { content: "⏱️"; }


.section-content {
	 flex: 1;
	 overflow-y: auto;
	 padding: 10px;
}

/* Pour gérer les très grandes sections (plus de 2 écrans) */
.section.large-content {
	 max-height: none;
	 scroll-snap-align: start;
	 /* Créer des points de snap intermédiaires */
}

.section-part {
	 min-height: 100vh;
	 scroll-snap-align: start;
	 padding: 20px;
}

H3 {
	margin-bottom: 15px; 
}

H4 {
	margin-top: 8px; 
	margin-bottom: 5px; 
	font-size: 1rem;
	text-align: center;
}

hr {
    margin-top: 8px;
    margin-bottom: 5px;
	 border: none;
    border-top: 1px solid #777;
}

.input-group label {
	text-align: center;
	display: block;
   font-weight: bold;
	color: #333;
	font-size: 0.85rem;
	vertical-align: middle;
}

/* === style principal pour les input groups */
.input-group input, .input-group select {
	width: 100%;
	border: 2px solid #888;
	border-radius: 5px;
	transition: border-color 0.3s, box-shadow 0.3s;
	background: white;
	padding: 5px;
	margin-bottom: 2px;
	margin-top: 2px;
}

.input-group input:focus, .input-group select:focus {
	outline: none;
	border-color: #F63;
}

.input-group input:disabled,
.input-group select:disabled {
    background-color: #DDD; 
	 border: 2px solid #444;
    color: #505050; 
    cursor: not-allowed;
    opacity: 1;
 	 font-style: italic;
}

.input-group {
    position: relative;
}

.input-group .default-reset-icon {
    position: absolute;
	 left: 50%;
    top: 65%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 30px;
    color: #F66;
    z-index: 10;
    user-select: none;
}

.input-group:hover .default-reset-icon {
    opacity: 0.6;
}

.input-group .default-reset-icon:hover {
    opacity: 1;
    color: #cc0000;
}

.input-group-small {
	width: 50%;
	margin: 0 auto;
}

/* === style pour les valeurs par défaut type "Auto (xxx) */
::placeholder {
    color: #888; 
 	 font-style: italic;
}

input:disabled::placeholder {
    color: #444; 
 	 font-style: italic;
}


input[type="checkbox"] {                          
    width: auto !important;                       
    height: auto !important;                      
    display: inline-block !important;             
    margin: 0 5px 0 0 !important;                /* Réduit la marge droite */
    accent-color: #FF6B35;                        
    transform: scale(1.2);                        /* Retire translateY qui décale */
    vertical-align: middle !important;
}

/* Style pour les labels de checkbox */
input[type="checkbox"] + label {
    display: inline !important;
    vertical-align: middle !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;                   /* Force pas de marge gauche */
    line-height: 1.4;
    cursor: pointer;
}

/* Container simple pour les checkbox */
.input-group:has(input[type="checkbox"]) {
    display: block !important;                   /* Revenir à block */
    line-height: 1.4;
}

/* Espacement spécifique pour circuit-auto-update */
#auto-temp-piste {
    margin-top: 20px !important;
}

/* Ajouter aussi un peu d'espace au container */
input[type="checkbox"]#auto-temp-piste + label {
    margin-top: 20px !important;
}

.input-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row-center {
	 display : flex;
    grid-template-columns: minmax(0, 1fr)  !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
}
.input-row3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)  minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row23 {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.input-row32 {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.input-row919 {
    display: grid !important;
    grid-template-columns: minmax(0, 9fr) minmax(0, 1fr) minmax(0, 9fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
}

.input-row332 {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row323 {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.input-row21 {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.input-row52 {
    display: grid !important;
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row322 {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr)  minmax(0, 2fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    /*margin-top: 5px !important;*/
    /*margin-bottom: 10px !important;*/
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row223 {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr)  minmax(0, 3fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    /*margin-top: 5px !important;*/
    /*margin-bottom: 10px !important;*/
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row232 {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr)  minmax(0, 2fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    /*margin-top: 5px !important;*/
    /*margin-bottom: 10px !important;*/
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row211 {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr)  minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    /*margin-top: 5px !important;*/
    /*margin-bottom: 10px !important;*/
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row112 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)  minmax(0, 2fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    /*margin-top: 5px !important;*/
    /*margin-bottom: 10px !important;*/
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row133 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr)  minmax(0, 3fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    /*margin-top: 5px !important;*/
    /*margin-bottom: 10px !important;*/
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.input-row2323 {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    /*margin-top: 5px !important;*/
    /*margin-bottom: 10px !important;*/
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.input-row13 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important;
    grid-auto-rows: auto !important;
    gap: 5px !important;
    /*margin-top: 5px !important;*/
    /*margin-bottom: 10px !important;*/
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}


.etat-asphalte-grid {
   display: grid !important;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) !important;
   gap: 5px !important;
   width: 100% !important;
   box-sizing: border-box !important;
   transition: grid-template-columns 0.2s ease !important;
}
.etat-asphalte-grid.sel-0 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
.etat-asphalte-grid.sel-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
.etat-asphalte-grid.sel-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) !important; }
.etat-asphalte-grid.sel-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) !important; }
.etat-asphalte-card {
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 12px 4px !important;
   min-height: 60px !important;
   cursor: pointer !important;
   border-radius: 4px !important;
   box-sizing: border-box !important;
   user-select: none !important;
}
.etat-asphalte-card .etat-asphalte-label {
   color: #fff !important;
   font-size: 0.85em !important;
   text-shadow: 0 0 3px rgba(0,0,0,0.7) !important;
}
.etat-asphalte-card.selected .etat-asphalte-label {
   font-weight: bold !important;
}
.etat-asphalte-card .etat-asphalte-albedo {
   color: #fff !important;
   font-size: 0.75em !important;
   opacity: 0.85 !important;
   text-shadow: 0 0 3px rgba(0,0,0,0.7) !important;
   margin-top: 2px !important;
}





/* Section Circuit - Google Maps */
#map-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background: #e0e0e0;
}

#map {
    cursor: grab;
}

#map:active {
    cursor: grabbing;
}

/* Empêcher le conflit de scroll avec la page */
#map-container {
    touch-action: none; /* Désactive le scroll de page sur la carte */
}





/* Styles pour champs grisés sauvegarde */
#sauvegarde-nom-pilote-display,
#sauvegarde-circuit-display {
    background-color: #f5f5f5 !important;
    color: #666 !important;
    cursor: not-allowed !important;
    border-color: #999 !important;
}		 
 
 
 


/* Styles pour champ de recherche avec icône */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon input {
    width: 100% !important;
    padding-right: 35px !important;
}

.search-icon {
    position: absolute;
    right: 10px;
    color: #999;
    pointer-events: none;
    font-size: 16px;
}



	#circuit-preset {
		 max-width: 400px;
		 font-size: 0.9rem;
		 overflow: hidden;
	}

	#circuit-preset option {
		 white-space: nowrap;
		 overflow: hidden;
		 text-overflow: ellipsis;
	}

	/* Menu Hamburger */
	.menu-hamburger {
		 position: fixed;
       opacity: 0.4;
		 top: calc(15px + env(safe-area-inset-top));
		 right: calc(15px + env(safe-area-inset-right));
		 z-index: 1000;
		 width: 50px;
		 height: 50px;
		 background: linear-gradient(135deg, #FF6B35, #F7931E);
		 border-radius: 50%;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 cursor: pointer;
		 box-shadow: 0 4px 10px rgba(0,0,0,0.3);
		 transition: transform 0.3s;
       will-change: transform;
	}

	.menu-hamburger:hover {
		 transform: scale(1.1);
	}

	.menu-hamburger span {
		 display: block;
		 width: 25px;
		 height: 3px;
		 background: white;
		 margin: 5px 0;
		 transition: 0.3s;
	}

	.menu-hamburger.active span:nth-child(1) {
		 transform: rotate(45deg) translate(7px, 7px);
	}

	.menu-hamburger.active span:nth-child(2) {
		 opacity: 0;
	}

	.menu-hamburger.active span:nth-child(3) {
		 transform: rotate(-45deg) translate(7px, -7px);
	}


	/* Menu Navigation */
.nav-menu {
     position: fixed;
     top: 0;
     right: -350px;
     width: 350px;
	  height: 100vh;
	  height: 100dvh;
     background: linear-gradient(135deg, #667eea, #664ba2);
     transition: right 0.3s ease;
     z-index: 1000;
     overflow-y: auto;
     box-shadow: -5px 0 20px rgba(0,0,0,0.3);
     -webkit-overflow-scrolling: touch;
     padding-bottom: 80px;
	  /*padding-top: env(safe-area-inset-top); */
	  
}
	
.nav-menu ul {
     list-style: none;
     padding: 0;
     margin: 0;
}

	.nav-menu.active {
		 right: 0;
	}

	.nav-menu h3 {
		 color: white;
		 padding: 6px;
		 margin: 0;
		 background: rgba(0,0,0,0.2);
		 font-size: 1.3rem;
	}


	.nav-menu li {
		 border-bottom: 1px solid rgba(255,255,255,0.1);
	}

	.nav-menu a {
		 display: flex;
		 align-items: center;
		 color: white;
		 text-decoration: none;
		 padding: 12px 12px;
		 transition: background 0.3s;
		 font-size: 1rem;
		 font-weight: bold;
	}

	.nav-menu a:hover {
		 background: rgba(255,255,255,0.1);
	}

	.nav-menu a::before {
		 margin-right: 10px;
		 font-size: 1.2rem;
	}

	.nav-menu .nav-accueil::before { content: "🏁"; }
	.nav-menu .nav-pilote::before { content: "👤"; }
	.nav-menu .nav-meteo::before { content: "🌤️"; }
	.nav-menu .nav-previsions::before { content: "🌤️"; }
	.nav-menu .nav-circuit::before { content: "🏁"; }
	.nav-menu .nav-masses::before { content: "⚖️"; }
	.nav-menu .nav-carburation::before { content: "🔧️"; }
	.nav-menu .nav-moteur::before { content: "🔧️"; }
	.nav-menu .nav-chaine::before { content: "⚙️"; }
	.nav-menu .nav-pressions::before { content: "🛞"; }
	.nav-menu .nav-carburant::before { content: "⛽"; }
	.nav-menu .nav-resultats::before { content: "📊"; }
	.nav-menu .nav-comparaison::before { content: "⚙️"; }
	.nav-menu .nav-timer::before { content: "⏱️"; }
	.nav-menu .nav-timing::before { content: "⏱️"; }
	.nav-menu .nav-check::before { content: "✅️"; }
	.nav-menu .nav-parametres::before { content: "⚙"; }

	/* Overlay pour fermer le menu */
	.menu-overlay {
		 position: fixed;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
		 background: rgba(0,0,0,0.5);
		 z-index: 998;
		 display: none;
	}

	.menu-overlay.active {
		 display: block;
	}

  .refresh-btn {
		position: fixed;
		top: 20px;
		right: 20px;
		background: linear-gradient(45deg, #FF6B35, #F7931E);
		color: white;
		border: none;
		padding: 12px 20px;
		border-radius: 25px;
		font-weight: bold;
		cursor: pointer;
		z-index: 1000;
		box-shadow: 0 4px 15px rgba(0,0,0,0.3);
		transition: border-color 0.3s, box-shadow 0.3s;
		font-size: 14px;
  }
  
  .refresh-btn:hover {
		transform: scale(1.05);
		box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  }
  
  .version-info {
		position: absolute;
		top: 10px;
		left: 10px;
		background: rgba(0,150,0,0.2);
		padding: 5px 5px;
		border-radius: 15px;
		font-size: 0.8rem;
		color: #006600;
		font-weight: bold;
  }
  
/*  .header {                                                          */
/*		background: linear-gradient(45deg, #FF6B35, #F8a32E);            */
/*		color: white;                                                    */
/*		padding: 5px;                                                    */
/*		text-align: center;                                              */
/*  }                                                                  */
/*                                                                     */
/*  .header h1 {                                                       */
/*		font-size: 2rem;                                                 */
/*		margin-bottom: 5px;                                              */
/*  }                                                                  */
/*                                                                     */
/*  .header p {                                                        */
/*		opacity: 0.9;                                                    */
/*		font-size: 1rem;                                                 */
/*  }                                                                  */

/* Header comme section swipeable */
.header-section {
    background: linear-gradient(0deg, #FF6B35, #EF6C25, #EF6C25, #FFF3FE, #FFFFFF, #FFFFFF) !important;
    color: black !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.header-content h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.header-content p {
    margin: 10px 0;
    opacity: 0.9;
    font-size: 1.1rem;
}

.header-content a {
    color: black;
    text-decoration: none;
	 font-size: 0.8rem;

}

.header-content a:hover {
    font-weight: bold;
}  
  
/* Styles CSS pour les sous-sections */
.blue-subsection {
	background: linear-gradient(135deg, #e3f2fd 0%, #f1f8ff 100%) !important;
	border: 3px solid #8baefb;
	border-radius: 10px;
	padding: 5px;
	margin-bottom : 5px;
	margin-top : 8px;
	color: #333;
}
  
.green-subsection {
	background: #e8f5e8;
	border: 2px solid #28a745;
	border-radius: 10px;
	padding: 5px;
	margin-bottom : 5px;
	margin-top : 8px;
}
.red-subsection {
	background: #f5e8e8;
	border: 2px solid #a72845;
	border-radius: 10px;
	padding: 5px;
	margin-bottom : 5px;
	margin-top : 8px;
}

.orange-subsection {
   background: #fdf2e6;
   border: 2px solid #e67e22;
   border-radius: 10px;
   padding: 5px;
   margin-bottom : 5px;
   margin-top : 8px;
	font-size : 1rem;
}

.pressure-help {
	font-size: 0.85rem;
	color: #666;
	margin-top: 5px;
	font-style: italic;
}
  
.diagram {
	 padding: 10px 5px;
	 overflow-x: auto;
	 max-width: 100%;
}
			  

  .kart-view {
		position: relative;
		width: 390px;
		height: 550px;
		margin: 0 auto;
		background: rgba(0,0,0,0.05);
		border-radius: 20px;
		padding: 10px;
  }
  
  .kart-chassis {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 350px;
		display: flex;
		align-items: center;
		justify-content: center;
  }
  
  .kart-chassis img {
		width: 100%;
		height: 100%;
		object-fit: contain;
  }

  /* --- Mise à l'échelle du schéma kart sur mobile ---
     .kart-view = largeur fixe 390px + coins débordants (~430px réels) >
     viewport téléphone => débordait horizontalement.
     zoom (et NON transform: scale) réduit aussi l'empreinte de mise en page :
     la boîte ne réserve plus une largeur > écran, donc plus de débordement.
     zoom met à l'échelle depuis le haut/centre => bloc centré et ancré en haut
     sans transform-origin ni marge négative.
     Support : Baseline 2024 (Chrome, Edge, Safari, Firefox >= 126, Android). */
  @media (max-width: 480px) {
     .kart-view {
        zoom: 0.9;
     }
  }
  
  .main-value {
		font-size: 1.6rem;
		font-weight: bold;
		margin-bottom: 3px;
  }
  
  .sub-value {
		font-size: 1.2rem;
  }

	
	/* Positionnement des pneus froids (existants - vérifier qu'ils sont bien présents) */
	.front-left { top: 100px; left: 22px; }
	.front-right { top: 100px; right: 22px; }
	.rear-left { bottom: 57px; left: 5px; width: 85px; height: 90px;}
	.rear-right { bottom: 57px; right: 5px; width: 85px; height: 90px;}




	.help-btn {
		 display: inline-flex;
		 align-items: center;
		 justify-content: center;
		 width: 22px;
		 height: 22px;
		 margin-left: 12px;
		 background: linear-gradient(45deg, #FF6B35, #F7931E);
		 border-radius: 50%;
		 text-decoration: none;
		 font-size: 14px;
		 transition: border-color 0.3s, box-shadow 0.3s;
		 box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}

	.help-btn:hover {
		 transform: scale(1.1);
		 box-shadow: 0 3px 10px rgba(255, 107, 53, 0.4);
	}
  
  .info-panel {
		background: #ecf0f1;
		padding: 15px;
		border-radius: 10px;
		margin-top: 15px;
  }
  
  .info-row {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin-bottom: 8px;
		font-size: 0.9rem;
  }

  
  .info-row:last-child {
		margin-bottom: 0;
  }
  
  .info-label {
      font-weight: bold;
		color: #333;
		flex: 0 0 auto;
		margin-right: 10px;
  }
  
  .info-value {
		font-weight: bold;
		color: #3c3c3c;
		text-align : right;
		flex: 0 0 auto;
		margin-left: auto; 
  }
 .info-value-red {
		font-weight: bold;
		color: #e74c3c;
		text-align : right;
		flex: 0 0 auto;
		margin-left: auto; 
  }
   .info-value-orange {
		font-weight: bold;
		color: #EC5C23;
		text-align : right;
		flex: 0 0 auto;
		margin-left: auto; 
  } 
.info-value-long {
    flex: 1;                    /* Prend l'espace disponible */
 	 color: #e74c3c;
    word-wrap: break-word;      /* Force la coupure des mots longs */
    overflow-wrap: break-word;  /* Support moderne */
    white-space: normal;        /* Permet les retours à la ligne */
    max-width: 350px;          /* Limite la largeur */
    text-align: right;         /* Garde l'alignement à droite */
}
  
 .info-unit {
    margin-left: 5px;           /* Rapproche de la valeur */
    font-size: 0.85em;          /* Réduit la taille */
    color: #666;                /* Couleur plus discrète */
    white-space: nowrap;        /* Évite les retours à la ligne */
    min-width: auto;            /* Supprime la largeur minimale */
    flex: 0 0 auto;            
}






 
  .results {
		grid-column: 1 / -1;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border-radius: 15px;
		padding: 25px;
		margin-top: 20px;
  }
  
  .results h2 {
		text-align: center;
		color: #333;
		margin-bottom: 25px;
		font-size: 1.8rem;
		border-bottom: 2px solid rgba(255,255,255,0.3);
		padding-bottom: 15px;
  }
  

  
  
  .comparison-table {
		grid-column: 1 / -1;
		overflow-x: auto;
		background: white;
		border-radius: 12px;
		box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
  
  .comparison-table h2 {
		color: #333;
		text-align: center;
		padding: 15px;
		margin: 0;
		border-bottom: 2px solid #ecf0f1;
  }
  
  .comparison-table table {
		width: 100%;
		border-collapse: collapse;
  }
  
  .comparison-table th, .comparison-table td {
	   padding: 6px 10px;
		text-align: center;
		border-bottom: 1px solid #eee;
  }
  
  .comparison-table th {
		background: #2c3e50;
		color: white;
      font-weight: bold;
		text-transform: uppercase;
		font-size: 0.7rem;
		letter-spacing: 0.5px;
  }
  
  .comparison-table tr:hover {
		background: #f8f9fa;
  }
  
  .comparison-table td {
	  font-size: 1.1rem;
  }  
  
  .comparison-table .tdsmall {
	  font-size: 0.8rem;
  }  
 
  
  .optimal {
		background: #d4edda !important;
		font-weight: bold;
  }
  
  .alert {
		background: #fff3cd;
		border: 1px solid #ffeaa7;
		color: #856404;
		padding: 15px;
		border-radius: 8px;
		margin: 10px 0;
		font-size: 0.9rem;
		display: flex;
		align-items: center;
  }
  
  .alert::before {
		margin-right: 10px;
		font-size: 1.2rem;
  }
  
  .alert.warning::before { content: "⚠️"; }
  .alert.info::before { content: "ℹ️"; }
  .alert.success::before { content: "✅"; }
  
  .carburation-results {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 15px;
		margin: 15px 0;
  }
  
  .carb-gicleur {
		background: linear-gradient(135deg, #FFA200, #AD6A00);
		color: white;
		padding: 15px;
		border-radius: 12px;
		text-align: center;
	 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
		transition: border-color 0.3s, box-shadow 0.3s;
  }
  
  .carb-card {
		background: linear-gradient(135deg, #e74c3c, #c0392b);
		color: white;
		padding: 15px;
		border-radius: 12px;
		text-align: center;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
		transition: border-color 0.3s, box-shadow 0.3s;
  }
  
  .main-jet-card {
		background: linear-gradient(135deg, #f39c12, #e67e22);
		grid-column: span 2;
  }
  
  .carb-gicleur:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
  }
  
	.carb-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
  }
  
  .carb-label {
		color: white;
		font-size: 0.8rem;
		margin-bottom: 8px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.5px;
  }
  
  .carb-value {
		font-size: 1.8rem;
		font-weight: bold;
		margin-bottom: 5px;
		color: #FFE066;
  }
  
  .carb-detail {
		color: white;
		font-size: 0.8rem;
  }
  
  .carburation-info {
		background: #fff5f5;
		border: 1px solid #fed7d7;
		border-radius: 8px;
		padding: 15px;
		margin-top: 15px;
  }
  
  .carb-conditions {
		font-size: 0.9rem;
  }
  
  .condition-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
  }
  
  .condition-item:last-child {
		margin-bottom: 0;
  }
  
  .condition-label {
		font-weight: bold;
		color: #2c3e50;
  }
  
  .condition-value {
		color: #e74c3c;
		font-weight: bold;
  }
  
  .atmo-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 15px;
		margin-bottom: 15px;
  }

  .atmospheric-main-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }      

  .infos-small {
		font-size: 0.7rem;
		margin-bottom: 10px;
		text-align: center;
  }

  .atmo-card {
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		font-size: 1rem;
		padding: 7px;
		border-radius: 6px;
		text-align: center;
		box-shadow: 0 3px 10px rgba(0,0,0,0.2);
		transition: border-color 0.3s, box-shadow 0.3s;
  }
  
  .atmo-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  }
  
.atmo-card .atmo-label {
		color: #FFF;
		font-size: 1rem;
		margin-bottom: 4px;
		font-weight: bold;
  }

.atmo-card .atmo-value {
		font-size: 1.7rem;
		font-weight: bold;
		margin-bottom: 4px;
		color: #FFEE66;
  }
  
  .atmo-card .atmo-unit {
		font-size: 0.9rem;
		color: #FFF;
  }


.map-container {
	width: 95%; 
	height: 400px;
	margin: 0 auto;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 10px;
}



@keyframes bounce {
	 0%, 20%, 50%, 80%, 100% {
		  transform: translateX(-50%) translateY(0);
	 }
	 40% {
		  transform: translateX(-50%) translateY(-10px);
	 }
	 60% {
		  transform: translateX(-50%) translateY(-5px);
	 }
}


/* Option : Pagination visuelle */
.page-dots {
	 position: fixed;
	 right: 20px;
	 top: 50%;
	 transform: translateY(-50%);
	 z-index: 997;
	 display: flex;
	 flex-direction: column;
	 gap: 10px;
}

.page-dot {
	 width: 12px;
	 height: 12px;
	 border-radius: 50%;
	 background: rgba(255, 107, 53, 0.3);
	 cursor: pointer;
	 transition: border-color 0.3s, box-shadow 0.3s;
}

.page-dot.active {
	 background: #FF6B35;
	 transform: scale(1.3);
}

		  
.meteo-locale-btn {
	 background: linear-gradient(135deg, #21a6f3 0%, #1976d2 100%);
	 margin-top: 10px;
	 color: white;
	 border: none;
	 padding: 12px 20px;
	 border-radius: 6px;
	 font-size: 14px;
 	 font-weight: bold;
	 cursor: pointer;
 	 transition: border-color 0.3s, box-shadow 0.3s;
	 box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
	 width: 100%;
	 max-width: 250px;
	 min-height: 60px;
}

.meteo-locale-btn:hover:not(:disabled) {
	 background: linear-gradient(135deg, #1976d2 0%, #1565a0 100%);
	 box-shadow: 0 4px 8px rgba(33, 150, 243, 0.4);
	 transform: translateY(-1px);
}

.meteo-locale-btn:disabled {
	 background: #9e9e9e;
	 cursor: not-allowed;
	 transform: none;
	 box-shadow: none;
}


.live-timing-btn {
    background: linear-gradient(135deg, #dc1c1c 0%, #8b0000 100%);
    margin-top: 10px;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
	 font-weight: bold;
    cursor: pointer;
 	 transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(220, 28, 28, 0.4);
    width: 100%;
    max-width: 250px;
    min-height: 60px;
    text-align: center;
}

.live-timing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 28, 28, 0.5);
}


.live-timing-btn-vert {
    background: linear-gradient(135deg, #00d084 0%, #00a86b 100%);
    margin-top: 10px;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
	 font-weight: bold;
    cursor: pointer;
	 transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 208, 132, 0.4);
    width: 100%;
    max-width: 250px;
    min-height: 60px;
    text-align: center;
}

.live-timing-btn-vert:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 208, 132, 0.6);
}



.meteo-status {
	 margin-top: 10px;
	 font-size: 13px;
	 line-height: 1.4;
}

.status-info {
	 color: #1976d2;
	 font-weight: bold;
}

.status-success {
	 color: #388e3c;
	 font-weight: bold;
}

.status-error {
	 color: #d32f2f;
	 font-weight: bold;
}

.location-info {
	 margin-top: 8px;
	 padding: 8px;
	 background: rgba(76, 175, 80, 0.1);
	 border-radius: 4px;
	 font-size: 12px;
	 color: #2e7d32;
}

.error-help {
	 margin-top: 8px;
	 padding: 8px;
	 background: rgba(255, 193, 7, 0.1);
	 border-radius: 4px;
	 font-size: 12px;
	 color: #f57c00;
}


/* Style pour la masselotte 	avant */
.reservoire {
	 position: absolute;
	 top: 100px; /* Au niveau des roues arrières */
	 left: 50%;
	 padding: 10px;
	 transform: translateX(-50%); /* Centré horizontalement */
	 width: 85px;
	 height: 85px;
	 background: linear-gradient(135deg, #f4985b, #f98059);
	 color: white;
	 border: 3px solid #7F0000;
	 border-radius: 8px;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 font-weight: bold;
	 font-size: 0.8rem;
	 text-align : center;
	 box-shadow: 0 3px 10px rgba(0,0,0,0.2);
	 transition: border-color 0.3s, box-shadow 0.3s;
	 z-index: 1000;
}

.reservoire:hover {
	 transform: translateX(-50%) scale(1.7);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* Style pour la masselotte du baquet */
.baquet-masselotte {
	 position: absolute;
	 bottom: 155px; /* Au niveau des roues arrières */
	 left: 50%;
	 transform: translateX(-50%); /* Centré horizontalement */
	 width: 80px;
	 height: 50px;
	 background: linear-gradient(135deg, #cce, #aac);
	 color: white;
	 border: 2px solid #2c3e50;
	 border-radius: 8px;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 font-weight: bold;
	 font-size: 0.8rem;
	 box-shadow: 0 3px 10px rgba(0,0,0,0.2);
	 transition: border-color 0.3s, box-shadow 0.3s;
	 z-index: 1000;
}

.baquet-masselotte:hover {
	 transform: translateX(-50%) scale(2);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.baquet-label {
	 font-size: 0.7rem;
	 margin-bottom: 2px;
	 text-transform: uppercase;
}

.baquet-value {
	 font-size: 1rem;
	 font-weight: bold;
}

.notes-section {
	 margin-top: 5px;
	 width: 100%;
}

.notes-section .input-group {
	 margin-bottom: 0; /* Supprime la marge du bas pour coller à la fin de section */
}

.notes-section label {
	 display: block;
	 margin-bottom: 8px;
	 font-weight: bold;
	 color: #555;
	 font-size: 0.9rem;
}



/* Style pour la masselotte 	avant */
.numero-avant {
	 position: absolute;
	 top: 90px; /* Au niveau des roues avant */
	 left: 50%;
	 padding: 10px;
	 transform: translateX(-50%); /* Centré horizontalement */
	 width: 85px;
	 height: 85px;
	 background: transparent;
	 color: black;
	 border: 0px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 font-weight: bold;
	 font-size: 1.7rem;
	 text-align : center;
	 z-index: 1;
}


.numero-arriere {
	 position: absolute;
	 bottom: 1px; 
	 left: 50%;
	 padding: 3px;
	 transform: translateX(-50%); /* Centré horizontalement */
	 width: 85px;
	 background: transparent;
	 color: black;
	 border: 0px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 font-weight: bold;
	 font-size: 1.5rem;
	 text-align : center;
	 z-index: 1;
}

.transpondeur-display {
   position: absolute;
   top: 400px;
	height:40px;
	left: 50%;
	transform: translateX(-50%); /* Centré horizontalement */
   background: #FFD700;
   color: black;
   border: 3px solid #B8960C;
   border-radius: 7px;
   padding: 2px 2px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
   font-weight: bold;
   font-size: 0.7rem;
   z-index: 2;
   white-space: nowrap;
   box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.transpondeur-led {
   width: 8px;
   height: 8px;
   border: 1px solid #000;
   border-radius: 50%;
   flex-shrink: 0;
}

.transpondeur-led.ok {
   background: #00DD00;
   animation: blink-green 0.8s infinite;
}

.transpondeur-led.erreur {
   background: #FF0000;
   animation: blink-red 0.6s infinite;
}

.transpondeur-display:hover {
	 transform: translateX(-50%) scale(2);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
	 z-index: 2000;
}

@keyframes blink-green {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
}

@keyframes blink-red {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.1; }
}



#notes-pilote {
	 width: 100%;
	 min-height: 80px;
	 max-height: 200px;
	 padding: 12px;
	 border: 2px solid #999;
	 border-radius: 8px;
	 font-size: 14px;
	 font-family: inherit;
	 line-height: 1.4;
	 resize: vertical; /* Permet redimensionnement vertical seulement */
	 transition: border-color 0.3s, box-shadow 0.3s;
	 background: white;
	 box-sizing: border-box;
}

#notes-pilote:focus {
	 outline: none;
	 border-color: #FF6B35;
	 box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}


#notes-carburateur {
	 width: 100%;
	 min-height: 80px;
	 max-height: 200px;
	 padding: 12px;
	 border: 2px solid #999;
	 border-radius: 8px;
	 font-size: 14px;
	 font-family: inherit;
	 line-height: 1.4;
	 resize: vertical; /* Permet redimensionnement vertical seulement */
	 transition: border-color 0.3s, box-shadow 0.3s;
	 background: white;
	 box-sizing: border-box;
}

#notes-carburateur:focus {
	 outline: none;
	 border-color: #EE6B35;
	 box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

/* Masquage conditionnel des sections transmission (DD2 sans chaîne) */
.masque-transmission {
    display: none !important;
}

/* Style pour le texte d'aide */
.circuit-help-text {
	 font-size: 1rem; 
	 color: #666; 
	 margin-top: 4px; 
	 margin-left: 26px;
	 font-style: italic;
}

.tire-input {
    position: absolute;
    font-size: 0.8rem;
	 /*padding-left:10px;*/
    border-radius: 10px;
    display: flex;
	 z-index: 1000;
	 flex-direction: column;
    align-items: left;
    justify-content: left;
    color: #000;
    font-weight: bold;
	 /*padding : 10px;*/
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
	 transition: border-color 0.3s, box-shadow 0.3s;
    border: 3px solid #555;
	 transform: scale(0.7);
    /* Dégradé bleu-blanc-rouge "frenchy" */
    background: linear-gradient(180deg, #999 0%, #FFFFFF 30%,#FFFFFF 70%, #999 100%);
}


 .tire-input .corner-label {
     font-size: 1.8rem;
     margin-bottom: 2px;
     font-weight: bold;
     text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
 }

/* Bande logo pneu — indicateur de sens de montage */
.logo-strip {
   position: absolute;
   top: 5px;
   bottom: 5px;
   width: 8px;
   border-radius: 1px;
   background-color: #222;
   background-image:
      linear-gradient(to top left, var(--logo-color, #2E8B2E) 50%, transparent 50%),
      linear-gradient(to top right, var(--logo-color, #2E8B2E) 50%, transparent 50%);
   background-size: 50% 20px, 50% 20px;
   background-position: left 0px, right 0px;
   background-repeat: no-repeat;
   animation: logoScroll 1s linear infinite;
   opacity: 0.85;
   display: none;
}

  .corner-label {
		font-size: 0.8rem;
		margin-bottom: 0px;
		font-weight: bold;
  }
  
  .tire-label-blue {
		font-size: 1.3rem;
		margin-bottom: 0px;
		font-weight: bold;
		color: #000077;
		white-space: nowrap;
  }
  
  .corner-label-red {
		font-size: 1rem;
		margin-bottom: 0px;
		font-weight: bold;
		color: #770000;
  } 

.logo-strip.cote-droite {
   right: 2px;
   left: auto;
}

.logo-strip.cote-gauche {
   left: 2px;
   right: auto;
}

@keyframes logoScroll {
   0%   { background-position: left 120px, right 120px; }
   100% { background-position: left -20px, right -20px; }
}



.pressure-input {
    width: 68px;
    height: 26px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    background: rgba(255,255,255,0.95);
	 transition: border-color 0.2s, box-shadow 0.2s;
	 margin-bottom: 5px;

}

.pressure-input:focus {
    outline: none;
    background: white;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.5);
    transform: scale(1.05);
}

.pressure-input.cold {
    border-color: #0055A4;
    background: rgba(0, 85, 164, 0.1);
	 color: #0000CC;
}

.pressure-input.hot {
    border-color: #EF4135;
    background: rgba(239, 65, 53, 0.1);
	 color: #CC0000;
}

.pressure-input.cold:focus {
    box-shadow: 0 0 0 2px rgba(0, 85, 164, 0.4);
}

.pressure-input.hot:focus {
    box-shadow: 0 0 0 2px rgba(239, 65, 53, 0.4);
}

.pressure-input:disabled {
    background-color: #C8C8C8;
    color: #606060;
    cursor: not-allowed;
    font-style: italic;
	 border-color: #444;

}

/* Positionnement des nouvelles cases - SOUS les cases existantes */
.tire-input-front-left { 
    width: 120px;
    height: 140px;
    top: 80px; 
    left: -10px; 
	 padding-left : 5px;
}

.tire-input-front-right { 
    width: 120px;
    height: 140px;
    top: 80px; 
    right: -10px; 
	 padding-left : 5px;
}

.tire-input-rear-left { 
    bottom: 35px; 
    left: -20px; 
	 width: 130px;
    height: 135px;
	 padding-left:15px;
}
.tire-input-rear-right { 
    bottom: 35px; 
    right: -20px; 
	 width: 130px;
    height: 135px;
	 padding-left:15px;
}





.tire-input-front-left:hover { 
    transform: scale(1.6) translate(30%, 25%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.tire-input-front-right:hover { 
    transform: scale(1.6) translate(-30%, 25%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.tire-input-rear-left:hover { 
    transform: scale(1.6) translate(30%, -30%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.tire-input-rear-right:hover { 
    transform: scale(1.6) translate(-30%, -30%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}





/* Labels pour les champs froid/chaud */
.pressure-label {
    font-size: 1rem;
    color: #2c3e50;
	 font-weight: bold;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

.pressure-label.cold {
    color: #0055A4;
}

.pressure-label.hot {
    color: #EF4135;
}

/* Styles pour les champs en lecture seule */
#sauvegarde-nom-pilote-display,
#sauvegarde-circuit-display {
    background-color: #f5f5f5 !important;
    color: #666 !important;
    cursor: not-allowed !important;
    border-color: #999 !important;
}

#graphique-performance {
    border: 1px solid #ddd;
    border-radius: 5px;
    background: white;
    margin: 10px auto;
    display: block;
    width: 100%;
    max-width: 800px;
}

#courbes-performance {
    margin-top: 20px;
    width: 100%;
}

.legende-graphique {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    font-size: 0.9rem;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.color-box {
    width: 15px;
    height: 15px;
    border-radius: 2px;
}

.courbe-puissance {
    background: #FF6B35;
}

.courbe-resistance {
    background: #2E8B57;
}



/* Styles pour la section sauvegarde et restauration */

.sauvegarde-form {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.btn-sauvegarde, .btn-recherche {
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
	 transition: border-color 0.3s, box-shadow 0.3s;
    margin-top: 10px;
}

.btn-sauvegarde:hover, .btn-recherche:hover {
    background: linear-gradient(45deg, #229954, #27ae60);
    transform: translateY(-1px);
}

.recherche-section {
    background: #f1f2f6;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.recherche-section h3 {
    margin-top: 0;
    color: #2c3e50;
    font-size: 1.1rem;
}

.liste-sauvegardes {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: white;
}

.sauvegarde-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.sauvegarde-item:hover {
    background-color: #f8f9fa;
}

.sauvegarde-item:last-child {
    border-bottom: none;
}

.sauvegarde-info {
    flex: 1;
}

.sauvegarde-info .titre {
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 4px;
}

.sauvegarde-info .details {
    font-size: 0.85rem;
    color: #666;
}

.sauvegarde-actions {
    display: flex;
    gap: 8px;
}

.btn-restaurer, .btn-supprimer {
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
	 transition: border-color 0.3s, box-shadow 0.3s;
}

.btn-restaurer {
    background: #3498db;
    color: white;
}

.btn-restaurer:hover {
    background: #2980b9;
}

.btn-supprimer {
    background: #e74c3c;
    color: white;
}

.btn-supprimer:hover {
    background: #c0392b;
}

.aucune-sauvegarde {
    text-align: center;
    color: #666;
    padding: 20px;
    font-style: italic;
}

/* Styles pour les modales de confirmation */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 25px;
    border-radius: 15px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.modal-content h3 {
    margin-top: 0;
    color: #2c3e50;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-confirmer, .btn-annuler {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
	 transition: border-color 0.3s, box-shadow 0.3s;
}

.btn-confirmer {
    background: #27ae60;
    color: white;
}

.btn-confirmer:hover {
    background: #229954;
}

.btn-annuler {
    background: #95a5a6;
    color: white;
}

.btn-annuler:hover {
    background: #7f8c8d;
}



.previsions-info {
    background: #f8f9fa;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.previsions-info p {
    margin: 5px 0;
    font-size: 0.9rem;
}

.previsions-tableau {
    margin-bottom: 10px;
    overflow-x: auto;
}

#tableau-previsions {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.1rem;
}

#tableau-previsions th,
#tableau-previsions td {
    padding: 5px;
    text-align: center;
    border: 1px solid #ddd;
	 font-size: 0.9rem;
}

#tableau-previsions th {
    background: #f8f9fa;
    font-weight: bold;
	 font-size: 0.8rem;
	 vertical-align : top;
}

#tableau-previsions tbody tr:nth-child(even) {
    background: #f9f9f9;
}

#tableau-previsions tbody tr:nth-child(odd) {
    background: #e9e9e9;
}
.previsions-graphique {
    text-align: center;
}

#graphique-previsions {
    border: 1px solid #ddd;
    border-radius: 5px;
    background: white;
    max-width: 100%;
}


/* === BOUTON RAFRAÎCHIR SIMPLIFIÉ === */
.btn-refresh {
    background: linear-gradient(45deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
	 transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.btn-refresh:hover:not(:disabled) {
    background: linear-gradient(45deg, #2980b9, #1f618d);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
}

.btn-refresh:active {
    transform: translateY(0);
}

.btn-refresh:disabled {
    background: #95a5a6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.7;
}

/* Animation plus simple pour Firefox */
.btn-refresh:disabled {
    transition: transform 0.3s ease;
}	


/* === AJOUTER CE CSS pour les tooltips d'icônes météo === */
/* (À ajouter dans calculatrice.css) */

/* Style pour les icônes météo avec tooltip */
.meteo-icon-tooltip {
    font-size: 1.2em;
    cursor: pointer;
    position: relative;
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.2s ease;
}

.meteo-icon-tooltip:hover {
    transform: scale(1.3);
}

/* Tooltip au survol */
.meteo-icon-tooltip::before {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Petite flèche du tooltip */
.meteo-icon-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

/* Afficher le tooltip au survol */
.meteo-icon-tooltip:hover::before,
.meteo-icon-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Style pour les tableaux de prévisions */
#tableau-previsions .meteo-icon-tooltip {
    vertical-align: middle;
}

/* Amélioration pour l'accessibilité */
.meteo-icon-tooltip:focus::before,
.meteo-icon-tooltip:focus::after {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   CONTRÔLES CARTE ET RADAR RAINVIEWER
   ============================================================ */

.map-controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

.map-controls-row .input-group {
    flex: 0 0 auto;
    min-width: 180px;
}

.map-controls-row label {
    font-size: 0.85em;
    margin-bottom: 3px;
}

.map-controls-row select {
    padding: 6px 10px;
    font-size: 0.9em;
}

/* Contrôles animation radar */
.radar-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.radar-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.radar-btn:active {
    transform: scale(0.95);
}

.radar-timestamp {
    color: white;
    font-size: 0.85em;
	 font-weight: bold;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    min-width: 120px;
    text-align: center;
}

/* Responsive */
@media (max-width: 600px) {
    .map-controls-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .map-controls-row .input-group {
        width: 100%;
    }
    
    .radar-controls {
        justify-content: center;
        width: 100%;
    }
}



/* 1. Affichage desktop/tablette (comportement actuel) */
@media (min-width: 481px) and (pointer: fine) {
    html {
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
    }
    
    body {
        overflow-x: hidden;
    }
   .container {
        max-width: 2200px;
        margin: 10px auto;
    }	 
    .main-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, 410px);
        justify-content: center;
        gap: 5px;
        margin: 0 auto;
    }
    
    .section {
        min-width: 410px;
    }
	 
    .input-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
}


/* 2. Affichage smartphone avec swipe horizontal */
@media (max-width: 480px) and (pointer: coarse) {
    /* Layout horizontal avec swipe */
    html {
        scroll-snap-type: none;
        overflow: auto;
        scroll-padding-top: env(safe-area-inset-top);
    }
	body {
		 padding-top: env(safe-area-inset-top);
		 padding-bottom: 0;
		 height: calc(100vh - env(safe-area-inset-top));
		 height: calc(100dvh - env(safe-area-inset-top));
		 overflow: hidden;
	}

	 #mobile-view-toggle {
		 display: none !important;
	}

	/* Restructurer pour que le header soit swipeable */
	.container {
		 height: calc(100vh - env(safe-area-inset-top));
		 height: calc(100dvh - env(safe-area-inset-top));
		 min-height: 0;
		 justify-content: flex-start;
	}
	
	.header-section {
		 /* Le header devient une section swipeable */
		 width: 100vw;
		 min-width: 100vw;
		 max-width: 100vw;
		 height: calc(100vh - env(safe-area-inset-top));
		 height: calc(100dvh - env(safe-area-inset-top));
		 max-height: calc(100vh - env(safe-area-inset-top));
		 max-height: calc(100dvh - env(safe-area-inset-top));
		 flex-shrink: 0;
		 scroll-snap-align: start;
		 overflow-y: auto;
		 padding: 20px;
		 box-sizing: border-box;
		 margin: 0;
		 /* Styles visuels pour le header-section */
		 background: linear-gradient(45deg, #FF6B35, #F7931E);
		 color: white;
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		 text-align: center;
	}

	.main-content {
		 /* Inclure le header dans le container de swipe */
		 display: flex;
		 flex-direction: row;
		 overflow-x: auto;
		 scroll-snap-type: x mandatory;
		 width: 100vw;
		 height: calc(100vh - env(safe-area-inset-top));
		 height: calc(100dvh - env(safe-area-inset-top));
		 min-height: 0;
		 gap: 0;
		 margin: 0;
		 padding: 0;
		 align-items: flex-start;
		 /* Le header sera le premier élément */
	}
	
    /* Désactiver scroll-snap quand l'utilisateur a zoomé */
    .main-content.zoomed {
        scroll-snap-type: none !important;
    }
    
    .section.zoomed {
        scroll-snap-align: none !important;
    }
	 
	 
.section {
     width: 100vw;
     min-width: 100vw;
     max-width: 100vw;
     flex-shrink: 0;
     scroll-snap-align: start;
     scroll-snap-stop: always;
     overflow-y: auto;
     box-sizing: border-box;
     margin: 0;
height: calc(100vh - env(safe-area-inset-top));
height: calc(100dvh - env(safe-area-inset-top));
max-height: calc(100vh - env(safe-area-inset-top));
max-height: calc(100dvh - env(safe-area-inset-top));
}

	
    
    /* Cacher les éléments non essentiels */
    .page-dots {
        display: none;
    }
    
    .comparison-table {
        grid-column: auto !important;
        width: 100% !important;
    }
    
    /* Corriger tous les éléments avec grid-column */
    .section,
    .section * {
        grid-column: auto !important;
    }	 
	 
    /* Agrandir le contenu des champs sur mobile */
    .input-group input,
    .input-group select {
        font-size: 1.2rem;
        padding: 5px 5px;
    }	 
}

/* 3. Mode paysage smartphone - conserver le comportement actuel */
@media (max-width: 480px) and (orientation: landscape) {
    .main-content {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        width: 100vh;
        height: 100vh;
        gap: 0;
        margin: 0;
        padding: 0;
    }
    
    .section {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        flex-shrink: 0;
        scroll-snap-align: start;
        overflow-y: auto;
        min-height: 100vh;
        padding: 10px;
        box-sizing: border-box;
        margin: 0;
    }
}

@media (pointer: coarse) and (orientation: landscape) {
    html {
        padding-left: 10vw;
        padding-right: 10vw;
        box-sizing: border-box;
    }
    
    body {
        zoom: 1.7;
        width: 100%;
    }
    
    .container {
        width: 100%;
        margin: 0;
    }
    
    .nav-menu {
        height: 100vh;
        max-height: 100vh;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-menu h3 {
        padding: 6px;
        font-size: 0.9rem;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .nav-menu ul {
       /* padding-bottom: 40vh;*/
    }
    
    .nav-menu a {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    .nav-menu a::before {
        font-size: 0.95rem;
        margin-right: 8px;
    }
}






/* 4. Partie Timer */



#section-timer {
	 background: black;
	 padding: 0;
	 margin-top: 0;
	 box-shadow: none;
}

.zone-timer {
    height: calc(100vh - env(safe-area-inset-top));
    height: calc(100dvh - env(safe-area-inset-top));
    max-height: calc(100vh - env(safe-area-inset-top));
    max-height: calc(100dvh - env(safe-area-inset-top));
    min-height: calc(100vh - env(safe-area-inset-top));
    min-height: calc(100dvh - env(safe-area-inset-top));
    display: flex;
    flex-direction: column;
}

.timer-area {
	overflow: hidden;
	position: relative;
	margin: 0;
	color: #00ff00;
	font-family:  'Arial Black', 'Helvetica', sans-serif;
	flex: 1;
	padding: 0;
	overflow-y: auto;
	background: #0a0a0a;
}

.pilot-group {
	margin-bottom: 0;
	border: 1px solid #333;
	border-radius: 0;
	padding: 5px;
	background: #111;
	position: relative;
	min-height: 25%;
}

.pilot-number {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 60px;
	font-weight: bold;
	color: #404040;
	z-index: 1;
	pointer-events: none;
	font-family: 'Arial Black', 'Helvetica', sans-serif;
}

.pilot-data {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pilot-line {
	display: grid;
	grid-template-columns: 25px 3fr 4fr 3fr;
	gap: 4px;
	font-size: 22px;
	align-items: right;
	text-align: right;
	line-height: 1;
	padding-left: 7px;
}

.lap-line {
	color: #00ff00;
}

.split-line {
	color: #ffff00;
}

.best-worst-line {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	font-size: 20px;
	margin-top: 15px;
	padding-left: 5px;
}

.best-time {
	color: #ff00ff;
}

.worst-time {
	color: #ff0000;
  
}

.gap-positive {
	color: #ff4444;
}

.gap-negative {
	color: #44ff44;
}

.gap-neutral {
	color: #888;
}

.controls {
	background: #111;
	z-index:5;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
	border-top: 1px solid #333;
}

.button-column {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.control-button {
	border: 2px solid #444;
	color: #00ff00;
	font-family: 'Impact', 'Arial Black', 'Helvetica', sans-serif;
	font-size: 50px;
	font-weight: bold;
	padding: 15px;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.1s;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.control-button:active {
	border-color: #666;
	transform: scale(0.95);
}

.lap-button {
	background: #004400;
	border-color: #006600;
}

.lap-button:active {
	background: #006600;
}

.split-button {
	background: #444400;
	border-color: #666600;
	color: #ffff00;
}

.split-button:active {
	background: #666600;
}

.stop-reset {
	background: #330000;
	border-color: #660000;
	color: #ff4444;
	font-size: 25px;
}

.stop-reset:active {
	background: #550000;
}

.start-all-container {
	display: none;
}

.start-all-container label {
	color: #00ff00;
	font-size: 14px;
	cursor: pointer;
}

.start-all-container input[type="checkbox"] {
	margin-right: 8px;
}

.hidden {
	visibility: hidden;
}

.time-display {
	font-size: 22px;
}

/* Styles pour les éléments masqués */
.pilot-group.hidden {
	 display: none;
}

.control-button.hidden {
	 display: none;
}

/* Style pour le bouton Options */
.options-button {
	 background: #004444;
	 border-color: #006666;
	 color: #00ffff;
	 font-size: 25px;
}

.options-button:active {
	 background: #006666;
}

/* Styles pour la fenêtre de paramètres */
.options-overlay {
	 position: fixed;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 background: black;
	 z-index: 1000;
	 display: none;
	 align-items: center;
	 justify-content: center;
}

.options-window {
	 background: black;
	 border: 2px solid #333;
	 border-radius: 8px;
	 padding: 20px;
	 min-width: 400px;
	 max-width: 500px;
	 color: #00ff00;
}

.options-title {
	 text-align: center;
	 font-size: 24px;
	 margin-bottom: 20px;
	 color: #00ffff;
}

.options-group {
	 margin-bottom: 15px;
	 display: flex;
	 align-items: center;
	 gap: 15px;
}

.options-label {
	 font-size: 18px;
	 min-width: 80px;
	 color: #000;
}

.options-input {
	 flex: 1;
	 padding: 8px;
	 background: #ddd;
	 border: 1px solid #555;
	 border-radius: 4px;
	 color: #000;
	 font-size: 16px;
	 max-width: 150px;
}

.options-checkbox {
	 margin-left: 10px;
}

.options-checkbox input {
	 margin-right: 5px;
}

.options-checkbox label {
	 color: #00ff00;
	 font-size: 14px;
}

.options-buttons {
	 margin-top: 20px;
	 display: flex;
	 gap: 15px;
	 justify-content: center;
}

.options-button-action {
	 padding: 10px 20px;
	 background: #004400;
	 border: 1px solid #006600;
	 border-radius: 4px;
	 color: #00ff00;
	 font-size: 16px;
	 cursor: pointer;
	 transition: all 0.1s;
}

.options-button-action:hover {
	 background: #006600;
}

.options-button-action.reset {
	 background: #440000;
	 border-color: #660000;
	 color: #ff4444;
}

.options-button-action.reset:hover {
	 background: #660000;
}


/* ==========================================
   CGU - CONDITIONS GÉNÉRALES D'UTILISATION
   ========================================== */
.cgu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cgu-content {
    background: #ffffff;
    border-radius: 15px;
    padding: 30px;
    max-width: 700px;
    width: 92%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.cgu-content h2 {
    margin: 0 0 5px 0;
    color: #2c3e50;
    font-size: 1.3em;
}

.cgu-date {
    color: #7f8c8d;
    font-size: 0.85em;
    margin: 0 0 10px 0;
}

.cgu-lang-selector {
    margin-bottom: 12px;
}

.cgu-lang-selector select {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #bdc3c7;
    font-size: 0.9em;
}

.cgu-body {
    overflow-y: auto;
    flex: 1;
    padding-right: 10px;
    margin-bottom: 15px;
    border-top: 1px solid #ecf0f1;
    border-bottom: 1px solid #ecf0f1;
    padding-top: 10px;
}

.cgu-body h4 {
    color: #2c3e50;
    margin: 15px 0 5px 0;
    font-size: 1em;
}

.cgu-body h4:first-child {
    margin-top: 5px;
}

.cgu-body p {
    color: #34495e;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 10px 0;
    text-align: justify;
}

.cgu-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cgu-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s;
}

@media (max-width: 480px) {
    .cgu-content {
        width: 96%;
        padding: 18px;
        max-height: 90vh;
        border-radius: 10px;
    }
    .cgu-content h2 {
        font-size: 1.1em;
    }
    .cgu-buttons {
        flex-direction: column;
    }
}



/* 5. Mode "vue mobile" forcé sur desktop permet de changer le mode d'affichage en mode mobile sur un pc desktop */
body.mobile-view .main-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: none !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    gap: 10px !important;
}

body.mobile-view .section {
    min-width: unset !important;
    width: 100% !important;
    max-width: 480px !important;
    min-height: 100vh !important;
}

body.mobile-view .container {
    max-width: 500px !important;
    margin: 0 auto !important;
}


#mobile-view-toggle {
    text-align: center;
    margin: 10px auto;
}

#mobile-view-toggle label {
    color: inherit;
	 font-weight: bold;
    cursor: pointer;
}

   SECTION PARAMÈTRES (about:config)
   ============================================ */

.params-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.params-search {
    flex: 1;
    min-width: 180px;
    padding: 6px 10px;
    border: 1px solid #999;
    border-radius: 5px;
    background: white;
    color: #000;
    font-size: 0.9em;
}

.params-filter-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    color: #555;
    white-space: nowrap;
    cursor: pointer;
}

/* Conteneur scrollable pour la grille */
.params-grid {
    min-height: 65vh;
    min-height: 65dvh;
    max-height: 65vh;
    max-height: 65dvh;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Table des paramètres */
.params-grid table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.params-grid td {
    padding: 5px 8px;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    font-size: 0.85em;
}

.params-grid td:first-child {
    overflow: visible;
    word-wrap: break-word;
}

.params-grid tr:hover {
    background: rgba(0,0,0,0.03);
}

.param-cle {
    color: #229;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.param-desc {
    font-size: 0.9em;
    color: #222;
    word-wrap: break-word;
}


/* Fond coloré par niveau de licence */
.params-grid tr.param-row-pro {
    background: rgba(45, 90, 39, 0.1);
    position: relative;
}
.params-grid tr.param-row-team {
    background: rgba(90, 39, 39, 0.1);
    position: relative;
}
.params-grid tr.param-row-dev {
    background: rgba(26, 26, 92, 0.1);
    position: relative;
}

/* Filigrane du niveau en fond */
.params-grid tr.param-row-pro,
.params-grid tr.param-row-team,
.params-grid tr.param-row-dev {
    overflow: visible;
}
.params-grid tr.param-row-pro td:first-child::after,
.params-grid tr.param-row-team td:first-child::after,
.params-grid tr.param-row-dev td:first-child::after {
    content: attr(data-niveau);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    pointer-events: none;
    opacity: 0.3;
	 z-index: -1;
}
.params-grid tr.param-row-pro td:first-child::after { color: #FFF; }
.params-grid tr.param-row-team td:first-child::after { color: #FFF; }
.params-grid tr.param-row-dev td:first-child::after { color: #FFF; }

.param-input {
    width: 90px;
    padding: 3px 6px;
    border: 2px solid #999;
    border-radius: 5px;
    background: white;
    color: #000;
    font-size: 1.2rem;
    text-align: center;
}

.param-input.param-modifie { font-weight: bold; }

.param-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.param-reset {
    background: transparent;
    border: 1px solid #888;
    border-radius: 6px;
    color: #555;
    cursor: pointer;
    font-size: 1.2em;
    padding: 1px 4px;
    line-height: 1;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: box-shadow 0.1s, transform 0.1s;
}

.param-reset:hover { color: #f00; }

.param-reset:active {
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 0 0 1px rgba(255,255,255,0.1);
    transform: translateY(1px);
}

.param-vide {
    text-align: center;
    padding: 20px;
    color: #888;
    font-style: italic;
}

/* Licence */
.licence-status-line {
    font-size: 0.85em;
    color: #555;
    margin-bottom: 4px;
}

.licence-input-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.licence-input-line input {
    width: 250px;
    min-width: 250px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    box-sizing: border-box;
}

.licence-eye {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 2px;
    line-height: 1;
}
.licence-eye.masked {
    text-decoration: line-through;
}

.licence-message {
    font-size: 0.85em;
    min-height: 1.2em;
}

@media (max-width: 480px) {
    .params-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .param-input { width: 70px; }
}