/* ==========================================================================
   Accueil, contact et rappel — ReparePC.fr
   --------------------------------------------------------------------------
   Les composants propres à ces trois pages : les blocs alternés de l'accueil
   et leur fil conducteur, les trois portes de la page contact, les onglets et
   les champs du rappel.

   Cette feuille n'est chargée que sur ces pages. Elle redéfinit quelques
   règles du site (`#contenu a`, `#contenu h3`) qui, posées avec un
   identifiant, l'emportent sur une simple classe : la spécificité est donc
   volontaire là où elle apparaît, et commentée sur place.

   Les teintes des cinq familles viennent des dégradés des cercles de
   l'ancienne page d'accueil (rose-violet, cyan-bleu, jaune-orangé), plus un
   vert d'eau. Les cinq accents tombent tous entre 6,4 et 7,0 de contraste
   sur blanc : aucune famille ne crie plus fort qu'une autre.
   ========================================================================== */
:root {
	--rp-violet: #5f2eec;
	--rp-vert: #00855e;
	--rp-encre: #222d39;
	--rp-gris: #f7f7f9;
	--rp-trait: rgba(34, 45, 57, .1);
}

/* Le site souligne tous les liens du contenu (`#contenu a`, spécificité
   1-0-1). Une carte entière qui est un lien se retrouvait donc soulignée de
   part en part. On reprend la main avec la même spécificité. */
#contenu a.tuile,
#contenu a.tuile__lien,
#contenu a.porte,
#contenu a.sympt,
#contenu a.moyen,
.services a.tuile,
.services a.tuile__lien,
.services a.porte,
.services a.sympt,
.services a.moyen,
.tuiles a.tuile,
.tuiles a.tuile__lien,
#contenu a.tuile:hover,
#contenu a.porte:hover,
#contenu a.sympt:hover,
#contenu a.moyen:hover,
.services a.porte:hover,
.services a.sympt:hover {
	text-decoration: none;
}

/* ==========================================================================
   Trois portes de contact
   ========================================================================== */
.moyens {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 36px 0 0;
	text-align: left;
}

.moyen {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 26px 24px 24px;
	border: 1px solid var(--rp-trait);
	border-radius: 18px;
	background: #fff;
	color: var(--rp-encre);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.moyen:hover {
	border-color: var(--rp-violet);
	transform: translateY(-3px);
	box-shadow: 0 16px 34px -22px rgba(20, 16, 58, .6);
	color: var(--rp-encre);
	text-decoration: none;
}

.moyen--fort {
	background: linear-gradient(180deg, #fff 0%, #faf8ff 100%);
	border-color: rgba(95, 46, 236, .3);
}

.moyen__ico {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: var(--rp-gris);
	color: var(--rp-violet);
}

.moyen--fort .moyen__ico {
	background: var(--rp-violet);
	color: #fff;
}

.moyen__t {
	margin: 0 0 6px;
	font: 700 19px/1.3 "Poppins", sans-serif;
}

.moyen__p {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 23px;
	color: #5b6572;
}

.moyen__v {
	margin-top: auto;
	font: 600 16px/1.3 "Poppins", sans-serif;
	color: var(--rp-violet);
}

.moyen__d {
	display: block;
	margin-top: 3px;
	font: 400 12.5px/1.4 "Poppins", sans-serif;
	color: #7b8492;
}

/* ==========================================================================
   Onglets et formulaires courts — variantes du rappel
   ========================================================================== */
.onglets {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--rp-trait);
	border-radius: 999px;
	background: var(--rp-gris);
}

.expr {
	box-sizing: border-box;
	max-width: 620px;
	margin: 28px auto 0;
	padding: 30px 30px 26px;
	border: 1px solid var(--rp-trait);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 20px 50px -34px rgba(20, 16, 58, .6);
	text-align: left;
}

.expr__t {
	margin: 0 0 6px;
	font: 700 22px/1.3 "Poppins", sans-serif;
}

.expr__p {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 23px;
	color: #5b6572;
}

.expr__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.expr__ligne input[type="tel"],
.expr__ligne input[type="text"] {
	flex: 1 1 240px;
	box-sizing: border-box;
	height: 56px;
	padding: 0 18px;
	border: 1px solid #dcdce8;
	border-radius: 12px;
	font: 400 16px/1 "Poppins", sans-serif;
	color: var(--rp-encre);
	background: #fff;
}

.expr__ligne input:focus {
	outline: 2px solid rgba(95, 46, 236, .35);
	border-color: var(--rp-violet);
}

.expr__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	height: 56px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background-image: linear-gradient(100deg, #7121ff 0%, #3f50f6 62%, #21d4fd 140%);
	color: #fff;
	font: 600 16px/1 "Poppins", sans-serif;
	cursor: pointer;
	white-space: nowrap;
}

.expr__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 16px 0 0;
	font: 400 13px/1.5 "Poppins", sans-serif;
	color: #7b8492;
}

.expr__pied span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* ==========================================================================
   Téléphone
   ========================================================================== */
@media screen and (max-width: 900px) {
.moyens {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 640px) {
.expr {
		padding: 24px 20px 22px;
	}

.expr__ligne input,
	.expr__btn {
		width: 100%;
		flex: 1 1 100%;
	}

.onglets {
		width: 100%;
	}
}

/* ---------- Blocs alternés : l'image d'un côté, le texte de l'autre ---------- */
.alt {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 48px;
	margin: 0 auto;
	max-width: 1100px;
	padding: 56px 0;
	text-align: left;
}

.alt + .alt {
	border-top: 1px solid var(--rp-trait);
}

.alt--inverse .alt__visuel {
	order: 2;
}

.alt__visuel {
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 4 / 3;
	background: var(--rp-gris);
}

.alt__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(1.08) saturate(.95);
}

.alt__sur {
	margin: 0 0 10px;
	font: 600 12px/1 "Poppins", sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rp-violet);
}

.alt__h {
	margin: 0 0 14px;
	font: 700 30px/39px "Poppins", sans-serif;
	color: var(--rp-encre);
	text-wrap: balance;
}

.alt__p {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 27px;
	color: #5b6572;
	text-wrap: pretty;
}

.alt__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.alt__liens a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 15px/1 "Poppins", sans-serif;
	color: var(--rp-violet);
}

@media screen and (max-width: 900px) {
.alt,
	.deuxcol,
	.rap2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

.alt--inverse .alt__visuel {
		order: 0;
	}

.alt {
		padding: 38px 0;
	}
}

@media screen and (max-width: 640px) {
.alt__h {
		font-size: 25px;
		line-height: 33px;
	}
}

/* ---------- La pastille de prix, reprise du bandeau des pages ---------- */
.prix-pastille {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--rp-violet);
	color: #fff;
	font: 600 14px/1 "Poppins", sans-serif;
}

/* ---------- Blocs alternés, trois mises en page ---------- */
/* Le traitement des photographies est fait à l'export : rien à corriger
   ici, et surtout aucun filtre à appliquer sur cinq images en pleine page. */
.alt__visuel img,
.altb__visuel img,
.altc__visuel img {
	filter: none;
}

/* Style 3 : une ligne d'informations, puis la photo en pleine largeur. */
.co3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 30px;
	max-width: 1000px;
	margin: 30px auto 0;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--rp-trait);
}

.co3__item {
	display: flex;
	align-items: center;
	gap: 9px;
	font: 400 15px/1.4 "Poppins", sans-serif;
	color: #5b6572;
}

.co3__item svg {
	color: var(--rp-violet);
	flex: 0 0 auto;
}

.co3__item b {
	color: var(--rp-encre);
	font-weight: 600;
}

.co3__photo {
	overflow: hidden;
	max-width: 1000px;
	margin: 26px auto 0;
	aspect-ratio: 21 / 9;
	border-radius: 22px;
}

.co3__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Rappel : onglets, champs, et bande du bas
   ========================================================================== */
/* Le site souligne tous les liens du contenu. Les onglets en héritaient,
   ce qui brouillait la lecture de l'actif et de l'inactif. */
#contenu .onglets a,
#contenu .onglets a:hover,
.services .onglets a,
#contenu a.co1__v,
#contenu .co2 a,
#contenu .co3__item a {
	text-decoration: none;
}

/* ---------- Champs du formulaire, au style des autres blocs ---------- */
.champ {
	display: block;
	margin: 0 0 16px;
}

.champ__lab {
	display: block;
	margin-bottom: 7px;
	font: 600 13.5px/1 "Poppins", sans-serif;
	color: var(--rp-encre);
}

.champ__lab small {
	font-weight: 400;
	color: #7b8492;
}

/* Les champs du site (`.box`) ont un tracé et un rayon différents de ceux
   du rappel express. Ici tout partage la même forme : 12 px de rayon,
   56 px de haut, un trait discret qui devient violet au clavier. */
.champ input,
.champ textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0 18px;
	border: 1px solid #dcdce8;
	border-radius: 12px;
	background: #fff;
	color: var(--rp-encre);
	font: 400 16px/1 "Poppins", sans-serif;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.champ input {
	height: 56px;
}

.champ textarea {
	padding: 15px 18px;
	line-height: 25px;
	resize: vertical;
}

.champ input:focus,
.champ textarea:focus {
	outline: 0;
	border-color: var(--rp-violet);
	box-shadow: 0 0 0 3px rgba(95, 46, 236, .16);
}

.champ input::placeholder,
.champ textarea::placeholder {
	color: #a8afba;
}

/* ---------- La bande du bas, au style du haut de la capture ---------- */
.trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	max-width: 900px;
	margin: 46px auto 0;
	text-align: center;
}

.trio__ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 auto 13px;
	border-radius: 50%;
	background: rgba(95, 46, 236, .09);
	color: var(--rp-violet);
}

.trio__t {
	margin: 0 0 4px;
	font: 700 16px/1.3 "Poppins", sans-serif;
	color: var(--rp-encre);
}

.trio__d {
	margin: 0;
	font: 400 13.5px/20px "Poppins", sans-serif;
	color: #7b8492;
}

@media screen and (max-width: 900px) {
.altb,
	.co1,
	.co2,
	.pq3,
	.trio {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
}

@media screen and (max-width: 640px) {
.co3__photo {
		aspect-ratio: 16 / 10;
	}
}

/* Les onglets sont des boutons : ils n heritent pas des styles de lien,
   il faut donc reprendre la remise a zero du navigateur. */
.onglets button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #5b6572;
	font: 600 15px/1 "Poppins", sans-serif;
	cursor: pointer;
}

.onglets button.on {
	background: #fff;
	color: var(--rp-violet);
	box-shadow: 0 1px 3px rgba(20, 16, 58, .12);
}

/* ---------- Les quatre familles et leurs trois tons ---------- */
/* Sans classe de famille, tout retombe sur le violet de la marque. Ce repli
   vient en premier : les classes de famille ont la meme specificite, c est
   donc l ordre du fichier qui tranche. */
.alt {
	--c-accent: var(--rp-violet);
	--c-teinte: #f2edff;
	--c-doux: #ece4ff;
	--c-halo: linear-gradient(230deg, #c9b6ff 0%, #9f7bf8 100%);
}

.fam-1 {
	--c-accent: #a3246d;
	--c-teinte: #fbedf4;
	--c-doux: #fae7f1;
	--c-halo: linear-gradient(230deg, #f483a3 0%, #c670fe 100%);
}

.fam-2 {
	--c-accent: #0b5d94;
	--c-teinte: #eaf4fc;
	--c-doux: #e2f0fb;
	--c-halo: linear-gradient(230deg, #83f3f4 0%, #70b6fe 100%);
}

/* Le jaune de l'ancienne page tirait sur le bronze une fois assombri pour
 rester lisible. On remonte la teinte vers 46° au lieu de 35°, et on retire
 le rose du dégradé, qui tirait l'ensemble vers le brun. */
.fam-3 {
	--c-accent: #8a6d00;
	--c-teinte: #fff8e3;
	--c-doux: #fff9e6;
	--c-halo: linear-gradient(230deg, #fff06a 0%, #ffcc33 100%);
}

.fam-4 {
	--c-accent: #0b6b53;
	--c-teinte: #e8f5ef;
	--c-doux: #ddf1e9;
	--c-halo: linear-gradient(230deg, #a9efb9 0%, #6fd9c7 100%);
}

/* La cinquième famille, l'apprentissage, reprend le violet de la marque :
   une cinquième teinte inventée aurait fait basculer la page dans
   l'arc-en-ciel. */
.fam-5 {
	--c-accent: #5f2eec;
	--c-teinte: #f2edff;
	--c-doux: #ece4ff;
	--c-halo: linear-gradient(230deg, #c9b6ff 0%, #9f7bf8 100%);
}

/* ==========================================================================
   Blocs alternés — le fond commun aux quatre déclinaisons
   ========================================================================== */
/* La photo est devenue un lien : sans cette remise à zéro elle hériterait
   du soulignement et de la couleur de survol des liens du site. */
.services a.alt__visuel,
.services a.alt__visuel:hover,
#contenu a.alt__visuel,
.services a.prix-pastille,
.services a.prix-pastille:hover,
#contenu a.prix-pastille,
.services a.alt__pill,
.services a.alt__pill:hover,
#contenu a.alt__pill {
	text-decoration: none;
}

.alt__visuel {
	display: block;
	position: relative;
	z-index: 1;
}

.alt__visuel img {
	display: block;
	transition: transform .45s ease;
}

.alt__visuel:hover img {
	transform: scale(1.035);
}

.alt__sur {
	color: var(--c-accent);
}

/* Le prix mène à la page des tarifs : c'est la question qu'il pose. */
.alt .prix-pastille {
	background: var(--c-accent);
	color: #fff;
	transition: filter .2s ease;
}

.alt a.prix-pastille:hover {
	background: var(--rp-violet);
	color: #fff;
}

/* Les deux liens deviennent de vraies pastilles : on voit qu'on peut
   cliquer, et la cible est assez grande au doigt. */
.alt__liens {
	gap: 10px;
}

.alt__pill {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid rgba(34, 45, 57, .14);
	border-radius: 999px;
	background: #fff;
	color: var(--rp-encre);
	font: 600 14.5px/1 "Poppins", sans-serif;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.alt__pill svg {
	color: var(--c-accent);
	transition: transform .2s ease;
}

/* Au survol, on revient au violet de la marque : c'est la couleur que le
   site donne partout ailleurs à un lien qu'on désigne. */
.alt__pill:hover {
	border-color: var(--rp-violet);
	color: var(--rp-violet);
}

.alt__pill:hover svg {
	color: var(--rp-violet);
}

.alt__pill:hover svg {
	transform: translateX(3px);
}

/* ==========================================================================
   Déclinaison 3 — la couleur au trait, le fond reste blanc
   ========================================================================== */
.blocs .alt__sur {
	position: relative;
	padding-top: 16px;
}

.blocs .alt__sur::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 4px;
	border-radius: 4px;
	background-image: var(--c-halo);
}

.blocs .alt .prix-pastille {
	background: var(--c-doux);
	color: var(--c-accent);
}

.blocs .alt a.prix-pastille:hover {
	background: rgba(95, 46, 236, .1);
	color: var(--rp-violet);
	filter: none;
}

/* Déclinaison 3 : aucune bande. Quatre pastilles posées sur un trait, qui
   conduit l'œil d'un argument au suivant. */
.pqc {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	position: relative;
	max-width: 960px;
	margin: 38px auto 0;
	gap: 0 20px;
}

/* Le trait s'arrête au centre de la première et de la dernière pastille :
   il relie, il n'encadre pas. */
.pqc::before {
	content: "";
	position: absolute;
	top: 25px;
	left: calc(12.5% - 10px);
	right: calc(12.5% - 10px);
	height: 2px;
	background-image: linear-gradient(90deg, #e2d8ff 0%, #b79cff 50%, #e2d8ff 100%);
}

.pqc__item {
	position: relative;
	text-align: center;
}

.pqc__t {
	margin: 0;
	font: 400 14px/21px "Poppins", sans-serif;
	color: #4a5361;
}

.pqc__t b {
	display: block;
	color: var(--rp-encre);
	font-weight: 600;
}

/* ==========================================================================
   Rappel — les deux nouvelles déclinaisons d'onglets
   ========================================================================== */
/* Déclinaison 2 : la même pastille, mais pleine de violet. */
.onglets--plein button.on {
	background: var(--rp-violet);
	color: #fff;
	box-shadow: 0 6px 16px -8px rgba(95, 46, 236, .9);
}

/* L'espace qui manquait entre le dernier bloc et le pied de page. */
.rappel-bas {
	padding-bottom: 64px;
}

/* ==========================================================================
   Téléphone et tablette
   ========================================================================== */
@media screen and (max-width: 900px) {
.pqa,
	.pqb,
	.pqc {
		grid-template-columns: 1fr 1fr;
	}

.pqc {
		gap: 26px 20px;
	}

.pqc::before {
		display: none;
	}
}

@media screen and (max-width: 760px) {
/* La pastille du prix passe au-dessus du titre et se réduit : sur une
	   colonne étroite, elle tenait une ligne pour elle seule. */
.alt .prix-pastille {
		padding: 6px 12px;
		font-size: 13px;
	}
}

@media screen and (max-width: 640px) {
	/* Sur téléphone le bloc n'a plus deux colonnes à alterner. La
	   photographie devient une vignette carrée, et elle se range à côté du
	   surtitre et du titre plutôt qu'au-dessus : la même hauteur sert à
	   deux choses, et le bloc perd cent vingt pixels sans rien perdre de
	   son contenu.

	   Le surtitre et le titre s'alignent sur le bord de la vignette : c'est
	   le seul moyen que l'écart entre la photo et le texte soit le même d'un
	   bloc à l'autre. Centré, le texte s'écartait de la photo dès que le
	   titre était court. Mais la paire entière, elle, se centre sur la
	   largeur de l'écran, sinon la photo a l'air collée au bord gauche.

	   D'où la grille à quatre colonnes. Les deux du milieu portent la
	   vignette et le texte, et se réduisent à ce qu'ils contiennent ; celles
	   des bords sont deux gouttières souples qui se partagent le reste à
	   parts égales. Le titre est plafonné à 180 px, sans quoi il prendrait
	   toute la place et la paire remplirait la largeur ; `fit-content` le
	   laisse descendre en dessous sur les écrans plus étroits que 375 px.

	   L'étiquette, le paragraphe et les liens traversent les quatre colonnes
	   et se centrent sur toute la largeur. Ils n'élargissent pas pour autant
	   les colonnes du milieu : un élément qui traverse une colonne souple ne
	   compte pas dans le calcul de la largeur des colonnes fixes.

	   `display: contents` sur la colonne de texte fait remonter ses enfants
	   dans la grille du bloc : ils deviennent des éléments à part entière,
	   qu'on peut placer un par un. */
	.alt {
		grid-template-columns: minmax(0, 1fr) auto fit-content(180px) minmax(0, 1fr);
		column-gap: 0;
		row-gap: 0;
		padding: 26px 0;
		text-align: center;
	}

	.alt__txt {
		display: contents;
	}

	/* La vignette couvre les deux lignes du titre. Comme elle est plus haute
	   qu'eux, la grille répartit le surplus entre les deux lignes : le
	   surtitre collé en bas de la sienne et le titre collé en haut de la
	   suivante se retrouvent centrés en face de la photo. */
	.alt__visuel,
	.alt--inverse .alt__visuel {
		order: 0;
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		width: 116px;
		height: 116px;
		/* L'écart se prend ici plutôt qu'en `column-gap`, qui s'appliquerait
		   aussi entre les gouttières et le contenu. */
		margin: 0 16px 0 0;
		aspect-ratio: auto;
		border-radius: 18px;
	}

	.alt__sur {
		grid-column: 3;
		grid-row: 1;
		align-self: end;
		margin: 0 0 7px;
		text-align: left;
	}

	.alt__h {
		grid-column: 3;
		grid-row: 2;
		align-self: start;
		margin: 0;
		font-size: 19px;
		line-height: 26px;
		text-align: left;
		text-wrap: balance;
	}

	/* L'étiquette de prix touchait le titre au-dessus et le texte en
	   dessous : elle prend l'air qui lui manquait des deux côtés. */
	.alt .prix-pastille {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: center;
		margin: 18px 0 0;
	}

	.alt__p {
		grid-column: 1 / -1;
		grid-row: 4;
		margin: 14px 0 0;
		font-size: 14.5px;
		line-height: 23px;
	}

	.alt__liens {
		grid-column: 1 / -1;
		grid-row: 5;
		justify-content: center;
		gap: 8px;
		margin-top: 16px;
	}

	.alt__pill {
		min-height: 36px;
		padding: 0 13px;
		font-size: 13.5px;
	}

	/* Le filet de couleur reprend le bord gauche du surtitre, comme sur
	   grand écran. */
	.blocs .alt__sur {
		padding-top: 12px;
	}

	.blocs .alt__sur::before {
		left: 0;
		width: 28px;
		height: 3px;
	}

.pqa,
	.pqb,
	.pqc,
	.pqd {
		grid-template-columns: minmax(0, 1fr);
	}

.pqc {
		max-width: 320px;
		gap: 20px;
	}

.pqc__item {
		display: flex;
		align-items: center;
		gap: 16px;
		text-align: left;
	}

.rappel-bas {
		padding-bottom: 44px;
	}
}

/* Sur téléphone, les deux titres de la page d'accueil se coupaient en
   laissant un mot seul sur la dernière ligne. L'équilibrage répartit le
   texte également entre les lignes, ce qui supprime le mot orphelin. */
.services h2.h2-equilibre {
	text-wrap: balance;
}

/* Même correction que dans le bandeau : la règle `p { overflow: auto }` de
   la feuille du site fait apparaître une barre de défilement à l'intérieur
   des paragraphes dont l'interligne est serré. */
.alt p,
.pqa p,
.pqb p,
.pqc p,
.pqd p,
.atl p {
	overflow: visible;
}

/* ==========================================================================
   Déclinaison 5 — le camaïeu de violet
   --------------------------------------------------------------------------
   Même traitement que l'accent au trait, mais les cinq familles ne se
   distinguent plus que par la profondeur d'un seul violet. Les cinq accents
   vont de 10,9 à 5,8 de contraste sur blanc : la gradation se voit, et la
   plus claire reste lisible.
   ========================================================================== */
.blocs .fam-1 {
	--c-accent: #3f1aa8;
	--c-teinte: #f4eaff;
	--c-doux: #e6dcff;
	--c-halo: linear-gradient(230deg, #b9a1ff 0%, #6b3fe0 100%);
}

.blocs .fam-2 {
	--c-accent: #4a20c6;
	--c-teinte: #efe6ff;
	--c-doux: #e9e0ff;
	--c-halo: linear-gradient(230deg, #c3aeff 0%, #7a4ef0 100%);
}

.blocs .fam-3 {
	--c-accent: #5526dd;
	--c-teinte: #ece4ff;
	--c-doux: #ece4ff;
	--c-halo: linear-gradient(230deg, #cbb9ff 0%, #8a63f5 100%);
}

.blocs .fam-4 {
	--c-accent: #5f2eec;
	--c-teinte: #f2edff;
	--c-doux: #efe9ff;
	--c-halo: linear-gradient(230deg, #d4c6ff 0%, #9a7bf8 100%);
}

.blocs .fam-5 {
	--c-accent: #6d3fee;
	--c-teinte: #f6f2ff;
	--c-doux: #f2edff;
	--c-halo: linear-gradient(230deg, #ddd3ff 0%, #ab92fa 100%);
}

/* ==========================================================================
   Pourquoi passer par nous — l'axe rassurance
   --------------------------------------------------------------------------
   Question de Yann : est-ce que le visiteur veut vraiment des chiffres à cet
   endroit ? Ce qui le retient n'est pas le prix, c'est la peur de mal parler,
   d'être pris de haut, et de découvrir la note à la fin. Ces deux formats
   répondent à ça et ne contiennent aucun chiffre.
   ========================================================================== */
/* Le fil conducteur, mais avec des pictogrammes à la place des nombres. */
.pqe__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 15px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--rp-violet);
	color: var(--rp-violet);
}

.pqc__t b {
	font-size: 15px;
}

.pqc::before {
	top: 27px;
}

@media screen and (max-width: 640px) {
.pqe__ico {
		flex: 0 0 auto;
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Cinquième tour de retours
   ========================================================================== */
/* ---------- Pourquoi passer par nous : le fil allégé ---------- */
/* Yann garde le fil conducteur en version rassurance, mais le veut plus
   léger. L'anneau de deux pixels devient un filet posé sur un fond très
   clair, la pastille perd huit pixels, et le texte descend d'un demi-point. */
.pqc--mots::before {
	top: 23px;
}

.pqc--mots .pqe__ico {
	width: 46px;
	height: 46px;
	margin-bottom: 13px;
	background: #f4f1ff;
	box-shadow: inset 0 0 0 1px rgba(95, 46, 236, .3);
}

.pqc--mots .pqc__t {
	font-size: 13.5px;
	line-height: 20px;
	color: #6b7481;
}

.pqc--mots .pqc__t b {
	margin-bottom: 2px;
	font-size: 14.5px;
}

/* ---------- Contact : la ligne en anglais ---------- */
/* Elle a sa propre ligne, sous le texte français, avec le drapeau devant.
   Discrète, mais repérable d'un coup d'œil par qui la cherche. */
.anglais {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 24px;
	color: #5b6572;
}

.anglais__drapeau {
	flex: 0 0 auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(34, 45, 57, .12);
}

/* ---------- Un bouton du site avec un pictogramme ---------- */
/* `.white-btn` est composé en bloc et centré. Pour loger une icône devant
   le texte sans casser l'alignement, il passe en boîte flexible. */
#contenu a.white-btn.btn-ico,
.services a.white-btn.btn-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

@media screen and (max-width: 640px) {
.pqc--mots .pqe__ico {
		margin-bottom: 0;
	}

/* Si la phrase passe sur deux lignes, le drapeau se centre en face
	   d'elles plutôt que de se coller en haut. */
.anglais {
		align-items: center;
		text-align: left;
	}
}

/* ==========================================================================
   Septième tour — les corrections de Yann
   ========================================================================== */
/* ---------- Le voile du bandeau, éclairci ---------- */
/* « Un petit peu sombre ». Le violet de la marque ne bouge pas, c'est le
   voile sombre du centre qui perd un quart de son opacité : la photographie
   revient, la teinte reste la même.

   Ce qu'on y perd en contraste, on le reprend sur le texte lui-même, qui
   était posé en blanc à 90 % et passe en blanc plein. Le sous-titre gagne
   au change : 4,4 contre le fond au lieu de 4,2 aujourd'hui. */



/* ---------- Contact : le drapeau sans encadrement ---------- */
.anglais__drapeau {
	box-shadow: none;
}

/* ---------- Contact : les réponses de la FAQ s'alignent à gauche ---------- */
/* `.info-block` centre tout ce qu'il contient. La question porte déjà son
   propre alignement, la réponse l'avait perdu : un paragraphe de cinq
   lignes centré ne se lit pas. */
.info-block .faq-rubrique {
	text-align: left;
}

/* ---------- Accueil : la note des prix de départ ---------- */
/* Même gabarit que les blocs, sinon elle part au bord de l'écran. Et
   `overflow: visible`, sinon le `p { overflow: auto }` du site lui dessine
   une barre de défilement à l'intérieur. */
.alt__note {
	max-width: 1100px;
	margin: 4px auto 0;
	overflow: visible;
	font-size: 13px;
	line-height: 20px;
	color: #7b8492;
	text-align: left;
}

/* ---------- Accueil : le fil conducteur retrouve ses pictogrammes ---------- */
/* Ce n'était pas la taille des pictogrammes qui pesait, c'était la longueur
   des phrases. Les pastilles remontent donc, le trait suit leur centre. */
.pqc--mots::before {
	top: 26px;
}

.pqc--mots .pqe__ico {
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	background: #f4f1ff;
	box-shadow: inset 0 0 0 1px rgba(95, 46, 236, .3);
}

.pqc--mots .pqe__ico svg {
	width: 24px;
	height: 24px;
}

/* ---------- Contact : les trois portes sur téléphone ---------- */
/* Empilées telles quelles, les trois cartes prenaient un écran entier.
   Elles se resserrent, mais restent bâties comme sur grand écran : le
   pictogramme au-dessus du titre et tout centré, comme le reste de la
   page. La version précédente les alignait à gauche, ce qui tranchait avec
   le titre et l'introduction et donnait un bloc compact mais bancal. */
@media screen and (max-width: 640px) {
.moyens {
		gap: 12px;
		margin-top: 28px;
		text-align: center;
	}

.moyen {
		padding: 18px 18px 17px;
		border-radius: 16px;
	}

.moyen__ico {
		width: 44px;
		height: 44px;
		margin: 0 auto 11px;
		border-radius: 13px;
	}

.moyen__ico svg {
		width: 20px;
		height: 20px;
	}

/* `#contenu h3` impose 24 px et 32 px de marge. Sur grand écran ce blanc
	   fait respirer la carte et Yann y tient ; ici il la fait défiler. */
#contenu .moyen__t {
		margin: 0 0 7px;
		font-size: 17.5px;
	}

.moyen__p {
		margin: 0 0 12px;
		font-size: 13.5px;
		line-height: 20px;
	}

.moyen__v {
		font-size: 15.5px;
	}

.moyen__d {
		margin-top: 2px;
		font-size: 12px;
	}
}

/* ---------- Rappel : les deux onglets sur téléphone ---------- */
/* La barre passe en pleine largeur sous 900 px, mais sans `border-box` :
   ses 8 px de marge intérieure et ses 2 px de trait s'ajoutaient aux 100 %
   et la faisaient déborder de dix pixels à droite, donc impossible à
   centrer. Les onglets du rappel sont des boutons, et la règle de partage
   ne visait que les liens : chacun gardait sa largeur naturelle. */
@media screen and (max-width: 900px) {
.onglets {
		box-sizing: border-box;
	}

.onglets button {
		flex: 1 1 0;
		justify-content: center;
		gap: 7px;
		/* « Choisir mon créneau » ne tient pas sur une ligne dans la moitié
		   d'un écran de téléphone. Plutôt que de le réduire jusqu'à
		   l'illisible, la pastille grandit avec lui ; les deux gardent la
		   même hauteur, l'étirement de la boîte flexible s'en charge. */
		height: auto;
		min-height: 44px;
		padding: 8px 10px;
		font-size: 13.5px;
		line-height: 1.3;
		text-align: center;
	}
}