/* ─── Section d'intro de la page /order ────────────────────────── */
/* Layout 2 colonnes : hero a gauche, notices empilees a droite */
.orderIntro {
	display: flex;
	gap: 1rem;
	margin: 1.5rem 0;
}
.orderNotices {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0; /* permet le shrink correct quand le contenu est large */
}

/* ─── Hero : bandeau de remerciement ───────────────────────────── */
.orderHero {
	flex: 1;
	position: relative;
	background: linear-gradient(110deg, #1d3a8c 0%, #285aa6 45%, #14b8a6 100%);
	border-radius: 16px;
	padding: 2rem 2.25rem;
	color: #fff;
	overflow: hidden;
	min-height: 200px;
	display: flex;
	align-items: center;
	min-width: 0;
}
.orderHero__text {
	flex: 1;
	max-width: 65%;
	font-family: Georgia, 'Times New Roman', serif;
}
.orderHero__line {
	margin: 0.15em 0;
	font-size: 1.55rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.005em;
}
.orderHero__line strong { font-weight: 700; }
.orderHero__line--italic { font-style: italic; opacity: 0.95; }
.orderHero__borne {
	position: absolute;
	right: 1rem;
	bottom: 0;
	height: 92%;
	width: auto;
	pointer-events: none;
}

/* ─── Notice : carte horizontale (icône à gauche + contenu) ────── */
.orderNotice {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #fff;
	border: 1px solid #e0e6ee;
	border-radius: 14px;
	padding: 0.9rem 1.25rem;
	flex: 1;
	min-width: 0;
}
.orderNotice__icon {
	flex: none;
	font-size: 2rem;
	line-height: 1;
}
.orderNotice__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	flex: 1;
	color: #1e2a5e;
	min-width: 0;
}
.orderNotice__body {
	margin: 0;
	flex: 1;
	line-height: 1.45;
	color: #2c3a55;
	font-size: 0.95rem;
	min-width: 0;
}

/* Notice "offre" : prix à droite */
.orderNotice--offer { background: #f1f5fb; }
.orderNotice__prices {
	display: flex;
	flex: none;
}
.priceBox {
	background: #fff;
	border: 1px solid #d6dce6;
	padding: 0.4rem 0.85rem;
	text-align: center;
	min-width: 95px;
}
.priceBox__label { font-size: 0.72rem; color: #8a93a3; line-height: 1.2; }
.priceBox__amount { font-size: 1.2rem; font-weight: 700; margin-top: 0.1rem; }
.priceBox__sub { font-size: 0.65rem; color: #8a93a3; margin-top: 0.05rem; }

.priceBox--old { border-radius: 8px 0 0 8px; color: #b0b7c2; }
.priceBox--old .priceBox__amount {
	text-decoration: line-through;
	color: #b0b7c2;
	font-weight: 500;
}

.priceBox--new {
	border-left: none;
	border-radius: 0 8px 8px 0;
	color: #1e2a5e;
}
.priceBox--new .priceBox__label { color: #1e2a5e; font-weight: 500; }
.priceBox--new .priceBox__amount { color: #1e2a5e; }

/* Notice "shipping" : icône colis + texte libre, fond gris doux */
.orderNotice--shipping { background: #f5f7fb; }

/* Responsive : sous 800px on empile tout verticalement */
@media (max-width: 1150px) {
	.orderIntro { flex-direction: column; }
}
@media (max-width: 500px) {
	.orderIntro { flex-direction: column; }
	.orderHero {
		flex-direction: column;
		align-items: flex-start;
		min-height: auto;
		padding: 1.5rem;
	}
	.orderHero__text { max-width: 100%; }
	.orderHero__line { font-size: 1.35rem; }
	.orderHero__borne { display: none; }
	.orderNotice { flex-direction: column; align-items: flex-start; }
	.orderNotice__prices { width: 100%; }
	.priceBox { flex: 1; }
}

.pageIntro {
	text-align: center;
	font-size: 125%;
	margin-top: 2rem;
	font-weight: 600;
}

/* ─── Grille de cartes profil (étape 1) ──────────────────────── */
.profileGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin: 2rem 0;
}
.profileCard {
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	padding: 1.5rem;
	text-align: center;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.profileCard:hover { border-color: #1976d2; box-shadow: 0 2px 8px rgba(25,118,210,0.2); }
.profileCardDisabled { opacity: 0.55; }
.profileCardIcon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.profileCardTitle { margin: 0.5rem 0; font-size: 1.1rem; }
.profileCardSubtitle { color: #666; font-size: 0.9rem; margin: 0.5rem 0 1rem; flex: 1; }
.profileCardButton {
	background: #1976d2;
	color: #fff;
	border: none;
	padding: 0.6rem 1.2rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.95rem;
}
.profileCardButton:hover { background: #1565c0; }
.profileCardDisabled .profileCardButton { background: #999; cursor: not-allowed; }