/*
Theme Name: L'angle mort
Description: Thème enfant de Twenty Twenty-Five pour langlemort.fr, média de décryptage de faits divers. Direction artistique : affiche, aplats saturés, filets de grille, annotations à la main.
Template: twentytwentyfive
Version: 0.1.0
Text Domain: langlemort
Requires at least: 6.6
Requires PHP: 7.4
*/

/* ---------- Base ---------- */
:root {
	--ll-filet: 2px solid var(--wp--preset--color--encre);
	--ll-filet-fin: 1px solid var(--wp--preset--color--encre);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* Grain de papier, discret, sur toute la page */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.07;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--wp--preset--color--surligneur); color: var(--wp--preset--color--encre); }

:where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--outremer);
	outline-offset: 3px;
}

/* ---------- Typographie d'affiche ---------- */
.ll-affiche {
	font-family: var(--wp--preset--font-family--affiche);
	font-size: var(--wp--preset--font-size--affiche);
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0;
	overflow-wrap: anywhere;
}
.ll-affiche a { text-decoration: none; }

/* Micro-étiquettes (catégories, dates, numéros) */
.ll-etiquette {
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Étiquette verticale en marge, façon planche */
.ll-vertical {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

/* Numérotation 01 / 05 */
.ll-index {
	font-family: var(--wp--preset--font-family--affiche);
	font-size: var(--wp--preset--font-size--l);
	line-height: 1;
}
.ll-index .ll-index__fin { opacity: 0.35; }

/* ---------- Annotations « à la main » ---------- */
/* Ellipse tracée autour d'un mot : l'angle mort qu'on entoure */
.ll-cercle {
	position: relative;
	display: inline-block;
	isolation: isolate;
}
.ll-cercle::after {
	content: "";
	position: absolute;
	inset: -6% -7% -2% -7%;
	border: 0.045em solid currentColor;
	border-radius: 52% 48% 50% 50% / 58% 44% 56% 42%;
	transform: rotate(-3deg);
	pointer-events: none;
	z-index: -1;
}

/* Surlignage au marqueur */
.ll-surligne {
	background-image: linear-gradient(transparent 52%, var(--wp--preset--color--surligneur) 52%, var(--wp--preset--color--surligneur) 94%, transparent 94%);
	background-repeat: no-repeat;
	padding: 0 0.12em;
	margin: 0 -0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.has-encre-background-color .ll-surligne,
.has-encre-background-color.ll-surligne { color: var(--wp--preset--color--encre); }

/* Repère de visée + */
.ll-repere { position: relative; }
.ll-repere::before {
	content: "+";
	position: absolute;
	top: 0;
	right: 0;
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 300;
	font-size: 2.5rem;
	line-height: 1;
	pointer-events: none;
}

/* ---------- Grille à filets ---------- */
.ll-grille { border-top: var(--ll-filet); border-bottom: var(--ll-filet); }
.ll-grille > * + * { border-top: var(--ll-filet-fin); }
.ll-colonnes-filets > .wp-block-column + .wp-block-column { border-left: var(--ll-filet-fin); padding-left: var(--wp--preset--spacing--30); }
@media (max-width: 781px) {
	.ll-colonnes-filets > .wp-block-column + .wp-block-column { border-left: 0; padding-left: 0; border-top: var(--ll-filet-fin); padding-top: var(--wp--preset--spacing--30); }
}

/* Cadre filigrané (double filet, à la façon d'un cartouche) */
.ll-cadre {
	border: var(--ll-filet-fin);
	outline: var(--ll-filet-fin);
	outline-offset: -8px;
	padding: var(--wp--preset--spacing--40);
}

/* ---------- Boutons ---------- */
.wp-block-button__link { transition: background-color .15s ease, color .15s ease; }
.is-style-fleche .wp-block-button__link,
.ll-fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--surligneur);
	color: var(--wp--preset--color--encre);
	border: 0;
	font-size: 1.25rem;
	text-decoration: none;
}

/* ---------- En-tête ---------- */
.ll-entete { border-bottom: var(--ll-filet); }
.ll-entete .wp-block-site-title { font-size: var(--wp--preset--font-size--l); }

/* ---------- Liste d'articles : cartes à filet ---------- */
.ll-flux .wp-block-post-template { gap: 0; }
.ll-carte {
	border-top: var(--ll-filet);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	transition: background-color .15s ease;
}
.ll-carte:hover { background-color: var(--wp--preset--color--surligneur); }
.ll-carte .wp-block-post-featured-image { margin: 0 0 var(--wp--preset--spacing--10); }
.ll-carte .wp-block-post-featured-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; filter: grayscale(.15) contrast(1.05); }
.ll-carte .wp-block-post-title { margin: 0; }

/* État vide : sobre, pas de décor */
.ll-vide { border: var(--ll-filet-fin); padding: var(--wp--preset--spacing--40); text-align: left; }

/* ---------- Article ---------- */
.ll-article-titre { font-size: var(--wp--preset--font-size--xxl); max-width: 18ch; }
.ll-article .wp-block-post-content > p:first-of-type { font-size: var(--wp--preset--font-size--l); line-height: 1.35; font-weight: 500; }
.ll-article blockquote {
	margin-left: 0;
	padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	border-left: 6px solid var(--wp--preset--color--rouge);
	font-family: var(--wp--preset--font-family--affiche);
	font-size: var(--wp--preset--font-size--xl);
	text-transform: uppercase;
	line-height: 1;
}

/* ---------- Défilement horizontal (bandeau) ---------- */
@keyframes ll-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ll-bandeau { overflow: hidden; white-space: nowrap; border-top: var(--ll-filet); border-bottom: var(--ll-filet); }
.ll-bandeau__piste { display: inline-block; animation: ll-defile 30s linear infinite; }
@media (prefers-reduced-motion: reduce) {
	.ll-bandeau__piste { animation: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Pied de page ---------- */
.ll-pied { border-top: var(--ll-filet); }

/* ---------- Accueil ---------- */
.ll-hero-titre {
	font-size: clamp(3.5rem, 13.5vw, 13rem);
	width: fit-content;
	max-width: 100%;
	padding: 0.04em 0.06em;
}
.ll-hero { overflow: hidden; }
.ll-surligne-titre { margin-bottom: var(--wp--preset--spacing--40); }

/* ---------- En-tête : champ de recherche discret ---------- */
.ll-entete .wp-block-search__button { background: transparent; border: 0; padding: 0.25rem; }
.ll-entete .wp-block-search__input { border: 0; border-bottom: var(--ll-filet-fin); border-radius: 0; background: transparent; }

/* ---------- Chapô d'article ---------- */
.ll-chapo { font-size: var(--wp--preset--font-size--l); line-height: 1.3; font-weight: 500; max-width: 44rem; }

/* L'en-tête est un groupe flex : on lui redonne la marge latérale racine. */
.ll-entete {
	padding-left: var(--wp--style--root--padding-left, 1.5rem);
	padding-right: var(--wp--style--root--padding-right, 1.5rem);
}

/* =====================================================
   v0.2 : aplats saturés, façon affiche
   ===================================================== */

/* Sections sombres/saturées : filets et liens en papier */
.has-rouge-background-color,
.has-outremer-background-color,
.has-encre-background-color {
	--ll-filet: 2px solid var(--wp--preset--color--papier);
	--ll-filet-fin: 1px solid var(--wp--preset--color--papier);
}
.has-rouge-background-color a,
.has-outremer-background-color a,
.has-encre-background-color a { color: inherit; }
.has-rouge-background-color a:hover,
.has-outremer-background-color a:hover,
.has-encre-background-color a:hover { color: var(--wp--preset--color--surligneur); }

/* En-tête sur l'accueil : continue l'aplat rouge */
.home .ll-entete { background: var(--wp--preset--color--rouge); color: var(--wp--preset--color--papier); border-bottom-color: transparent; }
.home .ll-entete a,
.home .ll-entete .wp-block-navigation-item__content { color: var(--wp--preset--color--papier); }
.home .ll-entete a:hover { color: var(--wp--preset--color--surligneur); }
.home .ll-entete .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--papier); }

/* Hero */
.ll-hero { overflow: hidden; }
.ll-hero-haut { align-items: flex-start; min-height: 6rem; }
.ll-hero-haut .ll-vertical { margin: 0; }
.ll-repere-croix { margin: 0; font-weight: 300; line-height: 1; }
.ll-hero-titre {
	font-size: clamp(5rem, 23vw, 21rem);
	line-height: 0.82;
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
}
.ll-hero-titre .ll-cercle { padding: 0 0.12em; }
.ll-hero-actions { gap: var(--wp--preset--spacing--20); }

/* Bandeau jaune défilant */
.ll-bandeau { border-top: var(--ll-filet); border-bottom: var(--ll-filet); --ll-filet: 2px solid var(--wp--preset--color--encre); }
.ll-bandeau__piste {
	font-family: var(--wp--preset--font-family--affiche);
	font-size: clamp(2rem, 5vw, 4rem);
	text-transform: uppercase;
	line-height: 1;
	padding: 0.18em 0;
}
.ll-bandeau__piste > span { display: inline-block; }

/* Titre de section : étiquette jaune pleine (contraste sur aplat bleu) */
.ll-surligne-titre .ll-surligne {
	background: var(--wp--preset--color--surligneur);
	color: var(--wp--preset--color--encre);
	padding: 0.02em 0.14em;
	margin: 0;
}
.ll-surligne-titre { margin-bottom: var(--wp--preset--spacing--40); line-height: 1.02; }

/* Cartes : survol jaune, texte encre */
.ll-carte:hover { background-color: var(--wp--preset--color--surligneur); color: var(--wp--preset--color--encre); }
.ll-carte:hover a { color: var(--wp--preset--color--encre); }
.ll-vide { color: inherit; }

/* Bandes de titre des autres pages */
.ll-bande-titre { font-size: clamp(3.5rem, 13vw, 11rem); line-height: 0.88; margin: 0; }
.ll-bande .ll-cercle { padding: 0 0.1em; }
.ll-bande .wp-block-post-terms a,
.ll-bande .wp-block-post-date,
.ll-bande .wp-block-post-author-name { color: inherit; }
.ll-article-titre { font-size: clamp(2.75rem, 8vw, 7rem); max-width: 16ch; }
.ll-meta { margin-top: var(--wp--preset--spacing--30); border-top: var(--ll-filet-fin); padding-top: var(--wp--preset--spacing--10); }
.ll-bande .wp-block-search__input { background: var(--wp--preset--color--papier); }

/* Pied de page : grand titre jaune */
.ll-pied-titre { font-size: clamp(4rem, 17vw, 16rem); line-height: 0.85; color: var(--wp--preset--color--surligneur); margin: 0 0 var(--wp--preset--spacing--40); }
.ll-pied-titre a { color: inherit; }
.ll-pied-bas { border-top: var(--ll-filet-fin); padding-top: var(--wp--preset--spacing--20); }

/* Pas d interstice entre les grands blocs */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > main > * + * { margin-block-start: 0; }