/* =========================================================
   Page « Conseils » (conseils.php)
   Reprend les codes du reste du site : même police, texte
   gris foncé, libellés en gras (comme « Adresse : »), bleu
   des liens du menu, filets gris clair, photos sans cadre.
   ========================================================= */

.conseils {
	--bleu: #428bca;
	--filet: #eee;
	--texte: #333;
	--discret: #777;
	max-width: 1180px;
	margin: 0 auto;
}

/* =========================================================
   INTRODUCTION : photos à gauche, texte à droite
   (même disposition que la page Horloger)
   ========================================================= */
.conseils-intro {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 40px;
	align-items: center;
	padding: 6px 0 30px;
	border-bottom: 1px solid var(--filet);
}
.conseils-intro-photos {
	display: flex;
	gap: 14px;
}
.conseils-intro-photos figure {
	margin: 0;
}
.conseils-intro-photos img {
	display: block;
	width: 140px;
	height: 186px;
	-o-object-fit: cover;
	object-fit: cover;
}
.conseils-intro-photos figcaption {
	padding-top: 6px;
	font-size: 13px;
	text-align: center;
	color: var(--discret);
}
.conseils-intro h2 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 500;
	color: var(--texte);
}
.conseils-intro p {
	margin: 0 0 10px;
	max-width: 46em;
	line-height: 1.6;
	color: var(--texte);
}

/* =========================================================
   LES CONSEILS
   Grand écran : deux colonnes séparées par un filet
   (le texte coule de gauche à droite, dans l'ordre).
   ========================================================= */
.conseils-liste {
	padding-top: 30px;
}
@media (min-width: 992px) {
	.conseils-liste {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 70px;
		-moz-column-gap: 70px;
		column-gap: 70px;
		-webkit-column-rule: 1px solid var(--filet);
		-moz-column-rule: 1px solid var(--filet);
		column-rule: 1px solid var(--filet);
	}
}
.conseil {
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
	page-break-inside: avoid;
	padding-bottom: 28px;
}
.conseil h2 {
	display: flex;
	align-items: baseline;
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 500;
	color: var(--texte);
}
/* Numéro en chiffres romains, dans le bleu du menu */
.conseil-num {
	flex: 0 0 auto;
	min-width: 2.4em;
	font-size: 16px;
	color: var(--bleu);
}
.conseil p,
.conseil dl,
.conseil ol {
	margin: 0 0 10px 38px; /* aligné sur le titre */
	line-height: 1.6;
	color: var(--texte);
}
.conseil > :last-child {
	margin-bottom: 0;
}

/* La phrase à retenir : en gras */
.conseil .conseil-retenir {
	font-weight: bold;
}

/* Mise en garde : « Attention : » en gras */
.conseil-attention::before {
	content: "Attention\00a0: ";
	font-weight: bold;
	color: #a94442;
}

/* Remarque complémentaire, un ton plus discret */
.conseil .conseil-suite {
	color: #666;
}

/* Encadré vers un outil du site (ex. : vérifier le calage) */
.conseil .conseil-outil {
	margin-top: 14px;
	padding: 10px 14px;
	background: #f5f8fb;
	border-left: 3px solid var(--bleu);
}
.conseil-outil a {
	display: inline-block;
	margin-top: 4px;
	font-weight: bold;
	color: var(--bleu);
}
.conseil-outil a:hover,
.conseil-outil a:focus {
	color: #2a6496;
}

/* « Comtoise : … » / « Pendule : … » (comme « Adresse : ») */
.conseil-details dt {
	display: inline;
	font-weight: bold;
}
.conseil-details dt::after {
	content: "\00a0: ";
}
.conseil-details dd {
	display: inline;
	margin: 0;
}
.conseil-details dd::after {
	content: "";
	display: block;
	margin-bottom: 4px;
}

/* Étapes numérotées 1. 2. 3. */
.conseil .conseil-etapes {
	padding-left: 20px;
}
.conseil-etapes li {
	padding-left: 2px;
}

/* =========================================================
   MOT DE LA FIN
   ========================================================= */
.conseils-fin {
	margin: 6px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--filet);
	text-align: center;
	color: var(--texte);
}

/* =========================================================
   TABLETTE
   ========================================================= */
@media (max-width: 991px) {
	.conseils-intro { gap: 28px; }
	.conseils-intro-photos img { width: 118px; height: 158px; }
}

/* =========================================================
   SMARTPHONE : photos au-dessus du texte
   ========================================================= */
@media (max-width: 767px) {
	.conseils-intro {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 0 0 24px;
	}
	.conseils-intro-photos { justify-content: center; }
	.conseils-intro-photos img { width: 120px; height: 160px; }
	.conseils-intro h2 { font-size: 18px; }

	.conseils-liste { padding-top: 24px; }
	.conseil { padding-bottom: 22px; }
	.conseil h2 { font-size: 18px; }
	.conseil-num { font-size: 15px; min-width: 2.2em; }
	.conseil p,
	.conseil dl,
	.conseil ol { margin-left: 0; }
	.conseil .conseil-etapes { padding-left: 20px; }
}

/* =========================================================
   GRAND ÉCRAN : suit l'agrandissement du texte de style.css
   ========================================================= */
@media (min-width: 1500px) {
	.conseils { max-width: 1300px; }
	.conseils-intro-photos img { width: 158px; height: 210px; }
	.conseils-intro h2,
	.conseil h2 { font-size: 22px; }
	.conseil-num { font-size: 17px; }
	.conseil p,
	.conseil dl,
	.conseil ol { margin-left: 41px; }
}
@media (min-width: 1800px) {
	.conseils { max-width: 1400px; }
	.conseils-intro h2,
	.conseil h2 { font-size: 24px; }
}