/* =========================================================
   Page « La réparation » (reparation.php)
   Les étapes forment une frise verticale : un fil gris relie
   les numéros en chiffres romains (comme sur un cadran et
   sur la page Conseils). Photos posées sur un fond « papier »
   comme sur la page Dates clés. Bleu repris du menu du site.
   ========================================================= */

.reparation {
	--bleu: #428bca;
	--bleu-fonce: #2a6496;
	--bleu-pale: #f5f8fb;
	--papier: #f5f2ec;
	--trait: #e3ddd2;
	--filet: #eee;
	--texte: #333;
	--doux: #8a8178;
	--serif: Georgia, "Times New Roman", serif;
	max-width: 1100px;
	margin: 0 auto;
}

/* ---- Phrase d'introduction ---- */
.reparation-intro {
	max-width: 38em;
	margin: 0 auto 36px;
	text-align: center;
	font-size: 15px;
	line-height: 1.6;
	color: var(--doux);
}

/* =========================================================
   LA FRISE DES ÉTAPES
   Grand écran : photo | numéro | texte, en alternant les côtés.
   ========================================================= */
.etapes {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* le fil vertical qui relie les numéros */
.etapes::before {
	content: "";
	position: absolute;
	top: 30px;
	bottom: 30px;
	left: 50%;
	width: 1px;
	margin-left: -0.5px;
	background: var(--trait);
}

.etape {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 80px 1fr;
	grid-template-areas: "photo num texte";
	align-items: center;
	padding: 22px 0;
}
/* une étape sur deux : la photo passe à droite */
.etape:nth-child(even) {
	grid-template-areas: "texte num photo";
}

/* ---- Le numéro sur le fil ---- */
.etape-num {
	grid-area: num;
	justify-self: center;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 2px solid var(--bleu);
	border-radius: 50%;
	background: #fff;
	font-family: var(--serif);
	font-size: 17px;
	color: var(--bleu-fonce);
	letter-spacing: .02em;
	transition: background .2s, color .2s;
}
.etape:hover .etape-num {
	background: var(--bleu);
	color: #fff;
}

/* ---- La photo, posée sur un fond clair (passe-partout) ----
   Le cadre a toujours la même taille ; la photo y est
   centrée, entière, et jamais agrandie (donc jamais floue). */
.etape-photo {
	grid-area: photo;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 270px;
	margin: 0;
	padding: 16px;
	border-radius: 6px;
	background: var(--papier);
	transition: transform .2s, box-shadow .2s;
}
.etape-photo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	border-radius: 2px;
}
.etape:hover .etape-photo {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(60, 45, 20, .10);
}

/* ---- Le texte ---- */
.etape-texte {
	grid-area: texte;
	max-width: 30em;
	padding: 0 10px;
}
.etape:nth-child(even) .etape-texte {
	justify-self: end;
	text-align: right;
}
.etape-texte h2 {
	margin: 0 0 10px;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: normal;
	color: var(--texte);
}
.etape-texte p {
	margin: 0;
	line-height: 1.65;
	color: var(--texte);
}

/* ---- Apparition douce au défilement (voir le script) ---- */
.etape.a-reveler {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease-out, transform .6s ease-out;
}
.etape.a-reveler.visible {
	opacity: 1;
	transform: none;
}

/* =========================================================
   MOT DE LA FIN : garanties et contact
   ========================================================= */
.reparation-fin {
	margin: 26px auto 0;
	padding: 24px 20px;
	border-top: 1px solid var(--filet);
	text-align: center;
	color: var(--texte);
}
.reparation-garanties {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.reparation-garanties li {
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--papier);
	font-size: 14px;
	color: #555;
}
.reparation-garanties li::before {
	content: "\2713\00a0";
	color: var(--bleu);
	font-weight: bold;
}
.reparation-fin p {
	margin: 0;
	line-height: 1.8;
}
.reparation-fin a {
	font-weight: bold;
	color: var(--bleu);
	white-space: nowrap;
}
.reparation-fin a:hover,
.reparation-fin a:focus {
	color: var(--bleu-fonce);
}
.reparation-sep {
	margin: 0 10px;
	color: #bbb;
}

/* =========================================================
   TABLETTE : cadres un peu moins hauts
   ========================================================= */
@media (max-width: 991px) {
	.etape { grid-template-columns: 1fr 70px 1fr; padding: 18px 0; }
	.etape-photo { height: 220px; padding: 12px; }
	.etape-texte h2 { font-size: 20px; }
}

/* =========================================================
   SMARTPHONE : le fil passe à gauche, une seule colonne
   (numéro à gauche, puis photo et texte à droite).
   ========================================================= */
@media (max-width: 767px) {
	.reparation-intro { margin-bottom: 22px; font-size: 14px; }

	.etapes::before {
		left: 20px;
		top: 20px;
		bottom: 20px;
	}
	.etape,
	.etape:nth-child(even) {
		grid-template-columns: 40px 1fr;
		grid-template-areas:
			"num   photo"
			".     texte";
		column-gap: 14px;
		align-items: start;
		padding: 0 0 28px;
	}
	.etape-num {
		width: 40px;
		height: 40px;
		font-size: 14px;
	}
	.etape-photo {
		height: 200px;
		padding: 10px;
	}
	.etape-texte,
	.etape:nth-child(even) .etape-texte {
		justify-self: start;
		max-width: none;
		padding: 12px 0 0;
		text-align: left;
	}
	.etape-texte h2 { font-size: 18px; margin-bottom: 6px; }
	.etape-texte p { font-size: 14px; }

	.reparation-fin { padding: 20px 0; }
	.reparation-garanties li { font-size: 13px; }
	.reparation-sep { display: block; height: 0; overflow: hidden; }
}

/* =========================================================
   GRAND ÉCRAN : suit l'agrandissement du texte de style.css
   ========================================================= */
@media (min-width: 1500px) {
	.reparation { max-width: 1240px; }
	.reparation-intro { font-size: 17px; }
	.etape-photo { height: 300px; }
	.etape-num { width: 58px; height: 58px; font-size: 19px; }
	.etape-texte h2 { font-size: 25px; }
	.reparation-garanties li { font-size: 15px; }
}
@media (min-width: 1800px) {
	.reparation { max-width: 1320px; }
	.reparation-intro { font-size: 18px; }
	.etape-texte h2 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
	.etape-photo,
	.etape-num,
	.etape.a-reveler { transition: none; }
}