/* ==========================================================================
   Pages de contenu, au style de l'accueil et du contact, ReparePC.fr
   --------------------------------------------------------------------------
   Les pages de prestation, les pages de commune et la page « Qui sommes-nous »
   présentaient leurs photographies sur une barre de couleur qui dépasse, avec
   une ombre portée, et leurs sections sous un pictogramme à bulle. Elles
   reprennent désormais les composants de l'accueil et de la page contact :

   - le bloc photo + texte, avec son étiquette violette (`.alt`),
   - le fil de pastilles reliées (`.pqc`),
   - les cartes à pictogramme carré (`.moyen`),
   - les deux boutons d'appel (`.cta-btn`).

   Cette feuille ne redéfinit aucune règle de l'accueil. Elle s'appuie sur
   `pages.css`, qui doit être chargée avant elle, et se contente d'ajuster ce
   qui change quand ces composants vivent dans la colonne de 1000 px d'une page
   de contenu : l'accueil les pose sur toute la largeur de l'écran. Tous les
   sélecteurs partent donc de `#contenu`, ce qui les met aussi au-dessus des
   règles génériques du site (`#contenu h2`, `#contenu h3`, `#contenu a`).

   Les titres gardent leur graisse en deux temps, gras puis normal : c'est la
   signature des titres du site, et elle ne change pas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bloc photo + texte
   --------------------------------------------------------------------------
   Même grille que sur l'accueil : deux colonnes égales, la photo aux angles
   arrondis, le texte centré verticalement contre elle. Deux écarts voulus :

   - Pas de filet ni de marge de 56 px autour du bloc. Sur l'accueil cinq
     blocs se suivent et le filet les sépare ; ici le bloc vit entre des
     sections de nature différente, et c'est le rythme de 72 px des pages qui
     les écarte.
   - La photo est carrée au lieu d'être en 4:3. Une colonne de texte de page
     porte deux paragraphes et une liste, soit 550 px de haut : à 4:3, la photo
     paraît petite à côté, avec un grand blanc au-dessus et au-dessous. Les
     photos de ces pages étaient déjà presque carrées (440 x 476 px).
   -------------------------------------------------------------------------- */
#contenu .alt {
	max-width: none;
	margin: 100px 0 0;
	padding: 0;
	border-top: 0;
	gap: 56px;
}

#contenu > .alt:first-child {
	margin-top: 64px;
}

#contenu .alt__visuel {
	aspect-ratio: 1 / 1;
}

/* Une illustration sur fond blanc se pose nue : pas de cadre ni de coins
   arrondis, qui ne feraient qu'un rectangle blanc dans un rectangle gris. Le
   sélecteur est long à dessein, pour passer devant les règles des photos à
   toutes les largeurs, téléphone compris. */
#contenu .alt .alt__visuel.alt__visuel--libre {
	aspect-ratio: auto;
	overflow: visible;
	border-radius: 0;
	background: none;
}

#contenu .alt .alt__visuel.alt__visuel--libre img {
	height: auto;
	object-fit: contain;
}

/* La photo n'est pas un lien ici : elle ne bouge pas au survol. */
#contenu .alt__visuel:hover img {
	transform: none;
}

/* L'étiquette violette et son trait de couleur, tels que l'accueil les
   dessine dans `.blocs`, qui n'existe pas sur ces pages. */
#contenu .alt__sur {
	position: relative;
	margin: 0 0 12px;
	padding-top: 16px;
}

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

/* Le titre en deux temps : la première partie en gras, sur sa ligne, la
   suite en graisse normale dessous. `#contenu h2` impose 30 px, 700 et une
   marge haute de 36 px ; on ne garde que le corps. */
#contenu .alt__h {
	margin: 0 0 18px;
	font: 400 30px/39px "Poppins", sans-serif;
	color: var(--rp-encre, #222d39);
	text-align: left;
	text-wrap: balance;
}

#contenu .alt__h span,
#contenu .alt__h b {
	display: block;
	font-weight: 700;
}

#contenu .alt__p {
	margin: 0 0 16px;
}

#contenu .alt__p b {
	color: var(--rp-encre, #222d39);
	font-weight: 600;
}

#contenu .alt__p b.highlight {
	color: var(--rp-violet, #5f2eec);
	font-weight: 700;
}

/* ---------- La liste : une pastille cochée par ligne ---------- */
#contenu .alt__liste {
	display: grid;
	gap: 14px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

#contenu .alt__liste li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 15.5px;
	line-height: 24px;
	color: #5b6572;
	list-style: none;
}

#contenu .alt__liste li::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: #f1ecff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f2eec' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

#contenu .alt__liste b {
	color: var(--rp-encre, #222d39);
	font-weight: 600;
}

/* Seul le titre de la ligne passe seul sur sa ligne : un mot en gras plus loin
   dans le texte (« service Repare PC+ ») reste dans la phrase. */
#contenu .alt__liste li > div > b:first-child {
	display: block;
}

/* La précision sous le titre d'une ligne. Une balise `small`, et non un
   `span` : le site colore en violet gras tout `span` placé dans un `li`. */
#contenu .alt__liste small {
	display: block;
	font-size: 14px;
	line-height: 22px;
	color: #6b7481;
}

/* La même liste sur deux colonnes, quand elle est courte et sans précisions
   (une liste de ce qu'on configure dans un encart). */
#contenu .alt__liste--deux {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 32px;
}

@media screen and (max-width: 640px) {
	#contenu .alt__liste--deux {
		grid-template-columns: minmax(0, 1fr);
	}
}

#contenu .alt__liste + .alt__p {
	margin-top: 22px;
}

#contenu .alt__liens {
	margin-top: 24px;
}

/* Dans un encart, le lien se détache de ce qui le précède (le texte ou la
   liste) : la règle des paragraphes de l'encart supprimait sa marge haute. */
#contenu .encart__corps .alt__liens {
	margin: 28px 0 0;
}

/* Dans une section centrée (titre et texte au milieu), les pastilles le sont
   aussi. */
#contenu .info-block > .alt__liens {
	justify-content: center;
	margin-top: 8px;
}

/* Les lignes d'un texte centré s'équilibrent : un paragraphe court ne se termine
   plus par un ou deux mots seuls. Il garde toute la largeur de la colonne. */
#contenu .info-block > p:not(.paiementlogo):not(.grille-suite) {
	text-wrap: balance;
}

/* Le rythme entre les grands blocs : cent pixels. À 72, ils s'enchaînaient
   sans qu'on ait le temps de respirer. Les valeurs de tablette et de téléphone
   sont plus bas. Un texte « suite » (juste après) reste collé à son bloc.
   Il ne vaut que pour les pages passées au nouveau style, celles qui portent un
   bloc photo + texte : la page des questions et les pages légales gardent le
   leur. */
#contenu:has(.alt__txt) .info-block:not(.suite),
#contenu:has(.alt__txt) .faq-rubrique {
	margin-top: 100px;
}

/* Un paragraphe posé sous une grille de cartes s'en détache. */
#contenu .moyens--grille + p {
	margin-top: 44px;
}

/* Un texte qui prolonge le bloc précédent (une adresse, une précision) se pose
   tout près de lui, au lieu de l'écart de 72 px entre deux sections. */
#contenu .info-block.suite {
	margin-top: 28px;
}

/* Un mot composé qui ne doit pas se couper : « e-mail » finissait sur deux
   lignes, « e- » d'un côté et « mail » de l'autre. */
#contenu .nb {
	white-space: nowrap;
}

#contenu a.alt__pill,
#contenu a.alt__pill:visited {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Fil de pastilles reliées, sur trois colonnes
   --------------------------------------------------------------------------
   Il remplace les trois pictogrammes illustrés posés sous l'introduction.
   Même composant que « Pourquoi passer par nous » de l'accueil.
   -------------------------------------------------------------------------- */
#contenu > .pqc {
	margin-top: 88px;
}

/* --------------------------------------------------------------------------
   Cartes : le style des trois portes de la page contact
   --------------------------------------------------------------------------
   Le texte des cartes est plus long qu'à la page contact et leurs titres
   passent parfois sur deux lignes. Chaque carte occupe donc quatre rangées
   d'une grille partagée (pictogramme, titre, texte, lien) : le texte de
   chaque carte part à la même hauteur que celui de sa voisine, et le lien se
   pose en bas de toutes.

   Les écarts entre rangées de cartes se prennent en marge basse et non en
   `gap`, parce qu'un `gap` s'appliquerait aussi entre les quatre rangées
   d'une même carte.
   -------------------------------------------------------------------------- */
#contenu .moyens--grille {
	gap: 0 16px;
	margin-top: 56px;
}

#contenu .moyens--grille .moyen {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	margin-bottom: 16px;
}

/* La grille fait déjà tenir les titres : le blanc de 32 px que `#contenu h3`
   leur laisse dessous n'a plus lieu d'être entre un titre et son texte. */
#contenu .moyens--grille .moyen__t {
	margin: 0 0 10px;
	font-size: 21px;
	line-height: 1.3;
}

#contenu .moyens--grille .moyen__p {
	margin: 0 0 18px;
}

#contenu .moyens--grille .moyen__v {
	align-self: end;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 0;
}

#contenu .moyen__v svg {
	flex: none;
	transition: transform 0.2s ease;
}

#contenu a.moyen:hover .moyen__v svg {
	transform: translateX(3px);
}

/* Sans lien : la carte présente un argument, elle ne mène nulle part. Ni
   relief ni bordure violette au survol. */
#contenu div.moyen:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--rp-trait, rgba(34, 45, 57, 0.1));
}

/* Le dernier paragraphe d'une carte sans lien n'a plus rien dessous : sa marge
   s'ajouterait au remplissage de la carte et la ferait paraître trop haute. */
#contenu .moyens--grille .moyen__p:last-child {
	margin-bottom: 0;
}

/* ---------- Deux cartes ----------
   Deux colonnes à toute largeur d'écran, jusqu'au téléphone. */
#contenu .moyens--paire {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Cartes de marque ----------
   Le logo d'un antivirus prend la place du pictogramme, dans la même
   rangée : les deux cartes restent alignées malgré des logos de formes
   très différentes. */
#contenu .moyen__logo {
	display: flex;
	align-items: center;
	height: 48px;
	margin-bottom: 16px;
}

#contenu .moyen__logo img {
	width: auto;
	height: auto;
	max-width: 190px;
	max-height: 36px;
}

/* Un logo carré (La Poste, Mondial Relay) prend la taille des pictogrammes des
   autres cartes, aux angles arrondis comme eux. */
#contenu .moyen__logo--carre img {
	max-height: 48px;
	border-radius: 12px;
}

/* ---------- Trois cartes ----------
   Comme les trois portes de la page contact : trois colonnes, puis une seule
   dès 900 px. À deux colonnes, la troisième carte resterait seule sur sa
   rangée. Voir la règle de tablette plus bas. */
#contenu .moyens--trois {
	gap: 0 16px;
}

/* ---------- Cinq cartes ----------
   Trois colonnes laisseraient un trou au bout de la deuxième rangée. Les
   cartes gardent la largeur des autres et les deux dernières se centrent sous
   les trois premières : une grille de six colonnes, chaque carte en prend
   deux. À deux colonnes (tablette), la cinquième se centre seule sur sa
   rangée. Téléphone : une seule colonne, comme toutes les grilles. */
@media screen and (min-width: 901px) {
	#contenu .moyens--grille.moyens--cinq {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	#contenu .moyens--grille.moyens--cinq .moyen {
		grid-column: span 2;
	}

	#contenu .moyens--grille.moyens--cinq .moyen:nth-child(4) {
		grid-column: 2 / span 2;
	}

	#contenu .moyens--grille.moyens--cinq .moyen:nth-child(5) {
		grid-column: 4 / span 2;
	}
}

@media screen and (min-width: 641px) and (max-width: 900px) {
	#contenu .moyens--grille.moyens--cinq {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	#contenu .moyens--grille.moyens--cinq .moyen {
		grid-column: span 2;
	}

	#contenu .moyens--grille.moyens--cinq .moyen:nth-child(5) {
		grid-column: 2 / span 2;
	}
}

/* ---------- Cartes de tarif ----------
   Un tarif par carte (les cours de la page Formation) : le pictogramme, le titre
   et le texte, puis le prix en grand sous un filet, puis le bouton principal du
   site sur toute la largeur. Les cartes partagent cinq rangées : le prix et le
   bouton partent à la même hauteur dans les deux. */
#contenu .tarifs-cartes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	margin: 56px 0 0;
	text-align: left;
}

#contenu .tarif {
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	box-sizing: border-box;
	padding: 26px 24px 24px;
	border: 1px solid var(--rp-trait, rgba(34, 45, 57, 0.1));
	border-radius: 18px;
	background: #fff;
}

#contenu .tarif__ico {
	display: grid;
	place-items: center;
	justify-self: start;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: var(--rp-gris, #f7f7f9);
	color: var(--rp-violet, #5f2eec);
}

#contenu .tarif__t {
	margin: 0 0 6px;
	font: 700 19px/1.3 "Poppins", sans-serif;
	color: var(--rp-encre, #222d39);
	text-align: left;
}

/* Variante : le titre à côté du pictogramme, sur une seule rangée (page
   Windows 11). Le pictogramme et le titre partagent la même ligne médiane. */
#contenu .tarif__tete {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

#contenu .tarif__tete .tarif__ico {
	flex: none;
	margin-bottom: 0;
}

#contenu .tarif__tete .tarif__t {
	flex: 1;
	min-width: 0;
	margin: 0;
}

#contenu .tarif__p {
	margin: 0;
	font-size: 14.5px;
	line-height: 23px;
	color: #5b6572;
	text-align: left;
}

#contenu .tarif__prix {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 20px 0 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(34, 45, 57, 0.08);
}

#contenu .tarif__prix b {
	font: 700 40px/1 "Poppins", sans-serif;
	letter-spacing: -0.02em;
	color: var(--rp-violet, #5f2eec);
}

/* Le dégradé du texte ne s'applique que si le navigateur sait le découper : à
   défaut, le prix reste en violet, lisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	#contenu .tarif__prix b {
		background: linear-gradient(95deg, #5f2eec 0%, #c670fe 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

/* Un tarif en toutes lettres (« Demi tarif ») se pose plus petit qu'un montant. */
#contenu .tarif__prix--texte b {
	font-size: 30px;
}

/* Prix centré dans la carte, sous son filet. */
#contenu .tarif__prix--centre {
	justify-content: center;
}

#contenu .tarif__prix small {
	font: 500 15px/1.3 "Poppins", sans-serif;
	color: #5b6572;
}

/* Le bouton principal du site (`.cta-btn`), sur toute la largeur de la carte. */
#contenu a.tarif__cta,
#contenu a.tarif__cta:visited {
	display: flex;
	width: 100%;
	color: #fff;
	text-decoration: none;
}

#contenu a.tarif__cta:hover,
#contenu a.tarif__cta:focus-visible {
	color: #fff;
	text-decoration: none;
}

@media screen and (max-width: 640px) {
	#contenu .tarifs-cartes {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40px;
	}

	#contenu .tarif {
		grid-row: auto;
		grid-template-rows: auto;
		margin-bottom: 16px;
	}

	/* Étroit, le libellé du bouton tient sur une ligne à 15 px ; sur un écran
	   plus étroit encore, il passe sur deux sans déformer le bouton. */
	#contenu a.tarif__cta {
		height: auto;
		min-height: 54px;
		padding: 12px 14px;
		font-size: 15px;
		text-align: center;
	}
}

/* Trois formules côte à côte (page Windows 11) : la liste de ce qui est compris
   s'ajoute entre le texte et le prix. Les cinq rangées de chaque carte (tête,
   texte, liste, prix, bouton) sont partagées : les prix et les boutons des trois
   formules partent à la même hauteur, quelle que soit la longueur des listes.
   Trois colonnes à partir de 901 px, puis une seule dans la colonne de lecture,
   comme les autres séries de trois. */
#contenu .tarif .moyen__liste {
	margin-top: 18px;
}

@media screen and (min-width: 901px) {
	#contenu .tarifs-cartes--trois {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width: 900px) {
	#contenu .tarifs-cartes--trois {
		grid-template-columns: minmax(0, 1fr);
		max-width: 640px;
		margin-right: auto;
		margin-left: auto;
	}

	#contenu .tarifs-cartes--trois .tarif {
		grid-row: auto;
		grid-template-rows: auto;
		margin-bottom: 16px;
	}
}

/* ---------- Cartes de prix ----------
   Une formule par carte : le pictogramme et le prix sur la même rangée, puis
   le titre, le texte et, quand il y en a une, la liste de ce qui est compris.
   Les rangées sont celles de la grille partagée : les titres, les textes et
   les listes de trois formules partent à la même hauteur. */
#contenu .moyens--prix .moyen {
	grid-template-columns: minmax(0, 1fr) auto;
}

#contenu .moyens--prix .moyen > * {
	grid-column: 1 / -1;
}

#contenu .moyens--prix .moyen > .moyen__ico {
	grid-column: 1;
}

#contenu .moyens--prix .moyen__prix {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	justify-self: end;
	margin-top: 9px;
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--rp-violet, #5f2eec);
	color: #fff;
	font: 600 14px/1 "Poppins", sans-serif;
	white-space: nowrap;
}

/* La liste de ce qui est compris : les pastilles cochées de la liste des blocs
   photo, en plus petit. Le site colore en violet gras tout `span` placé dans
   un `li` : la liste n'en porte donc aucun. */
#contenu .moyen__liste {
	display: grid;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

#contenu .moyen__liste li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 22px;
	color: #5b6572;
	list-style: none;
}

#contenu .moyen__liste li::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: #f1ecff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f2eec' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 13px no-repeat;
}

#contenu .moyen__liste b {
	color: var(--rp-encre, #222d39);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Encart : un passage qu'on ne veut pas voir manquer
   --------------------------------------------------------------------------
   Même fond que la porte « Appeler » de la page contact. Une ou deux fois par
   page, pas plus : à cinq encarts, plus rien ne ressort.
   -------------------------------------------------------------------------- */
#contenu .encart {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	box-sizing: border-box;
	margin: 56px 0 0;
	padding: 28px 30px;
	border: 1px solid rgba(95, 46, 236, 0.28);
	border-radius: 18px;
	background: linear-gradient(180deg, #fff 0%, #faf8ff 100%);
	text-align: left;
}

#contenu .encart__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--rp-violet, #5f2eec);
	color: #fff;
}

#contenu .encart__corps {
	flex: 1;
	min-width: 0;
}

#contenu .encart__corps p {
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 25px;
	color: #5b6572;
}

#contenu .encart__corps p:last-child {
	margin-bottom: 0;
}

#contenu .encart__corps b {
	color: var(--rp-encre, #222d39);
	font-weight: 600;
}

/* L'étiquette violette, en tête de l'encart : l'œil tombe d'abord sur la
   boîte, pas sur le texte qui la précède. Elle dit de quel cas il s'agit
   avant la première phrase, et l'encart se lit alors sans rien d'autre. Le
   sélecteur est plus long que celui des paragraphes de l'encart, sans quoi
   leur corps de 15,5 px et leur gris l'emporteraient. */
#contenu .encart__corps .encart__sur {
	position: relative;
	margin: 0 0 12px;
	padding-top: 16px;
	font: 600 12px/1 "Poppins", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rp-violet, #5f2eec);
}

#contenu .encart__sur::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 4px;
	border-radius: 4px;
	background-image: linear-gradient(230deg, #c9b6ff 0%, #9f7bf8 100%);
}

/* Le titre de l'encart garde, lui aussi, ses deux graisses. */
#contenu .encart__t {
	margin: 2px 0 12px;
	font: 400 24px/1.3 "Poppins", sans-serif;
	color: var(--rp-encre, #222d39);
	text-align: left;
}

#contenu .encart__t span {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Rubriques : des sections de texte, sans photographie
   --------------------------------------------------------------------------
   Les pages de commune et la page « Qui sommes-nous » alignent de longues
   sections de texte, chacune sous un pictogramme et un titre centré. Elles
   deviennent des lignes à deux colonnes : l'étiquette violette et son
   pictogramme à gauche, le titre et le texte à droite. Le regard trouve le
   sujet dans la marge avant d'avoir lu une phrase.
   -------------------------------------------------------------------------- */
#contenu .rubriques {
	margin-top: 96px;
	border-top: 1px solid var(--rp-trait, rgba(34, 45, 57, 0.1));
}

#contenu .rubrique {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 48px;
	padding: 44px 0;
	border-bottom: 1px solid var(--rp-trait, rgba(34, 45, 57, 0.1));
	text-align: left;
}

#contenu .rubrique__tete {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

#contenu .rubrique__ico {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--rp-gris, #f7f7f9);
	color: var(--rp-violet, #5f2eec);
}

#contenu .rubrique__sur {
	position: relative;
	margin: 0;
	padding-top: 16px;
	font: 600 12px/1 "Poppins", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rp-violet, #5f2eec);
}

#contenu .rubrique__sur::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 4px;
	border-radius: 4px;
	background-image: linear-gradient(230deg, #c9b6ff 0%, #9f7bf8 100%);
}

#contenu .rubrique__h {
	margin: 0 0 16px;
	font: 400 26px/34px "Poppins", sans-serif;
	color: var(--rp-encre, #222d39);
	text-align: left;
	text-wrap: balance;
}

#contenu .rubrique__h span {
	display: block;
	font-weight: 700;
}

#contenu .rubrique__corps p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 27px;
	color: #5b6572;
	text-align: left;
}

#contenu .rubrique__corps p:last-of-type {
	margin-bottom: 0;
}

/* La mise en avant verte du site, au poids que le texte gris lui laisse. */
#contenu .rubrique__corps b.highlight {
	color: var(--rp-violet, #5f2eec);
	font-weight: 700;
}

#contenu .rubrique__corps b {
	color: var(--rp-encre, #222d39);
	font-weight: 600;
}

#contenu .rubrique__corps .bubble {
	max-width: none;
	margin: 22px 0 0;
	text-align: left;
}

/* Des repères, pas des liens : le fond lavande de la pastille de prix de
   l accueil, sans le trait violet qui désigne ce sur quoi on peut cliquer. */
#contenu .rubrique__corps .bubble span {
	margin: 0 8px 8px 0;
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: #f1ecff;
	color: var(--rp-violet, #5f2eec);
	font-size: 14px;
	font-weight: 600;
}

#contenu .rubrique__corps .alt__liens {
	margin-top: 22px;
}

/* La pastille de prix de l'accueil, dans sa version lavande (celle des blocs
   `.blocs`, qui n'existe pas ici) : le prix est une information, pas un
   bouton plein. Elle mène à la page des tarifs. */
#contenu .alt .prix-pastille {
	background: var(--c-doux, #efe9ff);
	color: var(--c-accent, #5f2eec);
}

#contenu .alt a.prix-pastille:hover {
	background: rgba(95, 46, 236, 0.14);
	color: var(--rp-violet, #5f2eec);
}

/* Le focus au clavier prend le violet de la marque, partout où le site
   désigne une cible : cartes, pastilles de lien, boutons d'appel. */
#contenu a.moyen:focus-visible,
#contenu a.alt__pill:focus-visible,
#contenu a.prix-pastille:focus-visible,
#contenu a.cta-btn:focus-visible {
	outline: 2px solid var(--rp-violet, #5f2eec);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	#contenu .moyen__v svg {
		transition: none;
	}
}

/* La grille des tarifs appartient au titre qui la précède : à 72 px, elle
   s'en détachait comme une section de plus. */
#contenu .info-block + .pricelist {
	margin-top: 36px;
}

/* --------------------------------------------------------------------------
   Appel final : les deux boutons de l'accueil
   -------------------------------------------------------------------------- */
#contenu a.cta-btn,
#contenu a.cta-btn:visited {
	text-decoration: none;
}

#contenu a.cta-btn--rappel,
#contenu a.cta-btn--rappel:visited {
	color: #5f2eec;
}

#contenu a.cta-btn:not(.cta-btn--rappel),
#contenu a.cta-btn:not(.cta-btn--rappel):hover {
	color: #fff;
}

#contenu .accueil-actions--cta {
	margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Bascule entre deux vues (page Dépannage PC : prix de départ / grille complète)
   --------------------------------------------------------------------------
   Les onglets sont ceux de la page rappel (`.onglets--plein`, js/onglets.js).
   Le titre de la section est commun aux deux vues : la barre se pose juste sous
   lui, et seul l'affichage des prix change en dessous. */
#contenu .onglets {
	display: flex;
	margin: 36px auto 0;
}

@media screen and (min-width: 901px) {
	#contenu .onglets {
		width: fit-content;
	}
}

/* Le premier élément d'un panneau (les cartes, la grille) part 40 px sous la barre. */
#contenu [data-rp-panneau] > .liste-produits,
#contenu [data-rp-panneau] > .pricelist {
	margin-top: 40px;
}

/* L'adresse #tarifs et l'ouverture de la grille calent la section sous la barre
   de navigation flottante, pas derrière elle. */
#contenu #tarifs,
#contenu [data-rp-onglets] {
	scroll-margin-top: calc(var(--rp-nav-space, 108px) + 16px);
}

/* Sans script, la barre ne servirait à rien : les deux vues se lisent l'une sous
   l'autre. */
@media (scripting: none) {
	#contenu [data-rp-panneau][hidden] {
		display: block;
	}

	#contenu .onglets {
		display: none;
	}
}

/* ---------- Une page en plusieurs parties ----------
   La page Résolution de panne se rejoint par partie (#reparation, #bug), depuis
   la grille de Dépannage PC et depuis ses propres pastilles : la partie se cale
   sous la barre de navigation flottante, comme #tarifs plus haut. */
#contenu #reparation,
#contenu #bug {
	scroll-margin-top: calc(var(--rp-nav-space, 108px) + 16px);
}

/* Une pastille posée sous un renvoi de marque s'en détache : sans cela, elle
   touche le bas de la carte. */
#contenu a.renvoi-marque + .alt__liens {
	margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Tablette et téléphone
   -------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
	/* En une seule colonne, le bloc se range en colonne de lecture de 640 px,
	   centrée : plus large, les lignes dépassent quatre-vingt-dix caractères,
	   et la photo carrée occuperait tout l'écran d'une tablette. */
	#contenu .alt {
		max-width: 640px;
		margin-right: auto;
		margin-left: auto;
		gap: 28px;
		margin-top: 72px;
	}

	#contenu:has(.alt__txt) .info-block:not(.suite),
	#contenu:has(.alt__txt) .faq-rubrique {
		margin-top: 80px;
	}

	#contenu .info-block.suite {
		margin-top: 28px;
	}

	#contenu > .alt:first-child {
		margin-top: 40px;
	}

	#contenu .alt__visuel {
		aspect-ratio: 3 / 2;
	}

	#contenu .alt__h {
		font-size: 28px;
		line-height: 36px;
	}

	/* Six cartes sur une seule colonne, c'est un écran de défilement : on
	   garde deux colonnes tant qu'elles tiennent. */
	#contenu .moyens--grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Trois cartes : une seule colonne, dans la même colonne de lecture que
	   les blocs photo, comme les trois portes de la page contact. */
	#contenu .moyens--trois {
		grid-template-columns: minmax(0, 1fr);
		max-width: 640px;
		margin-right: auto;
		margin-left: auto;
	}

	#contenu .moyens--trois .moyen {
		grid-row: auto;
		grid-template-rows: auto;
	}

	/* Même colonne de lecture que les blocs photo. */
	#contenu .rubriques {
		max-width: 640px;
		margin-right: auto;
		margin-left: auto;
	}

	#contenu .rubrique {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 36px 0;
	}
}

@media screen and (max-width: 640px) {
	/* L'accueil range ses blocs en vignette à côté du titre. Les titres de
	   page sont plus longs, et la photo y compte : le bloc reprend la forme
	   qu'il a entre 640 et 900 px, la photo au-dessus du texte, tout centré
	   comme le reste des pages sur téléphone. */
	#contenu .alt {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		row-gap: 24px;
		margin-top: 56px;
		padding: 0;
		text-align: center;
	}

	#contenu:has(.alt__txt) .info-block:not(.suite),
	#contenu:has(.alt__txt) .faq-rubrique {
		margin-top: 64px;
	}

	#contenu .info-block.suite {
		margin-top: 24px;
	}

	#contenu .alt__txt {
		display: block;
	}

	#contenu .alt__visuel,
	#contenu .alt--inverse .alt__visuel {
		order: 0;
		grid-column: auto;
		grid-row: auto;
		align-self: auto;
		width: auto;
		height: auto;
		margin: 0;
		aspect-ratio: 3 / 2;
		border-radius: 18px;
	}

	#contenu .alt__sur {
		grid-column: auto;
		grid-row: auto;
		margin: 0 0 12px;
		padding-top: 14px;
		text-align: center;
	}

	#contenu .alt__sur::before {
		left: 50%;
		width: 32px;
		height: 3px;
		transform: translateX(-50%);
	}

	#contenu .alt__h {
		grid-column: auto;
		grid-row: auto;
		margin: 0 0 14px;
		font-size: 25px;
		line-height: 33px;
		text-align: center;
	}

	#contenu .alt__p {
		grid-column: auto;
		grid-row: auto;
		margin: 0 0 14px;
		font-size: 15px;
		line-height: 25px;
	}

	#contenu .alt__liste {
		margin-top: 20px;
	}

	#contenu .alt__liens {
		grid-column: auto;
		grid-row: auto;
		justify-content: center;
		margin-top: 20px;
	}

	#contenu > .pqc {
		margin-top: 52px;
	}

	#contenu .moyens--grille {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40px;
	}

	#contenu .moyens--grille .moyen {
		grid-row: auto;
		grid-template-rows: auto;
		margin-bottom: 12px;
	}

	/* Tout est centré dans la carte, le lien aussi : comme les trois portes
	   de la page contact sur téléphone. */
	#contenu .moyens--grille .moyen__v {
		justify-self: center;
		margin-top: 2px;
	}

	/* Carte de prix : une seule colonne, le prix sous le pictogramme. */
	#contenu .moyens--prix .moyen {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	#contenu .moyens--prix .moyen > .moyen__ico {
		grid-column: 1;
	}

	#contenu .moyens--prix .moyen__prix {
		grid-column: 1;
		grid-row: auto;
		align-self: auto;
		justify-self: center;
		margin: 0 0 14px;
	}

	#contenu .moyens--prix .moyen__liste {
		justify-self: stretch;
	}

	#contenu .encart {
		flex-direction: column;
		gap: 16px;
		padding: 22px 20px;
	}

	#contenu .encart__t {
		font-size: 22px;
		text-align: left;
	}

	#contenu .rubriques {
		margin-top: 48px;
	}

	/* Sur téléphone, tout se centre dans la rubrique, comme dans les blocs
	   photo et dans le reste des pages : le pictogramme, l'étiquette et son
	   trait, le titre, le texte, les étiquettes et les liens. */
	#contenu .rubrique {
		text-align: center;
	}

	#contenu .rubrique__tete {
		align-items: center;
		gap: 14px;
	}

	#contenu .rubrique__sur::before {
		left: 50%;
		width: 32px;
		height: 3px;
		transform: translateX(-50%);
	}

	#contenu .rubrique__h,
	#contenu .rubrique__corps p {
		text-align: center;
	}

	#contenu .rubrique__h {
		font-size: 22px;
		line-height: 30px;
	}

	#contenu .rubrique__corps .bubble {
		text-align: center;
	}

	#contenu .rubrique__corps .bubble span {
		margin: 0 4px 8px;
	}

	#contenu .rubrique__corps .alt__liens {
		justify-content: center;
	}

	#contenu .accueil-actions--cta {
		margin-top: 26px;
	}
}