/**
 * Module liste — styles publics (tuiles + modale).
 *
 * Deux niveaux d'affichage :
 *   1. TUILE (grille) : photo + titre + description, cliquable.
 *   2. MODALE : au clic, le bloc « el-detail-data » (rendu masqué dans la tuile par
 *      le PHP) est cloné dans une modale centrée, fond flouté, panneau opaque.
 *
 * Structure du detail (rendu 2 colonnes, miroir dashboard) :
 *   - .el-detail-2col : colonne gauche (infos a icones) + colonne droite (contact).
 *   - Lignes a icone (.el-ligne) : icone SVG + contenu.
 *   - Sections pleine largeur (.el-section) : description, caracteristiques,
 *     equipements par famille, a proximite, info.
 *
 * Palette calee sur le bleu profond communal (coherence avec le reste du plugin).
 */

.el-liste {
	--el-bleu-profond: #0D1117;
	--el-ardoise: #2D3748;
	--el-bord: #e5e9f2;
	--el-bord-clair: #f0f2f7;
	--el-gris-texte: #6B7A8D;
	--el-fond-doux: #F7F9FC;
	--el-blanc: #ffffff;
	--el-bleu: #1A6DFF;
	--el-teal: #00E5B0;
	--el-grad: linear-gradient(135deg, #1A6DFF 0%, #00E5B0 100%);
	--el-soft: #F1F5F9;
	--el-ligne: rgba(13, 17, 23, 0.08);

	max-width: 1440px;
	margin: 0 auto 40px;
	padding: clamp(18px, 3vw, 32px) 20px 20px;
	box-sizing: border-box;
	width: 100%;
	font-family: system-ui, -apple-system, sans-serif;
	color: var(--el-bleu-profond);
}

.el-liste *,
.el-modale-overlay * {
	box-sizing: border-box;
}

/* ─── Grille de tuiles ──────────────────────────────────────────────────────── */
.el-liste .el-grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}
/* Grille bulletins : hauteur de tuile NATURELLE (pas d'etirement stretch) et
   pied dans le flux (pas d'ancrage en bas). Sur un bulletin, peu de contenu
   (vignette + titre + date) : etirer la tuile puis pousser les boutons en bas
   creait un grand vide entre la date et les boutons. Ici la tuile fait sa
   hauteur reelle et les boutons suivent la date directement. */
.el-liste .el-grille-bulletin {
	align-items: start;
}
.el-liste .el-grille-bulletin .el-tuile-indice,
.el-liste .el-grille-bulletin .el-tuile-actions {
	margin-top: 0;
}
.el-liste .el-grille-bulletin .el-tuile-ouv-zone,
.el-liste .el-grille-bulletin .el-tuile-desc,
.el-liste .el-grille-bulletin .el-tuile-champs,
.el-liste .el-grille-bulletin .el-tuile-badges-bool {
	min-height: 0;
}
/* Types simples (sans sous-sections) : plus d'espace entre le titre/hint et les
   tuiles. Cible la grille enfant DIRECT de .el-liste ; les grilles des gites,
   enveloppees dans .el-sous-section, ne sont pas concernees (elles ont deja
   leur propre espacement). */
.el-liste > .el-grille {
	margin-top: 44px;
}
/* Responsive progressif : 4 colonnes en tres large, puis 3, 2, 1. Les paliers
   sont rapproches pour qu'une tuile ne devienne jamais demesuree ni trop etroite. */
@media (max-width: 1200px) {
	.el-liste .el-grille {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 900px) {
	.el-liste .el-grille {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.el-liste .el-grille {
		grid-template-columns: 1fr;
	}
	.el-liste .el-tuile-photo {
		height: 200px;
	}
}

/* Grille centree : appliquee quand < 4 tuiles (une seule ligne incomplete).
   Les tuiles gardent la largeur d'une colonne normale (conteneur / 4) et sont
   centrees. Le nombre de colonnes de reference suit les memes paliers que la
   grille pleine, pour une largeur de tuile identique a chaque taille d'ecran. */
.el-liste .el-grille-centree {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.el-liste .el-grille-centree > .el-tuile {
	width: calc((100% - 3 * 20px) / 4);
}
@media (max-width: 1200px) {
	.el-liste .el-grille-centree > .el-tuile {
		width: calc((100% - 2 * 20px) / 3);
	}
}
@media (max-width: 900px) {
	.el-liste .el-grille-centree > .el-tuile {
		width: calc((100% - 20px) / 2);
	}
}
@media (max-width: 560px) {
	.el-liste .el-grille-centree > .el-tuile {
		width: 100%;
	}
}
/* Communaux centres : largeur de reference sur 3 colonnes (grille communaux = 3). */
.el-liste .el-grille-communaux.el-grille-centree {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.el-liste .el-grille-communaux.el-grille-centree > .el-tuile {
	width: calc((100% - 2 * 24px) / 3);
	max-width: 420px;
}
@media (max-width: 1000px) {
	.el-liste .el-grille-communaux.el-grille-centree > .el-tuile {
		width: calc((100% - 24px) / 2);
	}
}
@media (max-width: 620px) {
	.el-liste .el-grille-communaux.el-grille-centree > .el-tuile {
		width: 100%;
	}
}

/* ─── Tuile ─────────────────────────────────────────────────────────────────── */
.el-liste .el-tuile {
	background: var(--el-blanc);
	border: 1px solid var(--el-bord);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(13, 27, 62, 0.06);
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	display: flex;
	flex-direction: column;
}
.el-liste .el-tuile:hover {
	box-shadow: 0 6px 20px rgba(13, 27, 62, 0.12);
}
.el-liste .el-tuile:focus-visible {
	outline: 3px solid var(--el-ardoise);
	outline-offset: 2px;
}

.el-liste .el-tuile-photo {
	width: 100%;
	height: 260px;
	overflow: hidden;
	background: var(--el-bord-clair);
	flex: 0 0 auto;
}
.el-liste .el-tuile-photo .el-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: none;
}
/* Neutralise tout zoom/transition au survol ajoute par le theme du site, sur
   les images d'affichage et leurs conteneurs. On EXCLUT .el-slide-flou (qui a
   son propre transform:scale pour le flou) via :not(). !important pour primer. */
.el-liste .el-tuile-photo img:not(.el-slide-flou),
.el-liste .el-tuile:hover .el-tuile-photo img:not(.el-slide-flou),
.el-liste .el-tuile-photo:hover img:not(.el-slide-flou),
.el-modale .el-detail-photo img:not(.el-slide-flou),
.el-modale .el-detail-photo:hover img:not(.el-slide-flou) {
	transform: none !important;
	transition: none !important;
}
.el-liste .el-tuile-photo,
.el-liste .el-tuile:hover .el-tuile-photo,
.el-modale .el-detail-photo,
.el-modale .el-detail-photo:hover {
	transform: none !important;
	transition: none !important;
}
/* Vignette PDF (bulletin/menu) : image nette (contain, jamais rognee) + la meme
   image agrandie et floutee en fond, sur le modele du carrousel modale (.el-slide-flou
   / .el-slide-img). Classes DEDIEES, scopees a .el-tuile-photo-doc uniquement : ne
   touche pas au rendu cover des photos normales (.el-tuile-photo / .el-photo-img). */
.el-liste .el-tuile-photo.el-tuile-photo-doc,
.el-liste .el-tuile-photo.el-tuile-photo-flou {
	position: relative;
}
.el-liste .el-tuile-photo-doc .el-tuile-flou,
.el-liste .el-tuile-photo-flou .el-tuile-flou {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(18px);
	transform: scale(1.15);
	z-index: 0;
}
.el-liste .el-tuile-photo-doc .el-photo-img.el-photo-img-contain,
.el-liste .el-tuile-photo-flou .el-photo-img.el-photo-img-contain {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 1;
}
/* Placeholder quand la fiche n'a pas de photo : fond clair + icone du type. */
.el-liste .el-tuile-photo-vide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f0f2f7 0%, #e5e9f2 100%);
}
.el-liste .el-placeholder-type {
	display: flex;
	color: var(--el-bleu-profond);
	opacity: 0.5;
}
.el-liste .el-placeholder-type .el-icone-type {
	width: 44px;
	height: 44px;
}

.el-liste .el-tuile-corps {
	padding: 20px 18px 16px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 12px;
}
.el-liste .el-tuile-titre {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0;
	color: #2D3748;
	line-height: 1.3;
	/* Coupe a 2 lignes max avec ellipsis, sans reserver la hauteur quand le titre
	   tient sur une seule ligne (evite un vide entre titre court et badge). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.el-liste .el-tuile-desc {
	font-size: 0.92em;
	line-height: 1.5;
	color: var(--el-ardoise);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Hauteur reservee : 3 lignes, espace vide en bas si le texte est court. */
	min-height: calc(1.5em * 3);
}
.el-liste .el-tuile-indice {
	font-size: 0.78em;
	color: var(--el-gris-texte);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: auto;
}
/* Zone basse de la tuile (champs + booleens + « Voir plus ») : poussee au pied
   de la tuile pour separer nettement la description des donnees. */
.el-liste .el-tuile-bas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
}
.el-liste .el-tuile-indice::after {
	content: "\203A"; /* › */
	font-size: 1.3em;
	line-height: 0;
	transform: translateY(1px);
}

/* Le bloc detail reste masque dans la tuile (clone par le JS dans la modale). */
.el-liste .el-detail-data {
	display: none;
}

/* ─── Modale : overlay floute + panneau opaque centre ───────────────────────── */
.el-modale-overlay {
	--el-bleu-profond: #0D1117;
	--el-ardoise: #2D3748;
	--el-bord: #e5e9f2;
	--el-bord-clair: #f0f2f7;
	--el-gris-texte: #6B7A8D;
	--el-fond-doux: #F7F9FC;
	--el-blanc: #ffffff;
	--el-bleu: #1A6DFF;
	--el-teal: #00E5B0;
	--el-grad: linear-gradient(135deg, #1A6DFF 0%, #00E5B0 100%);
	--el-soft: #F1F5F9;
	--el-ligne: rgba(13, 17, 23, 0.08);

	position: fixed;
	inset: 0;
	background: rgba(13, 17, 23, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 100000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
	font-family: system-ui, -apple-system, sans-serif;
	color: var(--el-bleu-profond);
	font-size: 15px;
	line-height: 1.6;
}
.el-modale-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.el-modale {
	width: min(1040px, 100%);
	max-height: min(90vh, 860px);
	background: #ffffff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(13, 17, 23, 0.35);
	display: flex;
	flex-direction: column;
	transform-origin: var(--el-orig-x, 50%) var(--el-orig-y, 50%);
	transform: scale(0.82);
	opacity: 0;
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.22s ease;
}
.el-modale-overlay.is-visible .el-modale {
	transform: scale(1);
	opacity: 1;
}

/* Bouton fermer, superpose en haut a droite du panneau.
 * Selecteur a specificite accrue et proprietes critiques forcees : le theme du
 * site (ex. Kadence) applique aux <button> un padding / line-height / display /
 * min-width qui decentreraient le glyphe. On neutralise ces heritages. */
.el-modale-overlay .el-modale-fermer {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	margin: 0 !important;
	border: none !important;
	background: rgba(255, 255, 255, 0.9);
	color: #2D3748;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 9px !important;
	cursor: pointer;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 2px 8px rgba(13, 27, 62, 0.18);
	transition: background 0.15s ease;
}
.el-modale-overlay .el-modale-fermer svg {
	display: block;
}
.el-modale-overlay .el-modale-fermer:hover {
	background: #ffffff;
}
.el-modale-overlay .el-modale-fermer:focus-visible {
	outline: 3px solid #2D3748;
	outline-offset: 2px;
}

/* Conteneur direct du contenu clone : c'est LUI qui scrolle.
 * flex:1 + min-height:0 : le corps occupe la hauteur restante de la modale
 * (sous le bouton fermer) et devient scrollable au lieu de deborder.
 * overscroll-behavior:contain : le scroll ne fuit pas vers la page de fond. */
.el-modale .el-modale-corps {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Le contenu clone (el-detail-data) est rendu visible une fois dans la modale.
 * Le scroll est porte par .el-modale-corps (parent), pas ici. */
.el-modale .el-detail-data {
	display: block !important;
}

/* Photo bandeau en tete de modale. */
/* Media : wrapper bandeau + pastille. Le bandeau clippe (flou contenu, marges
   propres) ; la pastille est positionnee par rapport a ce wrapper et peut deborder. */
.el-modale .el-detail-media {
	position: relative;
	margin: -34px -38px 0;
}
.el-modale .el-detail-photo {
	width: 100%;
	height: 320px;
	overflow: hidden;
	background: #f0f2f7;
	position: relative;
}
.el-modale .el-detail-photo > .el-detail-photo-img,
.el-modale .el-detail-photo > .el-carrousel {
	position: relative;
	width: 100%;
	height: 100%;
}
.el-modale .el-detail-photo .el-detail-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─── Carrousel photo (slides contain + fond floute, fleches, pastilles) ──────*/
.el-modale .el-carrousel {
	position: relative;
	width: 100%;
	height: 100%;
}
.el-modale .el-slides {
	width: 100%;
	height: 100%;
}
.el-modale .el-slide {
	display: none;
	position: absolute;
	inset: 0;
}
.el-modale .el-slide.is-active {
	display: block;
}
/* Fond floute : la meme photo, agrandie et floutee, remplit les bords. */
.el-modale .el-slide-flou {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(18px);
	transform: scale(1.15); /* evite les bords nets du flou */
}
/* Photo nette, entiere (jamais coupee). */
.el-modale .el-slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 1;
}
/* Fleches gauche/droite. */
.el-modale .el-carrousel-fleche {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #0D1B3E;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 2px 6px rgba(13, 27, 62, 0.25);
	transition: background 0.15s ease;
}
.el-modale .el-carrousel-fleche:hover {
	background: #ffffff;
}
.el-modale .el-carrousel-prec { left: 10px; }
.el-modale .el-carrousel-suiv { right: 10px; }
/* Pastilles. */
.el-modale .el-pastilles {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 7px;
}
.el-modale .el-pastille {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.el-modale .el-pastille.is-active {
	background: #ffffff;
	width: 22px;
	border-radius: 4px;
}

/* ── Pastille de DATE sur le bandeau photo (bas-gauche) ─────────────────────── */
.el-modale .el-pastille-date {
	position: absolute;
	left: 50px;
	bottom: -40px;
	z-index: 3;
	width: 92px;
	height: 96px;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 6px 18px rgba(13, 17, 23, 0.35);
	font-family: system-ui, -apple-system, sans-serif;
}
.el-modale .el-pastille-principal {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 12px 10px 10px;
	background: #D85A30;
	color: #ffffff;
}
.el-modale .el-pastille-jour {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
}
.el-modale .el-pastille-mois {
	font-size: 12px;
	font-weight: 600;
	text-transform: lowercase;
	line-height: 1.1;
}
.el-modale .el-pastille-fin {
	padding: 5px 8px;
	background: #EF9F27;
	color: #ffffff;
	font-size: 10px;
	font-weight: 600;
	text-transform: lowercase;
	line-height: 1.1;
}

/* Pastille date sur la TUILE : wrapper media + version reduite, memes couleurs. */
.el-liste .el-tuile-media {
	position: relative;
}
.el-liste .el-tuile-media .el-pastille-date {
	position: absolute;
	left: 12px;
	bottom: -24px;
	z-index: 2;
	width: 66px;
	height: 68px;
	display: flex;
	flex-direction: column;
	border-radius: 9px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 4px 12px rgba(13, 17, 23, 0.35);
	font-family: system-ui, -apple-system, sans-serif;
}
.el-liste .el-tuile-media .el-pastille-principal {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding: 7px 6px 6px;
	background: #D85A30;
	color: #ffffff;
}
.el-liste .el-tuile-media .el-pastille-jour {
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}
.el-liste .el-tuile-media .el-pastille-mois {
	font-size: 9px;
	font-weight: 600;
	text-transform: lowercase;
	line-height: 1.1;
}
.el-liste .el-tuile-media .el-pastille-fin {
	padding: 3px 6px;
	background: #EF9F27;
	color: #ffffff;
	font-size: 8px;
	font-weight: 600;
	text-transform: lowercase;
	line-height: 1.1;
}

/* ─── Carrousel variante TUILE (dans la grille) : cover, sans flou ────────────*/
.el-liste .el-tuile-photo .el-carrousel {
	position: relative;
	width: 100%;
	height: 100%;
}
.el-liste .el-tuile-photo .el-slides {
	width: 100%;
	height: 100%;
}
.el-liste .el-tuile-photo .el-slide {
	display: none;
	position: absolute;
	inset: 0;
}
.el-liste .el-tuile-photo .el-slide.is-active {
	display: block;
}
.el-liste .el-tuile-photo .el-slide-flou {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(18px);
	transform: scale(1.15);
	z-index: 0;
}
.el-liste .el-tuile-photo .el-slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain; /* tuile : photo entiere, jamais rognee, sur fond floute */
	display: block;
	z-index: 1;
}
.el-liste .el-tuile-photo .el-carrousel-fleche {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #0D1B3E;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 1px 4px rgba(13, 27, 62, 0.25);
	transition: background 0.15s ease;
}
.el-liste .el-tuile-photo .el-carrousel-fleche:hover {
	background: #ffffff;
}
.el-liste .el-tuile-photo .el-carrousel-fleche svg {
	width: 16px;
	height: 16px;
}
.el-liste .el-tuile-photo .el-carrousel-prec { left: 8px; }
.el-liste .el-tuile-photo .el-carrousel-suiv { right: 8px; }
.el-liste .el-tuile-photo .el-pastilles {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.el-liste .el-tuile-photo .el-pastille {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.el-liste .el-tuile-photo .el-pastille.is-active {
	background: #ffffff;
	width: 22px;
	border-radius: 4px;
}

.el-modale .el-detail-contenu {
	padding: 24px 30px 30px;
}

.el-modale .el-detail-titre {
	font-size: 1.7em;
	font-weight: 700;
	margin: 0 0 14px;
	color: #0D1B3E;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ZONE DEUX COLONNES + LIGNES A ICONES (rendu detail principal)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Gauche : infos factuelles (adresse, date, horaires, tarifs, site, reseaux).
 * Droite : contact (+ carte au palier suivant). Sur mobile : empilement. */
.el-modale .el-detail-2col {
	display: grid;
	grid-template-columns: 1fr 440px;
	gap: 28px;
	align-items: start;
	margin: 4px 0 8px;
}
.el-modale .el-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Ligne a icone : icone SVG a gauche, contenu a droite, alignes en haut. */
.el-modale .el-ligne {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.92em;
	color: #2D3748;
	line-height: 1.5;
}
.el-modale .el-ligne-icone {
	flex-shrink: 0;
	color: #6b7280;
	display: flex;
	align-items: center;
	margin-top: 2px;
}
.el-modale .el-ligne-icone .el-icone {
	display: block;
}
.el-modale .el-ligne-txt {
	min-width: 0;
	flex: 1;
}
.el-modale .el-ligne-txt a {
	color: #2D3748;
	text-decoration: none;
	font-weight: 600;
}
.el-modale .el-ligne-txt a:hover {
	text-decoration: underline;
}

/* Nom du contact : mis en avant. */
.el-modale .el-contact-nom {
	font-weight: 600;
	color: #0D1B3E;
}

/* Site : police plus grande (miroir dashboard). */
.el-modale .el-site-lien {
	font-size: 1.08em;
}

/* Public : badges en ligne (colonne gauche, en tete). */
.el-modale .el-public-ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.el-modale .el-public-label {
	font-size: 0.82em;
	color: #6b7280;
	margin-right: 2px;
}
.el-modale .el-public-badge {
	border: 1px solid #e5e9f2;
	border-radius: 9999px;
	font-size: 0.82em;
	padding: 2px 10px;
	color: #2D3748;
}

/* Horaires DANS une ligne a icone : le <ul> ne doit pas avoir de marge parasite. */
.el-modale .el-ligne-txt .el-horaires {
	margin: 0;
}
/* Tarifs DANS une ligne a icone. */
.el-modale .el-ligne-txt .el-tarifs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SECTIONS PLEINE LARGEUR (sous les deux colonnes)
 * description, caracteristiques, equipements par famille, a proximite, info
 * ═══════════════════════════════════════════════════════════════════════════ */

.el-modale .el-section {
	margin-top: 20px;
}

.el-modale .el-bloc-titre {
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #2D3748;
	margin: 0 0 10px;
	font-weight: 800;
	display: flex;
	align-items: center;
	gap: 8px;
}
.el-modale .el-bloc-titre::before {
	content: "";
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: #2D3748;
	flex-shrink: 0;
}
/* Intitule « Contact » (colonne droite) : plus petit, et champs indentes dessous. */
.el-modale .el-contact-titre {
	font-size: 0.78em;
	margin-bottom: 8px;
}

.el-modale .el-detail-desc {
	font-size: 0.98em;
	line-height: 1.6;
	color: #2D3748;
	margin: 0;
	/* Respecte les retours a la ligne saisis (le PHP echappe en esc_html, sans
	   <br>) : pre-line preserve les \n tout en repliant normalement le texte. */
	white-space: pre-line;
}

/* Lien editorial sous la description (« En savoir plus → »). */
.el-modale .el-detail-lien-zone {
	margin-top: 8px;
}
.el-modale .el-detail-lien {
	display: inline-block;
	font-size: 0.95em;
	font-weight: 600;
	color: #4a6da7;
	text-decoration: none;
}
.el-modale .el-detail-lien:hover {
	color: #38548a;
	text-decoration: underline;
}

/* Bloc Caracteristiques (surface, capacite). */
.el-modale .el-caracs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.el-modale .el-carac {
	font-size: 0.92em;
	color: #2D3748;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 9px;
}
.el-modale .el-carac-icone {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--el-gris-texte);
}
.el-modale .el-carac-icone .el-icone {
	width: 17px;
	height: 17px;
}

/* Listes a puces (multiselect equipements/services ; liste_textes a proximite). */
.el-modale .el-puces-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	padding-left: 14px;
}
.el-modale .el-puces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.el-modale .el-puce {
	font-size: 0.92em;
	color: #2D3748;
	line-height: 1.4;
	padding-left: 16px;
	position: relative;
}
.el-modale .el-puce::before {
	content: "•";
	position: absolute;
	left: 2px;
	color: #6b7280;
}
/* Un bloc puces qui n'est pas le premier de sa section : meme espace qu'entre sections. */
.el-modale .el-section .el-bloc-puces + .el-bloc-puces {
	margin-top: 34px;
}

/* Tarifs (items en puces, reutilises dans la ligne a icone). */
.el-modale .el-tarif-item {
	font-size: 0.92em;
	color: #2D3748;
	line-height: 1.4;
}

/* Reseaux (colonne gauche, sous le site) : logo de marque + nom, facon dashboard. */
.el-modale .el-reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 4px;
}
.el-modale .el-reseau {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9em;
	font-weight: 600;
	color: #0D1B3E;
	text-decoration: none;
	transition: color 0.15s ease;
}
.el-modale .el-reseau .el-icone-reseau {
	flex-shrink: 0;
}
.el-modale .el-reseau:hover {
	color: #2D3748;
}

/* Horaires (liste jour / creneaux). */
.el-modale .el-horaires {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.el-modale .el-horaire {
	display: flex;
	font-size: 0.9em;
	color: #2D3748;
	gap: 12px;
}
.el-modale .el-jour {
	font-weight: 600;
}

/* Badges booleens, regroupes par famille (bloc « Equipements et services »). */
.el-modale .el-badges-bool {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.el-modale .el-badge-bool {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: 9999px;
	background: #eef1f8;
	color: #0D1B3E;
	font-size: 0.84em;
	font-weight: 600;
	line-height: 1.5;
}
.el-modale .el-badge-bool .el-icone {
	flex-shrink: 0;
}
.el-modale .el-famille-bool {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}
.el-modale .el-famille-bool:first-of-type {
	margin-top: 0;
}
.el-modale .el-famille-titre {
	font-size: 0.86em;
	color: #6b7280;
	font-weight: 600;
}

/* Bloc info generique (select : conventionnement...). */
.el-modale .el-info-valeur {
	margin: 0;
	font-size: 0.92em;
	color: #2D3748;
	line-height: 1.4;
}

/* ─── Carte Leaflet (colonne droite, sous le contact) ────────────────────────*/
.el-modale .el-carte-zone {
	margin-top: 4px;
}
.el-modale .el-carte {
	width: 100%;
	height: 300px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e5e9f2;
	background: #f0f2f7;
	z-index: 0; /* garde les controles Leaflet sous le bouton fermer de la modale */
}
.el-modale .el-carte-agrandir {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.85em;
	font-weight: 600;
	color: #4a6da7;
	text-decoration: none;
}
.el-modale .el-carte-agrandir:hover {
	color: #38548a;
	text-decoration: underline;
}
/* Le theme du site peut styliser les <a> dans les tuiles Leaflet (attribution) :
   on neutralise pour rester lisible. */
.el-modale .el-carte a {
	font-weight: normal;
	box-shadow: none;
}

/* ─── Marqueur carte (photo ronde + pointe, ou pin SVG en repli) ──────────────*/
/* .el-marqueur : conteneur du divIcon (neutre, pas de fond Leaflet par defaut). */
.el-marqueur {
	background: transparent;
	border: none;
}
.el-marqueur-photo {
	position: relative;
	width: 48px;
	height: 48px;
}
.el-marqueur-photo img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #ffffff;
	box-shadow: 0 2px 6px rgba(13, 27, 62, 0.35);
	display: block;
}
/* Pointe sous le cercle (triangle vers le bas), pointant le lieu exact. */
.el-marqueur-photo .el-marqueur-pointe {
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid #ffffff;
	filter: drop-shadow(0 2px 1px rgba(13, 27, 62, 0.25));
}

/* ─── Etat vide ─────────────────────────────────────────────────────────────── */
.el-liste .el-empty {
	text-align: center;
	padding: 70px 40px;
	background: #f8f9fa;
	border: 2px dashed #d0d8ee;
	border-radius: 16px;
	color: #555;
}
.el-liste .el-empty-title {
	font-size: 1.2em;
	margin: 0;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
	.el-modale .el-detail-2col {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 640px) {
	.el-modale-overlay {
		padding: 0;
	}
	.el-modale {
		width: 100%;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
	}
	.el-modale .el-detail-photo {
		height: 200px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.el-liste .el-tuile,
	.el-modale {
		transition: opacity 0.15s ease;
		transform: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   REFONTE MODALE — palette ETIKA Solution (habillage aere + colonnes services)
   Bloc consolide place en fin de fichier : surcharge les regles precedentes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Aeration generale : plus d'espace (marges haut/bas/gauche/droite) ──────── */
.el-modale .el-modale-corps {
	padding: 34px 38px 38px;
}
.el-modale .el-detail-contenu {
	padding: 0;
}
.el-modale .el-section {
	margin-top: 34px;
}
.el-modale .el-detail-2col {
	gap: 32px 48px;
}
.el-modale .el-col {
	gap: 16px;
}

/* ── Uniformisation de la police de corps (taille des horaires : ~0.95em) ──── */
/* Tout le texte courant a la MEME taille. Piege a eviter : les font-size en em
   se CUMULENT quand ils sont imbriques (.el-ligne-txt dans .el-ligne, .el-horaire
   dans .el-ligne-txt...). Solution : une seule taille de reference sur .el-ligne,
   et tous les descendants texte a 1em (ils heritent, sans re-multiplier).
   Seuls les titres et badges gardent une taille propre. */
.el-modale .el-ligne,
.el-modale .el-detail-desc,
.el-modale .el-puce,
.el-modale .el-info-valeur,
.el-modale .el-reseau,
.el-modale .el-site-lien {
	font-size: 0.95em;
	line-height: 1.6;
}
.el-modale .el-ligne-txt,
.el-modale .el-ligne-txt .el-horaires,
.el-modale .el-ligne-txt .el-tarifs,
.el-modale .el-horaire,
.el-modale .el-tarif-item,
.el-modale .el-contact-nom {
	font-size: 1em;
	line-height: 1.6;
}

/* ── Titre principal : espace au-dessus (photo/titre), colore ───────────────── */
.el-modale .el-detail-titre {
	font-size: 1.95em;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: #2D3748;
	margin: 22px 0 20px;
}

/* ── Liens : bleu anthracite clair ─────────────────────────────────────────── */
.el-modale .el-ligne-txt a,
.el-modale .el-site-lien {
	color: #4a6da7;
}
.el-modale .el-ligne-txt a:hover,
.el-modale .el-site-lien:hover {
	color: #38548a;
}

/* ── Bloc CONTACT : trait vertical a gauche (miroir maquette dashboard) ─────── */
.el-modale .el-contact-bloc {
	margin-top: 8px;
	margin-bottom: 22px;
}
.el-modale .el-contact-bloc .el-contact-corps {
	border-left: 2px solid var(--el-ligne);
	padding-left: 16px;
	margin-left: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ── Bloc PUBLIC : meme structure que Contact (titre + trait vertical) ──────── */
/* Deux lignes a icone (publics / PSH), liees par le trait. Gap serre (4px) :
   elles se lisent comme un paragraphe, pas comme deux blocs distincts — c'est
   le gap 16px de .el-col qui separe le bloc Public du bloc suivant. */
.el-modale .el-public-bloc {
	margin-top: 4px;
	margin-bottom: 8px;
}
.el-modale .el-public-titre {
	font-size: 0.78em;
	margin-bottom: 8px;
}
.el-modale .el-public-bloc .el-public-corps {
	border-left: 2px solid var(--el-ligne);
	padding-left: 16px;
	margin-left: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
/* Ligne : icone + badges, alignes en haut (comme .el-ligne). */
.el-modale .el-public-bloc .el-public-ligne {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.el-modale .el-public-bloc .el-ligne-icone {
	flex-shrink: 0;
	color: #6b7280;
	display: flex;
	align-items: center;
	margin-top: 3px;
}
/* Les badges d'une ligne coulent ensemble (plusieurs publics possibles). */
.el-modale .el-public-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

/* ── Bloc SERVICES : entete (titre + legende) puis badges en flux coulant ───── */
.el-modale .el-services-entete {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 12px;
}
.el-modale .el-services-entete .el-bloc-titre {
	margin: 0;
}
.el-modale .el-services-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.el-modale .el-legende-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.78em;
	color: var(--el-gris-texte);
	font-weight: 600;
}
.el-modale .el-legende-pastille {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}
/* Couleur de pastille de legende, par famille. `pratique` est GRIS : ses
   badges restent neutres (pas de 4e teinte — trois couleurs dans une rangee
   coulante suffisent). Sans cette regle, sa pastille serait transparente et
   la legende paraitrait cassee. */
.el-modale .el-legende-item.el-fam-pratique .el-legende-pastille { background: #94a3b8; }
.el-modale .el-legende-item.el-fam-accessibilite .el-legende-pastille { background: #2563eb; }
.el-modale .el-legende-item.el-fam-services .el-legende-pastille { background: #10b981; }
.el-modale .el-legende-item.el-fam-paiement .el-legende-pastille { background: #7c3aed; }

/* Tous les badges sur une rangee coulante. Le wrapper el-fam-* est transparent
   au flux (display:contents) : il ne sert qu'a porter la couleur via descendance. */
.el-modale .el-badges-flux {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.el-modale .el-badges-flux > .el-fam-pratique,
.el-modale .el-badges-flux > .el-fam-accessibilite,
.el-modale .el-badges-flux > .el-fam-services,
.el-modale .el-badges-flux > .el-fam-paiement {
	display: contents;
}

/* ── Badges pastel differencies par famille (plus flashy) ──────────────────── */
.el-modale .el-fam-accessibilite .el-badge-bool {
	background: rgba(37, 99, 235, 0.16);
	color: #1d4ed8;
}
.el-modale .el-fam-services .el-badge-bool {
	background: rgba(16, 185, 129, 0.18);
	color: #047857;
}
.el-modale .el-fam-paiement .el-badge-bool {
	background: rgba(124, 58, 237, 0.16);
	color: #6d28d9;
}

/* ── Reseaux : texte en couleur du corps ; icone en couleur de marque (fill inline PHP). */
.el-modale .el-reseau {
	color: #2D3748;
}
.el-modale .el-reseau:hover {
	color: #0D1117;
}

/* ── Puces d'equipement a icone (multiselect) ──────────────────────────────── */
.el-modale .el-puce-icone {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 0;
}
.el-modale .el-puce-icone::before {
	content: none;
}
.el-modale .el-puce-icone .el-icone-equip {
	flex-shrink: 0;
	color: var(--el-bleu);
}
/* Un item sans icone mappee garde une puce classique (repli). */
.el-modale .el-puce-vide {
	padding-left: 16px;
}


/* ── Boutons au-dessus de la carte : Partager + Voir l'itineraire ───────────── */
.el-modale .el-carte-actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-bottom: 10px;
}
.el-modale .el-carte-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 10px;
	border-radius: 9px;
	border: 1px solid var(--el-ligne);
	background: var(--el-soft);
	color: var(--el-ardoise);
	font-size: 0.82em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.el-modale .el-carte-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.el-modale .el-carte-btn:hover {
	background: #ffffff;
	border-color: #4a6da7;
	color: #4a6da7;
}
.el-modale .el-carte-btn .el-icone {
	flex-shrink: 0;
}


/* ── Badge de TYPE (icone + libelle), au-dessus du titre — tuile et modale ──── */
/* La couleur (fond + texte) est posee inline par PHP, propre a chaque type. */
.el-modale .el-detail-badge-zone {
	margin: 12px 0 12px;
	text-align: right;
}
.el-liste .el-tuile-badge-zone {
	text-align: right;
}
.el-badge-type {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	gap: 5px;
	padding: 2px 9px 2px 7px;
	border-radius: 9999px;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
}
/* Dans la modale : badge plus grand que sur la tuile. */
.el-modale .el-badge-type {
	gap: 7px;
	padding: 5px 13px;
	font-size: 0.9em;
}
.el-modale .el-badge-type .el-badge-type-icone .el-icone-type {
	width: 16px;
	height: 16px;
}
.el-badge-type-icone {
	display: inline-flex;
	flex-shrink: 0;
}
.el-badge-type-icone .el-icone-type {
	width: 12px;
	height: 12px;
}


/* ── Badge OUVERT / FERME (rempli par JS selon les horaires) ────────────────── */
.el-badge-ouverture {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	margin-right: 6px;
	background: transparent;
	border: 1px solid currentColor;
}
/* Point de statut : plein, dans la couleur de l'etat, avec une pulsation douce
   (halo qui s'etend puis disparait). currentColor = couleur de l'etat courant. */
.el-badge-ouverture::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: currentColor;
	animation: el-pulse-point 1.8s ease-out infinite;
}
@keyframes el-pulse-point {
	0%   { box-shadow: 0 0 0 0 currentColor; }
	70%  { box-shadow: 0 0 0 5px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
/* Respecte la preference « reduire les animations ». */
@media (prefers-reduced-motion: reduce) {
	.el-badge-ouverture::before { animation: none; }
}
/* Couleurs par etat : la bordure et le texte heritent de « color » (currentColor). */
.el-badge-ouverture.el-ouv-ouvert {
	color: #0f9d63;
	border-color: rgba(15, 157, 99, 0.45);
}
.el-badge-ouverture.el-ouv-ferme {
	color: #e0344e;
	border-color: rgba(224, 52, 78, 0.45);
}
.el-badge-ouverture.el-ouv-ferme-bientot,
.el-badge-ouverture.el-ouv-ouvre-bientot {
	color: #d98514;
	border-color: rgba(217, 133, 20, 0.45);
}
/* Dans la modale : meme taille que le badge type. */
.el-modale .el-badge-ouverture {
	font-size: 0.9em;
	padding: 4px 13px;
}


/* ── Booleens (services) sur la TUILE : badges compacts, apres la description ── */
.el-liste .el-tuile-badges-bool {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.el-liste .el-tuile-badges-bool > .el-fam-pratique,
.el-liste .el-tuile-badges-bool > .el-fam-accessibilite,
.el-liste .el-tuile-badges-bool > .el-fam-services,
.el-liste .el-tuile-badges-bool > .el-fam-paiement {
	display: contents;
}
.el-liste .el-tuile-badges-bool .el-badge-bool {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 6px;
	border-radius: 9999px;
	font-size: 0.62em;
	font-weight: 600;
	line-height: 1.4;
	background: #eef1f8;
	color: #0D1B3E;
}
.el-liste .el-tuile-badges-bool .el-badge-bool .el-icone {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}
/* Couleurs pastel par famille (memes teintes que la modale). */
.el-liste .el-tuile-badges-bool .el-fam-accessibilite .el-badge-bool {
	background: rgba(37, 99, 235, 0.16);
	color: #1d4ed8;
}
.el-liste .el-tuile-badges-bool .el-fam-services .el-badge-bool {
	background: rgba(16, 185, 129, 0.18);
	color: #047857;
}
.el-liste .el-tuile-badges-bool .el-fam-paiement .el-badge-bool {
	background: rgba(124, 58, 237, 0.16);
	color: #6d28d9;
}


/* ── Titre de la liste (au-dessus de la grille), style modale/tuile ─────────── */
.el-liste .el-liste-titre {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-size: clamp(24px, 2.2vw, 34px);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #2B3040;
	line-height: 1.15;
}
.el-liste .el-liste-titre-barre {
	width: 5px;
	height: clamp(28px, 2.2vw, 34px);
	border-radius: 0;
	flex-shrink: 0;
}
.el-liste .el-liste-titre-txt {
	display: inline-block;
}


/* ── Hint (accroche) sous le titre de liste ────────────────────────────────── */
.el-liste .el-liste-hint {
	margin: 10px 0 28px 21px;
	font-size: clamp(15px, 1.1vw, 18px);
	color: var(--el-gris-texte);
	line-height: 1.6;
	max-width: 640px;
}

/* ── Sous-sections (cas gites : communaux / a proximite) ───────────────────── */
.el-liste .el-sous-section {
	margin-bottom: 72px;
}
.el-liste .el-sous-section:last-child {
	margin-bottom: 0;
}
.el-liste .el-sous-titre {
	font-size: 1.25em;
	font-weight: 700;
	color: #2D3748;
	margin: 0 auto 32px;
	letter-spacing: -0.01em;
	text-align: center;
	padding-top: 14px;
	padding-bottom: 14px;
	position: relative;
	width: fit-content;
	max-width: 100%;
}
.el-liste .el-sous-titre::before {
	content: "";
	position: absolute;
	left: -30px;
	right: -30px;
	top: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--el-bord);
}
.el-liste .el-sous-titre::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 48px;
	height: 2px;
	border-radius: 2px;
	background: var(--el-bord);
}

/* Grille des gites communaux : 3 par ligne, tuiles un peu plus grandes. */
.el-liste .el-grille-communaux {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}
.el-liste .el-grille-communaux .el-tuile-photo {
	height: 260px;
}
@media (max-width: 1000px) {
	.el-liste .el-grille-communaux {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 620px) {
	.el-liste .el-grille-communaux {
		grid-template-columns: 1fr;
	}
}


/* ── Agenda : masquage des evenements passes + case pour les afficher ───────── */
/* Les tuiles passees sont masquees par defaut. Quand la grille porte la classe
   « el-passes-visibles » (ajoutee en JS au clic sur la case), elles reapparaissent
   a leur place chronologique (elles sont deja dans l'ordre dans le flux). */
.el-liste .el-agenda .el-tuile-passee {
	display: none;
}
.el-liste .el-agenda.el-passes-visibles .el-tuile-passee {
	display: flex;
}
/* Les tuiles passees affichees sont legerement attenuees (reperage visuel). */
.el-liste .el-agenda.el-passes-visibles .el-tuile-passee {
	opacity: 0.7;
}
.el-liste .el-toggle-passes {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	cursor: pointer;
	font-size: 0.92em;
	color: var(--el-gris-texte);
	user-select: none;
}
/* Case native masquee visuellement mais toujours presente (accessibilite,
   navigation clavier) : c'est elle qui porte l'etat :checked. */
.el-liste .el-toggle-passes-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
/* Piste du switch. */
.el-liste .el-switch {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 22px;
	border-radius: 9999px;
	background: #cdd5e0;
	transition: background 0.2s ease;
}
/* Rond du switch. */
.el-liste .el-switch::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(13, 17, 23, 0.3);
	transition: transform 0.2s ease;
}
/* Etat coche : piste coloree + rond a droite. */
.el-liste .el-toggle-passes-input:checked + .el-switch {
	background: var(--el-bleu);
}
.el-liste .el-toggle-passes-input:checked + .el-switch::before {
	transform: translateX(18px);
}
/* Anneau de focus clavier (accessibilite). */
.el-liste .el-toggle-passes-input:focus-visible + .el-switch {
	box-shadow: 0 0 0 3px rgba(26, 109, 255, 0.35);
}


/* ── Badge ouvert/ferme deplace SOUS le titre (tuile et modale) ─────────────── */
/* Le corps de tuile n'a plus de gap : chaque ecart est defini par element, pour
   pouvoir coller le badge au titre tout en espaçant la description. */
.el-modale .el-detail-ouv-zone {
	margin: 6px 0 16px;
}


/* ── Detail du creneau dans le badge ouvert/ferme (ex. « · jusqu'a 18h ») ───── */
.el-badge-ouverture .el-ouv-detail {
	font-weight: 400;
	opacity: 0.85;
}


/* ── Bloc de champs additionnels sur les tuiles (selon le type) ─────────────── */
/* Entre la description et les badges de services. Aere, icones dans l'esprit de
   la modale (trait fin, gris), une ligne par champ. */
.el-liste .el-tuile-champs {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.el-liste .el-tuile-champ {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	/* Taille en rem (relative a la racine, PAS au parent) : tous les champs de
	   tuile (adresse, prestations, services...) ont ainsi rigoureusement la meme
	   taille reelle, quelle que soit leur profondeur d'emboitement. En em, la
	   valeur se cumulait differemment selon la structure -> tailles divergentes. */
	font-size: 0.86rem;
	color: var(--el-ardoise);
	line-height: 1.35;
}
.el-liste .el-tuile-champ-icone {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--el-gris-texte);
	margin-top: 1px;
}
.el-liste .el-tuile-champ-icone .el-icone {
	width: 15px;
	height: 15px;
}
/* Adresse sur 2 lignes : la ligne 1 (rue + complement) est tronquee avec « ... »
   si elle depasse la largeur ; la ligne 2 (CP + ville) s'affiche normalement. Le
   min-width:0 sur le conteneur flex est indispensable pour que l'ellipsis marche. */
.el-liste .el-tuile-adresse {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}
.el-liste .el-tuile-adresse-l1 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.el-liste .el-tuile-champ--adresse {
	align-items: flex-start;
}
/* Deux lignes de PUBLIC (publics + PSH) : un seul champ, deux lignes. Gap propre
   au conteneur — le gap 18px de .el-tuile-champs separe des CHAMPS, il serait
   trop large ici. Meme patron que .el-tuile-prestas juste en dessous. */
.el-liste .el-tuile-publics {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* Prestations metier (hebergements) en tuile : elles REUTILISENT les classes des
   champs (el-tuile-champ / -icone) pour une typographie strictement identique. On
   ne surcharge ici que les specificites : couleur d'icone bleue (comme la modale)
   et le « ... » de fin. */
.el-liste .el-tuile-prestas {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}
.el-liste .el-tuile-presta {
	align-items: center;
	font-size: 0.78rem;
}
.el-liste .el-tuile-presta .el-tuile-presta-icone {
	color: var(--el-bleu);
}
.el-liste .el-tuile-presta-icone .el-icone,
.el-liste .el-tuile-presta-icone .el-icone-equip {
	width: 14px;
	height: 14px;
}
.el-liste .el-tuile-presta-plus {
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--el-gris-texte);
}
.el-liste .el-tuile-voir-tarifs {
	color: #4a6da7;
	text-decoration: underline;
	font-weight: 600;
}
.el-liste .el-tuile-voir-tarifs:hover {
	color: #38548a;
}


/* ══ Bloc « A la une » (page d'accueil) ═════════════════════════════════════ */
/* Une colonne par type present (actualite, agenda, info, enquete), chacune avec
   un carrousel de tuiles completes (visuel identique aux tuiles de liste). */
.el-alaune .el-alaune-titre {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 2.2em;
	font-weight: 700;
	color: var(--el-bleu-profond);
	margin: 0 0 28px;
	text-align: center;
}
.el-alaune .el-alaune-titre-icone {
	display: inline-flex;
	color: #4a6da7;
	transform-origin: 70% 70%;
	animation: el-megaphone 2.6s ease-in-out infinite;
}
@keyframes el-megaphone {
	0%, 60%, 100% { transform: rotate(0deg); }
	66% { transform: rotate(-9deg); }
	72% { transform: rotate(7deg); }
	78% { transform: rotate(-5deg); }
	84% { transform: rotate(4deg); }
	90% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
	.el-alaune .el-alaune-titre-icone { animation: none; }
}
.el-alaune .el-alaune-titre-icone .el-icone {
	width: 38px;
	height: 38px;
}

/* Grille de colonnes : s'adapte au nombre de types presents (data-cols 1 a 4). */
/* Colonnes en flex centre. La largeur d'une colonne est figee sur la reference
   « 3 colonnes » (gap 44px) : ainsi, a 1, 2 ou 3 colonnes, chaque tuile garde la
   MEME largeur, et le bloc est centre (on n'elargit jamais). */
.el-alaune .el-alaune-grille {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 44px;
}
.el-alaune .el-alaune-colonne {
	width: calc((100% - 2 * 44px) / 3);
}
/* 4 colonnes : reference 4 (4 tuiles sur une ligne, un peu plus etroites). */
.el-alaune-ligne--secondaire[data-cols="4"] .el-alaune-colonne {
	width: calc((100% - 3 * 44px) / 4);
}

/* ── Lignes du bloc A la une (agenda en haut, actu/info en dessous) ─────────── */
.el-alaune .el-alaune-ligne {
	margin-bottom: 48px;
}
.el-alaune .el-alaune-ligne:last-child {
	margin-bottom: 0;
}

/* Ligne AGENDA : le trio occupe 75% de la largeur, centre (marges laterales de
   12,5% de chaque cote). Chaque page (slide) contient 3 tuiles cote a cote. */
.el-alaune .el-alaune-ligne--agenda {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}
.el-alaune .el-alaune-trio {
	display: flex;
	gap: 44px;
	align-items: stretch;
	width: 100%;
}
.el-alaune .el-alaune-cell {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}
.el-alaune .el-alaune-cell .el-tuile {
	width: 100%;
}
/* Emplacement vide (derniere page incomplete) : occupe la place, invisible. */
.el-alaune .el-alaune-cell--vide {
	visibility: hidden;
}

/* Ligne SECONDAIRE (actu/info) : tuiles CENTREES, gap plus large que l'agenda.
   La largeur s'adapte au nombre de colonnes presentes (data-cols) pour que les
   tuiles tiennent TOUJOURS sur une seule ligne, quel que soit leur nombre. */
.el-alaune .el-alaune-ligne--secondaire .el-alaune-grille {
	justify-content: center;
	gap: 72px;
}
/* Par defaut (1 ou 2 colonnes) : tuiles larges, calees sur la reference 2. */
.el-alaune .el-alaune-ligne--secondaire .el-alaune-colonne {
	width: calc((100% - 72px) / 2);
}
/* 3 colonnes : largeur reduite pour que les 3 tiennent sur une ligne (2 gaps). */
.el-alaune-ligne--secondaire[data-cols="3"] .el-alaune-colonne {
	width: calc((100% - 2 * 72px) / 3);
}
.el-alaune-ligne--secondaire[data-cols="1"] .el-alaune-colonne {
	width: 100%;
}

/* Sous-titre de colonne (type) avec icone. */
.el-alaune .el-alaune-sous-titre {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1.1em;
	font-weight: 600;
	margin: 0 0 14px;
	padding-bottom: 12px;
	position: relative;
	border: none;
	/* La couleur (texte, icone, trait) vient du style inline (accent du type). */
}
/* Trait sous le sous-titre : commence a gauche, s'arrete aux 3/4 (75%) a droite.
   En ::after (et non border-bottom) pour controler la longueur ; herite de la
   couleur du texte via currentColor. */
.el-alaune .el-alaune-sous-titre::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 75%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}
.el-alaune .el-alaune-st-icone {
	display: inline-flex;
	color: currentColor;
}
.el-alaune .el-alaune-st-icone .el-icone {
	width: 20px;
	height: 20px;
}

/* Carrousel de tuiles : les slides se superposent, une seule visible. */
.el-alaune .el-alaune-colonne {
	display: flex;
	flex-direction: column;
	/* Reserve en bas de chaque colonne la hauteur de la zone pastilles, meme s'il
	   n'y en a pas (colonne a 1 element) : ainsi toutes les tuiles ont la meme
	   hauteur, pastilles alignees en dessous. */
	padding-bottom: 27px;
	position: relative;
}
.el-alaune .el-alaune-pastilles {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	gap: 11px;
	height: 27px;
	align-items: center;
	margin: 0;
}
.el-alaune .el-alaune-carrousel {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden; /* viewport : masque les slides hors cadre */
}
/* Agenda (trio) : reserve une bande basse (comme .el-alaune-colonne) pour que
   les pastilles de navigation (position:absolute; bottom:0) se logent SOUS les
   tuiles, et non a l'interieur quand une tuile est haute (champs longs). La
   zone secondaire a deja ce mecanisme via .el-alaune-colonne ; --trio n'a pas
   de .el-alaune-colonne, on l'ajoute donc directement sur le carrousel. */
.el-alaune .el-alaune-carrousel--trio {
	padding-bottom: 27px;
}
/* Ruban horizontal qui GLISSE a l'interieur du viewport (le carrousel). Sa
   largeur est celle du viewport ; chaque slide fait 100% de cette largeur, et on
   translate le ruban pour changer de page. La transition donne le glissement. */
.el-alaune .el-alaune-slides {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	transition: transform 0.5s ease;
	will-change: transform;
}
.el-alaune .el-alaune-slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	display: flex;
	height: 100%;
}
/* La tuile a l'interieur reprend exactement le visuel des tuiles de liste, et
   remplit la hauteur de la colonne (uniformisation des hauteurs entre types). */
.el-alaune .el-alaune-slide .el-tuile {
	width: 100%;
	height: 100%;
	min-height: 540px;
}
/* Coupe le glissement si l'utilisateur a demande de reduire les animations. */
@media (prefers-reduced-motion: reduce) {
	.el-alaune .el-alaune-slides { transition: none; }
}

/* Fleches de navigation entre TUILES : placees sur les cotes exterieurs de la
   colonne, centrees verticalement. Volontairement HORS de la photo pour ne pas
   se confondre avec les fleches du carrousel photo interne (ronds blancs). */
.el-alaune .el-alaune-fleche {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: rgba(44, 62, 80, 0.6);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	box-shadow: 0 2px 8px rgba(13, 27, 62, 0.3);
	transition: background 0.15s ease;
}
.el-alaune .el-alaune-fleche:hover {
	background: rgba(13, 27, 62, 0.8);
}
.el-alaune .el-alaune-fleche svg {
	display: block !important;
	width: 20px;
	height: 20px;
	fill: none !important;
	stroke: #ffffff !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.el-alaune .el-alaune-fleche svg polyline {
	fill: none !important;
	stroke: #ffffff !important;
}
.el-alaune .el-alaune-prec { left: 8px; }
.el-alaune .el-alaune-suiv { right: 8px; }

/* Pastilles : sous la tuile, centrees. */
.el-alaune .el-alaune-pastille {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: #cdd5e0;
	cursor: pointer;
	transition: background 0.15s ease, width 0.15s ease, border-radius 0.15s ease;
}
.el-alaune .el-alaune-pastille.is-active {
	background: #4a6da7;
	width: 22px;
	border-radius: 4px;
}

/* Responsive : sur ecran moyen, les tuiles passent a la reference 2 colonnes
   (centrees) ; sur mobile, une seule colonne pleine largeur. */
@media (max-width: 1100px) {
	.el-alaune .el-alaune-colonne,
	.el-alaune[data-cols="4"] .el-alaune-colonne,
	.el-alaune-ligne--secondaire[data-cols="3"] .el-alaune-colonne,
	.el-alaune .el-alaune-ligne--secondaire .el-alaune-colonne {
		width: calc((100% - 44px) / 2);
	}
}
@media (max-width: 900px) {
	.el-alaune .el-alaune-trio {
		flex-wrap: wrap;
	}
	.el-alaune .el-alaune-cell {
		flex: 0 0 calc((100% - 44px) / 2);
	}
}
@media (max-width: 680px) {
	.el-alaune .el-alaune-colonne,
	.el-alaune[data-cols="4"] .el-alaune-colonne,
	.el-alaune-ligne--secondaire[data-cols="3"] .el-alaune-colonne,
	.el-alaune .el-alaune-ligne--secondaire .el-alaune-colonne {
		width: 100%;
	}
	.el-alaune .el-alaune-slide .el-tuile {
		min-height: 0;
	}
	.el-alaune .el-alaune-cell {
		flex: 0 0 100%;
	}
}

/* ── Bloc Documents (sous la description, modale : liens cliquables en ligne) ── */
.el-modale .el-documents-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 22px;
}
.el-modale .el-document {
	font-size: 0.95em;
}
.el-modale .el-document-lien {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #4a6da7;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.15s ease;
}
.el-modale .el-document-lien:hover {
	color: #38548a;
	text-decoration: underline;
}
.el-modale .el-document-icone {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--el-gris-texte);
}
.el-modale .el-document-lien .el-document-icone {
	color: #4a6da7;
}
.el-modale .el-document-manquant {
	margin-left: 6px;
	font-size: 0.85em;
	color: #b91c1c;
}
/* ── Badge de RECURRENCE : coin haut-droite de la photo (tuile) ─────────────── */
/* Pose sur le wrapper media (position:relative deja porte par .el-tuile-media).
   Fond blanc translucide comme les fleches de carrousel, pour se poser sur la
   photo sans l'ecraser. */
.el-liste .el-tuile-media .el-tuile-badge-recurrence {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: calc(100% - 20px);
	padding: 4px 10px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.92);
	color: #2D3748;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.3;
	box-shadow: 0 2px 6px rgba(13, 27, 62, 0.18);
}
.el-liste .el-tuile-media .el-tuile-badge-recurrence .el-icone {
	flex-shrink: 0;
	color: var(--el-bleu);
}
.el-liste .el-tuile-media .el-badge-recurrence-txt {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Ligne de recurrence dans le detail (modale) ────────────────────────────── */
.el-modale .el-detail-recurrence {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 0.95em;
	font-weight: 600;
	color: #4a6da7;
}
.el-modale .el-detail-recurrence .el-ligne-icone {
	flex-shrink: 0;
	color: var(--el-bleu);
	display: flex;
	align-items: center;
}
.el-modale .el-detail-recurrence .el-icone {
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALIGNEMENT VERTICAL DES TUILES (min-height, PAS de subgrid)
   ═══════════════════════════════════════════════════════════════════════════
   Historique : trois tentatives successives d'alignement via CSS subgrid
   (rangees nommees sur .el-grille, .el-tuile en grid-row:span 8, puis colonne
   explicite par :nth-child) ont ete essayees et retirees : la combinaison
   subgrid + placement automatique restait cassante sur les LIGNES INCOMPLETES
   (contenu qui « explose » horizontalement, badges etires) ce qui n'est pas
   acceptable. Abandon de subgrid au profit d'une solution plus simple et
   previsible : reserver, en min-height, la hauteur du cas le PLUS HAUT pour
   chaque bloc a hauteur variable. Chaque tuile garde son display:flex habituel
   (aucune structure de grille interne) ; seule sa hauteur par bloc est
   stabilisee, ce qui aligne mecaniquement les blocs homologues d'une ligne a
   l'autre puisque toutes les tuiles reservent la MEME hauteur pour le MEME role.

   Le squelette PHP (etika_liste_carte_moteur) emet TOUJOURS les 8 conteneurs
   de rangee (photo, badge-zone, titre, ouv-zone, desc, champs, badges-bool,
   indice), avec un modificateur --vide quand un bloc n'a pas de contenu :
   c'est ce qui permet a min-height de reserver l'espace meme pour un
   conteneur vide (un <div> ou <p> vide avec min-height occupe bien sa
   hauteur : aucun display:none ni height:0 ne vient l'ecraser ici, aucune de
   ces classes --vide n'a de regle CSS dediee, elles heritent simplement de la
   regle de base ci-dessous).

   Portee : ces min-height sont appliquees SANS restriction a .el-grille (pas
   de prefixe .el-grille dans les selecteurs) car elles sont inoffensives
   partout ou une .el-tuile apparait (grille centree, gites communaux,
   carrousels « a la une ») : elles uniformisent simplement la hauteur de
   quelques blocs, ce qui est un plus meme hors grille a colonnes, et evite
   d'avoir a dupliquer les selecteurs par variante de grille.

   .el-tuile-desc et .el-tuile-bas (margin-top:auto) restent inchanges : deja
   acquis (3 lignes reservees, pied de tuile aligne). Aucun @supports requis :
   min-height est du CSS standard, supporte partout. */

/* Titre : deja clampe a 2 lignes max (webkit-line-clamp) ; on reserve ici la
   hauteur de 2 lignes MEME quand le texte n'en tient qu'une, pour que le badge
   ouvert/ferme et la description démarrent au meme niveau sur toute la ligne. */
.el-liste .el-tuile-titre {
	min-height: calc(1.15em * 1.3 * 2);
}

/* Badge de type : reserve la hauteur d'un badge (~1.6em ≈ 25-26px a la taille
   de police par defaut), que le badge soit present ou que la rangee soit
   --vide. Valeur ajustee au jugé sur la taille reelle de .el-badge-type. */
.el-liste .el-tuile-badge-zone {
	min-height: 1.6em;
}

/* Badge ouvert/ferme : meme taille de badge que ci-dessus (.el-badge-ouverture
   a un gabarit tres proche de .el-badge-type), meme reservation. */
.el-liste .el-tuile-ouv-zone {
	min-height: 1.6em;
}

/* Badges booleens : ils peuvent tenir sur 1 ou 2 lignes coulantes ; on reserve
   2 lignes (hauteur d'un badge + interligne coulant) pour que la rangee
   « Voir plus » qui suit s'aligne, que la fiche ait 0, quelques ou beaucoup de
   booleens. */
/* Champs additionnels : bloc le MOINS parfaitement alignable en min-height —
   son contenu varie fortement selon le type (une simple adresse pour un
   commerce, adresse + 3 prestations pour un hotel...). On vise une valeur
   raisonnable qui couvre les cas courants (~3 lignes de champ + leurs
   espacements), sans chercher un alignement pixel-perfect sur tous les types :
   au-dela de cette hauteur, un type tres charge (ex. hotel) decale encore
   legerement la rangee suivante sur sa propre tuile, ce qui reste largement
   preferable a l'ancien bug d'eclatement horizontal. */

/* ═══════════════════════════════════════════════════════════════════════════
 * ONGLETS PAR ANNEE (bulletin municipal)
 *
 * Patron transpose de assets/cr-public.css (.cr-tab / .cr-panel). Ecart : le
 * module CR scope tout sur #cr-municipaux (un seul module par page) ; ici on
 * scope sur .el-liste, qui peut apparaitre plusieurs fois dans une page.
 *
 * L'onglet ACTIF recoit sa couleur en style INLINE depuis le PHP (accent du
 * type, cf. etika_liste_rendre_annees). Ce CSS ne porte donc que l'etat
 * inactif et le hover : ne PAS ajouter ici de background sur --active, il
 * serait ecrase par l'inline et deviendrait un mensonge.
 * ═══════════════════════════════════════════════════════════════════════════ */

.el-liste .el-annee-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 28px;
}

.el-liste .el-annee-tab {
	padding: 10px 22px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.95em;
	cursor: pointer;
	border: 2px solid #d0d8ee;
	background: #ffffff;
	color: #2D3748;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.el-liste .el-annee-tab:hover {
	border-color: #2D3748;
}

.el-liste .el-annee-panel {
	display: none;
}

.el-liste .el-annee-panel--active {
	display: block;
}

.el-liste .el-annee-count {
	font-size: 0.9em;
	color: #6b7280;
	margin-bottom: 16px;
	text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ACTIONS DE TUILE (bulletin municipal) — rangee R8
 *
 * Remplacent l'indice « Voir plus » pour ce type (cf. etika_liste_carte_moteur).
 * Le contrat des 8 rangees est preserve : R8 est toujours emise, son CONTENU
 * change. .el-tuile-indice garde donc ses regles telles quelles, plus haut.
 *
 * Habillage transpose de .el-carte-btn (boutons Partager / Itineraire / Site de
 * la modale) : meme gabarit, meme hover. Un seul geste visuel dans le module.
 * ═══════════════════════════════════════════════════════════════════════════ */

.el-liste .el-tuile-actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

.el-liste .el-tuile-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 10px;
	border-radius: 9px;
	border: 1px solid var(--el-ligne);
	background: var(--el-soft);
	color: var(--el-ardoise);
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.el-liste .el-tuile-btn:hover {
	background: #ffffff;
	border-color: #4a6da7;
	color: #4a6da7;
}
.el-liste .el-tuile-btn .el-icone {
	flex-shrink: 0;
}
.el-liste .el-tuile-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LECTEUR PDF en modale (bulletin_municipal, menu_cantine)
 *
 * liste-public.js remplit .el-pdf-lecteur a l'ouverture : une page PDF par
 * <canvas>, affichees UNE a la fois avec un glissement horizontal (carrousel),
 * navigable par chevrons lateraux, fleches clavier et swipe. La page est calee
 * sur la HAUTEUR (70% de la fenetre, pose en JS) pour tenir entiere sans scroll.
 * Structure creee par le JS :
 *   .el-pdf-lecteur > .el-pdf-rangee > [.el-pdf-chevron | .el-pdf-viewport | .el-pdf-chevron]
 *                     .el-pdf-viewport > .el-pdf-track > .el-pdf-diapo (x N) > canvas.el-pdf-page
 *                   + .el-pdf-compteur
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Conteneur : fond doux, coins arrondis. */
.el-modale .el-section-pdf .el-pdf-lecteur {
	background: var(--el-fond-doux);
	border: 1px solid var(--el-bord);
	border-radius: 12px;
	padding: 14px;
}

/* Rangee : chevron gauche + viewport + chevron droit, chevrons dans les marges. */
.el-modale .el-section-pdf .el-pdf-rangee {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Viewport : fenetre qui masque les diapos hors cadre. Hauteur posee en JS. */
.el-modale .el-section-pdf .el-pdf-viewport {
	flex: 1;
	min-width: 0;
	max-height: 70vh;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	border-radius: 4px;
}

/* Track : ruban horizontal qui glisse (une diapo = 100% du viewport). */
.el-modale .el-section-pdf .el-pdf-track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Diapo : une page, centree dans sa portion du ruban. */
.el-modale .el-section-pdf .el-pdf-diapo {
	flex: 0 0 100%;
}

/* Chaque page : hauteur pleine (calee en JS), fond blanc + ombre douce. */
.el-modale .el-section-pdf .el-pdf-page {
	display: block;
	width: 100%;
	height: auto;
	background: #ffffff;
	box-shadow: 0 2px 12px rgba(13, 27, 62, 0.14);
	border-radius: 4px;
}

/* Chevrons : boutons ronds discrets (meme famille que les boutons du module),
   dans les marges laterales de la rangee. */
.el-modale .el-section-pdf .el-pdf-chevron {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--el-ligne);
	background: var(--el-soft);
	color: var(--el-ardoise);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.el-modale .el-section-pdf .el-pdf-chevron:hover:not(:disabled) {
	background: #ffffff;
	border-color: #4a6da7;
	color: #4a6da7;
}
.el-modale .el-section-pdf .el-pdf-chevron:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Compteur "X / N" : discret, centre sous la rangee. */
.el-modale .el-section-pdf .el-pdf-compteur {
	font-size: 0.9rem;
	color: var(--el-gris-texte);
	text-align: center;
	margin-top: 10px;
}

/* Message d'erreur eventuel (si le JS n'arrive pas a rendre) : discret, centre. */
.el-modale .el-section-pdf .el-pdf-erreur {
	font-size: 0.9em;
	color: var(--el-gris-texte);
	text-align: center;
	padding: 20px;
}

/* Lien « Telecharger le PDF » : discret, aligne a droite sous le lecteur.
   Meme esprit que .el-carte-agrandir (lien secondaire du module). */
.el-modale .el-section-pdf .el-pdf-telecharger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 0.88em;
	font-weight: 600;
	color: #4a6da7;
	text-decoration: none;
}
.el-modale .el-section-pdf .el-pdf-telecharger:hover {
	color: #38548a;
	text-decoration: underline;
}
.el-modale .el-section-pdf .el-pdf-telecharger .el-icone {
	flex-shrink: 0;
}

/* Lecteur PDF plein ecran : neutralise le halo/ombre de survol-focus que le
   theme WordPress applique par defaut aux <button>, tout en gardant le
   curseur pointer (boutons bien cliquables). */
.el-fs-chevron,
.el-fs-close {
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}
.el-fs-chevron:hover,
.el-fs-chevron:focus,
.el-fs-close:hover,
.el-fs-close:focus {
	background: transparent;
	box-shadow: none;
	outline: none;
}