/*
Theme Name: Vérane
Description: Thème vitrine de Maison Vérane — curateur de maisons d'exception. Crème, noir et or, titres serif.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: verane
*/

:root {
	--ligne: rgba(17, 17, 16, .12);
	--ligne-claire: rgba(255, 255, 255, .14);
	--texte-sombre: #c3bcae;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wp-site-blocks > * + * { margin-block-start: 0; }
[hidden] { display: none !important; }
:where(.wp-site-blocks) :target { scroll-margin-top: 90px; }

/* ---------- Typo utilitaire ---------- */
.is-style-eyebrow {
	font-size: 11px !important; letter-spacing: .32em; text-transform: uppercase;
	color: var(--wp--preset--color--or); font-weight: 600; line-height: 1.6;
}
.verane-hero .is-style-eyebrow,
.has-encre-background-color .is-style-eyebrow,
.has-noir-background-color .is-style-eyebrow { color: var(--wp--preset--color--or-clair); }

/* ---------- En-tête ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 0; } }
.verane-header {
	background: rgba(251, 248, 242, .88); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ligne);
}
.verane-nav { min-height: 78px; }
.verane-brand { gap: 3px !important; align-items: center !important; }
.verane-brand .wp-block-site-title {
	font-family: var(--wp--preset--font-family--serif); font-size: 25px; line-height: 1;
	letter-spacing: .14em; text-transform: uppercase; margin: 0;
}
.verane-brand .wp-block-site-tagline {
	font-size: 9px; letter-spacing: .42em; text-transform: uppercase;
	color: var(--wp--preset--color--gris); margin: 0;
}
.verane-header .wp-block-navigation { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.verane-header .wp-block-navigation__container { gap: 42px; }
.verane-header .wp-block-navigation-item__content { position: relative; padding: 6px 0; }
.verane-header .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
	background: var(--wp--preset--color--or); transition: width .35s ease;
}
.verane-header .wp-block-navigation-item__content:hover::after { width: 100%; }
.verane-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 22px; font-size: 14px; }

/* ---------- Sections ---------- */
.verane-section { padding-top: 110px; padding-bottom: 110px; }
.verane-head > * { max-width: 620px; }
.verane-head { margin-bottom: 60px; }
.verane-head.is-centre { text-align: center; }
.verane-head.is-centre > * { margin-left: auto; margin-right: auto; }
.verane-head h2 { margin: 16px 0; }
.verane-head p:not(.is-style-eyebrow) { color: var(--wp--preset--color--gris); font-size: 17px; }
.has-encre-background-color p:not(.is-style-eyebrow):not(.verane-idx),
.has-noir-background-color p:not(.is-style-eyebrow) { color: var(--texte-sombre); }

/* Bandeau d'accueil */
.verane-hero {
	position: relative; overflow: hidden;
	padding-top: clamp(110px, 20vh, 200px); padding-bottom: clamp(110px, 20vh, 200px);
	background:
		radial-gradient(120% 80% at 80% 10%, rgba(201, 167, 101, .16), transparent 55%),
		linear-gradient(160deg, #17160f 0%, #20201a 55%, #14130e 100%);
}
.verane-hero-inner > * { max-width: 760px; }
.verane-hero h1 { margin: 22px 0 8px; letter-spacing: .015em; }
.verane-lede { font-size: clamp(17px, 2vw, 21px); color: #d9d2c4; max-width: 560px !important; margin: 26px 0 42px; line-height: 1.7; }

/* En-tête de page intérieure */
.verane-page-hero { padding-top: 110px; padding-bottom: 90px; }
.verane-page-hero h1 { font-size: clamp(40px, 6vw, 74px); margin: 18px 0; }
.verane-page-hero p:not(.is-style-eyebrow) { color: #c7c0b2; font-size: 18px; max-width: 600px; }

/* Boutons sur fond sombre */
.verane-hero .wp-block-button__link,
.has-encre-background-color .wp-block-button__link,
.has-noir-background-color .wp-block-button__link { border-color: var(--wp--preset--color--creme); color: var(--wp--preset--color--creme); }
.verane-hero .wp-block-button__link:hover,
.has-encre-background-color .wp-block-button__link:hover,
.has-noir-background-color .wp-block-button__link:hover { background: var(--wp--preset--color--creme); color: var(--wp--preset--color--noir); }
.wp-block-button__link { transition: all .4s ease; }
.wp-block-buttons { gap: 18px; }

/* Valeurs */
.verane-values { gap: 54px !important; }
.verane-num {
	font-family: var(--wp--preset--font-family--serif); font-size: 20px; color: var(--wp--preset--color--or);
	border-bottom: 1px solid var(--ligne); padding-bottom: 14px; margin-bottom: 18px !important;
}
.verane-value h3 { margin: 0 0 10px; }
.verane-value p:not(.verane-num) { color: var(--wp--preset--color--gris); font-size: 15px; margin-top: 0; }

/* Services */
.verane-services { gap: 0 !important; border-top: 1px solid var(--ligne-claire); }
.verane-service { padding: 46px 48px 46px 0; border-bottom: 1px solid var(--ligne-claire); }
.verane-service:nth-child(odd) { border-right: 1px solid var(--ligne-claire); }
.verane-service:nth-child(even) { padding-left: 48px; }
.verane-idx { font-family: var(--wp--preset--font-family--serif); font-size: 16px; color: var(--wp--preset--color--or-clair); }
.verane-service h3 { font-size: 27px; margin: 14px 0 12px; }
.verane-service p:not(.verane-idx) { font-size: 15px; margin-top: 0; }

/* Contact */
.verane-contact { gap: 70px; }
.verane-contact h2 { font-size: clamp(30px, 4vw, 46px); margin: 14px 0 20px; }
.verane-contact-line {
	display: flex; gap: 14px; padding: 16px 0; margin: 0 !important;
	border-bottom: 1px solid var(--ligne); font-size: 15px;
}
.verane-contact-line strong {
	min-width: 120px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--or); font-weight: 600; padding-top: 2px;
}

/* ---------- Cartes « maisons » (accueil) ---------- */
.maisons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 50px; }
.maison-card {
	display: block; background: var(--wp--preset--color--papier); border: 1px solid var(--ligne);
	overflow: hidden; transition: transform .5s ease, box-shadow .5s ease;
}
.maison-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .4); }
.maison-card .body { padding: 26px 24px 30px; }
.maison-card h3 { font-size: 26px; margin: 0 0 6px; }
.maison-card p { font-size: 14px; color: var(--wp--preset--color--gris); margin: 0; }
.metier { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--or); margin-bottom: 12px; }

.maison-visual, .mb-visual { position: relative; overflow: hidden; }
.maison-visual { height: 230px; }
.maison-visual::before, .mb-visual::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: radial-gradient(90% 90% at 70% 15%, rgba(255, 255, 255, .14), transparent 60%);
}
.maison-visual.has-img::before, .mb-visual.has-img::before {
	background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 55%);
}
.verane-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.maison-visual .mono, .mb-visual .mono {
	position: absolute; z-index: 2; font-family: var(--wp--preset--font-family--serif);
	color: rgba(255, 255, 255, .92); letter-spacing: .05em;
}
.maison-visual .mono { top: 20px; left: 22px; font-size: 30px; }
.maison-visual .tag, .mb-visual .tag {
	position: absolute; z-index: 2; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: #fff;
}
.maison-visual .tag { bottom: 20px; left: 22px; }

/* Teintes de remplacement (quand aucune photo n'est choisie) */
.g1 { background: linear-gradient(140deg, #3a2c1d, #6a4a2a 60%, #8a6434); }
.g2 { background: linear-gradient(140deg, #20242b, #39414d 60%, #5a6473); }
.g3 { background: linear-gradient(140deg, #1d2a26, #2f453d 60%, #486256); }
.g4 { background: linear-gradient(140deg, #2c2230, #4a3850 60%, #6b5274); }
.g5 { background: linear-gradient(140deg, #2b1f1c, #4d352e 60%, #6f4c40); }
.ph-a { background: linear-gradient(135deg, #efe6d6, #d8c5a4); }
.ph-b { background: linear-gradient(135deg, #e4e7ec, #c3ccd8); }
.ph-c { background: linear-gradient(135deg, #dfe8e3, #bcd0c6); }
.ph-d { background: linear-gradient(135deg, #e8e0ec, #cdb9d6); }
.ph-e { background: linear-gradient(135deg, #ece0d9, #d6bcac); }

/* ---------- Catalogue (page Produits & Services) ---------- */
.verane-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 32px); }
.verane-filterbar { display: flex; gap: 10px; flex-wrap: wrap; padding: 44px 0 10px; }
.chip {
	font: 600 11px/1 var(--wp--preset--font-family--sans); letter-spacing: .18em; text-transform: uppercase;
	padding: 12px 20px; border: 1px solid var(--ligne); color: var(--wp--preset--color--encre);
	background: none; cursor: pointer; transition: .3s;
}
.chip:hover, .chip.active { background: var(--wp--preset--color--noir); color: var(--wp--preset--color--creme); border-color: var(--wp--preset--color--noir); }

.maison-block { padding: 96px 0; border-bottom: 1px solid var(--ligne); }
.maison-block:nth-of-type(even) { background: var(--wp--preset--color--creme); }
.mb-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; margin-bottom: 54px; }
.mb-visual { height: 330px; border-radius: 2px; }
.mb-visual .mono { top: 26px; left: 28px; font-size: 40px; }
.mb-visual .tag { bottom: 24px; left: 28px; }
.mb-text h2 { margin: 0 0 18px; }
.mb-text p { color: var(--wp--preset--color--gris); max-width: 520px; margin: 0; }
.mb-text .lieu { margin-top: 20px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product { border: 1px solid var(--ligne); background: var(--wp--preset--color--papier); transition: transform .4s ease, box-shadow .4s ease; }
.maison-block:nth-of-type(even) .product { background: #fff; }
.product:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .45); }
.product .ph { height: 200px; position: relative; overflow: hidden; }
.product .pb { padding: 22px 22px 26px; }
.product .cat { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--or); margin-bottom: 9px; }
.product h4 { font-size: 21px; margin: 0 0 8px; }
.product p { font-size: 13px; color: var(--wp--preset--color--gris); margin: 0 0 16px; }
.product .meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--ligne); padding-top: 14px; }
.product .prix { font-family: var(--wp--preset--font-family--serif); font-size: 18px; }
.product .lien { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--gris); }
.product .lien:hover { color: var(--wp--preset--color--or); }
.verane-vide { padding: 60px 0; color: var(--wp--preset--color--gris); }

/* ---------- Formulaire de contact ---------- */
.verane-form { display: grid; gap: 18px; }
.verane-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.verane-form .field { display: grid; gap: 7px; }
.verane-form label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--gris); }
.verane-form input, .verane-form textarea, .verane-form select {
	font: 15px var(--wp--preset--font-family--sans); padding: 14px 16px; width: 100%;
	border: 1px solid var(--ligne); background: var(--wp--preset--color--papier); color: var(--wp--preset--color--encre); border-radius: 0;
}
.verane-form input:focus, .verane-form textarea:focus, .verane-form select:focus { outline: none; border-color: var(--wp--preset--color--or); }
.verane-form button {
	justify-self: start; font: 600 12px/1.4 var(--wp--preset--font-family--sans); letter-spacing: .22em; text-transform: uppercase;
	padding: 16px 34px; border: 1px solid var(--wp--preset--color--noir); background: transparent; color: var(--wp--preset--color--noir); cursor: pointer; transition: all .4s ease;
}
.verane-form button:hover { background: var(--wp--preset--color--noir); color: var(--wp--preset--color--creme); }
.verane-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 12px; color: var(--wp--preset--color--gris); margin: 0; }
.form-note.ok { color: var(--wp--preset--color--or); font-size: 14px; }
.form-note.erreur { color: #9b3b2e; font-size: 14px; }

/* ---------- Pied de page ---------- */
.verane-footer { padding-top: 72px; padding-bottom: 40px; color: #cfc9bc; }
.verane-footer .wp-block-site-title { font-family: var(--wp--preset--font-family--serif); font-size: 25px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--creme); margin-bottom: 16px; }
.verane-footer p { font-size: 14px; color: #9a9385; max-width: 320px; }
.verane-footer h5 { font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--or-clair); margin: 0 0 18px; }
.verane-footer .verane-foot-links, .verane-footer .verane-foot-links a { color: #cfc9bc; line-height: 2.3; }
.verane-footer .verane-foot-links a:hover { color: #fff; }
.verane-foot-grid { gap: 48px; margin-bottom: 54px; }
.verane-foot-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 26px; }
.verane-foot-bottom p { font-size: 12px; color: #8a8375; max-width: none; margin: 0; }

/* ---------- Pages de texte (mentions légales…) ---------- */
.verane-texte { padding-top: 80px; padding-bottom: 100px; }
.verane-texte h2 { font-size: 28px; margin-top: 2.2em; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.maisons-grid, .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	.verane-section { padding-top: 72px; padding-bottom: 72px; }
	.verane-values, .verane-services { grid-template-columns: 1fr !important; }
	.verane-values { gap: 34px !important; }
	.verane-service, .verane-service:nth-child(odd), .verane-service:nth-child(even) { padding: 34px 0; border-right: none; }
	.maisons-grid, .products { grid-template-columns: 1fr; }
	.mb-head { grid-template-columns: 1fr; gap: 28px; }
	.mb-visual { height: 240px; }
	.maison-block { padding: 64px 0; }
	.verane-form .two { grid-template-columns: 1fr; }
	.verane-contact { gap: 44px; }
	.verane-foot-grid { gap: 34px; }
}