/* ============================================================
   TRANSFERT — ACCUEIL PUBLIC
   ------------------------------------------------------------
   Chargée uniquement sur la page d'accueil. Les destinataires
   d'un lien, eux, ne téléchargent pas ces règles.
   ============================================================ */

.heros {
	padding-block: var(--e7) var(--e6);
	background:
		radial-gradient(60% 70% at 15% 0%, var(--accent-doux), transparent 70%),
		var(--bg);
}
.heros h1 { max-width: 16ch; }

.section { padding-block: var(--e7); }
.section--douce {
	background: var(--surface-subtle);
	border-block: 1px solid var(--border);
}

/* ------------------------------------------------------------
   Étapes
   ------------------------------------------------------------ */
.etapes {
	display: grid;
	gap: var(--e5);
	counter-reset: etape;
}

.etape {
	display: flex;
	align-items: flex-start;
	gap: var(--e4);
}

.etape__rang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	font-family: var(--font-titre);
	font-size: var(--t-md);
	font-weight: 700;
	color: var(--accent-fort);
	background: var(--accent-doux);
	border-radius: 50%;
}

.etape h3 { font-size: var(--t-lg); }

/* ------------------------------------------------------------
   Atouts
   ------------------------------------------------------------ */
.atouts { display: grid; gap: var(--e5); }

.atout {
	display: flex;
	flex-direction: column;
	gap: var(--e3);
	padding: var(--e5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.atout h3 { font-size: var(--t-md); }
.atout p { font-size: var(--t-sm); }
.atout .glyphe { width: 48px; height: 48px; }

/* ------------------------------------------------------------
   Paliers
   ------------------------------------------------------------ */
/* Deux colonnes, et pas quatre : dans une colonne de 880 px, quatre
   cartes donnent des lignes de six mots et un texte en escalier.
   Deux colonnes laissent respirer. */
@media (min-width: 640px) {
	.atouts { grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
}

@media (min-width: 860px) {
	.heros { padding-block: var(--e8) var(--e7); }
	.etapes { grid-template-columns: repeat(3, 1fr); gap: var(--e6); }
	.etape { flex-direction: column; gap: var(--e3); }
}