/* =========================================================
   Tais-toi & parle — la gazette qui parle
   Encre & papier journal, un seul rouge : celui du voyant
   « antenne ». Titraille Fraunces, corps Charter/Georgia,
   timecodes en mono.
   ========================================================= */

@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-roman.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-italic.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--papier: #efede4;
	--papier-clair: #f7f5ee;
	--encre: #1c1a16;
	--plomb: #6b675c;
	--filet: #c9c4b4;
	--rouge: #c21f1f;
	--rouge-sombre: #8f1717;
	--titraille: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--corps: Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, serif;
	--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--mesure: 42rem;
	--gouttiere: clamp(1rem, 3vw, 2.5rem);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--papier);
	color: var(--encre);
	font-family: var(--corps);
	font-size: 1.0625rem;
	line-height: 1.65;
}

a { color: var(--encre); text-decoration-color: var(--filet); text-underline-offset: 3px; }
a:hover { color: var(--rouge); text-decoration-color: var(--rouge); }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }

img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* ---------- En-tête façon « une » ---------- */

.ttep-entete { border-bottom: 3px double var(--encre); }

.ttep-entete-haut {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem var(--gouttiere);
	border-bottom: 1px solid var(--filet);
	font-family: var(--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--plomb);
}
.ttep-entete-haut p { margin: 0; }
.ttep-devise::before {
	content: '';
	display: inline-block;
	width: 0.55em; height: 0.55em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: var(--rouge);
	animation: ttep-antenne 2.4s ease-in-out infinite;
}

.ttep-titre-site { text-align: center; padding: clamp(1.2rem, 4vw, 2.5rem) var(--gouttiere) 0.8rem; }
.ttep-titre-site a {
	font-family: var(--titraille);
	font-weight: 900;
	font-size: clamp(2.4rem, 7vw, 5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--encre);
}
.ttep-titre-site .ttep-et { color: var(--rouge); font-style: italic; font-weight: 600; }
.ttep-sous-titre {
	margin: 0.6rem auto 0;
	max-width: var(--mesure);
	font-style: italic;
	color: var(--plomb);
}

.ttep-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	padding: 0.55rem var(--gouttiere);
	border-top: 1px solid var(--encre);
}
.ttep-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.5rem;
	margin: 0; padding: 0;
	list-style: none;
	font-family: var(--mono);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.ttep-menu a { text-decoration: none; }
.ttep-menu-cta a {
	color: var(--rouge);
	border: 1px solid var(--rouge);
	padding: 0.15rem 0.6rem;
}
.ttep-menu-cta a:hover { background: var(--rouge); color: var(--papier-clair); }

.ttep-recherche { display: flex; gap: 0; }
.ttep-recherche input {
	font: inherit;
	font-size: 0.9rem;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--encre);
	border-right: 0;
	background: var(--papier-clair);
	color: var(--encre);
	min-width: 12rem;
}
.ttep-recherche button {
	font-family: var(--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--encre);
	background: var(--encre);
	color: var(--papier-clair);
	cursor: pointer;
}
.ttep-recherche button:hover { background: var(--rouge); border-color: var(--rouge); }

/* ---------- Structure des pages ---------- */

.ttep-contenu { max-width: 72rem; margin: 0 auto; padding: 0 var(--gouttiere) 3rem; }

.ttep-section { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* Filet « onde sonore » sous les titres de section : la signature du site. */
.ttep-section-titre,
.ttep-rubrique {
	font-family: var(--mono);
	font-size: 0.8rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--encre);
	margin: 0 0 1.2rem;
	padding-bottom: 0.7rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='12'%3E%3Cg fill='%23c21f1f'%3E%3Crect x='0' y='5' width='2' height='2'/%3E%3Crect x='6' y='3' width='2' height='6'/%3E%3Crect x='12' y='1' width='2' height='10'/%3E%3Crect x='18' y='4' width='2' height='4'/%3E%3Crect x='24' y='2' width='2' height='8'/%3E%3Crect x='30' y='5' width='2' height='2'/%3E%3Crect x='36' y='3' width='2' height='6'/%3E%3Crect x='42' y='5' width='2' height='2'/%3E%3Crect x='48' y='4' width='2' height='4'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: 56px 12px;
}

.ttep-page-tete { margin-top: clamp(2rem, 5vw, 3rem); }
.ttep-page-tete h1, .ttep-fiche-titre {
	font-family: var(--titraille);
	font-weight: 900;
	font-size: clamp(1.9rem, 4.5vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	margin: 0.2rem 0 0.6rem;
}
.ttep-page-chapo {
	max-width: var(--mesure);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--plomb);
	margin: 0 0 1.2rem;
}

.ttep-surtitre {
	font-family: var(--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--rouge);
	margin: 0 0 0.3rem;
}
.ttep-surtitre a { color: inherit; text-decoration: none; }
.ttep-surtitre a:hover { text-decoration: underline; }

/* ---------- À la une ---------- */

.ttep-une {
	margin-top: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.2rem, 3vw, 2.2rem);
	border: 1px solid var(--encre);
	box-shadow: 6px 6px 0 var(--filet);
	background: var(--papier-clair);
}
.ttep-une-titre {
	font-family: var(--titraille);
	font-weight: 900;
	font-size: clamp(1.8rem, 5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0.2rem 0 0.6rem;
	max-width: 60rem;
}
.ttep-une-titre a { text-decoration: none; }
.ttep-une-titre a:hover { color: var(--rouge); }
.ttep-une-chapo {
	max-width: var(--mesure);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--plomb);
	margin: 0 0 1rem;
}

/* ---------- Lecteur ---------- */

.ttep-lecteur { max-width: 46rem; margin: 1.2rem 0; }
.ttep-lecteur:has(.ttep-audio, .ttep-embed)::before {
	content: '● En ondes';
	display: block;
	font-family: var(--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--rouge);
	margin-bottom: 0.4rem;
	animation: ttep-antenne 2.4s ease-in-out infinite;
}

.ttep-audio { width: 100%; display: block; }

.ttep-embed { position: relative; }
.ttep-embed iframe { width: 100%; min-height: 10rem; border: 1px solid var(--filet); }
.ttep-embed-video iframe { aspect-ratio: 16 / 9; min-height: 0; }

.ttep-lien-source { margin: 0.6rem 0 0; }
.ttep-lien-source a {
	font-family: var(--mono);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rouge);
	text-decoration: none;
	border-bottom: 1px solid var(--rouge);
}
.ttep-lien-source a:hover { color: var(--rouge-sombre); }
.ttep-muet { font-style: italic; color: var(--plomb); }

/* ---------- Infos & badges ---------- */

.ttep-infos {
	font-family: var(--mono);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--plomb);
	margin: 0.4rem 0 0;
}
.ttep-infos a { color: inherit; text-decoration: none; }
.ttep-infos a:hover { color: var(--rouge); }
.ttep-sep { color: var(--filet); }
.ttep-badge-source { color: var(--encre); font-weight: 700; }

.ttep-humeurs { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ttep-badge-humeur {
	font-family: var(--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rouge);
	border: 1px solid currentColor;
	padding: 0.1rem 0.5rem;
	text-decoration: none;
	transform: rotate(-1deg);
}
.ttep-badge-humeur:nth-child(2n) { transform: rotate(1deg); }
.ttep-badge-humeur:hover { background: var(--rouge); color: var(--papier-clair); }
.ttep-humeurs-grandes .ttep-badge-humeur { font-size: 0.85rem; padding: 0.25rem 0.7rem; }

.ttep-compte { opacity: 0.55; font-size: 0.85em; }
.ttep-etiquette {
	font-family: var(--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--plomb);
}

/* ---------- Grille de brèves ---------- */

.ttep-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.5rem var(--gouttiere);
}
.ttep-carte {
	border-top: 3px solid var(--encre);
	padding-top: 0.7rem;
	display: flex;
	flex-direction: column;
}
.ttep-carte-titre {
	font-family: var(--titraille);
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.15;
	margin: 0.1rem 0 0.4rem;
}
.ttep-carte-titre a { text-decoration: none; }
.ttep-carte-titre a:hover { color: var(--rouge); }
.ttep-carte-extrait { margin: 0 0 0.6rem; font-size: 0.95rem; }
.ttep-carte-pied { margin-top: auto; }

.ttep-tout-voir { margin-top: 1.5rem; }
.ttep-tout-voir a {
	font-family: var(--mono);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-bottom: 1px solid var(--encre);
}

/* ---------- Filtres ---------- */

.ttep-filtres {
	border-top: 1px solid var(--filet);
	border-bottom: 1px solid var(--filet);
	padding: 0.7rem 0;
	display: grid;
	gap: 0.5rem;
}
.ttep-filtre-groupe { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.ttep-filtre-groupe .ttep-etiquette { min-width: 6.5rem; }
.ttep-filtre {
	font-family: var(--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	padding: 0.1rem 0.45rem;
	border: 1px solid transparent;
}
.ttep-filtre:hover { border-color: var(--rouge); }
.ttep-filtre.est-actif { background: var(--encre); color: var(--papier-clair); }

/* ---------- Fiche extrait ---------- */

.ttep-fiche { max-width: 52rem; }
.ttep-fiche-tete { margin-top: clamp(2rem, 5vw, 3rem); }
.ttep-fiche-corps { max-width: var(--mesure); }
.ttep-fiche-corps p:first-of-type::first-letter {
	font-family: var(--titraille);
	font-weight: 900;
	font-size: 3.2em;
	line-height: 0.85;
	float: left;
	padding-right: 0.12em;
	color: var(--rouge);
}
.ttep-fiche-pied {
	margin-top: 2rem;
	border-top: 1px solid var(--filet);
	padding-top: 1rem;
}
.ttep-personnes { margin: 0.6rem 0 0; }
.ttep-credits { font-size: 0.85rem; font-style: italic; color: var(--plomb); margin-top: 1rem; }

.ttep-lies { border-top: 3px double var(--encre); padding-top: 1.5rem; }

/* ---------- Entrées (accueil) ---------- */

.ttep-entrees-colonnes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem var(--gouttiere);
}
.ttep-liste-sources { margin: 0; padding: 0; list-style: none; }
.ttep-liste-sources li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--filet);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.ttep-liste-sources a { text-decoration: none; }
.ttep-liste-sources a:hover { color: var(--rouge); }

.ttep-appel {
	text-align: center;
	border: 1px solid var(--encre);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--papier-clair);
}
.ttep-appel h2 {
	font-family: var(--titraille);
	font-weight: 900;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	margin: 0 0 0.5rem;
}
.ttep-appel p { max-width: var(--mesure); margin: 0.4rem auto; }

.ttep-bouton {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: var(--rouge);
	color: var(--papier-clair);
	border: 1px solid var(--rouge);
	padding: 0.6rem 1.4rem;
	text-decoration: none;
	cursor: pointer;
}
.ttep-bouton:hover { background: var(--rouge-sombre); border-color: var(--rouge-sombre); color: var(--papier-clair); }

/* ---------- Formulaire ---------- */

.ttep-formulaire { max-width: var(--mesure); }
.ttep-formulaire label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.ttep-formulaire input[type='text'],
.ttep-formulaire input[type='url'],
.ttep-formulaire select,
.ttep-formulaire textarea {
	font: inherit;
	width: 100%;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--encre);
	background: var(--papier-clair);
	color: var(--encre);
}
.ttep-formulaire textarea { resize: vertical; }
.ttep-requis { color: var(--rouge); }
.ttep-note { font-size: 0.85rem; font-style: italic; color: var(--plomb); }
.ttep-champ-pot { position: absolute; left: -9999px; }

.ttep-message { padding: 0.8rem 1rem; border: 1px solid; max-width: var(--mesure); margin-top: 1rem; }
.ttep-message-ok { border-color: var(--encre); background: var(--papier-clair); }
.ttep-message-erreur { border-color: var(--rouge); color: var(--rouge-sombre); background: var(--papier-clair); }

/* ---------- Pagination, vides, 404 ---------- */

.pagination, .navigation { margin-top: 2rem; font-family: var(--mono); font-size: 0.85rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pagination .page-numbers {
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--filet);
	text-decoration: none;
}
.pagination .page-numbers.current { background: var(--encre); color: var(--papier-clair); border-color: var(--encre); }

.ttep-vide { font-style: italic; color: var(--plomb); }
.ttep-404 { text-align: center; }
.ttep-404 .ttep-recherche { justify-content: center; margin: 1.5rem 0; }
.ttep-404 .ttep-page-chapo { margin-left: auto; margin-right: auto; }

/* ---------- Pied de page ---------- */

.ttep-pied {
	margin-top: 4rem;
	border-top: 3px double var(--encre);
	background: var(--encre);
	color: var(--papier);
	padding: 2rem var(--gouttiere) 1rem;
}
.ttep-pied-colonnes {
	max-width: 72rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem;
}
.ttep-pied h2 {
	font-family: var(--mono);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--filet);
	margin: 0 0 0.6rem;
}
.ttep-pied p { margin: 0; font-size: 0.9rem; }
.ttep-pied ul { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.ttep-pied li { padding: 0.15rem 0; }
.ttep-pied a { color: var(--papier); text-decoration-color: var(--plomb); }
.ttep-pied a:hover { color: #fff; text-decoration-color: var(--rouge); }
.ttep-pied-bas {
	max-width: 72rem;
	margin: 2rem auto 0;
	padding-top: 0.8rem;
	border-top: 1px solid #3a372f;
	font-family: var(--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--plomb);
}

/* ---------- Divers ---------- */

@keyframes ttep-antenne {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
	.ttep-devise::before, .ttep-lecteur::before { animation: none; }
	.ttep-badge-humeur, .ttep-badge-humeur:nth-child(2n) { transform: none; }
}

@media (max-width: 40rem) {
	.ttep-entete-haut { justify-content: center; }
	.ttep-date-jour { display: none; }
	.ttep-recherche input { min-width: 0; flex: 1; }
	.ttep-nav { justify-content: stretch; }
	.ttep-recherche { width: 100%; }
	.ttep-une { box-shadow: 4px 4px 0 var(--filet); }
}