/* =============================================================================
 *  SAWADEE — Grille des soins
 *  Style associé au shortcode [sawadee_soins_en_avant]
 *  et au mu-plugin sawadee-cpt-soins.php
 * ============================================================================
 *
 *  OÙ COLLER CE CSS ? (au choix)
 *    1. Apparence → Personnaliser → CSS additionnel       (le plus simple)
 *    2. style.css du child theme Bridge                    (versionnable)
 *    3. Elementor → Site Settings → Custom CSS             (global au site)
 *
 *  POLICE SERIF
 *  Le titre utilise une serif élégante (Cormorant Garamond par défaut).
 *  Pour la charger : Elementor → Site Settings → Theme Style → Typography,
 *  ou Apparence → Personnaliser → Polices, ou via Google Fonts dans le
 *  child theme. Si la police n'est pas chargée, le navigateur retombera
 *  sur Georgia (toujours esthétique).
 *
 * ========================================================================== */


/* =============================================================================
 *  Palette Sawadee (custom properties)
 *  Modifie ici pour propager partout.
 * ========================================================================== */

:root {
	--sawadee-creme:     #f7f1e3;
	--sawadee-vert:      #2d4a3a;
	--sawadee-or:        #b8924d;
	--sawadee-texte:     #6b6b6b;
	--sawadee-bordure:   #ede4cc;
	--sawadee-card-bg:   #ffffff;
	--sawadee-marron:        #4a2418;
    --sawadee-marron-deep:   #2a140e;
}


/* =============================================================================
 *  Grille
 * ========================================================================== */

.sawadee-soins-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	max-width: 1100px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.sawadee-soins-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.sawadee-soins-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
	}
}


/* =============================================================================
 *  Carte
 * ========================================================================== */

.sawadee-soin-card {
	background: var(--sawadee-card-bg);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s ease;
}

.sawadee-soin-card:hover {
	transform: translateY(-4px);
}


/* — Image — fond vert sombre si pas encore d'image renseignée ------------- */

.sawadee-soin-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--sawadee-marron);
	overflow: hidden;
	text-decoration: none;
}

.sawadee-soin-card__media img {
	width: 100% !important;
	/* height 100% en !important : neutralise le « img { height:auto !important } »
	   du thème Bridge, qui laissait l'image plus courte que sa boîte 4/3 et
	   faisait apparaître le fond marron en bas. object-fit:cover recadre proprement. */
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s ease;
}

.sawadee-soin-card:hover .sawadee-soin-card__media img {
	transform: scale(1.05);
}


/* — Contenu — flex pour caler le lien en bas même sans accroche ---------- */

.sawadee-soin-card__body {
	padding: 1.25rem 1.25rem 1.1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}


/* — Titre ----------------------------------------------------------------- */

.sawadee-soin-card__title {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	/* 28px imposé (!important) car le thème Bridge applique sa propre taille
	   de h3 avec une priorité supérieure : sans cela, la valeur ne s'applique pas. */
	font-size: 28px !important;
	font-weight: 500;
	color: var(--sawadee-vert);
	margin: 0 0 0.5rem;
	line-height: 1.25;
}

.sawadee-soin-card__title a {
	font-size: 28px !important;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sawadee-soin-card__title a:hover {
	color: var(--sawadee-or);
}


/* — Accroche -------------------------------------------------------------- */

.sawadee-soin-card__accroche {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--sawadee-texte);
	font-style: italic;
	margin: 0 0 1rem;
	flex: 1; /* pousse le lien en bas de la carte */
}


/* — Lien « Découvrir » --------------------------------------------------- */

.sawadee-soin-card__link {
	display: block;
	color: var(--sawadee-or);
	font-size: 0.75rem;
	letter-spacing: 2.5px;
	text-decoration: none;
	padding-top: 0.85rem;
	border-top: 1px solid var(--sawadee-bordure);
	transition: color 0.2s ease;
}

.sawadee-soin-card__link::after {
	content: ' →';
	display: inline-block;
	transition: transform 0.25s ease;
}

.sawadee-soin-card__link:hover {
	color: var(--sawadee-vert);
}

.sawadee-soin-card__link:hover::after {
	transform: translateX(5px);
}


/* =============================================================================
 *  BONUS — Wrapper de section
 *
 *  Si tu insères le shortcode dans Elementor, configure la section
 *  Elementor avec background #f7f1e3 et padding vertical 80px : c'est
 *  plus flexible que ce CSS.
 *
 *  Si tu préfères le faire 100% en CSS, ajoute autour du shortcode :
 *      <div class="sawadee-soins-section"> [shortcode] </div>
 * ========================================================================== */

.sawadee-soins-section {
	background: var(--sawadee-creme);
	padding: 5rem 1.5rem;
}

.sawadee-soins-section__header {
	text-align: center;
	max-width: 480px;
	margin: 0 auto 2.5rem;
}

.sawadee-soins-section__suptitle {
	color: var(--sawadee-or);
	font-size: 0.75rem;
	letter-spacing: 3px;
	font-style: italic;
	margin: 0 0 0.6rem;
}

.sawadee-soins-section__title {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-size: 2rem;
	color: var(--sawadee-vert);
	font-weight: 500;
	margin: 0;
}

.sawadee-soins-section__divider {
	width: 50px;
	height: 1px;
	background: var(--sawadee-or);
	margin: 1rem auto 0.9rem;
	border: none;
}

.sawadee-soins-section__intro {
	font-size: 0.9rem;
	color: var(--sawadee-texte);
	line-height: 1.7;
	margin: 0;
}


/* — Bouton CTA « Voir tous nos soins » ----------------------------------- */

.sawadee-cta-soins {
	display: inline-block;
	background: var(--sawadee-vert);
	color: var(--sawadee-creme);
	padding: 15px 40px;
	font-size: 0.75rem;
	letter-spacing: 3px;
	text-decoration: none;
	border: 1px solid var(--sawadee-vert);
	transition: background 0.25s ease, color 0.25s ease;
	margin-top: 2.5rem;
}

.sawadee-cta-soins:hover {
	background: transparent;
	color: var(--sawadee-vert);
}

.sawadee-soins-section__footer {
	text-align: center;
}

/* =============================================================================
 *  GALERIE DU SOIN  — shortcode [sawadee_soin_galerie]
 *  Grille responsive + visionneuse plein écran (lightbox)
 * ========================================================================== */

.sawadee-galerie {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	max-width: 1100px;
	margin: 2rem auto;
}

@media (max-width: 900px) {
	.sawadee-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.sawadee-galerie { grid-template-columns: 1fr; max-width: 420px; }
}

.sawadee-galerie__item {
	display: block;
	padding: 0;
	border: none;
	background: var(--sawadee-vert);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 4 / 3;
	position: relative;
}

.sawadee-galerie__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease, opacity 0.3s ease;
}

.sawadee-galerie__item::after {
	content: '⤢';
	position: absolute;
	right: 10px;
	bottom: 8px;
	color: #fff;
	font-size: 1rem;
	opacity: 0;
	transition: opacity 0.25s ease;
	text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.sawadee-galerie__item:hover img { transform: scale(1.05); }
.sawadee-galerie__item:hover::after { opacity: 1; }
.sawadee-galerie__item:focus-visible { outline: 2px solid var(--sawadee-or); outline-offset: 2px; }


/* — Visionneuse (lightbox) — */

.sawadee-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(20, 28, 24, 0.92);
	align-items: center;
	justify-content: center;
	padding: 4vh 5vw;
}

.sawadee-lightbox.is-open { display: flex; }

.sawadee-lightbox__img {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.sawadee-lightbox__close,
.sawadee-lightbox__nav {
	position: absolute;
	background: rgba(255,255,255,.1);
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.2s ease;
	line-height: 1;
}
.sawadee-lightbox__close:hover,
.sawadee-lightbox__nav:hover { background: var(--sawadee-or); }

.sawadee-lightbox__close {
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	font-size: 1.8rem;
}

.sawadee-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 2.2rem;
}
.sawadee-lightbox__prev { left: 18px; }
.sawadee-lightbox__next { right: 18px; }

@media (max-width: 600px) {
	.sawadee-lightbox__nav { width: 42px; height: 42px; font-size: 1.7rem; }
	.sawadee-lightbox__prev { left: 8px; }
	.sawadee-lightbox__next { right: 8px; }
	.sawadee-lightbox__close { top: 10px; right: 10px; }
}


/* =============================================================================
 *  GRILLE TARIFAIRE  — shortcode [sawadee_soin_tarifs]
 * ========================================================================== */

.sawadee-tarifs {
	max-width: 480px;
	margin: 2rem auto;
	background: var(--sawadee-card-bg);
	border: 1px solid var(--sawadee-bordure);
	border-radius: 14px;
	padding: 1.6rem 1.8rem;
}

.sawadee-tarifs__title {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--sawadee-vert);
	margin: 0 0 1rem;
	text-align: center;
}

.sawadee-tarifs__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sawadee-tarifs__row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 0.55rem 0;
	border-bottom: 1px dashed var(--sawadee-bordure);
}
.sawadee-tarifs__row:last-child { border-bottom: none; }

.sawadee-tarifs__duree {
	color: var(--sawadee-vert);
	font-size: 0.95rem;
	font-weight: 500;
	white-space: nowrap;
}

.sawadee-tarifs__dots {
	flex: 1;
	border-bottom: 1px dotted var(--sawadee-bordure);
	transform: translateY(-3px);
}

.sawadee-tarifs__prix {
	color: var(--sawadee-or);
	font-size: 1.05rem;
	font-weight: 600;
	white-space: nowrap;
}


/* =============================================================================
 *  FICHE SOIN — sections injectées dans le contenu (single.php du thème)
 *  (accroche, bienfaits, bouton carte cadeau). Tarifs & galerie ont déjà
 *  leur style plus haut dans ce fichier.
 * ========================================================================== */

.sasi-accroche {
	font-size: 1.05rem;
	font-style: italic;
	color: var(--sawadee-texte);
	margin: 0 0 1.6rem;
}

.sasi-bienfaits {
	background: var(--sawadee-creme);
	border: 1px solid var(--sawadee-bordure);
	border-radius: 14px;
	padding: 1.6rem 1.8rem;
	margin: 2rem auto;
	max-width: 600px;
}

.sasi-h2 {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--sawadee-vert);
	margin: 0 0 1rem;
	text-align: center;
}

.sasi-bienfaits-list { list-style: none; margin: 0; padding: 0; }
.sasi-bienfaits-list li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.8rem;
	font-size: 0.95rem;
	color: #4a3f35;
	border-bottom: 1px dashed var(--sawadee-bordure);
}
.sasi-bienfaits-list li:last-child { border-bottom: none; }
.sasi-bienfaits-list li::before {
	content: '✦';
	position: absolute; left: 0; top: 0.5rem;
	color: var(--sawadee-or); font-size: 0.85rem;
}

.sasi-cta-wrap { text-align: center; margin: 2.6rem 0 0.5rem; }
.sasi-cta {
	display: inline-block;
	background: var(--sawadee-vert);
	color: var(--sawadee-creme);
	padding: 15px 42px;
	font-size: 0.78rem;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--sawadee-vert);
	border-radius: 2px;
	transition: background 0.25s ease, color 0.25s ease;
}
.sasi-cta:hover { background: transparent; color: var(--sawadee-vert); }


/* =============================================================================
 *  FICHE SOIN — habillage complet (style "cartes cadeaux")
 *
 *  Tout est scopé à body.single-soin → n'affecte QUE les fiches soin.
 *  Le HTML cible est celui du single.php de Bridge :
 *    .title_outer (bandeau de titre) · .post_image (photo) · .entry_title (h2
 *    avec date) · .post_info (méta) · .comment_holder (commentaires).
 * ========================================================================== */

/* — Fond crème sur toute la zone de contenu (comme la page cartes cadeaux) — */
.single-soin .content_inner { background: var(--sawadee-creme) !important; }

/* — Hero : on remplit le bandeau de titre avec la photo du soin —
   La photo est posée en fond du .title lui-même (qui a une hauteur), pas du
   div .image qui, lui, fait 0 px tant qu'aucune image de titre n'est configurée
   dans le thème. L'URL de la photo arrive via wp_add_inline_style (PHP). */
.single-soin .title_outer,
.single-soin .title.title_size_small { height: 440px !important; }
.single-soin .title_holder {
	height: 440px !important;
	padding-top: 150px !important;
	position: relative;
	z-index: 2;
}
.single-soin .title_outer .title {
	position: relative !important;
	background-color: var(--sawadee-vert) !important; /* repli si pas de photo */
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}
/* Voile sombre pour la lisibilité du titre par-dessus la photo */
.single-soin .title_outer .title::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(20, 28, 24, 0.42);
	z-index: 1;
}
.single-soin .title_holder h1,
.single-soin .title_holder h1 span {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
	color: #fff !important;
	font-weight: 500 !important;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
	letter-spacing: 0.5px;
}

/* — On masque ce qui fait doublon ou "blog" — */
.single-soin .post_image,            /* photo en double (déjà en hero) */
.single-soin .entry_title,           /* titre h2 + date "22 Mai" */
.single-soin .post_info,             /* "Posted at… by… 0 Comments" */
.single-soin .blog_like,             /* "0 Likes" */
.single-soin .comment_holder,
.single-soin #comments,
.single-soin .comment_pager,
.single-soin .comment_form {
	display: none !important;
}

/* — Zone de texte : largeur de lecture, centrée — */
.single-soin .blog_single,
.single-soin .post_content_holder,
.single-soin .post_text,
.single-soin .post_text_inner { width: 100% !important; float: none !important; }

.single-soin .post_text_inner {
	max-width: 820px;
	margin: 0 auto !important;
	padding: 0 1rem;
}

.single-soin .default_template_holder { padding: 2.5rem 0 3.5rem !important; }

/* — Typographie du contenu — */
.single-soin .post_text_inner p {
	font-size: 1rem;
	line-height: 1.8;
	color: #4a3f35;
}

/* — Style des images de contenu (hors galerie qui a déjà le sien) — */
.single-soin .post_text_inner > img,
.single-soin .post_text_inner p img {
	border-radius: 14px;
	max-width: 100%;
	height: auto;
}
/* =============================================================================
 *  OPTION DUO — badge « Disponible en duo » + grille tarifaire 2 colonnes
 * ========================================================================== */

.sasi-duo-badge {
	margin: 0 0 1.6rem;
}
.sasi-duo-badge span {
	display: inline-block;
	background: var(--sawadee-creme);
	color: var(--sawadee-or);
	border: 1px solid var(--sawadee-bordure);
	border-radius: 999px;
	padding: 0.32rem 0.95rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.4px;
}

/* Grille tarifaire en deux colonnes (Solo / Duo) */
.sawadee-tarifs--duo .sawadee-tarifs__head,
.sawadee-tarifs--duo .sawadee-tarifs__row {
	display: grid;
	grid-template-columns: 1fr 5rem 5rem;
	gap: 10px;
	align-items: baseline;
}

.sawadee-tarifs--duo .sawadee-tarifs__head {
	padding: 0 0 0.5rem;
	margin-bottom: 0.35rem;
	border-bottom: 1px solid var(--sawadee-bordure);
}

.sawadee-tarifs__col {
	text-align: right;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--sawadee-vert);
}
.sawadee-tarifs__col--duree { text-align: left; }

/* En mode duo, les prix sont alignés à droite dans leur colonne */
.sawadee-tarifs--duo .sawadee-tarifs__prix {
	text-align: right;
}
.sawadee-tarifs__prix--duo {
	color: var(--sawadee-vert);
}