/*
Theme Name:   w3sh GP
Description:  Thème enfant GeneratePress (version gratuite) pour w3sh.com : accueil par rubriques, cartes 16:9, logos par rubrique, visionneuse d'images, polices auto-hébergées.
Author:       Gérald Aubard
Template:     generatepress
Version:      1.2.0
Requires at least: 6.5
Requires PHP: 7.4
License:      GNU General Public License v2 or later
Text Domain:  w3sh-gp
*/

/* ==========================================================
   1. Polices auto-hébergées (SIL Open Font License, voir assets/fonts)
   Poppins : titres et interface. Inter : texte des articles et extraits.
   ========================================================== */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/poppins-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/poppins-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-wght-italic.woff2") format("woff2");
}

/*
 * Polices de secours aux dimensions des polices du site : pendant le chargement,
 * Arial (ou Helvetica) est mise à l'échelle d'Inter et de Poppins, le texte ne
 * bouge plus quand la vraie police arrive (décalage de mise en page, CLS).
 * Valeurs mesurées sur un texte français avec les fichiers d'assets/fonts.
 */
@font-face {
	font-family: "Inter secours";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 106.51%;
	ascent-override: 90.96%;
	descent-override: 22.65%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Poppins secours";
	font-weight: 400;
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 112.35%;
	ascent-override: 93.46%;
	descent-override: 31.15%;
	line-gap-override: 8.9%;
}
@font-face {
	font-family: "Poppins secours";
	font-weight: 700;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold"), local("Liberation Sans Bold");
	size-adjust: 107.37%;
	ascent-override: 97.8%;
	descent-override: 32.6%;
	line-gap-override: 9.31%;
}

/* ==========================================================
   2. Jetons
   Contrastes WCAG mesurés : texte 15,7:1 ; secondaire 6,1:1 ;
   liens 5,2:1 sur le fond gris, 5,8:1 sur blanc.
   L'orange de marque (#DD8500, 2,8:1 sur blanc) ne porte jamais de texte
   clair : décor, soulignés, ou fond sous du texte noir (6,4:1).
   ========================================================== */
:root {
	--w3-bg: #F4F4F4;
	--w3-surface: #FFFFFF;
	--w3-text: #1B1B1B;
	--w3-text-2: #333333;
	--w3-muted: #5C5C5C;
	--w3-line: #E3E3E3;
	--w3-orange: #DD8500;
	--w3-link: #9A5400;
	--w3-link-hover: #7A4300;
	--w3-footer: #161616;
	--w3-footer-text: #E6E6E6;
	--w3-footer-link: #F2A33A;
	--w3-vide: linear-gradient(135deg, #2A2A2A, #4A4A4A); /* carte sans image */
	--w3-ombre: 0 1px 2px rgba(0, 0, 0, 0.06);
	--w3-ombre-survol: 0 10px 24px rgba(0, 0, 0, 0.1);
	--w3-radius: 12px;
	--w3-gap: 28px;
	--w3-lecture: 44rem;
	--w3-article: 1000px;
	--w3-sans: "Poppins", "Poppins secours", system-ui, -apple-system, "Segoe UI", sans-serif;
	--w3-texte: "Inter", "Inter secours", -apple-system, "Helvetica Neue", Arial, sans-serif;

	/* Variables de GeneratePress : ce fichier est chargé après son CSS dynamique. */
	--contrast: var(--w3-text);
	--contrast-2: var(--w3-muted);
	--base-2: var(--w3-bg);
	--base-3: var(--w3-surface);
	--accent: var(--w3-link);
}
@media (max-width: 640px) {
	:root { --w3-gap: 16px; }
}

/* ==========================================================
   3. Base
   ========================================================== */
body,
button,
input,
select,
textarea {
	font-family: var(--w3-sans);
}
body {
	background: var(--w3-bg);
	color: var(--w3-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
	font-family: var(--w3-sans);
	font-weight: 700;
	color: var(--w3-text);
	line-height: 1.2;
	text-wrap: balance;
}
a { color: var(--w3-link); }
a:hover,
a:focus { color: var(--w3-link-hover); }
:focus-visible {
	outline: 3px solid var(--w3-link);
	outline-offset: 2px;
}
::selection { background: var(--w3-orange); color: var(--w3-footer); }

/* Boutons, y compris « retour en haut » de GeneratePress. */
button,
input[type="submit"],
input[type="button"],
a.button,
a.generate-back-to-top {
	background: var(--w3-text);
	color: #FFFFFF;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}
button,
input[type="submit"],
input[type="button"],
a.button {
	padding: 12px 22px;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover,
a.button:focus,
a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
	background: var(--w3-link-hover);
	color: #FFFFFF;
}

/* ==========================================================
   4. En-tête et navigation
   ========================================================== */
.site-header {
	background: var(--w3-surface);
	border-bottom: 1px solid var(--w3-line);
}
.site-header .inside-header {
	padding-top: 14px;
	padding-bottom: 14px;
}
.header-image {
	width: auto;
	max-height: 64px;
}
.main-navigation,
.main-navigation ul ul {
	background: var(--w3-surface);
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--w3-text);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
}
/* Boutons du menu (mobile, recherche) : pas de fond noir des boutons ordinaires. */
.main-navigation .menu-toggle,
.main-navigation .menu-bar-item > a {
	background: transparent;
}
/* GeneratePress écrit ses couleurs de survol avec :not([class*="current-menu-"]) :
   on reprend la même spécificité pour l'emporter. */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--w3-text);
	background: transparent;
}
/* Soulignement orange sous l'entrée survolée ou en cours. */
.main-navigation .main-nav > ul > li > a {
	background-image: linear-gradient(var(--w3-orange), var(--w3-orange));
	background-repeat: no-repeat;
	background-position: 50% calc(100% - 14px);
	background-size: 0 3px;
	transition: background-size 0.2s ease;
}
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li:focus-within > a,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
	background-size: calc(100% - 40px) 3px;
}
.main-navigation .main-nav ul ul {
	border: 1px solid var(--w3-line);
	border-radius: 0 0 var(--w3-radius) var(--w3-radius);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.main-navigation .main-nav ul ul li a {
	font-size: 14px;
	font-weight: 500;
	padding-top: 10px;
	padding-bottom: 10px;
}

@media (max-width: 768px) {
	.site-header .inside-header {
		padding: 10px 16px;
	}
	.header-image {
		max-height: 44px;
	}
	/* Menu ouvert sur mobile : séparateurs fins, cibles de 48 px, sans soulignement. */
	.main-navigation.toggled .main-nav li {
		border-top: 1px solid var(--w3-line);
	}
	.main-navigation.toggled .main-nav ul li a {
		line-height: 48px;
		background-image: none;
	}
}

/* ==========================================================
   5. Badge de catégorie et méta
   ========================================================== */
.w3-badge {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--w3-link);
}
.w3-badge::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 2px;
	background: var(--w3-orange);
	vertical-align: 1px;
}
.w3-badge:hover,
.w3-badge:focus {
	color: var(--w3-link-hover);
	text-decoration: underline;
}

.entry-meta,
.w3-card__meta {
	font-size: 13px;
	color: var(--w3-muted);
}
.entry-meta > span + span::before,
.w3-card__meta > * + *::before {
	content: "·";
	margin: 0 8px;
}
.entry-meta a { color: var(--w3-muted); }

/* ==========================================================
   6. Cartes
   Une seule apparence pour les cartes de l'accueil (.w3-card, HTML du thème)
   et celles des listes (.w3-liste-item, structure de GeneratePress).
   ========================================================== */
.w3-card,
.w3-liste-item .inside-article {
	display: flex;
	flex-direction: column;
	background: var(--w3-surface);
	border-radius: var(--w3-radius);
	overflow: hidden;
	box-shadow: var(--w3-ombre);
	transition: box-shadow 0.2s ease;
}
.w3-card:hover,
.w3-liste-item .inside-article:hover {
	box-shadow: var(--w3-ombre-survol);
}

/* Image : un lien vers l'article, comme le titre. */
.w3-card__media,
.w3-liste-item .post-image {
	display: block;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--w3-line);
}
.w3-card__media img,
.w3-liste-item .post-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.w3-card__media:hover img,
.w3-liste-item .post-image a:hover img {
	transform: scale(1.04);
}
/* Article sans image : bloc neutre de même hauteur. */
.w3-card__vide,
.w3-liste-item:not(.has-post-thumbnail) .inside-article::before {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--w3-vide);
}
.w3-liste-item:not(.has-post-thumbnail) .inside-article::before {
	content: "";
	aspect-ratio: 16 / 9;
}

.w3-card__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 20px;
}
.w3-liste-item .entry-header {
	padding: 18px 20px 0;
}

/* Titre : souligné orange au survol du titre ou de l'image (même destination). */
.w3-card__titre,
.w3-liste-item .entry-title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
}
.w3-card__titre a,
.w3-liste-item .entry-title a {
	color: var(--w3-text);
	text-decoration: none;
}
.w3-card__titre a:hover,
.w3-card__titre a:focus,
.w3-card:has(.w3-card__media:hover) .w3-card__titre a,
.w3-liste-item .entry-title a:hover,
.w3-liste-item .entry-title a:focus,
.w3-liste-item:has(.post-image a:hover) .entry-title a {
	color: var(--w3-text);
	text-decoration: underline;
	text-decoration-color: var(--w3-orange);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.w3-card__extrait,
.w3-liste-item .entry-summary {
	font-family: var(--w3-texte);
	font-size: 16px;
	line-height: 1.5;
	color: var(--w3-text-2);
}
.w3-card__extrait {
	margin: 0 0 12px;
}
.w3-liste-item .entry-summary {
	margin: 0;
	padding: 4px 20px 20px;
}
.w3-liste-item .entry-summary p { margin: 0; }
.w3-card__meta {
	margin: auto 0 0;
}

/* Grande carte « À la une » */
.w3-card--une .w3-card__corps {
	padding: 22px 26px 26px;
}
.w3-card--une .w3-card__titre {
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.15;
}
.w3-card--une .w3-card__extrait {
	font-size: 18px;
}

/*
 * Carte en ligne : vignette à gauche, titre à droite. Variante « ligne » de la
 * colonne « À la une », et, sur téléphone, cartes 2 à 4 de chaque rubrique
 * (la première reste grande, la page est trois fois moins longue).
 */
.w3-card--ligne {
	flex-direction: row;
}
.w3-card--ligne .w3-card__media {
	flex: 0 0 38%;
	aspect-ratio: auto;
}
.w3-card--ligne .w3-card__corps {
	padding: 14px 16px;
}
.w3-card--ligne .w3-card__titre {
	font-size: 16px;
}
.w3-card--ligne .w3-badge {
	margin-bottom: 4px;
}
@media (max-width: 640px) {
	.w3-grille .w3-card + .w3-card {
		flex-direction: row;
	}
	.w3-grille .w3-card + .w3-card .w3-card__media {
		flex: 0 0 38%;
		aspect-ratio: auto;
	}
	.w3-grille .w3-card + .w3-card .w3-card__corps {
		padding: 14px 16px;
	}
	.w3-grille .w3-card + .w3-card .w3-card__titre {
		font-size: 16px;
	}
	.w3-grille .w3-card + .w3-card .w3-card__extrait {
		display: none;
	}
}

/* ==========================================================
   7. Accueil par rubriques
   ========================================================== */
.w3-accueil .site-main > * + * {
	margin-top: 56px;
}
.w3-une {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--w3-gap);
	margin-top: 8px;
}
.w3-une__suite {
	display: grid;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.w3-rubrique__tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--w3-text);
}
.w3-rubrique__titre {
	margin: 0;
	font-size: 26px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.w3-rubrique__tout {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
.w3-rubrique__tout::after { content: " →"; }
.w3-grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--w3-gap);
}
.w3-grille--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.w3-fil__suite {
	margin: 32px 0 0;
	text-align: center;
}

@media (max-width: 1024px) {
	.w3-une { grid-template-columns: minmax(0, 1fr); }
	.w3-une__suite {
		grid-template-rows: none;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* Tablette : les trois cartes en ligne redeviennent des cartes verticales. */
	.w3-une__suite .w3-card--ligne { flex-direction: column; }
	.w3-une__suite .w3-card--ligne .w3-card__media {
		flex: none;
		aspect-ratio: 16 / 9;
	}
	.w3-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.w3-accueil .site-main {
		padding-left: 16px;
		padding-right: 16px;
	}
	.w3-accueil .site-main > * + * { margin-top: 40px; }
	.w3-une__suite { grid-template-columns: minmax(0, 1fr); }
	.w3-une__suite .w3-card--ligne { flex-direction: row; }
	.w3-une__suite .w3-card--ligne .w3-card__media {
		flex: 0 0 38%;
		aspect-ratio: auto;
	}
	.w3-grille,
	.w3-grille--3 { grid-template-columns: minmax(0, 1fr); }
	.w3-rubrique__titre { font-size: 21px; }
}

/* ==========================================================
   8. Listes d'articles (catégories, étiquettes, recherche, page 2…)
   ========================================================== */
.w3-listing .site-main {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--w3-gap);
}
.w3-listing .site-main > * {
	margin: 0;
	grid-column: 1 / -1;
}
.w3-listing .site-main > .w3-liste-item {
	grid-column: auto;
}
.w3-listing .page-header {
	background: transparent;
	padding: 8px 0 12px;
	border-bottom: 3px solid var(--w3-text);
}
.w3-listing .page-title {
	margin: 0;
	font-size: clamp(28px, 4vw, 40px);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.w3-listing .taxonomy-description {
	margin-top: 8px;
	color: var(--w3-muted);
}
.w3-liste-item .inside-article {
	height: 100%;
	padding: 0;
}
.w3-listing .paging-navigation {
	background: transparent;
	padding: 8px 0;
	text-align: center;
}
@media (max-width: 1024px) {
	.w3-listing .site-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.w3-listing .site-main { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   9. Article
   Carte de 1 000 px autour d'une colonne de 44rem (70 à 80 caractères),
   texte en Inter 18 px.
   ========================================================== */
.single-post .site-main > * {
	max-width: var(--w3-article);
	margin-left: auto;
	margin-right: auto;
}
.single-post .inside-article {
	border-radius: var(--w3-radius);
}
.single-post .entry-header,
.single-post .entry-content,
.single-post footer.entry-meta {
	max-width: var(--w3-lecture);
	margin-left: auto;
	margin-right: auto;
}
.single-post .entry-title {
	margin-bottom: 14px;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1.15;
}
/* Même spécificité que la règle [class*="page-header-"] de GeneratePress (marges à 0 et 2em). */
.single-post .inside-article > .featured-image {
	max-width: var(--w3-lecture);
	margin: 24px auto 32px;
}
/*
 * Image mise en avant : place réservée dès le chargement (largeur pleine,
 * proportions des attributs width/height) et hauteur plafonnée : un logo carré
 * ou une photo verticale est réduit dans ce cadre au lieu de manger l'écran.
 */
.single-post .featured-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(60vh, 480px);
	object-fit: contain;
	border-radius: var(--w3-radius);
}
.single-post .entry-content {
	font-family: var(--w3-texte);
	font-size: 18px;
	line-height: 1.7;
}
/* Chapô : premier paragraphe. */
.single-post .entry-content > p:first-child {
	font-size: 20px;
	line-height: 1.55;
	font-weight: 500;
}
.single-post .entry-content h2,
.single-post .entry-content h3 {
	margin-top: 1.6em;
	/* « pretty » remplit les lignes en évitant un mot seul à la fin ;
	   « balance » (titres de page et de cartes) égaliserait les lignes. */
	text-wrap: pretty;
}
.single-post .entry-content h2 { font-size: 26px; }
.single-post .entry-content h3 { font-size: 21px; }
.single-post .entry-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.single-post .entry-content strong { font-weight: 650; }
.single-post .entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 4px solid var(--w3-orange);
	font-style: italic;
	color: var(--w3-text-2);
}
.single-post .entry-content figure,
.single-post .entry-content img {
	border-radius: 8px;
}
.single-post .entry-content figcaption,
.single-post .entry-content .wp-caption-text,
.single-post .entry-content table {
	font-family: var(--w3-sans);
}
.single-post .entry-content figcaption,
.single-post .entry-content .wp-caption-text {
	font-size: 13px;
	color: var(--w3-muted);
}
.single-post .entry-content table {
	font-size: 15px;
}
.single-post footer.entry-meta {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--w3-line);
}
@media (max-width: 640px) {
	.single-post .inside-article { padding: 24px 18px; }
	.single-post .entry-content { font-size: 17px; }
	.single-post .entry-content > p:first-child { font-size: 18px; }
}

/* ==========================================================
   10. Pied de page
   ========================================================== */
.site-info,
.site-footer {
	background: var(--w3-footer);
	color: var(--w3-footer-text);
}
.site-info a,
.site-footer a { color: var(--w3-footer-link); }
.site-info .inside-site-info {
	flex-direction: column;
	gap: 8px;
}
.copyright {
	font-size: 13px;
	color: #B3B3B3;
}
.w3-pied {
	width: 100%;
	padding: 28px 0 0;
}
/*
 * Liens séparés par quatre points en carré (repris de GA-One). Les liens
 * s'étirent pour remplir chaque ligne : le séparateur placé avant le premier
 * lien d'une ligne déborde à gauche de la liste et il est rogné.
 */
.w3-pied__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 0;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	clip-path: inset(0 0 0 3px);
}
.w3-pied__liste > li {
	position: relative;
	flex: 1 1 auto;
	padding: 0 12px;
	text-align: center;
}
.w3-pied__liste > li + li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -3px; /* centré sur la limite entre deux liens */
	width: 2px;
	height: 2px;
	margin-top: -3px;
	background: currentColor;
	box-shadow: 4px 0 currentColor, 0 4px currentColor, 4px 4px currentColor;
	opacity: 0.55;
	pointer-events: none;
}

/* ==========================================================
   11. Visionneuse d'images (assets/js/visionneuse.js)
   ========================================================== */
.w3-lb-ouvrable { cursor: zoom-in; }
html.w3-lb-ouverte { overflow: hidden; }
.w3-lb {
	position: fixed;
	inset: 0;
	z-index: 100000; /* au-dessus de la bannière de cookies */
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 72px;
	grid-template-rows: 64px minmax(0, 1fr) 44px;
	align-items: center;
	background: rgba(12, 12, 12, 0.97);
	color: #F2F2F2;
}
.w3-lb[hidden] { display: none; }
.w3-lb__figure {
	grid-column: 2;
	grid-row: 1 / 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: 56px 0 44px;
}
.w3-lb__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 170px);
	object-fit: contain;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.18s ease;
}
.w3-lb__img.est-charge { opacity: 1; }
.w3-lb__legende {
	max-width: 70ch;
	margin-top: 14px;
	font-family: var(--w3-texte);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	color: #DADADA;
}
.w3-lb__compteur {
	grid-column: 1 / 4;
	grid-row: 3;
	margin: 0;
	font-size: 13px;
	text-align: center;
	color: #A8A8A8;
}
.w3-lb__bouton {
	position: relative;
	z-index: 1; /* au-dessus de la figure, qui occupe toute la grille sur téléphone */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #FFFFFF;
	cursor: pointer;
	transition: background 0.15s ease;
}
.w3-lb__bouton:hover,
.w3-lb__bouton:focus {
	background: rgba(255, 255, 255, 0.22);
	color: #FFFFFF;
}
.w3-lb__bouton:focus-visible {
	outline: 3px solid var(--w3-orange);
	outline-offset: 2px;
}
.w3-lb__fermer { grid-column: 3; grid-row: 1; }
.w3-lb__prec { grid-column: 1; grid-row: 2; }
.w3-lb__suiv { grid-column: 3; grid-row: 2; }
.w3-lb--unique .w3-lb__prec,
.w3-lb--unique .w3-lb__suiv,
.w3-lb--unique .w3-lb__compteur { display: none; }
@media (max-width: 640px) {
	/* Téléphone : image sur toute la largeur, flèches en bas de part et d'autre du compteur. */
	.w3-lb {
		grid-template-columns: 64px minmax(0, 1fr) 64px;
		grid-template-rows: 60px minmax(0, 1fr) 72px;
	}
	.w3-lb__figure {
		grid-column: 1 / 4;
		padding: 60px 8px 72px;
	}
	.w3-lb__img { max-height: calc(100vh - 220px); }
	.w3-lb__prec,
	.w3-lb__suiv { grid-row: 3; }
	.w3-lb__legende {
		padding: 0 8px;
		font-size: 14px;
	}
}

/* ==========================================================
   12. Mouvement réduit : ni transitions ni zoom.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.w3-card__media:hover img,
	.w3-liste-item .post-image a:hover img {
		transform: none;
	}
}