@import "./_programme.css";
@import "./_main.css";
@import "./_header.css";
@import "./_intervenants.css";
@import "./_infos.css";
@import "./_footer.css";
@import "./_mozilla.css";

:root {
	--bg: #ffffff;
	--text: #1a1a1a;
	--muted: #6b7280;
	--brand: #7822E5;
	/* Violet charte */
	--accent: #CF1178;
	/* Rose charte */
	--brand-600: #6c1fd1;
	--brand-100: #f3e9ff;
	--surface: #f6f7fb;
	--ring: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
	--radius: 14px;
	--shadow: 0 10px 30px rgba(0, 0, 0, .08);

	--border-color: rgba(120, 34, 229, .1);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


body {
	margin: 0;
	font-family: 'Josefin Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 1.1rem;
	/* échelle réduite */
	font-weight: 500;
	line-height: 1.55;
	background-color: #ffffff;
	color: #606060;
}

.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	background: #fff;
	padding: .5rem 1rem;
	border-radius: .5rem;
	box-shadow: var(--shadow)
}


/* CTAs */
.btn {
	display: flex;
	border-radius: 999px;
	padding: 1vh 1.5vw;
	max-height: 4.5vh;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-weight: 700;
	transition: all .2s ease
}

.btn-primary {
	color: #ffffff;
	background-color: var(--accent)
}

.btn-primary:hover {
	color: #ffffff;
	background-color: var(--brand)
}

.btn:active {
	transform: translateY(1px)
}

.btn-secondary {
	width: fit-content;
	color: #ffffff;
	background-color: var(--brand-600)
}

.btn-secondary:hover {
	color: #ffffff;
	background-color: var(--brand)
}