/* ==========================================================================
   Module Collectes - complements a Bootstrap 5.
   Tout ce que Bootstrap sait faire (grille, cartes, alertes, onglets,
   list-group, form-*) est gere par ses classes : ce fichier ne couvre que
   l'identite visuelle et les quelques composants sur mesure.
   Couleurs reprises du theme : --color-1 = bleu, --color-3 = vert.
   ========================================================================== */
.collectes-page {
	--collectes-vert      : var(--color-3, #30AB53);
	--collectes-vert-alt  : var(--color-3-alt, #208443);
	--collectes-bleu      : var(--color-1, #0067B0);
	--collectes-bleu-alt  : var(--color-1-alt, #0D5588);
	--collectes-creme     : #F6F1E4;
	--collectes-creme-bord: #D9CFB6;
	--collecte-color      : #504D4D;
	--collecte-bg         : #FCE0B3!important;
}
/* Les utilitaires Bootstrap "primary" suivent la couleur du theme ---------- */
.collectes-page {
	--bs-primary         : var(--collectes-bleu);
	--bs-link-color      : var(--collectes-bleu);
	--bs-link-hover-color: var(--collectes-bleu-alt);
}
.collectes-page .text-primary {
	color: var(--collectes-bleu) !important;
}
.collectes-page .btn-primary {
	--bs-btn-bg                 : var(--collectes-bleu);
	--bs-btn-border-color       : var(--collectes-bleu);
	--bs-btn-hover-bg           : var(--collectes-bleu-alt);
	--bs-btn-hover-border-color : var(--collectes-bleu-alt);
	--bs-btn-active-bg          : var(--collectes-bleu-alt);
	--bs-btn-active-border-color: var(--collectes-bleu-alt);
	--bs-btn-focus-shadow-rgb   : 0, 103, 176;
	/* Le theme redefinit .btn (bordure noire) : on pose aussi les valeurs
	   en dur, les variables seules ne suffisent pas ici. */
	background-color            : var(--collectes-bleu);
	border-color                : var(--collectes-bleu);
	color                       : #fff;
	letter-spacing              : 0.06em;
}
.collectes-page .btn-primary:active,
.collectes-page .btn-primary:focus-visible,
.collectes-page .btn-primary:hover {
	background-color: var(--collectes-bleu-alt);
	border-color    : var(--collectes-bleu-alt);
	color           : #fff;
}
/* -------------------------------------------------------------- Bandeau -- */
/* La navigation du theme est en position:fixed (~90px) : on degage le titre
   sans dependre de .modules-index, dont la valeur varie selon le theme. */
.collectes-hero {
	padding-top: 8rem;
}
@media (max-width: 991.98px) {
	.collectes-hero {
		padding-top: 6.5rem;
	}
}
.collect {
	font-size    : 22px;
	color        : var(--color-1);
	font-weight  : 700;
	margin-bottom: 10px;
}
.collectes-title {
	font-size     : clamp(1.7rem, 4vw, 2.7rem);
	line-height   : 1.15;
	letter-spacing: -1.5px;
	text-transform: uppercase;
	color         : var(--collectes-vert);
	margin-bottom : 1rem;
}
.collectes-hero-img {
	width : clamp(70px, 10vw, 130px);
	height: auto;
}
.collectes-intro {
	max-width  : 42rem;
	line-height: 1.6;
}
/* ----------------------------------------------------------- Formulaire -- */
.collectes-card {
	background   : var(--collectes-creme);
	border-color : var(--collectes-creme-bord) !important;
	border-radius: 2rem;
}
/* Le dropdown est positionne par nous, pas par Popper */
.collectes-suggestions {
	position  : absolute;
	inset     : auto auto auto 0;
	transform : none !important;
	max-height: 16rem;
	overflow-y: auto;
}
/* ------------------------------------------------------------- Etapes --- */
.collectes-step-icon {
	color: var(--collectes-vert);
}
.collectes-step-title {
	color              : var(--color-1);
	text-transform     : unset;
	-webkit-text-stroke: unset;
	font-family        : unset;
	font-size          : 22px;
}
/* --------------------------------------------------------- Flux / jours -- */
.collectes-flux-card {
	background       : var(--collecte-bg, #EEE);
	border-left-color: var(--collecte-color, #444) !important;
}
.collectes-flux-icon {
	width : 62px;
	height: 62px;
	color : var(--collecte-color, #444);
}
/* ------------------------------------------------------------- Encarts -- */
.collectes-callout-icon {
	width     : 42px;
	height    : 42px;
	background: var(--collectes-bleu);
}
.collectes-callout-icon-alert {
	background: #C9812A;
}
/* --------------------------------------------------------------- Carte -- */
.collectes-map {
	min-height: 420px;
	/* Leaflet cree des contextes d'empilement eleves : on reste sous la nav */
	z-index   : 0;
}
.collectes-marker span {
	display      : block;
	width        : 18px;
	height       : 18px;
	border       : 3px solid #fff;
	border-radius: 50%;
	box-shadow   : 0 1px 4px rgba(0, 0, 0, .35);
}
.collectes-points-list {
	max-height: 420px;
}
.collectes-point-dot {
	width : 12px;
	height: 12px;
}
/* ---------------------------------------------------------- Consignes --- */
.collectes-consigne-img {
	width : 72px;
	height: 72px;
}
a:not(.btn):visited.modif {
	text-decoration: underline!important;
	color          : var(--color-1) !important;
}
a:not(.btn).modif {
	text-decoration: underline!important;
}
.border-4 {
	border-width: 17px !important;
}
/* ------------------------------------------------------------ Responsive */
@media (max-width: 991.98px) {
	.collectes-points-list {
		max-height: 280px;
	}
}
@media (max-width:768px) {
	.poubelle {
		width: 100px;
	}
}
@media (max-width:575px) {
	.poubelle {
		display: none;
	}
}