/*******************
  PAGE BLOG
*******************/

.page-template-page-blog .page-color,
.page-template-page-blog .footer-menu a:hover {
	color: var(--orange2);
}

.page-template-page-blog .big-intro {
	min-height: 30vh;
	padding-bottom: 4em;
}
body.page-template-page-blog.scrolled header,
.page-template-page-blog .big-intro,
body.single.scrolled header,
.single .small-intro {
	background: var(--orange2);
}

.page-template-page-blog footer .mentions .logo {
	background-image: url(../../img/logo-amagar-orange2.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.page-template-page-blog footer .mentions .logo img { opacity: 0; }


.mag-grid {
	margin: 0 -2em;
	width: calc(100% + 4em);
}
.blog-item {
	position: relative;
	padding: 1em 2em;
	margin-bottom: 1.5em;
}
	.blog-item-sizer, .blog-item {
		width: 33.333%;
	}
	@media screen and (max-width: 1150px) {
		.blog-item { padding: 1em; }
	}
	@media screen and (max-width: 900px) {
		.blog-item-sizer, .blog-item { width: 50%; }
	}
	@media screen and (max-width: 600px) {
		.blog-item-sizer, .blog-item { width: 100%; }
	}


.mag-box {
	position: relative;
	background: #fff;
	border-radius: 0.5em;
	box-shadow: var(--boxShadow);
	transition: 0.3s;
}
.mag-box:hover {
	box-shadow: var(--boxShadowHover);
}
.mag-box .ill {
	z-index: 1;
	position: relative;
	height: 0;
	padding-bottom: 56%;
	overflow: hidden;
	border-radius: 0.5em 0.5em 0 0;
}
.mag-box-post .ill img { height: auto; width: 100%; }
.mag-box .no-ill { border-radius: 0.5em 0.5em 0 0; height: 3.5em; }
.mag-box .ill.video {
	z-index: 5;
}
.mag-box .ill.video > iframe {
	z-index: 5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mag-box .ill.audio::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20%;
	height: 0;
	padding-bottom: 20%;
	background: url(../../img/icon-audio.png) no-repeat center;
	background-size: contain;
	transform: translate(-50%, -50%);
}
.mag-box .ill > picture {
	transform: scale(1.033);
	transition: 0.5s;
}
.mag-box:hover .ill > picture {
	transform: scale(1);
}
.mag-box .tax {
	display: none;
	z-index: 6;
	position: absolute;
	top: 1.5em;
	left: 2em;
	background: var(--blue);
	color: #fff;
	padding: 0.5em 1em;
	border-radius: 0.5em;
}
.mag-box .ill.video:hover ~ .tax {
	opacity: 0;
}
.mag-box .content {
	position: relative;
	font-size: 1.125em;
	padding: 1.5em 2em;
	text-align: left;
	overflow: hidden;
}
.mag-box .title {
	margin-bottom: 2em;
}
.mag-box .title > * {
	font-weight: 600;
	line-height: 1.4em;
	font-size: 1.125em;
}
.mag-box .excerpt {
	line-height: 1.33em;
	margin-bottom: 1.5em;
}
.mag-box .tags {
	color: var(--blue);
	font-weight: 600;
	line-height: 1.25em;
	margin-bottom: 0.5em;
}
.mag-box .tags a::before {
	content: '#';
}
.mag-box .date {
	font-size: 0.75em;
	margin-bottom: 2em;
	opacity: 0.9;
}
.mag-box .action {
	text-align: right;
}
.mag-box > a.fulldiv {
	z-index: 4;
}
/* Carte sans lien (champ no_link, box-blog.php, retouche du 22/09/2026) : pas de bouton, donc pas de marge laissée sous
   le dernier élément (le bas de la carte reprend le retrait du haut), et pas d'ombre de survol qui la ferait croire cliquable */
.mag-box--sans-lien .content > :last-child {
	margin-bottom: 0;
}
.mag-box--sans-lien:hover {
	box-shadow: var(--boxShadow);
}

.mag-box.card {
	background: var(--blue);
	color: #fff;
	padding: 10em 3em 5em 3em;
}
.mag-box.card::before {
	content: '';
	position: absolute;
	top: 4em;
	left: 3em;
	width: 3.5em;
	height: 3.5em;
	background: url(../../img/icon-quote-line.svg) no-repeat center; /* Refonte 2026 : icon-quote.png n'a jamais existé dans le thème (404) */
	background-size: contain;
	filter: brightness(0) invert(1);
}
.mag-box.card .content {
	padding: 0;
	font-size: 2em;
	font-style: italic;
	font-weight: 500;
	line-height: 1.2em;
}
.mag-box.card .content p {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
.mag-box.card .content p::before,
.mag-box.card .content p::after {
	content: '"';
}
.mag-box.card .author {
	margin-top: 2em;
	font-weight: 500;
}
.mag-box.card .source {
	position: absolute;
	bottom: 2em;
	right: 2em;
	width: 3em;
	height: 3em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: brightness(0) invert(1);
}
.mag-box.card .source.in {
	background-image: url(../../img/icon-in.svg);
}
.mag-box.card .source.tw {
	background-image: url(../../img/icon-tw.svg);
}

	@media screen and (max-width: 900px) {
		.mag-box.card { padding: 8em 1.5em 5em 1.5em; }
		.mag-box.card .content { font-size: 1.5em; }
		.mag-box.card::before { top: 3em; left: 1.5em; width: 2.5em; height: 2.5em; }
	}

.mag-box .content .audio {
	z-index: 6;
	position: absolute;
	bottom: -100px;
	left: 0;
	width: 100%;
	max-height: 80px;
	padding: 1em;
	border-radius: 0 0 0.5em 0.5em;
	text-align: center;
	background: var(--black);
	transition: 0.3s;
}
.mag-box .content .audio.active {
	bottom: 0;
}

/*******************
  MOSAÏQUE DE PHOTOS (format « patchwork », P9)
  Grille de 3 colonnes carrées : 1re photo en 2 × 2, les 2 suivantes à sa droite, puis des rangées de 3.
  La dernière s'étire en bande (3 colonnes) ou en demi-bande (2) quand le nombre de photos l'exige
  (classes posées par box-blog.php) : 7 photos = grand carré + 2 + 3 + bande. Hauteur des rangées tirée
  de la largeur de la carte (unités de conteneur) : la carte a sa hauteur finale avant le chargement
  des images, Masonry ne place rien de travers.
*******************/
.mag-box-patchwork {
	container-type: inline-size;
	--mag-patchwork-gap: 4px;
}
.mag-patchwork {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: calc((100cqi - 2 * var(--mag-patchwork-gap)) / 3);
	gap: var(--mag-patchwork-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border-radius: 0.5em 0.5em 0 0;
}
.mag-patchwork__item {
	position: relative;
	margin: 0;
	padding: 0;
	min-width: 0;
	overflow: hidden;
}
.mag-patchwork__item::before { content: none; } /* aucune puce héritée des listes du thème */
.mag-patchwork__item--grand { grid-column: span 2; grid-row: span 2; }
.mag-patchwork__item--bande { grid-column: 1 / -1; }
.mag-patchwork__item--large { grid-column: span 2; }
.mag-patchwork--simple { grid-template-columns: 1fr; grid-auto-rows: calc(100cqi * 0.6); }
.mag-patchwork__figure {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
}
.mag-patchwork__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.033);
	transition: transform 0.5s;
}
.mag-box-patchwork:hover .mag-patchwork__img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
	.mag-patchwork__img { transition: none; }
}
/* Légende : blanc sur dégradé noir ; au niveau du texte le voile reste ≥ 55 %, soit un contraste ≥ 4,5:1
   même sur un ciel blanc (AA). */
.mag-patchwork__figure::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0, rgba(0, 0, 0, 0.55) 2.2em, rgba(0, 0, 0, 0) 4.5em);
	pointer-events: none;
}
.mag-patchwork__ville {
	z-index: 1;
	position: absolute;
	left: 0.7em;
	right: 0.7em;
	bottom: 0.55em;
	color: #fff;
	font-size: var(--am-fs-caption);
	line-height: var(--am-lh-caption);
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	overflow-wrap: anywhere;
}