/* ACCESSIBILITY */
/* ============= */

:focus-visible:not(button, [class*=btn]){
    box-shadow: 0 0 0 0.4rem var(--color-focus, red) !important;
    outline: none;
}

[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		animation-name: none !important;
		animation-duration: 0s !important;
		view-transition-name: unset !important;
	}
	/* TODO : pas de transition ni d'animation dans ce cas. */
}

/* https://www.ffoodd.fr/cache-cache-css/ */
/* for text only, not on focusable elements */
.sr-only, [hidden][aria-hidden="false"], .visually-hidden, .screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

/* HTML CORE STYLES */
/* ================ */

/* Class less, generalist */


ul, ol {
	margin: 0 0 1.5em 2em;
	padding: 0;
}

li {
	margin-bottom: 0.5em;
}


/* UTILITIES */
/* ========= */

body [class] .block {
	display: block;
}

body [class] .inline {
	display: inline;
}

body [class] .inline-block {
	display: inline-block;
}

body [class] .flex {
	display: flex;
}

body [class] .grid {
	display: grid;
}

body [class] .center {
	margin-left: auto;
    margin-right: auto;
	text-align: center;
}

.flex-horizontal {
    display: flex;
    justify-content: space-between;
}

img.responsive {
	width: 100%;
	height: auto;
}


@media (min-width: 1056px) {
	
	.lg-flex-horizontal {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.lg-flex-horizontal>* {
		width: 100%;
	}
	
}


/* GROUP CLASSES */
/* ============= */

.list-inline {
	list-style: none;
	display: flex;
	align-items: center;
	column-gap: 1em;
	flex-wrap: wrap;
}

/* LAYOUT */
/* ====== */

* {
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    --padding-x: 0;
    --padding-y: 0;
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y);
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
    
    --margin-x: 0;
    --margin-y: 0;
    margin-top: var(--margin-y);
    margin-bottom: var(--margin-y);
    margin-left: var(--margin-x);
    margin-right: var(--margin-x);
    
    --page-padding-x: 0;	/* en vw ! */
}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.4rem;
}

html, body {
    margin: 0;
    height: 100%;
    /* overflow: clip; /* ONLY ON DEV MODE */
}

#page {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    height: 100vh;
    overflow-x: clip;
    overflow-y: auto;
}

:has(:modal[open]) #page {overflow: hidden;}

#main-container {
    flex: 1;
    display: flex;
    flex-flow: row;
    flex-direction: column;
}

#header, #notifications, #main, #footer {
	--padding-x: var(--page-padding-x, 0);
}

#header > .large, #notifications > .large, #main > .large, #footer > .large {
    width: 100vw;
    margin-left: calc(-1 * var(--page-padding-x));
    --padding-x: var(--page-padding-x);
}

#notifications {
	margin: 0;
}

#notifications>li {
    background-color: white;
    margin-bottom: 3rem;
    border: solid 0.2rem;
    padding: 0.5rem;
    font-weight: bold;
}

#notifications>li.error {
	color: var(--color-error, red);
}

#notifications>li.warning {
	color: var(--color-warning, orange);
}

#notifications>li.success {
	color: var(--color-success, green);
}
