/*
Theme Name: Harmonie & Énergie
Theme URI: https://azetria.com
Author: Azetria
Author URI: https://azetria.com
Description: Thème sur mesure pour Harmonie & Énergie — séances de bien-être à domicile. Palette crème et rose poudré, typographie chaleureuse, aucune ressource externe (aucun appel à Google Fonts, aucun traceur).
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: harmonie-energie
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-menu
*/

/* Le style vit dans theme.json. Ce fichier ne porte que les réglages
   que theme.json ne sait pas exprimer. */

/* Défilement doux vers les ancres de la page d'accueil. */
html {
	scroll-behavior: smooth;
}

/* Le filet rose qui ouvre chaque section. */
.he-filet::before {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	background: var(--wp--preset--color--rose-fonce);
	margin-bottom: 1.4rem;
}

/* Cartes : gestes, questions, articles. */
.he-carte {
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: 16px;
}

/* Le bloc « détails » de la foire aux questions. */
.he-faq .wp-block-details {
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: 14px;
	padding: 1.1rem 1.3rem;
	margin-bottom: 0.7rem;
}

.he-faq .wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

.he-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.he-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: -0.15rem;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--rose-fonce);
	transition: transform 0.2s ease;
}

.he-faq .wp-block-details[open] summary::after {
	content: "–";
}

.he-faq .wp-block-details > *:not(summary) {
	margin-top: 0.8rem;
	color: var(--wp--preset--color--doux);
}

/* Avertissement bien-être : présent sur chaque page de prestation.
   C'est une obligation du cadrage, pas une décoration — il ne doit
   jamais passer inaperçu ni disparaître d'une page. */
.he-avertissement {
	border-left: 3px solid var(--wp--preset--color--rose-fonce);
	border-radius: 0 12px 12px 0;
}

/* Le bouton principal garde sa forme sur tous les écrans. */
.wp-block-button__link {
	transition: opacity 0.2s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	opacity: 0.85;
}

/* Accessibilité : la mise au point clavier doit rester visible.
   Une praticienne reçoit aussi des visiteurs qui naviguent au clavier. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--rose-fonce);
	outline-offset: 3px;
}

/* Le déroulé d'une séance : des pastilles numérotées plutôt que des puces. */
.he-etapes {
	counter-reset: he;
	list-style: none;
	padding-left: 0;
}

.he-etapes > li {
	counter-increment: he;
	position: relative;
	padding-left: 48px;
	margin-bottom: 1.1rem;
}

.he-etapes > li::before {
	content: counter(he);
	position: absolute;
	left: 0;
	top: -1px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--encre);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1;
}

/* Images d'ambiance : jamais de portrait, uniquement de la matière. */
.he-ambiance img {
	border-radius: 16px;
	object-fit: cover;
}

/* Les pratiques : image et texte côte à côte, alternés d'une bande à l'autre.
   Six bandes 21/9 empilées se lisaient comme un catalogue ; le côté qui change
   d'une pratique à l'autre suffit à donner du rythme sans rien alourdir. */
.he-pratique {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.he-pratique .wp-block-media-text__media img {
	border-radius: 18px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	box-shadow: 0 18px 40px -28px rgba(43, 42, 40, 0.55);
}

.he-pratique .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

.he-pratique .wp-block-media-text__content > :last-child {
	margin-bottom: 0;
}

/* Sur mobile, la pile a besoin d'air entre l'image et le texte. */
@media (max-width: 781px) {
	.he-pratique.is-stacked-on-mobile .wp-block-media-text__content {
		padding-top: var(--wp--preset--spacing--30);
		padding-left: 0;
		padding-right: 0;
	}
}

/* Le bloc « couverture » force du blanc sur son contenu, en supposant une photo
   sombre. Ici le héros est clair : le bouton à contour devenait blanc sur crème,
   soit un contraste d'environ 1,1 pour 1 — invisible. On rétablit l'encre. */
.wp-block-cover .is-style-outline > .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--encre);
	border-color: var(--wp--preset--color--rose-fonce);
	border-width: 1.5px;
	background-color: rgba(255, 255, 255, 0.45);
}

.wp-block-cover .is-style-outline > .wp-block-button__link:hover,
.wp-block-cover .is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--blanc);
	opacity: 1;
}

/* Cartes des gestes, sur l'accueil : toute la carte mène à la pratique.
   Le lien reste porté par le titre — donc lisible au lecteur d'écran et
   annoncé correctement —, et une zone invisible l'étend à la carte entière.
   C'est la seule façon d'avoir un vrai lien sans imbriquer des blocs. */
.he-carte {
	position: relative;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.he-lien-carte {
	color: inherit;
	text-decoration: none;
}

.he-lien-carte::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.he-carte:has(.he-lien-carte:hover),
.he-carte:has(.he-lien-carte:focus-visible) {
	border-color: var(--wp--preset--color--rose-fonce);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -22px rgba(43, 42, 40, 0.5);
}

.he-carte:has(.he-lien-carte:hover) .he-lien-carte {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--wp--preset--color--rose-fonce);
}

/* La mise au point clavier doit encadrer la carte, pas seulement le mot. */
.he-lien-carte:focus-visible {
	outline: none;
}

.he-carte:has(.he-lien-carte:focus-visible) {
	outline: 2px solid var(--wp--preset--color--rose-fonce);
	outline-offset: 3px;
}

/* Repli pour les navigateurs sans :has() — le lien du titre fonctionne seul. */
@supports not selector(:has(*)) {
	.he-lien-carte::after { display: none; }
	.he-lien-carte:hover { text-decoration: underline; }
}

/* Arrivée sur une ancre : centrer la bande, pas coller le titre en haut.

   Le titre est vertical-centré face à l'image, donc il se trouve 64 à 95 px
   sous le haut de sa bande. Sans marge, le navigateur cale CE titre en haut de
   l'écran et le haut de la bande — image comprise — sort du cadre.

   La bande mesure ~500 px. Pour la centrer il faut donc décaler de
   (hauteur d'écran - 500) / 2, plus le retrait du titre dans sa bande (~88 px) :
   soit 50vh - 162px. Le max() évite les valeurs négatives sur écran court. */
.he-pratique h2[id] {
	scroll-margin-top: max(1.5rem, calc(50vh - 162px));
}

/* En pile mobile, la bande est plus haute que l'écran : centrer n'a plus de
   sens, on revient à un simple retrait de confort. */
@media (max-width: 781px) {
	.he-pratique h2[id] {
		scroll-margin-top: 1.5rem;
	}
}