/*
Theme Name: Octaèdre Bien-être
Author: Michel Fornara
Description: Thème vitrine pour Octaèdre Bien-être (soins énergétiques et thérapie manuelle, Aubagne). Rendu visiteur 100 % HTML et CSS : aucun JavaScript, aucune police ni ressource externe, aucun cookie, aucune collecte de données. Textes et images modifiables dans l'éditeur de blocs.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: octaedre-bien-etre
*/

/* =========================================================
   1. Polices : uniquement celles déjà installées sur l'appareil
      du visiteur (aucun fichier téléchargé, aucun site extérieur)
   ========================================================= */

/* =========================================================
   2. Variables
   ========================================================= */
:root {
	--oct-encre: #2f3a33;
	--oct-encre-douce: #55625a;
	--oct-sauge: #6f8f73;
	--oct-sauge-vive: #87a585;
	--oct-sauge-claire: #b7cab3;
	--oct-or: #c9a55c;
	--oct-creme: #f8f1e6;
	--oct-peche: #f3d6c2;
	/* Titres : humanistes élégantes (Optima sur Mac/iPhone, Candara sur Windows) */
	--oct-titre: Optima, Candara, "Noto Sans", "DejaVu Sans", sans-serif;
	/* Textes : sans-serif modernes (Avenir Next, Segoe UI, Roboto…) */
	--oct-sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Roboto, Ubuntu, Arial, sans-serif;
	/* Accents en italique : serif classique (Palatino, Iowan Old Style…) */
	--oct-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, "Book Antiqua", Georgia, serif;
	--oct-verre: rgba(255, 251, 245, .55);
	--oct-bord: rgba(201, 165, 92, .35);
}

/* =========================================================
   3. Fond animé commun à toutes les pages
   ========================================================= */
html {
	background: #eee7da;
}
body {
	margin: 0;
	min-height: 100vh;
	color: var(--oct-encre);
	font-family: var(--oct-sans);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Couche 1 : nuages de pêche et de vert sauge qui dérivent */
html::before {
	content: "";
	position: fixed;
	inset: -25%;
	z-index: -3;
	pointer-events: none;
	background:
		radial-gradient(ellipse 45% 38% at 22% 18%, rgba(238, 186, 152, .8), rgba(238, 186, 152, 0) 70%),
		radial-gradient(ellipse 50% 42% at 80% 80%, rgba(118, 160, 116, .75), rgba(118, 160, 116, 0) 70%),
		radial-gradient(ellipse 35% 30% at 78% 24%, rgba(242, 200, 172, .55), rgba(242, 200, 172, 0) 70%),
		radial-gradient(ellipse 38% 32% at 18% 82%, rgba(140, 178, 136, .55), rgba(140, 178, 136, 0) 70%);
	animation: oct-voile 20s ease-in-out infinite alternate;
}

/* Couche 2 : grand dégradé pêche → crème → vert qui tourne lentement */
body::before {
	content: "";
	position: fixed;
	inset: -40%;
	z-index: -4;
	pointer-events: none;
	background: linear-gradient(160deg, #f0c9ae 0%, #f5e0cd 24%, #f4eee3 44%, #d8e6d1 62%, #a9c7a4 82%, #8fb18b 100%);
	animation: oct-derive 26s ease-in-out infinite alternate;
}

/* Couche 3 : rayons de lumière et halo central */
body::after {
	content: "";
	position: fixed;
	left: 50%;
	top: 34vh;
	width: 220vmax;
	height: 220vmax;
	margin: -110vmax 0 0 -110vmax;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle, rgba(255, 252, 246, .9) 0, rgba(255, 250, 242, .45) 9%, rgba(255, 250, 242, 0) 26%),
		repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg 6deg, rgba(255, 255, 255, .42) 9deg, rgba(255, 255, 255, 0) 12deg 15deg);
	-webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 16%, rgba(0, 0, 0, 0) 36%);
	mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 16%, rgba(0, 0, 0, 0) 36%);
	animation: oct-rayons 160s linear infinite;
}

/* Couche 4 : particules de lumière */
html::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle at 8% 22%, rgba(255, 255, 255, .95) 0 1.5px, rgba(255, 255, 255, 0) 3px),
		radial-gradient(circle at 21% 64%, rgba(255, 255, 255, .8) 0 2px, rgba(255, 255, 255, 0) 4px),
		radial-gradient(circle at 34% 12%, rgba(255, 255, 255, .7) 0 1px, rgba(255, 255, 255, 0) 2.5px),
		radial-gradient(circle at 46% 86%, rgba(255, 255, 255, .85) 0 1.5px, rgba(255, 255, 255, 0) 3px),
		radial-gradient(circle at 63% 30%, rgba(255, 255, 255, .75) 0 1px, rgba(255, 255, 255, 0) 2.5px),
		radial-gradient(circle at 72% 72%, rgba(255, 255, 255, .9) 0 2px, rgba(255, 255, 255, 0) 4px),
		radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .85) 0 1.5px, rgba(255, 255, 255, 0) 3px),
		radial-gradient(circle at 93% 54%, rgba(255, 255, 255, .7) 0 1px, rgba(255, 255, 255, 0) 2.5px),
		radial-gradient(circle at 12% 92%, rgba(255, 255, 255, .8) 0 1.5px, rgba(255, 255, 255, 0) 3px),
		radial-gradient(circle at 56% 52%, rgba(255, 255, 255, .6) 0 1px, rgba(255, 255, 255, 0) 2.5px);
	animation: oct-scintille 9s ease-in-out infinite alternate;
}

@keyframes oct-voile {
	0%   { opacity: .75; transform: translate3d(-7%, 5%, 0) rotate(-6deg); }
	50%  { opacity: 1;   transform: translate3d(4%, -3%, 0) rotate(4deg) scale(1.06); }
	100% { opacity: .85; transform: translate3d(8%, -6%, 0) rotate(9deg); }
}
@keyframes oct-derive {
	0%   { transform: translate3d(-6%, -5%, 0) rotate(-8deg); }
	50%  { transform: translate3d(5%, 4%, 0) rotate(6deg) scale(1.05); }
	100% { transform: translate3d(-3%, 6%, 0) rotate(14deg); }
}
@keyframes oct-rayons {
	to { transform: rotate(360deg); }
}
@keyframes oct-scintille {
	0%   { opacity: .35; transform: translate3d(0, 0, 0); }
	50%  { opacity: 1; }
	100% { opacity: .55; transform: translate3d(0, -14px, 0); }
}

/* =========================================================
   4. Bases typographiques et liens
   ========================================================= */
.oct-site h1,
.oct-site h2,
.oct-site h3 {
	font-family: var(--oct-titre);
	font-weight: 400;
	line-height: 1.15;
	color: var(--oct-encre);
}
a {
	color: var(--oct-sauge);
	text-underline-offset: .2em;
}
a:hover {
	color: var(--oct-encre);
}
a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--oct-sauge);
	outline-offset: 3px;
}
img {
	max-width: 100%;
	height: auto;
}

/* =========================================================
   5. Menu (présent sur chaque page)
   ========================================================= */
.oct-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	margin: 0;
	padding: .65rem 1rem;
	background: rgba(250, 244, 236, .58);
	border-bottom: 1px solid rgba(201, 165, 92, .28);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
}
.oct-nav > * {
	margin-top: 0;
	margin-bottom: 0;
}
.oct-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .3rem .4rem;
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
}
.oct-menu li {
	margin: 0;
	padding: 0;
}
.oct-menu a {
	display: inline-block;
	padding: .5em 1.05em;
	border-radius: 999px;
	color: var(--oct-encre);
	font-family: var(--oct-sans);
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease;
}
.oct-menu a:hover,
.oct-menu a:focus-visible {
	color: var(--oct-sauge);
	background: rgba(111, 143, 115, .13);
}
/* Page en cours (classe ajoutée par le thème sur <body>) */
.oct-p-accueil .oct-m-accueil a,
.oct-p-a-propos .oct-m-a-propos a,
.oct-p-mes-formations .oct-m-formations a,
.oct-p-prendre-rendez-vous .oct-m-rdv a,
.oct-p-temoignages .oct-m-temoignages a {
	color: #fff;
	background: var(--oct-sauge);
}

/* =========================================================
   6. Page couverture
   ========================================================= */
.oct-couverture {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: clamp(.6rem, 2.2vh, 1.6rem) 1.25rem clamp(1.4rem, 3vh, 2.4rem);
	text-align: center;
	box-sizing: border-box;
}
.oct-couverture > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* --- Sceau --- */
.oct-sceau {
	position: relative;
	flex: none;
	width: 420px;
	height: 420px;
	margin: 0 auto clamp(.3rem, 1.4vh, 1rem) !important;
}
.oct-sceau > * {
	margin: 0;
}
.oct-sceau::before {
	content: "";
	position: absolute;
	inset: 16%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 253, 248, .95) 0, rgba(255, 250, 242, .55) 45%, rgba(255, 250, 242, 0) 72%);
	animation: oct-halo 7s ease-in-out infinite alternate;
}
.oct-couronne {
	position: absolute;
	inset: 0;
}
.oct-couronne img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Yin-yang (dessiné en CSS) --- */
.oct-yinyang {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 118px;
	height: 118px;
	margin: -59px 0 0 -59px !important;
	border-radius: 50%;
	background: linear-gradient(90deg, #7d9a80 50%, #f7f0e4 50%);
	box-shadow: 0 0 34px 6px rgba(255, 249, 238, .9), 0 0 0 1px rgba(125, 154, 128, .3);
	transform: rotate(-32deg);
	animation: oct-yinyang 48s linear infinite;
}
.oct-yinyang::before,
.oct-yinyang::after {
	content: "";
	position: absolute;
	left: 25%;
	width: 50%;
	height: 50%;
	border-radius: 50%;
}
.oct-yinyang::before {
	top: 0;
	background: radial-gradient(closest-side, #f7f0e4 0 31%, #7d9a80 34%);
}
.oct-yinyang::after {
	bottom: 0;
	background: radial-gradient(closest-side, #7d9a80 0 31%, #f7f0e4 34%);
}

/* --- Octaèdre 3D animé --- */
.oct-scene {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	perspective: 1100px;
	animation: oct-flotte 8s ease-in-out infinite alternate;
}
.oct-solide {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	margin: 0 !important;
	transform-style: preserve-3d;
	animation: oct-tourne 24s linear infinite;
}
.oct-f {
	position: absolute;
	left: 0;
	top: 0;
	width: 135.76px;
	height: 164.65px;
	margin: 0 !important;
	transform-origin: 0 0;
	backface-visibility: visible;
}
.oct-f::before,
.oct-f::after {
	content: "";
	position: absolute;
	inset: 0;
}
/* face translucide */
.oct-f::before {
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 249, 238, .1) 65%, rgba(201, 165, 92, .1));
}
/* arêtes lumineuses (anneau triangulaire) */
.oct-f::after {
	clip-path: polygon(evenodd, 50% 0, 100% 100%, 0 100%, 50% 0, 50% 3.51%, 97.58% 98.66%, 2.42% 98.66%, 50% 3.51%);
	background: rgba(255, 255, 255, .92);
}
/* Positions calculées des 8 faces (octaèdre allongé) */
.oct-f1 { transform: matrix3d(-0.7071,0,0.7071,0,0.2915,0.9111,0.2915,0,-0.6442,0.4123,-0.6442,0,48,-150,-48,1); }
.oct-f2 { transform: matrix3d(-0.7071,0,-0.7071,0,-0.2915,0.9111,0.2915,0,0.6442,0.4123,-0.6442,0,48,-150,48,1); }
.oct-f3 { transform: matrix3d(0.7071,0,-0.7071,0,-0.2915,0.9111,-0.2915,0,0.6442,0.4123,0.6442,0,-48,-150,48,1); }
.oct-f4 { transform: matrix3d(0.7071,0,0.7071,0,0.2915,0.9111,-0.2915,0,-0.6442,0.4123,0.6442,0,-48,-150,-48,1); }
.oct-f5 { transform: matrix3d(-0.7071,0,0.7071,0,0.2915,-0.9111,0.2915,0,0.6442,0.4123,0.6442,0,48,150,-48,1); }
.oct-f6 { transform: matrix3d(-0.7071,0,-0.7071,0,-0.2915,-0.9111,0.2915,0,-0.6442,0.4123,0.6442,0,48,150,48,1); }
.oct-f7 { transform: matrix3d(0.7071,0,-0.7071,0,-0.2915,-0.9111,-0.2915,0,-0.6442,0.4123,-0.6442,0,-48,150,48,1); }
.oct-f8 { transform: matrix3d(0.7071,0,0.7071,0,0.2915,-0.9111,-0.2915,0,0.6442,0.4123,-0.6442,0,-48,150,-48,1); }

@keyframes oct-tourne {
	from { transform: rotateX(-14deg) rotateY(0deg); }
	to   { transform: rotateX(-14deg) rotateY(360deg); }
}
@keyframes oct-flotte {
	from { transform: translateY(-5px); }
	to   { transform: translateY(5px); }
}
@keyframes oct-yinyang {
	from { transform: rotate(-32deg); }
	to   { transform: rotate(328deg); }
}
@keyframes oct-halo {
	from { opacity: .7; transform: scale(.94); }
	to   { opacity: 1;  transform: scale(1.06); }
}

/* --- Textes de la couverture --- */
.oct-bienvenue {
	font-family: var(--oct-serif);
	font-style: italic;
	font-size: clamp(1.1rem, 2.4vw, 1.4rem);
	letter-spacing: .1em;
	color: var(--oct-sauge);
	margin: 0 0 .1em !important;
}
.oct-titre {
	margin: 0 !important;
	font-family: var(--oct-titre);
	font-weight: 400 !important;
	font-size: clamp(1.7rem, min(8.4vw, 6vh), 3.6rem);
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--oct-encre);
	background: linear-gradient(90deg, #2f3a33 0%, #3f4e45 38%, #6f8f73 62%, #8aa888 80%, #3f4e45 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: oct-reflet 14s ease-in-out infinite alternate;
}
@keyframes oct-reflet {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}
.oct-nom {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;
	margin: .35em 0 0 !important;
	font-family: var(--oct-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	letter-spacing: .06em;
	color: var(--oct-encre);
}
.oct-nom::before,
.oct-nom::after {
	content: "";
	flex: 0 0 clamp(42px, 11vw, 96px);
	height: 7px;
	background:
		linear-gradient(var(--oct-or), var(--oct-or)) center / 100% 1px no-repeat;
}
.oct-nom::before {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
	mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.oct-nom::after {
	-webkit-mask-image: linear-gradient(270deg, transparent, #000 70%);
	mask-image: linear-gradient(270deg, transparent, #000 70%);
}
.oct-accroche {
	max-width: 36ch;
	margin: .5em auto 0 !important;
	font-size: clamp(.92rem, 1.8vw, 1.04rem);
	line-height: 1.55;
	color: var(--oct-encre-douce);
}

/* --- Boutons --- */
.oct-boutons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(.45rem, 1.2vh, .75rem);
	margin: clamp(.8rem, 2.2vh, 1.4rem) 0 0 !important;
	width: 100%;
}
.oct-boutons .wp-block-button {
	width: min(310px, 100%);
	margin: 0;
}
.oct-site .wp-block-button__link {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
	box-sizing: border-box;
	padding: 1em 1.8em;
	border-radius: 999px;
	font-family: var(--oct-sans);
	font-size: .86rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .35s ease, box-shadow .35s ease, background-position .6s ease;
}
.oct-boutons .wp-block-button__link {
	width: 100%;
}
.oct-site .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
	transform: skewX(-20deg);
	transition: left .7s ease;
	pointer-events: none;
}
.oct-site .wp-block-button__link:hover,
.oct-site .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
}
.oct-site .wp-block-button__link:hover::before,
.oct-site .wp-block-button__link:focus-visible::before {
	left: 120%;
}
/* Bouton principal */
.oct-btn-entrer .wp-block-button__link {
	color: #fff;
	background: linear-gradient(120deg, #6a8a6e, #8fab8d 50%, #6a8a6e);
	background-size: 200% 100%;
	box-shadow: 0 12px 28px -10px rgba(70, 98, 74, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.oct-btn-entrer .wp-block-button__link::after {
	content: "\2192";
	font-size: 1.1em;
	transition: transform .35s ease;
}
.oct-btn-entrer .wp-block-button__link:hover {
	color: #fff;
	background-position: 100% 0;
	box-shadow: 0 16px 34px -10px rgba(70, 98, 74, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.oct-btn-entrer .wp-block-button__link:hover::after {
	transform: translateX(4px);
}
/* Bouton secondaire (Calendly, nouvel onglet) */
.oct-btn-rdv .wp-block-button__link {
	color: var(--oct-encre);
	background: rgba(255, 252, 246, .6);
	border: 1px solid rgba(201, 165, 92, .8);
	box-shadow: 0 10px 26px -14px rgba(120, 96, 50, .45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.oct-btn-rdv .wp-block-button__link::after {
	content: "\2197";
	color: var(--oct-or);
	font-size: 1em;
}
.oct-btn-rdv .wp-block-button__link:hover {
	color: var(--oct-encre);
	background: rgba(255, 252, 246, .9);
	border-color: var(--oct-or);
}

/* =========================================================
   7. Pages intérieures
   ========================================================= */
.oct-section {
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(2.2rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4rem);
	box-sizing: border-box;
}
.oct-section > * {
	margin-top: 0;
}

/* En-tête : nom du site + Michel Fornara (en haut à gauche) */
.oct-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem 1rem;
	margin: 0 0 clamp(1.6rem, 4vw, 2.6rem) !important;
}
.oct-entete > * {
	margin: 0 !important;
}
.oct-marque {
	font-family: var(--oct-titre);
	font-size: clamp(1.15rem, 2.4vw, 1.4rem);
	font-weight: 400;
	letter-spacing: .02em;
	color: var(--oct-encre);
}
.oct-marque-nom {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--oct-serif);
	font-style: italic;
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	color: var(--oct-sauge);
}
.oct-marque-nom::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--oct-or);
}

.oct-h1 {
	max-width: 18ch;
	margin: 0 0 .5em !important;
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	font-weight: 400 !important;
	font-family: var(--oct-titre);
	line-height: 1.12;
	color: var(--oct-encre);
}
.oct-h1::after {
	content: "";
	display: block;
	width: 72px;
	height: 1px;
	margin-top: .45em;
	background: linear-gradient(90deg, var(--oct-or), rgba(201, 165, 92, 0));
}
.oct-texte-intro {
	max-width: 58ch;
	margin: 0 0 clamp(1.6rem, 4vw, 2.4rem) !important;
	font-size: clamp(1.02rem, 1.9vw, 1.18rem);
	color: var(--oct-encre-douce);
}
.oct-photo {
	margin: 0 !important;
	width: min(240px, 72vw);
}
.oct-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 999px 999px 26px 26px;
	box-shadow:
		0 0 0 6px rgba(255, 252, 246, .7),
		0 0 0 7px rgba(201, 165, 92, .55),
		0 26px 50px -22px rgba(60, 80, 64, .55);
}

/* Titres et textes génériques des pages */
.oct-section h2 {
	margin: 2em 0 .6em;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	color: var(--oct-sauge);
}
.oct-section p {
	max-width: 68ch;
}

/* Liste avec losanges dorés */
.oct-liste {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	max-width: 68ch;
}
.oct-liste li {
	position: relative;
	margin: 0 0 .7em;
	padding-left: 1.8em;
}
.oct-liste li::before {
	content: "";
	position: absolute;
	left: .2em;
	top: .62em;
	width: .5em;
	height: .5em;
	border: 1px solid var(--oct-or);
	background: rgba(201, 165, 92, .25);
	transform: rotate(45deg);
}

/* Carte en verre dépoli */
.oct-carte {
	max-width: 760px;
	margin: 0 0 1.4rem !important;
	padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1.2rem, 3vw, 2.2rem);
	background: var(--oct-verre);
	border: 1px solid var(--oct-bord);
	border-radius: 22px;
	box-shadow: 0 20px 44px -30px rgba(60, 80, 64, .5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-sizing: border-box;
}
.oct-carte > :first-child {
	margin-top: 0;
}
.oct-carte > :last-child {
	margin-bottom: 0;
}

/* Formations : frise */
.oct-formations {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.4rem;
	max-width: 760px;
	border-left: 1px solid rgba(201, 165, 92, .6);
}
.oct-formations li {
	position: relative;
	margin: 0 0 1.2rem;
	padding: .2rem 0 0 .6rem;
}
.oct-formations li::before {
	content: "";
	position: absolute;
	left: calc(-1.4rem - 5px);
	top: .75em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--oct-sauge);
	box-shadow: 0 0 0 4px rgba(255, 252, 246, .85);
}
.oct-formations strong {
	color: var(--oct-sauge);
	font-weight: 500;
	margin-right: .4em;
}

/* Témoignages */
.oct-temoignages {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: 1.2rem;
	margin: 0 !important;
}
.oct-temoignages > * {
	margin: 0 !important;
}
.oct-temoignage {
	position: relative;
	padding: 2.2rem 1.5rem 1.4rem;
	background: var(--oct-verre);
	border: 1px solid var(--oct-bord);
	border-radius: 22px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-sizing: border-box;
}
.oct-temoignage::before {
	content: "\201C";
	position: absolute;
	top: .1rem;
	left: 1.2rem;
	font-family: var(--oct-serif);
	font-size: 3.2rem;
	line-height: 1;
	color: var(--oct-or);
}
.oct-temoignage p {
	margin: 0 0 .8em;
}
.oct-temoignage .oct-auteur {
	margin: 0;
	font-family: var(--oct-serif);
	font-style: italic;
	color: var(--oct-sauge);
}

/* Rendez-vous */
.oct-rdv-boutons {
	margin: 1.6rem 0 1rem !important;
}
.oct-note {
	font-size: .88rem;
	color: var(--oct-encre-douce);
}

/* =========================================================
   8. Pied de page
   ========================================================= */
.oct-pied {
	margin: 0;
	padding: 1.6rem 1.25rem 2.2rem;
	text-align: center;
	font-size: .82rem;
	color: var(--oct-encre-douce);
	border-top: 1px solid rgba(201, 165, 92, .22);
}
.oct-pied p {
	margin: .2em auto;
	max-width: none;
}
.oct-pied-note {
	font-size: .76rem;
	opacity: .85;
}

/* Page introuvable (gabarit de secours) */
.oct-introuvable {
	text-align: center;
}
.oct-introuvable .oct-h1 {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================
   9. Adaptation aux écrans (smartphone, tablette, petits écrans)
   ========================================================= */
@media (max-width: 560px), (max-height: 960px) {
	.oct-sceau { width: 320px; height: 320px; }
	.oct-scene, .oct-yinyang { scale: .762; }
}
@media (max-width: 400px), (max-height: 800px) {
	.oct-sceau { width: 260px; height: 260px; }
	.oct-scene, .oct-yinyang { scale: .619; }
}
@media (max-height: 700px) {
	.oct-sceau { width: 210px; height: 210px; }
	.oct-scene, .oct-yinyang { scale: .5; }
	.oct-boutons .wp-block-button__link { padding: .8em 1.6em; }
}
@media (max-height: 600px) {
	.oct-sceau { width: 170px; height: 170px; }
	.oct-scene, .oct-yinyang { scale: .405; }
}
/* --- Smartphones --- */
@media (max-width: 560px) {
	/* Menu sur une seule ligne, que l'on fait glisser du doigt */
	.oct-nav {
		padding: .5rem 0;
	}
	.oct-menu {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: .25rem;
		max-width: none;
		padding: 0 2.5rem 0 1rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 1rem 2.5rem;
		-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
		mask-image: linear-gradient(90deg, #000 82%, transparent);
	}
	.oct-menu li {
		flex: none;
		scroll-snap-align: start;
	}
	.oct-menu a {
		font-size: .72rem;
		letter-spacing: .1em;
		padding: .75em 1em;
		white-space: nowrap;
	}

	/* Couverture */
	.oct-couverture { padding-top: 1rem; }

	/* Pages intérieures */
	.oct-section {
		padding-top: 1.8rem;
		padding-bottom: 2.4rem;
	}
	.oct-entete {
		margin-bottom: 1.4rem !important;
	}
	.oct-texte-intro {
		font-size: 1.02rem;
	}
	.oct-photo {
		margin-left: auto !important;
		margin-right: auto !important;
		width: min(220px, 70vw);
	}
	.oct-carte,
	.oct-temoignage {
		border-radius: 18px;
	}
	.oct-rdv-boutons {
		align-items: stretch;
	}
	.oct-rdv-boutons .wp-block-button {
		width: 100%;
	}

	/* Pied de page : liens faciles à toucher */
	.oct-pied {
		padding: 1.4rem 1rem 2rem;
	}
	.oct-pied-liens {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: .1rem .9rem;
		font-size: 0;
	}
	.oct-pied-liens a {
		display: inline-block;
		padding: .55em .2em;
		font-size: .82rem;
		white-space: nowrap;
	}
}

/* Écrans tactiles : pas d'effet de survol qui resterait « collé » après un appui */
@media (hover: none) {
	.oct-site .wp-block-button__link:hover {
		transform: none;
	}
	.oct-site .wp-block-button__link:hover::before {
		left: -60%;
	}
	.oct-btn-entrer .wp-block-button__link:hover::after {
		transform: none;
	}
	.oct-site .wp-block-button__link:active {
		transform: scale(.98);
	}
}

/* =========================================================
   10. Accessibilité : mouvement réduit et contraste forcé
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	html::before,
	html::after,
	body::before,
	body::after,
	.oct-sceau::before,
	.oct-scene,
	.oct-yinyang,
	.oct-titre {
		animation: none;
	}
	.oct-solide {
		animation-duration: 120s;
	}
	.oct-site .wp-block-button__link,
	.oct-site .wp-block-button__link::before,
	.oct-menu a {
		transition: none;
	}
}
@media (forced-colors: active) {
	.oct-titre {
		background: none;
		-webkit-text-fill-color: CanvasText;
		color: CanvasText;
	}
}

/* Bouton de la page « Prendre rendez-vous » aligné à gauche */
.oct-rdv-boutons {
	align-items: flex-start;
}

/* Liens légaux du pied de page */
.oct-pied-liens a {
	color: var(--oct-encre-douce);
	text-decoration: underline;
	text-decoration-color: rgba(201, 165, 92, .6);
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
}
.oct-pied-liens a:hover,
.oct-pied-liens a:focus-visible {
	color: var(--oct-sauge);
}

/* Pages légales */
.oct-legal {
	max-width: 860px;
}
.oct-legal h2 {
	margin-top: 1.8em;
}