* { box-sizing: border-box; }
        /*body { font-family: -apple-system, sans-serif; background: #f4f7f6; padding: 20px; color: #333; }*/
        .wrapper { max-width: 850px; margin: 25px auto; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 20px; }
        fieldset { border: 1px solid #dfe6e9; border-radius: 8px; padding: 15px; background: #fff; 
		}
        legend { font-weight: bold; color: #636e72; font-size: 0.75rem; text-transform: uppercase; padding: 0 10px; }
        .field { margin-bottom: 12px; }
        .field label { display: block; font-size: 0.85rem; margin-bottom: 5px; font-weight: bold; color: #2d3436; }
        input[type="number"], select { width: 100%; padding: 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 1rem; }
		.row { 
			display: flex; 
			flex-wrap: wrap; /* Autorise le passage à la ligne */
			gap: 10px; 
		}

		.row > .field { 
			flex: 1 1 150px; /* Grandit, rétrécit, et essaie de faire 140px de large minimum */
			min-width: 0;    /* Sécurité pour éviter que l'input ne pousse le layout */
		}
        .mode-selector-bar { background: #f8f9fa; padding: 15px; border-radius: 8px; border: 2px solid #0984e3; margin-bottom: 20px; }
        .topup-bar { display: flex; align-items: center; justify-content: space-between; border: 1px solid #eee; border-radius: 8px; margin-bottom: 20px; background: #f9f9f9; padding: 10px 20px; margin: 25px 0; flex-wrap: wrap; gap: 10px; }
		.topup-bar > span {
			flex: 1;
			min-width: 200px; /* Force le bouton à passer dessous proprement sur très petit écran */
		}
        .btn-group { display: flex; gap: 5px; background: #dfe4ea; padding: 0px 5px 3px 5px; border-radius: 10px; }
        .btn-group button { border: none; padding: 10px 25px; border-radius: 10px; cursor: pointer; font-weight: bold; background: transparent; transition: all 0.2s; }
        .btn-group button.active { background: #0984e3; color: white; box-shadow: 0 2px 8px rgba(9, 132, 227, 0.4); }
        details { border: 1px solid #eee; border-radius: 8px; margin-bottom: 20px; background: #f9f9f9; }
        summary { padding: 12px; cursor: pointer; font-weight: bold; font-size: 0.9rem; color: #636e72; }
        .res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; text-align: center; }
		/* Force la boîte de pression à prendre toute la largeur */
		.res-full { 
			grid-column: span 2; 
			border-top: 1px solid #dfe6e9; /* Petit trait de séparation optionnel */
			padding-top: 10px;
		}
				.res-box { padding: 10px; border-radius: 10px; background: #fff; border: 1px solid #eee; }
				.res-val { font-size: 2.4rem; font-weight: 800; display: block; line-height: 1; }
				.res-unit { font-size: 0.75rem; font-weight: bold; color: #b2bec3; text-transform: uppercase; }
				.safety-container { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

		.safety-container { 
			display: flex; 
			flex-direction: column; 
			gap: 12px; 
			margin-top: 20px; 
		}

		.safety-item {
			background: #fff;
			padding: 12px;
			border-radius: 8px;
			border-left: 5px solid; /* La couleur est gérée en ligne via le JS */
			box-shadow: 0 2px 5px rgba(0,0,0,0.05);
		}

		.safety-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 10px;
			width: 100%;
			font-size: 1.2em; /* Légèrement réduit pour plus de flexibilité */
			font-weight: bold;
		}

		/* Gère le bloc de texte à gauche */
		.safety-header > span:first-child {
			flex: 1;
			display: inline-block;
		}

		/* La description qui peut passer à la ligne */
		.safety-desc {
			display: inline; /* Permet de rester à côté du titre si la place le permet */
			font-size: 0.75em; 
			opacity: 0.8; 
			font-weight: normal;
			word-wrap: break-word;
		}

		/* La valeur à droite (ex: 61 m) */
		.safety-value {
			white-space: nowrap; /* Indispensable pour que "61 m" ne soit jamais coupé */
			flex-shrink: 0;
			text-align: right;
			font-size: 1.1em;
		}

		.safety-footer {
			font-size: 0.85em;
			color: #636e72;
			margin-top: 5px;
		}

		/* Style de la jauge pour la densité */
		.gauge-bg {
			height: 8px;
			background: #eee;
			border-radius: 4px;
			margin: 8px 0;
			overflow: hidden;
		}
		.gauge-fill {
			height: 100%;
			transition: width 0.5s ease-in-out;
		}
        .gauge-bg { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin: 8px 0; }
        .gauge-fill { height: 100%; transition: 0.6s ease-out; }
        .recipe { background: #2d3436; color: #fab1a0; padding: 20px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 0.9rem; white-space: pre-line; line-height: 1.6; margin-top: 20px; border-left: 4px solid #e17055; }
        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: inner-spin-button !important; opacity: 1 !important; }
        input[type="number"] { -moz-appearance: number-input; padding-right: 5px; }
		@media print {
			body * { visibility: hidden; }
			#print_zone, #print_zone * { visibility: visible; }
			#print_zone { position: absolute; left: 0; top: 0; display: block !important; }
			.wrapper { box-shadow: none; border: none; }
		}
		spinner-group {
			display: flex;
			align-items: stretch;
			width: 100%;
			height: 40px; /* Augmenté pour une meilleure préhension */
			margin-bottom: 5px;
		}

		.spinner-group input {
			flex: 1;
			border: 1px solid #ced4da;
			border-right: none;
			border-radius: 6px 0 0 6px;
			padding: 0 12px;
			font-size: 1.1rem;
			width: 60%;
		}

		.spinner-buttons {
			display: flex;
			flex-direction: column;
			width: 40px;
		}

		.spinner-buttons button {
			flex: 1;
			background: #f8f9fa;
			border: 1px solid #ced4da;
			cursor: pointer;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			line-height: 1;
			transition: background 0.2s;
		}

		.spin-up { border-radius: 0 6px 0 0; }
		.spin-down { border-radius: 0 0 6px 0; border-top: none !important; }

		.spinner-buttons button:active { background: #dee2e6; }



		@media print {
			/* 1. Cache tout le contenu du body */
			body > * {
				display: none !important;
			}

			/* 2. Prépare la zone d'impression */
			#print_zone {
				display: block !important;
				position: absolute;
				/* Définit la marge par rapport aux bords de la feuille */
				top: 1cm; 
				left: 1cm;
				width: auto;
			}

			/* 3. Style de l'étiquette */
			#dive_label {
				display: block !important;
				visibility: visible !important;
				border: 4px solid black !important;
				/* Mise à l'échelle à 66% */
				transform: scale(0.66);
				/* Crucial : l'ancrage reste en haut à gauche de son propre conteneur */
				transform-origin: top left; 
				background: white !important;
			}

			/* 4. Maintien des structures internes de l'étiquette */
			#dive_label * {
				visibility: visible !important;
			}
			
			#dive_label div[style*="display: flex"] {
				display: flex !important;
			}

			/* 5. Nettoyage des paramètres de page du navigateur */
			@page {
				margin: 0; /* On gère les marges via le CSS au-dessus, pas via le navigateur */
			}
		}

		/* Style du Modal */
		/* Style du bouton flottant */
		#openHelp {
			position: fixed;
			bottom: 25px;
			right: 25px;
			background: #0984e3;
			color: white;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			box-shadow: 0 4px 15px rgba(9, 132, 227, 0.4);
			z-index: 999;
			transition: transform 0.2s;
		}
		#openHelp:hover { transform: scale(1.1); }

		/* Modale */
		.modal {
			display: none;
			position: fixed;
			z-index: 10000;
			left: 0; top: 0;
			width: 100%; height: 100%;
			background: rgba(45, 52, 54, 0.8);
			backdrop-filter: blur(3px);
		}

		.modal-content {
			background: #fff;
			margin: 5vh auto;
			padding: 25px;
			border-radius: 15px;
			width: 90%;
			max-width: 600px;
			max-height: 85vh;
			overflow-y: auto;
			position: relative;
			box-shadow: 0 10px 40px rgba(0,0,0,0.5);
		}

		.close-modal {
			position: absolute;
			right: 20px;
			top: 15px;
			font-size: 28px;
			cursor: pointer;
			color: #b2bec3;
		}

		/* Design interne */
		.info-card {
			background: #f1f7ff;
			border-left: 4px solid #0984e3;
			padding: 15px;
			border-radius: 0 8px 8px 0;
			margin: 15px 0;
		}
		.warning-card {
			background: #fff5f5;
			border-left: 4px solid #ff7675;
			padding: 15px;
			border-radius: 0 8px 8px 0;
			margin: 15px 0;
		}
		.modal-body h3 {
			margin-top: 0;
			font-size: 1rem;
			color: #2d3436;
		}
		.modal-body ul {
			padding-left: 20px;
			margin-bottom: 0;
		}
		.modal-body li {
			font-size: 0.9rem;
			margin-bottom: 5px;
		}

		@media print { #openHelp, .modal { display: none !important; } }

		.checkbox-group label {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			cursor: pointer;
			white-space: nowrap;
			line-height: 1;
		}

		.checkbox-group input[type="checkbox"] {
			-webkit-appearance: none;
			appearance: none;
			flex-shrink: 0;
			width: 18px;
			height: 18px;
			border: 2px solid #b2bec3;
			border-radius: 4px;
			margin: 0;
			/* On garde l'inline-grid pour centrer la coche ::before */
			display: inline-grid;
			place-content: center;
			cursor: pointer;
			transition: background-color 0.2s, border-color 0.2s;
		}

		/* LA COCHE (Le dessin qui avait disparu) */
		.checkbox-group input[type="checkbox"]::before {
			content: "";
			width: 10px;
			height: 10px;
			transform: scale(0);
			transition: 120ms transform ease-in-out;
			box-shadow: inset 1em 1em white; /* La couleur de la coche */
			clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
		}

		.checkbox-group input[type="checkbox"]:checked::before {
			transform: scale(1);
		}

		/* COULEURS DES GAZ (Harmonisation avec tes fiches) */
		#use_he:checked { background-color: #4472c4; border-color: #4472c4; }
		#use_o2:checked { background-color: #2ecc71; border-color: #2ecc71; }
		#use_top:checked { background-color: #636e72; border-color: #636e72; }
		#use_top_air:checked { background-color: #636e72; border-color: #636e72; }
		#use_top_special:checked { background-color: #636e72; border-color: #632020; }
		#use_sim:checked { background-color: #27ae60; border-color: #27ae60; }
		/* Effet au survol */
		.checkbox-group input[type="checkbox"]:hover {
			border-color: #0984e3;
		}
		/* Couleur spécifique pour la simulation (différente de l'O2) */
		#use_sim:checked { 
			background-color: #008080; 
			border-color: #008080; 
		}
.header-main {
    display: flex;
    justify-content: space-between; /* Écarte les éléments */
    align-items: center; /* Aligne verticalement au milieu */
    padding: 10px 0;
    margin-bottom: 20px;
}


.main-title {
    display: inline-flex;
    align-items: center; /* Centre verticalement tous les éléments enfants */
    gap: 8px;            /* Gère l'espace entre l'icône, le texte et le (?) */
    margin: 0;           /* Ajuste selon tes besoins */
    vertical-align: middle;
}

.lang-selector {
    font-size: 0.8rem;
    font-weight: bold;
    color: #b2bec3;
    width: 60px; /* Largeur fixe pour aider au calcul du centrage du titre */
    text-align: right;
}

.lang-btn {
    cursor: pointer;
    transition: color 0.2s;
}

.lang-btn:hover {
    color: #2d3436;
}

.divider {
    margin: 0 4px;
    font-weight: normal;
    opacity: 0.5;
}

/* On cache le spacer sur mobile pour gagner de la place */
.spacer {
    width: 60px; 
}

@media (max-width: 480px) {
    .header-main {
        flex-direction: column; /* On empile sur mobile pour plus de clarté */
    }
    .main-title {
        padding-left: 0;
    }
    .lang-selector {
        width: auto;
        margin-top: 10px;
        text-align: center;
    }
}