/*
	Theme Name: WD
	Theme URI:
	Description: Thème de base WordPress. ACF Pro, Rank Math. Police et couleurs à régler par projet.
	Version: 1.0
	Author: WD
	Text Domain: wd
*/

/* ============================================================
   Tokens — à adapter au kickoff (--font, --color-*)
   ============================================================ */

:root {
	--color-blanc: #ffffff;
	--color-noir: #111111;
	--color-accent: #111111;

	--font: system-ui, sans-serif;

	--font-s: 1rem;
	--font-m: 1.25rem;
	--font-l: 1.875rem;
	--font-xl: 3.25rem;
	--font-xxl: 6rem;

	--space-0: 0;
	--space-5: 0.5rem;
	--space-15: 0.9375rem;
	--space-30: 1.875rem;
	--space-50: 3.125rem;
	--space-100: 6.25rem;
}

/* -------- Reset -------- */

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--font-s);
	line-height: 1.5;
	background: var(--color-blanc);
	color: var(--color-noir);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

iframe,
video {
	max-width: 100%;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

h1,
h2,
h3,
p,
ul,
figure {
	margin: 0;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* -------- Typo -------- */

.txt-s { font-size: var(--font-s); }
.txt-m { font-size: var(--font-m); }
.txt-l { font-size: var(--font-l); }
.txt-xl { font-size: var(--font-xl); }
.txt-xxl { font-size: var(--font-xxl); }

.txt-thin { font-weight: 200; }
.txt-regular { font-weight: 400; }
.txt-medium { font-weight: 500; }
.txt-bold { font-weight: 700; }

.txt-low { text-transform: lowercase; }
.txt-up { text-transform: uppercase; }

.lh-tight { line-height: 1.15; }
.lh-title { line-height: 1.05; }

.txt-stroke {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--color-accent);
}

/* -------- Espacements -------- */

.pt0 { padding-top: var(--space-0); }
.pt5 { padding-top: var(--space-5); }
.pt15 { padding-top: var(--space-15); }
.pt30 { padding-top: var(--space-30); }
.pt50 { padding-top: var(--space-50); }
.pt100 { padding-top: var(--space-100); }

.pb0 { padding-bottom: var(--space-0); }
.pb5 { padding-bottom: var(--space-5); }
.pb15 { padding-bottom: var(--space-15); }
.pb30 { padding-bottom: var(--space-30); }
.pb50 { padding-bottom: var(--space-50); }
.pb100 { padding-bottom: var(--space-100); }

.mt0 { margin-top: var(--space-0); }
.mt5 { margin-top: var(--space-5); }
.mt15 { margin-top: var(--space-15); }
.mt30 { margin-top: var(--space-30); }
.mt50 { margin-top: var(--space-50); }
.mt100 { margin-top: var(--space-100); }

.mb0 { margin-bottom: var(--space-0); }
.mb5 { margin-bottom: var(--space-5); }
.mb15 { margin-bottom: var(--space-15); }
.mb30 { margin-bottom: var(--space-30); }
.mb50 { margin-bottom: var(--space-50); }
.mb100 { margin-bottom: var(--space-100); }

@media (min-width: 992px) {
	.pl15 { padding-left: var(--space-15); }
	.pr15 { padding-right: var(--space-15); }
	.pl30 { padding-left: var(--space-30); }
	.pr30 { padding-right: var(--space-30); }
	.pl50 { padding-left: var(--space-50); }
	.pr50 { padding-right: var(--space-50); }
	.plr15 {
		padding-left: var(--space-15);
		padding-right: var(--space-15);
	}
	.plr30 {
		padding-left: var(--space-30);
		padding-right: var(--space-30);
	}
}

@media (max-width: 991px) {
	.mb30-mobil { margin-bottom: var(--space-30); }
	.mb50-mobil { margin-bottom: var(--space-50); }
	.mb100-mobil { margin-bottom: var(--space-100); }
	.pt30-mobil { padding-top: var(--space-30); }
	.pb30-mobil { padding-bottom: var(--space-30); }
}

/* -------- Grille -------- */

.container {
	width: min(1120px, calc(100% - 3rem));
	margin-inline: auto;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--space-15) * -1);
	margin-right: calc(var(--space-15) * -1);
}

.row > [class*="col-"] {
	width: 100%;
	padding-left: var(--space-15);
	padding-right: var(--space-15);
}

.col-12 { width: 100%; }
.col-6 { width: 50%; }

.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }

@media (min-width: 768px) {
	.col-md-3 { width: 25%; }
	.col-md-4 { width: 33.333%; }
	.col-md-6 { width: 50%; }
	.col-md-8 { width: 66.666%; }
	.col-md-9 { width: 75%; }
}

@media (min-width: 1024px) {
	.col-lg-3 { width: 25%; }
	.col-lg-4 { width: 33.333%; }
	.col-lg-6 { width: 50%; }
	.col-lg-8 { width: 66.666%; }
	.col-lg-12 { width: 100%; }
}

/* -------- Boutons -------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	font-size: var(--font-s);
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--color-noir);
	background: var(--color-noir);
	color: var(--color-blanc);
}

.btn-ghost {
	background: transparent;
	color: var(--color-noir);
}

.btn:hover,
.btn:focus-visible {
	text-decoration: none;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
	background: var(--color-noir);
	color: var(--color-blanc);
}

/* -------- Lien d'évitement -------- */

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100%;
	z-index: 100;
	padding: 0.5rem 0.75rem;
	background: var(--color-blanc);
	color: var(--color-noir);
}

.skip-link:focus {
	top: 1rem;
}

/* -------- Header -------- */

body.nav-open {
	overflow: hidden;
}

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-blanc);
	color: var(--color-noir);
}

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 22px;
	padding-bottom: 22px;
}

.brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.brand-logo {
	height: 48px;
	width: auto;
}

.nav-links {
	display: flex;
	gap: 26px;
	align-items: center;
}

.nav-links ul {
	display: flex;
	gap: 26px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links a {
	text-decoration: none;
	font-size: var(--font-s);
	position: relative;
	padding: 4px 0;
}

.nav-links a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links .current-menu-item > a::after,
.nav-links .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.nav-links a.menu-btn,
.nav-links .menu-btn > a {
	padding: 10px 16px;
	border: 1px solid currentColor;
}

.nav-links a.menu-btn::after,
.nav-links .menu-btn > a::after {
	display: none;
}

.nav-toggle {
	display: none;
	padding: 8px;
}

.admin-bar header.nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar header.nav {
		top: 46px;
	}
}

@media (max-width: 1080px) {
	.nav-toggle {
		display: flex;
		align-items: center;
	}

	.nav-links {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 40;
		flex-direction: column;
		align-items: flex-start;
		gap: 36px;
		padding: 36px 24px 48px;
		background: var(--color-blanc);
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		pointer-events: none;
	}

	.nav.open .nav-links {
		clip-path: inset(0 0 0 0);
		visibility: visible;
		pointer-events: auto;
	}

	.nav-links ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 36px;
		width: 100%;
	}

	.nav-links a {
		font-size: var(--font-m);
	}
}

/* -------- Fil d'Ariane -------- */

.breadcrumb {
	font-size: var(--font-s);
	padding-top: var(--space-30);
	padding-bottom: var(--space-15);
}

.breadcrumb p,
.breadcrumb .rank-math-breadcrumb {
	margin: 0;
}

.breadcrumb a {
	text-decoration: none;
}

.breadcrumb .sep,
.breadcrumb .separator {
	margin: 0 0.75rem;
}

/* -------- Bloc image + texte -------- */

.img-txt {
	padding-top: var(--space-50);
	padding-bottom: var(--space-50);
}

.img-txt__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-50);
	align-items: center;
}

.img-txt__media img {
	width: 100%;
	height: auto;
}

.img-txt__content .mt30 {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

@media (max-width: 900px) {
	.img-txt__grid {
		grid-template-columns: 1fr;
	}
}

/* -------- Footer -------- */

footer {
	padding: var(--space-100) 0 var(--space-30);
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-50);
	padding-bottom: var(--space-50);
}

.footer-logo {
	width: auto;
	height: 48px;
	margin-bottom: var(--space-15);
}

.footer-tagline {
	max-width: 38ch;
}

.footer-col-title {
	font-size: var(--font-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--space-15);
}

.footer-col ul,
.footer-col .menu {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.footer-col a {
	text-decoration: none;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-15);
	padding-top: var(--space-30);
	border-top: 1px solid currentColor;
	font-size: var(--font-s);
}

.footer-bottom nav ul,
.footer-bottom .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-bottom a {
	text-decoration: none;
}

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* -------- Accessibilité -------- */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}