/*
 * Terres en Mêlées sous ilucid-v2 : motifs de fond des bandeaux, repris de
 * l'ancien site (images/motifs/). Le reste passe par les classes Tailwind du
 * thème. Chargée après la feuille `custom` du thème (inc/tem-habillage.php).
 */

/* CUSTOM: motif de grandes lettres derrière « Le fil d'info », fond #f7f7f7 de l'ancien accueil. */
.tem-motif-lettres {
  background-color: #f7f7f7;
  background-image: url("../images/motifs/lettres-terres-en-melees.png");
  background-position: center center;
}

/* CUSTOM: texture ovale sur fond très sombre, bandeau vidéo de l'ancien accueil (#1D1D1D). */
.tem-motif-texture {
  background-color: #1d1d1d;
  background-image: url("../images/motifs/texture-terres-en-melees.png");
}

/* CUSTOM: carte de l'Afrique sur le brique sombre de l'ancien « Tableau d'affichage » (#863116). */
.tem-motif-afrique {
  background-color: #863116;
  background-image: url("../images/motifs/map-afrique.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* CUSTOM: la texture de l'ancien pied de page, sur le pied de page du thème. */
footer .bg-footer {
  background-image: url("../images/motifs/texture-terres-en-melees.png");
}

/* CUSTOM: intertitres des fiches projet et pays en brique, comme sur l'ancien site (titres de contenu #bc5623, devenu la couleur principale). */
.tem-fiche-contenu :where(h2, h3),
.tem-titre-brique {
  color: var(--color-primary);
}

/* CUSTOM: carrousel des projets (carrousel du thème) : cartes horizontales
   larges, 60 rem au plus (86 % de l'écran en mobile), et la carte courante
   centrée, ses voisines visibles de part et d'autre (choix de Julien). Le
   retrait du carrousel, que le thème reprend pour caler le défilement, vaut
   la moitié de la place laissée libre autour d'une carte. */
.ilucid-slider.tem-carrousel {
  --ilucid-slider-inset: calc((100% - min(60rem, 86vw)) / 2);
}
.ilucid-slider .ilucid-slider__track > .tem-carrousel-projet {
  scroll-snap-align: start;
  margin: 0;
  flex: 0 0 min(60rem, 86vw);
}

/* CUSTOM: titres de niveau 2 en brique, comme sur tout l'ancien site (réglage
   global de Breakdance : h2 #bc5623, h4 couleur de marque). Contenus de
   l'éditeur et titres de section du thème ; blancs dans une section sombre. */
main .prose :where(h2, h4),
.ilucid-entete-section__titre {
  color: var(--color-primary);
}
.text-white .ilucid-entete-section__titre {
  color: inherit;
}

/* CUSTOM: palette de l'éditeur de l'ancien thème (theme.json de
   breakdance-zero, supprimé), encore utilisée par des blocs de contenu (encadrés,
   paragraphes colorés) ; sans elle, ces blocs perdraient leurs couleurs. */
.has-couleur-1-color { color: #161616; }
.has-couleur-2-color { color: #d5ad1d; }
.has-couleur-3-color { color: #ffffff; }
.has-couleur-4-color { color: #ddd8bc; }
.has-couleur-5-color { color: #7c3902; }
.has-couleur-6-color { color: #bc5623; }
.has-couleur-1-background-color { background-color: #161616; }
.has-couleur-2-background-color { background-color: #d5ad1d; }
.has-couleur-3-background-color { background-color: #ffffff; }
.has-couleur-4-background-color { background-color: #ddd8bc; }
.has-couleur-5-background-color { background-color: #7c3902; }
.has-couleur-6-background-color { background-color: #bc5623; }

/* CUSTOM: galerie de logos du pied de page (balisage de la galerie du thème,
   inc/tem-habillage.php) : en couleur comme sur l'ancien site, au lieu du gris
   du thème, et à une hauteur commune un peu plus grande (64 px, 52 px en
   mobile) ; les logos rognés de leurs marges y ont la même présence. */
.tem-logos .ilucid-accueil-logos__item img {
  filter: none;
  height: 3.25rem;
  max-height: none;
  width: auto;
  max-width: 16rem;
  object-fit: contain;
}
@media (min-width: 768px) {
  .tem-logos .ilucid-accueil-logos__item img { height: 4rem; }
}

/* CUSTOM: la bande de logos défile bord à bord, sans marge latérale ni
   largeur maximale (choix de Julien) ; sans défilement, les logos restent
   centrés. */
.tem-logos.ilucid-accueil-logos {
  padding-left: 0;
  padding-right: 0;
}
.tem-logos .ilucid-accueil-logos__inner {
  max-width: none;
}

/* CUSTOM: bulle de la carte des projets, reprise de Vignerons Bio
 * (css/vb-carte.css) : MapLibre pose une marge intérieure qui ferait un liseré
 * blanc autour de la photo, et sa croix disparaîtrait sur une photo claire. */
[data-tem-carte] .maplibregl-popup-content {
	/* MapLibre impose sa police (Helvetica, 12 px) à toute la carte. */
	font-family: var(--font-corps);
	width: 300px;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius-card, 2px);
}
.tem-bulle__texte {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.75rem;
}
.tem-bulle__titre {
	margin: 0;
	font-family: var(--font-titres);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}
.tem-bulle__titre a {
	color: var(--color-primary);
	text-decoration: none;
}
.tem-bulle__titre a:hover {
	text-decoration: underline;
}
.tem-bulle__lieu {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-muted);
}
.tem-bulle__resume {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--color-noir);
}
.tem-bulle__image img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}
[data-tem-carte] .maplibregl-popup-close-button {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	color: #1c1917;
	font-size: 18px;
	line-height: 1;
}
[data-tem-carte] .maplibregl-popup-close-button:hover {
	background: #ffffff;
}

/* CUSTOM: introduction du blog en text-xl, comme celle de la liste des projets
 * (demande de Julien, 9 novembre 2026). Longue, ilucid-blog la place dans le
 * corps de la page, en .prose à 16 px, sans classe propre à viser. */
.ilucid-blog-archive > div > .prose {
	font-size: var(--text-xl, 1.25rem);
	line-height: var(--text-xl--line-height, 1.4);
}

/* CUSTOM: le bouton « Revenir en haut » du thème est créé en JavaScript, à un
   z-index de 9000 : il flottait sur la carte des projets en plein écran
   (moins de 1120 px). Une règle survit à sa recréation, une classe non. */
html.tem-carte-plein-ecran .ilucid-back-to-top { display: none !important; }