/*
 * La mise en forme d'un article de blog, 30/09/2026.
 *
 * Demande de Remy : « comme la page d'accueil, faut que ce soit design », sans
 * toucher a la structure des titres. Tout se fait donc au rendu, le contenu en
 * base n'est pas modifie, et les treize articles en profitent d'un coup.
 *
 * Le vocabulaire est celui de l'accueil : titres centres soulignes d'un trait
 * bleu de 56 px, texte pose sur une carte blanche au bord fin sur le fond bleu
 * tres pale, rayon de 14 px, action en bleu 300.
 *
 * POURQUOI UN FICHIER A PART : il n'est charge que sur un article
 * (is_singular( 'post' ), voir functions.php), et il garde le blog hors de
 * theme.css, que les fiches produit remanient en parallele.
 *
 * CE QUI NE BOUGE PAS (Le blog, regles editoriales, § 8) : la colonne de
 * lecture reste a 880 px et le texte a 17 px. La carte ajoute sa marge AUTOUR
 * de la colonne (box-sizing: content-box), elle ne la retrecit pas.
 */

/* --- L'en-tete : titre centre et souligne, comme les titres de l'accueil --- */

.ap-article__entete {
	margin: 8px auto 32px;
	max-width: 880px;
	text-align: center;
}

.ap-article__entete .ap-titre {
	margin: 0 0 14px;
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
	font-weight: 500;
	line-height: 1.12;
}

.ap-article__entete .ap-titre::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 0.4em auto 0;
	border-radius: 2px;
	background: var(--ap-bleu);
}

.ap-article__entete .ap-article__meta {
	display: inline-flex;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ap-bleu-050);
	color: var(--ap-bleu-700);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

/* --- La couverture ----------------------------------------------------------- */

.ap-article__image {
	margin: 0 0 -56px;
	position: relative;
	z-index: 0;
}

.ap-article__image img {
	display: block;
	box-shadow: 0 18px 40px rgba(20, 30, 45, 0.10);
}

/* --- La carte de lecture ----------------------------------------------------
 *
 * Elle remonte de 56 px sur le bas de la couverture : l'image et le texte se
 * lisent comme un seul objet, au lieu d'un bandeau suivi d'un mur de texte.
 */

.ap-article .ap-prose {
	position: relative;
	z-index: 1;
	box-sizing: content-box;
	padding: 48px 56px 56px;
	background: var(--ap-carte);
	border: 1px solid var(--ap-trait);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(20, 30, 45, 0.05);
	line-height: 1.75;
}

/* Le chapeau : le premier paragraphe, un cran plus grand, filet bleu a gauche. */
.ap-article .ap-prose > p:first-child {
	padding-left: 20px;
	border-left: 3px solid var(--ap-bleu);
	color: #33444d;
	font-size: 1.1em;
	line-height: 1.7;
}

/* --- Les intertitres ---------------------------------------------------------
 *
 * Le h2 ouvre une partie : filet fin au-dessus, trait bleu dessous, comme les
 * titres de section de l'accueil mais cale a gauche, parce qu'il se lit dans
 * le fil du texte. Le h3 etait un 1,3rem maigre qui se perdait dans le corps :
 * il gagne du corps, de la graisse et un repere bleu.
 */

.ap-article .ap-prose h2 {
	margin-top: 2.2em;
	padding-top: 1.4em;
	border-top: 1px solid var(--ap-trait);
	font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.05rem);
	font-weight: 500;
	line-height: 1.18;
}

.ap-article .ap-prose h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 0.45em;
	border-radius: 2px;
	background: var(--ap-bleu);
}

.ap-article .ap-prose > p:first-child + h2 {
	margin-top: 1.8em;
}

.ap-article .ap-prose h3 {
	position: relative;
	margin-top: 1.9em;
	padding-left: 22px;
	color: var(--ap-bleu-800);
	font-size: 1.62rem;
	font-weight: 600;
	line-height: 1.25;
}

.ap-article .ap-prose h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ap-bleu);
	box-shadow: 0 0 0 4px var(--ap-bleu-100);
}

.ap-article .ap-prose h2 + h3 {
	margin-top: 1.2em;
}

.ap-article .ap-prose h2 + p,
.ap-article .ap-prose h3 + p {
	margin-top: 0.7em;
}

/* --- Le texte ---------------------------------------------------------------- */

.ap-article .ap-prose strong {
	color: var(--ap-encre);
	font-weight: 600;
}

.ap-article .ap-prose a {
	color: var(--ap-bleu-600);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--ap-bleu-200);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.15s, text-decoration-color 0.15s;
}

.ap-article .ap-prose a:hover,
.ap-article .ap-prose a:focus-visible {
	color: var(--ap-bleu-700);
	text-decoration-color: var(--ap-bleu-400);
}

/* Les boutons d'appel gardent leur habit de bouton. */
.ap-article .ap-prose a.ap-bouton {
	text-decoration: none;
}

.ap-article .ap-prose ul li::marker {
	color: var(--ap-bleu-400);
}

/* --- Articles precedent et suivant : les cartes de l'accueil ----------------- */

.ap-article__voisins {
	border-top: 0;
	padding-top: 0;
}

.ap-article__voisin {
	transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.ap-article__voisin:hover {
	transform: translateY(-2px);
	border-color: var(--ap-bleu-200);
	box-shadow: 0 12px 28px rgba(20, 30, 45, 0.08);
}

/* --- Telephone ----------------------------------------------------------------
 *
 * Sous 720 px la carte disparait : sa marge prendrait 40 px a une colonne qui
 * n'en a que 335. Le texte revient a plat sur le fond, les reperes (trait,
 * pastille, filet du chapeau) restent.
 */
@media (max-width: 720px) {

	.ap-article__image {
		margin-bottom: 24px;
	}

	.ap-article .ap-prose {
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		line-height: 1.7;
	}

	.ap-article .ap-prose > p:first-child {
		padding-left: 14px;
		font-size: 1.05em;
	}

	.ap-article .ap-prose h3 {
		font-size: 1.4rem;
		padding-left: 20px;
	}
}