/* BAUD Z'YEUX – page d'attente
   Charte : Perrine Moisan (Atelier Nougatine). Coins à 90°, orange = tonique au survol. */

@font-face {
	font-family: "Nunito";
	src: url("fonts/nunito-latin-ext-wght-normal.woff2") format("woff2-variations");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Nunito";
	src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bz-jaune:   #F2B01F;
	--bz-celadon: #A3D3CA;
	--bz-canard:  #04505B;
	--bz-orange:  #ED6D22;
	--bz-creme:   #F9F5F4;

	--bz-font-text:  "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bz-font-title: var(--bz-font-text);
}

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

html, body { margin: 0; }

body.bz {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--bz-canard);
	color: var(--bz-creme);
	font-family: var(--bz-font-text);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* ---------- Mise en page ---------- */

.bz-hero {
	position: relative;
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: 0;
	padding: clamp(2rem, 6vw, 5rem) 0;
}

.bz-glasses {
	position: absolute;
	top: 50%;
	left: 0;
	width: min(46vw, 700px);
	color: var(--bz-creme);
	transform: translate(-24%, -64%);
	pointer-events: none;
}
.bz-glasses svg { display: block; width: 100%; height: auto; }

.bz-content {
	grid-column: 2;
	max-width: 34rem;
	padding: 0 1.5rem 0 0;
	position: relative;
	z-index: 1;
}

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

.bz-title {
	margin: 0 0 1.5rem;
	font-family: var(--bz-font-title);
	font-weight: 300;
	font-size: clamp(2.1rem, 4.2vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.bz-lead, .bz-date { margin: 0 0 1.25rem; }
.bz-date { margin-bottom: 2.75rem; }
.bz-date sup { font-size: .6em; }

/* ---------- Formulaire (coins à 90°) ---------- */

.bz-label { display: block; margin-bottom: .6rem; }

.bz-row { display: flex; gap: 0; max-width: 28rem; }

.bz-input {
	flex: 1;
	min-width: 0;
	padding: .8rem 1rem;
	border: 2px solid var(--bz-creme);
	border-radius: 0;
	background: var(--bz-creme);
	color: var(--bz-canard);
	font: inherit;
	font-weight: 400;
}
.bz-input::placeholder { color: #8aa9ad; }
.bz-input:focus { outline: 3px solid var(--bz-jaune); outline-offset: 2px; }

.bz-btn {
	padding: .8rem 1.25rem;
	border: 2px solid var(--bz-jaune);
	border-radius: 0;
	background: var(--bz-jaune);
	color: var(--bz-canard);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.bz-btn:hover, .bz-btn:focus-visible {
	background: var(--bz-orange);
	border-color: var(--bz-orange);
	color: var(--bz-creme);
}
.bz-btn:focus-visible { outline: 3px solid var(--bz-creme); outline-offset: 2px; }

.bz-consent {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	max-width: 28rem;
	margin-top: .9rem;
	font-size: .8rem;
	line-height: 1.4;
	color: var(--bz-celadon);
	cursor: pointer;
}
.bz-consent input {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin: .1rem 0 0;
	accent-color: var(--bz-jaune);
	border-radius: 0;
}

.bz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bz-msg {
	max-width: 28rem;
	margin: 1rem 0 0;
	padding: .7rem 1rem;
	font-weight: 600;
	font-size: .95rem;
	background: var(--bz-celadon);
	color: var(--bz-canard);
}
.bz-msg--erreur { background: var(--bz-orange); color: var(--bz-creme); }

/* ---------- Pied de page (esprit carte de visite) ---------- */

.bz-footer {
	background: var(--bz-canard);
	color: var(--bz-creme);
	border-top: 1px solid rgba(163, 211, 202, .35);
	padding: 2rem 1.5rem 1rem;
	font-size: .9rem;
}
.bz-footer__inner {
	max-width: 68rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 2.5rem;
	align-items: center;
}
.bz-footer__logo { display: block; width: 84px; color: var(--bz-creme); }
.bz-footer__logo svg { display: block; width: 100%; height: auto; }
.bz-footer__logo:hover { color: var(--bz-jaune); }
.bz-footer__contact {
	font-style: normal;
	line-height: 1.6;
	padding-left: 2.5rem;
	border-left: 3px solid var(--bz-jaune);
}
.bz-footer a { color: inherit; text-decoration: none; }
.bz-footer__contact a:hover, .bz-footer__links a:hover { color: var(--bz-jaune); }
.bz-footer__links { display: flex; flex-direction: column; gap: .4rem; text-align: right; }
.bz-footer__links a { color: var(--bz-celadon); }
.bz-footer__copy {
	max-width: 68rem;
	margin: 1.5rem auto 0;
	font-size: .75rem;
	color: var(--bz-celadon);
	opacity: .8;
}

/* ---------- Pages légales ---------- */

body.bz--page { background: var(--bz-creme); color: var(--bz-canard); }

.bz-pagehead {
	background: var(--bz-canard);
	color: var(--bz-creme);
	padding: 1.5rem max(1.5rem, calc((100% - 46rem) / 2 + 1.5rem)) clamp(2.5rem, 6vw, 4.5rem);
}
.bz-back {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: fit-content;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
	color: var(--bz-celadon);
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
}
.bz-back:hover { color: var(--bz-jaune); }
.bz-back__glasses { display: block; width: 44px; color: var(--bz-creme); }
.bz-back__glasses svg { display: block; width: 100%; height: auto; }
.bz-pagehead__title {
	margin-top: 0;
	margin-bottom: 0;
	font-family: var(--bz-font-title);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.08;
	font-size: clamp(2rem, 5vw, 3.25rem);
}
.bz-band {
	height: 14px;
	background: linear-gradient(90deg, var(--bz-jaune) 0 70%, var(--bz-celadon) 70% 92%, var(--bz-orange) 92% 100%);
}

.bz-doc {
	flex: 1;
	width: 100%;
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem clamp(3rem, 7vw, 5rem);
	font-size: 1.05rem;
	line-height: 1.65;
}
.bz-doc h2 {
	position: relative;
	margin: 2.75rem 0 .75rem;
	padding-left: 1.4rem;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.bz-doc h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: .7rem;
	height: .7rem;
	background: var(--bz-jaune);
}
.bz-doc > :first-child { margin-top: 0; }
.bz-doc p, .bz-doc ul { margin: 0 0 1rem; }
.bz-doc ul { padding-left: 1.2rem; }
.bz-doc li::marker { color: var(--bz-orange); }
.bz-doc strong { font-weight: 700; }
.bz-doc a {
	color: var(--bz-canard);
	font-weight: 600;
	text-decoration-color: var(--bz-jaune);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.bz-doc a:hover { color: var(--bz-orange); }
.bz-doc__update {
	margin-top: 3rem !important;
	padding-top: 1rem;
	border-top: 1px solid rgba(4, 80, 91, .15);
	font-size: .85rem;
	opacity: .75;
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
	.bz-hero {
		display: block;
		padding: 0;
	}
	.bz-glasses {
		position: relative;
		top: 0;
		width: 82vw;
		max-width: 440px;
		transform: translate(-18%, -12%);
		margin-bottom: -4vw;
	}
	.bz-content {
		padding: 0 1.25rem 2.5rem;
		max-width: none;
	}
	.bz-title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
	.bz-row { flex-direction: column; gap: .6rem; }
	.bz-btn { width: 100%; }
	.bz-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; justify-items: start; }
	.bz-footer__contact { padding-left: 1rem; }
	.bz-footer__links { text-align: left; flex-direction: row; gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.bz-btn { transition: none; }
}