/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* ==========================================================================
   Serenity Market — habillage (Claude, 27 sept. 2026)
   Nuit profonde + orange « Louveteau » (#E48632), titres en Bebas Neue.
   ========================================================================== */

@font-face {
	font-family: "Bebas Neue";
	src: url("polices/BebasNeue-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--sm-orange: #e48632;
	--sm-orange-clair: #f2a65a;
	--sm-nuit: #0f1216;
	--sm-panneau: #1b1f26;
	--sm-creme: #f7f4f0;
	--sm-texte: #2a2e35;
	--sm-doux: #5f6672;
	--sm-rayon: 16px;
	--sm-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
}

/* ---------- commun ---------- */
.sm-wrap { max-width: 1240px; margin: 0 auto; }
.sm-section { padding: 88px 16px; background: #fff; }
.sm-creme { background: var(--sm-creme); }
.sm-sombre { background: var(--sm-nuit); color: #d5d9e0; }
.sm-kicker {
	margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .18em;
	text-transform: uppercase; color: var(--sm-orange);
}
.sm-display, .sm-titre {
	font-family: var(--sm-display) !important; font-weight: 400 !important;
	letter-spacing: .02em !important; text-transform: uppercase;
}
.sm-display { font-size: clamp(58px, 8.4vw, 118px) !important; line-height: .92 !important; color: #fff !important; margin: 0 0 22px !important; }
.sm-titre { font-size: clamp(42px, 5vw, 64px) !important; line-height: .95 !important; color: var(--sm-nuit) !important; margin: 0 0 10px !important; }
.sm-display span, .sm-titre span { color: var(--sm-orange); }
.sm-sombre .sm-titre { color: #fff !important; }
.sm-sous { margin: 0 0 40px; font-size: 18px; color: var(--sm-doux); }
.sm-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: #cfd4dc; max-width: 580px; margin: 0 0 30px; }
.sm-centre { text-align: center; margin-top: 44px; }
.sm-btns { display: flex; flex-wrap: wrap; gap: 14px; }

.sm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 16px 30px; border-radius: 999px; border: 2px solid var(--sm-orange);
	background: var(--sm-orange); color: #111 !important; font-weight: 700; font-size: 16px;
	text-decoration: none !important; line-height: 1.1;
	transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sm-btn:hover { background: var(--sm-orange-clair); border-color: var(--sm-orange-clair); transform: translateY(-2px); }
.sm-btn-ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff !important; }
.sm-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--sm-orange); }
.sm-btn-sombre { background: var(--sm-nuit); border-color: var(--sm-nuit); color: #fff !important; }
.sm-btn-sombre:hover { background: var(--sm-orange); border-color: var(--sm-orange); color: #111 !important; }
.sm-btn:focus-visible, .sm-tuile:focus-visible { outline: 3px solid var(--sm-orange-clair); outline-offset: 3px; }

/* ---------- accueil pleine largeur ---------- */
body.home #main { padding: 0 !important; background: #fff; }
body.home #main > .fusion-row, body.home #content, body.home .post-content { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.home .fusion-page-title-bar { display: none; }

/* bandeau principal */
.sm-hero {
	position: relative; display: flex; align-items: center; min-height: min(78vh, 720px);
	padding: 96px 16px; color: #fff;
	background-color: #0b0e13;
	background-image: linear-gradient(90deg, rgba(8,11,17,.92) 0%, rgba(8,11,17,.55) 42%, rgba(8,11,17,0) 62%), var(--sm-hero);
	background-size: cover; background-position: right center; background-repeat: no-repeat;
}
.sm-hero .sm-wrap { width: 100%; }

/* atouts */
.sm-atouts { background: #fff; border-bottom: 1px solid #ece8e2; padding: 30px 16px; }
.sm-atouts-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sm-atout { display: flex; align-items: center; gap: 14px; }
.sm-atout svg { flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: #fdf0e3; color: #c96a1b; }
.sm-atout strong { display: block; color: var(--sm-nuit); font-size: 15px; }
.sm-atout span { display: block; color: var(--sm-doux); font-size: 13.5px; line-height: 1.4; }

/* tuiles de categories */
.sm-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sm-tuile {
	position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
	border-radius: var(--sm-rayon); background: var(--sm-panneau); text-decoration: none !important;
	box-shadow: 0 10px 30px -18px rgba(15,18,22,.55);
}
.sm-tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sm-tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,18,22,0) 40%, rgba(15,18,22,.88) 100%); }
.sm-tuile:hover img { transform: scale(1.06); }
.sm-tuile-txt { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; color: #fff; }
.sm-tuile-txt strong { display: block; font-family: var(--sm-display); font-weight: 400; font-size: 32px; letter-spacing: .03em; line-height: 1; }
.sm-tuile-txt em { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: #e3e6eb; }
.sm-tuile:hover .sm-tuile-txt strong { color: var(--sm-orange-clair); }

/* produit vedette */
.sm-vedette { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sm-vedette-img img { width: 100%; border-radius: 24px; box-shadow: 0 30px 80px -30px rgba(228,134,50,.45); }
.sm-liste { list-style: none; padding: 0; margin: 0 0 26px; }
.sm-liste li { position: relative; padding-left: 28px; margin: 0 0 10px; color: #e3e6eb; }
.sm-liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--sm-orange); }
.sm-prix { font-size: 20px; color: #fff; margin: 0 0 22px; }
.sm-prix .amount { color: var(--sm-orange-clair); font-weight: 700; }

/* communaute */
.sm-meute { text-align: center; background: radial-gradient(ellipse at 50% 120%, rgba(228,134,50,.35), rgba(15,18,22,0) 60%), var(--sm-nuit); }
.sm-meute .sm-lead { margin-left: auto; margin-right: auto; }
.sm-meute .sm-btns { justify-content: center; }

/* ---------- en-tete ---------- */
.fusion-header-wrapper .fusion-header { border-bottom: 1px solid rgba(255,255,255,.06); }
.fusion-main-menu > ul > li > a { font-weight: 600 !important; }

/* ---------- bandeau de titre des pages ---------- */
.fusion-page-title-bar h1, .fusion-page-title-bar .entry-title {
	font-family: var(--sm-display) !important; font-weight: 400 !important; letter-spacing: .03em !important; text-transform: uppercase;
}
.fusion-page-title-bar .fusion-page-title-secondary, .fusion-page-title-bar .fusion-breadcrumbs, .fusion-page-title-bar .fusion-breadcrumbs a { color: #cfd4dc !important; }

/* ---------- produits (grilles) ---------- */
.woocommerce ul.products li.product .fusion-product-wrapper, .sm-section ul.products li.product .fusion-product-wrapper {
	background: #fff; border-radius: 14px; overflow: hidden;
	box-shadow: 0 1px 0 rgba(15,18,22,.04), 0 12px 32px -22px rgba(15,18,22,.45);
	transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product .fusion-product-wrapper:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -24px rgba(15,18,22,.5); }
ul.products li.product .product-title, ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .product-title a { font-size: 16px !important; line-height: 1.35 !important; font-weight: 600 !important; font-style: normal !important; color: var(--sm-nuit) !important; }
ul.products li.product .price, ul.products li.product .price .amount { color: #b85f14 !important; font-weight: 700; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .fusion-button, .single_add_to_cart_button { border-radius: 999px !important; }
.woocommerce .single_add_to_cart_button, .woocommerce .checkout-button, #place_order {
	background: var(--sm-orange) !important; border-color: var(--sm-orange) !important; color: #111 !important; font-weight: 700 !important;
}
.woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover, #place_order:hover { background: var(--sm-orange-clair) !important; }
.single-product .product_title { font-size: clamp(28px, 3vw, 38px) !important; line-height: 1.2 !important; }
.single-product .summary .price, .single-product .summary .price .amount { color: #b85f14 !important; font-weight: 700; }
.serenity-photos img { display: block; max-width: 100%; height: auto; margin: 0 auto 14px; border-radius: 12px; }

/* ---------- pages de texte (legal, nous joindre) ---------- */
body.page:not(.home):not(.woocommerce-page) #content .post-content {
	max-width: 860px; margin: 0 auto; background: #fff; padding: clamp(24px, 4vw, 56px);
	border-radius: 18px; box-shadow: 0 16px 44px -30px rgba(15,18,22,.35); color: var(--sm-texte); font-size: 16.5px; line-height: 1.7;
}
body.page:not(.home):not(.woocommerce-page) .post-content h2 {
	font-size: 22px !important; margin: 38px 0 12px !important; padding-left: 14px; border-left: 4px solid var(--sm-orange); line-height: 1.3 !important;
}
body.page:not(.home):not(.woocommerce-page) .post-content h2:first-child { margin-top: 0 !important; }

/* ---------- pied de page ---------- */
.sm-pied { background: var(--sm-panneau); color: #aeb4be; padding: 64px 16px 48px; font-size: 15px; line-height: 1.6; }
.sm-pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.sm-pied-titre { font-family: var(--sm-display) !important; font-size: 26px !important; font-weight: 400 !important; letter-spacing: .04em !important; color: #fff !important; margin: 0 0 16px !important; }
.sm-pied p { margin: 0 0 12px; }
.sm-pied a { color: #dfe3e8; text-decoration: none; }
.sm-pied a:hover { color: var(--sm-orange); }
.sm-pied-logo { max-width: 230px; height: auto; margin-bottom: 16px; }
.sm-pied-liens { list-style: none; margin: 0; padding: 0; }
.sm-pied-liens li { margin: 0 0 9px; }
.sm-paiement { margin-top: 18px !important; font-size: 13px; opacity: .8; }
@media (max-width: 1000px) { .sm-pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sm-pied-grille { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- mobile ---------- */
@media (max-width: 1000px) {
	.sm-tuiles { grid-template-columns: repeat(2, 1fr); }
	.sm-atouts-grille { grid-template-columns: repeat(2, 1fr); }
	.sm-vedette { grid-template-columns: 1fr; gap: 36px; }
	/* tablette et telephone : le texte en haut, les loups dessous */
	.sm-hero {
		min-height: 0; padding: 72px 16px clamp(260px, 52vw, 420px);
		background-image: linear-gradient(180deg, rgba(8,11,17,.96) 0%, rgba(8,11,17,.75) 50%, rgba(8,11,17,0) 80%), var(--sm-hero);
		background-size: 100% 100%, auto clamp(360px, 70vw, 620px); background-position: center, 72% 100%;
	}
}
@media (max-width: 700px) {
	.sm-section { padding: 60px 16px; }
	.sm-hero { padding-bottom: 88vw; background-size: 100% 100%, auto 92vw; background-position: center, 92% 100%; }
	.sm-btns .sm-btn { flex: 1 1 100%; }
	.sm-atouts-grille { grid-template-columns: 1fr; gap: 16px; }
	.sm-tuiles { gap: 12px; }
	.sm-tuile-txt { left: 12px; right: 12px; bottom: 12px; }
	.sm-tuile-txt strong { font-size: 24px; }
	.sm-tuile-txt em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sm-btn, .sm-tuile img, .woocommerce ul.products li.product .fusion-product-wrapper { transition: none; }
}

/* ---------- en-tete sur telephone : logo plus etroit pour garder les icones sur la meme ligne ---------- */
@media (max-width: 800px) {
	.fusion-header .fusion-logo img { max-width: 200px !important; height: auto !important; }
	.fusion-header .fusion-logo { margin-top: 12px !important; margin-bottom: 12px !important; }
}

/* fiche produit : le titre est deja dans la fiche, pas besoin du bandeau */
.single-product .fusion-page-title-bar { display: none; }
.single-product #main { padding-top: 48px !important; }
.single-product .woocommerce-tabs { background: #fff; border-radius: 16px; padding: 8px 24px 24px; }

/* tableau de la politique de temoins */
.sm-temoins { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 14.5px; display: block; overflow-x: auto; }
.sm-temoins th, .sm-temoins td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid #ece8e2; }
.sm-temoins th { background: var(--sm-creme); font-weight: 700; color: var(--sm-nuit); }
.sm-temoins code { font-size: 13px; background: #f3efe9; padding: 2px 6px; border-radius: 4px; word-break: break-all; }