/* =========================================================
   Page « Calage » (calage.php)
   Reprend les codes du site (comme conseils.css) : texte gris
   foncé, bleu du menu, filets gris clair ; les couleurs de
   verdict sont celles des messages Bootstrap du site.
   ========================================================= */

.calage {
	--bleu: #428bca;
	--laiton: #b8862e;
	--filet: #eee;
	--texte: #333;
	--discret: #777;
	--vert: #3c763d;    --vert-fond: #dff0d8;
	--orange: #8a6d3b;  --orange-fond: #fcf8e3;
	--rouge: #a94442;   --rouge-fond: #f2dede;
	max-width: 1180px;
	margin: 0 auto;
	color: var(--texte);
}
.calage h2 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 500;
	color: var(--texte);
}

.calage-intro {
	max-width: 52em;
	margin: 0 auto 24px;
	line-height: 1.6;
	text-align: center;
}

/* ---- Deux colonnes sur grand écran ---- */
.calage-grille {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 30px;
	align-items: stretch;
}
.calage-grille-bas {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 50px;
	padding-top: 26px;
	border-top: 1px solid var(--filet);
}

/* =========================================================
   ÉCOUTE : balancier, boutons, vu-mètre
   ========================================================= */
.calage-instrument {
	padding: 20px;
	border: 1px solid var(--filet);
	border-radius: 4px;
}
.calage-instrument-haut {
	display: flex;
	align-items: center;
	gap: 24px;
}
.calage-balancier {
	flex: 0 0 auto;
	width: 90px;
	height: 135px;
	overflow: visible;
}
.calage-support { fill: #999; }
.calage-pivot { fill: #666; }
.calage-tige { stroke: #8a6a2a; stroke-width: 2.5; stroke-linecap: round; }
.calage-lentille { fill: var(--laiton); transition: fill 0.25s; }
.calage-reflet { fill: #fff; opacity: 0.35; }
.calage-pendule {
	transform-box: view-box;
	transform-origin: 50px 9px;
}
.calage-lentille.calage-flash { fill: #e0b04a; transition: none; }

.calage-commandes {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.calage-commandes .btn-lg { min-width: 220px; }

/* Vu-mètre : niveau du micro et seuil de détection */
.calage-vumetre {
	position: relative;
	height: 8px;
	margin: 20px 0 10px;
	background: #f2f2f2;
	border-radius: 4px;
	overflow: hidden;
}
.calage-vumetre-niveau {
	width: 0;
	height: 100%;
	background: #bbb;
	transition: width 0.06s linear;
}
.calage-vumetre.calage-actif .calage-vumetre-niveau { background: var(--bleu); }
.calage-vumetre-seuil {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: var(--laiton);
	display: none;
}
.calage-vumetre.calage-actif .calage-vumetre-seuil { display: block; }

.calage-etat {
	min-height: 2.8em;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--discret);
}

/* =========================================================
   RÉSULTAT : verdict, écart, jauge
   ========================================================= */
.calage-verdict {
	padding: 14px 18px;
	border-radius: 4px;
	background: #f5f5f5;
	color: #555;
	transition: background-color 0.3s, color 0.3s;
}
.calage-verdict p { margin: 0; }
.calage-verdict-titre {
	font-size: 26px;
	font-weight: bold;
	line-height: 1.2;
}
.calage-verdict-texte {
	margin-top: 4px !important;
	line-height: 1.45;
}
.calage-verdict[data-verdict="bien"]       { background: var(--vert-fond);   color: var(--vert); }
.calage-verdict[data-verdict="presque"]    { background: var(--orange-fond); color: var(--orange); }
.calage-verdict[data-verdict="decalee"]    { background: var(--rouge-fond);  color: var(--rouge); }
.calage-verdict[data-verdict="irregulier"],
.calage-verdict[data-verdict="parasites"],
.calage-verdict[data-verdict="unSurDeux"]  { background: var(--orange-fond); color: var(--orange); }

.calage-ecart {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 8px;
}
.calage-ecart-valeur {
	font-size: 46px;
	font-weight: 300;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.calage-ecart-legende {
	font-size: 13px;
	line-height: 1.35;
	color: var(--discret);
}

/* Jauge de 0 à 10 % : vert / orange / rouge (largeurs posées par calage.js) */
.calage-jauge {
	position: relative;
	margin: 6px 0 22px;
}
.calage-jauge-zones {
	display: flex;
	height: 10px;
	border-radius: 5px;
	overflow: hidden;
}
.calage-jauge-zones span { display: block; height: 100%; }
.calage-jauge-zones .zone-bien    { background: #b9dcae; width: 20%; }
.calage-jauge-zones .zone-presque { background: #f0dc9c; width: 30%; }
.calage-jauge-zones .zone-decalee { background: #e8b4b2; flex: 1; }
.calage-jauge-aiguille {
	position: absolute;
	top: -5px;
	left: 0;
	width: 4px;
	height: 20px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--texte);
	box-shadow: 0 0 0 2px #fff;
	opacity: 0;
	transition: left 0.4s ease-out, opacity 0.3s;
}
.calage-jauge-aiguille.calage-visible { opacity: 1; }
.calage-jauge-graduations {
	position: relative;
	height: 16px;
	font-size: 11px;
	color: var(--discret);
}
.calage-jauge-graduations span {
	position: absolute;
	top: 3px;
	transform: translateX(-50%);
	white-space: nowrap;
}
.calage-jauge-graduations span:first-child { transform: none; }
.calage-jauge-graduations span:last-child { transform: translateX(-100%); }

/* tic → tac / tac → tic */
.calage-intervalles {
	display: flex;
	gap: 12px;
	margin: 0;
}
.calage-intervalle {
	flex: 1;
	padding: 8px 12px;
	border-left: 4px solid var(--bleu);
	background: #fafafa;
}
.calage-intervalle.calage-b { border-left-color: var(--laiton); }
.calage-intervalle dt {
	font-weight: normal;
	font-size: 13px;
	color: var(--discret);
}
.calage-intervalle dd {
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   GRAPHIQUE
   ========================================================= */
.calage-bande {
	padding: 30px 0 26px;
}
#calage-graphique {
	display: block;
	width: 100%;
	height: 180px;
	border: 1px solid var(--filet);
	border-radius: 4px;
}
.calage-legende {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--discret);
}
.puce {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin: 0 3px 0 1px;
	border-radius: 50%;
	vertical-align: 0;
}
.puce-a { background: var(--bleu); }
.puce-b { background: var(--laiton); }

/* =========================================================
   MESURES ET MODE D'EMPLOI
   ========================================================= */
.calage-details dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
	margin: 0 0 18px;
}
.calage-details dt { font-weight: bold; }
.calage-details dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.calage-reglages summary {
	cursor: pointer;
	color: var(--bleu);
}
.calage-reglages label {
	display: block;
	margin: 10px 0 4px;
	font-weight: normal;
}
.calage-curseur {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--discret);
}
.calage-curseur input { flex: 1; min-width: 80px; }

.calage-aide ul {
	margin: 0 0 22px;
	padding-left: 20px;
	line-height: 1.6;
}
.calage-aide li { margin-bottom: 4px; }
.calage-aide p { line-height: 1.6; }
.calage-recaler { margin: 0 0 10px; line-height: 1.6; }
.calage-recaler dt { display: inline; font-weight: bold; }
.calage-recaler dt::after { content: "\00a0: "; }
.calage-recaler dd { display: inline; margin: 0; }
.calage-recaler dd::after { content: ""; display: block; margin-bottom: 4px; }
.calage-remarque {
	font-size: 13px;
	color: #666;
}

/* =========================================================
   TABLETTE
   ========================================================= */
@media (max-width: 991px) {
	.calage-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.calage-grille-bas { gap: 26px; }
}

/* =========================================================
   SMARTPHONE : tout empilé, verdict bien lisible de loin
   ========================================================= */
@media (max-width: 767px) {
	.calage-intro { margin-bottom: 16px; text-align: left; font-size: 14px; }
	.calage-instrument { padding: 14px; }
	.calage-instrument-haut { gap: 16px; }
	.calage-balancier { width: 60px; height: 90px; }
	.calage-commandes { flex: 1; align-items: stretch; }
	.calage-commandes .btn-lg { min-width: 0; width: 100%; }
	.calage-vumetre { margin-top: 14px; }
	.calage-verdict-titre { font-size: 24px; }
	.calage-ecart-valeur { font-size: 40px; }
	.calage .calage-bande h2,
	.calage h2 { font-size: 18px; }
	#calage-graphique { height: 150px; }
	.calage-details dl { grid-template-columns: 1fr auto; }
	.calage-details dd { text-align: right; }
}

/* =========================================================
   GRAND ÉCRAN : suit l'agrandissement du texte de style.css
   ========================================================= */
@media (min-width: 1500px) {
	.calage { max-width: 1300px; }
	.calage h2 { font-size: 22px; }
}