/* Voir minipage.vars.css pour la définition des variables */

*, *:after, *:before { box-sizing: border-box; }
h1 {font-size: 1.5em; line-height: 1.1; font-weight: bold}
h2 {font-size: 1.25em; line-height: 1}
b, strong { font-weight: bold}
i, em {font-style: italic}
a { text-decoration: underline; color:var(--minipage-color-theme-dark);}
a:hover, a:focus, a:active {text-decoration: none; background: var(--minipage-color-theme-dark); color:#fff;}

.btn,
input.submit,
input.reset,
button {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
	padding: var(--minipage-btn-padding-y) var(--minipage-btn-padding-x);
	margin-bottom: var(--minipage-btn-margin);
	background-color: var(--minipage-btn-color-main-bg);
	color: var(--minipage-btn-color-main-text);
	border: 1px solid var(--minipage-btn-color-main-border);
	border-bottom-color: var(--minipage-btn-color-border-accent);
	border-radius: var(--minipage-btn-border-radius);
	text-decoration: none;
	font-size: var(--minipage-btn-font-size);
	font-family: inherit;
	font-weight: 400;
	line-height: var(--minipage-line-height);
	user-select: none;
	transition: all 0.1s;
}
a.btn,
#wysiwyg a.btn, #wysiwyg a.btn:hover,
input.submit,
input.reset,
button {
	text-decoration: none;
	cursor: pointer;
}

/* Survol */
.btn:hover,
.btn:focus,
input.submit:hover,
input.submit:focus,
input.reset:hover,
input.reset:focus,
button:hover {
	background-color: var(--minipage-btn-color-main-hover-bg);
	border-color: var(--minipage-btn-color-main-hover-border);
	border-bottom-color: var(--minipage-btn-color-border-accent);
	color: var(--minipage-btn-color-main-hover-text);
	text-decoration: none;
	transition: all 0.2s;
}
/* Focus : outline */
.btn:focus,
input.submit:focus,
input.reset:focus,
button:focus {
	box-shadow: 0 0 0 0.2rem var(--minipage-btn-color-focus);
}
/* Actif */
.btn:active,
input.submit:active,
input.reset:active,
button:active {
	background-color: var(--minipage-btn-color-main-active-bg);
	border-color: var(--minipage-btn-color-main-active-border);
	border-bottom-color: var(--minipage-btn-color-border-accent);
	color: var(--minipage-btn-color-main-active-text);
}


/* Alertes */
.msg-alert,
.notice, .error, .success,
.formulaire_spip .reponse_formulaire {
	position: relative;
	padding: var(--minipage-alert-spacing-y) var(--minipage-alert-spacing-x);
	/* gouttière + taille icone + espacement arbitraire avec le texte */
	padding-left: calc(var(--minipage-alert-spacing-x) + var(--minipage-alert-iconsize) + 0.75rem);
	margin: calc(var(--minipage-margin-bottom) * 1.5) 0; /* Idem boîtes */
	background-repeat: no-repeat;
	/* Aligner icône au niveau de la 1ère ligne de texte */
	background-position: left var(--minipage-alert-spacing-x) top calc(var(--minipage-alert-spacing-y) - ((var(--minipage-alert-iconsize) - var(--minipage-line-height)) / 2));
	background-size: var(--minipage-alert-iconsize);
	font-weight: normal;
	border-radius: var(--minipage-border-radius);
	box-shadow: inset 0 0 1.5em hsla(0, 0%, 0%, 0.02);
	background-color: var(--minipage-color-gray-lighter);
	border-left: 0.5rem solid var(--minipage-color-gray-light);
}
.msg-alert a {
	color: var(--minipage-color-black);
	text-decoration: underline;
}

/* Code */
.msg-alert tt,
.msg-alert code {
	color: var(--minipage-color-black);
}

/* Notice */
.msg-alert.notice,
.notice {
	color:            hsl(var(--minipage-color-notice--h), var(--minipage-color-notice--s), 18%);
	background-color: hsl(var(--minipage-color-notice--h), 90%, 88%);
	border-color:     hsl(var(--minipage-color-notice--h), 100%, 48%);
}

/* Erreur */
.msg-alert.error,
.formulaire_spip .reponse_formulaire_erreur,
.error {
	color:            hsl(var(--minipage-color-error--h), var(--minipage-color-error--s), 18%);
	background-color: hsl(var(--minipage-color-error--h), 60%, 95%);
	border-color:     hsl(var(--minipage-color-error--h), var(--minipage-color-error--s), 50%);
}

/* Succès */
.msg-alert.success,
.formulaire_spip .reponse_formulaire_ok,
.success {
	color:            hsl(var(--minipage-color-success--h), var(--minipage-color-success--s), 15%);
	background-color: hsl(var(--minipage-color-success--h), 55%, 90%);
	border-color:     hsl(var(--minipage-color-success--h), var(--minipage-color-success--s), 45%);
}

/* Information */
.msg-alert.info,
.information {
	color:            hsl(var(--minipage-color-info--h), var(--minipage-color-info--s), 25%);
	background-color: hsl(var(--minipage-color-info--h), 45%, 93%);
	border-color:     hsl(var(--minipage-color-info--h), var(--minipage-color-info--s), 60%);
}

.minipage  {
	margin:0;
	font-size: 1em;
	color: #333;
	border:0;
	padding: 0;
	font-family: arial, helvetica, sans-serif;
	line-height: var(--minipage-line-height);
	background-size: cover;
	background-position: center;
	background: var(--minipage-color-theme);
	background: radial-gradient(circle, var(--minipage-color-theme) 20%, var(--minipage-color-theme-dark) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.minipage-bloc {
	border-radius: var(--minipage-border-radius);
	box-shadow: var(--minipage-box-shadow);
	margin: 5rem auto;
	width: 30em;
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	min-height: 20em;
}

.minipage-bloc header {
	background: rgba(255,255,255,85%);
	padding: 1.5em;
	text-align: center;
	border-top-left-radius: var(--minipage-border-radius);
	border-top-right-radius: var(--minipage-border-radius);
}
.minipage-bloc header h1+h2 {
	margin-top: 0.75rem;
}

.minipage-bloc .corps {
	background: rgba(255,255,255,100%);
	padding: 1.5em;
	overflow: auto;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
}

.minipage-bloc footer {
	background: rgba(255,255,255,85%);
	padding: 1.5em;
	text-align: center;
	border-bottom-left-radius: var(--minipage-border-radius);
	border-bottom-right-radius: var(--minipage-border-radius);
}
