/*
Theme Name: Spas 4 Saisons
Theme URI: https://www.spas4saisons.com
Author: Calypso Communication
Description: Thème sur mesure pour Les Spas 4 Saisons (Saint-Hyacinthe). Reprend la présentation du site d'origine : menu latéral fixe, grande image de fond propre à chaque page et zone de contenu. Adapté aux cellulaires. À l'activation, les pages, le menu et la page d'accueil sont créés automatiquement.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: spas4saisons
License: GNU General Public License v2 or later
*/

:root {
	--s4s-or: #daa520;
	--s4s-orange: #ffa900;
	--s4s-or-pale: #f0c579;
	--s4s-bleu: #0099ff;
	--s4s-bleu-fonce: #0077cc;
	--s4s-texte: #1a1a1a;
	--s4s-menu-fond: rgba(2, 3, 3, 0.6);
	--s4s-sombre-fond: rgba(0, 0, 0, 0.62);
	--s4s-menu-largeur: 239px;
	--s4s-contenu-largeur: 760px;
	--s4s-police-titre: "Raleway", Arial, sans-serif;
	--s4s-police-texte: "Questrial", "Century Gothic", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	min-height: 100vh;
	background-color: #1b1d1e;
	color: var(--s4s-texte);
	font-family: var(--s4s-police-texte);
	font-size: 15px;
	line-height: 1.55;
}

/* Image de fond fixe (pseudo-élément : fonctionne aussi sur iOS) */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: #1b1d1e var(--s4s-fond, none) center / cover no-repeat;
}

img { max-width: 100%; height: auto; }

a { color: var(--s4s-bleu-fonce); }
a:hover { color: var(--s4s-orange); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.s4s-saut {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	padding: 10px 16px;
	background: #fff;
	color: #000;
}
.s4s-saut:focus { left: 10px; }

/* ---------- Menu latéral ---------- */

.s4s-menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1000;
	width: var(--s4s-menu-largeur);
	display: flex;
	flex-direction: column;
	background: var(--s4s-menu-fond);
	color: #fff;
	overflow-y: auto;
}

.s4s-logo {
	display: block;
	width: 200px;
	margin: 30px auto;
}
.s4s-logo img { display: block; width: 100%; }

.s4s-burger { display: none; }

.s4s-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.s4s-nav li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.s4s-nav li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.s4s-nav a {
	display: block;
	padding: 8px 0 8px 40px;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 17px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.s4s-nav a:hover,
.s4s-nav a:focus-visible { color: var(--s4s-orange); }
.s4s-nav .current-menu-item > a,
.s4s-nav .current_page_item > a {
	background: #000;
	font-weight: bold;
	border-bottom: 2px solid var(--s4s-orange);
}
.s4s-nav .sub-menu a { padding-left: 56px; font-size: 15px; }

.s4s-menu-bas {
	margin-top: auto;
	padding: 24px 20px 20px 40px;
	font-size: 10px;
}
.s4s-social {
	display: flex;
	gap: 40px;
	margin-bottom: 18px;
}
.s4s-social a { display: block; width: 40px; height: 40px; }
.s4s-social img { width: 40px; height: 40px; object-fit: contain; }
.s4s-menu-bas .s4s-tel {
	display: block;
	margin-bottom: 14px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
}
.s4s-menu-bas .s4s-tel span { color: var(--s4s-orange); }

/* ---------- Zone de contenu ---------- */

.s4s-principal {
	position: relative;
	width: var(--s4s-contenu-largeur);
	max-width: calc(100vw - var(--s4s-menu-largeur) - 40px);
	min-height: 100vh;
	margin-left: calc(var(--s4s-menu-largeur) + 71px);
	padding: 20px;
}
.s4s-principal--sombre { background: var(--s4s-sombre-fond); color: #fff; }
.s4s-principal--sombre a { color: #fff; }
.s4s-principal--sombre a:hover { color: var(--s4s-orange); }
.s4s-principal--clair { background: transparent; }
.s4s-principal--clair .entry-content > * {
	background: #fff;
}

.entry-content > * { margin-top: 0; margin-bottom: 0; }
.s4s-principal--clair .entry-content > .wp-block-spacer { background: transparent; }
.entry-content::after { content: ""; display: table; clear: both; }

/* Bloc blanc « section » (pages claires) */
.s4s-section {
	padding: 20px 20px 30px;
}
.s4s-section + .s4s-section { padding-top: 0; }

/* Titres (repris de l'éditeur d'origine) */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 { font-family: var(--s4s-police-titre); }

.entry-content h1 {
	margin: 0 0 16px;
	padding: 6px 0;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.6;
}
.entry-content h1 small { font-size: 20px; }
.entry-content h2 {
	margin: 0 0 10px;
	color: var(--s4s-or);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}
.entry-content h3 {
	margin: 18px 0 8px;
	color: var(--s4s-or);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
}
.entry-content h4 { font-size: 16px; text-align: center; }
.entry-content p { margin: 0 0 12px; }
.entry-content ul { margin: 0 0 12px; padding-left: 26px; }
.entry-content li { margin-bottom: 4px; }

.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.s4s-justifie { text-align: justify; }

/* Images */
.wp-block-image { margin: 0 0 12px; }
.wp-block-image img { display: block; }
.wp-block-image figcaption,
.wp-block-gallery figcaption {
	margin-top: 4px;
	font-size: 12px;
	text-align: center;
}
.s4s-ombre img {
	padding: 8px;
	background: #fff;
	border: 1px solid #dedfdd;
	box-shadow: 5px 5px 5px #888;
}
.s4s-bordure img { border: 1px solid #000; }
.alignright { float: right; margin: 0 0 10px 16px; }
.alignleft { float: left; margin: 0 16px 10px 0; }
.aligncenter { margin-left: auto; margin-right: auto; }
.aligncenter img { margin: 0 auto; }

/* Colonnes (la mise en page vient de WordPress) */
.wp-block-columns { gap: 24px; margin-bottom: 16px; }

/* Galeries (mise en page WordPress ; légendes sous l'image plutôt que superposées) */
.wp-block-gallery { margin: 0 0 16px; }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	padding: 4px 0 0;
	background: none;
	color: inherit;
	font-size: 12px;
	text-shadow: none;
	overflow: visible;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { display: none; }
.wp-block-gallery.has-nested-images figure.wp-block-image { flex-direction: column; }
.s4s-galerie-photos img { aspect-ratio: 4 / 3; }
.wp-block-gallery.s4s-logos.has-nested-images figure.wp-block-image img { height: 90px; object-fit: contain; }
.s4s-pieces figcaption { text-transform: uppercase; }
.wp-block-gallery.s4s-pieces.has-nested-images figure.wp-block-image figcaption { font-size: 13px; }
.wp-block-gallery.s4s-pieces img {
	padding: 8px;
	background: #fff;
	border: 1px solid #dedfdd;
	box-shadow: 5px 5px 5px #888;
}

/* Vidéos */
.wp-block-embed { margin: 0 0 16px; }
.wp-block-embed figcaption {
	padding: 4px 8px;
	background: #000;
	color: #fff;
	font-size: 13px;
	text-align: left;
}

/* Boutons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-button__link {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 8px;
	background: var(--s4s-bleu);
	color: #fff !important;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.wp-block-button__link:hover { background: var(--s4s-bleu-fonce); transform: translateY(-2px); }

/* Séparateur pointillé (remplace Couvercles-point.jpg) */
.wp-block-separator {
	margin: 20px 0;
	border: 0;
	border-top: 3px dotted #b5b5b5;
}

/* Tableaux */
.wp-block-table { margin: 0 0 16px; overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table td { padding: 6px 4px; border-bottom: 1px solid #676766; }
.s4s-horaire td:last-child { text-align: right; }

/* Accordéon (blocs « Détails ») */
.wp-block-details {
	margin: 0 0 16px;
	border: 2px solid #000;
}
.wp-block-details summary {
	padding: 10px 16px;
	background: #000;
	color: var(--s4s-or-pale);
	font-family: var(--s4s-police-titre);
	font-size: 16px;
	cursor: pointer;
}
.wp-block-details[open] summary { margin-bottom: 12px; }
.wp-block-details > :not(summary) { padding-left: 16px; padding-right: 16px; }

/* Encadré noir (pages claires) */
.s4s-noir { background: #000 !important; color: #fff; }
.s4s-noir a { color: #fff; }
.s4s-gris { background: #4c4d4f !important; color: #fff; }
.s4s-gris a { color: #fff; }
.s4s-violet { color: #4b0082; }
.s4s-mauve { color: #800080; }
.s4s-sarcelle { color: #008080; }
.s4s-orange,
.entry-content .s4s-orange { color: var(--s4s-orange); }
.s4s-grand { font-size: 22px; }
.s4s-moyen { font-size: 18px; }

/* Étapes « Premièrement / Deuxièmement / Troisièmement » */
.s4s-etapes h3 {
	margin: 0 0 8px;
	padding: 4px 8px;
	background: #000;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
}

/* Services : liste image + texte */
.s4s-service {
	display: flex;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 3px dotted #b5b5b5;
}
.s4s-service:last-child { border-bottom: 0; }
.s4s-service > .wp-block-image { flex: 0 0 200px; margin: 0; }
.s4s-service > .wp-block-group { flex: 1; }
.s4s-titre-services { margin: 0; font-family: var(--s4s-police-titre); font-size: 16px; }
.s4s-titre-services span { color: var(--s4s-or); font-size: 26px; }

/* ---------- Bandeau « Besoin de nos services ? » ---------- */

.s4s-bandeau {
	display: block;
	margin-top: 60px;
	background: #fff;
	color: #000;
	text-decoration: none;
}
.s4s-bandeau__haut {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px 10px;
}
.s4s-bandeau__appel {
	font-family: "Oswald", Arial, sans-serif;
	font-size: 22px;
	line-height: 1.15;
	text-transform: uppercase;
}
.s4s-bandeau__appel span { display: block; color: var(--s4s-orange); }
.s4s-bandeau__slogan {
	font-family: "Great Vibes", cursive;
	font-size: 34px;
	line-height: 1;
	text-align: right;
	color: #333;
}
.s4s-bandeau__slogan small {
	display: block;
	font-family: var(--s4s-police-texte);
	font-size: 15px;
}
.s4s-bandeau__bas {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 33px;
	background: linear-gradient(#2d2d2d, #4a4a4a);
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.05em;
}
.s4s-bandeau__bas::after {
	content: "\25B6";
	display: grid;
	place-items: center;
	width: 33px;
	height: 33px;
	margin-left: 12px;
	background: var(--s4s-orange);
}
.s4s-bandeau:hover .s4s-bandeau__bas { color: var(--s4s-orange); }

/* ---------- Modèles de spas ---------- */

.s4s-modeles { background: #000 !important; color: #fff; font-family: var(--s4s-police-texte); }
.s4s-modeles__series {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	padding: 20px 20px 0;
	background: #fff;
}
.s4s-modeles__serie {
	flex: 0 0 110px;
	padding: 0;
	border: 0;
	background: none;
	color: #666;
	font-family: "Myriad Pro", var(--s4s-police-texte);
	font-size: 18px;
	text-align: center;
	cursor: pointer;
}
.s4s-modeles__serie img { display: block; width: 100%; margin-top: 8px; }
.s4s-modeles__serie[aria-selected="true"] { color: #cc9933; font-weight: bold; }
.s4s-modeles__marque { margin-left: auto; width: 260px; padding-bottom: 10px; }
.s4s-modeles__panneau { padding: 20px; }
.s4s-modeles__panneau[hidden] { display: none; }
.s4s-modeles__titre { margin: 0 0 12px; color: var(--s4s-or-pale); font-size: 18px; }
.s4s-modeles__intro { font-size: 13px; text-align: justify; }
.s4s-modeles__onglets {
	display: flex;
	margin: 16px -20px 0;
	border-top: 1px solid #daa233;
}
.s4s-modeles__onglet {
	flex: 1;
	padding: 6px 4px 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.s4s-modeles__onglet img { display: block; height: 90px; margin: 0 auto; object-fit: contain; }
.s4s-modeles__onglet span {
	display: block;
	padding: 4px 0;
	color: var(--s4s-or-pale);
	font-family: "Comfortaa", var(--s4s-police-texte);
	font-size: 18px;
	font-weight: bold;
}
.s4s-modeles__onglet[aria-selected="true"] span,
.s4s-modeles__onglet:hover span { background: linear-gradient(#c99a2e, #8a6516); color: #fff; }
.s4s-modeles__fiche {
	display: flex;
	gap: 30px;
	padding-top: 20px;
	color: #a8a6a7;
	font-size: 14px;
}
.s4s-modeles__fiche[hidden] { display: none; }
.s4s-modeles__fiche-image { flex: 0 0 250px; }
.s4s-modeles__fiche h4 {
	margin: 0 0 10px;
	color: var(--s4s-or-pale);
	font-size: 20px;
	text-align: left;
}
.s4s-modeles__fiche ul { flex: 1; list-style: none; margin: 0; padding: 0 0 0 30px; border-left: 1px solid #49524f; }
.s4s-modeles__fiche li { padding: 6px 0; border-bottom: 1px solid #49524f; }
.s4s-modeles__fiche li strong { color: #fff; }

/* ---------- Formulaire de contact ---------- */

.s4s-formulaire { padding: 30px 20px; background: #fff; color: #39454b; }
.s4s-formulaire h2 { color: #000; font-size: 22px; }
.s4s-formulaire__grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.s4s-formulaire__plein { grid-column: 1 / -1; }
.s4s-formulaire label { display: block; margin-bottom: 4px; font-size: 13px; }
.s4s-formulaire input,
.s4s-formulaire textarea {
	width: 100%;
	padding: 0.65em 0.75em;
	border: 2px solid #b9babb;
	border-radius: 0.5em;
	background: none;
	color: inherit;
	font: inherit;
}
.s4s-formulaire input:focus,
.s4s-formulaire textarea:focus { border-color: #9ac8e9; outline: none; }
.s4s-formulaire textarea { min-height: 8em; }
.s4s-formulaire button {
	margin-top: 16px;
	height: 3.5em;
	padding: 0 2em;
	border: 0;
	border-radius: 3.5em;
	background: #98c593;
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.s4s-formulaire button:hover { background: #88b583; }
.s4s-formulaire__miel { position: absolute; left: -9999px; }
.s4s-message { margin-bottom: 16px; padding: 12px 16px; border-radius: 6px; }
.s4s-message--ok { background: #e3f4e1; color: #1d5c18; }
.s4s-message--erreur { background: #fbe3e3; color: #8a1f1f; }

/* Carte Google */
.s4s-carte iframe { display: block; width: 100%; height: 350px; border: 0; }

/* ---------- Visionneuse photo ---------- */

.s4s-visionneuse {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.88);
}
.s4s-visionneuse[hidden] { display: none; }
.s4s-visionneuse img { max-width: 92vw; max-height: 86vh; box-shadow: 0 0 30px #000; }
.s4s-visionneuse button {
	position: absolute;
	border: 0;
	background: none;
	color: #fff;
	font-size: 42px;
	line-height: 1;
	cursor: pointer;
}
.s4s-visionneuse__fermer { top: 16px; right: 20px; }
.s4s-visionneuse__prec { left: 12px; top: 50%; transform: translateY(-50%); }
.s4s-visionneuse__suiv { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- Cellulaires et tablettes ---------- */

@media (max-width: 1060px) {
	.s4s-principal { margin-left: calc(var(--s4s-menu-largeur) + 20px); }
}

@media (max-width: 860px) {
	body { font-size: 15px; }

	.s4s-menu {
		position: sticky;
		bottom: auto;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		background: rgba(2, 3, 3, 0.92);
		overflow: visible;
	}
	.s4s-logo { width: 96px; margin: 8px 16px; }
	.s4s-burger {
		display: block;
		margin-left: auto;
		margin-right: 16px;
		padding: 10px;
		border: 1px solid rgba(255, 255, 255, 0.4);
		border-radius: 6px;
		background: none;
		color: #fff;
		font-size: 15px;
		cursor: pointer;
	}
	.s4s-nav,
	.s4s-menu-bas { display: none; width: 100%; }
	.s4s-menu.est-ouvert .s4s-nav,
	.s4s-menu.est-ouvert .s4s-menu-bas { display: block; }
	.s4s-nav a { padding-left: 16px; }
	.s4s-menu-bas { padding: 16px; }

	.s4s-principal {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 16px;
	}

	.s4s-service,
	.s4s-modeles__fiche { flex-direction: column; gap: 12px; }
	.s4s-modeles__fiche-image { flex: none; max-width: 250px; }
	.s4s-modeles__fiche ul { padding-left: 0; border-left: 0; }
	.s4s-modeles__series { flex-wrap: wrap; }
	.s4s-modeles__serie { flex: 1 1 80px; font-size: 15px; }
	.s4s-modeles__marque { width: 100%; margin: 0; }
	.s4s-modeles__onglets { overflow-x: auto; }
	.s4s-modeles__onglet { flex: 0 0 90px; }
	.s4s-modeles__onglet img { height: 60px; }

	.alignright,
	.alignleft { float: none; margin: 0 0 12px; }

	.s4s-bandeau__haut { flex-direction: column; align-items: flex-start; }
	.s4s-bandeau__slogan { text-align: left; }
	.s4s-formulaire__grille { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.entry-content h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}