/*
Theme Name: Yann Geshors - Naturaliste
Description: Theme enfant d'Ollie, identite editoriale noir/blanc/jaune pour un site de photographie naturaliste du littoral mediterraneen.
Author: Yann Geshors
Template: ollie
Version: 1.1.0
Text Domain: yann-nature
*/

/* Variables de design system (cf. brief : noir/blanc/jaune, espacements, transitions) */
:root {
	--color-black: #111111;
	--color-black-soft: #181818;
	--color-white: #ffffff;
	--color-off-white: #f5f4f0;
	--color-gray-light: #e6e6e6;
	--color-gray: #666666;
	--color-yellow: #ffd200;

	--font-heading: "Barlow Condensed", sans-serif;
	--font-body: "Barlow", sans-serif;

	--container-wide: 1440px;
	--container-content: 760px;
	--container-standard: 1180px;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 7rem;

	--radius-small: 2px;
	--transition-fast: 180ms ease;
	--transition-standard: 300ms ease;
}

/* Categories en petites capitales, reperes editoriaux jaunes */
.pattern-category,
.wp-block-post-terms {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-black);
}

.pattern-category::before {
	content: "";
	display: inline-block;
	width: 1.4em;
	height: 2px;
	background: var(--color-yellow);
	margin-right: 0.5em;
	vertical-align: middle;
}

/* Mosaique photo editoriale (section Photographie) */
.photo-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 130px;
	grid-auto-flow: dense;
	gap: var(--space-xs);
}

.photo-mosaic figure {
	margin: 0;
	overflow: hidden;
	position: relative;
	border-radius: var(--radius-small);
}

.photo-mosaic figure.mosaic-large {
	grid-column: span 2;
	grid-row: span 3;
}

.photo-mosaic figure.mosaic-wide {
	grid-column: span 2;
	grid-row: span 2;
}

.photo-mosaic figure.mosaic-small {
	grid-column: span 1;
	grid-row: span 2;
}

.photo-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-standard);
}

.photo-mosaic a:hover img {
	transform: scale(1.04);
}

@media (max-width: 782px) {
	.photo-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 160px;
	}
	.photo-mosaic figure.mosaic-large {
		grid-column: span 2;
		grid-row: span 2;
	}
	.photo-mosaic figure.mosaic-wide {
		grid-column: span 2;
		grid-row: span 2;
	}
	.photo-mosaic figure.mosaic-small {
		grid-column: span 1;
		grid-row: span 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.photo-mosaic a:hover img {
		transform: none;
	}
}

/* Page A propos : territoires d'action */
.territoires-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
}

.territoires-list li {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.5em 1em;
	border: 1px solid var(--color-black);
	border-radius: var(--radius-small);
	position: relative;
	padding-left: 1.6em;
}

.territoires-list li::before {
	content: "";
	position: absolute;
	left: 0.7em;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background: var(--color-yellow);
	border-radius: 50%;
}

/* Page A propos : chronologie */
.timeline {
	margin-top: var(--space-lg);
	border-left: 2px solid var(--color-yellow);
	padding-left: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.timeline-item {
	position: relative;
}

.timeline-item::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--space-md) - 5px);
	top: 0.4em;
	width: 8px;
	height: 8px;
	background: var(--color-yellow);
	border-radius: 50%;
}

.timeline-date {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-yellow);
	margin-bottom: 0.25em;
}

.timeline-item p {
	margin: 0;
	color: var(--color-off-white);
}

@media (max-width: 600px) {
	.territoires-list li {
		font-size: 0.85rem;
	}
}

/* En-tete a deux etats (transparent sur hero, compact au scroll) */
body.has-hero-header .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background-color: transparent !important;
	border-bottom-color: transparent !important;
	transition: background-color var(--transition-standard), border-color var(--transition-standard), padding var(--transition-standard);
}

body.has-hero-header .site-header a,
body.has-hero-header .site-header .wp-block-site-title a,
body.has-hero-header .site-header .wp-block-navigation-item__label {
	color: var(--color-white) !important;
}

body.has-hero-header .site-header.is-scrolled {
	position: fixed;
	background-color: var(--color-white) !important;
	border-bottom-color: var(--color-gray-light) !important;
	padding-top: var(--space-xs) !important;
	padding-bottom: var(--space-xs) !important;
	box-shadow: 0 1px 8px rgba(17, 17, 17, 0.06);
}

body.has-hero-header .site-header.is-scrolled a,
body.has-hero-header .site-header.is-scrolled .wp-block-site-title a,
body.has-hero-header .site-header.is-scrolled .wp-block-navigation-item__label {
	color: var(--color-black) !important;
}

@media (prefers-reduced-motion: reduce) {
	body.has-hero-header .site-header {
		transition: none;
	}
}

/* Template article : chapo, meta, couverture */
.article-chapo {
	font-family: var(--font-body);
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--color-gray);
	margin-top: var(--space-sm);
	max-width: 640px;
}

.article-meta {
	margin-top: var(--space-md);
	gap: 0.5em;
	color: var(--color-gray);
	font-size: 0.85rem;
}

.article-meta p {
	margin: 0;
}

.article-cover {
	margin-top: var(--space-lg) !important;
}

.article-cover img {
	border-radius: var(--radius-small);
	width: 100%;
	max-height: 640px;
	object-fit: cover;
}

@media (max-width: 782px) {
	.article-cover img {
		max-height: 380px;
	}
}

/* Chiffres-cles */
.chiffre-nombre {
	font-family: var(--font-heading);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0.2em !important;
}

/* Encadre */
.encadre p:last-child {
	margin-bottom: 0;
}

/* Typographie du contenu editorial (articles) */
.entry-content,
.wp-block-post-content {
	font-size: 1.1rem;
	line-height: 1.7;
}

.entry-content h2,
.wp-block-post-content h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.9rem;
	margin-top: 2.5em;
}

.entry-content h3,
.wp-block-post-content h3 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.4rem;
	margin-top: 2em;
}

.entry-content h4,
.wp-block-post-content h4 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 1.75em;
}

.entry-content blockquote,
.wp-block-post-content .wp-block-quote {
	border-left: 3px solid var(--color-yellow);
	padding-left: var(--space-md);
	margin-left: 0;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.3;
}

.entry-content blockquote cite,
.wp-block-post-content .wp-block-quote cite {
	display: block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 400;
	font-style: normal;
	color: var(--color-gray);
	margin-top: 0.75em;
}

.entry-content figcaption,
.wp-block-post-content figcaption {
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--color-gray);
	text-align: left;
	margin-top: 0.6em;
	line-height: 1.4;
}

.entry-content table,
.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.entry-content table th,
.wp-block-post-content table th {
	text-align: left;
	font-family: var(--font-body);
	font-weight: 700;
	border-bottom: 2px solid var(--color-black);
	padding: 0.6em 0.8em;
}

.entry-content table td,
.wp-block-post-content table td {
	border-bottom: 1px solid var(--color-gray-light);
	padding: 0.6em 0.8em;
}

.entry-content ul,
.entry-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-left: 1.3em;
}

.entry-content li,
.wp-block-post-content li {
	margin-bottom: 0.4em;
}

.entry-content a:not(.wp-element-button),
.wp-block-post-content a:not(.wp-element-button) {
	color: var(--color-black);
	text-decoration: underline;
	text-decoration-color: var(--color-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* Pages de categories : grille avec article dominant */
.archive-grid {
	gap: var(--space-lg) var(--space-md) !important;
}

.archive-card img {
	transition: transform var(--transition-standard);
}

.archive-card a:hover img {
	transform: scale(1.03);
}

.archive-grid > li:first-child,
.archive-grid > .wp-block-post:first-child {
	grid-column: span 2;
}

.archive-grid > li:first-child .archive-card,
.archive-grid > .wp-block-post:first-child .archive-card {
	flex-direction: row;
	align-items: center;
	gap: var(--space-md);
}

.archive-grid > li:first-child .wp-block-post-featured-image,
.archive-grid > .wp-block-post:first-child .wp-block-post-featured-image {
	flex: 1 1 55%;
	margin: 0 !important;
}

.archive-grid > li:first-child .archive-card > :not(.wp-block-post-featured-image),
.archive-grid > .wp-block-post:first-child .archive-card > :not(.wp-block-post-featured-image) {
	flex: 1 1 45%;
}

.archive-grid > li:first-child h3,
.archive-grid > .wp-block-post:first-child h3 {
	font-size: 1.8rem;
}

@media (max-width: 782px) {
	.archive-grid > li:first-child,
	.archive-grid > .wp-block-post:first-child {
		grid-column: span 1;
	}
	.archive-grid > li:first-child .archive-card,
	.archive-grid > .wp-block-post:first-child .archive-card {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.archive-card a:hover img {
		transform: none;
	}
}

@media (max-width: 600px) {
	.article-chapo {
		font-size: 1.05rem;
	}
	.chiffre-nombre {
		font-size: 2.5rem;
	}
}

/* Formulaire de contact */
.contact-form {
	max-width: 560px;
	margin-top: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.form-row {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.form-row label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
	font-family: var(--font-body);
	font-size: 1rem;
	padding: 0.75em 0.9em;
	border: 1px solid var(--color-gray-light);
	border-radius: var(--radius-small);
	background: var(--color-white);
	color: var(--color-black);
}

.contact-form textarea {
	resize: vertical;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
	outline: 2px solid var(--color-black);
	outline-offset: 2px;
}

.contact-form button[type="submit"] {
	align-self: flex-start;
	background: var(--color-yellow);
	color: var(--color-black);
	border: none;
	border-radius: var(--radius-small);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.8em 1.6em;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.contact-form button[type="submit"]:hover {
	background: var(--color-black);
	color: var(--color-yellow);
}

.contact-form button[type="submit"]:focus-visible {
	outline: 2px solid var(--color-black);
	outline-offset: 2px;
}

/* Honeypot : masque visuellement mais accessible aux robots, pas aux lecteurs d'ecran */
.form-honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.form-notice {
	padding: 1em 1.2em;
	border-radius: var(--radius-small);
	font-size: 0.95rem;
	margin-top: var(--space-md);
}

.form-notice-success {
	background: #ECFDF3;
	color: #14532D;
	border: 1px solid #86EFAC;
}

.form-notice-error {
	background: #FEF2F2;
	color: #7F1D1D;
	border: 1px solid #FCA5A5;
}

/* Coordonnees et reseaux sociaux */
.contact-info {
	margin-top: var(--space-md);
	font-family: var(--font-body);
}

.contact-social {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.contact-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-black);
	border-radius: 50%;
	color: var(--color-black);
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.contact-social a:hover {
	background: var(--color-black);
	color: var(--color-yellow);
}

/* Vraie version mobile : tailles et espacements reduits, pas une simple mise a l'echelle */
@media (max-width: 600px) {
	/* Titres H1 fixes en 3rem (~48px) : beaucoup trop grand sur petit ecran */
	h1.wp-block-heading[style*="font-size:3rem"],
	h1.wp-block-post-title[style*="font-size:3rem"],
	.wp-block-cover h1[style*="font-size:3rem"] {
		font-size: 1.9rem !important;
		line-height: 1.15 !important;
	}

	/* Chapo d'article */
	.article-chapo {
		font-size: 1rem;
	}

	/* Espacements de sections (80px/90px/70px/60px) beaucoup trop genereux sur mobile */
	.wp-block-group[style*="padding-top:90px"] { padding-top: 48px !important; }
	.wp-block-group[style*="padding-bottom:90px"] { padding-bottom: 48px !important; }
	.wp-block-group[style*="padding-top:80px"] { padding-top: 44px !important; }
	.wp-block-group[style*="padding-bottom:80px"] { padding-bottom: 44px !important; }
	.wp-block-group[style*="padding-top:70px"] { padding-top: 40px !important; }
	.wp-block-group[style*="padding-bottom:70px"] { padding-bottom: 40px !important; }
	.wp-block-group[style*="padding-top:60px"] { padding-top: 36px !important; }
	.wp-block-group[style*="padding-bottom:60px"] { padding-bottom: 36px !important; }
	.wp-block-group[style*="padding-top:56px"] { padding-top: 32px !important; }
	.wp-block-group[style*="padding-bottom:56px"] { padding-bottom: 32px !important; }

	.article-cover img {
		max-height: 260px;
	}

	.chiffre-nombre {
		font-size: 2.4rem;
	}

	.timeline {
		margin-top: var(--space-md);
	}
}

/* Menu mobile : couleurs de la charte, pas le bleu par defaut du navigateur */
.wp-block-navigation__responsive-dialog a,
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-content a,
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	color: var(--color-black) !important;
	text-decoration: none;
}

.wp-block-navigation__responsive-dialog .current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-content .current-menu-item .wp-block-navigation-item__content {
	font-weight: 700;
}

/* Fil d'Ariane */
.site-breadcrumb-nav ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 0.8rem;
	color: var(--color-gray);
}

.site-breadcrumb-nav li {
	display: flex;
	align-items: center;
}

.site-breadcrumb-nav li:not(:last-child)::after {
	content: "/";
	margin: 0 0.6em;
	color: var(--color-gray-light);
}

.site-breadcrumb-nav a {
	color: var(--color-gray);
	text-decoration: underline;
	text-decoration-color: var(--color-gray-light);
	text-underline-offset: 2px;
}

.site-breadcrumb-nav a:hover {
	color: var(--color-black);
	text-decoration-color: var(--color-yellow);
}

.site-breadcrumb-nav li:last-child span {
	color: var(--color-black);
	font-weight: 600;
}

/* Respect prefers-reduced-motion partout */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}