/* G2 Theme : pages WP classiques (page.php). DA Riso Zine.
   Page « à propos » dessinée, pages légales en carte blanche, pages simples
   (bandeau + photo + prose). */

/* ====================== BANDEAU (pages simples et légales) ====================== */
.g2-page-hero { padding-top: 56px; padding-bottom: 52px; }
.g2-page-hero__back {
	display: inline-block;
	font-size: 13px;
	margin-bottom: 26px;
}
.g2-page-hero__title { --g2-h1: 84px; margin-bottom: 22px; }
.g2-page-hero__intro { max-width: 680px; margin: 0 0 22px; text-wrap: pretty; }
.g2-page-hero__meta { transform: rotate(-1.5deg); }

.g2-page__photo { padding-top: 60px; }
.g2-page__body {
	max-width: var(--g2-maxw-prose);
	padding-top: 64px;
	padding-bottom: 96px;
}

/* ====================== PAGES LÉGALES ====================== */
.g2-page--legal .g2-page__body { max-width: var(--g2-maxw-legal); }

/* La prose vit dans une carte blanche à ombre bleue. */
.g2-prose.g2-legal {
	background: var(--g2-white);
	border: var(--g2-bd);
	box-shadow: var(--g2-sh-blue-8);
	padding: 48px 52px 36px;
	font-size: 14.5px;
	line-height: 1.8;
}
.g2-prose.g2-legal p { margin: 0 0 16px; }
.g2-prose.g2-legal strong { background: none; }

/* Titre de section numéroté : le numéro dans un carré rose de travers
   (cf. g2_number_prose_headings() dans inc/page.php). */
.g2-prose.g2-legal .g2-h--num {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 28px;
	line-height: 1.05;
	color: var(--g2-ink);
	text-shadow: none;
	margin: 44px 0 14px;
}
.g2-prose.g2-legal > .g2-h--num:first-child { margin-top: 0; }
.g2-num {
	flex: none;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	background: var(--g2-pink);
	border: var(--g2-bd);
	transform: rotate(-4deg);
}

/* Lignes de cookies (cf. g2_legal_cookie_rows()). */
.g2-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 4px 0 18px;
}
.g2-row {
	background: var(--g2-white);
	border: var(--g2-bd);
	padding: 16px 18px;
}
.g2-row--soft { background: var(--g2-paper); }
.g2-row__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.g2-row__title { font-size: 14.5px; font-weight: 700; }
.g2-row__badge {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: lowercase;
	padding: 3px 8px;
	background: var(--g2-blue);
	color: #fff;
}
.g2-row__badge--pink { background: var(--g2-pink); color: var(--g2-ink); }
.g2-prose.g2-legal .g2-row p { margin: 0; }

/* ====================== À PROPOS ====================== */
.g2-about-hero {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 64px;
	padding-bottom: 60px;
}
.g2-about-hero__title { --g2-h1: 78px; max-width: 960px; }
.g2-about-hero__intro { max-width: 680px; margin: 0; text-wrap: pretty; }

/* --- Photo --- */
.g2-about__photo { padding-top: 60px; }
.g2-about__photo .g2-photo__block { inset: 20px -16px -16px 22px; transform: rotate(1.2deg); }
.g2-about__photo .g2-photo__frame { transform: rotate(-.8deg); }
.g2-about__photo .g2-duo__img { background-position: center 32%; }
.g2-about__stamp {
	position: absolute;
	right: 22px;
	top: -16px;
	z-index: 2;
	transform: rotate(7deg);
}

/* --- Citation en grand --- */
.g2-about__quote {
	max-width: var(--g2-maxw-narrow);
	padding-top: 80px;
	padding-bottom: 20px;
}
.g2-about__quote p {
	font-family: var(--g2-font-display);
	font-size: 42px;
	line-height: 1.1;
	text-wrap: balance;
	margin: 0;
}
/* L'aplat ne monte pas jusqu'en haut de sa ligne : à cet interligne serré il
   mangerait les jambages et la ponctuation de la ligne du dessus. */
.g2-about__quote .g2-hl {
	padding: 0 8px;
	background: linear-gradient(transparent 16%, var(--g2-pink) 16%);
}

.g2-about__pre { max-width: var(--g2-maxw-prose); padding-top: 40px; }

/* --- Section texte : titre à gauche, paragraphes à droite --- */
.g2-about__split { padding-top: 60px; padding-bottom: 60px; }
.g2-about__split + .g2-about__split { padding-top: 0; }
.g2-about__splitgrid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 48px;
	border-top: var(--g2-rule);
	padding-top: 48px;
}
.g2-about__text {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-size: 15px;
	line-height: 1.8;
}
.g2-about__text p { margin: 0; }
.g2-about__text strong { font-weight: 700; background: linear-gradient(transparent 58%, var(--g2-marker) 58%); }

/* --- Section cartes : les promesses numérotées --- */
.g2-about__cards { padding-top: 20px; padding-bottom: 80px; }
.g2-about__cards > .g2-h2 { margin-bottom: 34px; }
.g2-about__cardgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.g2-about__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--g2-white);
	border: var(--g2-bd);
	padding: 22px 22px 24px;
}
.g2-about__num {
	font-family: var(--g2-font-display);
	font-size: 44px;
	line-height: .9;
	color: var(--g2-blue);
	text-shadow: 3px 3px 0 var(--g2-pink);
}
.g2-about__cardtext { font-size: 14px; font-weight: 700; line-height: 1.65; }
/* La carte de clôture, en noir. */
.g2-about__card--ink {
	justify-content: flex-end;
	background: var(--g2-ink);
	color: var(--g2-paper);
}
.g2-about__card--ink p { font-size: 14px; line-height: 1.7; margin: 0; }
.g2-about__cards > .g2-prose { margin-top: 34px; }

/* --- Bande bleue --- */
.g2-about__band {
	position: relative;
	overflow: hidden;
	background: var(--g2-blue);
	color: #fff;
	border-top: var(--g2-bd);
	border-bottom: var(--g2-bd);
}
.g2-about__dots { left: -70px; bottom: -70px; width: 320px; height: 320px; }
.g2-about__bandgrid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	padding-top: 80px;
	padding-bottom: 80px;
}
.g2-about__bandgrid--solo { grid-template-columns: minmax(0, 760px); }
.g2-about__bandcol { display: flex; flex-direction: column; gap: 18px; }
.g2-about__bandcol p { font-size: 14.5px; line-height: 1.8; margin: 0; }
.g2-about__bandcol a { color: #fff; }

/* --- Citation de clôture --- */
.g2-about__closing {
	max-width: var(--g2-maxw-narrow);
	padding-top: 90px;
	padding-bottom: 90px;
	text-align: center;
}
.g2-about__closingquote {
	font-family: var(--g2-font-display);
	font-size: 48px;
	line-height: 1.05;
	text-wrap: balance;
	margin: 0 0 18px;
}
.g2-about__closingcite { font-size: 15px; font-weight: 700; margin: 0; }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 960px) {
	.g2-about__splitgrid, .g2-about__bandgrid { grid-template-columns: 1fr; }
	.g2-about__splitgrid { gap: 28px; }
	.g2-about__cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.g2-page-hero { padding-top: 40px; padding-bottom: 40px; }
	.g2-page__body { padding-top: 44px; padding-bottom: 64px; }
	.g2-prose.g2-legal { padding: 26px 20px 14px; }
	/* Titre en flex à côté de son numéro : un mot long (« Haftungsbeschränkung »)
	   ne peut pas passer à la ligne et pousserait la carte hors de l'écran. */
	.g2-prose.g2-legal .g2-h--num {
		font-size: 23px;
		gap: 12px;
		margin-top: 36px;
		overflow-wrap: anywhere;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.g2-num { width: 34px; height: 34px; font-size: 15px; }

	.g2-about-hero { padding-top: 44px; padding-bottom: 44px; }
	/* Ici le H1 est une phrase entière (l'accroche) : un cran plus petit que les
	   autres H1, sinon il occupe tout le premier écran d'un téléphone. */
	.g2-about-hero__title { font-size: 44px; }
	.g2-about__dots { display: none; }
	.g2-about__photo { padding-top: 44px; }
	.g2-about__stamp { right: 8px; font-size: 12px; padding: 8px 10px; }
	.g2-about__quote { padding-top: 56px; }
	.g2-about__quote p { font-size: 30px; }
	.g2-about__split { padding-top: 44px; padding-bottom: 44px; }
	.g2-about__splitgrid { padding-top: 36px; }
	.g2-about__cardgrid { grid-template-columns: 1fr; }
	.g2-about__cards { padding-bottom: 56px; }
	.g2-about__bandgrid { padding-top: 56px; padding-bottom: 56px; gap: 40px; }
	.g2-about__closing { padding-top: 60px; padding-bottom: 60px; }
	.g2-about__closingquote { font-size: 34px; }
}

@media (max-width: 480px) {
	.g2-about-hero__title { font-size: 36px; text-shadow: 4px 4px 0 var(--g2-pink); }
}