/**
 * L'habillage du formulaire d'inscription.
 *
 * Suit la direction validée : l'orange de la marque (#FF7C25) est réservé à
 * l'action — envoyer le code, créer le compte. Jamais orange sur orange, et
 * jamais orange pour décorer un libellé : le jour où l'orange décore, le
 * bouton cesse de se voir.
 *
 * Les sélecteurs restent volontairement peu spécifiques et préfixés
 * `tizzle-` : ce fichier vit à l'intérieur du thème du client, et une règle
 * trop gourmande casserait ses écrans plutôt que les nôtres.
 */

.tizzle-identite,
.tizzle-second {
	--tz-orange: #ff7c25;
	--tz-orange-fonce: #d9600b;
	--tz-encre: #1b1f22;
	--tz-ligne: #ddd7d1;
	--tz-doux: #fff1e7;
	--tz-vert: #177a5a;
	--tz-rouge: #b4243b;
	--tz-gris: #5e5a55;

	display: block;
	margin: 0 0 1rem;
}

.tizzle-champ {
	display: block;
	margin: 0 0 0.85rem;
}

.tizzle-champ label {
	display: block;
	font-weight: 600;
	font-size: 0.85rem;
	margin-bottom: 0.3rem;
}

.tizzle-facultatif {
	font-weight: 400;
	color: var(--tz-gris);
}

.tizzle-identite select,
.tizzle-identite input[type='tel'],
.tizzle-identite input[type='text'],
.tizzle-second select,
.tizzle-second input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.7rem;
	border: 1.5px solid var(--tz-ligne);
	border-radius: 8px;
	background: #fff;
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--tz-encre);
}

.tizzle-identite select:focus,
.tizzle-identite input:focus,
.tizzle-second input:focus,
.tizzle-second select:focus {
	outline: 2px solid var(--tz-orange);
	outline-offset: 1px;
	border-color: var(--tz-orange);
}

/* Indicatif et numéro sur une ligne : ils forment une seule information. */
.tizzle-duo {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.tizzle-duo .tizzle-pays {
	flex: 0 1 13rem;
	min-width: 0;
}

.tizzle-duo .tizzle-numero,
.tizzle-duo .tizzle-code {
	flex: 1 1 auto;
	min-width: 0;
}

.tizzle-duo .tizzle-code {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	letter-spacing: 0.25em;
	text-align: center;
}

/* --- Verdicts et messages ------------------------------------------- */

.tizzle-verdict,
.tizzle-message,
.tizzle-aide {
	display: block;
	font-size: 0.82rem;
	margin-top: 0.3rem;
	min-height: 1.1em;
	color: var(--tz-gris);
}

.tizzle-bon {
	color: var(--tz-vert);
	font-weight: 600;
}

.tizzle-mauvais {
	color: var(--tz-rouge);
	font-weight: 600;
}

/* --- Boutons ---------------------------------------------------------- */

.tizzle-bouton {
	display: inline-block;
	border: 1.5px solid var(--tz-orange);
	background: var(--tz-orange);
	color: #3a2600;
	border-radius: 8px;
	padding: 0.6rem 1rem;
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
	line-height: 1.2;
}

.tizzle-bouton:hover:not(:disabled) {
	background: var(--tz-orange-fonce);
	border-color: var(--tz-orange-fonce);
	color: #fff;
}

.tizzle-bouton:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Le second bouton d'une paire ne peut pas être orange lui aussi : deux
   appels à l'action de même poids, c'est aucun appel à l'action. */
.tizzle-bouton.tizzle-creux {
	background: transparent;
	color: var(--tz-encre);
	border-color: var(--tz-encre);
	flex: 0 0 auto;
}

.tizzle-bouton.tizzle-creux:hover:not(:disabled) {
	background: var(--tz-encre);
	color: #fff;
}

/* --- La zone de vérification ----------------------------------------- */

.tizzle-verification {
	background: var(--tz-doux);
	border-radius: 10px;
	padding: 0.85rem 0.9rem 0.6rem;
	margin-bottom: 0.9rem;
}

.tizzle-verification.tizzle-verifie {
	background: #e9f5f0;
}

/* --- Le second identifiant -------------------------------------------- */

.tizzle-ajouter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	background: transparent;
	border: 1.5px dashed var(--tz-ligne);
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	font-weight: 700;
	font-size: 0.86rem;
	color: var(--tz-encre);
	cursor: pointer;
}

.tizzle-ajouter:hover {
	border-color: var(--tz-orange);
	border-style: solid;
}

.tizzle-plus {
	display: grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--tz-orange);
	color: #3a2600;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
}

.tizzle-second-champs {
	border: 1px solid var(--tz-ligne);
	border-radius: 10px;
	padding: 0.9rem 0.9rem 0.5rem;
	margin-top: 0.2rem;
}

.tizzle-retirer {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--tz-gris);
	font-size: 0.8rem;
	text-decoration: underline;
	cursor: pointer;
}

/* Un élément masqué doit l'être, quelle que soit la mise en page du thème :
   `display: flex` sur un parent ignore l'attribut `hidden`. */
.tizzle-identite [hidden],
.tizzle-second [hidden] {
	display: none !important;
}

@media (max-width: 30rem) {
	.tizzle-duo {
		flex-wrap: wrap;
	}

	.tizzle-duo .tizzle-pays {
		flex: 1 1 100%;
	}
}