/* Gabarit d'article Listen-In (single.php) */

/*
 * Repères relevés au pixel sur design/…/ARTICLE.png (fenêtre de 1440 px, donc
 * 1 px de maquette = 1 px CSS) ; les tailles de police sont déduites de la
 * boîte d'encre des chaînes de la maquette comparée à Jost rendu par le
 * navigateur.
 *
 *   bande jaune      : haut du titre de page à 127 px du haut de la bande,
 *                      212 px sous la carte ;
 *   carte blanche    : x = 186 → 1253, soit exactement --ww-container ;
 *   colonne de texte : 743 px, de x = 375 à x = 1118 — elle n'est pas centrée
 *                      dans la carte. La gouttière droite vaut la largeur du
 *                      bandeau « LESS » (136 px), qui vient s'y loger et
 *                      commence donc pile où le texte s'arrête ;
 *   titre de page    : « Our news » Jost 700 / 70 px, bleu #0101D5 ;
 *   date             : 16 px ; rubrique : 20 px ; Jost 400, interligne 1,35 ;
 *   titre d'article  : Jost 700 / 70,5 px, interligne 0,98, deux lignes ;
 *   chapô            : Jost 400 / 40 px, justifié ;
 *   image d'en-tête  : 743 × 484 px (rapport 743/484), tramée, découpée en
 *                      zigzag en haut et en bas (voir plus bas) ;
 *   corps            : Jost 400 / 30 px, interligne 1,43, justifié,
 *                      41 px entre les paragraphes ;
 *   bandeau « LESS » : 136 × 60 px, bleu clair, Jost 400 / 30 px, collé à
 *                      l'angle bas-droit de la carte.
 *
 * Tout est exprimé en vw borné (clamp) : les valeurs ci-dessus sont atteintes
 * à 1440 px et gelées au-delà, la carte étant de toute façon plafonnée par
 * --ww-container.
 */

.ww-li-article {
	/*
	 * Les deux retraits de la carte, en px et non en pourcentage : le bandeau
	 * « LESS » les reprend (largeur et marge négative) pour se loger dans la
	 * gouttière droite, et une marge en pourcentage se calculerait sur la
	 * colonne de texte et non sur la carte.
	 */
	--ww-li-article-pad-start: clamp(20px, 13.1vw, 189px);
	--ww-li-article-gutter: clamp(20px, 9.45vw, 136px);

	/* Marge latérale : --ww-gutter, mais descendue à 16 px sur mobile comme la
	   maquette téléphone (la carte y va d'un bord à l'autre). */
	padding: clamp(40px, 8.13vw, 117px) clamp(16px, 4vw, 40px) clamp(56px, 14.7vw, 212px);
	background: var(--ww-color-primary);
}

.ww-li-article__wrap {
	max-width: var(--ww-container, 1068px);
	margin-inline: auto;
}

/* Titre de page « Our news » : bleu, sur la grille, et lien vers la liste. */
.ww-li-article__back {
	display: block;
	width: max-content;
	max-width: 100%;
	margin: 0 0 clamp(20px, 2.5vw, 36px);
	font-family: var(--ww-font-display);
	font-weight: 700;
	font-size: clamp(38px, 4.86vw, 70px);
	line-height: 1.02;
	color: var(--ww-color-ink, var(--ww-color-dark));
	text-decoration: none;
	transition: color var(--ww-duration, 0.2s) var(--ww-ease, ease);
}

.ww-li-article__back:hover,
.ww-li-article__back:focus-visible {
	color: var(--ww-color-highlight, #ff9300);
}

/* Carte blanche ----------------------------------------------------------- */

/* Aucun retrait en bas : le bandeau « LESS » forme l'angle de la carte. */
.ww-li-article__card {
	padding: clamp(28px, 4.65vw, 67px) var(--ww-li-article-gutter) 0 var(--ww-li-article-pad-start);
	background: var(--ww-color-light);
	color: var(--ww-color-dark);
}

/* Date au-dessus de la rubrique, cette dernière plus grande (maquette). */
.ww-li-article__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--ww-font-sans);
	font-weight: 400;
	line-height: 1.35;
	color: inherit;
}

.ww-li-article__date {
	font-size: clamp(13px, 1.11vw, 16px);
}

.ww-li-article__kind {
	font-size: clamp(16px, 1.4vw, 20px);
}

.ww-li-article__title {
	margin: clamp(14px, 2.08vw, 30px) 0 0;
	font-family: var(--ww-font-display);
	font-weight: 700;
	font-size: clamp(36px, 4.9vw, 70.5px);
	line-height: 0.98;
	color: inherit;
	overflow-wrap: break-word;
}

/* Justifié comme le corps sur la maquette (les blancs de la 1re ligne y sont
   nettement dilatés) ; l'alignement repasse à gauche sous 700 px. */
.ww-li-article__lead {
	margin: clamp(10px, 1.1vw, 15px) 0 0;
	font-family: var(--ww-font-sans);
	font-weight: 400;
	font-size: clamp(22px, 2.8vw, 40px);
	line-height: 1.05;
	color: inherit;
	text-align: justify;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Image d'en-tête ---------------------------------------------------------- */

/*
 * Découpe reprise de l'export Figma design/…/Vector-2.svg (le cadre de la
 * carte percé du trou de l'image) : bords gauche et droit droits, bords haut
 * et bas en zigzag de 8 dents (période 12,5 % de la largeur, amplitude 8,5 %
 * de la hauteur). Les sommets du bord haut et les pointes du bord bas sont en
 * phase : la découpe est la plus haute au milieu de chaque dent.
 *
 * Le rapport 743/484 est fixé pour que ces pourcentages redessinent toujours
 * la même dent, quelle que soit la largeur de l'écran.
 */
.ww-li-article__hero {
	position: relative;
	margin: clamp(10px, 1.03vw, 14px) 0 0;
	aspect-ratio: 743 / 484;
	clip-path: polygon(
		0% 8.5%, 6.25% 0%, 12.5% 8.5%, 18.75% 0%, 25% 8.5%, 31.25% 0%,
		37.5% 8.5%, 43.75% 0%, 50% 8.5%, 56.25% 0%, 62.5% 8.5%, 68.75% 0%,
		75% 8.5%, 81.25% 0%, 87.5% 8.5%, 93.75% 0%, 100% 8.5%,
		100% 91.5%, 93.75% 100%, 87.5% 91.5%, 81.25% 100%, 75% 91.5%,
		68.75% 100%, 62.5% 91.5%, 56.25% 100%, 50% 91.5%, 43.75% 100%,
		37.5% 91.5%, 31.25% 100%, 25% 91.5%, 18.75% 100%, 12.5% 91.5%,
		6.25% 100%, 0% 91.5%
	);

	/*
	 * Effet tramé, même mécanique que le pavé photo du bloc « histoire »
	 * (assets/css/blocks/li-story.css) : la photo est éclaircie sur du blanc et
	 * légèrement floutée, une grille de points lui est multipliée par-dessus,
	 * puis un contraste sur l'ensemble écrase les tons — la taille des points
	 * suit alors la luminosité de la photo.
	 *
	 * Trois écarts avec le bloc « histoire », relevés sur la maquette :
	 *   - la trame de l'article reste en COULEURS : le contraste travaillant
	 *     canal par canal, un même point donne un rond rouge, vert, jaune ou
	 *     noir selon la teinte, comme la trame RVB de ARTICLE.png ;
	 *   - le contraste y est modéré (4 et non 14) : la maquette garde des tons
	 *     moyens, un seuillage dur noierait tout le feuillage ;
	 *   - la maille fait 5 px. La trame de la maquette est un tramage ordonné
	 *     de pavés de 2 px sur une maille de 10 px (mesurée par
	 *     autocorrélation) ; hors de portée d'un dégradé CSS, une maille de
	 *     5 px en restitue le grain et le niveau de détail.
	 *
	 * Réglages calés en comparant la moyenne RVB, la part de noir et la part de
	 * blanc de l'image rendue à celles du même cadrage sur ARTICLE.png.
	 *
	 * La carte est blanche : le multiply final du bloc « histoire », qui sert à
	 * imprimer la trame sur le pavé orange, n'a pas d'objet ici.
	 */
	background: #fff;
	filter: contrast(4);
}

.ww-li-article__hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(0.5px);
	opacity: 0.55;
	transform: scale(1.02);
}

/* Le point : noyau noir minuscule, montée rapide vers le gris moyen puis lente
   vers le blanc — un ton clair ne garde ainsi qu'un point fin. */
.ww-li-article__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at center, #000 0, #000 6%, #808080 20%, #fff 94%, #fff 100%);
	background-size: 5px 5px;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Corps ------------------------------------------------------------------- */

.ww-li-article__body {
	display: flex;
	flex-direction: column;
	gap: 1.35em;
	padding: clamp(28px, 4.86vw, 70px) 0 0;
	font-family: var(--ww-font-sans);
	font-weight: 400;
	font-size: clamp(20px, 2.1vw, 30px);
	line-height: 1.43;
	color: inherit;
}

/* L'espacement vertical est porté par le gap du conteneur. */
.ww-li-article__body > * {
	margin: 0;
}

/* Justifié sans césure, comme la maquette (et comme le bloc « histoire ») ;
   sous 700 px l'alignement repasse à gauche, voir plus bas. */
.ww-li-article__body p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-align: justify;
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: break-word;
}

.ww-li-article__body strong,
.ww-li-article__body b {
	font-weight: 600;
}

.ww-li-article__body a {
	color: var(--ww-color-ink, var(--ww-color-dark));
}

.ww-li-article__body h2,
.ww-li-article__body h3,
.ww-li-article__body h4 {
	font-family: var(--ww-font-display);
	font-weight: 700;
	line-height: 1.15;
	color: inherit;
}

.ww-li-article__body h2 {
	font-size: clamp(28px, 2.9vw, 42px);
}

.ww-li-article__body h3 {
	font-size: clamp(24px, 2.4vw, 34px);
}

.ww-li-article__body h4 {
	font-size: inherit;
}

.ww-li-article__body ul,
.ww-li-article__body ol {
	padding-left: 1.2em;
}

.ww-li-article__body li + li {
	margin-top: 0.35em;
}

.ww-li-article__body blockquote {
	padding-left: 1em;
	border-left: 4px solid var(--ww-color-accent);
	font-weight: 500;
}

.ww-li-article__body img {
	max-width: 100%;
	height: auto;
}

.ww-li-article__body figcaption {
	margin-top: 0.5em;
	font-size: 0.75em;
	color: var(--ww-color-muted, #9b9b9b);
}

/*
 * Bandeau « LESS » : pavé bleu clair de 136 × 60 px posé dans l'angle bas-droit
 * de la carte. Il occupe très exactement la gouttière droite — sa marge droite
 * négative lui fait traverser le retrait pour affleurer le bord, et la carte
 * n'a pas de retrait en bas — sans jamais quitter le flux.
 *
 * Sous 700 px la gouttière tombe à 20 px : min-width reprend alors la main et
 * le pavé mord sur la colonne de texte, toujours collé à l'angle.
 */
.ww-li-article__less {
	display: grid;
	place-items: center;
	width: max-content;
	/* Au moins la gouttière : le pavé la remplit exactement. */
	min-width: max(112px, var(--ww-li-article-gutter));
	min-height: clamp(44px, 4.2vw, 60px);
	/* Peut occuper le contenu et la gouttière, jamais plus. */
	max-width: calc(100% + var(--ww-li-article-gutter));
	margin: clamp(48px, 8vw, 115px) calc(var(--ww-li-article-gutter) * -1) 0 auto;
	padding-inline: 12px;
	background: var(--ww-color-accent);
	color: var(--ww-color-dark);
	font-family: var(--ww-font-sans);
	font-weight: 400;
	font-size: clamp(18px, 2.1vw, 30px);
	line-height: 1.2;
	text-decoration: none;
	transition: filter var(--ww-duration, 0.2s) var(--ww-ease, ease);
}

.ww-li-article__less:hover,
.ww-li-article__less:focus-visible {
	background: var(--ww-color-accent);
	color: var(--ww-color-dark);
	filter: brightness(0.95);
}

/* Responsive ---------------------------------------------------------------- */

/*
 * Les clamp ci-dessus donnent déjà les valeurs mobiles de la maquette
 * (titre 36 px, chapô 22 px, corps 20 px, carte à 16 px du bord) ; ne restent
 * ici que les réglages qu'ils ne peuvent pas exprimer.
 */
@media (max-width: 700px) {
	.ww-li-article {
		/* Les retraits proportionnels laisseraient une colonne trop étroite. */
		--ww-li-article-pad-start: 20px;
		--ww-li-article-gutter: 20px;
	}

	.ww-li-article__lead {
		line-height: 1.2;
		text-align: left;
	}

	.ww-li-article__body {
		line-height: 1.5;
	}

	/* Colonne étroite : la justification y creuse des rivières. */
	.ww-li-article__body p {
		text-align: left;
	}

	/* Image deux fois plus petite : trame plus fine, sinon les points se
	   voient plus que la photo. */
	.ww-li-article__hero::after {
		background-size: 3px 3px;
	}
}