/*!
 * La carte de cadrage : le ciel réel photographié, avec le champ de l'instrument dessiné
 * par-dessus.
 *
 * WHY une feuille à part de celle du direct : cette carte ne vit que sur la page de
 * préparation, et le direct est déjà la page la plus lourde du site. Une règle qui ne sert
 * qu'ici n'a pas à être téléchargée là-bas.
 */

.ojbt-cadrage {
	margin: 0 0 1.5rem;
}

/* WHY une hauteur bornée en unités de vue plutôt qu'en pixels : la carte doit rester
   utilisable sur un téléphone tenu à la main sans occuper l'écran entier, et lisible sur
   un grand écran sans devenir un timbre-poste. */
.ojbt-cadrage__vue {
	width: 100%;
	height: clamp(320px, 55vh, 620px);
	background: var(--awb-custom_color_5, #141126);
	border-radius: 6px;
	overflow: hidden;
}

/* WHY une règle explicite pour l'état masqué, alors que le navigateur en porte déjà une :
   l'attribut `hidden` ne masque que par la feuille de style du navigateur, `[hidden] {
   display: none }`, et **toute règle d'auteur qui pose un display la bat**, quelle que
   soit sa spécificité. La règle ci-dessous en pose un. Sans cette ligne, le script avait
   beau poser l'attribut, le bloc d'amorce restait affiché au-dessus de la carte chargée,
   avec son bouton figé sur « Chargement de la carte… ». L'attribut était mis, la mesure
   le confirmait, et l'écran montrait le contraire. */
.ojbt-cadrage__amorce[hidden] {
	display: none;
}

/* WHY l'amorce occupe exactement la place de la carte : sans cela la page saute au
   chargement, et le saut se produit précisément sous le doigt qui vient de cliquer. */
.ojbt-cadrage__amorce {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
	justify-content: center;
	padding: 1.25rem;
	height: clamp(320px, 55vh, 620px);
	background: var(--awb-color2);
	border: 1px solid color-mix(in srgb, var(--awb-custom_color_6, #ffffff) 14%, transparent);
	border-radius: 6px;
	color: var(--awb-custom_color_6, #ffffff);
}

/* WHY 36em, en règle du thème : c'est la borne commune du texte courant des deux sites
   (80 à 87 caractères en Josefin Sans). Ce paragraphe est écrit par le gabarit PHP de la
   carte, hors de tout élément Texte d'Avada, dont l'option max_width ne l'atteint pas. */
.ojbt-cadrage__amorce p {
	margin: 0;
	max-width: 36em;
	color: var(--awb-custom_color_6, #ffffff);
}

/* WHY des couleurs de la palette qui ne basculent pas avec le mode (ojbtFond, ojbtBlanc,
   ojbtAccent) : ce cadre est sombre dans les deux modes d'affichage, par construction, et
   une couleur qui suit le mode y écrirait du sombre sur du sombre un jour sur deux.

   WHY un bouton à contour : la table d'emploi de la charte permet l'accent en texte sur
   le bleu nuit (5,32:1), et ne permet aucun texte sur l'aplat d'accent, où le blanc ne
   tient que 3,3:1. */
.ojbt-cadrage__ouvrir {
	color: var(--awb-color5);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 0.6rem 1.1rem;
	font: inherit;
	cursor: pointer;
}

.ojbt-cadrage__ouvrir:hover,
.ojbt-cadrage__ouvrir:focus-visible {
	color: var(--awb-custom_color_6, #ffffff);
}

.ojbt-cadrage__commandes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: flex-end;
	margin: 0.9rem 0 0.6rem;
}

.ojbt-cadrage__commandes label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.9rem;
}

.ojbt-cadrage__commandes input[type="number"] {
	width: 7rem;
}

/* WHY les chiffres en chasse fixe : la largeur, la hauteur et l'angle se comparent d'une
   configuration à l'autre, et des chiffres qui ne s'alignent pas se comparent mal. */
.ojbt-cadrage__verdict {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.ojbt-cadrage__source {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	opacity: 0.8;
}

@media (max-width: 640px) {
	.ojbt-cadrage__commandes input[type="number"] {
		width: 5.5rem;
	}
}