@charset "UTF-8";

/*
Fichier .css Diagnostic Micro Audio 𝓥1.8 - 2006
(Version) By sync - (site Ver:8.8.0)
Site : https://feuille-heures-angelique.neocities.org/plus/Page_Divers
*/

/*
	Fichier : Diagnostic_Micro_Audio.css
	Version : V2.0 STABLE
	Correction complète multi-plateforme
	Compatible :
	- Windows
	- macOS
	- Linux
	- Android
	- iPhone / iPad
	- Safari
	- Firefox
	- Chrome
	- Samsung Internet
*/

/* === RESET GLOBAL === */
*{
	box-sizing:border-box;
	-webkit-tap-highlight-color:transparent;
}

html{
	scroll-behavior:smooth;
}

html, body {
	touch-action: manipulation; /* Désactive le double-tap pour zoomer, mais autorise le défilement et le pincement */
	-webkit-touch-callout: none;
	user-select: none; /* 👉 navigateurs modernes aujourd’hui (sans préfixe souvent) */
	-webkit-user-select: none; /* 👉 Compat Safari ancien / iOS */
	-ms-user-select: none; /* 👉 vieux Internet Explorer (vieux IE ≤ 10 */
	-moz-user-select: none; /* 👉 moteur WebKit Firefox */
	-o-user-select: none; /* 👉 vieux Opera Presto (avant 2013…) */
}
html{
	margin:0;
	padding:0;
	background:linear-gradient(165deg, #D3B169, #66CC99);
	width:100%;
	height:100%;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}

/* === BODY === */
body{
	margin:0;
	padding:12px;
	font-family:Arial, sans-serif;
	background:linear-gradient(165deg, #D3B169, #66CC99);
	color:#222;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	min-height:100vh;
	min-height:100dvh;
	overflow-x:hidden;
}

/* === CONTAINER === */
.container{
	width:100%;
	max-width:760px;
	margin:20px 0;
	padding:20px;
	background:rgba(255,255,255,0.82);
	border-radius:28px;
	box-shadow:0 10px 30px rgba(0,0,0,0.18);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	overflow:hidden;
}

/* === TITRE === */
h2{
	margin-top:0;
	margin-bottom:18px;
	padding:14px;
	text-align:center;
	line-height:1.4;
	background:
	linear-gradient(135deg, #D3B169, #66CC99);
	color:#111;
	border-radius:20px;
	font-size:clamp(18px, 4vw, 28px);
	word-break:break-word;
}

h2 small{font-size:0.65em; opacity:0.8;}

/* === BOUTONS === */

button{
	width:auto;
	min-width:120px;
	max-width:260px;
	padding:10px 14px;
	margin:4px;
	border:none;
	border-radius:12px;
	cursor:pointer;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	background:#4CAF50;
	transition:transform 0.15s ease, opacity 0.15s ease, background 0.2s ease;
	touch-action:manipulation;
	will-change:transform;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	vertical-align:middle;
	white-space:nowrap;
}

/* === HOVER DESKTOP === */
@media (hover:hover){
	button:hover{
		transform:translateY(-2px);
		opacity:0.95;
	}
}

/* === CLICK === */
button:active{transform:scale(0.98);}

/* === COULEURS === */
button.alt{
	background:#2196F3;
}

button.pdf{
	background:#555;
}

/* === TABLE === */
table{
	width:100%;
	margin-top:16px;
	border-collapse:collapse;
	font-size:14px;
	background:#ffffffdd;
	border-radius:16px;
	overflow:hidden;
}

th{
	padding:10px;
	text-align:left;
	background:#4CAF50;
	color:#fff;
	font-size:14px;
}

td{
	padding:10px;
	border-bottom:1px solid rgba(0,0,0,0.08);
	word-break:break-word;
}

/* === BARRE MICRO === */
.bar-container{
	width:100%;
	height:16px;
	background:#ccc;
	border-radius:999px;
	overflow:hidden;
}

.bar{
	width:0%;
	height:100%;
	border-radius:999px;
	background:
	linear-gradient(90deg, #4CAF50, #ff9800, #f44336);
	transition:width 0.08s linear;
}

/* === SCORE === */
.score{
	font-size:24px;
	font-weight:bold;
	color:#111;
}

/* === NOTICE === */
.notice{
	margin-top:14px;
	font-size:12px;
	text-align:center;
	color:#c0392b;
	line-height:1.5;
}

/* === FOOTER === */
.footerNote{
	margin-top:16px;
	font-size:12px;
	text-align:center;
	color:gray;
	line-height:1.6;
	word-break:break-word;
}

.footerNote a{
	color:inherit;
	text-decoration:none;
}

/* === CANVAS === */
canvas{
	display:block;
	width:100%;
	height:160px;
	margin-top:14px;
	background:#101010;
	border-radius:16px;
	cursor:crosshair;
	touch-action:none;
	border:1px solid rgba(255,255,255,0.06);}

/* === MOBILE === */
@media (max-width:768px){

	button{
		width:auto;
		max-width:260px;
		margin:6px 0;
		display:inline-flex;
		align-items:center;
		justify-content:flex-start;
		padding:12px 14px;
	}

	body{
		padding:10px;
	}

	.container{
		padding:16px;
		border-radius:22px;
	}

	table{
		font-size:13px;
	}

	td, th{
		padding:8px;
	}

	canvas{
		height:140px;
	}
}

button{
	-webkit-user-select:none;
	user-select:none;
}

button.stop{
	background:#d9534f;
}

button{
	white-space:nowrap;
}

/* === PETITS IPHONE === */
@media (max-width:420px){
	h2{font-size:18px; padding:12px;}
	button{font-size:13px; padding:12px;}
	.score{font-size:20px;}
	canvas{height:120px;}
}

/* === MODE PAYSAGE MOBILE === */
@media (
	max-height:500px
) and (
	orientation:landscape
){
	body{align-items:flex-start;}
	canvas{height:100px;}
}

/* === IMPRESSION PDF === */
@media print{
	html, body{background:#fff !important;}
	body{padding:0; margin:0; display:block;}

	.container{
		max-width:100%;
		width:100%;
		margin:0;
		padding:10px;
		box-shadow:none;
		background:#fff;
	}

	button{display:none !important;}
	canvas{border:1px solid #000;}
	.notice{color:#000;}
}

/* === SAFARI FIX === */
@supports (-webkit-touch-callout:none){
	body{
		min-height:-webkit-fill-available;
	}
}

/* FIN CSS */