/*
 * Kalenbook — la charte, sur le serveur de licences et l'espace client.
 *
 * Les valeurs de public/app/tokens.css, dans l'extension : le serveur est une
 * autre extension, posée seule sur kalenbook.com, et ne peut pas lire ce
 * fichier-là. Un test (test-charte.php) compare les deux, valeur par valeur.
 *
 * La fonte n'est pas déclarée ici : une adresse relative à cette feuille
 * pointe sur l'hôte du site, et l'administration ouverte sur un autre — un
 * port, un « www » de différence — se la voyait refuser par le navigateur.
 * JDWL_Site::font_face() la déclare dans la page, relative à sa racine.
 */

.jdwl-charte,
.jdwl-site {
	--jdwl-ink: #15202B;
	--jdwl-ink-2: #4A5563;
	--jdwl-cloud: #F1F3F6;
	--jdwl-line: #E1E5EB;
	--jdwl-cobalt: #2D4BE0;
	--jdwl-cobalt-deep: #1F36AE;
	--jdwl-cobalt-soft: #E6EAFB;
	--jdwl-mint: #CDF2DF;
	--jdwl-mint-ink: #166A43;
	--jdwl-apricot: #FFDFBF;
	--jdwl-apricot-ink: #8A4A0A;
	--jdwl-r-sm: 6px;
	--jdwl-r: 12px;
	font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
	font-variant-numeric: tabular-nums;
}

/* Le logo : le signe, puis « Kalenbook » en 800. */
.jdwl-mark {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}
.jdwl-mark img { display: block; width: 28px; height: 28px; }
.jdwl-mark span {
	font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--jdwl-ink);
}

/* L'administration du serveur : le cobalt pour l'action, des pilules. */
.jdwl-charte h1,
.jdwl-charte h2 { font-family: inherit; font-weight: 700; letter-spacing: -0.02em; }
.jdwl-charte .button { border-radius: 999px; padding-inline: 16px; }
.jdwl-charte .button-primary {
	background: var(--jdwl-cobalt);
	border-color: var(--jdwl-cobalt);
	color: #FFFFFF;
}
.jdwl-charte .button-primary:hover,
.jdwl-charte .button-primary:focus {
	background: var(--jdwl-cobalt-deep);
	border-color: var(--jdwl-cobalt-deep);
	color: #FFFFFF;
}
.jdwl-charte .nav-tab-active,
.jdwl-charte .nav-tab-active:hover { border-bottom-color: var(--jdwl-cobalt); color: var(--jdwl-cobalt); }

/* L'espace client, dans le thème : ses boutons et ses cartes. */
.jdwl-site .wp-element-button {
	border-radius: 999px;
	padding: 12px 22px;
	min-height: 44px;
	background: var(--jdwl-cobalt);
	border: 1px solid var(--jdwl-cobalt);
	color: #FFFFFF;
	font-weight: 600;
	cursor: pointer;
}
.jdwl-site .wp-element-button:hover { background: var(--jdwl-cobalt-deep); border-color: var(--jdwl-cobalt-deep); }
.jdwl-site .wp-element-button.is-secondary {
	background: transparent;
	border-color: var(--jdwl-ink-2);
	color: var(--jdwl-ink);
}
.jdwl-site .wp-element-button.is-secondary:hover { background: var(--jdwl-cobalt-soft); border-color: var(--jdwl-cobalt); color: var(--jdwl-cobalt-deep); }
.jdwl-site .jdwl-licence {
	margin: 0 0 20px;
	padding: 20px 24px;
	border: 1px solid var(--jdwl-line);
	border-radius: var(--jdwl-r);
	background: #FFFFFF;
}
.jdwl-site .jdwl-licence h2 { margin-top: 0; font-weight: 700; letter-spacing: -0.02em; }
.jdwl-site code {
	padding: 2px 8px;
	border-radius: var(--jdwl-r-sm);
	background: var(--jdwl-cloud);
	color: var(--jdwl-ink);
}
.jdwl-site .jdwl-prix strong { font-size: 1.6em; font-weight: 800; }
.jdwl-site [role="status"] {
	padding: 10px 14px;
	border-radius: var(--jdwl-r-sm);
	background: var(--jdwl-mint);
	color: var(--jdwl-mint-ink);
}
.jdwl-site [role="alert"] {
	padding: 10px 14px;
	border-radius: var(--jdwl-r-sm);
	background: var(--jdwl-apricot);
	color: var(--jdwl-apricot-ink);
}
.jdwl-site input[type="email"] {
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--jdwl-line);
	border-radius: var(--jdwl-r-sm);
	font-size: 16px;
}