/* ============================================================
   Footer — même brun de marque que le bandeau du header.
   Le site se referme comme il s'ouvre.
   ============================================================ */

/* Photo des élèves à la ruche, sous un aplat brun dense. C'est ici que le
 * message « ce sont les élèves » se voit : l'image est assez lisible pour
 * qu'on reconnaisse les combinaisons d'apiculteur, assez couverte pour que le
 * texte reste parfaitement lisible.
 *
 * Photo choisie parce qu'AUCUN VISAGE n'y est identifiable (voiles, capuches,
 * dos tournés) : en établissement scolaire, c'est ce qui évite la question du
 * droit à l'image des mineurs. Toute photo qui la remplacerait doit respecter
 * le même critère, ou être couverte par les autorisations parentales. */
.bepc-footer {
	position: relative;
	margin-top: var(--bepc-s-20);
	/* Liseré miel en haut : il rattache le pied de page à la couleur d'action
	   du site et coupe la masse brune. */
	border-top: 4px solid var(--bepc-miel);
	background-color: var(--bepc-logo-brun);
	background-image:
		linear-gradient(rgba(46, 24, 7, 0.93), rgba(46, 24, 7, 0.88)),
		url("../img/eleves-apiculteurs.webp");
	background-size: auto, cover;
	background-position: center, center 25%;
	background-repeat: no-repeat;
	color: var(--bepc-pierre);
}

.bepc-footer__inner {
	padding-block: var(--bepc-s-16);
	display: grid;
	gap: var(--bepc-s-10);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	align-items: start;
}

.bepc-footer__col--brand {
	max-width: 320px;
}

/* Variante dorée du SVG, générée par scripts/teinter_logo.py. Pas de filtre
   CSS : les teintes sont remappées à la source, ce qui garde le dégradé du
   cercle propre au lieu de le griser. */
.bepc-footer__logo {
	display: block;
	width: 132px;
	height: auto;
	margin: calc(-1 * var(--bepc-s-4)) 0 var(--bepc-s-2) calc(-1 * var(--bepc-s-3));
}

.bepc-footer__tagline {
	margin: 0;
	color: var(--bepc-miel-clair);
	font-size: 0.95rem;
}

.bepc-footer__title {
	display: inline-block;
	margin: 0 0 var(--bepc-s-4);
	padding-bottom: var(--bepc-s-2);
	border-bottom: 2px solid var(--bepc-terre);
	color: var(--bepc-miel);
	font-family: var(--bepc-font-title);
	font-size: 1.08rem;
	font-weight: 600;
}

.bepc-footer__line {
	margin: 0 0 var(--bepc-s-3);
	max-width: none;
	line-height: 1.55;
}

.bepc-footer__line--muted {
	color: var(--bepc-sable);
	font-size: 0.92rem;
}

/* Étapes numérotées : compteur maison en pastille caramel plutôt que le marker
   natif. Le caramel se pose naturellement sur le brun du fond et près du logo,
   là où un vert d'eau faisait tache. */
.bepc-footer__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bepc-etape;
	display: grid;
	gap: var(--bepc-s-3);
	font-size: 0.95rem;
	line-height: 1.45;
}

.bepc-footer__steps li {
	counter-increment: bepc-etape;
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: var(--bepc-s-3);
	align-items: start;
}

.bepc-footer__steps li::before {
	content: counter(bepc-etape);
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--bepc-radius-pill);
	background: var(--bepc-caramel-doux);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
}

.bepc-footer__legal-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--bepc-s-2);
}

.bepc-footer__legal-menu a,
.bepc-footer a {
	color: var(--bepc-pierre);
	text-decoration-color: rgba(255, 255, 255, 0.35);
}

.bepc-footer__legal-menu a:hover,
.bepc-footer a:hover {
	color: var(--bepc-miel);
}

/* --- Ligne de bas de page -------------------------------------- */

.bepc-footer__baseline {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(0, 0, 0, 0.14);
}

.bepc-footer__credit {
	margin: 0;
	max-width: none;
	padding-top: var(--bepc-s-4);
	color: var(--bepc-miel-clair);
	font-size: 0.82rem;
	font-style: italic;
	text-align: center;
}

.bepc-footer__copy {
	margin: 0;
	max-width: none;
	padding-block: var(--bepc-s-2) var(--bepc-s-4);
	color: var(--bepc-sable);
	font-size: 0.85rem;
	text-align: center;
}

@media (max-width: 640px) {
	.bepc-footer__inner {
		padding-block: var(--bepc-s-12);
		gap: var(--bepc-s-8);
	}
}