/*
	LC Architectures — surcouche visuelle
	Chargée après main.css : n'altère pas le CSS compilé du template Phantom.
	Identité : or #ca9903 sur blanc, tons chauds, sobriété.
*/

:root {
	--lc-gold: #ca9903;
	--lc-gold-soft: #e3b93d;
	--lc-ink: #3d3935;
	--lc-text: #4a4642;
}

/* ===== Fondamentaux ===== */

::selection {
	background: rgba(202, 153, 3, 0.22);
}

body {
	color: var(--lc-text);
}

a {
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

/* Le rose résiduel du template Phantom devient or */
a:hover {
	color: var(--lc-gold) !important;
}

a:focus-visible {
	outline: 2px solid var(--lc-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ===== Header ===== */

#header .icons img {
	transition: transform 0.25s ease;
}

#header .icons a:hover img {
	transform: translateY(-3px);
}

/* Icône burger : hover doré (au lieu du rose Phantom) */
#header nav ul li a[href="#menu"]:before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23ca9903%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E");
}

/* ===== Menu latéral : tons chauds assortis à l'identité ===== */

#menu {
	background: #37332e;
}

#menu > .inner > h2 {
	color: var(--lc-gold);
	font-size: 0.9em;
	font-weight: 900;
	letter-spacing: 0.4em;
	text-transform: uppercase;
}

#menu > .inner > ul > li {
	border-top-color: rgba(255, 255, 255, 0.08);
}

#menu > .inner > ul > li a {
	letter-spacing: 0.12em;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

#menu > .inner > ul > li a:hover {
	color: var(--lc-gold-soft) !important;
	padding-left: 0.5em;
}

/* Croix de fermeture : dorée (au lieu du rose Phantom) */
#menu > .close:before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23ca9903%3B %7D%3C/style%3E%3Cline x1='15' y1='15' x2='85' y2='85' /%3E%3Cline x1='85' y1='15' x2='15' y2='85' /%3E%3C/svg%3E");
}

/* ===== Titres de pages ===== */

#main h1 {
	font-weight: 300;
	letter-spacing: 0.08em;
	color: var(--lc-ink);
}

#main .inner > h1:after {
	content: '';
	display: block;
	width: 2.6em;
	height: 2px;
	margin-top: 0.45em;
	background: var(--lc-gold);
}

.contact #main .inner > h1:after {
	margin-left: auto;
	margin-right: auto;
}

/* ===== Accueil : accroche ===== */

.lc-hero {
	margin: 0.5em 0 2em;
}

.lc-hero .lc-hero-sub {
	margin: 0 0 1.2em;
	font-size: 0.78em;
	font-weight: 900;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--lc-gold);
}

.lc-hero h1 {
	margin: 0;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: var(--lc-ink);
}

.lc-hero h1:after {
	display: none;
}

.lc-hero h1 em {
	font-style: normal;
	color: var(--lc-gold);
}

/* ===== Tuiles : photos pleines, dégradé sombre, lisibilité ===== */

.tiles article > .image:before,
.tiles article.style1 > .image:before,
.tiles article.style2 > .image:before,
.tiles article.style3 > .image:before,
.tiles article.style4 > .image:before,
.tiles article.style5 > .image:before,
.tiles article.style6 > .image:before {
	background-color: transparent;
	background-image: linear-gradient(to top, rgba(38, 33, 26, 0.82) 0%, rgba(38, 33, 26, 0.3) 55%, rgba(38, 33, 26, 0.05) 100%);
	opacity: 1;
}

/* Motif SVG cassé du template */
.tiles article > .image:after {
	display: none;
}

body:not(.is-touch) .tiles article:hover > .image:before {
	background-color: transparent;
	background-image: linear-gradient(to top, rgba(38, 33, 26, 0.88) 0%, rgba(38, 33, 26, 0.45) 60%, rgba(38, 33, 26, 0.15) 100%);
	opacity: 1;
}

.tiles article > .image {
	border-radius: 6px;
	box-shadow: 0 12px 32px -14px rgba(61, 57, 53, 0.45);
	transition: transform 0.5s ease, box-shadow 0.5s ease;
}

body:not(.is-touch) .tiles article:hover {
	transform: translateY(-6px);
}

body:not(.is-touch) .tiles article:hover > .image {
	transform: scale(1.05);
	box-shadow: 0 22px 44px -16px rgba(61, 57, 53, 0.55);
}

.tiles article > a {
	color: #ffffff;
	text-shadow: 0 1px 10px rgba(20, 16, 10, 0.4);
	justify-content: flex-end;
	padding-bottom: 1.5em;
}

.tiles article > a h2:after {
	content: '';
	display: block;
	width: 2.2em;
	height: 2px;
	margin: 0.65em auto 0;
	background: var(--lc-gold-soft);
	transition: width 0.4s ease;
}

body:not(.is-touch) .tiles article:hover > a h2:after {
	width: 4em;
}

.tiles article > a .content {
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: 0.05em;
}

/* ===== À propos : confort de lecture ===== */

.apropos-texte p {
	max-width: 72ch;
	line-height: 1.85;
}

.apropos-texte .accroche {
	font-size: 1.55em;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--lc-ink);
}

.apropos-texte .signature .nom {
	letter-spacing: 0.18em;
	color: var(--lc-ink);
}

.apropos-photo img {
	border-radius: 6px;
	box-shadow: 0 16px 40px -18px rgba(61, 57, 53, 0.5);
}

/* ===== Contact ===== */

.contact #main .inner p {
	font-size: 1.25em;
	line-height: 2.1;
}

.contact #main .inner a {
	color: var(--lc-ink);
	border-bottom: 1px solid rgba(202, 153, 3, 0.45);
}

.contact #main .inner a:hover {
	border-bottom-color: var(--lc-gold);
}

/* ===== Footer ===== */

.footer-center {
	padding: 2em 2em 1.5em;
}

#footer > .inner {
	justify-content: center;
	padding: 1.1em 2em;
}

#footer > .inner .copyright {
	margin-top: 0;
	width: 100%;
	text-align: center;
	font-size: 0.72em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ===== Animations d'entrée (chargement) ===== */

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

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	body.is-preload .lc-hero {
		opacity: 0;
	}

	body:not(.is-preload) .lc-hero {
		animation: lc-rise 0.9s cubic-bezier(0.19, 0.74, 0.33, 1) backwards;
	}

	/* Cascade des tuiles au chargement */
	body:not(.is-preload) .tiles article {
		animation: lc-rise 0.9s cubic-bezier(0.19, 0.74, 0.33, 1) backwards;
	}

	body:not(.is-preload) .tiles article:nth-child(1) {
		animation-delay: 0.15s;
	}

	body:not(.is-preload) .tiles article:nth-child(2) {
		animation-delay: 0.3s;
	}

	body:not(.is-preload) .tiles article:nth-child(3) {
		animation-delay: 0.45s;
	}

	body:not(.is-preload) .tiles article:nth-child(4) {
		animation-delay: 0.6s;
	}
}

/* ===== Apparitions au défilement (classes posées par custom.js) ===== */

.lc-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.lc-reveal.lc-visible {
	opacity: 1;
	transform: none;
}