/* =========================================================================
   Heliciel - habillage des calculateurs de pas d'helice.

   Feuille PROPRE A CES PAGES : elle n'est chargee que par les deux pages de
   calcul de pas, et ne touche a rien de style.css, qui habille 300 pages.
   La colonne de contenu du gabarit fait 540 px (#main) sur un fond #cccccc,
   texte #336699 : les blocs ci-dessous s'y posent en blanc pour que les zones
   de saisie se distinguent du fond.
   ========================================================================= */

/* ------------------------------------------------------- sommaire lateral */
ul.hp-sommaire {
	margin: 0 0 6px 0;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.5;
}

/* --------------------------------------------------------- bloc de calcul */
.hp-bloc {
	background: #ffffff;
	border: 1px solid #99a9b8;
	border-radius: 6px;
	padding: 14px 16px;
	margin: 14px 0 18px 0;
	font-size: 15px;
}

.hp-champs {
	display: block;
}

.hp-champs label {
	display: block;
	margin: 9px 0 3px 0;
	font-weight: bold;
	font-size: 14px;
	color: #2b5a80;
}

.hp-champs label:first-child {
	margin-top: 0;
}

/* Precision d'unite ou de plage : elle appartient a l'intitule, pas a une
   ligne d'aide separee qui doublerait la hauteur du formulaire. */
.hp-unite-champ {
	font-weight: normal;
	font-size: 12px;
	color: #6b8299;
}

.hp-champs input,
.hp-champs select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 6px 8px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	color: #24435e;
	border: 1px solid #99a9b8;
	border-radius: 3px;
	background: #fbfcfd;
}

.hp-champs input:focus,
.hp-champs select:focus {
	outline: 2px solid #6699cc;
	outline-offset: -1px;
}

/* Valeur et unite sur la meme ligne (vitesse mesuree). */
.hp-duo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
}

.hp-duo input {
	-webkit-box-flex: 2;
	-ms-flex: 2 1 0;
	flex: 2 1 0;
}

.hp-duo select {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0;
	flex: 1 1 0;
}

.hp-bouton {
	display: block;
	width: 100%;
	margin: 14px 0 0 0;
	padding: 10px 14px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	background: #669933;
	border: 1px solid #4d7326;
	border-radius: 4px;
	cursor: pointer;
}

.hp-bouton:hover {
	background: #75ad3b;
}

/* ------------------------------------------------------------- resultats */
.hp-resultat {
	margin-top: 14px;
	padding: 12px 14px;
	background: #f2f6f9;
	border: 1px solid #c8d2dc;
	border-radius: 4px;
	font-size: 15px;
	color: #24435e;
}

.hp-resultat.hp-vide {
	color: #7a8fa1;
	font-style: italic;
}

/* Refus : le calculateur dit pourquoi il ne repond pas, il ne rend jamais
   une valeur approchee a la place. L'encadre doit donc se voir. */
.hp-erreur {
	margin-top: 14px;
	padding: 12px 14px;
	background: #fdf3f2;
	border: 1px solid #d9a9a4;
	border-left: 4px solid #b4501f;
	border-radius: 4px;
	font-size: 14px;
	color: #7d3418;
}

.hp-ligne {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
	gap: 10px;
	padding: 3px 0;
	border-bottom: 1px dotted #ccd6df;
}

.hp-ligne:last-child {
	border-bottom: 0;
}

.hp-int {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

.hp-val {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	text-align: right;
	white-space: normal;
}

.hp-doux {
	color: #6b8299;
	font-size: 13px;
}

/* Le nom de l'helice retenue : c'est LA reponse a la question posee par le
   visiteur, elle doit se lire avant tout le reste du bloc de resultat. */
.hp-verdict {
	margin: 0 0 4px 0;
	padding: 8px 12px;
	background: #eef4e8;
	border-left: 4px solid #669933;
	border-radius: 3px;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.2;
	color: #3d6b1f;
}

.hp-verdict-pd {
	font-size: 16px;
	font-weight: normal;
	color: #5b7186;
	white-space: nowrap;
}

/* Classement des suivantes : un tableau serre, lisible sous le verdict. */
table.hp-classement {
	width: 100%;
	border-collapse: collapse;
	margin: 4px 0 0 0;
	font-size: 13px;
	color: #24435e;
}

table.hp-classement th,
table.hp-classement td {
	padding: 4px 6px;
	border-bottom: 1px solid #dde5ec;
	text-align: right;
}

table.hp-classement th:first-child,
table.hp-classement td:first-child {
	text-align: left;
	font-weight: bold;
}

table.hp-classement th {
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #4f7ea8;
}

.hp-sous-titre {
	margin: 12px 0 4px 0;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #4f7ea8;
}

.hp-resultat p.hp-note,
p.hp-note-page {
	margin: 10px 0 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #5b7186;
}

p.hp-note-page {
	padding: 8px 12px;
	background: #e6ecf1;
	border-left: 3px solid #6699cc;
}

.hp-alerte {
	margin: 10px 0 0 0;
	padding: 8px 10px;
	background: #fdf3f2;
	border-left: 3px solid #b4501f;
	font-size: 14px;
	color: #7d3418;
}

/* ----------------------------------------------- diagramme en eau libre */
.hp-figure {
	margin: 16px 0 0 0;
}

#hp-courbe {
	display: block;
	width: 100%;
	height: auto;
	max-width: 480px;
	background: #ffffff;
	border: 1px solid #c8d2dc;
	border-radius: 3px;
}

.hp-figure figcaption {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: #5b7186;
}

.hp-legende {
	font-weight: bold;
	white-space: nowrap;
}

.hp-bleu   { color: #1f6fb4; }
.hp-orange { color: #b4501f; }
.hp-vert   { color: #2e8b3d; }

/* --------------------------------------------- tableau de comparaison */
table.hp-table {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0;
	background: #ffffff;
	font-size: 14px;
	color: #24435e;
}

table.hp-table caption {
	padding-bottom: 6px;
	font-size: 13px;
	font-style: italic;
	text-align: left;
	color: #5b7186;
}

table.hp-table th,
table.hp-table td {
	padding: 7px 9px;
	border: 1px solid #c8d2dc;
	text-align: left;
	vertical-align: top;
}

table.hp-table th {
	background: #e6ecf1;
	font-weight: bold;
	color: #2b5a80;
}

table.hp-table tr td:first-child {
	font-weight: bold;
	color: #2b5a80;
}

/* Colonne du sur-mesure : c'est la comparaison utile, elle se distingue. */
table.hp-table tr th:last-child,
table.hp-table tr td:last-child {
	background: #f1f7ec;
}

/* ------------------------------------------------------ appel a l'action */
a.hp-cta {
	display: block;
	margin: 16px 0;
	padding: 12px 16px;
	background: #669933;
	border-radius: 4px;
	color: #ffffff !important;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

a.hp-cta:hover {
	background: #75ad3b;
}

/* ------------------------------------------------------------- telephone */
/* Sous 820 px le gabarit passe #content en colonne (regle ajoutee en fin de
   style.css) : les blocs ci-dessus sont deja fluides, seuls les ecarts et la
   taille du texte se resserrent. */
@media (max-width: 480px) {
	.hp-bloc {
		padding: 11px 12px;
	}
	.hp-ligne {
		display: block;
	}
	.hp-val {
		display: block;
		text-align: left;
		font-weight: bold;
	}
	table.hp-table {
		font-size: 13px;
	}
	table.hp-table th,
	table.hp-table td {
		padding: 6px 7px;
	}
}

/* Verdict de surface de pale dans le classement : la couleur porte la lecture,
   le mot la porte aussi — un daltonien lit « trop etroite » comme les autres. */
table.hp-classement td.hp-ok {
	color: #2e8b3d;
}

table.hp-classement td.hp-insuf {
	color: #b4501f;
}