/*
 * Carte des séances EET.
 * Accessibilité (public âgé) : textes en noir (#000000), graisse normale (400 au lieu du 300 imposé par Google Maps)
 * et tailles relevées (14 px pour adresse, club, contact, remplissage).
 */
/*
 * Carte carrée.
 * Grand écran : côté = hauteur de l'écran moins l'en-tête et le titre (9rem), sans dépasser 2/3 de la largeur ;
 * la colonne de droite (indicateurs + liste) prend le reste.
 * Petit écran : côté = largeur de l'écran (limité à la hauteur disponible si le téléphone est en paysage).
 */
div#mapEETCinemas {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: .5rem;
}
@media (max-width: 991.98px) {
	div#mapEETCinemas {
		max-width: max(280px, calc(100vh - 9rem));
		margin: 0 auto;
	}
}
@media (min-width: 992px) {
	.row > .colonneCarteEET {
		width: min(66.6667%, calc(100vh - 9rem));
		min-width: 400px;
	}
}

/*
 * Pastille d'un groupe de cinémas (clustering) : rond bleu EET, nombre en blanc.
 */
.clusterEET {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background-color: #17458f;
	box-shadow: 0 0 0 4px rgba(84, 159, 216, .45), 0 2px 6px rgba(0, 0, 0, .35);
	font-size: 1.15rem;
	font-weight: 700;
	color: #ffffff;
	cursor: pointer;
}

/*
 * Vignette « liste » d'un groupe de cinémas inséparables.
 */
.infoEET-liste-cinemas {
	margin: 0;
	padding: 0;
	list-style: none;
}
.infoEET-liste-cinemas li + li {
	margin-top: .5rem;
}
.infoEET-choix-cinema {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	width: 100%;
	text-align: left;
}
.infoEET-choix-nom {
	font-weight: 700;
}
.infoEET-choix-detail {
	flex-shrink: 0;
	font-size: .9rem;
}

/*
 * Vignette : en-tête de l'InfoWindow Google Maps.
 */
/*
 * Vignette : en-tête = titre du cinéma (1 ou 2 lignes) + Itinéraire collé à droite,
 * aligné sur la ligne de base de la DERNIÈRE ligne du titre.
 */
.infoEET-entete {
	display: flex;
	align-items: flex-end;			/* repli pour les navigateurs sans « last baseline » */
	align-items: last baseline;
	gap: .75rem;
	width: 100%;
}
.infoEET-entete .infoEET-titre {
	flex: 1 1 auto;
	min-width: 0;
}
.infoEET-entete .infoEET-itineraire {
	flex-shrink: 0;
	margin-left: auto;
	white-space: nowrap;
}
.infoEET-titre {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: #17458f;
}

/*
 * Vignette : contenu de l'InfoWindow Google Maps.
 */
div.infoEET {
	min-width: 300px;
	font-size: 1rem;
	font-weight: 400;
}
/* Bloc cinéma : adresse sur fond teinté. */
.infoEET-cinema {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: .25rem 1rem;
	padding: .5rem .75rem;
	background-color: #eef4fb;
	border-left: 4px solid #17458f;
	border-radius: .25rem;
}
.infoEET-adresse {
	margin: 0;
	font-style: normal;
	color: #000000;
}
/* Bloc séances : séparé du bloc cinéma. */
.infoEET-bloc-seances {
	margin-top: .75rem;
}
.infoEET-soustitre {
	margin: 0 0 .25rem;
	padding-bottom: .25rem;
	border-bottom: 2px solid #549fd8;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #549fd8;
}
.infoEET-seances {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Plus de 4 séances (rare) : la liste défile ; max-height fixé en JS (ajusterDefilement). */
.infoEET-defilement {
	position: relative;
	overflow-y: auto;
	padding-right: .35rem;
	overscroll-behavior: contain;
}
.infoEET-defilement-aide {
	padding-top: .25rem;
	border-top: 1px solid #e5e5e5;
	font-size: .9rem;
	font-style: italic;
	text-align: center;
	color: #000000;
}
/* Séparation entre séances : pointillé long (tirets 8 px, espaces 6 px), 2 px, noir 60 % (#666666).
   Dessiné en dégradé car border-style: dashed ne permet pas de régler la longueur des tirets. */
.infoEET-seance {
	padding: .5rem 0;
	background-image: repeating-linear-gradient(to right, #666666 0 8px, transparent 8px 14px);
	background-position: top left;
	background-size: 100% 2px;
	background-repeat: no-repeat;
}
.infoEET-seance:first-child {
	background-image: none;
}
/* Ligne 1 : date + heure et bouton Réserver toujours sur une seule ligne. */
.infoEET-seance-ligne {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .5rem;
}
.infoEET-date {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	font-weight: 700;
}
.infoEET-date::first-letter {
	text-transform: uppercase;
}
.infoEET-reserver,
.infoEET-complet {
	flex-shrink: 0;
	margin-left: auto;
	white-space: nowrap;
}
.infoEET-complet {
	background-color: #000000;
}
/* Ligne 3 : club Rotary organisateur. */
.infoEET-club {
	margin-top: .3rem;
	font-size: 1rem;
	color: #000000;
}
.infoEET-club i {
	color: #f7a81b;
}
/* Ligne 2 : taux de remplissage. */
.infoEET-remplissage {
	margin-top: .35rem;
}
/* Remplissage sous le seuil : message d'invitation à réserver. */
.infoEET-invitation {
	font-weight: 600;
	color: #17458f;
}
.infoEET-invitation i {
	color: #549fd8;
}
/* Boutique fermée : séance annoncée, réservations pas encore ouvertes. */
.infoEET-prochainement {
	font-weight: 600;
	color: #000000;
}
.infoEET-prochainement i {
	color: #f7a81b;
}
.infoEET-barre {
	height: .4rem;
	background-color: #e9ecef;
}
.infoEET-remplissage-texte {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .25rem .5rem;
	margin-top: .2rem;
	font-size: 1rem;
}
.infoEET-compteur {
	color: #000000;
}
.infoEET-alerte {
	font-weight: 700;
}
.infoEET-niveau-normal .progress-bar {
	background-color: #549fd8;
}
.infoEET-niveau-eleve .progress-bar {
	background-color: #f7a81b;
}
.infoEET-niveau-eleve .infoEET-alerte {
	color: #b5760a;
}
.infoEET-niveau-critique .progress-bar {
	background-color: #d41367;
}
.infoEET-niveau-critique .infoEET-alerte {
	color: #d41367;
}
/* Ligne 4 : contact de la séance. */
.infoEET-contact {
	margin-top: .1rem;
	font-size: 1rem;
	color: #000000;
}
.infoEET-contact > i {
	color: #549fd8;
}
.infoEET-contact-lien {
	white-space: nowrap;
	text-decoration: none;
	color: #17458f;
}
.infoEET-contact-lien:hover {
	text-decoration: underline;
}

/*
 * Petit écran : vignette plus étroite ; la date abrégée garde la séance sur une seule ligne.
 */
@media (max-width: 575.98px) {
	div.infoEET {
		min-width: 0;
	}
	.infoEET-date {
		font-size: .95rem;
	}
}

/*
 * Liste des cinémas (panneau de droite) : recherche + liste triée par ville, défilante.
 */
.listeEET {
	margin-top: 1rem;
}
.listeEET-label {
	display: block;
	margin-bottom: .3rem;
	font-weight: 600;
	color: #000000;
}
.listeEET-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .25rem .5rem;
	margin: .4rem 0;
}
.listeEET-compteur {
	margin: 0;
	font-size: .95rem;
	color: #000000;
}
.listeEET-carte-complete {
	flex-shrink: 0;
	margin-left: auto;
	white-space: nowrap;
}
.listeEET-cinemas {
	max-height: 60vh;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	border: 1px solid #dee2e6;
	border-radius: .5rem;
}
.listeEET-cinemas li + li {
	border-top: 1px solid #dee2e6;
}
.listeEET-cinema {
	display: block;
	width: 100%;
	padding: .6rem .75rem;
	border: 0;
	background-color: #ffffff;
	text-align: left;
	font-size: 1rem;
	line-height: 1.3;
	color: #000000;
}
.listeEET-cinema:hover {
	background-color: #eef4fb;
}
.listeEET-cinema:focus-visible {
	outline: 3px solid #549fd8;
	outline-offset: -3px;
}
.listeEET-ville,
.listeEET-nom,
.listeEET-detail {
	display: block;
}
.listeEET-ville {
	font-weight: 700;
}
.listeEET-detail {
	font-size: .9rem;
	color: #17458f;
}
/* Clubs organisateurs des séances du cinéma (dédoublonnés). */
.listeEET-clubs {
	display: block;
	font-size: .9rem;
	color: #000000;
}
.listeEET-clubs i {
	color: #f7a81b;
}
.listeEET-cinema[aria-current="true"] .listeEET-clubs {
	color: #ffffff;
}
.listeEET-cinema[aria-current="true"] {
	background-color: #17458f;
	color: #ffffff;
}
.listeEET-cinema[aria-current="true"] .listeEET-detail {
	color: #ffffff;
}
/* Grand écran : la liste tient à peu près dans la hauteur de la carte (100vh - 9rem), sous les indicateurs et la recherche. */
@media (min-width: 992px) {
	.listeEET-cinemas {
		max-height: calc(100vh - 28rem);
		min-height: 12rem;
	}
}

/*
 * Séances à proximité : bouton « Autour de moi », choix du rayon, bandeau, distances, position du visiteur.
 */
.proximiteEET-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-top: .6rem;
}
.proximiteEET-rayon {
	display: flex;
	align-items: center;
	gap: .4rem;
}
.proximiteEET-rayon-libelle {
	font-weight: 600;
	color: #000000;
}
.proximiteEET-note,
.proximiteEET-message {
	margin: .3rem 0 0;
	font-size: .9rem;
	color: #000000;
}
.proximiteEET-message {
	font-weight: 600;
	color: #17458f;
}
.proximiteEET-message:empty {
	display: none;
}
.proximiteEET-bandeau {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .6rem;
	padding: .5rem .75rem;
	border-left: 4px solid #17458f;
	border-radius: .25rem;
	background-color: #eef4fb;
	font-weight: 600;
	color: #000000;
}
.proximiteEET-bandeau[hidden] {
	display: none;
}
.proximiteEET-bandeau .btn-close {
	flex-shrink: 0;
}
/* Ligne de la liste : bouton du cinéma + bouton « À proximité » à droite. */
.listeEET-cinemas li {
	display: flex;
	align-items: stretch;
}
.listeEET-cinemas li[hidden] {
	display: none;
}
.listeEET-cinemas li .listeEET-cinema {
	flex: 1 1 auto;
	min-width: 0;
}
.listeEET-proximite {
	display: flex;
	flex: 0 0 5.5rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15rem;
	padding: .4rem;
	border: 0;
	border-left: 1px solid #dee2e6;
	background-color: #ffffff;
	font-size: .85rem;
	line-height: 1.2;
	color: #17458f;
}
.listeEET-proximite:hover {
	background-color: #eef4fb;
}
.listeEET-proximite:focus-visible {
	outline: 3px solid #549fd8;
	outline-offset: -3px;
}
.listeEET-distance {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	color: #17458f;
}
.listeEET-distance:empty {
	display: none;
}
.listeEET-cinema[aria-current="true"] .listeEET-distance {
	color: #ffffff;
}
/* Vignette : bouton « Séances à proximité » sous l'adresse. */
.infoEET-proximite {
	margin-top: .4rem;
}
/* Position du visiteur : point bleu. */
.positionEET {
	width: 18px;
	height: 18px;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, .35), 0 1px 4px rgba(0, 0, 0, .4);
}