/* =========================================================
   Ajustements spécifiques à l'intégration WordPress.
   (Ne touche pas au design : uniquement la cohabitation WP.)
   ========================================================= */

/* La barre d'admin WordPress (32px) ne doit pas recouvrir le header fixe.
   Visible uniquement quand on est connecté. */
body.admin-bar .site-header {
	top: 32px;
}

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

/* Hello Elementor / WordPress ajoutent parfois des marges parasites
   sur <main> ou le wrapper de contenu : on neutralise. */
main {
	margin: 0;
	padding: 0;
}

/* Un style externe (cascade Elementor/Hello) impose un max-width:1140px
   à la balise <footer>, ce qui créait des marges crème sur les côtés.
   On rétablit la pleine largeur voulue par le design.
   (Le header reste volontairement « contenu » — version aimée par le client,
    sera remplacé par le nouveau design sur croquis.) */
.site-footer {
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Le contenu interne reste centré à sa largeur d'origine. */
.site-footer .footer-inner {
	max-width: none !important;
	width: min(1360px, 100% - 64px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---------- A11y : skip-to-content + focus visible ---------- */
.skip-to-content {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 9999;
	padding: 10px 18px;
	background: var(--bronze, #A97845);
	color: #fff;
	font-family: var(--font-texte, "DM Sans", sans-serif);
	font-weight: 600;
	font-size: 14px;
	border-radius: 999px;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 0.25s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
	transform: translateY(0);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Focus visible cohérent partout — pour la navigation clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--bronze, #A97845);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Page 404 ---------- */
.error-404-hero {
	min-height: 50vh;
}
.error-404-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
	max-width: 900px;
	margin: 0 auto;
}
.error-404-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(24px, 2.6vw, 36px);
	background: #fff;
	border-radius: var(--radius-m, 22px);
	box-shadow: var(--shadow-soft, 0 18px 50px -28px rgba(17, 17, 17, 0.35));
	text-decoration: none;
	color: var(--noir, #111);
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}
.error-404-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 60px -20px rgba(169, 120, 69, 0.32);
}
.error-404-card h3 {
	margin: 0;
	font-family: var(--font-titre, 'Syne', sans-serif);
	font-size: 22px;
	font-weight: 700;
}
.error-404-card p {
	margin: 0;
	color: var(--ink-soft, rgba(17, 17, 17, 0.68));
	font-size: 14.5px;
	line-height: 1.55;
}
.error-404-card .link-arrow {
	margin-top: 6px;
	color: var(--bronze, #A97845);
	font-weight: 600;
	font-size: 14px;
}
@media (max-width: 720px) {
	.error-404-grid { grid-template-columns: 1fr; }
}

/* ---------- Bandeau cookies RGPD ---------- */
/* On réserve de l'espace en bas de page tant que le bandeau est visible
   pour qu'il ne vienne pas recouvrir les boutons des formulaires
   (notamment le submit du quiz "Mon projet" → cliquait sur "En savoir plus"
   de la bannière au lieu du bouton "Envoyer"). */
body:has(.cookie-banner:not([hidden])) main {
	padding-bottom: 200px;
}
@media (max-width: 720px) {
	body:has(.cookie-banner:not([hidden])) main {
		padding-bottom: 240px;
	}
}

.cookie-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 120;
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	background: var(--noir-profond, #0c0c0c);
	color: var(--blanc-soft, #f6f3ee);
	border-radius: 22px;
	box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.6);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.cookie-banner p {
	margin: 0;
	flex: 1 1 240px;
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
}
.cookie-banner a {
	color: var(--bronze, #A97845);
	text-decoration: underline;
}
.cookie-actions {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}
.cookie-banner button {
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	border: 0;
	border-radius: 999px;
	padding: 9px 18px;
	cursor: pointer;
	transition: background 0.25s, transform 0.2s;
}
.cookie-refuse {
	background: transparent;
	color: var(--blanc-soft, #f6f3ee);
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.cookie-accept {
	background: var(--bronze, #A97845);
	color: #fff;
}
.cookie-accept:hover {
	background: var(--bronze-deep, #7A4A23);
	transform: translateY(-1px);
}

/* ---------- Message du formulaire de contact ---------- */
.form-note {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-radius: 14px;
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
}
.form-note.is-success {
	background: rgba(169, 120, 69, 0.12);
	border: 1px solid rgba(169, 120, 69, 0.4);
	color: var(--bronze-deep, #7A4A23);
}
.form-note.is-error {
	background: rgba(180, 60, 40, 0.1);
	border: 1px solid rgba(180, 60, 40, 0.4);
	color: #9a3b28;
}

/* ---------- Section réservation Amelia ---------- */
.booking-section .booking-head {
	text-align: center;
	max-width: 680px;
	margin: 0 auto clamp(32px, 5vw, 56px);
}
.booking-section .booking-head .lead {
	margin-top: 14px;
	color: var(--ink-soft, #5b5048);
}
.booking-section .booking-widget {
	max-width: 980px;
	margin: 0 auto;
}

/* ---------- Hero épuré page Contact (sans photo) ---------- */
.page-hero-clean {
	position: relative;
	overflow: hidden;
	background: var(--blanc-casse, #F6F3EE);
	padding: clamp(120px, 15vh, 175px) 0 clamp(36px, 5vw, 64px);
}
.page-hero-clean .page-hero-clean-inner {
	position: relative;
	z-index: 2;
	max-width: 840px;
}
.page-hero-clean .eyebrow {
	color: var(--bronze-deep, #7A4A23);
}
.page-hero-clean .title-xl {
	color: var(--noir, #111);
	margin: 14px 0 18px;
	line-height: 0.98;
}
.page-hero-clean .title-xl em {
	font-style: normal;
	color: var(--bronze, #A97845);
}
.page-hero-clean .lead {
	color: var(--ink-soft, #5b5048);
	max-width: 580px;
}

/* Moins d'espace : la 1re section se rapproche du hero */
.page-contact .booking-section {
	padding-top: clamp(28px, 5vw, 56px);
}

/* Séparateur "ou" entre Réserver en ligne et Écrire */
.contact-or {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: min(440px, 82%);
	margin: -40px auto;
	position: relative;
	z-index: 3;
}
.contact-or .contact-or-line {
	flex: 1;
	height: 1px;
	background: rgba(169, 120, 69, 0.35);
}
.contact-or em {
	font-family: var(--font-titre, "Syne"), sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--bronze-deep, #7A4A23);
}

/* ---------- Curseur sur mesure v2 ---------- */
.has-lfbc-cursor,
.has-lfbc-cursor * {
	cursor: none !important;
}
.lfbc-cur-ring,
.lfbc-cur-dot {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	transform: translate3d(-100px, -100px, 0);
	will-change: transform;
}
.lfbc-cur-ring {
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1.5px solid var(--bronze, #A97845);
	border-radius: 50%;
	transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease,
		margin 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.lfbc-cur-ring.is-hover {
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	background-color: rgba(169, 120, 69, 0.12);
	border-color: var(--bronze-deep, #7A4A23);
}
.lfbc-cur-dot {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: var(--bronze, #A97845);
	border-radius: 50%;
	transition: opacity 0.3s ease;
}

/* ============================================================
   FIX « boutons roses » — le thème parent Hello Elementor (assets/css/reset.css)
   colore [type=button] / [type=submit] en #CC3366 (rose) au :hover/:focus.
   On rétablit la charte bronze sur nos boutons, avec priorité forte.
   ============================================================ */

/* Accordéon « Bien démarrer son projet » (le bug signalé) */
.offer-accordion__trigger:hover,
.offer-accordion__trigger:focus,
.offer-accordion__trigger:focus-visible,
.offer-accordion__trigger:active,
.offer-accordion__trigger[aria-expanded="true"] {
	background-color: rgba(169, 120, 69, 0.13) !important;
}

/* Bandeau cookies */
.cookie-accept:hover,
.cookie-accept:focus {
	background-color: var(--bronze-deep, #7A4A23) !important;
}
.cookie-refuse:hover,
.cookie-refuse:focus {
	background-color: transparent !important;
}

/* Burger menu (mobile) */
.burger:hover,
.burger:focus {
	background-color: transparent !important;
}

/* Bouton « Envoyer la demande » du formulaire de contact */
.form-submit .btn:hover,
.form-submit .btn:focus,
.contact-write .btn:hover,
.contact-write .btn:focus {
	background-color: var(--noir, #111) !important;
	color: var(--blanc-casse, #F6F3EE) !important;
}

/* ============================================================
   À PROPOS — section « Coco en vrac » (fun & décalé, bien marqué)
   ============================================================ */
.coco-en-vrac {
	position: relative;
	overflow: hidden;
	padding: clamp(64px, 9vw, 110px) 0;
	background: var(--blanc-casse, #F6F3EE);
}
.coco-en-vrac .vrac-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto clamp(40px, 6vw, 64px);
	position: relative;
	z-index: 2;
}
.coco-en-vrac .vrac-header .lead {
	margin-top: 12px;
	color: var(--ink-soft, #5b5048);
}
.coco-en-vrac .vrac-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.6vw, 36px);
	max-width: 1080px;
	margin: 0 auto;
}
.vrac-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 28px 26px 30px;
	border-radius: 22px;
	transform: rotate(var(--rot, 0deg));
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
	box-shadow: 0 16px 36px -18px rgba(17, 17, 17, 0.25);
}
.vrac-card:hover {
	transform: rotate(0deg) scale(1.05);
	box-shadow: 0 26px 54px -18px rgba(169, 120, 69, 0.45);
	z-index: 3;
}
.vrac-card--bronze { background: var(--bronze, #A97845); color: #fff; }
.vrac-card--lin    { background: var(--lin, #E8DDD0); color: var(--noir, #111); }
.vrac-card--cream  { background: #fff; color: var(--noir, #111); border: 1px solid rgba(169,120,69,0.16); }
.vrac-card--taupe  { background: var(--taupe, #C9B8A5); color: var(--noir, #111); }
.vrac-card--dark   { background: var(--noir-profond, #0c0c0c); color: var(--blanc-casse, #F6F3EE); }

.vrac-emoji { font-size: 34px; line-height: 1; }
.vrac-num {
	font-family: var(--font-titre, "Syne"), sans-serif;
	font-weight: 800;
	font-size: clamp(46px, 6.2vw, 66px);
	line-height: 0.92;
	letter-spacing: -0.02em;
}
.vrac-plus { font-size: 0.55em; vertical-align: super; }
.vrac-label {
	font-family: var(--font-texte, "DM Sans"), sans-serif;
	font-size: 14.5px;
	line-height: 1.4;
	opacity: 0.92;
}

@media (max-width: 860px) {
	.coco-en-vrac .vrac-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.coco-en-vrac .vrac-grid { grid-template-columns: 1fr; }
	.vrac-card { transform: rotate(0deg) !important; }
}