/* ==========================================================================
   Bandeau des pages de prestation — ReparePC.fr
   --------------------------------------------------------------------------
   Classe à part plutôt qu'une reprise de .head-page : six autres gabarits
   s'en servent encore (actualités, rappel, zones, désinscription, page
   indisponible), et ils gardent l'en-tête simple.
   ========================================================================== */

.rp-band {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: calc(var(--rp-nav-space) + 56px) 20px 54px;
	background: #2f1379;
}

/* La photographie est préparée à l'export : recadrée en bande, désaturée
   aux deux tiers et ramenée à la même clarté que les autres. Aucun filtre
   CSS ici, qui coûterait cher à l'affichage sur une image plein écran. */
.rp-band__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tout le voile tient dans ::after, dernier enfant, donc au-dessus de la
   photographie. Sur ::before il passerait dessous, ::before étant inséré
   comme premier enfant. Deux fonds empilés : l'assombrissement du centre,
   là où passe le texte, puis le violet de la marque. */
.rp-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(115% 100% at 50% 46%, rgba(14, 6, 48, .50) 0%, rgba(14, 6, 48, .26) 55%, rgba(14, 6, 48, .42) 100%),
		linear-gradient(270deg, rgba(94, 44, 237, .74) 0%, rgba(140, 105, 250, .60) 100%);
}

/* Sans photographie, le dégradé de la marque seul. */
.rp-band--nu {
	background-image: linear-gradient(270deg, #5e2ced 0%, #a485fd 100%);
}

.rp-band--nu::after {
	background: radial-gradient(115% 100% at 50% 46%, rgba(14, 6, 48, .22) 0%, rgba(14, 6, 48, 0) 70%);
}

.rp-band__in {
	position: relative;
	z-index: 2;
	max-width: 860px;
	margin: 0 auto;
}

.rp-band__sur {
	margin: 0 0 14px;
	font: 600 12.5px/1 "Poppins", sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.rp-band__h1 {
	margin: 0 0 16px;
	color: #fff;
	font: 700 44px/52px "Poppins", sans-serif;
	text-wrap: balance;
	text-shadow: 0 2px 22px rgba(10, 4, 40, .45);
}

.rp-band__sous {
	max-width: 640px;
	margin: 0 auto;
	color: rgba(255, 255, 255, .9);
	font-size: 17px;
	line-height: 29px;
	text-wrap: pretty;
}

/* Le morceau de phrase que Bandeau::dernierBloc garde d'un seul tenant. */
.rp-band__nb {
	white-space: nowrap;
}

.rp-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
}

/* box-sizing posé ici : le site ne l'applique pas globalement, et sans lui
   un bouton en largeur 100 % sur téléphone ajoutait ses 30 px de marge
   intérieure par-dessus, soit 44 px de débordement hors de l'écran. */
.rp-band,
.rp-band__in,
.rp-band__btn {
	box-sizing: border-box;
}

.rp-band__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 58px;
	padding: 0 30px;
	border-radius: 12px;
	font: 600 16.5px/1 "Poppins", sans-serif;
	text-decoration: none;
	white-space: nowrap;
	transition:
		transform .22s cubic-bezier(.22, 1, .36, 1),
		background-color .22s ease,
		border-color .22s ease,
		color .22s ease;
}

.rp-band__btn:hover,
.rp-band__btn:focus-visible {
	text-decoration: none;
	transform: translateY(-2px);
}

/* Action principale en blanc plein. Le dégradé violet et bleu du hero ne
   tient pas ici : mesuré sur les seize fonds, il ressort à 1,2 contre le
   violet, là où 3,0 est le minimum pour qu'une forme se détache. Le blanc
   y monte à 7,6, et le violet du texte à 6,8 sur ce blanc. */
.rp-band__btn--1 {
	background: #fff;
	color: #5f2eec;
	box-shadow: 0 16px 36px -16px rgba(8, 4, 40, .95);
}

.rp-band__btn--1:hover,
.rp-band__btn--1:focus-visible {
	background: #f4f1ff;
	color: #4a1fd0;
}

/* Action secondaire en simple contour : lisible sans venir concurrencer
   l'appel. */
.rp-band__btn--2 {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .55);
}

.rp-band__btn--2:hover,
.rp-band__btn--2:focus-visible {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .85);
	color: #fff;
}

.rp-band__preuves {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 26px;
	margin: 22px 0 0;
	padding: 0;
}

.rp-band__preuves li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .92);
	font: 400 14px/1 "Poppins", sans-serif;
}

.rp-band__dispo {
	font-weight: 600;
}

.rp-band__point {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9aa3b2;
}

.rp-band__dispo.is-on .rp-band__point {
	background: #2fe08a;
	box-shadow: 0 0 0 4px rgba(47, 224, 138, .22);
}

@media screen and (max-width: 997px) {
	.rp-band {
		padding-top: calc(var(--rp-nav-space) + 32px);
	}
}

@media screen and (max-width: 640px) {
	.rp-band {
		padding-left: 18px;
		padding-right: 18px;
		padding-bottom: 40px;
	}

	.rp-band__h1 {
		font-size: 29px;
		line-height: 36px;
	}

	.rp-band__sous {
		font-size: 15px;
		line-height: 25px;
	}

	.rp-band__actions {
		flex-direction: column;
		gap: 10px;
		margin-top: 22px;
	}

	.rp-band__btn {
		width: 100%;
		height: 55px;
		justify-content: center;
	}

	.rp-band__preuves {
		gap: 7px 18px;
		margin-top: 17px;
	}

	.rp-band__preuves li {
		font-size: 13.5px;
	}
}

/* Sous 360 px, l'espace insécable des deux derniers mots de l'accroche
   suffisait à déborder. Le titre y descend d'un cran. */
@media screen and (max-width: 359px) {
	.rp-band__h1 {
		font-size: 25px;
		line-height: 32px;
	}

	.rp-band__sous {
		font-size: 14.5px;
		line-height: 24px;
	}
}