/*
Theme Name: Habitiss Nouveau
Text Domain: habitiss-nouveau
Template: bricks
Description: Nouvelle version élégante et professionnelle du site Habitiss, préparée en brouillon sans modifier le site actuel.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* This file holds the WordPress theme header (above) plus truly global
 * rules only. Tailwind handles everything else.
 *
 * - Design tokens live in theme.css's @theme block.
 * - Prose + form styles live in presets.css.
 * - Layout, color, typography utilities come from Tailwind v4.
 *
 * Do NOT add component classes here (.btn-primary, .card, etc.). Use
 * Tailwind utilities in templates instead.
 */

html {
	scroll-behavior: smooth;
}

/* Bricks compatibility: compact, dense realizations mosaic. */
.gallery-mosaic {
	display: grid !important;
	width: 100% !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	grid-auto-flow: dense !important;
	grid-auto-rows: 130px !important;
	gap: 10px !important;
	column-count: unset !important;
}

.gallery-mosaic > .gallery-item {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	grid-row: span 2 !important;
}

.gallery-mosaic > .gallery-item:nth-child(6n + 2),
.gallery-mosaic > .gallery-item:nth-child(6n + 5) {
	grid-row: span 3 !important;
}

.gallery-mosaic > .gallery-item:nth-child(10n + 4) {
	grid-column: span 2 !important;
	grid-row: span 3 !important;
}

.gallery-mosaic > .gallery-item img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
}

@media (max-width: 1080px) {
	.gallery-mosaic {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		grid-auto-rows: 125px !important;
	}
}

@media (max-width: 860px) {
	.gallery-mosaic {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-auto-rows: 115px !important;
	}
}

@media (max-width: 620px) {
	.gallery-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-rows: 105px !important;
		gap: 6px !important;
	}

	.gallery-mosaic > .gallery-item:nth-child(10n + 4) {
		grid-column: span 1 !important;
	}
}

/* Readability pass. Bricks uses a 10px rem base, so explicit pixels keep type legible. */
body {
	font-size: 16px !important;
}

.utility-bar {
	font-size: 13px !important;
}

.eyebrow {
	font-size: 12px !important;
}

.button {
	font-size: 14px !important;
}

.text-link {
	font-size: 14px !important;
}

.hero-checks {
	font-size: 13px !important;
}

.service-card p,
.steps p,
.gallery-heading > p,
.about-copy > p:not(.eyebrow),
.journal-heading > p:not(.eyebrow),
.newsletter-panel > div > p:not(.eyebrow),
.consultation-copy p:not(.eyebrow),
.faq details p,
.contact-intro > p:not(.eyebrow),
.form-note {
	font-size: 15px !important;
	line-height: 1.7 !important;
}

/* Stronger navigation hierarchy and a clear contact action. */
.main-nav a {
	font-size: 15px !important;
	font-weight: 600 !important;
}

@media (min-width: 861px) {
	.main-nav {
		width: min(100%, 1000px) !important;
		gap: clamp(8px, 1.25vw, 17px) !important;
	}
}

.main-nav .nav-contact {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 9px 16px !important;
	color: #fffdfa !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 999px !important;
	background: #81462f !important;
	box-shadow: 0 8px 20px rgba(129, 70, 47, 0.24) !important;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.main-nav .nav-contact::after {
	display: none !important;
}

.main-nav .nav-contact:hover,
.main-nav .nav-contact:focus-visible {
	color: #fffdfa !important;
	background: #a45f43 !important;
	box-shadow: 0 12px 26px rgba(129, 70, 47, 0.32) !important;
	transform: translateY(-2px) !important;
}

/* Personal WhatsApp buttons with Agnès. */
.button-whatsapp-personal {
	min-height: 58px !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	padding: 6px 16px 6px 7px !important;
	text-align: left !important;
}

.button-whatsapp-personal::before,
.contact-direct .contact-whatsapp::before {
	display: none !important;
}

.whatsapp-avatar {
	width: 46px !important;
	height: 46px !important;
	flex: 0 0 46px !important;
	display: block !important;
	object-fit: cover !important;
	object-position: 50% 24% !important;
	border: 2px solid rgba(255, 255, 255, 0.92) !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 12px rgba(12, 64, 42, 0.3) !important;
}

.whatsapp-personal-copy {
	display: grid !important;
	gap: 2px !important;
	line-height: 1.08 !important;
}

.whatsapp-personal-copy strong {
	font-size: 15px !important;
	font-weight: 700 !important;
}

.whatsapp-personal-copy small {
	color: rgba(255, 255, 255, 0.84) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

.contact-direct .contact-whatsapp {
	min-height: 76px !important;
	gap: 12px !important;
	padding: 7px 16px 7px 7px !important;
}

.contact-direct .contact-whatsapp .whatsapp-avatar {
	width: 50px !important;
	height: 50px !important;
	flex-basis: 50px !important;
}

@media (max-width: 620px) {
	.utility-bar {
		font-size: 12px !important;
	}

	.button-whatsapp-personal {
		width: 100% !important;
	}
}

/* Final typography and touch-target audit. */
.hero-note p {
	font-size: 13px !important;
	line-height: 1.45 !important;
}

.hero-note strong {
	font-size: 14px !important;
}

.service-card a,
.method-header > p,
.journal-card > div > p:not(.journal-meta),
.journal-card a > div > p:not(.journal-meta),
.new-dunite-copy > p:not(.new-dunite-kicker):not(.new-dunite-note) {
	font-size: 14px !important;
	line-height: 1.65 !important;
}

.method-header > p {
	font-size: 15px !important;
}

.journal-meta,
.new-dunite-signature,
.new-dunite-kicker,
.new-dunite-note {
	font-size: 12px !important;
	line-height: 1.45 !important;
}

.newsletter-control input,
.newsletter-control button,
.contact-form input,
.contact-form select,
.contact-form textarea {
	font-size: 15px !important;
}

.newsletter-consent,
.newsletter-note,
.newsletter-note a,
.newsletter-status,
.consent a,
.form-status {
	font-size: 12px !important;
	line-height: 1.55 !important;
}

.contact-whatsapp .whatsapp-copy small {
	font-size: 11px !important;
}

.contact-whatsapp .whatsapp-copy strong {
	font-size: 15px !important;
}

.footer-brand p {
	font-size: 13px !important;
	line-height: 1.6 !important;
}

.site-footer strong {
	font-size: 12px !important;
}

.site-footer a,
.site-footer .footer-link-button {
	font-size: 13px !important;
	line-height: 1.45 !important;
}

.site-footer .legal-identity,
.site-footer .copyright {
	font-size: 11px !important;
	line-height: 1.55 !important;
}

.cookie-banner p,
.cookie-banner a,
.cookie-banner .cookie-button {
	font-size: 13px !important;
	line-height: 1.45 !important;
}

.cookie-banner .cookie-button {
	min-height: 44px !important;
}

@media (max-width: 860px) {
	.main-nav a,
	.service-card a,
	.text-link,
	.site-footer a,
	.site-footer .footer-link-button {
		display: inline-flex !important;
		align-items: center !important;
		min-height: 44px !important;
	}

	.main-nav a {
		font-family: var(--serif) !important;
		font-size: clamp(26px, 8vw, 38px) !important;
		font-weight: 400 !important;
		line-height: 1.08 !important;
	}

	.main-nav .nav-contact {
		margin-top: 8px !important;
		font-family: var(--sans) !important;
		font-size: 16px !important;
		font-weight: 700 !important;
	}

	.hero-lead {
		font-size: 15px !important;
		line-height: 1.7 !important;
	}

	.about-photo p {
		font-size: 13px !important;
	}

	.newsletter-control button,
	.form-actions button {
		min-height: 48px !important;
	}
}

@media (max-width: 620px) {
	.mobile-actions a {
		font-size: 13px !important;
	}

	.mobile-actions a:first-child {
		font-size: 12px !important;
	}
}

/* Contrast corrections found during the final accessibility review. */
.service-card-featured a,
.service-card-featured a span,
.contact-direct > a:not(.contact-whatsapp),
.contact-intro .eyebrow-light,
.contact-form label,
.contact-form .consent,
.contact-form .consent a {
	color: #fffdfa !important;
}

.contact-form .consent a {
	text-decoration-color: rgba(255, 253, 250, 0.65) !important;
}

.form-offer span {
	color: #f4d6c7 !important;
	font-size: 11px !important;
}

.faq summary span {
	color: #81462f !important;
}