/* ============================================================
   Pages de contenu simple (legales, politique de cookies...)
   et gabarit 404.
   Complete blog.css, qui fournit deja .blog-hero et .article-body.
   ============================================================ */

/* ─── En-tete sans image mise en avant ───────────────────
   La barre de navigation est fixe et transparente tant qu'on n'a pas
   defile : sans zone sombre en haut de page, ses liens blancs se posent
   sur du creme et deviennent illisibles. Faute d'image, on retombe donc
   sur un aplat --ink, plus un halo rose discret pour ne pas faire bloc.
   -------------------------------------------------- */
.blog-hero--flat{
	background:var(--ink);
	min-height:clamp(240px,30vh,340px);
}
.blog-hero--flat::after{
	/* Remplace le voile degrade prevu pour une photo. */
	background:radial-gradient(ellipse at 75% 0%,rgba(154,89,92,.28),transparent 62%);
}
.blog-hero--flat h1{max-width:26ch;text-shadow:none;}

/* ─── Corps ────────────────────────────────────── */

/* Les pages generees par une CMP arrivent avec des tableaux de cookies
   larges et des identifiants sans espace : sans ces deux regles, la mise
   en page deborde sur telephone. */
.article-body{overflow-wrap:anywhere;}
.article-body .article-table,
.article-body table{max-width:100%;}
@media(max-width:760px){
	.article-body table{display:block;overflow-x:auto;white-space:nowrap;}
	.article-body th,
	.article-body td{white-space:normal;min-width:9rem;}
}

/* Un contenu importe peut contenir des titres de niveau 4 a 6, absents
   des articles rediges maison. */
.article-body h4{font-size:1.05rem;color:var(--ink);margin-top:1.8rem;}
.article-body h5,
.article-body h6{font-size:.95rem;color:var(--ink-2);margin-top:1.5rem;}

/* Date de mise a jour et mentions de bas de page. */
.page-meta{
	margin-top:.9rem;
	font-family:'JetBrains Mono',monospace;
	font-size:.72rem;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--amber-lt);
}

/* ============================================================
   404
   Meme colonne de lecture que les pages simples, mais un contenu
   d'orientation plutot que du texte : recherche, trois portes de
   sortie, puis les derniers articles.
   ============================================================ */
.nf-search{max-width:72ch;margin-inline:auto;}
.nf-search form{display:flex;gap:.7rem;flex-wrap:wrap;}
.nf-search input[type="search"]{
	flex:1;
	min-width:12rem;
	background:var(--chalk);
	border:1px solid var(--sand-2);
	border-radius:100px;
	padding:.82rem 1.4rem;
	font-family:'Manrope',sans-serif;
	font-size:.92rem;
	color:var(--ink);
	outline:none;
	transition:border-color .2s;
}
.nf-search input[type="search"]::placeholder{color:var(--ink-3);}
.nf-search input[type="search"]:focus{border-color:var(--amber);}
/* Kadence stylise button[type=submit] : on rejoue la forme du bouton maison. */
.nf-search button[type="submit"]{border-radius:100px;}

.nf-grid{
	max-width:72ch;
	margin:2.5rem auto 0;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1rem;
}
.nf-card{
	display:flex;
	flex-direction:column;
	gap:.5rem;
	background:var(--chalk);
	border:1px solid var(--line);
	border-radius:18px;
	padding:1.4rem;
	transition:box-shadow .4s cubic-bezier(.22,.61,.36,1),transform .2s,border-color .2s;
}
.nf-card:hover{
	box-shadow:0 12px 30px -16px rgba(28,24,18,.18);
	transform:translateY(-2px);
	border-color:var(--amber-lt);
}
.nf-card-title{
	display:inline-flex;
	align-items:center;
	gap:.4rem;
	font-family:'Space Grotesk',sans-serif;
	font-weight:700;
	font-size:1rem;
	color:var(--amber);
}
.nf-card:hover .nf-card-title svg{transform:translateX(3px);}
.nf-card-title svg{transition:transform .15s ease;}
.nf-card-desc{font-size:.85rem;color:var(--ink-2);line-height:1.55;}

.nf-posts{max-width:72ch;margin:2.8rem auto 0;padding-top:1.8rem;border-top:1px solid var(--sand-2);}
.nf-post-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem;}
.nf-post-list a{
	font-family:'Space Grotesk',sans-serif;
	font-weight:600;
	font-size:.95rem;
	color:var(--ink);
	transition:color .15s;
}
.nf-post-list a:hover{color:var(--amber) !important;}

.nf-home{max-width:72ch;margin:2.2rem auto 0;}

@media(max-width:760px){
	.nf-grid{grid-template-columns:1fr;}
	.nf-search button[type="submit"]{width:100%;justify-content:center;}
}