/* =========================================================
   AG INFORMATIQUE 81 SHOP
   BASE GLOBALE
========================================================= */

:root {
	--color-primary: #0868d7;
	--color-primary-light: #0878f9;
	--color-primary-dark: #0454b5;
	--color-primary-soft: #eaf4ff;

	--color-dark: #0b1118;
	--color-dark-soft: #1a222c;

	--color-text: #171b20;
	--color-text-muted: #667085;

	--color-background: #ffffff;
	--color-background-alt: #f6f8fa;

	--color-border: #dde3ea;

	--color-success: #178a4b;
	--color-warning: #b96a08;
	--color-error: #c62828;

	--container-width: 1280px;

	--radius-small: 9px;
	--radius: 14px;
	--radius-large: 22px;

	--shadow-small:
		0 6px 20px rgba(11, 17, 24, 0.05);

	--shadow:
		0 16px 45px rgba(11, 17, 24, 0.08);

	--transition: 0.17s ease;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;

	background: var(--color-background);

	color: var(--color-text);

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;

	font-size: 16px;

	line-height: 1.6;

	-webkit-font-smoothing: antialiased;
}

body.mobile-menu-open {
	overflow: hidden;
}

img {
	display: block;

	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-primary);

	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	cursor: pointer;
}

.container {
	width:
		min(
			calc(100% - 40px),
			var(--container-width)
		);

	margin-right: auto;
	margin-left: auto;
}

.screen-reader-text {
	position: absolute !important;

	overflow: hidden;

	width: 1px;
	height: 1px;

	margin: -1px;
	padding: 0;

	border: 0;

	clip: rect(0, 0, 0, 0);

	white-space: nowrap;
}


/* =========================================================
   BOUTONS
========================================================= */

.button,
button.button,
input.button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	min-height: 46px;

	padding:
		11px
		19px;

	border:
		1px solid transparent;

	border-radius: 10px;

	font-size: 0.9rem;
	font-weight: 750;

	text-decoration: none;

	transition:
		transform var(--transition),
		background var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.button:hover {
	text-decoration: none;
}

.button--primary {
	background:
		linear-gradient(
			135deg,
			var(--color-primary-light),
			var(--color-primary-dark)
		);

	box-shadow:
		0 8px 20px rgba(8, 104, 215, 0.18);

	color: #ffffff;
}

.button--primary:hover {
	transform: translateY(-1px);

	box-shadow:
		0 12px 27px rgba(8, 104, 215, 0.24);
}

.button--secondary {
	border-color: var(--color-border);

	background: #ffffff;

	color: var(--color-dark);
}

.button--secondary:hover {
	border-color: #b5d6f7;

	background: var(--color-primary-soft);

	color: var(--color-primary);
}

.button--light {
	background: #ffffff;

	color: var(--color-primary);
}

.button--large {
	min-height: 52px;

	padding:
		13px
		23px;
}


/* =========================================================
   TOPBAR
========================================================= */

.site-topbar {
	min-height: 34px;

	background: var(--color-dark);

	color:
		rgba(
			255,
			255,
			255,
			0.72
		);

	font-size: 0.75rem;
}

.site-topbar__inner {
	display: flex;

	align-items: center;
	justify-content: space-between;

	min-height: 34px;

	gap: 25px;
}

.site-topbar a {
	color: #ffffff;

	font-weight: 700;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
	position: relative;

	z-index: 100;

	border-bottom:
		1px solid var(--color-border);

	background:
		rgba(
			255,
			255,
			255,
			0.98
		);
}

.site-header__inner {
	display: flex;

	align-items: center;

	min-height: 82px;

	gap: 30px;
}


/* =========================================================
   MARQUE
========================================================= */

.site-brand {
	display: inline-flex;

	align-items: center;

	flex: 0 0 auto;

	gap: 12px;

	color: var(--color-dark);
}

.site-brand:hover {
	text-decoration: none;
}

.site-brand__mark {
	display: grid;

	flex: 0 0 48px;

	place-items: center;

	width: 48px;
	height: 48px;

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			var(--color-primary-light),
			var(--color-primary-dark)
		);

	box-shadow:
		0 7px 18px rgba(8, 104, 215, 0.2);

	color: #ffffff;

	font-size: 1.1rem;
	font-weight: 850;

	letter-spacing: -0.05em;
}

.site-brand__text {
	display: grid;
}

.site-brand__text strong {
	color: var(--color-dark);

	font-size: 1rem;

	line-height: 1.15;
}

.site-brand__text small {
	margin-top: 3px;

	color: var(--color-text-muted);

	font-size: 0.7rem;
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-navigation {
	display: flex;

	align-items: center;
	justify-content: center;

	flex: 1;

	gap: 6px;
}

.site-navigation a {
	padding:
		9px
		11px;

	border-radius: 8px;

	color: var(--color-dark-soft);

	font-size: 0.84rem;
	font-weight: 650;

	transition:
		color var(--transition),
		background var(--transition);
}

.site-navigation a:hover {
	background: var(--color-primary-soft);

	color: var(--color-primary);

	text-decoration: none;
}


/* =========================================================
   ACTIONS HEADER
========================================================= */

.site-header__actions {
	display: flex;

	align-items: center;

	flex: 0 0 auto;

	gap: 9px;
}

.header-account {
	display: inline-flex;

	align-items: center;

	min-height: 42px;

	padding:
		9px
		13px;

	border:
		1px solid var(--color-border);

	border-radius: 9px;

	color: var(--color-dark);

	font-size: 0.8rem;
	font-weight: 700;
}

.header-account:hover {
	border-color: #b8d7f7;

	background: var(--color-primary-soft);

	color: var(--color-primary);

	text-decoration: none;
}

.header-cart {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	min-height: 42px;

	padding:
		9px
		13px;

	border-radius: 9px;

	background: var(--color-primary);

	color: #ffffff;

	font-size: 0.8rem;
	font-weight: 750;
}

.header-cart:hover {
	background: var(--color-primary-dark);

	text-decoration: none;
}

.header-cart svg {
	width: 20px;
	height: 20px;

	fill: currentColor;
}

.header-cart__count {
	display: grid;

	place-items: center;

	min-width: 21px;
	height: 21px;

	padding: 0 5px;

	border-radius: 999px;

	background: #ffffff;

	color: var(--color-primary);

	font-size: 0.67rem;
	font-weight: 850;
}


/* =========================================================
   MENU MOBILE
========================================================= */

.mobile-menu-toggle {
	display: none;

	width: 43px;
	height: 43px;

	padding: 9px;

	border:
		1px solid var(--color-border);

	border-radius: 9px;

	background: #ffffff;
}

.mobile-menu-toggle > span:not(
	.screen-reader-text
) {
	display: block;

	width: 100%;
	height: 2px;

	margin: 5px 0;

	border-radius: 999px;

	background: var(--color-dark);
}

.mobile-navigation {
	display: none;

	border-top:
		1px solid var(--color-border);

	background: #ffffff;
}

.mobile-navigation--open {
	display: block;
}

.mobile-navigation__inner {
	display: grid;

	padding-top: 13px;
	padding-bottom: 18px;
}

.mobile-navigation a {
	padding:
		12px
		4px;

	border-bottom:
		1px solid var(--color-border);

	color: var(--color-dark);

	font-size: 0.9rem;
	font-weight: 650;
}


/* =========================================================
   CONTENU GÉNÉRIQUE
========================================================= */

.site-main {
	min-height: 500px;
}

.generic-content {
	padding:
		70px
		0;
}

.generic-content h1 {
	margin-top: 0;

	color: var(--color-dark);

	font-size:
		clamp(
			2.5rem,
			5vw,
			4rem
		);

	letter-spacing: -0.05em;

	line-height: 1;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
	background: var(--color-dark);

	color:
		rgba(
			255,
			255,
			255,
			0.66
		);
}

.site-footer__grid {
	display: grid;

	grid-template-columns:
		1.35fr
		0.8fr
		0.9fr
		0.9fr;

	gap: 60px;

	padding-top: 62px;
	padding-bottom: 52px;
}

.site-brand--footer {
	color: #ffffff;
}

.site-brand--footer
.site-brand__text strong {
	color: #ffffff;
}

.site-brand--footer
.site-brand__text small {
	color:
		rgba(
			255,
			255,
			255,
			0.6
		);
}

.site-footer__brand p {
	max-width: 330px;

	margin:
		19px
		0
		0;

	font-size: 0.82rem;

	line-height: 1.7;
}

.site-footer__column {
	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 8px;
}

.site-footer__column h2 {
	margin:
		0
		0
		7px;

	color: #ffffff;

	font-size: 0.88rem;
}

.site-footer__column a,
.site-footer__column span {
	color:
		rgba(
			255,
			255,
			255,
			0.64
		);

	font-size: 0.79rem;
}

.site-footer__column a:hover {
	color: #ffffff;

	text-decoration: none;
}

.site-footer__bottom {
	border-top:
		1px solid
		rgba(
			255,
			255,
			255,
			0.08
		);
}

.site-footer__bottom-inner {
	display: flex;

	align-items: center;
	justify-content: space-between;

	min-height: 62px;

	gap: 20px;

	font-size: 0.72rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {

	.site-navigation {
		display: none;
	}

	.mobile-menu-toggle {
		display: block;
	}

	.site-header__inner {
		justify-content: space-between;
	}

}


@media (max-width: 800px) {

	.site-footer__grid {
		grid-template-columns:
			1fr
			1fr;

		gap: 40px;
	}

}


@media (max-width: 620px) {

	.container {
		width:
			min(
				calc(100% - 24px),
				var(--container-width)
			);
	}

	.site-topbar {
		display: none;
	}

	.site-header__inner {
		min-height: 70px;

		gap: 12px;
	}

	.site-brand__mark {
		flex-basis: 42px;

		width: 42px;
		height: 42px;

		font-size: 0.95rem;
	}

	.site-brand__text strong {
		font-size: 0.88rem;
	}

	.site-brand__text small {
		display: none;
	}

	.header-account {
		display: none;
	}

	.header-cart {
		padding:
			8px
			10px;
	}

	.header-cart__label {
		display: none;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;

		gap: 32px;

		padding-top: 48px;
		padding-bottom: 42px;
	}

	.site-footer__bottom-inner {
		align-items: flex-start;

		flex-direction: column;

		justify-content: center;

		gap: 2px;

		padding:
			14px
			0;
	}

}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

:focus-visible {
	outline:
		3px solid
		rgba(8, 104, 215, 0.3);

	outline-offset: 3px;
}


/* =========================================================
   RÉDUCTION DES ANIMATIONS
========================================================= */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;

		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

}

/* =========================================================
   FOOTER - LIENS LÉGAUX
========================================================= */

.site-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.08);

	padding: 18px 0;

	background: rgba(255, 255, 255, 0.015);
}

.site-footer__legal-nav {
	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: center;

	gap: 0;
}

.site-footer__legal-nav a {
	position: relative;

	display: inline-flex;

	align-items: center;

	padding: 4px 14px;

	color: rgba(255, 255, 255, 0.64);

	font-size: 0.78rem;
	font-weight: 500;

	line-height: 1.4;

	text-decoration: none;

	transition:
		color 0.16s ease,
		background 0.16s ease;
}

.site-footer__legal-nav a:hover,
.site-footer__legal-nav a:focus-visible {
	color: #ffffff;
}

.site-footer__legal-nav a:not(:last-child)::after {
	content: "";

	position: absolute;

	top: 50%;
	right: 0;

	width: 1px;
	height: 12px;

	background: rgba(255, 255, 255, 0.16);

	transform: translateY(-50%);
}

.site-footer__legal-nav a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;

	border-radius: 4px;
}


/* =========================================================
   BAS DU FOOTER
========================================================= */

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__bottom-inner {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 20px;

	padding-top: 18px;
	padding-bottom: 18px;

	color: rgba(255, 255, 255, 0.5);

	font-size: 0.72rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 820px) {

	.site-footer__legal {
		padding: 16px 0;
	}

	.site-footer__legal-nav {
		gap: 6px 0;
	}

	.site-footer__legal-nav a {
		padding: 5px 10px;

		font-size: 0.74rem;
	}

	.site-footer__bottom-inner {
		flex-direction: column;

		align-items: center;

		gap: 7px;

		text-align: center;
	}

}

@media (max-width: 560px) {

	.site-footer__legal-nav {
		flex-direction: column;

		gap: 2px;
	}

	.site-footer__legal-nav a {
		padding: 5px 8px;
	}

	.site-footer__legal-nav a::after {
		display: none;
	}

}