/*
Theme Name: Créazi3l
Theme URI: https://creazi3l.com
Author: Steven Traïna
Description: Thème à blocs pour le portfolio d'un infographiste 3D. Fond graphite, accent orange, grille de projets grand format. Variation claire incluse.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: creazi3l
*/

:root {
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--section-y: clamp(3.5rem, 8vw, 6.5rem);
}

html { scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

*:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.wp-site-blocks > * + * { margin-block-start: 0; }
.site-main { margin-block: 0; }
.site-main > * { margin-block: 0; }

.lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	max-width: 40rem;
}

/* ---------- En-tête ---------- */
.site-header-wrap {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.admin-bar .site-header-wrap { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header-wrap { top: 46px; }
}
.site-header { padding: 0.875rem var(--gutter); }
.site-header__bar { gap: 1rem 2rem; }
.site-brand { gap: 1rem; }
.site-wordmark,
.site-wordmark a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.site-wordmark a:hover { color: var(--wp--preset--color--accent); }
.wp-custom-logo .site-wordmark { display: none; }

.site-nav { font-size: var(--wp--preset--font-size--medium); }
.site-nav .wp-block-navigation-item__content { text-decoration: none; }
.site-nav .wp-block-navigation-item__content:hover,
.site-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}
.wp-block-navigation.site-nav:not(.has-background) .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

/* ---------- Hero : plan de travail d'un logiciel 3D ---------- */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(3.5rem, 10vh, 7rem) var(--gutter) clamp(3.5rem, 9vh, 6rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -25%;
	right: -25%;
	bottom: -35%;
	height: 100%;
	background-image:
		linear-gradient(to right, var(--wp--preset--color--line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--wp--preset--color--line) 1px, transparent 1px),
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-size: 4rem 4rem, 4rem 4rem, 2px 100%;
	background-position: 0 0, 0 0, 50% 0;
	background-repeat: repeat, repeat, no-repeat;
	transform: perspective(42rem) rotateX(62deg);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, #000 15%, transparent 88%);
	mask-image: linear-gradient(to top, #000 15%, transparent 88%);
}
.hero__title {
	font-size: var(--wp--preset--font-size--huge);
	line-height: 0.98;
	margin: 0 0 1.5rem;
	max-width: 15ch;
}
.hero__text { margin: 0 0 2rem; }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) var(--gutter); }
.section--projects { padding-top: clamp(2.5rem, 5vw, 4rem); }
.section__head { gap: 0.75rem 2rem; margin-bottom: 2rem; }
.section__head h2 { margin: 0; }

.project-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
}
.project-filters a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 2px solid transparent;
}
.project-filters a:hover { border-bottom-color: var(--wp--preset--color--accent); }

.more-link { margin-top: 1.5rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; }

.section--services,
.section--about,
.contact-cta {
	border-top: 1px solid var(--wp--preset--color--line);
}
.services { gap: 2.5rem; margin-top: 2rem; }
.services .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 1.25rem;
}
.services h3 { margin: 0 0 0.5rem; }
.services p { color: var(--wp--preset--color--muted); margin: 0; }
.about__text { max-width: 44rem; }

/* ---------- Grille de projets ---------- */
.projects .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: 2.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.projects .wp-block-post-template > li { margin: 0; }
.project__image {
	margin: 0 0 0.875rem;
	background: var(--wp--preset--color--surface);
	border-radius: 2px;
	overflow: hidden;
}
.project__image img { display: block; width: 100%; }
.project__title {
	margin: 0 0 0.25rem;
	font-size: 1.3rem;
	line-height: 1.2;
}
.project__terms {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.project__terms a { color: var(--wp--preset--color--muted); text-decoration: none; }
.project__terms a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }

.projects__pagination {
	margin-top: 3rem;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--display);
}
.projects__pagination a { text-decoration: none; }
.projects__pagination a:hover { text-decoration: underline; }
.projects__pagination .page-numbers.current { color: var(--wp--preset--color--contrast); }

/* ---------- Archives, pages, projets ---------- */
.archive-head { padding-bottom: 0; }
.archive-head h1 { margin: 0 0 1rem; }
.single { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.single .wp-block-post-title { margin-bottom: 0.75rem; }
.single .wp-block-post-content { margin-top: 2rem; }
.single .wp-block-post-content > .alignwide,
.single .wp-block-post-content > .wp-block-gallery { max-width: 80rem; }
.single img { height: auto; }
.single figcaption { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.post-nav {
	margin-top: 4rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
}
.post-nav a { text-decoration: none; }
.post-nav a:hover { text-decoration: underline; }

blockquote,
.wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: 1.25rem;
	margin-left: 0;
}

/* ---------- Prestations (modèle de bloc) ---------- */
.offer__family {
	margin: 4rem 0 1rem;
	padding-top: 1rem;
	border-top: 2px solid var(--wp--preset--color--accent);
}
.offer > .offer__family:first-child { margin-top: 0; }
.offer__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.25rem 2rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.offer__item h3,
.offer__item p { margin: 0; }
.offer__item p { color: var(--wp--preset--color--muted); }
@media (min-width: 48rem) {
	.offer__item { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* ---------- Pied de page ---------- */
.site-footer {
	padding: 2.5rem var(--gutter);
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
.site-footer__row { gap: 1rem 2rem; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--wp--preset--color--muted); }
.site-footer a:hover { color: var(--wp--preset--color--accent); }
.footer-social .wp-social-link { background: none; color: var(--wp--preset--color--muted); }
.footer-social .wp-social-link a { color: inherit; }
.footer-social .wp-social-link:hover { color: var(--wp--preset--color--accent); }

/* ---------- Formulaires (Contact Form 7, recherche) ---------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select,
.wp-block-search__input {
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	padding: 0.75rem 0.9rem;
	font: inherit;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent);
}
.wpcf7 input[type="submit"],
.wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 2px;
	padding: 0.8rem 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover,
.wp-block-search__button:hover {
	background: var(--wp--preset--color--contrast);
}
.wpcf7 label { display: block; margin-bottom: 1rem; }
.wpcf7-not-valid-tip { color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--small); }
.wpcf7 form .wpcf7-response-output { border-color: var(--wp--preset--color--line); }

/* ---------- Boutons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---------- Slider d'accueil ---------- */
.slider-section { border-bottom: 1px solid var(--wp--preset--color--line); }
.slider { position: relative; margin: 0; }
.slider .wp-block-post-template {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.slider .wp-block-post-template::-webkit-scrollbar { display: none; }
.slider .wp-block-post-template > li {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.slide { position: relative; background: var(--wp--preset--color--surface); }
.slide__image {
	margin: 0;
	height: clamp(18rem, 46vw, 36rem);
}
.slide__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slide__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 5rem var(--gutter) 1.75rem;
	background: linear-gradient(to top, rgba(14, 15, 17, 0.88), rgba(14, 15, 17, 0));
	margin: 0;
}
.slide__title {
	margin: 0;
	max-width: 80rem;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}
.slide__title a,
.slide__title a:hover { color: #fff; text-decoration: none; }
.slide__title a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
/* Toute la diapositive est cliquable : un seul lien par projet. */
.slide__title a::after { content: ""; position: absolute; inset: 0; }
.slide__title a:focus-visible { outline: none; }
.slide:has(.slide__title a:focus-visible) { outline: 3px solid var(--wp--preset--color--accent); outline-offset: -3px; }
.slider .wp-block-post-template:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: -2px; }

.slider__ui {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem var(--gutter);
	max-width: calc(80rem + 2 * var(--gutter));
	margin-inline: auto;
	box-sizing: border-box;
}
.slider__dots { display: flex; gap: 0.5rem; }
.slider__dot {
	width: 2.25rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}
.slider__dot::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	background: var(--wp--preset--color--line);
}
.slider__dot[aria-current="true"]::before { background: var(--wp--preset--color--accent); }
.slider__nav { display: flex; gap: 0.5rem; }
.slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	cursor: pointer;
}
.slider__btn:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

/* ---------- Choix clair / sombre du visiteur ---------- */
html[data-theme="light"],
html[data-theme="light"] body {
	--wp--preset--color--base: #F5F3EF;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--line: #D8D4CC;
	--wp--preset--color--contrast: #1B1D21;
	--wp--preset--color--muted: #5C5A55;
	--wp--preset--color--accent: #C2410C;
	color-scheme: light;
}
html[data-theme="dark"],
html[data-theme="dark"] body {
	--wp--preset--color--base: #1B1D21;
	--wp--preset--color--surface: #24272C;
	--wp--preset--color--line: #3A3E45;
	--wp--preset--color--contrast: #ECE9E4;
	--wp--preset--color--muted: #A8A59F;
	--wp--preset--color--accent: #FF6B1A;
	color-scheme: dark;
}

.site-header__tools { gap: 0.75rem; }
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.theme-toggle__sun { display: none; }
.theme-toggle[data-mode="dark"] .theme-toggle__sun { display: block; }
.theme-toggle[data-mode="dark"] .theme-toggle__moon { display: none; }

/* ---------- Apparition douce ---------- */
@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}
	.reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- Filtres animés ---------- */
.project-filters a[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--accent);
}
@media (prefers-reduced-motion: no-preference) {
	.projects { transition: opacity 0.18s ease; }
	.projects.is-leaving { opacity: 0; }
	.projects.is-entering .wp-block-post {
		animation: creazi3l-rise 0.45s ease both;
		animation-delay: calc(var(--i, 0) * 50ms);
	}
}
@keyframes creazi3l-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Fiche projet ---------- */
.single .wp-block-post-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.project-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	margin: 2rem 0 3rem;
}
.project-head > * { margin: 0; }
.project-head:not(:has(img, .project-details)) { display: none; }
.project-head__image { background: var(--wp--preset--color--surface); border-radius: 2px; overflow: hidden; }
.project-head__image img { display: block; width: 100%; }
@media (min-width: 60rem) {
	.project-head:has(.project-details):has(img) {
		grid-template-columns: minmax(0, 2.2fr) minmax(15rem, 1fr);
		align-items: start;
	}
}
.project-details { margin: 0; }
.project-details__row {
	padding: 0.9rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.project-details__row:first-child { border-top: 2px solid var(--wp--preset--color--accent); }
.project-details dt {
	margin: 0 0 0.15rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.project-details dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.15rem;
}
.project-details a { color: var(--wp--preset--color--accent); }

/* ---------- Visionneuse ---------- */
.lightbox-trigger { cursor: zoom-in; }
.lightbox-open { overflow: hidden; }
.lightbox {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	color: #fff;
}
.lightbox[open] {
	display: block;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
.lightbox::backdrop { background: rgba(10, 11, 13, 0.95); }
.lightbox__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 1rem 4.5rem;
}
.lightbox__fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	max-width: 100%;
	max-height: 100%;
}
.lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 10rem);
	object-fit: contain;
}
.lightbox__cap { color: #D8D5CF; font-size: 0.95rem; text-align: center; max-width: 60rem; }
.lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: rgba(27, 29, 33, 0.85);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 2px;
	cursor: pointer;
}
.lightbox__btn[hidden] { display: none; }
.lightbox__btn:hover { border-color: #FF6B1A; color: #FF6B1A; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; margin-top: -1.375rem; }
.lightbox__next { right: 1rem; top: 50%; margin-top: -1.375rem; }
.lightbox__count {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1rem;
	margin: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: #D8D5CF;
}
@media (max-width: 40rem) {
	.lightbox__prev, .lightbox__next { top: auto; bottom: 0.75rem; margin-top: 0; }
	.lightbox__prev { left: 1rem; }
	.lightbox__next { right: 1rem; }
}

/* ---------- Vidéos YouTube au clic ---------- */
.yt-facade__btn {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 0.5rem;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 1rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font: inherit;
	cursor: pointer;
}
.wp-has-aspect-ratio .yt-facade__btn {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}
.yt-facade__play {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.yt-facade__btn:hover .yt-facade__play { background: var(--wp--preset--color--contrast); }
.yt-facade__label { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.15rem; }
.yt-facade__note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.yt-facade__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- Page « Qui suis-je ? » (modèle de bloc) ---------- */
.about-page .wp-block-media-text { gap: 2rem; margin-bottom: 3rem; }
.about-page .wp-block-media-text__media img { border-radius: 2px; }
.about-skills { gap: 2rem; margin: 1.5rem 0 3rem; }
.about-skills .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 1rem;
}
.about-skills h3 { margin: 0 0 0.4rem; }
.about-skills p { margin: 0; color: var(--wp--preset--color--muted); }
.about-hire {
	padding: 2rem 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
}