/* ==========================================================================
   Tonton Malin — feuille de styles principale
   --------------------------------------------------------------------------
   Reproduit la Direction A validée (terracotta / bleu nuit / moutarde / crème).
   Organisation :
     1. Variables (palette, radius, shadows, typo)
     2. Reset léger + typo de base
     3. Utilitaires repris de la maquette (paper-A, ph-stripe, etc.)
     4. Layout / container / grid responsive
     5. Boutons & formulaires (pills)
     6. Header
     7. Hero
     8. Module carburants
     9. Cards bon plan + section bons-plans
    10. Cards aide État + section aides
    11. Section services partenaires
    12. Newsletter CTA
    13. Section "derniers articles"
    14. Footer
    15. Templates single & archive CPT
   ==========================================================================*/

/* ================== 1. VARIABLES ========================================== */
:root {
	--tm-terracotta:    #C85A2E;
	--tm-bleu-nuit:     #2B3A55;
	--tm-moutarde:      #E8A33D;
	--tm-creme:         #FBF5EC;
	--tm-encre:         #1F1A15;
	--tm-blanc:         #FFFFFF;

	--tm-ink-soft:      rgba(31, 26, 21, 0.80);
	--tm-ink-quiet:     rgba(31, 26, 21, 0.60);
	--tm-ink-faint:     rgba(31, 26, 21, 0.45);
	--tm-border:        rgba(31, 26, 21, 0.10);
	--tm-border-strong: rgba(31, 26, 21, 0.15);

	--tm-radius-card:   24px;
	--tm-radius-md:     16px;
	--tm-radius-sm:     12px;
	--tm-radius-pill:   999px;

	--tm-shadow-card:   0 1px 0 rgba(31, 26, 21, 0.06), 0 12px 24px -16px rgba(43, 58, 85, 0.20);
	--tm-shadow-soft:   0 1px 2px rgba(31, 26, 21, 0.06), 0 8px 24px -12px rgba(43, 58, 85, 0.18);

	--tm-font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
	--tm-font-body:     'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--tm-container-max: 1280px;
	--tm-container-px:  24px;
}

/* ================== 2. RESET LÉGER + TYPO BASE ============================ */

/* GeneratePress applique déjà un reset propre. On overrides juste ce qui change. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px; /* hauteur header sticky + air */
}

body.tontonmalin {
	font-family: var(--tm-font-body);
	color: var(--tm-encre);
	background-color: var(--tm-creme);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Tous les titres en Fraunces. Les graisses sont pilotées par classes (.tm-display) */
.tm-h1, .tm-h2, .tm-h3, .tm-h4 {
	font-family: var(--tm-font-display);
	color: var(--tm-bleu-nuit);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.05;
}

.tm-h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 900; line-height: 1.02; }
.tm-h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 900; line-height: 1.08; }
.tm-h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; }
.tm-h4 { font-size: 18px; font-weight: 700; }

.tm-overline {
	font-family: var(--tm-font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--tm-terracotta);
	margin-bottom: 8px;
	display: block;
}

.tm-lead {
	font-size: 17px;
	line-height: 1.6;
	color: var(--tm-ink-soft);
	max-width: 60ch;
}
@media (min-width: 768px) {
	.tm-lead { font-size: 19px; }
}

/* ================== 3. UTILITAIRES MAQUETTE =============================== */

/* Fond papier crème pointillé (Direction A) */
.tm-paper {
	background-color: var(--tm-creme);
	background-image: radial-gradient(circle at 1px 1px, rgba(31, 26, 21, 0.05) 1px, transparent 0);
	background-size: 22px 22px;
}

/* Motif rayé 135° utilisé pour les placeholders d'images */
.tm-ph-stripe {
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 12px);
}

/* Soulignement ondulé moutarde sur les mots-clés */
.tm-underline-wavy {
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--tm-moutarde);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Conteneur centré */
.tm-container {
	max-width: var(--tm-container-max);
	margin-inline: auto;
	padding-inline: var(--tm-container-px);
}

/* Grilles utilitaires */
.tm-grid { display: grid; gap: 24px; }
.tm-grid--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tm-grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tm-grid--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tm-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }

@media (min-width: 768px) {
	.tm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (min-width: 1024px) {
	.tm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Helpers col-span pour la grid 12 (utilisé sur hero + newsletter) */
.tm-col-span-7 { grid-column: span 12 / span 12; }
.tm-col-span-5 { grid-column: span 12 / span 12; }
@media (min-width: 1024px) {
	.tm-col-span-7 { grid-column: span 7 / span 7; }
	.tm-col-span-5 { grid-column: span 5 / span 5; }
}

/* Sections — espacement vertical commun */
.tm-section {
	padding-block: 64px;
	border-bottom: 1px solid var(--tm-border);
}
@media (min-width: 768px) {
	.tm-section { padding-block: 80px; }
}
.tm-section--cream { background-color: var(--tm-creme); background-image: radial-gradient(circle at 1px 1px, rgba(31, 26, 21, 0.05) 1px, transparent 0); background-size: 22px 22px; }
.tm-section--white { background-color: var(--tm-blanc); }
.tm-section--navy  { background-color: var(--tm-bleu-nuit); color: var(--tm-blanc); }

/* En-tête de section commun (overline + titre + texte aligné à droite) */
.tm-section-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}
.tm-section-head__text { max-width: 380px; font-size: 14px; color: var(--tm-ink-soft); line-height: 1.6; }
@media (min-width: 768px) {
	.tm-section-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
	}
}

/* Icônes inline */
.tm-icon { display: inline-block; vertical-align: middle; }
.tm-icon-text { display: inline-flex; align-items: center; gap: 8px; }

/* ================== 4. SHADOWS =========================================== */
.tm-shadow-card { box-shadow: var(--tm-shadow-card); }
.tm-shadow-soft { box-shadow: var(--tm-shadow-soft); }

/* ================== 5. BOUTONS & FORM ==================================== */

.tm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--tm-radius-pill);
	padding: 14px 24px;
	font-family: var(--tm-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform .12s ease, opacity .12s ease, background-color .12s ease;
	white-space: nowrap;
}
.tm-btn:hover { transform: translateY(-1px); }
.tm-btn:active { transform: translateY(0); opacity: 0.92; }

.tm-btn--terra { background-color: var(--tm-terracotta); color: var(--tm-blanc); }
.tm-btn--navy  { background-color: var(--tm-bleu-nuit); color: var(--tm-blanc); }
.tm-btn--ghost { background-color: var(--tm-blanc); color: var(--tm-bleu-nuit); border-color: var(--tm-border-strong); }

.tm-btn--sm { padding: 10px 18px; font-size: 13px; }

/* Formulaires "pill" */
.tm-input,
.tm-select {
	flex: 1;
	background-color: var(--tm-blanc);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-pill);
	padding: 12px 16px;
	font-family: var(--tm-font-body);
	font-size: 14px;
	color: var(--tm-encre);
	outline: none;
	min-width: 0;
}
.tm-input:focus,
.tm-select:focus {
	border-color: var(--tm-terracotta);
	box-shadow: 0 0 0 3px rgba(200, 90, 46, 0.15);
}
.tm-input::placeholder { color: var(--tm-ink-faint); }

/* Wrapper input avec icône à gauche (utilisé carburants + header search) */
.tm-input-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--tm-blanc);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-pill);
	padding: 4px 16px;
	min-height: 44px;
}
.tm-input-group .tm-input {
	border: none;
	padding: 0;
	box-shadow: none;
	background: transparent;
}
.tm-input-group .tm-icon { color: var(--tm-terracotta); flex-shrink: 0; }

/* ================== 6. HEADER ============================================ */

.tm-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background-color: rgba(251, 245, 236, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--tm-border);
}

.tm-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 12px;
}

.tm-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
}
.tm-header__logo-mark {
	width: 40px; height: 40px;
	border-radius: 50%;
	background-color: var(--tm-terracotta);
	color: var(--tm-blanc);
	display: grid;
	place-items: center;
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: 18px;
}
.tm-header__logo-name {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: 20px;
	color: var(--tm-bleu-nuit);
	line-height: 1;
}
.tm-header__logo-tag {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tm-terracotta);
	margin-top: 2px;
}

.tm-header__nav { display: none; gap: 4px; margin-left: 24px; }
.tm-header__nav a {
	padding: 6px 12px;
	border-radius: var(--tm-radius-pill);
	font-size: 14px;
	font-weight: 500;
	color: var(--tm-encre);
	text-decoration: none;
}
.tm-header__nav a:hover { background-color: rgba(31, 26, 21, 0.05); }
@media (min-width: 1024px) {
	.tm-header__nav { display: flex; }
}

.tm-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
.tm-header__search { display: none; width: 220px; }
@media (min-width: 768px) { .tm-header__search { display: inline-flex; } }
.tm-header__search .tm-input { font-size: 13px; padding-block: 4px; }

/* ================== 7. HERO ============================================== */

.tm-hero {
	padding-block: 56px;
	background-color: var(--tm-creme);
	background-image: radial-gradient(circle at 1px 1px, rgba(31, 26, 21, 0.05) 1px, transparent 0);
	background-size: 22px 22px;
	border-bottom: 1px solid var(--tm-border);
}
@media (min-width: 768px) { .tm-hero { padding-block: 80px; } }

.tm-hero__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
}

.tm-hero__copy { grid-column: span 12 / span 12; }
.tm-hero__visual { grid-column: span 12 / span 12; }
@media (min-width: 1024px) {
	.tm-hero__copy   { grid-column: span 7 / span 7; }
	.tm-hero__visual { grid-column: span 5 / span 5; }
}

.tm-hero__edition-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--tm-blanc);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-pill);
	padding: 6px 12px;
	margin-bottom: 24px;
	box-shadow: var(--tm-shadow-card);
	font-size: 12px;
	font-weight: 600;
	color: var(--tm-encre);
}
.tm-hero__edition-pill::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--tm-terracotta);
	animation: tm-pulse 1.6s ease-in-out infinite;
}
@keyframes tm-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.tm-hero__title {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--tm-bleu-nuit);
	margin: 0;
}
.tm-hero__title em { font-style: normal; color: var(--tm-terracotta); }

.tm-hero__subtitle {
	margin-top: 24px;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.6;
	color: #3a342d;
}
@media (min-width: 768px) { .tm-hero__subtitle { font-size: 19px; } }

.tm-hero__ctas {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.tm-hero__stats {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	font-size: 13px;
	color: var(--tm-encre);
}
.tm-hero__stats span { display: inline-flex; align-items: center; gap: 8px; }
.tm-hero__stats span .tm-icon { color: var(--tm-terracotta); }
.tm-hero__stats b { font-weight: 700; }

/* Carte "carnet" du hero — empilage de 3 cards rotatées */
.tm-hero__card-stack { position: relative; }

.tm-hero__sticker {
	position: absolute;
	top: -16px; left: -16px;
	width: 96px; height: 96px;
	border-radius: 50%;
	background-color: var(--tm-moutarde);
	display: grid; place-items: center;
	transform: rotate(-6deg);
	box-shadow: var(--tm-shadow-card);
	font-family: var(--tm-font-display);
	color: var(--tm-encre);
	text-align: center;
	z-index: 2;
}
.tm-hero__sticker-label  { font-size: 11px; text-transform: uppercase; font-weight: 600; }
.tm-hero__sticker-number { font-size: 24px; font-weight: 900; line-height: 1; }
.tm-hero__sticker-foot   { font-size: 10px; }

.tm-hero__card {
	background-color: var(--tm-blanc);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-card);
	padding: 24px;
	box-shadow: var(--tm-shadow-card);
	transform: rotate(-1deg);
}
.tm-hero__card-art {
	background-color: var(--tm-creme);
	border: 1px dashed rgba(43, 58, 85, 0.33);
	border-radius: var(--tm-radius-md);
	aspect-ratio: 4 / 5;
	display: grid; place-items: center;
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 12px);
}
.tm-hero__card-art-inner { text-align: center; padding: 24px; }
.tm-hero__card-art-inner .tm-icon { color: var(--tm-bleu-nuit); }
.tm-hero__card-art-title { font-family: var(--tm-font-display); font-weight: 700; font-size: 18px; color: var(--tm-bleu-nuit); margin-top: 12px; }
.tm-hero__card-art-sub   { font-size: 12px; color: var(--tm-encre); margin-top: 4px; }

.tm-hero__card-foot {
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
	font-size: 12px;
	color: var(--tm-encre);
}

.tm-hero__quote {
	position: absolute;
	bottom: -20px; right: -12px;
	background-color: var(--tm-blanc);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-md);
	padding: 12px 16px;
	box-shadow: var(--tm-shadow-card);
	transform: rotate(3deg);
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	z-index: 2;
}
.tm-hero__quote-emoji { font-size: 24px; }
.tm-hero__quote-name  { font-weight: 700; color: var(--tm-bleu-nuit); }
.tm-hero__quote-meta  { color: var(--tm-ink-quiet); }

/* ================== 8. MODULE CARBURANTS ================================ */

.tm-fuel {
	background-color: var(--tm-blanc);
}

.tm-fuel__panel {
	background-color: var(--tm-creme);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-card);
	padding: 24px;
	box-shadow: var(--tm-shadow-card);
}
@media (min-width: 768px) { .tm-fuel__panel { padding: 28px; } }

.tm-fuel__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
@media (min-width: 768px) {
	.tm-fuel__form { flex-direction: row; align-items: stretch; }
	.tm-fuel__form .tm-input-group:first-of-type { flex: 1; }
}

.tm-fuel__table-wrap {
	margin-top: 24px;
	overflow-x: auto;
}

.tm-fuel__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-family: var(--tm-font-body);
}
.tm-fuel__table th {
	text-align: left;
	padding: 8px 0;
	font-weight: 500;
	color: var(--tm-ink-quiet);
}
.tm-fuel__table th.is-numeric { text-align: right; }
.tm-fuel__table td {
	padding: 12px 0;
	border-top: 1px solid var(--tm-border);
}
.tm-fuel__table td.is-numeric { text-align: right; }

.tm-fuel__brand {
	font-weight: 700;
	color: var(--tm-bleu-nuit);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tm-fuel__brand-mark {
	width: 28px; height: 28px;
	border-radius: 8px;
	background-color: var(--tm-creme);
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 12px);
}

.tm-fuel__price {
	font-family: var(--tm-font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--tm-bleu-nuit);
}
.tm-fuel__price--best { color: var(--tm-terracotta); }

.tm-fuel__top-badge {
	display: inline-block;
	margin-left: 8px;
	background-color: var(--tm-moutarde);
	color: var(--tm-encre);
	font-family: var(--tm-font-body);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--tm-radius-pill);
	padding: 2px 8px;
}

.tm-fuel__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--tm-terracotta);
	text-decoration: none;
}
.tm-fuel__cta:hover { text-decoration: underline; }

.tm-fuel__hide-sm { display: none; }
@media (min-width: 640px) { .tm-fuel__hide-sm { display: table-cell; } }

.tm-fuel__updated {
	margin-top: 12px;
	font-size: 11px;
	color: var(--tm-ink-quiet);
}

/* État vide / erreur du widget */
.tm-fuel__empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--tm-ink-quiet);
	font-size: 14px;
}

/* ================== 9. CARDS BON PLAN + section ========================== */

.tm-bon-plans__head a {
	font-size: 14px;
	font-weight: 700;
	color: var(--tm-terracotta);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.tm-bon-plans__head a:hover { text-decoration: underline; }

.tm-card {
	background-color: var(--tm-blanc);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--tm-shadow-card);
	transition: transform .14s ease, box-shadow .14s ease;
}
.tm-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(31, 26, 21, 0.08), 0 18px 32px -16px rgba(43, 58, 85, 0.28);
}

.tm-card__media {
	aspect-ratio: 5 / 3;
	position: relative;
	background-color: var(--tm-creme);
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 12px);
	overflow: hidden;
}
.tm-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.tm-card__media--alt {
	background-color: #EBE2D2;
}

.tm-card__badge {
	position: absolute;
	top: 12px; left: 12px;
	padding: 6px 12px;
	border-radius: var(--tm-radius-pill);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tm-blanc);
	/* La couleur de fond est injectée en inline style (par catégorie). */
}

.tm-card__time {
	position: absolute;
	bottom: 12px; right: 12px;
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: var(--tm-radius-pill);
	padding: 4px 10px;
	font-size: 10px;
	font-weight: 600;
	color: var(--tm-encre);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.tm-card__body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.tm-card__title {
	font-family: var(--tm-font-display);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	color: var(--tm-bleu-nuit);
	margin: 0 0 8px;
}
.tm-card__title a { color: inherit; text-decoration: none; }
.tm-card__title a:hover { text-decoration: underline; }
.tm-card__excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tm-ink-soft);
	flex: 1;
	margin: 0;
}
.tm-card__foot {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--tm-border);
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--tm-ink-quiet);
}
.tm-card__foot-cta {
	color: var(--tm-terracotta);
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ================== 10. CARDS AIDE ÉTAT + section ======================== */

.tm-aide {
	border-radius: var(--tm-radius-card);
	padding: 28px;
	border: 1px solid var(--tm-border);
	box-shadow: var(--tm-shadow-card);
	background-color: var(--tm-creme);
	color: var(--tm-encre);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.tm-aide--featured {
	background-color: var(--tm-bleu-nuit);
	color: var(--tm-blanc);
}
.tm-aide--featured .tm-aide__title { color: var(--tm-blanc); }
.tm-aide--featured .tm-aide__amount { color: var(--tm-moutarde); }

.tm-aide__icon-wrap {
	width: 48px; height: 48px;
	border-radius: var(--tm-radius-md);
	display: grid; place-items: center;
	margin-bottom: 20px;
	background-color: var(--tm-terracotta);
	color: var(--tm-blanc);
}
.tm-aide--featured .tm-aide__icon-wrap {
	background-color: var(--tm-moutarde);
	color: var(--tm-encre);
}

.tm-aide__overline {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.tm-aide__title {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: 26px;
	line-height: 1.1;
	color: var(--tm-bleu-nuit);
	margin: 4px 0 0;
}
.tm-aide__title a { color: inherit; text-decoration: none; }

.tm-aide__amount {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: 28px;
	color: var(--tm-terracotta);
	margin-top: 12px;
}

.tm-aide__desc {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.6;
	opacity: 0.92;
	flex: 1;
}

.tm-aide__cta {
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ================== 11. SERVICES ========================================= */

.tm-service {
	background-color: var(--tm-blanc);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-card);
	padding: 28px;
	box-shadow: var(--tm-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}
@media (min-width: 768px) { .tm-service { flex-direction: row; } }

.tm-service__icon {
	width: 80px; height: 80px;
	border-radius: var(--tm-radius-md);
	background-color: var(--tm-creme);
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 12px);
	display: grid; place-items: center;
	flex-shrink: 0;
	color: var(--tm-terracotta);
}

.tm-service__body { flex: 1; }
.tm-service__tags { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tm-service__tag {
	display: inline-block;
	background-color: var(--tm-moutarde);
	color: var(--tm-encre);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border-radius: var(--tm-radius-pill);
}
.tm-service__partner {
	font-size: 12px;
	color: var(--tm-ink-quiet);
}
.tm-service__title {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: 24px;
	color: var(--tm-bleu-nuit);
	margin: 0;
}
.tm-service__chiffre {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: 42px;
	color: var(--tm-terracotta);
	margin: 4px 0;
	line-height: 1;
}
.tm-service__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tm-ink-soft);
	margin: 0 0 20px;
}

/* ================== 12. NEWSLETTER ====================================== */

.tm-newsletter {
	background-color: var(--tm-bleu-nuit);
	color: var(--tm-blanc);
	border-bottom: 1px solid var(--tm-border);
}
.tm-newsletter__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
	padding-block: 64px;
}
@media (min-width: 768px) { .tm-newsletter__inner { padding-block: 80px; } }

.tm-newsletter__copy { grid-column: span 12 / span 12; }
.tm-newsletter__visual { display: none; grid-column: span 12 / span 12; }
@media (min-width: 1024px) {
	.tm-newsletter__copy   { grid-column: span 7 / span 7; }
	.tm-newsletter__visual { display: block; grid-column: span 5 / span 5; }
}

.tm-newsletter__overline {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--tm-moutarde);
	margin-bottom: 12px;
}
.tm-newsletter__title {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.05;
	margin: 0;
	color: var(--tm-blanc);
}
.tm-newsletter__title em { font-style: normal; color: var(--tm-moutarde); }

.tm-newsletter__sub {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.6;
	opacity: 0.85;
	max-width: 56ch;
}

.tm-newsletter__form {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 480px;
}
@media (min-width: 640px) { .tm-newsletter__form { flex-direction: row; } }

.tm-newsletter__form .tm-input {
	flex: 1;
	background-color: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.20);
	color: var(--tm-blanc);
	padding: 14px 20px;
}
.tm-newsletter__form .tm-input::placeholder { color: rgba(255, 255, 255, 0.50); }
.tm-newsletter__form .tm-input:focus { background-color: rgba(255, 255, 255, 0.15); border-color: var(--tm-moutarde); box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.18); }

.tm-newsletter__legal {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	opacity: 0.7;
}

.tm-newsletter__mock {
	background-color: var(--tm-blanc);
	border-radius: var(--tm-radius-card);
	padding: 24px;
	box-shadow: var(--tm-shadow-card);
	transform: rotate(2deg);
	max-width: 340px;
	margin-left: auto;
	color: var(--tm-encre);
}
.tm-newsletter__mock-title {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: 22px;
	color: var(--tm-bleu-nuit);
}
.tm-newsletter__mock-meta {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tm-terracotta);
	margin-bottom: 12px;
}
.tm-newsletter__mock-item {
	padding: 10px 0;
	border-top: 1px solid var(--tm-border);
	font-size: 13px;
	color: var(--tm-encre);
}
.tm-newsletter__mock-item b { color: var(--tm-terracotta); margin-right: 8px; }

/* ================== 13. DERNIERS ARTICLES ============================== */

.tm-latest__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}
.tm-latest__head h2 {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: clamp(28px, 3vw, 36px);
	color: var(--tm-bleu-nuit);
	margin: 0;
}
.tm-latest__head a {
	font-size: 14px;
	font-weight: 700;
	color: var(--tm-terracotta);
	text-decoration: none;
}

.tm-latest__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-decoration: none;
}
.tm-latest__thumb {
	width: 112px; height: 112px;
	flex-shrink: 0;
	border-radius: var(--tm-radius-md);
	background-color: var(--tm-creme);
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 12px);
	overflow: hidden;
}
.tm-latest__thumb img { width: 100%; height: 100%; object-fit: cover; }

.tm-latest__cat {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--tm-terracotta);
}
.tm-latest__title {
	font-family: var(--tm-font-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: var(--tm-bleu-nuit);
	margin: 4px 0 8px;
}
.tm-latest__item:hover .tm-latest__title { text-decoration: underline; }
.tm-latest__meta {
	font-size: 12px;
	color: var(--tm-ink-quiet);
}

/* ================== 14. FOOTER ========================================== */

.tm-footer {
	background-color: var(--tm-creme);
	background-image: radial-gradient(circle at 1px 1px, rgba(31, 26, 21, 0.05) 1px, transparent 0);
	background-size: 22px 22px;
	border-bottom: 6px solid var(--tm-terracotta);
}

.tm-footer__inner {
	display: grid;
	gap: 32px;
	padding-block: 56px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) { .tm-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tm-footer__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tm-footer__about p {
	font-size: 13px;
	color: var(--tm-ink-soft);
	max-width: 30ch;
	margin: 16px 0;
}

.tm-footer__socials {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}
.tm-footer__socials a {
	width: 36px; height: 36px;
	border-radius: 50%;
	background-color: var(--tm-blanc);
	border: 1px solid var(--tm-border);
	display: grid; place-items: center;
	color: var(--tm-bleu-nuit);
	text-decoration: none;
	transition: transform .12s ease;
}
.tm-footer__socials a:hover { transform: translateY(-2px); }

.tm-footer__col-title {
	font-family: var(--tm-font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--tm-bleu-nuit);
	margin: 0 0 16px;
}

.tm-footer__col ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 8px;
}
.tm-footer__col a {
	color: var(--tm-ink-soft);
	text-decoration: none;
	font-size: 13.5px;
}
.tm-footer__col a:hover { text-decoration: underline; }

.tm-footer__legal {
	border-top: 1px solid var(--tm-border);
	padding-block: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: var(--tm-ink-quiet);
}
@media (min-width: 640px) {
	.tm-footer__legal { flex-direction: row; }
}

/* ================== 15. SINGLE & ARCHIVE CPT ============================ */

.tm-archive { padding-block: 64px; background-color: var(--tm-creme); }

.tm-archive__head { text-align: center; margin-bottom: 48px; }
.tm-archive__head h1 {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: clamp(36px, 5vw, 56px);
	color: var(--tm-bleu-nuit);
	margin: 0 0 12px;
}

.tm-archive__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) { .tm-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tm-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tm-archive__pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.tm-archive__pagination .page-numbers {
	padding: 8px 14px;
	border-radius: var(--tm-radius-pill);
	background-color: var(--tm-blanc);
	border: 1px solid var(--tm-border);
	color: var(--tm-encre);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.tm-archive__pagination .page-numbers.current {
	background-color: var(--tm-bleu-nuit);
	color: var(--tm-blanc);
	border-color: var(--tm-bleu-nuit);
}

.tm-single {
	padding-block: 64px;
	background-color: var(--tm-blanc);
}
.tm-single__inner { max-width: 760px; margin-inline: auto; padding-inline: var(--tm-container-px); }
.tm-single__cat {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--tm-radius-pill);
	color: var(--tm-blanc);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 16px;
}
.tm-single__title {
	font-family: var(--tm-font-display);
	font-weight: 900;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.1;
	color: var(--tm-bleu-nuit);
	margin: 0 0 16px;
}
.tm-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: var(--tm-ink-quiet);
	margin-bottom: 32px;
}
.tm-single__featured {
	margin-bottom: 32px;
	border-radius: var(--tm-radius-card);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--tm-creme);
}
.tm-single__featured img { width: 100%; height: 100%; object-fit: cover; }
.tm-single__content {
	font-size: 17px;
	line-height: 1.75;
	color: var(--tm-encre);
}
.tm-single__content p { margin: 0 0 1.2em; }
.tm-single__content h2,
.tm-single__content h3 {
	font-family: var(--tm-font-display);
	color: var(--tm-bleu-nuit);
	margin-top: 2em;
}
.tm-single__content a { color: var(--tm-terracotta); }

.tm-aide-single__amount-card {
	background-color: var(--tm-bleu-nuit);
	color: var(--tm-blanc);
	padding: 24px;
	border-radius: var(--tm-radius-card);
	margin: 32px 0;
}
.tm-aide-single__amount-card .tm-aide__amount { color: var(--tm-moutarde); }

/* Animations légères au défilement (réduit si l'utilisateur le demande) */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.tm-hero__edition-pill::before { animation: none; }
	.tm-card { transition: none; }
	.tm-btn { transition: none; }
}