/*
Theme Name:   WaM GP
Description:  Thème enfant GeneratePress (version gratuite) pour wearemobians.com : apparence de GA-Mag (en-tête noir, grande Une, grille de cartes, barre latérale), Public Sans auto-hébergée, réglages de GA-Mag repris.
Author:       Gérald Aubard
Template:     generatepress
Version:      1.0.1
Requires at least: 6.7
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wam-gp
*/

/* ==========================================================
   1. Jetons (couleurs et ombres de GA-Mag)
   Les réglages du Personnaliseur remplacent ces valeurs (inc/customizer.php).
   ========================================================== */
:root {
	--wam-dark: #090909;
	--wam-text: #27272a;
	--wam-muted: #747474;
	--wam-border: #e5e5e5;
	--wam-shadow: 0 8px 30px rgb(0 0 0 / 7%);
	--wam-card-shadow: none;
	--wam-card-border: 1px solid transparent;
	--wam-card-hover-opacity: .35;
	--wam-image-radius: 0px;
	--wam-font: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--wam-gutter: clamp(18px, 2.57vw, 35px);
}

/* ==========================================================
   2. Base
   ========================================================== */
body {
	color: var(--wam-text);
	font-family: var(--wam-font);
	font-size: 14px;
	line-height: 1.5;
}
body,
button,
input,
select,
textarea {
	font-family: var(--wam-font);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wam-font);
	font-weight: 700;
}
a {
	text-decoration: none;
}
:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--accent), white 20%);
	outline-offset: 3px;
}

/* Cadre blanc de 1 340 px centré sur le fond d'écran, comme GA-Mag. */
.site-header,
.site.grid-container,
.site-footer {
	box-shadow: var(--wam-shadow);
}
.site.grid-container {
	background: #fff;
}

/* Colonnes de GA-Mag : contenu souple, barre latérale de 25 % (au moins 220 px),
   34 px d'écart, marges de 35 px. Remplace les largeurs fixes de GeneratePress. */
.site-content {
	flex-wrap: wrap;
	column-gap: 34px;
}
/* Une et titre d'archive : première ligne, sur toute la largeur. */
.site-content > .featured-hero {
	flex: 0 0 calc(100% - 2 * var(--wam-gutter));
}
.site-content > .archive-header {
	flex: 0 0 100%;
}
.right-sidebar .site-content .content-area {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}
.right-sidebar .site-content .is-right-sidebar {
	flex: 0 0 max(220px, 25%);
	width: auto;
}
.one-container.right-sidebar .site-main {
	margin-right: 0;
}
/* GeneratePress ajoute 48 px sous chaque élément « .post » d'une liste
   (sélecteur très spécifique) : sans objet pour les cartes et la Une. */
.post-card,
.featured-hero {
	padding-bottom: 0 !important;
}

/* ==========================================================
   3. En-tête et menu
   ========================================================== */
.site-header {
	position: relative;
	z-index: 50;
}
.inside-header {
	min-height: 108px;
	gap: 36px;
}
.site-logo {
	flex: 0 0 280px;
	max-width: 280px;
}
.site-logo img,
.site-header .header-image {
	width: 100%;
	max-height: 88px;
	object-fit: contain;
	object-position: left center;
}
.main-navigation .main-nav ul li a {
	font-size: .86rem;
	font-weight: 700;
}
.main-navigation .main-nav ul ul {
	min-width: 220px;
	padding: 10px 0;
	box-shadow: var(--wam-shadow);
}
.main-navigation .main-nav ul ul li a {
	padding-top: 9px;
	padding-bottom: 9px;
	line-height: 1.5;
}
.main-navigation .menu-bar-items {
	gap: 16px;
	margin-left: 18px;
}
.menu-bar-item.social-link,
.main-navigation .menu-bar-item > a {
	display: flex;
	align-items: center;
	padding: 8px;
	color: #fff;
}
.menu-bar-item.social-link svg,
.main-navigation .menu-bar-item svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.menu-bar-item.social-link:hover,
.menu-bar-item.social-link:focus-visible {
	color: var(--accent);
}
.wam-menu-widgets {
	display: none;
}
/* Sur un article, WordPress signale aussi ses catégories (« current-menu-parent ») :
   GA-Mag ne colorait que la page en cours et ses ancêtres de menu. */
.main-navigation .main-nav ul li.current-menu-parent:not(.current-menu-item):not(.current-menu-ancestor) > a,
.main-navigation .main-nav ul li.current-post-ancestor:not(.current-menu-item):not(.current-menu-ancestor) > a {
	color: #fff;
}
.main-navigation .main-nav ul li.current-menu-parent:not(.current-menu-item):not(.current-menu-ancestor) > a:hover {
	color: var(--accent);
}

/* Fenêtre de recherche de GeneratePress aux couleurs de WaM. */
.gp-modal__container .search-field {
	font-family: var(--wam-font);
}

/* ==========================================================
   4. Accueil : grande Une
   ========================================================== */
.featured-hero {
	position: relative;
	display: grid;
	margin: 0 var(--wam-gutter) 42px; /* S'ajoute à la marge de la page, comme dans GA-Mag. */
	overflow: hidden;
	background: #1b1b1b;
	color: #fff;
}
.featured-hero__image {
	grid-area: 1 / 1;
	align-self: start;
	display: block;
}
.featured-hero img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 450px;
	margin-inline: auto;
}
.featured-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(0 0 0 / 5%) 15%, rgb(0 0 0 / 28%) 48%, rgb(0 0 0 / 88%) 100%);
}
.featured-hero__content {
	position: relative;
	z-index: 2;
	grid-area: 1 / 1;
	align-self: end;
	padding: 25px;
	text-shadow: 0 2px 12px rgb(0 0 0 / 80%);
}
.featured-hero__title {
	max-width: 80%;
	margin: 15px 0;
	color: var(--wam-hero-title-color, #fff);
	font-size: var(--wam-title-size, 33px);
	line-height: 1.2;
	letter-spacing: 0;
	text-shadow: var(--wam-title-shadow, 0 2px 12px rgb(0 0 0 / 80%));
}
.featured-hero__title a {
	color: inherit;
}
.featured-hero .post-meta {
	color: #e8e8e8;
}
.featured-hero .post-meta a {
	color: inherit;
}

/* ==========================================================
   5. Étiquette de catégorie, méta, lien de modification
   ========================================================== */
.category-label {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 9px;
	color: #fff;
	background: var(--accent);
	font-size: .72rem;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.category-label:hover,
.category-label:focus-visible {
	color: #fff;
	background: #111;
}
.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--wam-muted);
	font-size: .78rem;
}
.post-meta a {
	color: inherit;
}
.post-meta a:hover {
	color: var(--accent);
}
.wam-edit-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 4px 0 10px;
	padding: 8px 11px;
	border: 1px solid var(--wam-border);
	color: #8a5a09;
	background: #fff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
}
.wam-edit-link:hover,
.wam-edit-link:focus-visible {
	border-color: var(--accent);
	color: #111;
	background: color-mix(in srgb, var(--accent), white 92%);
}
.featured-hero .wam-edit-link {
	border-color: rgb(255 255 255 / 55%);
	color: #fff;
	background: rgb(0 0 0 / 38%);
	text-shadow: none;
}
.entry-header .wam-edit-link {
	margin-top: 16px;
}

/* ==========================================================
   6. Grille de cartes (accueil, archives, recherche)
   ========================================================== */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px;
}
.post-card {
	min-width: 0;
	border: var(--wam-card-border);
	background: #fff;
	box-shadow: var(--wam-card-shadow);
	transition: box-shadow .25s ease, transform .25s ease;
}
.post-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wam-image-radius);
	background: #eee;
}
.post-card__media--natural {
	aspect-ratio: auto;
}
.post-card__image-link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.post-card__image-link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: rgb(0 0 0 / var(--wam-card-hover-opacity));
	opacity: 0;
	transition: opacity .25s ease;
}
.post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.post-card__media--natural .post-card__image-link {
	height: auto;
}
.post-card__media--natural img {
	height: auto;
	object-fit: contain;
}
.post-card__cta {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: calc(100% - 40px);
	color: #fff;
	font-size: clamp(28px, 2.2vw, 46px);
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
	text-shadow: 0 2px 12px rgb(0 0 0 / 45%);
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity .16s ease;
}
.post-card:hover .post-card__media img,
.post-card:focus-within .post-card__media img {
	transform: scale(1.025);
}
.post-card:hover .post-card__image-link::after,
.post-card:focus-within .post-card__image-link::after,
.post-card:hover .post-card__cta,
.post-card:focus-within .post-card__cta {
	opacity: 1;
}
.post-card__media .category-label {
	position: absolute;
	z-index: 3;
	bottom: 10px;
	left: 10px;
	margin: 0;
}
.post-card__content {
	padding: 17px 20px 20px;
}
.post-card__title {
	margin: 0 0 9px;
	color: #161616;
	font-size: 20px;
	line-height: 1.36;
}
.post-card__title a {
	color: inherit;
}
.post-card__title a:hover {
	color: var(--accent);
}
.post-card .post-meta {
	margin-bottom: 10px;
}
.post-card__excerpt {
	margin-top: 16px;
	color: #505050;
	font-size: var(--wam-excerpt-size, 15px);
	line-height: 1.6;
}
.post-card__excerpt p {
	margin: 0;
}
.posts-grid .pagination,
.posts-grid .navigation.pagination {
	grid-column: 1 / -1;
	margin-top: 32px;
}
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pagination .page-numbers {
	min-width: 38px;
	padding: 7px 11px;
	border: 1px solid var(--wam-border);
	color: var(--wam-text);
	text-align: center;
}
.pagination .current,
.pagination a.page-numbers:hover {
	border-color: var(--accent);
	color: #fff;
	background: var(--accent);
}
.archive-header {
	margin: 0 0 34px;
	padding: 34px 0 25px;
	border-bottom: 1px solid var(--wam-border);
}
.archive-header h1 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.2;
}
.archive-description {
	max-width: 760px;
	color: var(--wam-muted);
}
.archive-description > :last-child {
	margin-bottom: 0;
}
.no-results {
	grid-column: 1 / -1;
	padding: 70px 0;
	text-align: center;
}

/* ==========================================================
   7. Barre latérale
   ========================================================== */
.is-right-sidebar .inside-right-sidebar {
	padding-left: 28px;
	border-left: 1px solid var(--wam-border);
}
.widget-area .widget {
	padding: 0;
}
.sidebar .widget {
	margin-bottom: 34px;
	background: #fff;
	font-size: .87rem;
}
.widget-title {
	margin: 0 0 18px;
	padding: 11px 14px;
	color: #fff;
	background: #0c0c0c;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .025em;
	text-transform: uppercase;
}
/* Titre lien (widget RSS) : blanc comme le texte du bandeau, orange au survol,
   comme GA-Mag. Sans cette règle, il prend la couleur foncée des liens et
   disparaît sur le fond noir. */
.widget-title a,
.widget-title a:visited {
	color: inherit;
}
.widget-title a:hover,
.widget-title a:focus-visible {
	color: var(--accent);
}
.widget-title img {
	display: inline-block;
	vertical-align: -2px;
}
.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sidebar .widget ul li {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wam-border);
	font-size: .87rem;
	line-height: 1.45;
}
.widget_rss .rss-date,
.widget_rss cite {
	display: block;
	color: var(--wam-muted);
	font-size: .75rem;
}
.widget_rss .rssSummary {
	margin-top: 5px;
	color: #5f5f5f;
}
.tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.tagcloud a {
	padding: 4px 8px;
	border: 1px solid var(--wam-border);
	font-size: .76rem !important;
}
.widget select {
	width: 100%;
	padding: 10px;
}

/* ==========================================================
   8. Article
   ========================================================== */
.single-post .inside-article,
.page .inside-article {
	max-width: 820px;
}
.single-post .entry-header {
	margin: 0 0 24px;
	padding-top: 42px;
}
.single-post .entry-title {
	margin: 6px 0 12px;
	color: var(--wam-title-color, #252527);
	font-size: var(--wam-title-size, 33px);
	line-height: 1.2;
	letter-spacing: 0;
	text-shadow: var(--wam-title-shadow, 0 2px 12px rgb(0 0 0 / 80%));
}
.page .entry-header {
	padding-top: 42px;
}
.single-post .featured-image.page-header-image-single {
	margin: 0 0 30px;
}
.single-post .page-header-image-single img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 450px;
	margin-inline: auto;
}
.entry-content {
	font-family: var(--wam-font);
	font-size: var(--wam-content-size, 18px);
	line-height: var(--wam-content-line-height, 1.65);
}
.single-post .entry-content h2 {
	font-size: var(--wam-article-h2-size, 24px);
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: inherit;
	line-height: 1.22;
}
.entry-content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: .14em;
}
.entry-content blockquote {
	margin: 2rem 0;
	padding: .4rem 0 .4rem 1.4rem;
	border-left: 4px solid var(--accent);
	color: #555;
	font-size: 1.12em;
	font-style: normal;
}
.entry-content iframe {
	max-width: 100%;
}
.entry-footer {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--wam-border);
}
.post-tags a {
	color: var(--wam-text);
}
.post-tags a:hover {
	color: var(--accent);
}

/* Galeries WordPress (shortcode [gallery]) : grille de GA-Mag. */
.entry-content .gallery {
	--wam-gallery-columns: 3;
	display: grid;
	grid-template-columns: repeat(var(--wam-gallery-columns), minmax(0, 1fr));
	gap: clamp(10px, 1.8vw, 18px);
	width: 100%;
	margin: 1.75rem 0;
}
.entry-content .gallery-columns-1 { --wam-gallery-columns: 1; }
.entry-content .gallery-columns-2 { --wam-gallery-columns: 2; }
.entry-content .gallery-columns-4 { --wam-gallery-columns: 4; }
.entry-content .gallery-columns-5 { --wam-gallery-columns: 5; }
.entry-content .gallery-columns-6 { --wam-gallery-columns: 6; }
.entry-content .gallery-columns-7 { --wam-gallery-columns: 7; }
.entry-content .gallery-columns-8 { --wam-gallery-columns: 8; }
.entry-content .gallery-columns-9 { --wam-gallery-columns: 9; }
.entry-content .gallery .gallery-item {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: center;
}
.entry-content .gallery .gallery-icon {
	padding: 0;
}
.entry-content .gallery .gallery-icon a {
	display: block;
}
.entry-content .gallery .gallery-icon img {
	width: 100%;
	margin: 0 auto;
	cursor: zoom-in;
}
.entry-content .gallery .gallery-caption {
	margin: 8px 0 0;
	color: var(--wam-muted);
	font-size: .78rem;
	font-style: italic;
	line-height: 1.45;
}
.entry-content .wp-block-gallery img {
	cursor: zoom-in;
}

/* Contenus classiques des anciens articles. */
.entry-content::after {
	content: "";
	display: table;
	clear: both;
}
.entry-content .alignleft { float: left; margin: .4em 1.5em 1em 0; }
.entry-content .alignright { float: right; margin: .4em 0 1em 1.5em; }
.entry-content .aligncenter { display: block; margin: 1em auto; clear: both; }
.entry-content .wp-caption { max-width: 100%; height: auto; }
.entry-content .wp-caption-text {
	margin: .6em 0;
	color: var(--wam-muted);
	font-size: .85em;
	line-height: 1.5;
	text-align: center;
}
.entry-content table {
	display: block;
	max-width: 100%;
	margin: 1.5em 0;
	overflow-x: auto;
	border-collapse: collapse;
}
.entry-content th,
.entry-content td {
	padding: .6em;
	border: 1px solid var(--wam-border);
	text-align: left;
}
.entry-content pre {
	max-width: 100%;
	overflow-x: auto;
	padding: 1em;
	background: #f4f4f4;
}
.entry-content pre,
.entry-content code,
.entry-content kbd,
.entry-content samp {
	font-family: ui-monospace, monospace;
}
.entry-content hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--wam-border);
	clear: both;
}

/* Articles connexes. */
.related-posts {
	max-width: 820px;
	margin-top: 50px;
}
.section-title {
	margin: 0 0 22px;
	padding-bottom: 9px;
	border-bottom: 3px solid var(--accent);
	font-size: 1.35rem;
	text-transform: uppercase;
}
.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.related-grid a {
	color: var(--wam-text);
}
.related-grid a:hover {
	color: var(--accent);
}
.related-grid img {
	display: block;
	width: 100%;
	height: auto;
}
.related-grid h3 {
	margin: 10px 0 0;
	font-size: 1rem;
	line-height: 1.35;
}
.related-grid time {
	color: var(--wam-muted);
	font-size: .78rem;
}

/* Commentaires. */
.comments-area {
	max-width: 820px;
	margin-top: 48px;
}
.comment-body {
	margin-bottom: 24px;
	padding: 18px;
	background: #f7f7f7;
}
.comment-respond .comment-reply-title {
	font-size: 1.1rem;
}
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	padding: 11px;
	border: 1px solid #d8d8d8;
	background: #fff;
}
button,
.button,
input[type="submit"] {
	border: 0;
	color: #fff;
	background: var(--accent);
	font-weight: 800;
}
button:hover,
.button:hover,
input[type="submit"]:hover {
	color: #fff;
	background: #111;
}

/* ==========================================================
   9. Visionneuse des galeries (script repris de GA-Mag)
   ========================================================== */
.ga-mag-lightbox {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(54px, 8vw) minmax(0, 1fr) minmax(54px, 8vw);
	align-items: center;
	padding: 52px 12px 20px;
	color: #fff;
	background: rgb(0 0 0 / 92%);
}
.ga-mag-lightbox[hidden] { display: none; }
.ga-mag-lightbox__figure {
	display: grid;
	grid-column: 2;
	grid-row: 1;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: center;
	justify-items: center;
	width: 100%;
	height: calc(100dvh - 72px);
	margin: 0;
}
.ga-mag-lightbox__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100dvh - 125px);
	object-fit: contain;
	box-shadow: 0 10px 45px rgb(0 0 0 / 45%);
}
.ga-mag-lightbox__caption {
	max-width: min(820px, 88vw);
	margin: 12px auto 0;
	color: #fff;
	font: 500 .94rem/1.45 var(--wam-font);
	text-align: center;
}
.ga-mag-lightbox__caption[hidden] { display: none; }
.ga-mag-lightbox__button {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 48%);
	border-radius: 50%;
	color: #fff;
	background: rgb(0 0 0 / 38%);
	font: 300 38px/1 Arial, sans-serif;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.ga-mag-lightbox__button:hover,
.ga-mag-lightbox__button:focus-visible {
	border-color: #fff;
	color: #111;
	background: #fff;
}
.ga-mag-lightbox__previous { grid-column: 1; grid-row: 1; justify-self: center; }
.ga-mag-lightbox__next { grid-column: 3; grid-row: 1; justify-self: center; }
.ga-mag-lightbox__close { position: absolute; top: 12px; right: 16px; font-size: 30px; }
.ga-mag-lightbox__button[hidden] { display: none; }
body.ga-mag-lightbox-open { overflow: hidden; }

/* ==========================================================
   10. Pied de page
   ========================================================== */
.site-footer {
	margin-top: 0;
	color: #c0c0c0;
	background: #0f0f11;
}
.site-footer a {
	color: #e5e5e5;
}
.site-footer a:hover {
	color: var(--accent);
}
.wam-footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
	padding: 64px var(--wam-gutter) 60px;
}
.site-footer .widget-title {
	padding: 0 0 10px;
	border-bottom: 2px solid var(--accent);
	background: none;
}
.site-footer .widget {
	color: #c0c0c0;
	font-size: .87rem;
}
.site-info {
	border-top: 1px solid #282828;
}
.inside-site-info {
	justify-content: center;
	padding-top: 48px;
}
.copyright-bar {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	font-size: .82rem;
	text-align: center;
}
.footer-socials {
	display: flex;
	gap: 12px;
}
.footer-socials a {
	display: grid;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	place-items: center;
	background: #252527;
}
.footer-socials svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.footer-menu {
	max-width: 100%;
}
.footer-menu ul {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-menu a {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.footer-menu .sub-menu {
	display: block;
	margin-top: 8px;
}
.footer-menu .sub-menu li {
	margin-top: 5px;
}
.footer-copyright {
	margin: 0;
	color: #8d8d8d;
}

/* Séparateurs facultatifs entre les liens du premier niveau. */
.footer-menu .footer-menu-separator-vertical,
.footer-menu .footer-menu-separator-dots {
	gap: 0;
	overflow: hidden;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	padding-block: 5px;
}
.footer-menu .footer-menu-separator-vertical > li,
.footer-menu .footer-menu-separator-dots > li {
	position: relative;
	flex: 1 1 auto;
	max-width: 100%;
	padding-inline: 12px;
	overflow-wrap: anywhere;
}
.footer-menu .footer-menu-separator-vertical > li + li::before,
.footer-menu .footer-menu-separator-dots > li + li::before {
	content: "";
	position: absolute;
	top: .65em;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: .55;
}
.footer-menu .footer-menu-separator-vertical > li + li::before {
	inset-inline-start: -1px;
	width: 1px;
	height: 12px;
	background: currentColor;
}
.footer-menu .footer-menu-separator-dots > li + li::before {
	inset-inline-start: -6px;
	width: 2px;
	height: 2px;
	margin-top: -2px;
	background: currentColor;
	box-shadow: 4px 0 currentColor, 0 4px currentColor, 4px 4px currentColor;
}

/* ==========================================================
   11. Tablettes et mobiles
   ========================================================== */
@media (max-width: 900px) {
	.site-logo {
		flex-basis: 210px;
	}
	.inside-header {
		min-height: 84px;
	}
	.is-right-sidebar .inside-right-sidebar {
		padding: 32px 0 0;
		border-top: 1px solid var(--wam-border);
		border-left: 0;
	}
	.wam-footer-widgets {
		grid-template-columns: 1fr 1fr;
	}
	.main-navigation.toggled .wam-menu-widgets {
		display: block;
		padding: 16px 20px;
		color: #fff;
	}
}

@media (max-width: 768px) {
	/* En-tête mobile de GA-Mag : une seule ligne de 84 px, menu puis loupe. */
	.inside-header {
		min-height: 84px;
		padding: 8px 18px;
		row-gap: 0;
	}
	.mobile-menu-control-wrapper .menu-toggle {
		order: -1;
	}
	.mobile-menu-control-wrapper .menu-toggle,
	.mobile-menu-control-wrapper .menu-bar-item > a {
		line-height: 64px;
	}
	.site-header .menu-bar-item.social-link {
		display: none;
	}
}

@media (max-width: 620px) {
	.site-logo {
		flex: 1 1 auto;
		max-width: 190px;
	}
	.site-content > .featured-hero {
		flex-basis: calc(100% + 32px);
		margin-right: -16px;
		margin-left: -16px;
	}
	.featured-hero img,
	.single-post .page-header-image-single img {
		max-height: 300px;
	}
	.featured-hero::after {
		display: none;
	}
	.featured-hero__content {
		grid-area: 2 / 1;
		padding: 22px 18px;
	}
	.featured-hero__title {
		max-width: 100%;
		font-size: var(--wam-title-mobile-size, 32px);
	}
	.posts-grid {
		grid-template-columns: 1fr;
	}
	.single-post .entry-title {
		font-size: var(--wam-title-mobile-size, 32px);
	}
	.entry-content .gallery:not(.gallery-columns-1) {
		--wam-gallery-columns: 2;
	}
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		margin: 1em auto;
	}
	.ga-mag-lightbox {
		grid-template-columns: 52px minmax(0, 1fr) 52px;
		padding-right: 4px;
		padding-left: 4px;
	}
	.ga-mag-lightbox__button {
		width: 42px;
		height: 42px;
		font-size: 32px;
	}
	.ga-mag-lightbox__close {
		right: 10px;
	}
	.related-grid,
	.wam-footer-widgets {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 390px) {
	.entry-content .gallery {
		--wam-gallery-columns: 1;
	}
}

/* Safari mobile gère mieux un fond qui défile qu'un fond fixe. */
@supports (-webkit-touch-callout: none) {
	body.custom-background {
		background-attachment: scroll !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}