/* G2 Theme : primitives partagées (DA « Riso Zine »).
   Base, conteneur, titres, étiquettes, ruban, trame, boutons, bichromie,
   cartes penchées, cartes article, prose, pagination, 404, a11y.
   Le reste vit dans les CSS par gabarit. */

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

body {
	margin: 0;
	background: var(--g2-paper);
	color: var(--g2-ink);
	font-family: var(--g2-font-body);
	font-size: 15px;
	line-height: 1.75;
	/* Les cartes penchées et les aplats décalés débordent en bord d'écran. */
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--g2-blue); }
a:hover { color: var(--g2-ink); }

/* ============================ LAYOUT ============================ */
.g2-section {
	width: 100%;
	max-width: var(--g2-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--g2-pad);
	padding-right: var(--g2-pad);
}

/* Bandeau de tête des pages internes : fermé par un filet en pointillés. */
.g2-band { border-bottom: var(--g2-rule); }

/* ============================ TITRES ============================ */
/* H1 : bleu, l'encre rose calée de travers en dessous. */
.g2-h1 {
	font-family: var(--g2-font-display);
	font-weight: 400;
	/* Chaque gabarit règle sa taille de bureau par --g2-h1 ; les tailles
	   réduites (760, 480, 360) sont les mêmes partout et se décident ici. */
	font-size: var(--g2-h1, 88px);
	line-height: .95;
	color: var(--g2-blue);
	text-shadow: 6px 5px 0 var(--g2-pink);
	text-wrap: balance;
	margin: 0;
}
/* Titres de page courts (Mag, contact, pages légales) : en minuscules. */
.g2-h1--label { text-transform: lowercase; }

/* H2 de section : noir, en minuscules. */
.g2-h2 {
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 60px;
	line-height: .95;
	color: var(--g2-ink);
	text-transform: lowercase;
	text-wrap: balance;
	margin: 0;
}
.g2-h2--52 { font-size: 52px; }
.g2-h2--blue  { color: var(--g2-blue); text-shadow: 4px 3px 0 var(--g2-pink); }
.g2-h2--white { color: #fff; text-shadow: 5px 4px 0 var(--g2-pink); }

/* Mot clé sur un aplat rose. */
.g2-hl {
	background: var(--g2-pink);
	padding: 0 10px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* Mot clé en bleu, encre rose décalée. */
.g2-mis {
	color: var(--g2-blue);
	text-shadow: 4px 3px 0 var(--g2-pink);
}

/* Lien souligné au feutre rose. */
.g2-under {
	color: var(--g2-ink);
	font-weight: 700;
	text-transform: lowercase;
	text-decoration: underline;
	text-decoration-color: var(--g2-pink);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}
.g2-under:hover { color: var(--g2-blue); }

/* Mot à trait d'union gardé d'un seul tenant dans un titre (g2_nobreak()). */
.g2-nb { white-space: nowrap; }

/* ============================ ÉTIQUETTES ============================ */
.g2-sticker {
	display: inline-block;
	background: var(--g2-pink);
	color: var(--g2-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: lowercase;
	padding: 6px 12px;
	transform: rotate(-2deg);
}
.g2-sticker--ink   { background: var(--g2-ink); color: var(--g2-paper); }
.g2-sticker--paper { background: var(--g2-paper); }
.g2-sticker--framed { border: var(--g2-bd); }
/* Le tampon « 100% by women & independent » des collages. */
.g2-stamp {
	display: inline-block;
	background: var(--g2-paper);
	border: var(--g2-bd);
	color: var(--g2-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-transform: lowercase;
	padding: 10px 14px;
	max-width: 150px;
}

/* ============================ RUBAN, TRAME ============================ */
.g2-tape {
	position: absolute;
	top: -12px;
	left: 24px;
	z-index: 2;
	width: 90px;
	height: 24px;
	background: var(--g2-tape-pink);
	transform: rotate(-4deg);
	pointer-events: none;
}
.g2-tape--blue { background: var(--g2-tape-blue); }
.g2-tape--right { left: auto; right: 24px; transform: rotate(5deg); }
.g2-tape--mid   { left: 40%; transform: rotate(2deg); }

/* Rond de trame, rogné par un coin de sa section. */
.g2-halftone {
	position: absolute;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background-image: var(--g2-halftone);
	background-size: 11px 11px;
	pointer-events: none;
}

/* ============================ BOUTONS ============================ */
.g2-btn {
	display: inline-block;
	font-family: var(--g2-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: lowercase;
	text-decoration: none;
	padding: 13px 22px;
	border: 0;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.g2-btn--blue { background: var(--g2-blue); color: #fff; box-shadow: var(--g2-sh-pink-4); }
.g2-btn--pink { background: var(--g2-pink); color: var(--g2-ink); border: var(--g2-bd); box-shadow: var(--g2-sh-blue-4); }
.g2-btn:hover, .g2-btn:focus-visible { background: var(--g2-ink); color: #fff; }
.g2-btn--lg { font-size: 16px; padding: 15px 24px; }
.g2-btn--blue.g2-btn--lg { box-shadow: var(--g2-sh-pink-5); }
.g2-btn--pink.g2-btn--lg { box-shadow: var(--g2-sh-blue-5); }

/* ============================ BICHROMIE ============================ */
/* Le support porte l'encre, l'image passe par-dessus en niveaux de gris et
   se fond dedans : bleu en superposition, rose en produit. */
.g2-duo {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--g2-blue);
}
.g2-duo--pink { background: var(--g2-pink); }
.g2-duo__img {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	filter: grayscale(1) contrast(1.2);
	mix-blend-mode: screen;
}
.g2-duo--pink .g2-duo__img {
	filter: grayscale(1) contrast(1.15);
	mix-blend-mode: multiply;
}
/* Les images à la une des articles gardent leurs couleurs partout : cartes
   d'articles (accueil, Mag, articles liés, recherche, archives) et article à
   la une du Mag. Le support .g2-duo n'y sert plus que de fond quand
   l'article n'a pas d'image. La bichromie reste sur l'annuaire et le collage
   de l'accueil, et sur les pages. */
.g2-artcard__media .g2-duo__img,
.g2-feat__media .g2-duo__img { filter: none; mix-blend-mode: normal; }
/* La photo peut aussi être une vraie <img> (hero de l'accueil, pour le LCP). */
img.g2-duo__img { width: 100%; height: 100%; object-fit: cover; }

/* Photo d'ouverture posée de travers sur un aplat rose qui dépasse. Pages et
   À propos : cadre 16:9 en bichromie bleue. Article (--full) : image à la une
   entière, à sa hauteur naturelle, dans ses couleurs. */
.g2-photo { position: relative; }
.g2-photo__block {
	position: absolute;
	inset: 18px -14px -14px 18px;
	background: var(--g2-pink);
	transform: rotate(1deg);
}
.g2-photo__frame {
	aspect-ratio: 16 / 9;
	border: var(--g2-bd);
	transform: rotate(-.6deg);
}
.g2-photo--full .g2-photo__frame { aspect-ratio: auto; overflow: hidden; background: var(--g2-white); }
.g2-photo--full .g2-photo__img { display: block; width: 100%; height: auto; max-height: 900px; object-fit: contain; }

/* ============================ CARTES PENCHÉES ============================ */
.g2-tilt > * { transition: transform .2s ease; }
.g2-tilt > :nth-child(3n+1) { transform: rotate(-1deg); }
.g2-tilt > :nth-child(3n+2) { transform: rotate(.8deg); }
.g2-tilt > :nth-child(3n)   { transform: rotate(-.5deg); }
.g2-tilt > *:hover { transform: rotate(0deg) translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
	.g2-tilt > *, .g2-btn { transition: none; }
}

/* ============================ VIDÉO + SON ============================ */
.g2-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.g2-sound {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	font-family: var(--g2-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: lowercase;
	color: var(--g2-ink);
	background: var(--g2-paper);
	border: var(--g2-bd);
	padding: 6px 10px;
	cursor: pointer;
}
.g2-sound:hover { background: var(--g2-pink); }
.g2-sound__on { display: none; }
.g2-sound--on .g2-sound__on  { display: inline; }
.g2-sound--on .g2-sound__off { display: none; }

/* ============================ CARTES ARTICLE ============================ */
.g2-articles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.g2-artcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--g2-white);
	border: var(--g2-bd);
	text-decoration: none;
	color: var(--g2-ink);
}
.g2-artcard:hover { color: var(--g2-ink); }
.g2-artcard__media {
	aspect-ratio: 4 / 3;
	border-bottom: var(--g2-bd);
}
.g2-artcard__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 24px;
}
.g2-artcard__title {
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.05;
	margin: 0;
}
.g2-artcard__excerpt {
	font-size: 13px;
	line-height: 1.65;
	margin: 0;
}
.g2-artcard__more {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
	text-transform: lowercase;
	color: var(--g2-blue);
}

/* ============================ PROSE ============================ */
.g2-prose {
	font-family: var(--g2-font-text);
	font-size: 17px;
	line-height: 1.7;
	/* Une adresse ou un mot plus long que la colonne se coupe au lieu de la pousser. */
	overflow-wrap: break-word;
}
.g2-prose p { margin: 0 0 20px; }
.g2-prose > *:first-child { margin-top: 0; }

/* Gras simple : le surligneur rose a été retiré des articles (05/10/2026). */
.g2-prose strong { font-weight: 700; }
.g2-prose a {
	color: var(--g2-blue);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.g2-prose a:hover { color: var(--g2-ink); }
.g2-prose a strong, .g2-prose strong:has(> a) { background: none; }

.g2-prose h2 {
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 38px;
	line-height: 1;
	color: var(--g2-blue);
	text-shadow: 3px 3px 0 var(--g2-pink);
	text-wrap: balance;
	margin: 52px 0 18px;
}
.g2-prose h3 {
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.1;
	color: var(--g2-ink);
	text-wrap: balance;
	margin: 38px 0 12px;
}
.g2-prose h4 {
	font-size: 16px;
	font-weight: 700;
	margin: 28px 0 10px;
}

/* Listes : le « + » bleu des fiches plateformes, la numérotation en gras. */
.g2-prose ul, .g2-prose ol { margin: 0 0 20px; padding: 0; list-style: none; }
.g2-prose li { position: relative; margin: 0 0 10px; padding-left: 26px; }
.g2-prose ul > li::before {
	content: '+';
	position: absolute;
	left: 2px;
	top: 0;
	font-weight: 700;
	color: var(--g2-blue);
}
/* Listes où la rédaction pose ses propres puces (cases à cocher, émojis) :
   ni « + » ni retrait. */
.g2-prose ul.g2-checklist > li,
.g2-prose ul[style*="list-style:none"] > li,
.g2-prose .g2-win__card ul > li { padding-left: 0; }
.g2-prose ul.g2-checklist > li::before,
.g2-prose ul[style*="list-style:none"] > li::before,
.g2-prose .g2-win__card ul > li::before { content: none; }

.g2-prose ol { counter-reset: g2ol; }
.g2-prose ol > li { counter-increment: g2ol; padding-left: 34px; }
.g2-prose ol > li::before {
	content: counter(g2ol) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--g2-blue);
}

.g2-prose blockquote {
	margin: 34px 0;
	padding: 2px 0 2px 22px;
	border-left: 6px solid var(--g2-pink);
	font-family: var(--g2-font-display);
	font-size: 28px;
	line-height: 1.15;
	text-wrap: balance;
}
.g2-prose blockquote p { margin: 0; }
.g2-prose blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--g2-font-body);
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
}

.g2-prose figure { margin: 34px 0; }
.g2-prose figure img, .g2-prose > p > img {
	display: block;
	border: var(--g2-bd);
	box-shadow: 6px 6px 0 var(--g2-blue);
}
.g2-prose .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; }
.g2-prose .wp-block-image.aligncenter img { margin-left: auto; margin-right: auto; }
.g2-prose figcaption {
	font-family: var(--g2-font-body);
	margin-top: 14px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}
.g2-prose .wp-block-button__link {
	display: inline-block;
	font-family: var(--g2-font-body);
	font-size: 15px;
	font-weight: 700;
	text-transform: lowercase;
	text-decoration: none;
	color: var(--g2-ink);
	background: var(--g2-pink);
	border: var(--g2-bd);
	border-radius: 0;
	padding: 13px 22px;
	box-shadow: var(--g2-sh-blue-4);
}
.g2-prose .wp-block-button__link:hover { background: var(--g2-ink); color: #fff; }

/* --- Blocs colonnes du contenu (fiches podcast…) : carte blanche, angles droits --- */
.g2-prose .wp-block-columns {
	gap: 24px;
	margin: 34px 0;
}
.g2-prose .wp-block-columns.has-background,
.g2-prose .wp-block-columns[style*="border"] {
	background: var(--g2-white);
	border: var(--g2-bd) !important;
	border-radius: 0 !important;
	padding: 22px;
}
.g2-prose .wp-block-columns figure { margin: 0; }
.g2-prose .wp-block-columns img { border-radius: 0 !important; box-shadow: none; }
.g2-prose .wp-block-column > *:first-child { margin-top: 0; }
.g2-prose .wp-block-column > *:last-child { margin-bottom: 0; }

/* --- Tableaux de données --- */
.g2-prose .g2-datatable { margin: 34px 0; overflow-x: auto; padding: 0 8px 8px 0; }
.g2-prose table {
	width: 100%;
	border-collapse: collapse;
	background: var(--g2-white);
	border: var(--g2-bd);
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.55;
}
.g2-prose .g2-datatable table { margin: 0; box-shadow: 6px 6px 0 var(--g2-blue); }
.g2-prose th, .g2-prose td { padding: 12px 14px; border: var(--g2-bd); text-align: left; vertical-align: top; }
.g2-prose th { background: var(--g2-blue); color: #fff; font-family: var(--g2-font-body); font-size: 13.5px; font-weight: 700; }
/* Certains tableaux portent leur en-tête en <td><strong>, sans <thead> : on
   teinte la première ligne pour qu'elle se lise comme un en-tête. */
.g2-prose .g2-datatable--nohead tr:first-child td { background: var(--g2-pink); font-weight: 700; }
.g2-prose .g2-datatable td strong, .g2-prose .g2-datatable th strong { background: none; }
/* Sur mobile, un tableau de 3 colonnes ou plus garde une largeur lisible et
   défile dans sa figure (overflow-x: auto) au lieu de couper les mots. */
@media (max-width: 640px) {
	.g2-prose .g2-datatable table:has(tr > :nth-child(3)) { min-width: 480px; }
	.g2-prose .g2-datatable table:has(tr > :nth-child(4)) { min-width: 620px; }
}

/* --- Encadré « conseil » : tableau détourné à une seule cellule ---
   La maquette en fait un carton rose posé de travers, avec son étiquette
   noire. overflow visible : la figure .wp-block-table est défilante et
   rognerait le carton incliné. */
.g2-prose .g2-callout-table { margin: 34px 0; overflow: visible; }
.g2-prose .g2-callout-table table,
.g2-prose .g2-callout-table tbody,
.g2-prose .g2-callout-table tr {
	display: block;
	width: 100%;
	margin: 0;
	background: none;
	border: 0;
	box-shadow: none;
}
/* !important sur le fond et le contour : certains articles posent les leurs en
   style en ligne sur la cellule (une teinte d'avant la refonte). */
.g2-prose .g2-callout-table td {
	display: block;
	padding: 24px 26px;
	background: var(--g2-pink) !important;
	border: var(--g2-bd) !important;
	transform: rotate(-.6deg);
	font-size: 16px;
	line-height: 1.65;
	color: var(--g2-ink);
}
.g2-prose .g2-callout-table:nth-of-type(even) td { transform: rotate(.5deg); }
/* Le gras d'accroche devient l'étiquette. Le <br> qui le suivait dans le
   contenu ferait double interligne. */
.g2-prose .g2-callout-table td > strong:first-child + br { display: none; }
.g2-prose .g2-callout-table td > strong:first-child {
	display: block;
	width: fit-content;
	margin-bottom: 14px;
	padding: 4px 10px;
	background: var(--g2-ink);
	color: var(--g2-paper);
	font-family: var(--g2-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: lowercase;
}
/* Sur le rose, pas de surligneur rose ni de lien bleu. */
.g2-prose .g2-callout-table td strong { background: none; }
.g2-prose .g2-callout-table td > strong:first-child { background: var(--g2-ink); }
.g2-prose .g2-callout-table td a { color: var(--g2-ink); }
.g2-prose .g2-callout-table td p { margin: 0 0 12px; }
.g2-prose .g2-callout-table td > *:last-child { margin-bottom: 0; }
.g2-prose .g2-callout-table td ul > li::before,
.g2-prose .g2-callout-table td ol > li::before { color: var(--g2-ink); }

/* Encadré à liste (« à retenir » en tête d'article) : carte blanche tenue par
   un ruban, pour ne pas enchaîner les cartons roses. */
.g2-prose .g2-callout-table--list td {
	position: relative;
	background: var(--g2-white) !important;
	box-shadow: 6px 6px 0 var(--g2-blue);
	transform: rotate(.4deg);
}
.g2-prose .g2-callout-table--list td::before {
	content: '';
	position: absolute;
	top: -13px;
	left: 44px;
	width: 110px;
	height: 26px;
	background: var(--g2-tape-pink);
	transform: rotate(-3deg);
}
.g2-prose .g2-callout-table--list td > strong:first-child { background: var(--g2-blue); color: #fff; }
.g2-prose .g2-callout-table--list td ul > li::before,
.g2-prose .g2-callout-table--list td ol > li::before { color: var(--g2-blue); }

/* --- Bloc « bandeau + deux cartes » posé dans le contenu (section .g2-win,
   HTML libre avec son propre <style> aux couleurs d'avant la refonte) ---
   Même principe que la boîte auteur : on reprend le décor, pas la structure.
   Les !important répondent à ceux du <style> du bloc. */
.g2-prose .g2-win {
	margin: 40px 0;
	overflow: visible;
	background: var(--g2-white);
	border: var(--g2-bd);
	border-radius: 0;
	box-shadow: var(--g2-sh-blue-8);
}
.g2-prose .g2-win__banner {
	margin: 0 !important;
	padding: 18px 24px 20px;
	background: var(--g2-blue);
	border-bottom: var(--g2-bd);
	color: #fff !important;
	font-size: 30px !important;
	line-height: 1;
	text-shadow: 3px 2px 0 var(--g2-pink);
}
.g2-prose .g2-win__intro { padding: 20px 24px 0; margin: 0; }
.g2-prose .g2-win__grid { padding: 20px 24px 24px; }
.g2-prose .g2-win__card {
	background: var(--g2-paper);
	border: var(--g2-bd);
	border-radius: 0;
}
.g2-prose .g2-win__card h3 { font-size: 22px !important; color: var(--g2-ink); }
.g2-prose .g2-win__card li { font-size: 15px; line-height: 1.6; }
.g2-prose .g2-win__card strong { background: none; }

/* --- Boîte auteur posée dans le contenu (bloc HTML avec son propre <style>) ---
   On n'habille que le décor : flottement et largeurs restent ceux du bloc. */
.g2-prose .g2-author-box {
	background: var(--g2-white);
	border: var(--g2-bd);
	border-radius: 0;
	box-shadow: 6px 6px 0 var(--g2-blue);
	transform: rotate(1.2deg);
	font-family: var(--g2-font-body);
	line-height: 1.4;
}
.g2-prose .g2-author-box img { border: var(--g2-bd); border-radius: 0; box-shadow: none; }
.g2-prose .g2-author-box__label { font-size: 12px; font-weight: 700; text-transform: lowercase; opacity: 1; }
.g2-prose .g2-author-box__name { color: var(--g2-blue); font-size: 26px; line-height: 1.1; }
.g2-prose .g2-author-box__role { font-size: 12px; opacity: 1; }

/* ============================ PAGINATION ============================ */
.g2-pagination { margin-top: 56px; }
.g2-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.g2-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 9px 14px;
	font-size: 14px;
	font-weight: 700;
	text-transform: lowercase;
	color: var(--g2-ink);
	background: var(--g2-white);
	border: var(--g2-bd);
	text-decoration: none;
}
.g2-pagination a.page-numbers:hover { background: var(--g2-ink); color: #fff; }
.g2-pagination .page-numbers.current { background: var(--g2-blue); color: #fff; box-shadow: var(--g2-sh-pink-4); }
.g2-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ============================ 404 ============================ */
.g2-404 { position: relative; overflow: hidden; }
.g2-404__dots { right: -80px; top: -80px; width: 380px; height: 380px; }
.g2-404__inner {
	position: relative;
	max-width: var(--g2-maxw-narrow);
	padding-top: 96px;
	padding-bottom: 120px;
	text-align: center;
}
.g2-404__code {
	font-family: var(--g2-font-display);
	font-size: 240px;
	line-height: .8;
	color: var(--g2-blue);
	text-shadow: 10px 8px 0 var(--g2-pink);
	transform: rotate(-3deg);
	margin: 0 0 36px;
}
.g2-404__text {
	font-size: 15px;
	line-height: 1.75;
	max-width: 520px;
	margin: 0 auto 34px;
}
.g2-404__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.g2-404__actions .g2-under { font-size: 15px; }

/* ============================ LISTINGS GÉNÉRIQUES ============================ */
/* Recherche et archives tag/date : même bandeau que le Mag. */
.g2-listing-head { padding-top: 64px; padding-bottom: 60px; }
.g2-listing-head .g2-sticker { margin-bottom: 22px; }
.g2-listing-head__title { --g2-h1: 76px; max-width: 980px; }
.g2-listing-empty { padding-top: 64px; padding-bottom: 96px; }
.g2-listing-empty p { margin: 0 0 24px; }

/* ============================ A11Y ============================ */
.g2-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
}
.g2-skip-link:focus {
	left: 12px;
	top: 12px;
	padding: 10px 16px;
	background: var(--g2-pink);
	color: var(--g2-ink);
	border: var(--g2-bd);
	font-weight: 700;
	text-decoration: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible { outline: 3px solid var(--g2-ink); outline-offset: 3px; }

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

@media (max-width: 760px) {
	.g2-section { padding-left: var(--g2-pad-mobile); padding-right: var(--g2-pad-mobile); }
	.g2-h1 { font-size: 54px; }
	.g2-h2, .g2-h2--52 { font-size: 40px; }
	/* Un mot plus long que la ligne (allemand surtout) se coupe plutôt que de
	   sortir de l'écran. Pas de césure automatique : elle coupait aussi des
	   mots qui tenaient (« pla-taformas »). */
	.g2-h1, .g2-h2, .g2-prose h2, .g2-prose h3, .g2-artcard__title {
		overflow-wrap: break-word;
	}
	.g2-articles { grid-template-columns: 1fr; }
	.g2-prose h2 { font-size: 28px; }
	.g2-prose h3 { font-size: 22px; }
	.g2-prose blockquote { font-size: 23px; }
	.g2-prose .g2-callout-table td { padding: 20px 18px; }
	.g2-prose .g2-win { box-shadow: 5px 5px 0 var(--g2-blue); }
	.g2-prose .g2-win__banner { font-size: 24px !important; padding: 16px 18px 18px; }
	.g2-prose .g2-win__intro { padding: 18px 18px 0; }
	.g2-prose .g2-win__grid { padding: 18px; }
	.g2-photo__block { inset: 12px -8px -10px 12px; }
	/* Sur téléphone, le rond de trame se resserre dans son coin : à pleine
	   taille il passait sous les paragraphes. */
	.g2-halftone { width: 220px; height: 220px; }
	.g2-404__dots { right: -100px; top: -100px; width: 220px; height: 220px; }
	.g2-404__inner { padding-top: 72px; padding-bottom: 88px; }
	.g2-404__code { font-size: 40vw; }
}

@media (max-width: 480px) {
	.g2-h1 { font-size: 44px; }
}

/* Très petits écrans : les grands titres descendent d'un cran pour que les
   mots longs (allemand) tiennent sur la ligne sans être coupés. */
@media (max-width: 360px) {
	.g2-h1 { font-size: 38px; text-shadow: 4px 4px 0 var(--g2-pink); }
	.g2-h2, .g2-h2--52 { font-size: 34px; }
}