/* G2 Theme : Home « Porn for Women » (DA Riso Zine).
   Hero + collage · annuaire (grandes cartes, petites cartes penchées)
   · Guides/FAQ sur fond bleu · derniers articles. */

/* ====================== HERO ====================== */
.g2-hero { padding-top: 56px; padding-bottom: 72px; }
.g2-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 56px;
	align-items: center;
}
.g2-hero__title { line-height: .92; margin-bottom: 30px; }
.g2-hero__para {
	max-width: 540px;
	margin: 0;
	text-wrap: pretty;
}

/* --- Collage : bloc rose de travers, photo bleue, ruban, tampon --- */
.g2-collage { position: relative; height: 560px; }
.g2-collage__block {
	position: absolute;
	inset: 24px 0 0 44px;
	background: var(--g2-pink);
	transform: rotate(3deg);
}
.g2-collage__photo {
	position: absolute;
	inset: 0 44px 24px 0;
	border: var(--g2-bd);
	transform: rotate(-2deg);
}
.g2-collage__photo .g2-duo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	filter: grayscale(1) contrast(1.3);
}
.g2-collage__tape {
	top: -12px;
	left: 30%;
	width: 120px;
	height: 28px;
}
.g2-collage__stamp {
	position: absolute;
	right: 6px;
	top: -14px;
	z-index: 2;
	transform: rotate(8deg);
}

/* ====================== ANNUAIRE ====================== */
.g2-directory {
	padding-top: 80px;
	padding-bottom: 40px;
	scroll-margin-top: 70px;
}
.g2-directory__head { margin-bottom: 34px; }
.g2-directory__head .g2-h2 { margin-bottom: 10px; }
.g2-directory__sub { font-size: 14px; margin: 0; }

/* --- Grandes cartes --- */
.g2-bigcards {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-bottom: 48px;
}
.g2-bigcard {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	background: var(--g2-white);
	border: var(--g2-bd);
	box-shadow: var(--g2-sh-blue-8);
}
.g2-bigcard__media {
	position: relative;
	min-height: 360px;
	background: var(--g2-ink);
	overflow: hidden;
}
.g2-bigcard__pick {
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 2;
	padding: 5px 10px;
	transform: rotate(-3deg);
}
.g2-bigcard__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 30px 32px;
	border-left: var(--g2-bd);
}

/* En-tête de carte : nom + sous-titre + pastille de note. */
.g2-cardhead {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}
.g2-cardhead__name {
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 44px;
	line-height: .95;
	color: var(--g2-blue);
	margin: 0;
}
.g2-cardhead__sub {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: lowercase;
}
.g2-rate {
	flex: none;
	width: 68px;
	height: 68px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--g2-pink);
	border: var(--g2-bd);
	border-radius: 50%;
	transform: rotate(-8deg);
}
.g2-rate__num {
	font-family: var(--g2-font-display);
	font-size: 23px;
	line-height: .9;
	margin-bottom: 3px;
}
.g2-rate__max { font-size: 10px; font-weight: 700; line-height: 1.2; }

.g2-bigcard__blurb { font-size: 13.5px; line-height: 1.7; margin: 0; }

/* Les points forts, précédés d'un « + » bleu. */
.g2-points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 14px;
	list-style: none;
	margin: 0;
	padding: 12px 0 0;
	border-top: var(--g2-rule);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: lowercase;
}
.g2-points li::before { content: '+ '; color: var(--g2-blue); }

.g2-bigcard__foot {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: auto;
}
.g2-reassure {
	font-size: 11px;
	line-height: 1.5;
	text-transform: lowercase;
	color: var(--g2-muted);
}

/* --- « More worth your time » --- */
.g2-more {
	display: flex;
	align-items: baseline;
	gap: 6px 16px;
	flex-wrap: wrap;
	margin: 0 0 24px;
}
.g2-more__title {
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1;
	text-transform: lowercase;
	margin: 0;
}
.g2-more__sub { font-size: 13px; font-weight: 700; text-transform: lowercase; }

/* --- Petites cartes --- */
.g2-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.g2-card {
	display: flex;
	flex-direction: column;
	background: var(--g2-white);
	border: var(--g2-bd);
}
.g2-card__media {
	aspect-ratio: 16 / 10;
	border-bottom: var(--g2-bd);
}
/* La photo quitte la bichromie au survol de la carte. */
.g2-card__media .g2-duo__img { transition: filter .2s ease; }
.g2-card:hover .g2-duo__img { filter: none; mix-blend-mode: normal; }
.g2-card__rate {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 2;
	background: var(--g2-paper);
	border: var(--g2-bd);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	padding: 4px 8px;
}
.g2-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 20px;
}
.g2-card__name {
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 27px;
	line-height: 1;
	color: var(--g2-blue);
	margin: 0;
}
.g2-card__tags {
	display: flex;
	gap: 4px 10px;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 700;
	text-transform: lowercase;
}
.g2-card__blurb { font-size: 13px; line-height: 1.65; margin: 0; }
.g2-card__cta {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 8px;
	font-size: 14px;
}

/* ====================== GUIDES / FAQ ====================== */
.g2-guides {
	position: relative;
	/* clip (et pas hidden) : rogne le rond de trame sans faire de la section un
	   conteneur de défilement, ce qui décrocherait l'en-tête collant. */
	overflow: hidden;
	overflow: clip;
	margin-top: 60px;
	background: var(--g2-blue);
	color: #fff;
	border-top: var(--g2-bd);
	border-bottom: var(--g2-bd);
	scroll-margin-top: 70px;
}
.g2-guides__dots { right: -60px; top: -60px; opacity: .9; }
.g2-guides__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 56px;
	align-items: start;
	padding-top: 80px;
	padding-bottom: 80px;
}
.g2-guides__head { position: sticky; top: 110px; }
.g2-guides__logo { width: 120px; height: auto; display: block; margin-bottom: 24px; }
.g2-guides__head .g2-sticker { margin-bottom: 20px; }

.g2-faq { display: flex; flex-direction: column; }
.g2-faq__item { border-bottom: 2px dashed rgba(255, 255, 255, .7); }
.g2-faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
}
.g2-faq__q::-webkit-details-marker { display: none; }
.g2-faq__q:focus-visible { outline-color: #fff; }
.g2-faq__num {
	flex: none;
	background: var(--g2-paper);
	color: var(--g2-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	padding: 3px 7px;
}
.g2-faq__qtext {
	flex: 1;
	font-family: var(--g2-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}
.g2-faq__sign {
	flex: none;
	width: 28px;
	text-align: center;
	font-family: var(--g2-font-display);
	font-size: 28px;
	line-height: 1;
}
.g2-faq__sign::before { content: '+'; }
.g2-faq__item[open] .g2-faq__sign::before { content: '\2212'; }
.g2-faq__a {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 0 24px 58px;
}
.g2-faq__a p { font-size: 14px; line-height: 1.75; margin: 0; }

/* ====================== DERNIERS ARTICLES ====================== */
.g2-latest { padding-top: 80px; padding-bottom: 90px; }
.g2-latest__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}
.g2-latest__all { font-size: 15px; }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 960px) {
	.g2-hero__grid, .g2-bigcard, .g2-guides__inner { grid-template-columns: minmax(0, 1fr); }
	.g2-bigcard__media { min-height: 0; aspect-ratio: 16 / 10; }
	.g2-bigcard__body { border-left: 0; border-top: var(--g2-bd); }
	.g2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g2-guides__head { position: static; }
}

@media (max-width: 760px) {
	.g2-hero { padding-top: 40px; padding-bottom: 56px; }
	.g2-hero__grid { gap: 44px; }
	.g2-collage { height: 480px; }
	.g2-directory { padding-top: 56px; }
	.g2-bigcards { gap: 32px; }
	.g2-bigcard__body { padding: 24px 20px 26px; }
	.g2-cardhead__name { font-size: 38px; }
	.g2-cards { grid-template-columns: 1fr; }
	.g2-guides__inner { padding-top: 56px; padding-bottom: 56px; gap: 36px; }
	.g2-guides__dots { right: -100px; top: -100px; }
	.g2-latest { padding-top: 56px; padding-bottom: 64px; }
}

@media (max-width: 480px) {
	.g2-collage { height: 440px; }
	.g2-collage__stamp { font-size: 12px; padding: 8px 10px; }
	.g2-cardhead__name { font-size: 34px; overflow-wrap: anywhere; }
	.g2-points { grid-template-columns: 1fr; }
	.g2-faq__a { padding-left: 0; }
}