/**
 * Page article 2026 : en-tête (titre, métas), visuel en colonne, chapô, sommaire mobile, encarts auteur, confort de lecture.
 * Chargé sur tout le site : la navigation AJAX remplace le contenu sans recharger les feuilles de style.
 * Formes #wr-visuel, #wr-vignette et #wr-avatar : img/formes-2026.svg (prototype-fond/formes/article_2026.py).
 */

/* Lecture */
.article-2026.main-center .article-content-wrapper{
	color:#1a2a30;
	padding-bottom:3rem;
}
.article-2026 .texte ::selection{
	background:#36bcd3;
	color:#06171c;
}
.article-2026 .texte h2,
.article-2026 .texte h3,
.article-2026 .texte h4{
	scroll-margin-top:1.5rem;
	text-wrap:balance;
}
.article-2026 .texte * + h2{
	margin-top:3.5rem;
}
.article-2026 .texte a{
	color:#00717a;
	text-decoration-thickness:1px;
	text-underline-offset:.18em;
}
.article-2026 .texte a:hover{
	text-decoration-thickness:2px;
}
.article-2026 .texte a:focus-visible,
.sommaire-mobile summary:focus-visible{
	outline:2px solid #36bcd3;
	outline-offset:2px;
	border-radius:2px;
}
.article-2026 .article-content-wrapper p > code,
.article-2026 .article-content-wrapper li > code{
	padding:.1em .35em;
	margin:0 1px;
	border-radius:3px;
	font-size:.88em;
	overflow-wrap:anywhere;
}

/* Fond blanc du corps de l'article : couleur unie découpée par un polygone, au lieu d'un SVG étiré.
   Safari iOS limite la taille des images de fond : sur un article de 7 000 px, le bas du SVG n'était plus peint.
   Même silhouette que le tracé d'origine (bords légèrement irréguliers). Le polygone descend de 20 px sous
   le bloc pour dessiner lui-même la pointe blanche qui était dans le fond du titre des commentaires :
   deux formes bord à bord laissaient voir une ligne du fond entre elles. */
.article-2026 .article-content-wrapper:after{
	bottom:-20px;
	background-image:none;
	background-color:rgba(255,255,255,.9);
	clip-path:polygon(0 0, 100% 0, 97% 20%, 98% 50%, 100% 70%, 98% 90%, 100% calc(100% - 20px), 70% 100%, 20% calc(100% - 10px), 0 calc(100% - 20px), 2% 80%, 0 60%, 3% 40%, .2% 30%, 2% 10%);
}
/* Titre des commentaires : seulement sa forme sombre, la pointe blanche est dessinée par le bloc d'article. */
.article-2026 .comments-list header{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="100" viewBox="0 0 1 1"><path d="M0 1 L1 1 L0.95521 0.4625 Q0.95 0.4 0.94146 0.40732 L0.60854 0.69268 Q0.6 0.7 0.59162 0.71676 L0.50838 0.88324 Q0.5 0.9 0.49142 0.89809 L0.05858 0.80191 Q0.05 0.8 0.04214 0.83145 L0 1Z" fill="%2303050f"/></svg>');
}

/* En-tête : titre et métas. Le visuel est dans la colonne de gauche ; sans colonne (mobile), il revient ici. */
.article-entete{
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	column-gap:1.25rem;
	align-items:center;
}
.article-entete h1{
	grid-column:1;
	text-wrap:balance;
}
.article-metas{
	grid-column:1;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	row-gap:.15rem;
	margin-top:1rem;
	font-size:.95rem;
	line-height:1.5;
	color:#2f4a53;
}
.article-metas > *{
	white-space:nowrap;
}
/* Le séparateur suit l'élément : un retour à la ligne ne laisse pas de « · » en début de ligne. */
.article-metas > :not(:last-child)::after{
	content:'·';
	margin:0 .55rem;
	font-weight:800;
	color:#5f8590;
}
.texte .article-metas a{
	display:inline-block;
	/* Cible tactile d'au moins 24 px de haut (WCAG 2.5.8), sans changer l'interligne visible. */
	padding:2px 0;
	color:#00717a;
	font-weight:600;
	text-decoration:none;
}
.texte .article-metas a:hover{
	text-decoration:underline;
}
.article-metas .article-metas__categories{
	white-space:normal;
}
/* Sur bureau, l'auteur est présenté dans la colonne de gauche. */
.article-metas__auteur{
	display:none;
	align-items:center;
	gap:.45rem;
	font-weight:600;
	color:#1a2a30;
}
.texte img.article-metas__avatar{
	width:28px;
	height:28px;
	clip-path:url(#wr-avatar);
}

/* Vignette : le visuel dans une forme de biais. */
.article-visuel{
	position:relative;
	width:168px;
	margin:0;
}
.article-visuel--entete{
	display:none;
}
.auteur-carte .article-visuel{
	margin-bottom:2.5rem;
}
.article-visuel__cadre{
	position:relative;
	display:block;
	aspect-ratio:7 / 9;
	background-color:var(--visuel-fond, #0b2530);
	clip-path:url(#wr-vignette);
	overflow:hidden;
}
.article-visuel__img{
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
}

/* Chapô */
.texte .article-entete + p.chapo,
.texte .article-entete + p{
	margin-top:2.25rem;
}
.texte p.chapo{
	font-size:1.35rem;
	line-height:1.6;
	color:#0d3640;
	text-wrap:pretty;
}

/* Encarts (blockquote) : sur ce blog ce sont surtout des apartés et des remarques, pas des citations.
   Dalle cyan pâle découpée de biais comme les blocs du site, texte droit aligné à gauche
   (cinq lignes centrées en italique se lisaient mal), plus d'accolade étirée. */
.article-2026 .texte blockquote{
	margin:2rem 0;
	padding:1.4rem 1.75rem 1.6rem;
	background:rgba(54,188,211,.14);
	clip-path:url(#wr-visuel);
	text-align:left;
	font-style:normal;
	font-size:1.1rem;
	line-height:1.65;
	color:#0d3640;
	text-wrap:pretty;
}
.article-2026 .texte blockquote:before{
	content:none;
}
.article-2026 .texte blockquote p + p{
	margin-top:.75rem;
}

/* Sommaire repliable, pour les écrans sans colonne latérale. */
.sommaire-mobile{
	display:none;
	margin-top:1.75rem;
	padding:.25rem 1.25rem;
	background:#0b2530;
	border-radius:6px;
	color:#fff;
}
.sommaire-mobile summary{
	display:flex;
	align-items:center;
	justify-content:space-between;
	min-height:44px;
	font-family:'Bebas', sans-serif;
	font-size:1.5rem;
	line-height:1;
	cursor:pointer;
	list-style:none;
}
.sommaire-mobile summary::-webkit-details-marker{
	display:none;
}
.sommaire-mobile summary::after{
	content:'';
	width:.5rem;
	height:.5rem;
	margin-right:.25rem;
	border-right:2px solid #36bcd3;
	border-bottom:2px solid #36bcd3;
	transform:rotate(45deg) translateY(-25%);
	transition:transform .2s ease-out;
}
.sommaire-mobile[open] summary::after{
	transform:rotate(-135deg) translateY(-25%);
}
.sommaire-mobile ol{
	padding:.25rem 0 1rem;
}
.texte .sommaire-mobile li{
	padding-left:0;
	font-size:.95rem;
	line-height:1.4;
}
.texte .sommaire-mobile li::before{
	content:none;
}
.sommaire-mobile .level3{
	padding-left:1.25rem;
}
.texte .sommaire-mobile a{
	display:block;
	padding:.4rem 0;
	color:#cfe3e8;
	text-decoration:none;
}
.sommaire-mobile .title_lvl{
	color:#36bcd3;
}

/* Avatar découpé de biais, comme les autres formes du site. */
.auteur-avatar-cadre{
	display:block;
	flex:none;
	width:96px;
	height:96px;
}
.texte img.auteur-avatar,
.auteur-avatar-cadre img.auteur-avatar{
	display:block;
	width:100%;
	height:100%;
	clip-path:url(#wr-avatar);
}

/* Encart de fin d'article : bloc nuit aux formes du site, bio complète et appel. */
.texte .auteur-encart{
	display:grid;
	grid-template-columns:96px 1fr;
	gap:1.75rem;
	align-items:start;
	margin:4rem -1rem 0;
	padding:2.5rem 2.25rem 2.75rem;
	background:#0b2530;
	color:#c3d8dd;
	clip-path:url(#wr-visuel);
}
.texte .auteur-encart__titre{
	font-family:'Bebas', sans-serif;
	font-size:2.1rem;
	line-height:1;
	color:#fff;
}
.texte .auteur-encart p:not(.auteur-encart__titre){
	margin-top:.65rem;
	font-size:1rem;
	line-height:1.6;
	text-wrap:pretty;
}
.texte .auteur-encart p.auteur-encart__appel{
	margin-top:1.25rem;
	font-size:1.1rem;
	font-weight:600;
	color:#fff;
}
.texte .auteur-encart p.auteur-encart__liens{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.75rem 1.5rem;
	margin-top:.9rem;
}
.texte .auteur-encart a{
	color:#8fe3ef;
}
.texte .auteur-encart a:focus-visible{
	outline-color:#fff;
}
.texte .auteur-encart a.auteur-encart__bouton{
	display:inline-block;
	padding:.6rem 1.25rem .45rem;
	background:#36bcd3;
	color:#06171c;
	font-family:'Bebas', sans-serif;
	font-size:1.4rem;
	line-height:1;
	text-decoration:none;
	clip-path:url(#wr-avatar);
	transition:background-color .2s ease-out;
}
.texte .auteur-encart a.auteur-encart__bouton:hover{
	background:#6fd6e6;
}

/* Colonne de gauche : carte auteur, remplacée par le sommaire au défilement (script-2018.js). */
.auteur-carte{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	max-width:240px;
	margin-left:auto;
	font-weight:200;
}
.auteur-carte .auteur-avatar-cadre{
	width:88px;
	height:88px;
}
.auteur-carte__nom{
	margin-top:.85rem;
	font-family:'Bebas', sans-serif;
	font-size:1.75rem;
	line-height:1;
}
.auteur-carte__bio{
	margin-top:.4rem;
	font-size:.95rem;
	line-height:1.5;
	color:#c3d8dd;
	text-wrap:balance;
}

@media (max-width:1050px){
	.auteur-carte{
		max-width:220px;
	}
}

@media (max-width:860px){
	/* Pas de colonne latérale : l'auteur passe dans les métas et l'encart de fin. */
	.auteur-carte{
		display:none;
	}
	.article-metas__auteur{
		display:inline-flex;
	}
	.article-entete{
		grid-template-columns:minmax(0, 1fr) auto;
	}
	.article-entete h1{
		grid-column:1 / -1;
	}
	.article-metas{
		grid-row:2;
	}
	.texte .article-visuel--entete{
		display:block;
		grid-column:2;
		grid-row:2;
		margin-top:1rem;
	}
	.sommaire-mobile{
		display:block;
	}
}

@media (max-width:600px){
	.article-metas{
		font-size:.9rem;
	}
	.texte .article-visuel--entete{
		width:84px;
	}
	/* Sur deux colonnes étroites, une info par ligne se lit mieux que des séparateurs. */
	.article-metas{
		flex-direction:column;
		align-items:flex-start;
	}
	.article-metas > :not(:last-child)::after{
		content:none;
	}
}

@media (max-width:500px){
	.article-2026 .texte{
		font-size:1rem;
		line-height:1.65;
	}
	.article-2026 .texte h1{
		font-size:2.25rem;
	}
	.article-2026 .texte blockquote{
		padding:1.1rem 1.1rem 1.3rem;
		font-size:1.05rem;
	}
	.texte p.chapo{
		font-size:1.15rem;
		line-height:1.55;
	}
	.texte .article-entete + p.chapo,
	.texte .article-entete + p{
		margin-top:1.75rem;
	}
	.texte .auteur-encart{
		grid-template-columns:64px 1fr;
		gap:1rem;
		margin:3rem -1rem 0;
		padding:1.75rem 1.25rem 2rem;
	}
	.texte .auteur-encart .auteur-avatar-cadre{
		width:64px;
		height:64px;
	}
}

@media (prefers-reduced-motion:reduce){
	.sommaire-mobile summary::after,
	.texte .auteur-encart a.auteur-encart__bouton{
		transition:none;
	}
}

/* Sous-listes numérotées (« 3 . 1 ») : le numéro composé est plus large que l'indentation d'origine. */
.article-2026 .texte ol > li > ol > li{
	padding-left:2.75rem;
}

/* Sommaire latéral : les longs articles (29 entrées pour les meta box) dépassent la hauteur de l'écran. */
.tocfixed .toc{
	overflow-y:auto;
	overscroll-behavior:contain;
	scrollbar-width:thin;
	scrollbar-color:#36bcd3 transparent;
}