/*
Theme Name: Shams Bien-être
Theme URI: https://jeromeriboulet.fr/
Author: Jérôme Riboulet
Author URI: https://jeromeriboulet.fr/
Description: Thème vitrine one-page sur-mesure pour Shams Bien-être : univers doux et raffiné aux tons dorés, navigation fluide en plein écran, sections administrables (massages, prestations, témoignages, réservation). Conçu pour fonctionner avec les extensions Shams (Massages, Témoignages, Réservation).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shams-bienetre
Tags: one-page, custom-logo, custom-colors, translation-ready, full-width-template
Copyright: 2026 Jérôme Riboulet
*/

/* ====================================================================
   1. Variables (les couleurs/polices réelles sont injectées en inline
      par le thème via shams_inline_css_vars(); valeurs de repli ici)
   ==================================================================== */
:root {
	--shams-or: #c88114;
	--shams-champagne: #e9c878;
	--shams-creme: #fbf6ec;
	--shams-encre: #3a322a;
	--shams-sauge: #93a487;
	--shams-font-titre: "Cormorant Garamond", Georgia, serif;
	--shams-font-texte: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--shams-blanc: #fffdf9;
	--shams-bord: rgba( 58, 50, 42, .12 );
	--shams-ombre: 0 24px 60px -28px rgba( 58, 50, 42, .5 );
	--shams-radius: 18px;
	--shams-header-h: 84px;
}

/* ====================================================================
   2. Reset léger & base
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var( --shams-header-h ); }
body {
	margin: 0;
	font-family: var( --shams-font-texte );
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	color: var( --shams-encre );
	background: var( --shams-blanc );
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var( --shams-or ); text-decoration: none; transition: color .2s; }
a:hover { color: var( --shams-encre ); }
h1, h2, h3, h4 {
	font-family: var( --shams-font-titre );
	font-weight: 600;
	line-height: 1.12;
	color: var( --shams-encre );
	margin: 0 0 .4em;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect( 0, 0, 0, 0 );
	white-space: nowrap; border: 0;
}
.shams-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var( --shams-or );
	color: #fff;
	padding: 10px 18px;
	z-index: 9999;
	border-radius: 0 0 8px 0;
}
.shams-skip-link:focus { left: 0; }

.shams-container {
	width: min( 1200px, 92vw );
	margin: 0 auto;
}
.shams-container--narrow { width: min( 820px, 92vw ); }

/* ====================================================================
   3. En-tête / navigation sticky
   ==================================================================== */
.shams-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	height: var( --shams-header-h );
	display: flex;
	align-items: center;
	transition: background .35s ease, box-shadow .35s ease, height .35s ease;
}
.shams-header__inner {
	width: min( 1280px, 94vw );
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.shams-header.is-scrolled {
	background: rgba( 255, 253, 249, .92 );
	backdrop-filter: blur( 10px );
	box-shadow: 0 8px 30px -22px rgba( 58, 50, 42, .55 );
	height: 68px;
}
.shams-header__brand img,
.shams-header__brand .shams-logo img { max-height: 56px; width: auto; transition: max-height .35s; }
.shams-header.is-scrolled .shams-header__brand img { max-height: 44px; }
.custom-logo-link { display: inline-block; }

.shams-menu {
	display: flex;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}
.shams-menu a {
	color: var( --shams-encre );
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .02em;
	position: relative;
	padding: 6px 0;
}
.shams-menu a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var( --shams-or );
	transition: width .25s ease;
}
.shams-menu a:hover::after,
.shams-menu .current-menu-item a::after,
.shams-menu li.is-active a::after { width: 100%; }

/* Bandeau sombre au sommet (avant scroll) : texte clair */
.shams-header.is-light:not( .is-scrolled ) .shams-menu a { color: #fff; }
.shams-header.is-light:not( .is-scrolled ) .shams-nav__bars,
.shams-header.is-light:not( .is-scrolled ) .shams-nav__bars::before,
.shams-header.is-light:not( .is-scrolled ) .shams-nav__bars::after { background: #fff; }

.shams-nav__toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	width: 44px; height: 44px;
	position: relative;
}
.shams-nav__bars,
.shams-nav__bars::before,
.shams-nav__bars::after {
	content: "";
	position: absolute;
	left: 10px;
	width: 24px; height: 2px;
	background: var( --shams-encre );
	transition: transform .3s, opacity .3s;
}
.shams-nav__bars { top: 21px; }
.shams-nav__bars::before { top: -7px; }
.shams-nav__bars::after { top: 7px; }
.shams-nav.is-open .shams-nav__bars { background: transparent; }
.shams-nav.is-open .shams-nav__bars::before { transform: translateY( 7px ) rotate( 45deg ); }
.shams-nav.is-open .shams-nav__bars::after { transform: translateY( -7px ) rotate( -45deg ); }

/* ====================================================================
   4. Sections génériques
   ==================================================================== */
.shams-section { padding: 110px 0; position: relative; }
.shams-section--massages { background: var( --shams-creme ); }
.shams-section--prestations { background: var( --shams-blanc ); }
.shams-section--temoignages { background: var( --shams-creme ); }
.shams-section--contact { background: linear-gradient( 160deg, #fff 0%, var( --shams-creme ) 100% ); }
.shams-section--page { padding-top: calc( var( --shams-header-h ) + 70px ); }

.shams-section__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.shams-section__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .28em;
	font-size: 12px;
	font-weight: 600;
	color: var( --shams-or );
	margin-bottom: 14px;
}
.shams-section__eyebrow::before,
.shams-section__eyebrow::after {
	content: "";
	display: inline-block;
	width: 26px; height: 1px;
	background: var( --shams-champagne );
	vertical-align: middle;
	margin: 0 10px;
}
.shams-section__titre { font-size: clamp( 2rem, 4vw, 3.1rem ); }
.shams-section__texte { font-size: 1.08rem; color: #6f6457; margin: 0; }
.shams-section__more { text-align: center; margin-top: 48px; }

/* ====================================================================
   5. Boutons
   ==================================================================== */
.shams-btn {
	display: inline-block;
	background: linear-gradient( 135deg, var( --shams-or ), var( --shams-champagne ) );
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 15px 38px;
	font-family: var( --shams-font-texte );
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: 0 16px 30px -16px rgba( 200, 129, 20, .85 );
}
.shams-btn:hover { transform: translateY( -3px ); color: #fff; box-shadow: 0 22px 38px -18px rgba( 200, 129, 20, .9 ); }
.shams-btn--ghost {
	background: transparent;
	color: var( --shams-or );
	border: 1.5px solid var( --shams-or );
	box-shadow: none;
}
.shams-btn--ghost:hover { background: var( --shams-or ); color: #fff; }
.shams-btn--full { display: block; width: 100%; text-align: center; margin-bottom: 26px; }

/* ====================================================================
   6. Hero
   ==================================================================== */
.shams-hero {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var( --shams-header-h ) 20px 80px;
	background:
		radial-gradient( ellipse at 20% 20%, rgba( 233, 200, 120, .28 ), transparent 55% ),
		radial-gradient( ellipse at 80% 70%, rgba( 147, 164, 135, .22 ), transparent 55% ),
		var( --shams-creme );
	background-size: cover;
	background-position: center;
	position: relative;
}
.shams-hero.has-image { color: #fff; }
.shams-hero.has-image .shams-hero__titre,
.shams-hero.has-image .shams-hero__texte,
.shams-hero.has-image .shams-hero__surtitre { color: #fff; }
.shams-hero__inner { max-width: 760px; }
.shams-hero__logo { width: clamp( 180px, 26vw, 260px ); height: auto; margin: 0 auto 26px; }
.shams-hero__surtitre {
	text-transform: uppercase;
	letter-spacing: .3em;
	font-size: 13px;
	font-weight: 600;
	color: var( --shams-or );
	margin: 0 0 16px;
}
.shams-hero__titre {
	font-size: clamp( 2.4rem, 6vw, 4.4rem );
	font-weight: 600;
	margin: 0 0 22px;
}
.shams-hero__texte {
	font-size: clamp( 1.05rem, 2vw, 1.25rem );
	color: #5f5547;
	margin: 0 auto 36px;
	max-width: 580px;
}
.shams-hero__scroll {
	position: absolute;
	bottom: 30px; left: 50%;
	transform: translateX( -50% );
	width: 28px; height: 46px;
	border: 2px solid var( --shams-or );
	border-radius: 16px;
	display: flex;
	justify-content: center;
}
.shams-hero.has-image .shams-hero__scroll { border-color: #fff; }
.shams-hero__scroll-dot {
	width: 5px; height: 9px;
	background: var( --shams-or );
	border-radius: 3px;
	margin-top: 8px;
	animation: shamsScroll 1.8s infinite;
}
.shams-hero.has-image .shams-hero__scroll-dot { background: #fff; }
@keyframes shamsScroll {
	0% { opacity: 0; transform: translateY( 0 ); }
	40% { opacity: 1; }
	80% { opacity: 0; transform: translateY( 14px ); }
	100% { opacity: 0; }
}

/* ====================================================================
   7. Cartes prestations
   ==================================================================== */
.shams-cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 26px;
}
.shams-card {
	background: var( --shams-creme );
	border: 1px solid var( --shams-bord );
	border-radius: var( --shams-radius );
	padding: 42px 32px;
	text-align: center;
	transition: transform .3s ease, box-shadow .3s ease;
}
.shams-card:hover { transform: translateY( -6px ); box-shadow: var( --shams-ombre ); }
.shams-card__icone {
	font-size: 42px;
	display: block;
	margin-bottom: 18px;
	line-height: 1;
}
.shams-card__titre { font-size: 1.5rem; }
.shams-card__texte { color: #6f6457; margin: 0; }

/* ====================================================================
   8. Contact
   ==================================================================== */
.shams-contact-grid {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 48px;
	align-items: start;
}
.shams-contact-infos {
	background: var( --shams-encre );
	color: #fff;
	border-radius: var( --shams-radius );
	padding: 38px 32px;
}
.shams-contact-infos .shams-btn--full { margin-top: 0; }
.shams-contact-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.shams-contact-liste li {
	padding: 14px 0;
	border-bottom: 1px solid rgba( 255, 255, 255, .12 );
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.shams-contact-liste li:last-child { border-bottom: 0; }
.shams-contact-liste span {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 11px;
	color: var( --shams-champagne );
}
.shams-contact-liste a { color: #fff; font-size: 1.05rem; }
.shams-contact-liste a:hover { color: var( --shams-champagne ); }

/* ====================================================================
   9. Pied de page
   ==================================================================== */
.shams-footer { background: var( --shams-encre ); color: #e9e2d6; padding: 64px 0 0; }
.shams-footer__inner {
	width: min( 1200px, 92vw );
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 48px;
}
.shams-footer__brand img { max-height: 64px; width: auto; margin-bottom: 16px; filter: brightness( 0 ) invert( 1 ); opacity: .92; }
.shams-footer__texte { color: #b8ad9c; max-width: 320px; }
.shams-footer__coords p { margin: 0 0 10px; }
.shams-footer__coords a { color: #e9e2d6; }
.shams-footer__coords a:hover { color: var( --shams-champagne ); }
.shams-footer__social { display: flex; flex-direction: column; gap: 12px; }
.shams-social-link {
	color: #e9e2d6;
	border: 1px solid rgba( 255, 255, 255, .2 );
	border-radius: 999px;
	padding: 8px 18px;
	text-align: center;
	transition: background .25s, color .25s;
}
.shams-social-link:hover { background: var( --shams-or ); border-color: var( --shams-or ); color: #fff; }
.shams-footer__bottom {
	border-top: 1px solid rgba( 255, 255, 255, .1 );
	padding: 22px 0;
	text-align: center;
	font-size: 13px;
	color: #9a8d7c;
}
.shams-footer__bottom p { margin: 0; }

/* Bouton retour en haut */
.shams-totop {
	position: fixed;
	right: 22px; bottom: 22px;
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 0;
	background: var( --shams-or );
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 12px );
	transition: opacity .3s, transform .3s, visibility .3s;
	z-index: 900;
	box-shadow: 0 12px 26px -12px rgba( 200, 129, 20, .9 );
}
.shams-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.shams-totop:hover { background: var( --shams-encre ); }

/* ====================================================================
   10. Contenu de page & articles
   ==================================================================== */
.shams-page-content { font-size: 1.05rem; }
.shams-page-content h2 { font-size: 1.9rem; margin-top: 1.6em; }
.shams-page-content img { border-radius: 12px; margin: 1.4em 0; }
.shams-posts { display: grid; gap: 30px; }
.shams-post {
	background: var( --shams-creme );
	border-radius: var( --shams-radius );
	padding: 32px 34px;
}
.shams-post__titre { font-size: 1.6rem; margin-bottom: .3em; }
.shams-notice-admin {
	background: #fff7e6;
	border: 1px dashed var( --shams-champagne );
	color: #8a6d2f;
	padding: 14px 18px;
	border-radius: 10px;
	text-align: center;
}

/* ====================================================================
   11. Animations au défilement
   ==================================================================== */
[data-anim] {
	opacity: 0;
	transform: translateY( 26px );
	transition: opacity .7s ease, transform .7s ease;
	transition-delay: var( --shams-delay, 0s );
}
[data-anim].is-visible { opacity: 1; transform: none; }
@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	[data-anim] { opacity: 1; transform: none; transition: none; }
	.shams-hero__scroll-dot { animation: none; }
}

/* ====================================================================
   12. Responsive
   ==================================================================== */
@media ( max-width: 900px ) {
	.shams-cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
	.shams-contact-grid { grid-template-columns: 1fr; }
	.shams-footer__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media ( max-width: 782px ) {
	.shams-nav__toggle { display: block; z-index: 1100; }
	.shams-menu {
		position: fixed;
		inset: 0 0 0 auto;
		width: min( 320px, 82vw );
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		background: var( --shams-blanc );
		padding: calc( var( --shams-header-h ) + 16px ) 32px 32px;
		box-shadow: -20px 0 50px -30px rgba( 0, 0, 0, .5 );
		transform: translateX( 100% );
		transition: transform .35s ease;
	}
	.shams-nav.is-open .shams-menu { transform: none; }
	.shams-menu a { color: var( --shams-encre ) !important; font-size: 18px; padding: 10px 0; }
	.shams-section { padding: 80px 0; }
	.shams-section--page { padding-top: calc( var( --shams-header-h ) + 40px ); }
}
@media ( max-width: 480px ) {
	body { font-size: 16px; }
	.shams-btn { padding: 13px 30px; }
	.shams-card { padding: 32px 24px; }
	.shams-contact-infos { padding: 30px 24px; }
}