/*
Theme Name: Ludis v3
Theme URI: https://ludis-inc.com
Author: Ludis Inc
Description: Magazine mode Ludis — refonte totale, inspirée de commeuncamion.com (procédés, jamais la marque). Palette et typographie propres au site.
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ludis-v3
*/

/* =====================================================================
   0. POLICES — auto-hébergées (P-086). display=swap via font-display.
   Sofia Sans Extra Condensed = titraille capitales (équiv. Bebas de la réf.).
   Albert Sans = lecture. Bodoni Moda italique = accent (DA §3.2), corrigé au
   verdict du 24/09 (T9) — remplace la substitution Source Serif 4.
   ===================================================================== */
@font-face {
	font-family: 'Sofia Sans Extra Condensed';
	src: url('assets/fonts/sofia-sans-extra-condensed-black.woff2') format('woff2');
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Albert Sans';
	src: url('assets/fonts/albert-sans-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Albert Sans';
	src: url('assets/fonts/albert-sans-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Albert Sans';
	src: url('assets/fonts/albert-sans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Bodoni Moda';
	src: url('assets/fonts/bodoni-moda-italic.woff2') format('woff2');
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}

/* =====================================================================
   1. JETONS — palette (DA §3.1), échelle (DA §3.2). Mode clair uniquement
   (GD-030 / contrat fonctionnel) : aucune règle prefers-color-scheme.
   ===================================================================== */
:root {
	/* couleurs */
	--lu-papier: #FFFFFF;
	--lu-serpent: #1F1B1C;
	--lu-grain: #5A5657;
	--lu-lin: #F2F0EE;
	--lu-langue: #EB382C;
	--lu-langue-foncee: #B8231A;
	--lu-langue-fond: #D92D20; /* rouge du logo assombri : blanc dessus = 4,83:1 (AA) */
	--lu-filet: #E4E1DF;

	/* polices */
	--lu-font-caractere: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
	--lu-font-lecture: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
	--lu-font-accent: 'Bodoni Moda', Georgia, 'Times New Roman', serif;

	/* échelle desktop (DA §3.2) */
	--lu-s-84: 5.25rem;
	--lu-s-56: 3.5rem;
	--lu-s-36: 2.25rem;
	--lu-s-34: 2.125rem;
	--lu-s-24: 1.5rem;
	--lu-s-22: 1.375rem;
	--lu-s-17: 1.0625rem;
	--lu-s-15: 0.9375rem;
	--lu-s-12: 0.75rem;

	/* grille */
	--lu-large: 1340px;
	--lu-conteneur: 1200px;
	--lu-recherche: 940px;
	--lu-texte: 800px;

	--lu-header-h: 176px;
	--lu-header-h-compact: 62px;
}
@media (max-width: 600px) {
	:root {
		--lu-s-84: 2.75rem; /* 44px */
		--lu-s-56: 2.125rem; /* 34px */
		--lu-s-36: 1.75rem; /* 28px */
		--lu-s-34: 1.625rem; /* 26px */
		--lu-s-24: 1.25rem; /* 20px */
		--lu-s-22: 1.125rem; /* 18px */
		--lu-header-h: 64px;
	}
}

/* =====================================================================
   2. RESET / BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--lu-papier);
	color: var(--lu-serpent);
	font-family: var(--lu-font-lecture);
	font-size: var(--lu-s-17);
	line-height: 1.65;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--lu-font-caractere); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
p { margin: 0 0 1.2em; }
ul, ol { margin: 0; padding: 0; }
.lu_conteneur { max-width: var(--lu-conteneur); margin: 0 auto; padding: 0 20px; }
.lu_large { max-width: var(--lu-large); margin: 0 auto; padding: 0 20px; }
.lu_texte { max-width: var(--lu-texte); margin: 0 auto; padding: 0 20px; }
.lu_visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lu_skip-lien { position: absolute; left: -999px; top: 0; background: var(--lu-serpent); color: var(--lu-papier); padding: 12px 18px; z-index: 999; }
.lu_skip-lien:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--lu-langue); outline-offset: 2px; }

/* aucun coin arrondi (DA §5) sauf les portraits ronds */
img, .lu_bouton, input, textarea, select, .lu_carte, .lu_pastille { border-radius: 0; }

.lu_pastille {
	display: inline-block;
	font-family: var(--lu-font-caractere);
	font-size: var(--lu-s-12);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border: 1px solid currentColor;
}
.lu_pastille--pleine { background: var(--lu-langue-fond); color: var(--lu-papier); border-color: var(--lu-langue-fond); }
.lu_meta {
	font-family: var(--lu-font-caractere);
	font-size: var(--lu-s-15);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--lu-grain);
}
.lu_meta .lu_maj { color: var(--lu-langue-foncee); }
.lu_bouton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--lu-font-caractere);
	font-size: var(--lu-s-22);
	text-transform: uppercase;
	background: var(--lu-serpent);
	color: var(--lu-papier);
	border: 1px solid var(--lu-serpent);
	padding: 10px 20px;
	text-decoration: none;
	min-height: 44px;
	transition: background .2s, color .2s;
}
.lu_bouton:hover { background: var(--lu-papier); color: var(--lu-serpent); }
.lu_bouton--contour { background: transparent; color: var(--lu-serpent); }
.lu_bouton--contour:hover { background: var(--lu-serpent); color: var(--lu-papier); }
.lu_bouton--clair { background: var(--lu-papier); color: var(--lu-serpent); border-color: var(--lu-papier); }
.lu_bouton--clair:hover { background: transparent; color: var(--lu-papier); }

/* le numéro exposant rouge (procédé "INC" — DA §3.4.2) */
.lu_exposant { color: var(--lu-langue); font-family: var(--lu-font-caractere); font-weight: 700; }

/* A13 (peaufiner 24/09) — les deux SVG (serpent + langue) sont regroupés dans
   un span inline-flex par ludis_svg_serpent() : ils se centrent et se
   déplacent ensemble, quel que soit le parent (avant : deux <svg> frères en
   display:block que text-align:center ne centrait pas — la langue restait
   collée au bord gauche de son conteneur, cf. .lu_404 plus bas). */
.lu_serpent-groupe { display: inline-flex; align-items: center; justify-content: center; }
.lu_serpent-icone { width: 1em; height: .9em; color: var(--lu-serpent); }
.lu_langue-icone { width: .5em; height: .25em; }

/* =====================================================================
   3. EN-TÊTE (header.php) — DA §4.1
   ===================================================================== */
.lu_entete { background: var(--lu-papier); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--lu-serpent); }
.lu_entete__etage1 { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.lu_entete__sociaux { display: flex; gap: 14px; align-items: center; }
.lu_entete__sociaux a { color: var(--lu-serpent); }
.lu_entete__sociaux svg { width: 18px; height: 18px; }
.lu_entete__marque { text-align: center; text-decoration: none; }
.lu_entete__logo { height: 60px; width: auto; }
.lu_entete__baseline { display: block; font-family: var(--lu-font-accent); font-style: italic; font-size: var(--lu-s-15); color: var(--lu-grain); margin-top: 4px; }
.lu_entete__droite { display: flex; align-items: center; gap: 14px; }
.lu_entete__recherche-btn { background: none; border: 1px solid var(--lu-serpent); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.lu_entete__recherche-btn svg { width: 18px; height: 18px; }

.lu_nav { border-top: 1px solid var(--lu-filet); }
.lu_nav__liste { list-style: none; display: flex; justify-content: center; gap: 44px; padding: 18px 0; flex-wrap: wrap; }
.lu_nav__liste a {
	font-family: var(--lu-font-accent);
	font-style: italic;
	font-size: var(--lu-s-22);
	text-decoration: none;
	color: var(--lu-serpent);
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}
.lu_nav__liste a[aria-current="page"],
.lu_nav__liste a:hover { border-bottom-color: var(--lu-langue); }

/* compact au défilement (app.js ajoute .lu_entete--compact) */
.lu_entete--compact .lu_entete__etage1 { display: none; }
.lu_entete--compact .lu_nav { border-top: 0; }
.lu_entete--compact .lu_nav__liste { padding: 10px 0; }
.lu_entete--compact { border-bottom: 2px solid var(--lu-langue); }
.lu_entete__logo--compact { display: none; height: 30px; }
.lu_entete--compact .lu_entete__logo--compact { display: block; }

.lu_burger, .lu_entete__mobile-recherche { display: none; }
/* T1 (verdict 24/09) — le panneau mobile (✕ + recherche) ne doit JAMAIS se voir
   hors de l'état ouvert : par défaut masqué, quelle que soit la largeur d'écran. */
.lu_nav__fermer, #lu_recherche-mobile { display: none; }
.lu_nav--ouvert .lu_nav__fermer { display: flex; }
.lu_nav--ouvert #lu_recherche-mobile { display: flex; }
.lu_bouton__libelle { display: inline; }

/* progression de lecture (article uniquement) */
.lu_progression { position: fixed; top: var(--lu-header-h-compact); left: 0; height: 2px; background: var(--lu-langue); width: 0; z-index: 101; transition: width .1s linear; }
body:not(.single) .lu_progression { display: none; }

/* A12 (peaufiner 24/09) — compteur discret "X min restantes", mis à jour au
   scroll (app.js), posé sous la barre de progression, jamais un gros bandeau. */
.lu_progression__temps {
	position: fixed;
	top: calc(var(--lu-header-h-compact) + 8px);
	right: 12px;
	z-index: 101;
	font-family: var(--lu-font-caractere);
	font-size: var(--lu-s-12);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lu-grain);
	background: var(--lu-papier);
	padding: 3px 10px;
	border: 1px solid var(--lu-filet);
	pointer-events: none;
}
body:not(.single) .lu_progression__temps, .lu_progression__temps:empty { display: none; }

/* =====================================================================
   4. HERO CARROUSEL (accueil, bloc 1 — DA §4.2)
   ===================================================================== */
.lu_bandeau-mot-cle { text-align: center; padding: 14px 0; border-bottom: 1px solid var(--lu-filet); }
.lu_bandeau-mot-cle h1 { font-family: var(--lu-font-accent); font-style: italic; text-transform: none; font-size: var(--lu-s-22); font-weight: 500; color: var(--lu-serpent); }

.lu_hero { position: relative; overflow: hidden; background: var(--lu-serpent); }
.lu_hero__liste { display: flex; }
.lu_hero__slide { position: relative; flex: 0 0 100%; min-height: 460px; }
.lu_hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lu_hero__voile { position: absolute; inset: 0; background: rgba(31,27,28,.45); }
.lu_hero__contenu { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 80px 20px 56px; text-align: center; color: var(--lu-papier); }
.lu_hero__pastilles { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.lu_hero__pastilles .lu_pastille { border-color: var(--lu-papier); color: var(--lu-papier); }
.lu_hero__titre { font-size: var(--lu-s-84); line-height: .98; color: var(--lu-papier); margin-bottom: 18px; }
.lu_hero__titre a { color: inherit; text-decoration: none; }
.lu_hero__meta { color: var(--lu-papier); margin-bottom: 22px; }
.lu_hero__pagination { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.lu_hero__pagination button { width: 22px; height: 3px; background: rgba(255,255,255,.4); border: 0; padding: 0; }
.lu_hero__pagination button[aria-current="true"] { background: var(--lu-langue); }

/* =====================================================================
   5. BANDE NOIRE "TROUVER UNE PIÈCE" — DA §4.2 bloc 2
   ===================================================================== */
.lu_recherche-bande { background: var(--lu-serpent); color: var(--lu-papier); padding: 32px 0; }
.lu_recherche-bande--claire { background: var(--lu-lin); color: var(--lu-serpent); }
.lu_recherche-bande__form { display: flex; max-width: var(--lu-recherche); margin: 0 auto 18px; }
.lu_recherche-bande__form input[type="search"] {
	flex: 1; border: 0; padding: 12px 16px; font-size: var(--lu-s-17); background: var(--lu-papier); color: var(--lu-serpent);
}
.lu_recherche-bande--claire .lu_recherche-bande__form input[type="search"] { background: var(--lu-papier); }
.lu_recherche-bande__form button { border: 0; background: var(--lu-langue-fond); color: var(--lu-papier); padding: 0 20px; }
.lu_raccourcis { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; max-width: var(--lu-recherche); margin: 0 auto; }
.lu_raccourcis a { font-family: var(--lu-font-caractere); font-size: var(--lu-s-22); text-transform: uppercase; text-decoration: underline; color: inherit; }
.lu_raccourcis li:first-child a { color: var(--lu-langue); }
.lu_recherche-bande--claire .lu_raccourcis li:first-child a { color: var(--lu-langue-foncee); }

/* =====================================================================
   6. SECTIONS DE PAGE — rythme (DA §4.2)
   ===================================================================== */
.lu_section { padding: 56px 0; }
.lu_section--lin { background: var(--lu-lin); }
.lu_section--serpent { background: var(--lu-serpent); color: var(--lu-papier); }
.lu_section--serpent h2, .lu_section--serpent .lu_titre-section { color: var(--lu-papier); }
.lu_section__entete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.lu_titre-section { font-family: var(--lu-font-accent); font-style: italic; font-weight: 500; text-transform: none; font-size: var(--lu-s-36); }
.lu_titre-vertical {
	font-family: var(--lu-font-caractere);
	font-size: 5rem;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	line-height: 1;
	color: var(--lu-serpent);
}
.lu_section--serpent .lu_titre-vertical { color: var(--lu-papier); }

/* =====================================================================
   7. LISTE "LE FIL" — image gauche / texte droite (copie référence)
   ===================================================================== */
.lu_fil { display: flex; flex-direction: column; gap: 40px; }
/* A1 (verdict 24/09) — image trop large (560) laissait plus de la moitié de la
   colonne de texte vide malgré un extrait à 5 lignes ; 480 + align-items:center
   rapproche le rendu de la référence. */
.lu_fil__item { display: grid; grid-template-columns: 480px 1fr; gap: 40px; align-items: center; }
.lu_fil__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--lu-lin); }
.lu_fil__media img { width: 100%; height: 100%; object-fit: cover; }
.lu_fil__rang { position: absolute; top: 12px; left: 12px; background: var(--lu-papier); padding: 2px 8px; font-family: var(--lu-font-caractere); }
.lu_fil__corps { display: flex; flex-direction: column; gap: 10px; }
.lu_fil__pastilles { display: flex; gap: 8px; flex-wrap: wrap; }
.lu_fil__titre { font-size: var(--lu-s-34); line-height: 1.02; }
.lu_fil__titre a { text-decoration: none; color: var(--lu-serpent); }
.lu_fil__titre a:hover { text-decoration: underline; text-decoration-color: var(--lu-langue); }
.lu_fil__extrait { color: var(--lu-grain); font-size: var(--lu-s-15); line-height: 1.5; }

/* repli image (procédé identité, jamais une lettre grise) */
.lu_repli { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; background: var(--lu-serpent); color: var(--lu-papier); }
.lu_repli svg { width: 40px; height: 36px; }
.lu_repli em { font-family: var(--lu-font-accent); font-style: italic; font-size: var(--lu-s-15); }

/* pagination carrée */
.lu_pagination { margin-top: 40px; }
/* T7 (verdict 24/09) — paginate_links(type=>list) rend un <ul class="page-numbers">
   dont le navigateur impose ses puces par défaut (spécificité de l'élément ul,
   plus forte qu'un list-style hérité) : on le cible explicitement. */
.lu_pagination ul, .lu_pagination ul.page-numbers {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
	list-style: none; margin: 0; padding: 0;
}
.lu_pagination li { list-style: none; margin: 0; }
.lu_pagination a, .lu_pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 4px; border: 1px solid var(--lu-serpent);
	font-family: var(--lu-font-caractere); font-size: var(--lu-s-22); text-decoration: none; color: var(--lu-serpent);
}
.lu_pagination .current, .lu_pagination .lu_pagination__active { background: var(--lu-serpent); color: var(--lu-papier); }

/* =====================================================================
   8. CARROUSELS PORTRAIT (Populaires) — scroll natif, pas de JS requis
   ===================================================================== */
.lu_carrousel { display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; overflow-y: visible; max-width: 100%; scroll-snap-type: x proximity; padding-bottom: 16px; }
.lu_carrousel__carte { scroll-snap-align: start; flex: 0 0 270px; min-width: 0; }
.lu_carrousel__media { display: block; aspect-ratio: 2/3; overflow: hidden; background: var(--lu-lin); margin-bottom: 10px; }
.lu_carrousel__media img { width: 100%; height: 100%; object-fit: cover; }
.lu_carrousel__titre { font-size: var(--lu-s-24); line-height: 1.05; margin-bottom: 6px; }
.lu_carrousel__titre a { text-decoration: none; color: var(--lu-serpent); }

/* =====================================================================
   9. GRILLE DE RUBRIQUE (accueil, bloc 5) — grande carte + 3 petites
   ===================================================================== */
.lu_rubrique-grille { display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: start; }
.lu_rubrique-grille__corps { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; }
.lu_rubrique-grille__grande .lu_fil__media { aspect-ratio: 3/2; }
.lu_rubrique-grille__petites { display: flex; flex-direction: column; gap: 18px; }
.lu_carte-mini { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.lu_carte-mini__media { aspect-ratio: 1/1; overflow: hidden; background: var(--lu-lin); }
.lu_carte-mini__media img { width: 100%; height: 100%; object-fit: cover; }
.lu_carte-mini__titre { font-size: var(--lu-s-17); font-family: var(--lu-font-lecture); font-weight: 700; text-transform: none; line-height: 1.25; }
.lu_carte-mini__titre a { text-decoration: none; color: var(--lu-serpent); }
.lu_lien-rubrique { display: inline-block; margin-top: 18px; font-family: var(--lu-font-caractere); font-size: var(--lu-s-17); text-decoration: none; color: var(--lu-langue-foncee); border-bottom: 1px solid currentColor; }

/* =====================================================================
   10. BANDE ROUGE (lettre du dimanche) — une seule par page (DA règle)
   ===================================================================== */
.lu_bande-rouge { background: var(--lu-langue-fond); color: var(--lu-papier); padding: 48px 0; }
.lu_bande-rouge__inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.lu_bande-rouge__serpent svg { width: 90px; height: 81px; color: var(--lu-papier); }
.lu_bande-rouge__serpent .lu_langue-icone { color: var(--lu-papier); }
.lu_bande-rouge__titre { font-size: var(--lu-s-56); color: var(--lu-papier); text-align: center; }
.lu_bande-rouge__texte { font-family: var(--lu-font-lecture); margin: 8px 0 0; text-align: center; }
.lu_lettre-form { display: flex; gap: 0; min-width: 320px; }
.lu_lettre-form input[type="email"] { flex: 1; border: 1px solid var(--lu-papier); padding: 12px 14px; background: var(--lu-papier); }
.lu_lettre-form button { border: 1px solid var(--lu-serpent); background: var(--lu-serpent); color: var(--lu-papier); padding: 0 18px; }
.lu_piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lu_lettre-consentement { font-size: var(--lu-s-12); margin-top: 8px; max-width: 320px; }
.lu_lettre-envoye { font-family: var(--lu-font-caractere); }

/* =====================================================================
   11. DEUX COLONNES (Montres & Beauté)
   ===================================================================== */
.lu_deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.lu_deux-colonnes > div { min-width: 0; }
.lu_deux-colonnes .lu_titre-section { margin-bottom: 16px; }
.lu_deux-colonnes__media { aspect-ratio: 4/3; overflow: hidden; background: var(--lu-lin); margin-bottom: 16px; }
.lu_deux-colonnes__media img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   12. TEXTE D'ACCUEIL + PORTRAITS AUTEURS
   ===================================================================== */
.lu_auteurs-ligne { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
.lu_auteurs-ligne a { text-decoration: none; text-align: center; color: var(--lu-serpent); font-size: var(--lu-s-15); }
.lu_auteurs-ligne .lu_avatar { --lu-av: 72px; }
/* T5 (verdict 24/09) — un <img> sans dimension carrée forcée s'écrase en ovale :
   ratio 1:1 imposé, largeur/hauteur identiques et non compressibles par le flex. */
.lu_avatar {
	width: var(--lu-av, 64px); height: var(--lu-av, 64px);
	aspect-ratio: 1 / 1; flex-shrink: 0;
	border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 6px;
}
.lu_avatar--repli { border-radius: 50%; background: var(--lu-serpent); display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; }
.lu_avatar--repli svg { width: 50%; height: 50%; color: var(--lu-papier); }
.lu_texte-accueil h2 { font-size: var(--lu-s-34); margin-bottom: 16px; }
.lu_texte-accueil p { color: var(--lu-grain); }

/* =====================================================================
   13. PIED DE PAGE — étiquette cousue (DA procédé 7)
   ===================================================================== */
.lu_pied { background: var(--lu-serpent); color: var(--lu-papier); padding: 48px 0 20px; }
.lu_pied__couture { border-top: 1px dashed rgba(255,255,255,.5); margin-bottom: 40px; }
.lu_pied__grille { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: start; }
.lu_pied__colonne h3 { font-family: var(--lu-font-caractere); font-size: var(--lu-s-17); margin-bottom: 14px; color: var(--lu-papier); }
.lu_pied__colonne ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lu_pied__colonne a { color: var(--lu-papier); text-decoration: none; font-size: var(--lu-s-15); }
.lu_pied__colonne a:hover { text-decoration: underline; text-decoration-color: var(--lu-langue); }
.lu_pied__marque { text-align: center; }
.lu_pied__logo-lien { display: inline-block; }
.lu_pied__logo { height: 50px; width: auto; }
.lu_pied__baseline { display: block; font-family: var(--lu-font-accent); font-style: italic; color: var(--lu-papier); margin-top: 10px; font-size: var(--lu-s-15); }
.lu_pied__composition { text-align: center; font-family: var(--lu-font-caractere); font-size: var(--lu-s-12); letter-spacing: .04em; text-transform: uppercase; margin: 32px 0 0; color: rgba(255,255,255,.8); }
.lu_pied__bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); font-size: var(--lu-s-12); color: rgba(255,255,255,.7); }
.lu_pied__bas a { color: rgba(255,255,255,.7); text-decoration: underline; }

/* =====================================================================
   14. PAGE RUBRIQUE (category.php) — DA §4.3
   ===================================================================== */
.lu_rubrique-tete { padding: 28px 0 8px; }
.lu_fil-ariane { font-size: var(--lu-s-15); color: var(--lu-grain); margin-bottom: 18px; }
.lu_fil-ariane a { color: var(--lu-serpent); text-decoration: underline; }
.lu_rubrique-h1-ligne { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.lu_rubrique-h1 { font-size: var(--lu-s-84); }
.lu_rubrique-compteur { font-family: var(--lu-font-caractere); font-size: var(--lu-s-15); color: var(--lu-grain); white-space: nowrap; }
.lu_rubrique-accroche { font-family: var(--lu-font-accent); font-style: italic; font-size: var(--lu-s-22); font-weight: 500; color: var(--lu-grain); max-width: 780px; margin-top: 14px; }

.lu_sous-themes { list-style: none; display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--lu-serpent); border-bottom: 1px solid var(--lu-serpent); margin: 28px 0; }
.lu_sous-themes a { font-family: var(--lu-font-accent); font-style: italic; font-size: var(--lu-s-22); text-decoration: none; color: var(--lu-serpent); }
.lu_sous-themes a[aria-current="true"] { color: var(--lu-langue-foncee); }

.lu_ouverture { position: relative; margin-bottom: 40px; aspect-ratio: 1200/520; overflow: hidden; background: var(--lu-serpent); }
.lu_ouverture img { width: 100%; height: 100%; object-fit: cover; }
.lu_ouverture__panneau { position: absolute; left: 0; bottom: -0; background: var(--lu-papier); padding: 24px 28px; max-width: 560px; margin-bottom: -50px; bottom: 50px; }
.lu_ouverture__titre { font-size: var(--lu-s-56); line-height: 1; margin-bottom: 8px; }
.lu_ouverture__titre a { color: var(--lu-serpent); text-decoration: none; }

.lu_rubrique-intro { max-width: var(--lu-texte); margin: 48px auto 0; text-align: left; }
.lu_rubrique-intro h2 { font-size: var(--lu-s-34); margin-bottom: 14px; }
.lu_rubrique-intro p { color: var(--lu-grain); }
.lu_rubrique-vide { text-align: center; padding: 60px 0; color: var(--lu-grain); font-family: var(--lu-font-accent); font-style: italic; font-size: var(--lu-s-22); }

/* =====================================================================
   15. ARTICLE (single.php) — DA §4.4
   ===================================================================== */
.lu_article-hero { max-width: var(--lu-conteneur); margin: 20px auto 0; padding: 0 20px; text-align: center; }
.lu_article-hero__pastilles { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
/* A8 (peaufiner 24/09) — capitales par défaut (hérité de h1{text-transform:
   uppercase}, DA §4.4.3) ; text-transform:none était codé en dur SANS condition
   ici, casse normale réservée aux titres > 70 caractères (classe posée par
   single.php via mb_strlen). */
.lu_article-hero__h1 { font-size: var(--lu-s-84); line-height: .98; max-width: 1000px; margin: 0 auto 18px; scroll-margin-top: 90px; }
.lu_article-hero__h1.lu_h1--normal { text-transform: none; }
.lu_article-hero__chapo { font-family: var(--lu-font-accent); font-style: italic; font-weight: 400; font-size: var(--lu-s-22); line-height: 1.45; max-width: 780px; margin: 0 auto 24px; color: var(--lu-serpent); }
.lu_ligne-auteur { display: inline-flex; align-items: center; gap: 12px; font-size: var(--lu-s-15); }
.lu_ligne-auteur img.lu_avatar, .lu_ligne-auteur .lu_avatar { width: 48px; height: 48px; }
.lu_ligne-auteur a { text-decoration: none; color: var(--lu-serpent); font-family: var(--lu-font-caractere); letter-spacing: .03em; }
.lu_ligne-auteur .lu_grain { color: var(--lu-grain); }

.lu_article-une { max-width: var(--lu-conteneur); margin: 32px auto 0; padding: 0 20px; }
.lu_article-une__media { aspect-ratio: 2/1; overflow: hidden; background: var(--lu-lin); }
.lu_article-une__media img { width: 100%; height: 100%; object-fit: cover; }
.lu_article-une figcaption { font-size: 0.8125rem; color: var(--lu-grain); margin-top: 6px; text-align: left; }

/* ===== HERO ARTICLE UNIFIE (02/10/2026, retour Mathias) =====
   Remplace l'ancien duo .lu_article-hero (texte centre) + .lu_article-une (figure 2:1)
   qui empilait header + fil d'ariane + pastilles + H1 + chapo + ligne auteur + marge
   AVANT la moindre image : sur mobile, rien n'etait visible sans defiler. Desormais
   image + categorie + titre + chapo + auteur forment UN seul bloc visible d'un coup. */
.lu_hero-article {
	position: relative;
	overflow: hidden;
	min-height: clamp(520px, 92vh, 760px);
	display: flex;
	align-items: flex-end;
	background: var(--lu-serpent);
	color: var(--lu-papier);
	margin: 0 0 32px;
}
.lu_hero-article__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	transform: scale(1);
	animation: lu_hero-zoom 16s ease-out forwards;
	will-change: transform;
}
@keyframes lu_hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.lu_hero-article__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(31,27,28,0) 0%, rgba(31,27,28,.1) 35%, rgba(31,27,28,.82) 82%, rgba(31,27,28,.94) 100%);
}
.lu_hero-article--sans-image { background: var(--lu-serpent); min-height: auto; padding-top: 56px; color: var(--lu-papier); }
.lu_hero-article__contenu {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 20px 36px;
	animation: lu_hero-entree .6s ease-out both;
}
.lu_hero-article .lu_fil-ariane--hero { color: rgba(255,255,255,.75); margin-bottom: 14px; }
.lu_hero-article .lu_fil-ariane--hero a { color: var(--lu-papier); }
.lu_hero-article .lu_article-hero__pastilles { justify-content: flex-start; margin-bottom: 14px; animation: lu_hero-entree .55s ease-out both; animation-delay: .08s; }
.lu_hero-article .lu_article-hero__h1 {
	color: var(--lu-papier);
	text-align: left;
	margin: 0 0 14px;
	max-width: 880px;
	animation: lu_hero-entree .6s ease-out both;
	animation-delay: .16s;
	text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.lu_hero-article .lu_article-hero__chapo {
	color: rgba(255,255,255,.94);
	text-align: left;
	margin: 0 0 20px;
	max-width: 680px;
	animation: lu_hero-entree .6s ease-out both;
	animation-delay: .24s;
}
.lu_hero-article .lu_ligne-auteur { color: var(--lu-papier); animation: lu_hero-entree .6s ease-out both; animation-delay: .32s; }
.lu_hero-article .lu_ligne-auteur a { color: var(--lu-papier); }
.lu_hero-article .lu_ligne-auteur .lu_grain { color: rgba(255,255,255,.78); }
.lu_hero-article .lu_ligne-auteur .lu_avatar,
.lu_hero-article .lu_ligne-auteur img.lu_avatar { border: 2px solid rgba(255,255,255,.9); border-radius: 50%; }
.lu_hero-article__legende { font-size: 0.8125rem; color: var(--lu-grain); margin: 10px auto 0; text-align: left; }

@keyframes lu_hero-entree { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.lu_hero-article__img { animation: none; }
	.lu_hero-article__contenu,
	.lu_hero-article .lu_article-hero__pastilles,
	.lu_hero-article .lu_article-hero__h1,
	.lu_hero-article .lu_article-hero__chapo,
	.lu_hero-article .lu_ligne-auteur { animation: none; opacity: 1; transform: none; }
}

/* En-tete compact par defaut sur une page article (gain de hauteur, demande Mathias
   02/10) : logo reduit, sous-titre masque, padding resserre. La nav reste visible
   (desktop) pour ne jamais retirer l'acces aux rubriques depuis un article. */
body.single-post .lu_entete__baseline { display: none; }
body.single-post .lu_entete__etage1 { padding: 10px 0; }
body.single-post .lu_entete__logo { height: 42px; }

@media (max-width: 600px) {
	.lu_hero-article { min-height: clamp(440px, 85vh, 600px); }
	.lu_hero-article__contenu { padding: 0 16px 26px; }
	.lu_hero-article .lu_article-hero__h1 { font-size: 2.05rem; }
	.lu_hero-article .lu_article-hero__chapo { font-size: var(--lu-s-15); }
	body.single-post .lu_entete__logo { height: 34px; }
}

.lu_article-corps { max-width: var(--lu-conteneur); margin: 40px auto 60px; padding: 0 20px; display: grid; grid-template-columns: 740px 400px; gap: 60px; align-items: start; }
.lu_entry-content { font-size: var(--lu-s-17); line-height: 1.65; color: var(--lu-grain); }
.lu_entry-content p { margin: 0 0 24px; }
.lu_entry-content strong { color: var(--lu-serpent); }
/* A12 (peaufiner 24/09, R-0608/R-0651) — soulignement épais, couleur accent
   foncée, animé au survol (épaississement + fond) ; réservé au corps d'article
   (.lu_entry-content), jamais ailleurs. */
.lu_entry-content a {
	color: var(--lu-langue-foncee);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: var(--lu-langue-foncee);
	transition: text-decoration-thickness .2s ease, background-color .2s ease;
}
.lu_entry-content a:hover { text-decoration-thickness: 3px; background: rgba(235,56,44,.08); }
.lu_entry-content h2 { font-family: var(--lu-font-accent); font-style: italic; font-weight: 500; text-transform: none; font-size: var(--lu-s-56); line-height: 1.1; color: var(--lu-serpent); margin: 48px 0 20px; }
.lu_entry-content h2::before { content: attr(data-n); color: var(--lu-langue); font-family: var(--lu-font-caractere); font-size: var(--lu-s-15); vertical-align: super; margin-right: 6px; }
.lu_entry-content h3 { font-family: var(--lu-font-caractere); font-size: var(--lu-s-24); margin: 32px 0 14px; }
.lu_entry-content img { margin: 28px 0; width: 100%; object-fit: cover; }
.lu_entry-content img[data-ratio="portrait"] { aspect-ratio: 740/1000; }
.lu_entry-content img[data-ratio="paysage"] { aspect-ratio: 740/490; }
/* A10 (peaufiner 24/09, ui-ux-pro-max invoqué — grille article AR-002/AR-008) —
   listes et tableaux bruts hérités (52 % / 10 % des 844 articles) : rendus en
   blocs visuels par le gabarit, jamais une puce nue. Sélecteur ">" pour ne
   jamais toucher le <ul> interne du composant Sources (imbriqué plus profond). */
.lu_entry-content > ul, .lu_entry-content > ol {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	counter-reset: lu_liste;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lu_entry-content > ul > li, .lu_entry-content > ol > li {
	counter-increment: lu_liste;
	position: relative;
	margin: 0;
	padding: 14px 18px 14px 52px;
	background: var(--lu-lin);
	border-left: 3px solid var(--lu-langue);
	color: var(--lu-grain);
}
.lu_entry-content > ul > li::before, .lu_entry-content > ol > li::before {
	content: counter(lu_liste, decimal-leading-zero);
	position: absolute;
	left: 16px;
	top: 14px;
	font-family: var(--lu-font-caractere);
	font-weight: 700;
	color: var(--lu-langue-foncee);
}

/* Tableau brut du contenu hérité (pas encapsulé .sbs_tableau) — même
   traitement zébré/responsive que les infographies du socle (AR-008/MO-013). */
.lu_entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
	font-size: var(--lu-s-15);
}
.lu_entry-content th, .lu_entry-content td {
	border: 1px solid var(--lu-filet);
	padding: 10px 14px;
	text-align: left;
}
.lu_entry-content th {
	background: var(--lu-serpent);
	color: var(--lu-papier);
	font-family: var(--lu-font-caractere);
	text-transform: uppercase;
	font-size: var(--lu-s-12);
	letter-spacing: .04em;
}
.lu_entry-content tbody tr:nth-child(even) { background: var(--lu-lin); }
@media (max-width: 700px) {
	.lu_entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Bloc Sources — composant visuel (P3, verdict 24/09), posé par app.js autour
   du <ul> qui suit un titre "Sources" : jamais une liste à puces brute. */
.lu_sources { background: var(--lu-lin); padding: 22px 24px; margin: 32px 0; }
.lu_sources__titre { display: block; font-family: var(--lu-font-caractere); text-transform: uppercase; font-size: var(--lu-s-17); margin: 0 0 14px; }
.lu_sources ul.lu_sources__liste { list-style: none; margin: 0; padding: 0; counter-reset: src; }
.lu_sources ul.lu_sources__liste li { counter-increment: src; margin: 0 0 10px; padding-left: 8px; border-left: 3px solid transparent; }
.lu_sources ul.lu_sources__liste li::before { content: counter(src); color: var(--lu-langue); font-family: var(--lu-font-caractere); font-weight: 700; vertical-align: super; font-size: var(--lu-s-12); margin-right: 6px; }
/* A9 (peaufiner 24/09) — une source n'est jamais cliquable (R-0463) : neutralisé
   côté gabarit (pas seulement côté contenu) au cas où un lien s'y glisse. */
.lu_sources a { color: var(--lu-serpent); font-weight: 700; text-decoration: none; pointer-events: none; cursor: default; }
.lu_sources__paragraphe { margin: 0; color: var(--lu-grain); font-size: var(--lu-s-15); }
.lu_sources__paragraphe strong { display: block; color: var(--lu-serpent); font-family: var(--lu-font-caractere); text-transform: uppercase; font-size: var(--lu-s-17); margin-bottom: 8px; }

/* tableaux du corps — enveloppe posée par le socle, style posé ici (AR-008) */
.sbs_tableau { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.sbs_tableau table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: var(--lu-s-15); }
.sbs_tableau th, .sbs_tableau td { border: 1px solid var(--lu-filet); padding: 10px 14px; text-align: left; white-space: nowrap; }
.sbs_tableau th { background: var(--lu-lin); font-family: var(--lu-font-caractere); text-transform: uppercase; font-size: var(--lu-s-12); letter-spacing: .04em; }

/* infographies du socle (sbs_*) — fiche-étiquette (DA §4.4.8) */
sbs-lieu, sbs-tarifs, sbs-frise, sbs-jauges { display: block; border: 1px solid var(--lu-serpent); padding: 22px 24px; margin: 32px 0; background: var(--lu-lin); }
.sbs_lieu_nom, .sbs_tarifs_titre, .sbs_frise_titre, .sbs_jauges_titre { display: block; font-family: var(--lu-font-caractere); text-transform: uppercase; font-size: var(--lu-s-17); margin-bottom: 14px; }
sbs-tarif { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.sbs_tarif_libelle { color: var(--lu-grain); }
.sbs_tarif_barre { width: 100%; height: 10px; accent-color: var(--lu-langue); }
sbs-etape { display: flex; gap: 16px; padding: 10px 0; border-top: 1px solid var(--lu-filet); }
sbs-etape:first-of-type { border-top: 0; }
.sbs_etape_date { font-family: var(--lu-font-caractere); color: var(--lu-langue-foncee); flex-shrink: 0; width: 130px; }
sbs-jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; }
.sbs_jauges_titre { grid-column: 1/-1; }
sbs-jauge { text-align: center; }
.sbs_jauge_valeur { display: block; font-family: var(--lu-font-caractere); font-size: var(--lu-s-56); color: var(--lu-langue); }
.sbs_jauge_libelle { display: block; color: var(--lu-grain); font-size: var(--lu-s-12); text-transform: uppercase; }
.sbs_source { display: block; margin-top: 14px; color: var(--lu-grain); font-size: 0.8125rem; }
.sbs_lieu_carte { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--lu-langue-foncee); text-decoration: underline; }
.sbs_icone_repere { fill: currentColor; }

/* FAQ — details/summary natif (GD-044) */
.lu_faq details { border-top: 1px solid var(--lu-filet); padding: 14px 0; }
.lu_faq summary { font-family: var(--lu-font-caractere); font-size: var(--lu-s-22); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.lu_faq summary::-webkit-details-marker { display: none; }
.lu_faq summary::after { content: '+'; font-size: 1.4em; }
.lu_faq details[open] summary::after { content: '–'; }
.lu_faq p { margin-top: 12px; color: var(--lu-grain); }

/* point final : tête de serpent (procédé 1) */
.lu_fin-lecture { display: flex; justify-content: center; margin: 40px 0; }
.lu_fin-lecture svg { width: 28px; height: 25px; color: var(--lu-serpent); }

.lu_signature { border-top: 1px solid var(--lu-serpent); border-bottom: 1px solid var(--lu-serpent); padding: 28px 0; display: flex; gap: 20px; margin: 32px 0; }
.lu_signature .lu_avatar, .lu_signature img.lu_avatar { width: 100px; height: 100px; flex-shrink: 0; }
.lu_signature__nom { font-size: var(--lu-s-24); text-transform: none; font-family: var(--lu-font-caractere); text-decoration: none; color: var(--lu-serpent); display: inline-block; }
.lu_signature__fonction { color: var(--lu-grain); font-size: var(--lu-s-15); margin: 6px 0 10px; }
.lu_signature__date { color: var(--lu-grain); font-size: var(--lu-s-12); text-transform: uppercase; }

.lu_apropos-rubrique { margin: 40px 0; }

/* sidebar */
.lu_sidebar { position: sticky; top: calc(var(--lu-header-h-compact) + 20px); display: flex; flex-direction: column; gap: 28px; align-self: start; }
.lu_col__bloc { border: 1px solid var(--lu-filet); padding: 20px; }
.lu_col__titre { font-family: var(--lu-font-caractere); font-size: var(--lu-s-15); text-transform: uppercase; margin-bottom: 14px; }
.lu_sommaire { list-style: none; counter-reset: som; display: flex; flex-direction: column; gap: 10px; }
.lu_sommaire li { counter-increment: som; padding-left: 6px; border-left: 3px solid transparent; }
.lu_sommaire li.lu_sommaire--actif { border-left-color: var(--lu-langue); }
.lu_sommaire a { text-decoration: none; color: var(--lu-serpent); font-size: var(--lu-s-15); }
.lu_sommaire a::before { content: counter(som) '. '; color: var(--lu-langue); font-family: var(--lu-font-caractere); }
.lu_col__auteur { display: flex; gap: 12px; align-items: center; }
.lu_col__auteur .lu_avatar { width: 64px; height: 64px; }
.lu_a-lire-item { display: grid; grid-template-columns: 64px 1fr; gap: 10px; margin-bottom: 14px; align-items: center; }
.lu_a-lire-item .lu_carte-mini__media { aspect-ratio: 1/1; width: 64px; }
.lu_a-lire-item a { text-decoration: none; color: var(--lu-serpent); font-size: var(--lu-s-17); font-weight: 700; line-height: 1.2; }
.lu_col__pub { min-height: 250px; display: flex; align-items: center; justify-content: center; color: var(--lu-grain); font-size: var(--lu-s-12); text-transform: uppercase; border-style: dashed; }

.lu_dans-rubrique { padding: 56px 0; background: var(--lu-lin); }

/* =====================================================================
   16. AUTEURS
   ===================================================================== */
.lu_auteur-tete { text-align: center; padding: 56px 20px; background: var(--lu-lin); }
.lu_auteur-tete .lu_avatar { width: 140px; height: 140px; }
.lu_auteur-tete h1 { font-size: var(--lu-s-56); text-transform: none; font-family: var(--lu-font-caractere); text-transform: uppercase; }
.lu_auteur-tete .lu_role { font-family: var(--lu-font-accent); font-style: italic; color: var(--lu-grain); font-size: var(--lu-s-22); display: block; margin: 8px 0 16px; }
.lu_auteur-tete .lu_bio { max-width: var(--lu-texte); margin: 0 auto; color: var(--lu-grain); }

/* =====================================================================
   17. FORMULAIRES (contact éditorial + lettre)
   ===================================================================== */
.lu_form { display: flex; flex-direction: column; gap: 16px; }
.lu_form label { font-family: var(--lu-font-caractere); font-size: var(--lu-s-15); text-transform: uppercase; display: block; margin-bottom: 6px; }
.lu_form input[type="text"], .lu_form input[type="email"], .lu_form select, .lu_form textarea {
	width: 100%; border: 1px solid var(--lu-serpent); padding: 12px 14px; background: var(--lu-papier); font-family: var(--lu-font-lecture);
}
.lu_form input:focus, .lu_form select:focus, .lu_form textarea:focus { outline: 2px solid var(--lu-langue); outline-offset: 1px; }
.lu_form__consentement { display: flex; gap: 10px; align-items: flex-start; font-size: var(--lu-s-15); }
.lu_form__consentement input { width: 20px; height: 20px; margin-top: 2px; }
.lu_form__delai { color: var(--lu-grain); font-size: var(--lu-s-15); margin-top: 16px; }

.lu_contact-tete { text-align: center; padding: 56px 20px; background: var(--lu-lin); }
.lu_contact-tete h1 { font-size: var(--lu-s-56); }
.lu_contact-tete p { font-family: var(--lu-font-accent); font-style: italic; font-size: var(--lu-s-22); color: var(--lu-grain); max-width: 700px; margin: 12px auto 0; }
.lu_contact-grille { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; padding: 48px 0; align-items: start; }
.lu_raison-carte { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--lu-filet); align-items: center; }
.lu_raison-carte:first-child { border-top: 0; }
.lu_raison-carte .lu_avatar { width: 56px; height: 56px; flex-shrink: 0; }
.lu_raison-carte__titre { font-family: var(--lu-font-caractere); font-size: var(--lu-s-17); text-transform: uppercase; }
.lu_raison-carte__texte { color: var(--lu-grain); font-size: var(--lu-s-15); }

/* =====================================================================
   18. PAGES GÉNÉRIQUES (page.php, 404, search, archive, mentions)
   ===================================================================== */
.lu_page-tete { text-align: center; padding: 56px 20px; background: var(--lu-lin); }
.lu_page-tete h1 { font-size: var(--lu-s-56); }
.lu_page-corps { max-width: var(--lu-texte); margin: 40px auto 60px; padding: 0 20px; color: var(--lu-grain); }
.lu_page-corps h2 { font-family: var(--lu-font-accent); font-style: italic; font-weight: 500; text-transform: none; font-size: var(--lu-s-34); margin: 32px 0 14px; color: var(--lu-serpent); }
.lu_page-corps a { color: var(--lu-langue-foncee); }

/* A5 (peaufiner 24/09, ui-ux-pro-max invoqué — grille apropos_auteurs) —
   bandeau titre riche + colonne de lecture 680-720px + sidebar (page.php
   générique + page-plan-du-site.php). Remplace le "h1 + the_content" nu. */
.lu_page-tete__surtitre { font-family: var(--lu-font-caractere); font-size: var(--lu-s-15); letter-spacing: .08em; text-transform: uppercase; color: var(--lu-langue-foncee); margin-bottom: 10px; }
.lu_page-tete__chapo { font-family: var(--lu-font-accent); font-style: italic; font-weight: 500; font-size: var(--lu-s-22); color: var(--lu-grain); max-width: var(--lu-texte); margin: 14px auto 0; }
.lu_page-layout { display: grid; grid-template-columns: minmax(0,700px) 340px; gap: 60px; margin: 48px auto 60px; align-items: start; justify-content: center; }
.lu_page-layout .lu_page-corps { max-width: none; margin: 0; padding: 0; }
.lu_page-sidebar__rubriques { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lu_page-sidebar__rubriques a { text-decoration: none; color: var(--lu-serpent); font-family: var(--lu-font-caractere); font-size: var(--lu-s-17); text-transform: uppercase; }
.lu_page-sidebar__rubriques a:hover { color: var(--lu-langue-foncee); }
@media (max-width: 900px) {
	.lu_page-layout { grid-template-columns: minmax(0,1fr); }
}

/* Plan du site (page-plan-du-site.php) */
.lu_plan-site { max-width: var(--lu-texte); margin: 40px auto 60px; }
.lu_plan-site__bloc { margin-bottom: 48px; }
.lu_plan-site__bloc h2 { font-family: var(--lu-font-accent); font-style: italic; font-weight: 500; text-transform: none; font-size: var(--lu-s-34); margin-bottom: 18px; color: var(--lu-serpent); }
.lu_plan-site__grille { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.lu_plan-site__grille a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--lu-serpent); font-family: var(--lu-font-caractere); font-size: var(--lu-s-17); text-transform: uppercase; border: 1px solid var(--lu-filet); padding: 8px 14px; }
.lu_plan-site__grille a:hover { border-color: var(--lu-langue); color: var(--lu-langue-foncee); }
.lu_plan-site__liste { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lu_plan-site__liste a { color: var(--lu-serpent); text-decoration: underline; text-decoration-color: var(--lu-filet); }
.lu_plan-site__liste--articles li { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--lu-filet); padding-top: 10px; }
.lu_plan-site__liste--articles li:first-child { border-top: 0; padding-top: 0; }
.lu_plan-site__auteurs { list-style: none; display: flex; gap: 24px; flex-wrap: wrap; }
.lu_plan-site__auteurs a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--lu-serpent); font-size: var(--lu-s-15); }

.lu_404 { text-align: center; padding: 100px 20px; }
.lu_404 .lu_serpent-groupe { margin-bottom: 20px; }
.lu_404 .lu_serpent-icone { width: 60px; height: 54px; }
.lu_404 .lu_langue-icone { width: 20px; height: 10px; }
.lu_404 h1 { font-size: var(--lu-s-56); }

/* =====================================================================
   19. RESPONSIVE — 390px (mobile)
   ===================================================================== */
@media (max-width: 900px) {
	/* T3 (verdict 24/09) — minmax(0,1fr) partout où une colonne passe à 1fr :
	   un enfant grid garde sinon sa largeur de contenu minimale (image, titre
	   non coupable) et pousse toute la page en défilement horizontal. */
	.lu_article-corps { grid-template-columns: minmax(0,1fr); }
	.lu_sidebar { position: static; }
	/* Retour Mathias 24/09 — la barre latérale empilée sous l'article rendait le
	   « Sommaire » en FIN de lecture : inutile, on ne l'affiche plus sur mobile
	   (le repère « Au sommaire » de l'introduction reste). */
	#lu_sidebar-sommaire { display: none; }
	.lu_deux-colonnes { grid-template-columns: minmax(0,1fr); }
	.lu_rubrique-grille { grid-template-columns: minmax(0,1fr); }
	.lu_titre-vertical { writing-mode: horizontal-tb; transform: none; font-size: var(--lu-s-34); margin-bottom: 12px; }
	.lu_rubrique-grille__corps { grid-template-columns: minmax(0,1fr); }
	.lu_pied__grille { grid-template-columns: minmax(0,1fr); text-align: center; }
	.lu_pied__colonne ul { align-items: center; }
}
@media (max-width: 600px) {
	/* T8 (verdict 24/09) — 3 colonnes réelles (burger / logo centré / actions),
	   au lieu du flex 2-blocs qui écrasait le logo contre la loupe. */
	.lu_entete__etage1 {
		display: grid; grid-template-columns: 44px minmax(0,1fr) 44px 44px;
		align-items: center; gap: 8px; padding: 10px 16px;
	}
	.lu_entete__sociaux { display: none; }
	.lu_entete__droite { display: contents; }
	.lu_burger { grid-column: 1; order: 1; }
	.lu_entete__marque { grid-column: 2; order: 2; }
	.lu_bouton--contour { grid-column: 3; order: 3; width: 44px; height: 44px; padding: 0; justify-content: center; }
	.lu_bouton__libelle { display: none; }
	.lu_entete__recherche-btn { grid-column: 4; order: 4; }
	.lu_entete__logo { height: 40px; }
	.lu_entete__baseline { display: none; }
	.lu_burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--lu-serpent); background: none; }
	.lu_burger svg { width: 20px; height: 20px; }
	.lu_nav { display: none; }
	.lu_nav--ouvert { display: block; position: fixed; inset: 0; background: var(--lu-papier); z-index: 200; overflow-y: auto; }
	.lu_nav--ouvert .lu_nav__liste { flex-direction: column; align-items: center; padding: 80px 20px 40px; gap: 24px; }
	.lu_nav--ouvert .lu_nav__liste a { font-family: var(--lu-font-caractere); text-transform: uppercase; font-size: var(--lu-s-34); }
	.lu_nav__fermer { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 1px solid var(--lu-serpent); background: none; z-index: 201; }

	.lu_fil__item { grid-template-columns: minmax(0,1fr); gap: 14px; }
	.lu_fil__media { aspect-ratio: 16/10; }
	.lu_fil__titre { font-size: var(--lu-s-24); }

	/* T3 (verdict 24/09) — scrollWidth mesuré à 450px pour 390 : les bandes qui
	   portent un carrousel horizontal doivent contenir SON débordement, pas le
	   laisser fuir sur le document entier. */
	.lu_section, .lu_recherche-bande, .lu_bande-rouge { overflow-x: clip; }
	.lu_carrousel { max-width: 100%; }

	.lu_bandeau-mot-cle { padding: 10px 16px; }
	.lu_bandeau-mot-cle h1 { font-size: 1rem; line-height: 1.3; }

	.lu_hero__slide { min-height: 380px; }
	.lu_hero__contenu { padding: 40px 16px 40px; }

	.lu_recherche-bande__form { flex-direction: row; }
	.lu_raccourcis { gap: 8px 16px; }
	.lu_raccourcis a { font-size: var(--lu-s-17); }

	.lu_article-hero__h1 { font-size: 2.4rem; }
	.lu_article-corps { padding: 0 16px; }
	.lu_contact-grille { grid-template-columns: 1fr; }

	.lu_carrousel__carte { flex-basis: 200px; }

	.lu_bande-rouge__inner { flex-direction: column; text-align: center; }
	.lu_bande-rouge__titre { font-size: var(--lu-s-34); }

	.lu_ouverture__panneau { position: static; margin: 0; max-width: none; }
	.lu_ouverture { aspect-ratio: 390/300; }

	.lu_rubrique-h1-ligne { flex-direction: column; align-items: flex-start; }
	.lu_sous-themes { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; gap: 20px; }

	.lu_conteneur, .lu_large { padding: 0 16px; }

	/* A1 (peaufiner 24/09) — .lu_entete--compact .lu_entete__etage1{display:none}
	   (règle desktop, ligne ~213) videait TOUT le header sur mobile : à 390px,
	   .lu_nav (qui prend le relais en compact desktop) reste display:none tant
	   que le menu n'est pas ouvert — il ne restait plus que le filet rouge de
	   2px. On garde l'étage 1 visible mais réduit en hauteur au lieu de le
	   masquer, pour que le header ne disparaisse JAMAIS au scroll mobile. */
	.lu_entete--compact .lu_entete__etage1 { display: grid; padding: 6px 16px; }
	.lu_entete--compact .lu_entete__logo { height: 30px; }
}

/* Portrait de signature : jamais ovale (passe 2, 24/09) */
.lu_signature > a:first-child { flex: 0 0 100px; width: 100px; height: 100px; }
.lu_signature img { width: 100px !important; height: 100px !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
@media (max-width: 600px) {
	.lu_signature > a:first-child { flex-basis: 72px; width: 72px; height: 72px; }
	.lu_signature img { width: 72px !important; height: 72px !important; }
}

/* Repères d'article (recette 24/09) */
.lu_encadre { background: var(--lu-lin); border-left: 4px solid var(--lu-langue-fond); padding: 22px 26px; margin: 32px 0; }
.lu_encadre__titre { font-family: var(--lu-font-titre, 'Sofia Sans Extra Condensed'), sans-serif; text-transform: uppercase; font-size: 20px; letter-spacing: .04em; margin: 0 0 12px; color: var(--lu-serpent); }
.lu_encadre--sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lu_encadre--sommaire li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; }
.lu_encadre__num { color: var(--lu-langue-foncee); font-size: 13px; font-weight: 700; min-width: 22px; }
.lu_encadre--tableau { overflow-x: auto; padding: 0; border-left: 0; background: transparent; }

/* Recette 24/09 — en-tête d'article aligné à gauche (un seul bord, pas de long texte centré) */
.lu_article-hero { text-align: left; max-width: 1000px; }
.lu_article-hero__pastilles, .lu_article-hero .lu_fil-ariane, .lu_article-hero__meta, .lu_article-hero__auteur { justify-content: flex-start; text-align: left; }
.lu_article-hero__h1, .lu_article-hero__chapo { margin-left: 0; margin-right: 0; }
/* Sur ordinateur, le sommaire vit dans la colonne latérale : pas de doublon (R-0478). */
@media (min-width: 901px) { .lu_encadre--sommaire { display: none; } }

/* =====================================================================
   R-1124 / R-1125 / R-1126 (24/09) — bande marque, rédaction, pied de page
   ui-ux-pro-max invoqué pour : ces 3 sections (grille footer + apropos_auteurs)
   ===================================================================== */
.lu_heritage { background: var(--lu-serpent); color: var(--lu-papier); padding: 88px 0; overflow: hidden; }
.lu_heritage__grille { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 72px; align-items: center; }
.lu_heritage__photos { position: relative; min-height: 440px; }
.lu_heritage__photo { position: absolute; object-fit: cover; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.lu_heritage__photo--a { width: 66%; aspect-ratio: 1/1; left: 0; top: 0; }
.lu_heritage__photo--b { width: 52%; aspect-ratio: 1/1; right: 0; bottom: 0; border: 8px solid var(--lu-serpent); }
.lu_heritage__surtitre { font-family: var(--lu-font-caractere); text-transform: uppercase; letter-spacing: .12em; font-size: 15px; color: var(--lu-langue); margin: 0 0 14px; }
.lu_redaction .lu_heritage__surtitre { color: var(--lu-langue-foncee); }
.lu_heritage__titre { font-size: clamp(2.4rem, 4vw, 4rem); line-height: .95; color: var(--lu-papier); margin: 0 0 22px; }
.lu_heritage__chapo { font-family: var(--lu-font-accent); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: rgba(255,255,255,.86); margin: 0 0 32px; max-width: 34ch; }

.lu_redaction { background: var(--lu-lin); padding: 88px 0; }
.lu_redaction__grille { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.6fr); gap: 64px; align-items: center; }
.lu_redaction__titre { font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: .98; margin: 0 0 20px; }
.lu_redaction__intro p { color: var(--lu-grain); font-size: 1.05rem; line-height: 1.65; margin: 0 0 22px; }
.lu_lien-fleche { font-family: var(--lu-font-caractere); text-transform: uppercase; letter-spacing: .06em; font-size: 17px; color: var(--lu-serpent); text-decoration: none; border-bottom: 2px solid var(--lu-langue-fond); padding-bottom: 3px; }
.lu_redaction__cartes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.lu_redac-carte { background: var(--lu-papier); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 20px 26px; text-decoration: none; color: var(--lu-serpent); border-top: 4px solid var(--lu-serpent); transition: transform .2s ease, border-color .2s ease; }
.lu_redac-carte:hover { transform: translateY(-4px); border-top-color: var(--lu-langue-fond); }
.lu_redac-carte img.lu_avatar, .lu_redac-carte .lu_avatar { width: 96px !important; height: 96px !important; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; margin: 0 0 16px; }
.lu_redac-carte__nom { font-family: var(--lu-font-caractere); text-transform: uppercase; font-size: 24px; letter-spacing: .02em; }
.lu_redac-carte__spe { font-family: var(--lu-font-accent); font-style: italic; font-size: 15px; color: var(--lu-grain); margin: 6px 0 16px; line-height: 1.35; }
.lu_redac-carte__n { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--lu-langue-foncee); text-transform: uppercase; letter-spacing: .06em; }

.lu_pied { padding: 72px 0 28px; }
.lu_pied__couture, .lu_pied__composition { display: none; }
.lu_pied__grille { grid-template-columns: minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1fr); gap: 48px; align-items: start; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.14); }
.lu_pied__marque { text-align: left; }
.lu_pied__logo { height: 60px; width: auto; }
.lu_pied__baseline { font-family: var(--lu-font-accent); font-style: italic; font-size: 17px; margin: 14px 0 10px; color: var(--lu-papier); }
.lu_pied__apropos { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.6; margin: 0; max-width: 32ch; }
.lu_pied__colonne h3 { color: var(--lu-papier); margin: 6px 0 18px; letter-spacing: .1em; }
.lu_pied__deux-colonnes { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 24px; }
.lu_pied__ecrire p { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.lu_pied__bas { padding-top: 24px; font-size: 13px; color: rgba(255,255,255,.6); }
.lu_pied__bas a { color: rgba(255,255,255,.75); }

@media (max-width: 1024px) {
	.lu_pied__grille { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.lu_redaction__grille, .lu_heritage__grille { grid-template-columns: minmax(0,1fr); gap: 40px; }
}
@media (max-width: 600px) {
	.lu_heritage, .lu_redaction { padding: 56px 0; }
	.lu_heritage__photos { min-height: 300px; }
	.lu_redaction__cartes { grid-template-columns: minmax(0,1fr); }
	.lu_redac-carte { flex-direction: row; text-align: left; gap: 16px; padding: 18px; align-items: center; }
	.lu_redac-carte img.lu_avatar, .lu_redac-carte .lu_avatar { width: 64px !important; height: 64px !important; margin: 0; flex-shrink: 0; }
	.lu_redac-carte__spe { margin: 2px 0 6px; }
	.lu_pied__grille { grid-template-columns: minmax(0,1fr); gap: 36px; }
	.lu_pied__bas { flex-direction: column; gap: 10px; }
}
/* formulaire « idée de sujet » de la colonne d'article */
.lu_col__bloc textarea { width: 100%; border: 1px solid var(--lu-serpent); padding: 10px 12px; font: inherit; font-size: 15px; margin: 8px 0 10px; resize: vertical; background: var(--lu-papier); }
.lu_pied a.lu_bouton--clair { color: var(--lu-serpent); text-decoration: none; }
.lu_pied a.lu_bouton--clair:hover { color: var(--lu-papier); }
@media (min-width: 1025px) {
	.lu_pied__grille { grid-template-columns: minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1fr); }
	.lu_pied__deux-colonnes li { white-space: nowrap; }
}
.lu_redac-carte__txt { display: flex; flex-direction: column; align-items: inherit; flex: 1; }
@media (max-width: 600px) {
	.lu_redac-carte { align-items: center; }
	.lu_redac-carte__txt { align-items: flex-start; }
	.lu_redac-carte__nom { font-size: 21px; }
	.lu_pied__grille { grid-template-columns: minmax(0,1fr) !important; }
	.lu_pied__colonne, .lu_pied__marque { text-align: left; }
}
.lu_pied__bas { border-top: 0 !important; }
@media (max-width: 600px) { .lu_pied__colonne ul { align-items: flex-start !important; text-align: left !important; } }