/* =============================================================
   05 - RESPONSIVE
   Media queries, mobile-first par exception
   (le design desktop est la base, on adapte vers le bas).
   ============================================================= */


/* ====================== TABLET ≤1024px ====================== */

@media (max-width: 1024px) {

	.br-section {
		padding: 80px 0;
	}

	.br-hero {
		padding: 80px 0 64px;
	}

	.br-fcta {
		padding: 100px 0;
	}

	.br-problem-grid,
	.br-teaser-grid {
		grid-template-columns: 1fr 1fr;
	}

	.br-teaser-grid > :last-child {
		grid-column: 1 / -1;
		max-width: 50%;
		margin: 0 auto;
		width: 100%;
	}
}


/* ====================== MOBILE ≤768px ====================== */

@media (max-width: 768px) {

	.ctn {
		padding: 0 20px;
	}

	.br-section {
		padding: 64px 0;
	}

	.br-hero {
		padding: 64px 0 48px;
	}

	.br-fcta {
		padding: 80px 0;
	}

	/* Nav : on cache le bouton sur très petit écran pour gagner de la place */
	.br-nav-inner {
		gap: 12px;
	}

	.br-nav .btn {
		padding: 9px 18px;
		font-size: 0.78rem;
	}

	.br-logo-text {
		font-size: 1.1rem;
	}

	/* Alerte plus compacte */
	.br-alert {
		padding: 8px 0;
		font-size: 0.74rem;
	}

	.br-alert .ctn {
		flex-direction: column;
		gap: 4px;
	}

	/* Hero */
	.br-hero-title {
		font-size: clamp(2rem, 8vw, 2.6rem);
	}

	.br-hero-subtitle {
		font-size: 1rem;
	}

	.br-hero-platforms {
		flex-direction: column;
		gap: 10px;
	}

	/* Formulaire : on empile l'input et le bouton */
	.br-form-row {
		flex-direction: column;
		padding: 8px;
		border-radius: var(--R);
	}

	.br-input {
		padding: 14px 14px;
		width: 100%;
	}

	.br-form-submit {
		width: 100%;
		justify-content: center;
	}

	/* Grilles : 1 colonne */
	.br-problem-grid,
	.br-teaser-grid {
		grid-template-columns: 1fr;
	}

	.br-teaser-grid > :last-child {
		max-width: 100%;
	}

	/* Section titres */
	.br-problem-title,
	.br-solution-title,
	.br-teaser-title,
	.br-fcta-title {
		font-size: clamp(1.7rem, 6vw, 2.2rem);
	}

	/* Footer empilé */
	.br-footer-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Toast pleine largeur en mobile */
	.br-toast {
		right: 16px;
		left: 16px;
		bottom: 16px;
		max-width: none;
		text-align: center;
	}

	/* Logos CMS */
	.br-logos-row {
		gap: 22px;
	}

	.br-logos-item {
		font-size: 0.88rem;
	}
}


/* ====================== SMALL MOBILE ≤480px ====================== */

@media (max-width: 480px) {

	.br-stat-card,
	.br-teaser-card {
		padding: 24px;
	}

	.br-stat-num {
		font-size: 1.9rem;
	}

	.br-eab {
		font-size: 0.68rem;
		padding: 4px 12px 4px 6px;
	}

	.br-eab-spots {
		font-size: 0.62rem;
	}
}


/* ====================== DARK MODE OS (best-effort) ====================== */
/* Le thème reste light par design. On ne propose pas de dark mode automatique
   pour respecter la charte (palette crème). */