/* G2 Theme, chrome : header collant papier + footer noir. DA « Riso Zine ». */

/* ============================ HEADER ============================ */
.g2-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--g2-paper);
	border-bottom: var(--g2-rule);
}

.g2-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* --- Marque --- */
/* La marque peut rétrécir : tant que Bagel Fat One n'est pas chargée, la
   police de repli est plus large et le nom du site poussait le burger hors de
   l'écran sur les petits téléphones (9px de trop à 320px en espagnol). Le nom
   se rogne alors à droite au lieu de déplacer le reste. */
.g2-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 auto;
	min-width: 0;
	text-decoration: none;
}
.g2-header__logo { width: 34px; height: auto; display: block; flex: none; }
.g2-header__brand-name {
	font-family: var(--g2-font-display);
	font-size: 27px;
	line-height: 1;
	white-space: nowrap;
	text-transform: lowercase;
	color: var(--g2-blue);
	text-shadow: 3px 2px 0 var(--g2-pink);
	/* clip sur l'axe horizontal seulement : jambages et ombre restent entiers. */
	min-width: 0;
	overflow-x: clip;
	padding-right: 4px;
}

/* --- Slogan central --- */
.g2-header__slogan {
	flex: 1;
	margin: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: lowercase;
}
/* Si le slogan ne tient pas sur une ligne (allemand), il se coupe entre ses
   deux phrases, jamais au milieu de la phrase barrée. */
.g2-header__slogan span { display: inline-block; }
.g2-header__slogan-strike {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--g2-pink);
}

/* --- Burger (mobile) --- */
.g2-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 48px;
	height: 44px;
	flex: none;
	margin-left: auto;
	padding: 0;
	background: var(--g2-pink);
	border: var(--g2-bd);
	box-shadow: var(--g2-sh-blue-3);
	cursor: pointer;
}
.g2-burger span {
	width: 20px;
	height: 3px;
	background: var(--g2-ink);
}

/* --- Groupe de droite --- */
.g2-header__right {
	display: flex;
	align-items: center;
	gap: 22px;
}

.g2-navpill {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	text-transform: lowercase;
	text-decoration: none;
	padding: 6px 12px;
	transition: background-color .15s ease, color .15s ease;
}
.g2-navpill--pink { background: var(--g2-pink); color: var(--g2-ink); }
.g2-navpill--pink:hover { background: var(--g2-ink); color: var(--g2-paper); }
.g2-navpill--blue { background: var(--g2-blue); color: #fff; }
.g2-navpill--blue:hover { background: var(--g2-ink); color: #fff; }

/* --- Switcher de langue --- */
.g2-langs {
	display: flex;
	gap: 10px;
	font-size: 13px;
}
.g2-langs__item {
	color: var(--g2-ink);
	text-decoration: none;
}
a.g2-langs__item:hover { color: var(--g2-blue); }
.g2-langs__item--current {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--g2-pink);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}

/* ============================ FOOTER ============================ */
.g2-footer {
	background: var(--g2-ink);
	color: var(--g2-on-ink);
}
.g2-footer__inner {
	padding-top: 64px;
	padding-bottom: 30px;
}

/* Le slogan en grand : la première moitié barrée à l'encre bleue. */
.g2-footer__big {
	font-family: var(--g2-font-display);
	font-size: 72px;
	line-height: .95;
	text-transform: lowercase;
	color: var(--g2-pink);
	margin: 0 0 48px;
}
.g2-footer__big span { display: block; }
.g2-footer__big-strike {
	text-decoration: line-through;
	text-decoration-thickness: 6px;
	text-decoration-color: var(--g2-blue);
}

.g2-footer__cols {
	display: flex;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
	border-top: 2px dashed rgba(242, 237, 227, .5);
	padding-top: 32px;
}
.g2-footer__brandcol {
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.g2-footer__brand {
	align-self: flex-start;
	font-family: var(--g2-font-display);
	font-size: 24px;
	line-height: 1.1;
	text-transform: lowercase;
	color: #fff;
	text-decoration: none;
}
.g2-footer__brand:hover { color: var(--g2-pink); }
.g2-footer__blurb {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--g2-on-ink-soft);
}

.g2-footer__linkgroups { display: flex; gap: 56px; flex-wrap: wrap; }
.g2-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
}
.g2-footer__col-title {
	font-weight: 700;
	text-transform: lowercase;
	color: var(--g2-pink);
	margin-bottom: 4px;
}
.g2-footer__col a { color: var(--g2-on-ink); text-decoration: none; }
.g2-footer__col a:hover { color: var(--g2-pink); }

.g2-footer__legal {
	margin-top: 36px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	color: var(--g2-on-ink-dim);
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1180px) {
	.g2-header__slogan { display: none; }
}

/* Le burger arrive dès 960px, pas 760 comme sur la maquette : celle-ci ne
   montre que l'anglais et 4 langues. Avec « la revista del placer femenino »
   ou « das magazin für weibliche lust » et les 5 langues de la prod, la rangée
   demande 870px de contenu (mesuré en espagnol), soit 934px d'écran. Même
   seuil dans assets/js/main.js. */
@media (max-width: 960px) {
	.g2-header__inner {
		flex-wrap: nowrap;
		position: relative;
		gap: 14px;
	}
	.g2-burger { display: flex; }

	/* Le groupe de droite devient un tiroir sous le header. */
	.g2-header__right {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		background: var(--g2-paper);
		border-top: var(--g2-rule);
		border-bottom: var(--g2-rule);
		padding: 18px;
	}
	body.nav-open .g2-header__right { display: flex; }
	.g2-header__right > a { text-align: center; padding: 13px 18px; font-size: 16px; white-space: normal; }
	.g2-langs { justify-content: center; gap: 22px; font-size: 15px; }
}

@media (max-width: 760px) {
	.g2-header__brand-name { font-size: clamp(17px, 6vw, 27px); }

	.g2-footer__big { font-size: 40px; }
	.g2-footer__cols { gap: 32px; }
}