/*
  Styles du site public uniquement (masthead, en-tête, animations…).
  Les couleurs et polices viennent de theme.json : on les réutilise ici.
*/

:root {
	--de-header-h: 4rem;
	--de-header-bg: #141414;
}

@media (min-width: 900px) {
	:root {
		--de-header-h: 4.75rem;
	}
}

.wp-site-blocks {
	position: relative;
}

body {
	overflow-x: clip;
}

/* ---------- Transition douce entre les pages ---------- */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: de-fade-out 0.3s ease both;
}

::view-transition-new(root) {
	animation: de-fade-in 0.6s var(--de-ease) both;
}

@keyframes de-fade-out {
	to {
		opacity: 0;
	}
}

@keyframes de-fade-in {
	from {
		opacity: 0;
	}
}

/* ---------- Grain de pellicule (très discret) ---------- */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.07;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- En-tête : barre pleine, bien distincte du reste ---------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	box-sizing: border-box;
	min-height: var(--de-header-h);
	align-items: center;
	padding: 0 var(--de-gutter);
	background: var(--de-header-bg);
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

/* Quand on est connecté à WordPress, la barre d'administration passe au-dessus. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/*
  Logo « D.E » : le bloc Titre du site reste le lien vers l'accueil
  (et lit le nom complet aux lecteurs d'écran), mais seul « D.E » s'affiche.
  Ainsi le nom complet n'apparaît qu'une fois, dans le masthead.
*/
.site-header .wp-block-site-title {
	margin: 0;
	line-height: 1;
}

.site-header .wp-block-site-title a {
	display: inline-block;
	font-size: 0;
}

.site-header .wp-block-site-title a::after {
	content: "D.E";
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--accent);
	transition: color 0.3s ease;
}

.site-header .wp-block-site-title a:hover::after {
	color: var(--wp--preset--color--contrast);
}

/* Menu en ligne sur grand écran (le burger prend le relais sur mobile). */
.site-header .wp-block-navigation__container {
	gap: 2.25rem;
}

.site-header .wp-block-navigation__container .wp-block-navigation-item__content {
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* Bouton burger */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
	transition: color 0.3s ease;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--accent);
}

/* Menu plein écran */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--de-gutter);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2.25rem, 10vw, 4.5rem);
	font-weight: 200;
	line-height: 1.15;
	padding: 0.15em 0;
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

/* ---------- Contenu principal ---------- */
main {
	padding-inline: var(--de-gutter);
	padding-top: calc(var(--de-header-h) + 1.5rem);
	padding-bottom: var(--wp--preset--spacing--60);
}

main.home-main {
	padding: 0;
}

/* Galeries et vidéos : plus larges que le texte. */
.wp-block-post-content.is-layout-constrained > .wp-block-gallery,
.wp-block-post-content.is-layout-constrained > .wp-block-embed {
	max-width: var(--wp--style--global-wide-size, 1280px);
}

.wp-block-post-content p {
	color: rgba(241, 237, 230, 0.82);
}

/* ---------- Pied de page ---------- */
.site-footer {
	padding: clamp(3rem, 8vw, 5rem) var(--de-gutter) 2rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------- Masthead d'accueil ---------- */
.wp-block-cover.de-hero {
	min-height: 100svh;
	padding: 0 var(--de-gutter) clamp(2.5rem, 9svh, 5rem);
	align-items: flex-end;
	justify-content: flex-start;
	background: var(--wp--preset--color--base);
}

/*
  Voile du masthead : fondu noir en bas (le texte reste lisible)
  + lueur dorée « solaire » discrète derrière le visage.
*/
.de-hero .wp-block-cover__background {
	opacity: 1 !important;
	background:
		linear-gradient(to top, var(--wp--preset--color--base) 0%, rgba(5, 5, 5, 0.85) 24%, rgba(5, 5, 5, 0) 60%),
		radial-gradient(60% 45% at 70% 30%, rgba(212, 165, 55, 0.2), rgba(212, 165, 55, 0) 70%) !important;
}

/*
  Photo : démarre sous l'en-tête (la tête n'est jamais coupée) et s'efface
  vers le noir en bas. Pensée pour un portrait vertical.
*/
.de-hero .wp-block-cover__image-background {
	top: var(--de-header-h);
	height: calc(100% - var(--de-header-h));
	filter: brightness(0.95) contrast(1.08) saturate(0.92);
	transform-origin: 50% 20%;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	animation: de-zoom 30s ease-out both;
}

/* Grand écran : la photo occupe la droite, le texte la gauche. */
@media (min-width: 900px) {
	.de-hero .wp-block-cover__image-background {
		left: auto;
		right: 0;
		width: 64%;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, #000 70%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, #000 70%, transparent 100%);
		mask-composite: intersect;
	}

	.de-hero .wp-block-cover__background {
		background:
			linear-gradient(to top, var(--wp--preset--color--base) 0%, rgba(5, 5, 5, 0) 26%),
			radial-gradient(40% 40% at 68% 32%, rgba(212, 165, 55, 0.18), rgba(212, 165, 55, 0) 70%) !important;
	}

	.de-hero .wp-block-cover__inner-container {
		max-width: 46rem;
	}
}

@keyframes de-zoom {
	from {
		transform: scale(1.02);
	}
	to {
		transform: scale(1.08);
	}
}

.de-hero .wp-block-cover__inner-container {
	width: 100%;
}

.de-hero__title {
	margin: 0;
	font-size: clamp(2.6rem, 13.5vw, 4.6rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-transform: none; /* le nom garde ses majuscules */
	animation: de-rise 1.4s var(--de-ease) 0.2s both;
}

@media (min-width: 900px) {
	.de-hero__title {
		font-size: clamp(3.4rem, 7.2vw, 7rem);
	}
}

.de-hero__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

@media (max-width: 599px) {
	.de-hero__tagline {
		letter-spacing: 0.12em !important;
	}
}

.de-hero__tagline {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--titres);
	font-size: 0.875rem;
	font-weight: 300;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--accent);
	animation: de-rise 1.4s var(--de-ease) 0.45s both;
}

.de-hero__cue {
	margin: 2.25rem 0 0;
	animation: de-rise 1.4s var(--de-ease) 0.7s both;
}

.de-hero__cue a {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	font-size: 0.8rem;
	letter-spacing: 0.25em;
	text-transform: lowercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.de-hero__cue a::after {
	content: "";
	width: 3.5rem;
	height: 1px;
	background: currentColor;
	transform-origin: left;
	animation: de-line 2.4s ease-in-out infinite;
}

.de-hero__cue a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

@keyframes de-rise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
}

@keyframes de-line {
	0% {
		transform: scaleX(0);
	}
	50% {
		transform: scaleX(1);
	}
	100% {
		transform: scaleX(0);
		transform-origin: right;
	}
}

/* ---------- Sections de l'accueil ---------- */
.de-section {
	padding: var(--wp--preset--spacing--60) var(--de-gutter);
}

.de-section > h2 {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Index des rubriques : grandes lignes cliquables */
.de-index {
	margin-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}

.de-index__item {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.de-index__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 0;
	font-family: var(--wp--preset--font-family--titres);
	font-size: clamp(2rem, 8vw, 4.5rem);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.35s ease, padding-left 0.5s var(--de-ease);
}

.de-index__item a::after {
	content: "→";
	color: var(--wp--preset--color--accent);
	opacity: 0.35;
	transform: translateX(-0.75rem);
	transition: opacity 0.35s ease, transform 0.5s var(--de-ease);
}

.de-index__item a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	padding-left: 0.75rem;
}

.de-index__item a:hover::after {
	opacity: 1;
	transform: none;
}

/* ---------- Apparition en fondu quand on défile ---------- */
html.js main :is(.wp-block-heading, .wp-block-post-title, .wp-block-image, .wp-block-embed, .wp-block-buttons, .de-index__item, .wp-block-post-content > p) {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1s var(--de-ease), transform 1s var(--de-ease);
}

/* Le titre du masthead a sa propre animation d'entrée : on l'exclut de l'effet ci-dessus. */
html.js main .de-hero .de-hero__title {
	opacity: 1;
	transform: none;
	transition: none;
}

html.js main .is-visible {
	opacity: 1 !important;
	transform: none !important;
}