/* ============================================================
   Journal des incidents de chasse, Domaine Saint-Antonin
   Fichier : saint-antonin.net/Chasse/style.css
   Vanilla CSS. Aucune dependance. Mobile d'abord.
   Doctrine : DOCTRINE.txt (noms, francais, SEO, or #b89a2a).

   Polices : Auto-hebergees dans /fonts (Newsreader + Source Sans 3)
   Couleurs : or #b89a2a, foret #243226, papier #f3efe4
   ============================================================ */

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url("fonts/newsreader-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/source-sans-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/source-sans-italic-latin.woff2") format("woff2");
}

:root {
	--paper: #f3efe4;
	--paper-2: #e7e1d2;
	--ink: #1a1814;
	--forest: #243226;
	--moss: #3d4f3a;
	--gold: #b89a2a;
	--gold-deep: #9a7e1c;
	--muted: #6b6458;
	--line: #d4ccb8;
	--danger: #8b3a2a;
	--ok: #3d5a3a;
	--font-display: "Newsreader", Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
	--font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--radius: 10px;
	--max: 64rem;
	/* Hauteur approx. de la barre de filtres collante. JS la met a jour au pixel pres. */
	--filters-h: 7.5rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Plus de scroll-padding global : JS calcule l'offset (barre collante
	   seulement dans #journal). Un padding global faisait atterrir trop haut
	   sur Temoigner / Cadre. */
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	line-height: 1.55;
	min-width: 0;
}

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

a { color: inherit; }

h1, h2, h3 {
	font-family: var(--font-display);
	letter-spacing: -0.02em;
	line-height: 1.12;
	text-wrap: balance;
	margin: 0;
}

p { text-wrap: pretty; }

button, input, select, textarea { font: inherit; }

button:not(:disabled),
[role="button"]:not(:disabled) { cursor: pointer; }

.wrap {
	width: min(100% - 2rem, var(--max));
	margin-inline: auto;
}

/* ---------- Header (visuel initial : titre creme, kicker or) ---------- */
.site-header {
	background: var(--forest);
	color: var(--paper);
	border-bottom: 1px solid rgba(184, 154, 42, 0.35);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--paper);
	min-width: 0;
}

.brand-mark {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(184, 154, 42, 0.5);
	border-radius: 6px;
	display: grid;
	place-items: center;
	background: var(--forest);
}

.brand-mark svg {
	width: 1.05rem;
	height: 1.05rem;
	stroke: var(--gold);
	fill: none;
}

.brand-text { min-width: 0; }

.brand-name {
	display: block;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--paper);
	letter-spacing: -0.02em;
	text-transform: none;
}

.brand-kicker {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}

.nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.nav a {
	text-decoration: none;
	padding: 0.55rem 0.85rem;
	border-radius: 6px;
	color: rgba(243, 239, 228, 0.85);
}

.nav a:hover { color: var(--gold); }

.nav .btn-gold {
	background: var(--gold);
	color: var(--ink);
	font-weight: 600;
}

.nav .btn-gold:hover { background: var(--gold-deep); color: var(--ink); }

.nav-desk { display: none; }

/* ---------- Hero ----------
   L'image a une HAUTEUR FIXE (1100px) calée en haut.
   Ouvrir un panneau allonge le bandeau vers le bas et DEVOILE
   le bas de la photo. L'image ne se recadre pas (plus de "saut").
*/
.hero {
	position: relative;
	isolation: isolate;
	background: var(--forest);
	color: var(--paper);
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1100px; /* fixe, independant du contenu */
	object-fit: cover;
	object-position: center 75%; /* Hauteur du fond */
	opacity: 0.38;
	z-index: -2;
	pointer-events: none;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(36,50,38,0.62), rgba(36,50,38,0.88));
	z-index: -1;
	pointer-events: none;
}

.hero-inner { padding: 2.5rem 0 2.1rem; }

.kicker {
	margin: 0;
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
}

/* Lien Jouques : discret, meme or que le kicker, pas de soulignage. */
.kicker-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
}
.kicker-link:hover,
.kicker-link:focus {
	color: inherit;
	text-decoration: none;
}

/* Titre : exactement 2 lignes (une creme, une or).
   Ne PAS remettre de max-width en "ch" : c'est ce qui cassait en 4 lignes. */
.hero h1 {
	margin-top: 0.75rem;
	font-weight: 600;
	font-size: clamp(1.15rem, 2.4vw + 0.55rem, 3rem);
	max-width: none;
}

.hero h1 .h1-a,
.hero h1 .h1-b {
	display: block;
	white-space: nowrap;
}

.hero h1 .h1-b {
	margin-top: 0.15rem;
	color: var(--gold);
}

.lede {
	margin: 1.15rem 0 0;
	max-width: 40rem;
	color: rgba(243, 239, 228, 0.88);
	font-size: 1.02rem;
}

.stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.7rem;
	margin-top: 1.6rem;
}

.stat {
	border: 1px solid rgba(243, 239, 228, 0.15);
	background: rgba(36, 50, 38, 0.4);
	border-radius: 8px;
	padding: 0.75rem 0.85rem;
}

.stat b {
	display: block;
	font-family: var(--font-display);
	font-size: 1.65rem;
	font-variant-numeric: tabular-nums;
	color: var(--gold);
	font-weight: 600;
}

.stat span {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(243, 239, 228, 0.7);
}

.info-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.6rem;
}

.info-btns button {
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	border: 1px solid rgba(184, 154, 42, 0.55);
	background: rgba(36, 50, 38, 0.28);
	color: var(--paper);
	font-weight: 600;
	font-size: 0.9rem;
}

.info-btns button:hover,
.info-btns button.is-open {
	background: var(--gold);
	color: var(--ink);
	border-color: var(--gold);
}

.info-panel {
	display: none;
	margin-top: 1rem;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid rgba(184, 154, 42, 0.4);
	border-radius: var(--radius);
	padding: 1.1rem 1.2rem;
	text-align: left;
}

.info-panel.is-open { display: block; }

.info-panel h3 {
	color: var(--forest);
	font-size: 1.15rem;
	margin-bottom: 0.4rem;
}

.info-panel p { margin: 0.55rem 0 0; }

.info-panel a {
	color: var(--forest);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* ---------- Corps ---------- */
.page { padding: 2.2rem 0 2.8rem; }
.page > * + * { margin-top: 2.2rem; }

.section-head h2 { color: var(--forest); font-size: 1.55rem; }
.section-head p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.92rem; }

/* Plan : 2 colonnes mobile, 5 colonnes bureau (10 secteurs = 2 x 5). */
.plan {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.plan a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 4.6rem;
	padding: 0.7rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	text-decoration: none;
	color: inherit;
}

.plan a:hover,
.plan a.is-on {
	border-color: var(--gold);
	background: rgba(184, 154, 42, 0.14);
}

.plan strong {
	font-family: var(--font-display);
	color: var(--forest);
	font-size: 0.92rem;
	font-weight: 600;
}

.plan small { color: var(--muted); font-family: ui-monospace, Menlo, monospace; }

.plan-link { font-size: 0.9rem; font-weight: 600; color: var(--forest); }

/* ---------- Filtres collants ---------- */
/* Sticky UNIQUEMENT tant que #journal est a l'ecran. Une fois passe
   le journal (formulaire), la barre disparait : Temoigner n'est plus recouvert. */
#journal .filters {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(243, 239, 228, 0.96);
	border: 1px solid rgba(184, 154, 42, 0.4);
	border-radius: var(--radius);
	padding: 0.75rem;
	box-shadow: 0 8px 24px rgba(26, 24, 20, 0.06);
}

.filters form {
	display: grid;
	gap: 0.5rem;
}

.filters input[type="text"],
.filters select {
	width: 100%;
	height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper);
	color: var(--ink);
}

/* Bandeau filtres : chips a gauche (peuvent revenir a la ligne),
   Insertion toujours a DROITE, SUR LA MEME RANGE vis-a-vis du bandeau.
   nowrap sur le parent = Insertion ne tombe jamais seule en dessous. */
.filters .row-btns {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	align-items: flex-start;
	margin-top: 0.5rem;
}

.filters .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.filters .chip-insert {
	flex: 0 0 auto;
	margin-left: auto;
	align-self: flex-start;
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 0.75rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.chip.is-on,
.chip:hover { border-color: var(--gold); background: var(--gold); color: var(--ink); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	border-radius: 6px;
	border: 0;
	background: var(--gold);
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.btn:hover { background: var(--gold-deep); }

.btn-ghost {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink);
}

.btn-ghost:hover { border-color: var(--gold); }

/* ---------- Cartes incidents ----------
   scroll-margin-top = hauteur de la barre collante, pour que le titre
   de la fiche ne passe pas sous les filtres.
*/
.list { display: grid; gap: 1rem; margin-top: 1.1rem; }

.incident {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
}

#fiches,
#journal,
#contact,
#cadre,
.info-panel {
	scroll-margin-top: 0.5rem;
}

.incident.resolved { background: #eef3e8; }

.incident-grid { display: grid; }

.incident img.thumb {
	width: 100%;
	max-height: 16rem;
	object-fit: cover;
	background: rgba(36, 50, 38, 0.08);
}

/* Loupe au survol : la photo s'ouvre en grand (nouvel onglet). */
.photo-link,
.photo-link img.thumb {
	cursor: zoom-in;
}

.incident-body { padding: 1rem 1.1rem 1.15rem; }

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--muted); }

.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid transparent;
}

.badge-open { color: var(--danger); background: rgba(139, 58, 42, 0.12); border-color: rgba(139, 58, 42, 0.3); }
.badge-done { color: var(--ok); background: rgba(61, 90, 58, 0.12); border-color: rgba(61, 90, 58, 0.3); }
.badge-gold { color: var(--ink); background: rgba(184, 154, 42, 0.2); border-color: rgba(184, 154, 42, 0.4); }
.badge-forest { color: var(--paper); background: var(--forest); }

.incident h3 {
	margin-top: 0.7rem;
	font-size: 1.3rem;
	color: var(--forest);
}

.incident h3 a { text-decoration: none; margin-left: 0.4rem; font-size: 0.85em; }

.when {
	margin: 0.35rem 0 0;
	color: var(--muted);
	font-size: 0.9rem;
}

.desc {
	margin: 0.7rem 0 0;
	white-space: pre-line;
	font-size: 0.95rem;
}

/* Lien video : picto play + libelle, or, lisible au premier coup d'oeil. */
.video-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.7rem;
	padding: 0.35rem 0.7rem 0.35rem 0.4rem;
	border-radius: 999px;
	border: 1px solid rgba(184, 154, 42, 0.45);
	background: rgba(184, 154, 42, 0.12);
	color: var(--forest);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}

.video-link:hover {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--ink);
}

.video-link svg {
	width: 1.35rem;
	height: 1.35rem;
	flex: 0 0 auto;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.9rem;
}

.social {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 0.8rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.85rem;
	color: #fff;
	border: 0;
}

.social.x { background: #111; }
.social.fb { background: #1877F2; }
.copy { background: var(--gold); color: var(--ink); }

.to-top {
	margin-left: auto;
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	min-height: 2.5rem;
	display: inline-flex;
	align-items: center;
	padding: 0 0.4rem;
}

.to-top:hover { color: var(--forest); }

.to-top-wrap {
	margin: 1rem 0 0;
	text-align: right;
}

.empty {
	border: 1px solid var(--line);
	background: var(--paper-2);
	border-radius: var(--radius);
	padding: 2rem;
	text-align: center;
	color: var(--muted);
}

/* ---------- Contact ---------- */
.contact-box {
	border: 1px solid var(--line);
	background: rgba(231, 225, 210, 0.4);
	border-radius: var(--radius);
	padding: 1.25rem;
}

.contact-box h2 { color: var(--forest); }
.contact-box > p { color: var(--muted); font-size: 0.92rem; }

main.wrap > h1 {
	text-align: center;
}
main.wrap > .contact-box {
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}
form.stack {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.1rem;
	max-width: 32rem;
	margin-inline: auto;
	width: 100%;
}

label { font-weight: 600; font-size: 0.92rem; }

input[type="text"],
input[type="email"],
input[type="date"],
input[type="url"],
textarea,
select {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper);
	color: var(--ink);
}

textarea { min-height: 8rem; resize: vertical; }

.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.ok-msg {
	border: 1px solid rgba(61, 90, 58, 0.3);
	background: rgba(61, 90, 58, 0.1);
	padding: 1rem;
	border-radius: 8px;
}

/* ---------- Footer (visuel initial) ---------- */
.site-footer {
	background: var(--forest);
	color: rgba(243, 239, 228, 0.78);
	border-top: 1px solid rgba(184, 154, 42, 0.4);
}

.site-footer-inner {
	padding: 2rem 0 1.6rem;
	display: grid;
	gap: 1.1rem;
}

.site-footer .title {
	font-family: var(--font-display);
	color: var(--paper);
	font-size: 1.15rem;
	margin: 0;
}

.site-footer .sub {
	margin: 0.4rem 0 0;
	font-size: 0.92rem;
	max-width: 34rem;
	color: rgba(243, 239, 228, 0.7);
}

.site-footer a { color: var(--gold); text-underline-offset: 3px; }

.site-footer-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
	font-size: 0.78rem;
	color: rgba(243, 239, 228, 0.55);
}

.db-ok {
	margin: 0;
	letter-spacing: 0.04em;
	font-style: italic;
}

.db-fail {
    margin: 0;
    letter-spacing: 0.04em;
    font-style: italic;
    font-weight: 700;
    color: var(--danger);
}
.site-footer .db-fail {
    color: #e8b4a8;
}

/* ---------- Ascenseur ---------- */
#scrollControl {
	position: fixed;
	right: 0.8rem;
	bottom: 6rem;
	z-index: 40;
	display: grid;
	gap: 0.4rem;
}

#scrollControl button {
	width: 2.75rem;
	height: 2.75rem;
	border: 2px solid var(--gold);
	background: var(--paper);
	border-radius: 6px;
	font-size: 1.2rem;
}

#scrollControl button:hover { background: var(--gold); }

.flash { color: var(--danger); font-weight: 600; }

@media (min-width: 640px) {
	.nav-desk { display: inline; }
	.stats { grid-template-columns: repeat(4, 1fr); }
	.plan { grid-template-columns: repeat(5, 1fr); }
	.filters form {
		grid-template-columns: 2fr 1fr 1fr 1fr auto;
		align-items: center;
	}
	.hero-inner { padding: 3.4rem 0 2.6rem; }
	.contact-box { padding: 2rem; }
	.site-footer-inner {
		grid-template-columns: 1fr auto;
		align-items: end;
	}
}

@media (min-width: 860px) {
	.incident-grid { grid-template-columns: 220px 1fr; }
	.incident img.thumb { max-height: none; height: 100%; }
}

@media (max-width: 639px) {
	.nav a:not(.btn-gold) { display: none; }
	.info-btns button { flex: 1 1 calc(50% - 0.5rem); justify-content: center; }
	#scrollControl { display: none; }
	.chip { font-size: 0.64rem; padding: 0 0.5rem; }
}

@media (max-width: 380px) {
	.hero h1 { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}