/**
 * Cabrio Connexion — the three pages.
 *
 * Every colour is a custom property set on .cab-connexion by the plugin, from
 * the active theme's palette. Nothing here sets a typeface or a text size in
 * absolute terms: the forms inherit the theme's typography, which is what makes
 * them look like the site rather than like a plugin.
 *
 * The class names are all under one root so that no theme, and no other form on
 * the page, can collide with them.
 */

.cab-connexion {
	max-width: 30rem;
	margin-inline: auto;
}

.cab-connexion--account {
	display: grid;
	gap: 1.6rem;
}

.cab-connexion__form {
	display: grid;
	gap: 1.1rem;
	padding: clamp(1.2rem, 4vw, 2rem);
	background: var(--cab-cnx-surface, #fff);
	box-shadow: 0 0 7px var(--cab-cnx-shade, rgba(0, 0, 0, 0.15));
}

.cab-connexion__intro {
	margin: 0;
	color: var(--cab-cnx-muted, #666);
	font-size: 0.95em;
}

.cab-connexion__field {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.cab-connexion__field label {
	font-size: 0.9em;
	font-weight: 600;
	/* Son propre nom : un thème dont les étiquettes ne sont pas de la couleur de
	   ses boutons n'a pas à choisir entre les deux. */
	color: var(--cab-cnx-label, var(--cab-cnx-accent, #2f5f7e));
}

/*
 * Le champ se laisse habiller par le thème hôte.
 *
 * L'extension doit tenir debout toute seule, sous n'importe quel thème : ce
 * sont donc ses propres valeurs qui sont écrites ici, en repli. Mais un site
 * qui a déjà une forme de champ — un arrondi, un rembourrage, un filet — n'a
 * plus à la redéclarer à notre place ni à nous passer devant à coups de
 * sélecteurs : il pose ces deux noms-là comme il posait déjà les couleurs, et
 * la page du membre porte les champs de la maison.
 */
.cab-connexion__field input,
.cab-connexion__field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: var(--cab-cnx-pad, 0.6rem 0.75rem);
	font: inherit;
	/*
	 * `font: inherit` reprend AUSSI l'interligne de la page, faite pour un
	 * paragraphe : mesuré, 48 px de haut contre 43 aux champs du thème hôte à
	 * côté. Une ligne unique dans un cadre n'a pas de rythme de lecture.
	 */
	line-height: 1.4;
	color: var(--cab-cnx-ink, #1d2327);
	background: var(--cab-cnx-surface, #fff);
	border: 1px solid var(--cab-cnx-line, rgba(0, 0, 0, 0.15));
	border-radius: var(--cab-cnx-radius, 3px);
}

.cab-connexion__field textarea {
	resize: vertical;
	min-height: 6rem;
	line-height: 1.5;
}

/*
 * Les trois parties du formulaire.
 *
 * Le décor du titre appartient au thème hôte — il n'y a ici que ce qu'il faut
 * pour que la page se tienne sans lui : un intertitre lisible et de l'air entre
 * les parties.
 */
.cab-connexion__section {
	display: grid;
	gap: 1.1rem;
}

.cab-connexion__section + .cab-connexion__section {
	margin-block-start: 0.6rem;
}

.cab-connexion__section-titre {
	margin: 0;
	font-size: 1.15em;
	color: var(--cab-cnx-accent, #2f5f7e);
}

.cab-connexion__field input:focus-visible,
.cab-connexion__field textarea:focus-visible {
	outline: 2px solid var(--cab-cnx-accent, #2f5f7e);
	outline-offset: 1px;
	border-color: var(--cab-cnx-accent, #2f5f7e);
}

/* A checkbox reads left to right, not top to bottom. */
.cab-connexion__field--check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.cab-connexion__field--check input {
	width: auto;
	margin: 0;
}

.cab-connexion__field--check label {
	font-weight: 400;
	color: var(--cab-cnx-ink, #1d2327);
}

.cab-connexion__hint {
	font-size: 0.85em;
	color: var(--cab-cnx-muted, #666);
}

.cab-connexion__actions {
	margin: 0;
}

.cab-connexion__submit {
	padding: 0.7rem 1.6rem;
	font: inherit;
	color: var(--cab-cnx-on-accent, #fff);
	background: var(--cab-cnx-accent, #2f5f7e);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: filter 0.2s ease;
}

/*
 * The hover state darkens what is there rather than naming a second colour:
 * the accent comes from the theme, and no second colour could be guessed that
 * would suit every one of them.
 */
.cab-connexion__submit:hover,
.cab-connexion__submit:focus-visible {
	filter: brightness(0.88);
}

.cab-connexion__aside {
	margin: 0;
	font-size: 0.9em;
}

.cab-connexion__sep {
	color: var(--cab-cnx-muted, #666);
	padding-inline: 0.4rem;
}

/*
 * The tint and the rule carry the meaning at a glance; the text itself stays
 * the page's ink, which is the only colour sure to read on either wash.
 */
.cab-connexion__notice {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	color: var(--cab-cnx-ink, #1d2327);
	border-left: 3px solid;
	border-radius: 3px;
}

.cab-connexion__notice--error {
	border-left-color: var(--cab-cnx-bad, #b03a12);
	background: color-mix(in srgb, var(--cab-cnx-bad, #b03a12) 10%, transparent);
}

.cab-connexion__notice--done {
	border-left-color: var(--cab-cnx-good, #3f7a2c);
	background: color-mix(in srgb, var(--cab-cnx-good, #3f7a2c) 10%, transparent);
}

/*
 * The field robots fill in. Taken out of the flow rather than switched off: a
 * robot that reads the stylesheet skips display:none, while a screen reader is
 * kept away by aria-hidden and tabindex in the markup.
 */
.cab-connexion__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- the member's own page --- */

.cab-connexion__card {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: clamp(1.2rem, 4vw, 1.6rem);
	background: var(--cab-cnx-surface, #fff);
	box-shadow: 0 0 7px var(--cab-cnx-shade, rgba(0, 0, 0, 0.15));
}

.cab-connexion__avatar {
	border-radius: 50%;
	flex: 0 0 auto;
}

.cab-connexion__name {
	margin: 0;
	font-size: 1.3em;
	line-height: 1.2;
	color: var(--cab-cnx-accent, #2f5f7e);
}

.cab-connexion__mail,
.cab-connexion__since {
	margin: 0.2rem 0 0;
	font-size: 0.9em;
	color: var(--cab-cnx-muted, #666);
}

.cab-connexion__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

@media (max-width: 480px) {
	.cab-connexion__card {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-connexion__submit {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Le choix de la photo de profil

   Un aperçu de ce qui est en place, et les trois réponses dessous. Le
   `fieldset` est remis à plat : son cadre et sa légende en retrait ne
   ressemblent à rien des autres champs.
   -------------------------------------------------------------------------- */

/* Les trois champs qui disent qui l'on est, tenus ensemble. */
.cab-connexion__identite {
	display: grid;
	gap: 1.1rem;
	align-content: start;
}

/*
 * LE MÊME SOUFFLE QUE LES AUTRES CHAMPS. Le titre touchait l'aperçu — zéro
 * pixel mesuré — et les trois réponses se serraient à six, quand deux champs
 * voisins du formulaire respirent à dix-huit. Le bloc de la photo prend donc
 * l'écart des autres, et ses réponses la moitié.
 */
.cab-connexion__field--avatar {
	display: grid;
	gap: 1.1rem;
	justify-items: start;
	align-content: start;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Une légende de `fieldset` ne se range pas dans la grille : le navigateur la
 * pose à part, en haut du cadre, et l'écart de la grille ne s'applique pas à
 * elle — mesuré à zéro pixel sous le titre. Son air se dit donc en marge.
 */
.cab-connexion__field--avatar legend {
	margin-block-end: 0.7rem;
	padding: 0;
	font-size: 0.9em;
	font-weight: 600;
	/* Elle nomme un champ comme une étiquette en nomme un : même couleur qu'elles. */
	color: var(--cab-cnx-label, var(--cab-cnx-accent, #2f5f7e));
}

.cab-connexion__apercu {
	line-height: 0;
}

.cab-connexion__apercu img {
	border-radius: 50%;
}

.cab-connexion__choix {
	display: grid;
	gap: 0.55rem;
	align-content: start;
}

.cab-connexion__choix-ligne {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cab-connexion__choix-ligne label {
	font-weight: 400;
	color: var(--cab-cnx-ink, #1d2327);
}

.cab-connexion__choix-ligne input[type="radio"] {
	width: auto;
	margin: 0;
	flex: none;
}

.cab-connexion__field--avatar input[type="file"],
.cab-connexion__field--avatar input[type="url"] {
	box-sizing: border-box;
	width: calc(100% - 1.6rem);
	margin-inline-start: 1.6rem;
	padding: 0.45rem 0.6rem;
	font: inherit;
	font-size: 0.95em;
	color: var(--cab-cnx-ink, #1d2327);
	background: var(--cab-cnx-surface, #fff);
	border: 1px solid var(--cab-cnx-line, rgba(0, 0, 0, 0.15));
	border-radius: var(--cab-cnx-radius, 3px);
}

.cab-connexion__choix {
	justify-self: stretch;
}