/*
Theme Name: osmOse
Theme URI: https://osmose-intime.com
Description: Thème enfant de Twenty Twenty-Five pour osmOse — Jenny Kearsley, praticienne psychocorporelle en sexothérapie. Palette et typographie tirées du logo osmOse.
Author: osmOse
Version: 1.0.4
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Template: twentytwentyfive
Text Domain: osmose
Tags: block-styles, full-site-editing, wide-blocks
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ---------------------------------------------------------------------------
   0. Polices du site
   Titres : Playfair Display. Texte : Work Sans (installée via
   Styles → Typographie → Polices, servie depuis le serveur).
   html:root l'emporte sur le :root des styles globaux quel que soit
   l'ordre de chargement.
   ------------------------------------------------------------------------ */

html:root{
	--wp--preset--font-family--display: "Playfair Display", Georgia, "Times New Roman", serif;
	--wp--preset--font-family--texte: "Work Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   1. Réglages transverses
   ------------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--vieux-rose);
	color: var(--wp--preset--color--bordeaux-nuit);
}

/* Le mot osmOse : le O central en corail, partout où il apparaît en texte. */
.osm-o {
	color: var(--wp--preset--color--terracotta);
}

/* Sur les fonds sombres, le corail passe mieux que le terracotta. */
.wp-block-cover .osm-o,
.osm-pied .osm-o {
	color: var(--wp--preset--color--corail);
}

/* Le contenu occupe toute la largeur : chaque section pose son propre fond,
   donc on annule le retrait horizontal hérité du conteneur d'article. */
main.wp-block-group > .wp-block-post-content.has-global-padding > .alignfull {
	max-width: none;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}

/* position:sticky cesse de fonctionner dès qu'un bloc parent crée un
   conteneur de défilement. overflow:clip coupe sans le créer. */
html,
body,
.wp-site-blocks,
.wp-site-blocks > main,
.wp-block-post-content{
	overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   2. En-tête et navigation
   ------------------------------------------------------------------------ */

.osm-entete {
	position: sticky;
	top: 0;
	z-index: 40;
	background: transparent;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 60%, transparent);
}

/* Le flou est porté par un pseudo-élément : sur l'en-tête lui-même,
   backdrop-filter en ferait le bloc conteneur de l'overlay du menu mobile. */
.osm-entete::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	background: color-mix(in srgb, var(--wp--preset--color--creme) 88%, transparent);
}

/* Le conteneur généré par WordPress fait exactement la hauteur de l'en-tête,
   ce qui empêche position: sticky de fonctionner. */
.wp-site-blocks > .wp-block-template-part:first-child {
	display: contents;
}

.osm-entete .wp-block-navigation__responsive-container-open,
.osm-entete .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--bordeaux-nuit);
}

/* Petits traits entre les entrées de menu. */
.osm-menu .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 1px;
	margin-inline-end: 1rem;
	background: var(--wp--preset--color--vieux-rose);
	vertical-align: middle;
}

.osm-menu .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
}

.osm-menu .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--terracotta);
	transition: right .35s ease;
}

.osm-menu .wp-block-navigation-item__content:hover::after,
.osm-menu .current-menu-item .wp-block-navigation-item__content::after {
	right: 0;
}

@media (max-width: 781px) {
	.osm-menu .wp-block-navigation-item + .wp-block-navigation-item::before { display: none; }
}

/* Menu mobile : panneau ancré sous l'en-tête plutôt qu'overlay plein écran */
@media (max-width: 599px) {

	/* Le nav porte un z-index (Spectra) donc position: relative, ce qui en fait
	   l'ancre par défaut. On le neutralise pour ancrer sur l'en-tête. */
	.osm-entete .osm-menu {
		position: static;
	}

	.osm-entete .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: auto;
		max-height: 70svh;
		overflow-y: auto;
		padding: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 60%, transparent);
		box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
		backdrop-filter: saturate(1.4) blur(12px);
		-webkit-backdrop-filter: saturate(1.4) blur(12px);
	}

	.osm-entete .wp-block-navigation__responsive-container.is-menu-open.has-background {
		background-color: color-mix(in srgb, var(--wp--preset--color--creme) 20%, transparent) !important;
	}

	.osm-entete .is-menu-open .wp-block-navigation__responsive-close {
		max-width: none;
		height: auto;
	}

	.osm-entete .is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 1rem 1.5rem 1.5rem;
	}

	.osm-entete .is-menu-open .wp-block-navigation__responsive-container-close {
		position: static;
		align-self: flex-end;
		margin: 0 0 .5rem;
	}

	/* WordPress réserve 56px en haut pour le bouton de fermeture en plein écran. */
	.osm-entete .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		padding-top: 0;
	}

	.osm-entete .is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.osm-entete .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item::before {
		display: none;
	}

	/* WordPress bloque le défilement pendant l'ouverture du menu.
	   Inutile pour un panneau ancré. */
	html.has-modal-open {
		overflow: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   3. Hero
   ------------------------------------------------------------------------ */

.osm-hero {
	min-height: min(88svh, 820px);
}

.osm-hero .wp-block-cover__inner-container {
	max-width: 54rem;
}

.osm-hero .osm-hero__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.5rem, 13vw, 9rem);
	line-height: .92;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0;
}

.osm-hero .osm-hero__baseline {
	font-size: clamp(1.125rem, 2.6vw, 1.75rem);
	letter-spacing: .02em;
	margin-top: .6rem;
}

.osm-hero .osm-hero__lieu {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .85;
}

.osm-hero .wp-block-buttons {
	justify-content: center;
	gap: .75rem;
}

/* Définition du mot « osmose », en bas du hero. */
.osm-definition {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--md);
	max-width: 34rem;
	margin-inline: auto;
	opacity: .9;
}

/* ---------------------------------------------------------------------------
   4. Éléments de rythme
   ------------------------------------------------------------------------ */

/* Surtitres : terracotta assombrie #B5492C (4,98:1 sur crème au lieu de
   3,32:1 pour #D4694B), même teinte et même saturation. */
.osm-surtitre {
	font-size: var(--wp--preset--font-size--xs) !important;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 600;
	color: #B5492C;
	margin-bottom: .75rem !important;
}

.osm-chapo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.35;
	color: var(--wp--preset--color--bordeaux);
}

.osm-manifeste {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 6vw, 4.25rem);
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--wp--preset--color--bordeaux);
}

.osm-questions p {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 3.4vw, 2.25rem);
	line-height: 1.25;
	text-wrap: balance;
}

.osm-filet {
	width: 56px;
	height: 1px;
	border: 0;
	background: var(--wp--preset--color--terracotta);
	opacity: 1;
	margin: 0 auto;
}

.osm-filet.is-style-wide { width: 100%; }

/* Contraste de la terracotta sur les fonds clairs (voir surtitres). */
.has-creme-background-color .has-terracotta-color,
.has-creme-fonce-background-color .has-terracotta-color,
.has-rose-poudre-background-color .has-terracotta-color{
	color: #B5492C;
}

/* ---------------------------------------------------------------------------
   5. Cartes
   ------------------------------------------------------------------------ */

.osm-cartes {
	gap: 1.5rem;
}

.osm-carte {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 70%, transparent);
	box-shadow: var(--wp--preset--shadow--douce);
	transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.osm-carte > .osm-carte__corps {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.osm-carte > .osm-carte__corps > * {
	max-width: none;
	margin-inline: 0;
}

.osm-carte .wp-block-buttons {
	margin-top: auto;
	justify-content: flex-start;
}

.osm-carte:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--portee);
}

.osm-carte__corps {
	padding: 1.75rem 1.75rem 2rem;
}

.osm-carte h3 {
	margin-top: 0;
}

/* Emplacement d'image : aplat dégradé tant que la photo n'est pas posée. */
.osm-emplacement__note {
	display: inline-block;
	letter-spacing: .12em;
	text-transform: uppercase;
	border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 999px;
	padding: .4rem .9rem;
	opacity: .85;
}

/* ---------------------------------------------------------------------------
   6. Grilles de mots-clés et de bénéfices
   ------------------------------------------------------------------------ */

.osm-mots .wp-block-column {
	padding: 1.75rem 1.5rem;
	border-radius: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--creme) 70%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sauge) 40%, transparent);
}

.osm-mots h3,
.osm-mots h4 {
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--terracotta);
	margin: 0 0 .5rem;
}

.osm-mots p {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

.osm-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--terracotta);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	margin-bottom: .9rem;
}

/* ---------------------------------------------------------------------------
   7. Le cadre — section de réassurance
   ------------------------------------------------------------------------ */

.osm-cadre {
	border-radius: 28px;
}

.osm-cadre__valeurs {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bordeaux);
}

.osm-cadre ul {
	list-style: none;
	padding-left: 0;
	margin-inline: auto;
	max-width: 32rem;
}

.osm-cadre ul li {
	padding: .55rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--bordeaux) 15%, transparent);
}

.osm-cadre ul li:last-child { border-bottom: 0; }

.osm-cadre ul.wp-block-list > li {
	padding-left: 2.2em !important;
	position: relative !important;
}
.osm-cadre ul.wp-block-list > li::before {
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.osm-negations {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--bordeaux);
}

/* ---------------------------------------------------------------------------
   8. Ateliers — les trois univers
   ------------------------------------------------------------------------ */

.osm-univers {
	display: grid;
	gap: 1.25rem;
}

.osm-univers .wp-block-column {
	position: relative;
	padding: 1.75rem;
	border-radius: 20px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 65%, transparent);
	transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.osm-univers .wp-block-column:hover {
	background: var(--wp--preset--color--rose-poudre);
	border-color: var(--wp--preset--color--terracotta);
	transform: translateY(-3px);
}

.osm-univers h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--bordeaux-nuit);
}

.osm-univers .wp-block-column:hover h3 a {
	color: var(--wp--preset--color--rouge);
}

.osm-univers p { font-size: var(--wp--preset--font-size--sm); }

.osm-univers-titre {
	scroll-margin-top: 6rem;
}

/* ---------------------------------------------------------------------------
   9. Dates, lieux, tarifs
   ------------------------------------------------------------------------ */

.osm-infos {
	border-radius: 20px;
	background: color-mix(in srgb, var(--wp--preset--color--creme-fonce) 80%, transparent);
	padding: 1.75rem;
}

.osm-dates ul {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: .5rem;
	margin: 0;
}

.osm-dates li {
	font-size: var(--wp--preset--font-size--sm);
	padding: .5rem .85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sauge) 55%, transparent);
	text-align: center;
}

ul.osm-cadence,
.osm-cadence ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

ul.osm-cadence li,
.osm-cadence li {
	position: relative;
	padding-left: 1.4rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.9;
}

ul.osm-cadence li::before,
.osm-cadence li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .85em;
	width: 8px;
	height: 1px;
	background: var(--wp--preset--color--terracotta);
}

.osm-lieu {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .04em;
}

.osm-prix {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--bordeaux);
}

/* Accordéons */
.wp-block-details {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 70%, transparent);
	border-radius: 16px;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--creme);
}

.wp-block-details + .wp-block-details { margin-top: .75rem; }

.wp-block-details summary {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .04em;
	color: var(--wp--preset--color--bordeaux);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

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

.wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--terracotta);
	transition: transform .3s ease;
}

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

.wp-block-details > *:not(summary) {
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------------------------------------------------------------------------
   10. Poèmes et respirations
   ------------------------------------------------------------------------ */

.osm-poeme p {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
	color: var(--wp--preset--color--bordeaux);
	text-wrap: pretty;
}

.osm-respiration {
	min-height: 320px;
	border-radius: 0;
}

.osm-respiration .osm-manifeste {
	color: var(--wp--preset--color--creme);
}

/* ---------------------------------------------------------------------------
   11. Portrait
   ------------------------------------------------------------------------ */

.osm-portrait img {
	border-radius: 26px;
	box-shadow: var(--wp--preset--shadow--portee);
	object-fit: cover;
	width: 100%;
	aspect-ratio: 4 / 5;
}

/* ---------------------------------------------------------------------------
   12. Parcours (Qui suis-je)
   ------------------------------------------------------------------------ */

.osm-parcours .wp-block-details {
	border: 0;
	border-left: 1px solid var(--wp--preset--color--vieux-rose);
	border-radius: 0;
	background: transparent;
	padding: .25rem 0 1.25rem 1.75rem;
	margin-left: .25rem;
}

.osm-parcours .wp-block-details + .wp-block-details { margin-top: 0; }

.osm-parcours .wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--bordeaux-nuit);
	position: relative;
}

.osm-parcours .wp-block-details summary::before {
	content: "";
	position: absolute;
	left: -2.05rem;
	top: .55em;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--preset--color--terracotta);
}

.osm-parcours .wp-block-details[open] summary::before {
	background: var(--wp--preset--color--terracotta);
}

/* ---------------------------------------------------------------------------
   13. Tarifs en pratique
   ------------------------------------------------------------------------ */

.osm-tarif {
	text-align: center;
	padding: 2rem 1.5rem;
	border-radius: 20px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 70%, transparent);
}

.osm-tarif h3 {
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	margin: 0 0 .75rem;
}

.osm-tarif__montant {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--bordeaux);
	display: block;
}

.osm-tarif__duree {
	font-size: var(--wp--preset--font-size--sm);
	opacity: .8;
}

/* ---------------------------------------------------------------------------
   14. Conteneur de formulaire
   ------------------------------------------------------------------------ */

.osm-formulaire {
	border-radius: 22px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 70%, transparent);
	padding: 2rem;
}

.osm-formulaire input[type="text"],
.osm-formulaire input[type="email"],
.osm-formulaire input[type="tel"],
.osm-formulaire select,
.osm-formulaire textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	padding: .8rem 1rem;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sauge) 70%, transparent);
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--encre);
	margin-top: .35rem;
}

.osm-formulaire input:focus-visible,
.osm-formulaire textarea:focus-visible,
.osm-formulaire select:focus-visible {
	outline: 2px solid var(--wp--preset--color--corail);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--terracotta);
}

.osm-formulaire label {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	margin-bottom: .9rem;
}

.osm-formulaire input[type="submit"],
.osm-formulaire button[type="submit"] {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--creme);
	background: var(--wp--preset--color--bordeaux);
	border: 1px solid var(--wp--preset--color--bordeaux);
	border-radius: 999px;
	padding: .85rem 1.6rem;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease;
}

.osm-formulaire input[type="submit"]:hover,
.osm-formulaire button[type="submit"]:hover {
	background: var(--wp--preset--color--terracotta);
	border-color: var(--wp--preset--color--terracotta);
}

.osm-formulaire-absent {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--bordeaux);
	background: var(--wp--preset--color--rose-poudre);
	border: 1px dashed var(--wp--preset--color--terracotta);
	border-radius: 14px;
	padding: 1rem 1.25rem;
}

/* ---------------------------------------------------------------------------
   15. Pied de page
   ------------------------------------------------------------------------ */

.osm-pied {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 60%, transparent);
}

.osm-pied .osm-signature {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
}

.osm-pied .wp-block-navigation {
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------------------------------------------------------------------------
   16. Accessibilité
   ------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--corail);
	outline-offset: 3px;
	border-radius: 4px;
}

.osm-lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--bordeaux);
	color: var(--wp--preset--color--creme);
	padding: .75rem 1.25rem;
	z-index: 100;
}

.osm-lien-evitement:focus {
	left: 1rem;
	top: 1rem;
}


/* ==========================================================================
   Formulaire de contact (Contact Form 7)
   Le pare-feu d'OVH refuse les balises HTML postées depuis l'éditeur de CF7 :
   le modèle ne contient que des étiquettes CF7 et du texte, et tout le
   dessin s'accroche aux classes que CF7 génère. Portée : .wpcf7-form.
   ========================================================================== */

.wpcf7-form{
  --f-trait:#E3D8CB;
  --f-actif:#6E1216;
  --f-label:#B5492C;
  --f-encre:#241A18;
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  max-width:41rem;
  margin-inline:auto;
  font-family:var(--wp--preset--font-family--texte);
}

/* Chaque champ est un paragraphe, et le texte de ce paragraphe est le libellé. */
.wpcf7-form > p{
  margin:0;
  font-size:0.8125rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  line-height:1.45;
  color:var(--f-label);
}

.wpcf7-form br{ display:none; }
.wpcf7-form .wpcf7-form-control-wrap{ display:block; margin-top:0.55rem; }

/* Champs — filet bas plutôt que boîte */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
  display:block;
  width:100%;
  font-family:inherit;
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.6;
  letter-spacing:normal;
  text-transform:none;
  color:var(--f-encre);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--f-trait);
  border-radius:0;
  padding:0.55rem 0.1rem;
  transition:border-color .18s ease, box-shadow .18s ease,
             background-color .18s ease;
}
.wpcf7-form textarea{
  background:rgba(243,234,223,0.5);
  border:1px solid var(--f-trait);
  border-radius:3px;
  padding:0.9rem 1rem;
  resize:vertical;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus{
  outline:none;
  border-bottom-color:var(--f-actif);
  box-shadow:0 1px 0 var(--f-actif);
  background-color:rgba(244,228,222,0.3);
}
.wpcf7-form textarea:focus{
  outline:none;
  border-color:var(--f-actif);
  box-shadow:inset 0 0 0 1px var(--f-actif);
  background-color:rgba(244,228,222,0.3);
}

.wpcf7-form .wpcf7-list-item-label{
  display:inline-block;
  font-size:0.9375rem;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  line-height:1.4;
  color:var(--f-encre);
}

/* Objet de la demande — pastilles */
.wpcf7-form .wpcf7-radio{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item{ margin:0; }
.wpcf7-form .wpcf7-radio label{ display:block; cursor:pointer; }
.wpcf7-form .wpcf7-radio input[type="radio"]{
  position:absolute; opacity:0; width:0; height:0;
}
.wpcf7-form .wpcf7-radio .wpcf7-list-item-label{
  padding:0.55rem 1.15rem;
  border:1px solid var(--f-trait);
  border-radius:999px;
  transition:background-color .18s ease, border-color .18s ease,
             color .18s ease;
}
.wpcf7-form .wpcf7-radio label:hover .wpcf7-list-item-label{
  border-color:#C9B8A6;
}
.wpcf7-form .wpcf7-radio input[type="radio"]:checked
  + .wpcf7-list-item-label{
  background:var(--f-actif);
  border-color:var(--f-actif);
  color:#FBF7F1;
}
.wpcf7-form .wpcf7-radio input[type="radio"]:focus-visible
  + .wpcf7-list-item-label{
  outline:2px solid #3A0A0E;
  outline-offset:2px;
}

/* Consentement */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.wpcf7-form .wpcf7-acceptance label{
  display:flex; gap:0.75rem; align-items:flex-start; cursor:pointer;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label{
  line-height:1.55; color:#4A3A34;
}
.wpcf7-form input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:1.15rem;
  height:1.15rem;
  margin:0.22rem 0 0;
  border:1px solid var(--f-trait);
  border-radius:3px;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-content:center;
  transition:background-color .18s ease, border-color .18s ease;
}
.wpcf7-form input[type="checkbox"]::after{
  content:"";
  width:0.58rem;
  height:0.32rem;
  border-left:2px solid #FBF7F1;
  border-bottom:2px solid #FBF7F1;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .15s ease;
}
.wpcf7-form input[type="checkbox"]:checked{
  background:var(--f-actif);
  border-color:var(--f-actif);
}
.wpcf7-form input[type="checkbox"]:checked::after{
  transform:rotate(-45deg) scale(1);
}
.wpcf7-form input[type="checkbox"]:focus-visible{
  outline:2px solid #3A0A0E;
  outline-offset:2px;
}

/* Piège à robots — repéré par le data-name que CF7 pose sur le champ */
.wpcf7-form p:has(.wpcf7-form-control-wrap[data-name="piege"]){
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Envoi */
.wpcf7-form input[type="submit"]{
  font-family:inherit;
  font-size:0.9375rem;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:none;
  color:#FBF7F1;
  background:var(--f-actif);
  border:0;
  border-radius:999px;
  padding:0.95rem 2.4rem;
  cursor:pointer;
  transition:background-color .18s ease;
}
.wpcf7-form input[type="submit"]:hover{ background:#3A0A0E; }
.wpcf7-form input[type="submit"]:focus-visible{
  outline:2px solid #3A0A0E;
  outline-offset:3px;
}

/* Messages */
.wpcf7-form .wpcf7-not-valid-tip{
  color:#B0302F;
  font-size:0.8125rem;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  margin-top:0.4rem;
}
.wpcf7-form .wpcf7-not-valid{ border-color:#B0302F; }
.wpcf7-form .wpcf7-response-output{
  margin:0;
  padding:1rem 1.25rem;
  border:1px solid #E3D8CB;
  border-left:3px solid #9DAA92;
  border-radius:3px;
  background:rgba(220,226,214,0.35);
  font-size:0.9375rem;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  color:#241A18;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output{
  border-left-color:#B0302F;
  background:rgba(244,228,222,0.5);
}

@media (prefers-reduced-motion:reduce){
  .wpcf7-form *{ transition:none !important; }
}


/* ==========================================================================
   Billetterie BilletWeb et ancre des stages
   ========================================================================== */

.osm-billetweb{
  max-width:64rem;
  margin-inline:auto;
}

.osm-billetweb iframe{
  display:block;
  width:100%;
  border:0;
  border-radius:14px;
  background:var(--wp--preset--color--creme);
}

/* Si le script BilletWeb ne charge pas, le lien garde l'aspect d'un bouton. */
.osm-billetweb a.shop_frame{
  display:inline-block;
  font-family:var(--wp--preset--font-family--texte);
  font-size:0.9375rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:#FBF7F1;
  background:var(--wp--preset--color--bordeaux);
  border-radius:999px;
  padding:0.95rem 2.4rem;
  text-decoration:none;
}

.osm-billetweb a.shop_frame:hover{
  background:var(--wp--preset--color--bordeaux-nuit);
}

.osm-billetweb__note{
  margin:0;
  font-size:0.875rem;
  color:var(--wp--preset--color--rouge);
}

#stages{
  scroll-margin-top:2rem;
}


/* ==========================================================================
   Page d'accueil (body.home)
   ========================================================================== */

/* Bandes en dégradé : voile bordeaux nuit entre le dégradé et le texte
   pour atteindre le contraste minimal (texte clair sur corail). */
body.home .osm-cadre{
  position:relative;
  isolation:isolate;
}
body.home .osm-cadre::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(58,10,14,0.42);
}
body.home .osm-cadre > *{
  position:relative;
  z-index:1;
}

body.home .wp-block-group:has(> .osm-manifeste){
  position:relative;
  isolation:isolate;
}
body.home .wp-block-group:has(> .osm-manifeste)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(58,10,14,0.28);
}
body.home .wp-block-group:has(> .osm-manifeste) > *{
  position:relative;
  z-index:1;
}

/* Étiquettes des cartes : contraste et interligne */
body.home .osm-mots h3.wp-block-heading{
  color:#B5492C;
  font-size:0.8125rem;
  line-height:1.45;
  letter-spacing:0.16em;
  margin-bottom:0.4em;
}

body.home .osm-mots p{
  font-size:1rem;
  line-height:1.6;
}

/* Titres des cartes visuelles : bordeaux nuit, pas noir pur */
body.home .osm-carte__visuel h3.wp-block-heading{
  color:#3A0A0E;
  font-weight:400;
}

body.home .entry-content p,
body.home .entry-content li{
  letter-spacing:normal;
}

/* Interlignes des grands textes */
body.home .osm-surtitre.has-xxxl-font-size{
  line-height:1.12;
  letter-spacing:-0.01em;
}

body.home .osm-manifeste{
  line-height:1.32;
  letter-spacing:-0.008em;
}

body.home .osm-chapo{
  line-height:1.4;
}

/* Les trois titres de cartes : un seul traitement.
   !important : WordPress écrit ses classes de police avec !important. */
body.home .wp-block-cover h3.wp-block-heading,
body.home .wp-block-cover p.has-large-font-size{
  font-family:var(--wp--preset--font-family--display) !important;
  font-weight:400;
  font-size:clamp(1.45rem, 1.2rem + 0.9vw, 1.75rem);
  line-height:1.2;
  letter-spacing:-0.01em;
}

/* Corps de texte et listes */
body.home .entry-content li:not([class*="has-"]){
  font-size:1rem;
  line-height:1.65;
}

body.home .entry-content ul,
body.home .entry-content ol{
  padding-left:1.2em;
}

body.home .entry-content li + li{
  margin-top:0.35em;
}

/* Définition du hero */
body.home .osm-definition{
  font-size:1.15rem;
  line-height:1.6;
  letter-spacing:0.01em;
}

/* Fins de ligne */
body.home .entry-content h1,
body.home .entry-content h2,
body.home .entry-content h3,
body.home .entry-content h4,
body.home .osm-chapo,
body.home .osm-manifeste,
body.home .osm-negations,
body.home .wp-block-cover p.has-large-font-size{
  text-wrap:balance;
}

body.home .entry-content p{
  text-wrap:pretty;
}

/* Paragraphe resté en Fraunces : ramené à la police de titres. */
body.home .entry-content p.has-fraunces-font-family{
  font-family:var(--wp--preset--font-family--display) !important;
}


/* ==========================================================================
   Page « Mon approche » (body.page-id-35)
   ========================================================================== */

/* Échelle et interlignage */
.page-id-35 .entry-content p,
.page-id-35 .entry-content li{
  line-height:1.65;
  letter-spacing:normal;
}

.page-id-35 h1.wp-block-heading{
  font-size:clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  line-height:1.08;
  letter-spacing:-0.012em;
  text-wrap:balance;
}

.page-id-35 h2.wp-block-heading{
  font-size:clamp(1.85rem, 1.45rem + 1.7vw, 2.5rem);
  line-height:1.16;
  letter-spacing:-0.008em;
  text-wrap:balance;
}

.page-id-35 .entry-content .osm-chapo{
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.4rem, 1.15rem + 1vw, 1.7rem);
  line-height:1.42;
  letter-spacing:0;
}

/* Le h4 « Poser de nouvelles bases… » est une citation, pas un titre. */
.page-id-35 h4.wp-block-heading{
  font-family:var(--wp--preset--font-family--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.625rem);
  line-height:1.40;
  letter-spacing:0;
}

/* Un seul style d'étiquette pour les surtitres et les titres de carte.
   Le :not() protège les surtitres passés en Give You Glory. */
.page-id-35 .entry-content .osm-surtitre:not(.has-give-you-glory-font-family),
.page-id-35 .entry-content h3.wp-block-heading{
  font-family:var(--wp--preset--font-family--texte);
  font-size:0.8125rem;
  font-weight:600;
  line-height:1.45;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

.page-id-35 .entry-content h3.wp-block-heading{
  margin-bottom:0.4em;
}

.page-id-35 .osm-mots p,
.page-id-35 .osm-mots li{
  font-size:1rem;
  line-height:1.6;
}

.page-id-35 .entry-content .osm-cadre__valeurs{
  font-size:0.8125rem;
  letter-spacing:0.14em;
  line-height:1.8;
}

.page-id-35 .wp-block-button__link{
  font-size:0.9375rem;
  font-weight:600;
  letter-spacing:0.02em;
}

/* Largeur de colonne : 41rem ≈ 72 signes à 18px. */
body.page-id-35{
  --wp--style--global--content-size:41rem;
}

/* Lisibilité sur photo : voile sur les sections à image de fond, sauf
   celle de « Mon intention », où une carte pleine porte déjà le texte. */
.page-id-35 .wp-block-group[style*="background-image"]:not(:has(.osm-ap-intention)){
  position:relative;
  isolation:isolate;
}

.page-id-35 .wp-block-group[style*="background-image"]:not(:has(.osm-ap-intention))::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,
    rgba(14,11,12,0.62) 0%,
    rgba(14,11,12,0.42) 45%,
    rgba(14,11,12,0.62) 100%);
}

.page-id-35 .wp-block-group[style*="background-image"]:not(:has(.osm-ap-intention)) > *{
  position:relative;
  z-index:1;
}

.page-id-35 .wp-block-group[style*="background-image"]:not(:has(.osm-ap-intention)) .wp-block-column{
  background-color:rgba(251,247,241,0.94);
}

/* Le gras : 600 en bordeaux nuit plutôt que 700 en noir. */
.page-id-35 .entry-content p strong,
.page-id-35 .entry-content li strong{
  font-weight:600;
  color:#3A0A0E;
}

/* Sections */
.osm-ap-section{
	padding: clamp(48px, 7vw, 96px) var(--wp--preset--spacing--30) !important;
}
.osm-ap-creme{ background: var(--wp--preset--color--creme); }
.osm-ap-creme-fonce{ background: var(--wp--preset--color--creme-fonce); }

.osm-ap-photo{ background-position: center !important; }
.osm-ap-photo .osm-surtitre.has-background{
	display: table;
	margin-inline: auto !important;
	padding: .45em 1.3em;
	border-radius: 999px;
}

/* Encadré des 6 phrases d'intro */
.osm-ap-encadre{
	background: var(--wp--preset--color--creme-fonce);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--rouge) 18%, transparent);
	border-left: 4px solid var(--wp--preset--color--rouge);
	border-radius: 28px;
	padding: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 48px) !important;
	margin-top: var(--wp--preset--spacing--40) !important;
}
.osm-ap-encadre > p{ margin-block: 0 .9em; }
.osm-ap-encadre > p:last-child{ margin-bottom: 0; }

/* Notes */
.osm-ap-note,
.osm-ap-note p{
	font-size: .95rem !important;
	font-style: italic;
	opacity: .85;
}
.osm-ap-note{ max-width: 38rem; margin-inline: auto !important; }

/* Cartes. La typographie des titres et légendes vient des règles
   .page-id-35 ci-dessus (étiquettes en capitales espacées). */
.osm-ap-cartes{
	gap: 20px !important;
	margin-top: var(--wp--preset--spacing--40) !important;
}
.osm-ap-cartes + .osm-ap-cartes{ margin-top: 20px !important; }
.osm-ap-cartes > .wp-block-column{
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--rouge) 14%, transparent);
	border-radius: 22px;
	padding: 28px 24px;
	box-shadow: 0 6px 20px rgba(60, 20, 20, .06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.osm-ap-creme .osm-ap-cartes > .wp-block-column{
	background: var(--wp--preset--color--creme-fonce);
}
.osm-ap-cartes > .wp-block-column:hover{
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(60, 20, 20, .10);
}
.osm-ap-cartes h3{ margin-top: 0 !important; }
.osm-ap-cartes h3::before{
	content: "✦";
	display: block;
	margin-bottom: .5rem;
	font-size: .9rem;
	letter-spacing: 0;
	color: var(--wp--preset--color--rose-poudre);
}

/* Citation (police et taille : règle h4 ci-dessus) */
.osm-ap-citation{
	color: var(--wp--preset--color--rouge);
	max-width: 38rem;
	margin-inline: auto !important;
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* « Mon intention » */
.osm-ap-intention{
	background: var(--wp--preset--color--creme-fonce);
	color: var(--wp--preset--color--vert-profond);
	border-left: 4px solid var(--wp--preset--color--vert-profond);
	border-radius: 28px;
	padding: clamp(28px, 5vw, 52px) !important;
}
.osm-ap-intention ul{ padding-left: 1.4em; }
.osm-ap-intention li{ margin-bottom: .4em; }
.osm-ap-intention li::marker{
	content: "✦  ";
	color: var(--wp--preset--color--rose-poudre);
}
.osm-ap-intention__lead{
	margin-top: var(--wp--preset--spacing--40) !important;
	font-size: 1.15rem;
}
.osm-ap-intention__chute{
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
	line-height: 1.45;
}


/* ==========================================================================
   Gabarit des pages éditoriales longues : « À propos » et « Qui suis-je ? »
   Tout est porté par .osm-apropos : rien n'atteint une autre page.
   ========================================================================== */

.osm-apropos{
  --a-creme:        var(--wp--preset--color--creme,        #FBF7F1);
  --a-creme-fonce:  var(--wp--preset--color--creme-fonce,  #F3EADF);
  --a-vieux-rose:   var(--wp--preset--color--vieux-rose,   #E3C3B8);
  --a-rose-poudre:  var(--wp--preset--color--rose-poudre,  #F4E4DE);
  --a-terracotta:   var(--wp--preset--color--terracotta,   #D4694B);
  --a-corail:       var(--wp--preset--color--corail,       #EE8250);
  --a-bordeaux:     var(--wp--preset--color--bordeaux,     #6E1216);
  --a-nuit:         var(--wp--preset--color--bordeaux-nuit,#3A0A0E);
  --a-encre:        var(--wp--preset--color--encre,        #241A18);
  --a-sauge:        var(--wp--preset--color--sauge,        #9DAA92);
  --a-terracotta-aa: #B5492C;

  --a-display: var(--wp--preset--font-family--display, "Playfair Display", Georgia, serif);
  --a-texte:   var(--wp--preset--font-family--texte, "Work Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

  --a-colonne: 41rem;

  font-family: var(--a-texte);
  color: var(--a-encre);
  background: var(--a-creme);
  padding-block: 0 4rem;
}

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

/* 1 · La colonne */
.osm-apropos__col{
  max-width: var(--a-colonne);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* 2 · Typographie */
.osm-apropos p{
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

.osm-apropos p:last-child{ margin-bottom: 0; }

.osm-apropos strong{
  font-weight: 600;
  color: var(--a-nuit);
}

.osm-apropos h1,
.osm-apropos h2,
.osm-apropos h3{
  font-family: var(--a-display);
  color: var(--a-nuit);
  text-wrap: balance;
  margin: 0;
  font-weight: 500;
}

.osm-apropos h1{
  font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.osm-apropos h2{
  font-size: clamp(1.85rem, 1.45rem + 1.7vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.008em;
  margin-bottom: 1.6rem;
}

.osm-apropos h3{
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  line-height: 1.3;
  margin: 2.6rem 0 1rem;
}

/* Emoji ramené à la hauteur d'x du titre. */
.osm-apropos .emo{
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size: 0.78em;
  line-height: 1;
  margin-right: 0.38em;
  vertical-align: 0.02em;
  display: inline-block;
}

.osm-apropos .osm-o{ color: var(--a-terracotta); }

/* 3 · Titre de page */
.osm-apropos__titre{
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
  text-align: center;
}

.osm-apropos__titre h1{ text-transform: none; }

/* 4 · Séparateurs : vaguelette d'étoiles filantes */
.osm-apropos__vague{
  display: block;
  width: min(320px, 70%);
  height: auto;
  margin: clamp(2.75rem, 6vw, 4.25rem) auto;
  overflow: visible;
  color: var(--a-terracotta);
}

.osm-apropos__vague .courbe{
  fill: none;
  stroke: var(--a-vieux-rose);
  stroke-width: 1;
  stroke-linecap: round;
}

.osm-apropos__defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* 5 · Encadrés */
.osm-apropos__suite{ margin-top: 2.4rem; }

.osm-apropos__encadre,
.osm-apropos__facettes,
.osm-apropos__multi,
.osm-apropos__final{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.osm-apropos__encadre{
  border-radius: 22px;
  padding: clamp(1.6rem, 4vw, 2.5rem);
  margin-block: 0 0.5rem;
}

.osm-apropos__encadre--ton{
  background: var(--a-creme-fonce);
}

.osm-apropos__encadre--vert{
  background: color-mix(in srgb, var(--a-sauge) 12%, var(--a-creme));
}

.osm-apropos__encadre--vert p{
  font-style: italic;
  font-size: 1.09rem;
  line-height: 1.7;
}

.osm-apropos__encadre--vert strong{ font-style: italic; }

/* 6 · « Ici, la curiosité suffit. » */
.osm-apropos .respire{
  font-family: var(--a-display);
  font-size: clamp(1.28rem, 1.12rem + 0.7vw, 1.55rem);
  line-height: 1.15;
  color: var(--a-bordeaux);
  margin-left: 0.22em;
}

.osm-apropos .respire-p{
  margin-bottom: 0;
  line-height: 1.5;
}

/* 7 · Lien « En savoir plus sur Éros » */
.osm-apropos__lien{
  display: inline-block;
  position: relative;
  margin-top: 0.4rem;
  font-family: var(--a-display);
  font-size: 1.2rem;
  color: var(--a-bordeaux);
  text-decoration: none;
  padding-bottom: 3px;
}

.osm-apropos__lien::after{
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--a-terracotta);
  transition: right .35s ease;
}

.osm-apropos__lien:hover::after,
.osm-apropos__lien:focus-visible::after{ right: 0; }

.osm-apropos__lien .fleche{
  color: var(--a-terracotta);
  display: inline-block;
  margin-left: 0.3em;
  transition: transform .3s ease;
}

.osm-apropos__lien:hover .fleche{ transform: translateX(3px); }

/* 8 · Sous-titres à puce */
.osm-apropos h3.puce{
  position: relative;
  padding-left: 1.7rem;
}

.osm-apropos h3.puce .etoile{
  position: absolute;
  left: 0;
  top: 0.06em;
  color: var(--a-terracotta);
  font-size: 0.85em;
}

/* 9 · Multifacettes */
.osm-apropos__multi{
  border-radius: 26px;
  padding: clamp(2rem, 5vw, 3.25rem);
  background:
    radial-gradient(120% 90% at 8% 0%,   color-mix(in srgb, var(--a-rose-poudre) 85%, transparent) 0%, transparent 58%),
    radial-gradient(110% 85% at 95% 12%, color-mix(in srgb, var(--a-sauge) 40%, transparent) 0%, transparent 64%),
    radial-gradient(130% 110% at 50% 108%, color-mix(in srgb, var(--a-corail) 30%, transparent) 0%, transparent 62%),
    var(--a-creme-fonce);
}

.osm-apropos__multi > .osm-apropos__multi-texte{
  position: relative;
  z-index: 1;
}

.osm-apropos__multi-texte p{
  font-family: var(--a-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.34;
  color: var(--a-nuit);
  margin-bottom: 0.85em;
}

/* 10 · Encadré des facettes */
.osm-apropos__facettes{
  border-radius: 22px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--a-creme-fonce);
  border: 1px solid color-mix(in srgb, var(--a-vieux-rose) 55%, transparent);
  font-family: var(--a-display);
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem);
  line-height: 1.6;
  color: var(--a-nuit);
  text-wrap: balance;
}

.osm-apropos__facettes .sep{
  color: var(--a-terracotta);
  padding-inline: 0.12em;
}

/* 11 · Et finalement — la respiration */
.osm-apropos__final{
  border-radius: 26px;
  padding: clamp(2.25rem, 6vw, 4rem) clamp(1.6rem, 4vw, 3rem);
  background:
    radial-gradient(90% 130% at 50% -18%, color-mix(in srgb, var(--a-sauge) 30%, transparent) 0%, transparent 72%),
    radial-gradient(80% 90% at 88% 108%, color-mix(in srgb, var(--a-rose-poudre) 70%, transparent) 0%, transparent 70%),
    var(--a-creme);
}

/* 12 · Appel final et boutons */
.osm-apropos__cta{
  text-align: center;
  padding-block: clamp(2rem, 5vw, 3rem);
}

.osm-apropos__cta h2{
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.25rem);
  margin-bottom: 1.9rem;
}

.osm-apropos__boutons{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.8rem;
}

.osm-apropos__bouton{
  font-family: var(--a-texte);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.9rem 1.35rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, transform .25s ease;
}

.osm-apropos__bouton .fleche{
  display: inline-block;
  transition: transform .25s ease;
}

.osm-apropos__bouton:hover .fleche{ transform: translateX(4px); }

.osm-apropos__bouton--plein{
  background: var(--a-bordeaux);
  color: var(--a-creme);
  border: 1px solid var(--a-bordeaux);
}

.osm-apropos__bouton--plein:hover{ background: var(--a-nuit); border-color: var(--a-nuit); }

.osm-apropos__bouton--filet{
  background: transparent;
  color: var(--a-bordeaux);
  border: 1px solid color-mix(in srgb, var(--a-bordeaux) 45%, transparent);
}

.osm-apropos__bouton--filet:hover{
  border-color: var(--a-bordeaux);
  background: color-mix(in srgb, var(--a-rose-poudre) 60%, transparent);
}

.osm-apropos__lieu{
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--a-encre) 78%, var(--a-creme));
  margin: 0;
}

.osm-apropos__lieu .emo{ font-size: 1em; margin-right: .25em; }

/* 13 · Accessibilité */
.osm-apropos a:focus-visible{
  outline: 2px solid var(--a-corail);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  .osm-apropos *{ transition: none !important; }
}

@media (max-width: 600px){
  .osm-apropos__boutons{ flex-direction: column; }
  .osm-apropos__bouton{ justify-content: center; }
}

/* 14 · Semis de motifs, embarqué dans la feuille.
   Les <svg> de semis restés dans les pages sont neutralisés.
   Intensité : les valeurs d'opacity. 0 pour l'effacer. */
.osm-apropos .osm-apropos__semis{ display: none; }

.osm-apropos__encadre::before,
.osm-apropos__facettes::before,
.osm-apropos__multi::before,
.osm-apropos__final::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 340'%3E%3Cdefs%3E%3Cg id='e'%3E%3Cpath d='M0,-7 C0.9,-2.4 2.4,-0.9 7,0 C2.4,0.9 0.9,2.4 0,7 C-0.9,2.4 -2.4,0.9 -7,0 C-2.4,-0.9 -0.9,-2.4 0,-7 Z'/%3E%3C/g%3E%3Cg id='f' fill='none' stroke-width='1.15'%3E%3Ccircle cx='0' cy='-5.6' r='3.1'/%3E%3Ccircle cx='5.3' cy='-1.7' r='3.1'/%3E%3Ccircle cx='3.3' cy='4.5' r='3.1'/%3E%3Ccircle cx='-3.3' cy='4.5' r='3.1'/%3E%3Ccircle cx='-5.3' cy='-1.7' r='3.1'/%3E%3Ccircle cx='0' cy='0' r='1.5'/%3E%3C/g%3E%3Cg id='l'%3E%3Cpath d='M1.6,-7.4 A7.4,7.4 0 1,0 1.6,7.4 A5.8,5.8 0 1,1 1.6,-7.4 Z'/%3E%3C/g%3E%3Cg id='a' fill='none' stroke-width='1.15' stroke-linejoin='round'%3E%3Cpath d='M0,-8.5 L4.6,-1.6 L-4.6,-1.6 Z'/%3E%3Cpath d='M0,-3.6 L6,4.2 L-6,4.2 Z'/%3E%3Cpath d='M0,4.2 L0,8.4'/%3E%3C/g%3E%3Cg id='s' fill='none' stroke-width='1.15' stroke-linecap='round'%3E%3Ccircle cx='0' cy='0' r='3.6'/%3E%3Cpath d='M0,-7.6 L0,-5.6 M0,5.6 L0,7.6 M-7.6,0 L-5.6,0 M5.6,0 L7.6,0 M-5.4,-5.4 L-4,-4 M4,4 L5.4,5.4 M5.4,-5.4 L4,-4 M-4,4 L-5.4,5.4'/%3E%3C/g%3E%3Cg id='c'%3E%3Cpath d='M0,6.2 C-6.8,1.4 -8,-3.6 -4.4,-5.6 C-1.8,-7 0,-5 0,-3.4 C0,-5 1.8,-7 4.4,-5.6 C8,-3.6 6.8,1.4 0,6.2 Z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23D4694B' stroke='%23D4694B' opacity='.42'%3E%3Cuse href='%23e' transform='translate(58,44) scale(1.05)'/%3E%3Cuse href='%23e' transform='translate(512,88) scale(.72)'/%3E%3Cuse href='%23e' transform='translate(286,286) scale(.85)'/%3E%3Cuse href='%23e' transform='translate(154,236) scale(.6)'/%3E%3Cuse href='%23c' transform='translate(452,246) scale(.72)'/%3E%3Cuse href='%23c' transform='translate(112,132) scale(.52)'/%3E%3C/g%3E%3Cg fill='none' stroke='%237E8E74' opacity='.5'%3E%3Cuse href='%23a' transform='translate(96,286) scale(1.15)'/%3E%3Cuse href='%23a' transform='translate(544,196) scale(.85)'/%3E%3Cuse href='%23f' transform='translate(212,62) scale(1.1)'/%3E%3Cuse href='%23f' transform='translate(386,308) scale(.85)'/%3E%3Cuse href='%23f' transform='translate(30,182) scale(.7)'/%3E%3C/g%3E%3Cg fill='%23EE8250' opacity='.38'%3E%3Cuse href='%23l' transform='translate(348,52) rotate(18) scale(1.05)'/%3E%3Cuse href='%23l' transform='translate(28,290) rotate(-24) scale(.7)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C98A3E' opacity='.46'%3E%3Cuse href='%23s' transform='translate(470,140) scale(1.15)'/%3E%3Cuse href='%23s' transform='translate(238,176) scale(.62)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .85;
}

/* Chaque encadré montre un cadrage différent du même dessin. */
.osm-apropos__encadre--ton::before{
  background-size: 120% auto;
  background-position: 14% 22%;
}

.osm-apropos__encadre--vert::before{
  background-size: 145% auto;
  background-position: 82% 64%;
}

.osm-apropos__facettes::before{
  background-size: 135% auto;
  background-position: 38% 92%;
}

.osm-apropos__multi::before{
  background-size: cover;
  background-position: 50% 50%;
  opacity: 1;
}

.osm-apropos__final::before{
  background-size: 130% auto;
  background-position: 88% 8%;
}


/* ==========================================================================
   « Qui suis-je ? » — complément au gabarit .osm-apropos
   ========================================================================== */

/* 1 · Le chapô */
.osm-quisuisje__chapo{
  font-family: var(--a-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  line-height: 1.42;
  color: var(--a-bordeaux);
  margin-bottom: 2.5rem;
}

/* 2 · Les deux blocs d'accueil */
.osm-quisuisje__duo{
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.75rem;
}

@media (min-width: 40rem){
  .osm-quisuisje__duo{ grid-template-columns: 1fr 1fr; }
}

.osm-quisuisje__carte{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: 22px;
  background: var(--a-creme);
  border: 1px solid color-mix(in srgb, var(--a-vieux-rose) 70%, transparent);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}

.osm-quisuisje__carte:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(110, 18, 22, .09);
}

.osm-quisuisje__carte p{ margin: 0; }

.osm-quisuisje__carte .osm-quisuisje__rdv{ margin-top: auto; }

.osm-quisuisje__rdv{
  font-family: var(--a-texte);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--a-bordeaux);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--a-bordeaux) 45%, transparent);
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.osm-quisuisje__rdv:hover{
  background: var(--a-bordeaux);
  border-color: var(--a-bordeaux);
  color: var(--a-creme);
}

/* 3 · Les listes : court tiret terracotta */
.osm-quisuisje__liste{
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.15em;
}

.osm-quisuisje__liste li{
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.osm-quisuisje__liste li + li{ margin-top: 0.45em; }

.osm-quisuisje__liste li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 9px;
  height: 1px;
  background: var(--a-terracotta);
}

/* 4 · Ligne de renvoi vers « À propos » */
.osm-quisuisje__renvoi{
  font-size: 1rem;
  color: color-mix(in srgb, var(--a-encre) 78%, var(--a-creme));
  margin-top: 2.25rem;
}

.osm-quisuisje__renvoi a{
  color: var(--a-bordeaux);
  text-decoration: none;
  border-bottom: 1px solid var(--a-terracotta);
  padding-bottom: 1px;
}

.osm-quisuisje__renvoi a:hover{
  background: color-mix(in srgb, var(--a-rose-poudre) 60%, transparent);
}
/*
Theme Name: osmOse
Theme URI: https://osmose-intime.com
Description: Thème enfant de Twenty Twenty-Five pour osmOse — Jenny Kearsley, praticienne psychocorporelle en sexothérapie. Palette et typographie tirées du logo osmOse.
Author: osmOse
Version: 1.0.3
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Template: twentytwentyfive
Text Domain: osmose
Tags: block-styles, full-site-editing, wide-blocks
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ---------------------------------------------------------------------------
   1. Réglages transverses
   ------------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--vieux-rose);
	color: var(--wp--preset--color--bordeaux-nuit);
}

/* Le mot osmOse : le O central en corail, partout où il apparaît en texte. */
.osm-o {
	color: var(--wp--preset--color--terracotta);
}

/* Sur les fonds sombres, le corail passe mieux que le terracotta. */
.wp-block-cover .osm-o,
.osm-pied .osm-o {
	color: var(--wp--preset--color--corail);
}

/* Le contenu occupe toute la largeur : chaque section pose son propre fond,
   donc on annule le retrait horizontal hérité du conteneur d'article. */
main.wp-block-group > .wp-block-post-content.has-global-padding > .alignfull {
	max-width: none;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}

/* ---------------------------------------------------------------------------
   2. En-tête et navigation
   ------------------------------------------------------------------------ */

/*.osm-entete {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: saturate(1.4) blur(10px);
	background: color-mix(in srgb, var(--wp--preset--color--creme) 88%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 60%, transparent);
}*/

.osm-entete {
	position: sticky;
	top: 0;
	z-index: 40;
	background: transparent;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 60%, transparent);
}

/* Le flou est porté par un pseudo-élément : sur l'en-tête lui-même,
   backdrop-filter en ferait le bloc conteneur de l'overlay du menu mobile. */
.osm-entete::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	background: color-mix(in srgb, var(--wp--preset--color--creme) 88%, transparent);
}

/* Le conteneur généré par WordPress fait exactement la hauteur de l'en-tête,
   ce qui empêche position: sticky de fonctionner. */
.wp-site-blocks > .wp-block-template-part:first-child {
	display: contents;
}

.osm-entete .wp-block-navigation__responsive-container-open,
.osm-entete .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--bordeaux-nuit);
}

/* Petits traits entre les entrées de menu, comme demandé dans la maquette. */
.osm-menu .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 1px;
	margin-inline-end: 1rem;
	background: var(--wp--preset--color--vieux-rose);
	vertical-align: middle;
}

.osm-menu .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
}

.osm-menu .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--terracotta);
	transition: right .35s ease;
}

.osm-menu .wp-block-navigation-item__content:hover::after,
.osm-menu .current-menu-item .wp-block-navigation-item__content::after {
	right: 0;
}

@media (max-width: 781px) {
	.osm-menu .wp-block-navigation-item + .wp-block-navigation-item::before { display: none; }
}

/* ---------------------------------------------------------------------------
   3. Hero
   ------------------------------------------------------------------------ */

.osm-hero {
	min-height: min(88svh, 820px);
}

.osm-hero .wp-block-cover__inner-container {
	max-width: 54rem;
}

.osm-hero .osm-hero__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.5rem, 13vw, 9rem);
	line-height: .92;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0;
}

.osm-hero .osm-hero__baseline {
	font-size: clamp(1.125rem, 2.6vw, 1.75rem);
	letter-spacing: .02em;
	margin-top: .6rem;
}

.osm-hero .osm-hero__lieu {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .85;
}

.osm-hero .wp-block-buttons {
	justify-content: center;
	gap: .75rem;
}

/* Définition du mot « osmose », en bas du hero. */
.osm-definition {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--md);
	max-width: 34rem;
	margin-inline: auto;
	opacity: .9;
}

/* ---------------------------------------------------------------------------
   4. Éléments de rythme
   ------------------------------------------------------------------------ */

.osm-surtitre {
	font-size: var(--wp--preset--font-size--xs) !important;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: .75rem !important;
}

.osm-chapo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.35;
	color: var(--wp--preset--color--bordeaux);
}

.osm-manifeste {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 6vw, 4.25rem);
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--wp--preset--color--bordeaux);
}

.osm-questions p {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 3.4vw, 2.25rem);
	line-height: 1.25;
	text-wrap: balance;
}

.osm-filet {
	width: 56px;
	height: 1px;
	border: 0;
	background: var(--wp--preset--color--terracotta);
	opacity: 1;
	margin: 0 auto;
}

.osm-filet.is-style-wide { width: 100%; }

/* ---------------------------------------------------------------------------
   5. Cartes
   ------------------------------------------------------------------------ */

.osm-cartes {
	gap: 1.5rem;
}

.osm-carte {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 70%, transparent);
	box-shadow: var(--wp--preset--shadow--douce);
	transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.osm-carte > .osm-carte__corps {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.osm-carte > .osm-carte__corps > * {
	max-width: none;
	margin-inline: 0;
}

.osm-carte .wp-block-buttons {
	margin-top: auto;
	justify-content: flex-start;
}

.osm-carte:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--portee);
}

.osm-carte__corps {
	padding: 1.75rem 1.75rem 2rem;
}

.osm-carte h3 {
	margin-top: 0;
}

/* Emplacement d'image : le bloc reste un aplat dégradé tant que la photo
   n'est pas posée. La note indique quoi y mettre ; elle se supprime en même
   temps que l'ajout de l'image. */
.osm-emplacement__note {
	display: inline-block;
	letter-spacing: .12em;
	text-transform: uppercase;
	border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 999px;
	padding: .4rem .9rem;
	opacity: .85;
}

/* ---------------------------------------------------------------------------
   6. Grilles de mots-clés et de bénéfices
   ------------------------------------------------------------------------ */

.osm-mots .wp-block-column {
	padding: 1.75rem 1.5rem;
	border-radius: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--creme) 70%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sauge) 40%, transparent);
}

.osm-mots h3,
.osm-mots h4 {
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--terracotta);
	margin: 0 0 .5rem;
}

.osm-mots p {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

.osm-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--terracotta);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	margin-bottom: .9rem;
}

/* ---------------------------------------------------------------------------
   7. Le cadre — section de réassurance
   ------------------------------------------------------------------------ */

.osm-cadre {
	border-radius: 28px;
}

.osm-cadre__valeurs {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bordeaux);
}

.osm-cadre ul {
	list-style: none;
	padding-left: 0;
	margin-inline: auto;
	max-width: 32rem;
}

.osm-cadre ul li {
	padding: .55rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--bordeaux) 15%, transparent);
}

.osm-cadre ul li:last-child { border-bottom: 0; }

.osm-negations {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--bordeaux);
}

/* ---------------------------------------------------------------------------
   8. Ateliers — les trois univers
   ------------------------------------------------------------------------ */

.osm-univers {
	display: grid;
	gap: 1.25rem;
}

.osm-univers .wp-block-column {
	position: relative;
	padding: 1.75rem;
	border-radius: 20px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 65%, transparent);
	transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.osm-univers .wp-block-column:hover {
	background: var(--wp--preset--color--rose-poudre);
	border-color: var(--wp--preset--color--terracotta);
	transform: translateY(-3px);
}

.osm-univers h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--bordeaux-nuit);
}

.osm-univers .wp-block-column:hover h3 a {
	color: var(--wp--preset--color--rouge);
}

.osm-univers p { font-size: var(--wp--preset--font-size--sm); }

/* Bandeau d'un univers d'atelier */
.osm-univers-titre {
	scroll-margin-top: 6rem;
}

/* ---------------------------------------------------------------------------
   9. Dates, lieux, tarifs
   ------------------------------------------------------------------------ */

.osm-infos {
	border-radius: 20px;
	background: color-mix(in srgb, var(--wp--preset--color--creme-fonce) 80%, transparent);
	padding: 1.75rem;
}

.osm-dates ul {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: .5rem;
	margin: 0;
}

.osm-dates li {
	font-size: var(--wp--preset--font-size--sm);
	padding: .5rem .85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sauge) 55%, transparent);
	text-align: center;
}

ul.osm-cadence,
.osm-cadence ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

ul.osm-cadence li,
.osm-cadence li {
	position: relative;
	padding-left: 1.4rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.9;
}

ul.osm-cadence li::before,
.osm-cadence li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .85em;
	width: 8px;
	height: 1px;
	background: var(--wp--preset--color--terracotta);
}

.osm-lieu {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .04em;
}

.osm-prix {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--bordeaux);
}

/* Accordéons */
.wp-block-details {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 70%, transparent);
	border-radius: 16px;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--creme);
}

.wp-block-details + .wp-block-details { margin-top: .75rem; }

.wp-block-details summary {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .04em;
	color: var(--wp--preset--color--bordeaux);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

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

.wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--terracotta);
	transition: transform .3s ease;
}

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

.wp-block-details > *:not(summary) {
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------------------------------------------------------------------------
   10. Poèmes et respirations
   ------------------------------------------------------------------------ */

.osm-poeme p {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
	color: var(--wp--preset--color--bordeaux);
	text-wrap: pretty;
}

.osm-respiration {
	min-height: 320px;
	border-radius: 0;
}

.osm-respiration .osm-manifeste {
	color: var(--wp--preset--color--creme);
}

/* ---------------------------------------------------------------------------
   11. Portrait
   ------------------------------------------------------------------------ */

.osm-portrait img {
	border-radius: 26px;
	box-shadow: var(--wp--preset--shadow--portee);
	object-fit: cover;
	width: 100%;
	aspect-ratio: 4 / 5;
}

/* ---------------------------------------------------------------------------
   12. Parcours (Qui suis-je)
   ------------------------------------------------------------------------ */

.osm-parcours .wp-block-details {
	border: 0;
	border-left: 1px solid var(--wp--preset--color--vieux-rose);
	border-radius: 0;
	background: transparent;
	padding: .25rem 0 1.25rem 1.75rem;
	margin-left: .25rem;
}

.osm-parcours .wp-block-details + .wp-block-details { margin-top: 0; }

.osm-parcours .wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--bordeaux-nuit);
	position: relative;
}

.osm-parcours .wp-block-details summary::before {
	content: "";
	position: absolute;
	left: -2.05rem;
	top: .55em;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--preset--color--terracotta);
}

.osm-parcours .wp-block-details[open] summary::before {
	background: var(--wp--preset--color--terracotta);
}

/* ---------------------------------------------------------------------------
   13. Tarifs en pratique
   ------------------------------------------------------------------------ */

.osm-tarif {
	text-align: center;
	padding: 2rem 1.5rem;
	border-radius: 20px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 70%, transparent);
}

.osm-tarif h3 {
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	margin: 0 0 .75rem;
}

.osm-tarif__montant {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--bordeaux);
	display: block;
}

.osm-tarif__duree {
	font-size: var(--wp--preset--font-size--sm);
	opacity: .8;
}

/* ---------------------------------------------------------------------------
   14. Formulaires (Contact Form 7 / Forminator)
   ------------------------------------------------------------------------ */

.osm-formulaire {
	border-radius: 22px;
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 70%, transparent);
	padding: 2rem;
}

.osm-formulaire input[type="text"],
.osm-formulaire input[type="email"],
.osm-formulaire input[type="tel"],
.osm-formulaire select,
.osm-formulaire textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	padding: .8rem 1rem;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sauge) 70%, transparent);
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--encre);
	margin-top: .35rem;
}

.osm-formulaire input:focus-visible,
.osm-formulaire textarea:focus-visible,
.osm-formulaire select:focus-visible {
	outline: 2px solid var(--wp--preset--color--corail);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--terracotta);
}

.osm-formulaire label {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	margin-bottom: .9rem;
}

.osm-formulaire input[type="submit"],
.osm-formulaire button[type="submit"] {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--creme);
	background: var(--wp--preset--color--bordeaux);
	border: 1px solid var(--wp--preset--color--bordeaux);
	border-radius: 999px;
	padding: .85rem 1.6rem;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease;
}

.osm-formulaire input[type="submit"]:hover,
.osm-formulaire button[type="submit"]:hover {
	background: var(--wp--preset--color--terracotta);
	border-color: var(--wp--preset--color--terracotta);
}

/* Message affiché tant qu'aucune extension de formulaire n'est installée. */
.osm-formulaire-absent {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--bordeaux);
	background: var(--wp--preset--color--rose-poudre);
	border: 1px dashed var(--wp--preset--color--terracotta);
	border-radius: 14px;
	padding: 1rem 1.25rem;
}

/* ---------------------------------------------------------------------------
   15. Pied de page
   ------------------------------------------------------------------------ */

.osm-pied {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 60%, transparent);
}

.osm-pied .osm-signature {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
}

.osm-pied .wp-block-navigation {
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------------------------------------------------------------------------
   16. Accessibilité
   ------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--corail);
	outline-offset: 3px;
	border-radius: 4px;
}

.osm-lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--bordeaux);
	color: var(--wp--preset--color--creme);
	padding: .75rem 1.25rem;
	z-index: 100;
}

.osm-lien-evitement:focus {
	left: 1rem;
	top: 1rem;
}

/* ---------------------------------------------------------------------------
   Menu mobile : panneau ancré sous l'en-tête plutôt qu'overlay plein écran
   ------------------------------------------------------------------------ */

@media (max-width: 599px) {

	/* Le nav porte un z-index (Spectra) donc position: relative, ce qui en fait
	   l'ancre par défaut. On le neutralise pour ancrer sur l'en-tête. */
	.osm-entete .osm-menu {
		position: static;
	}

	.osm-entete .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: auto;
		max-height: 70svh;
		overflow-y: auto;
		padding: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--vieux-rose) 60%, transparent);
		box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
		backdrop-filter: saturate(1.4) blur(12px);
		-webkit-backdrop-filter: saturate(1.4) blur(12px);
	}

	.osm-entete .is-menu-open .wp-block-navigation__responsive-close {
		max-width: none;
		height: auto;
	}

	.osm-entete .is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 1rem 1.5rem 1.5rem;
	}

	.osm-entete .is-menu-open .wp-block-navigation__responsive-container-close {
		position: static;
		align-self: flex-end;
		margin: 0 0 .5rem;
	}

	/* WordPress réserve 56px en haut pour le bouton de fermeture en plein écran. */
	.osm-entete .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		padding-top: 0;
	}

	.osm-entete .is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	/* Les petits traits séparateurs du menu horizontal n'ont pas de sens empilés. */
	.osm-entete .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item::before {
		display: none;
	}

	/* WordPress bloque le défilement de la page pendant l'ouverture du menu.
	   Justifié pour un plein écran, inutile pour un panneau ancré. */
	html.has-modal-open {
		overflow: auto !important;
	}
		.osm-entete .wp-block-navigation__responsive-container.is-menu-open.has-background {
		background-color: color-mix(in srgb, var(--wp--preset--color--creme) 20%, transparent) !important;
	}
	
}

/* ==========================================================================
   osmOse — réglages typographiques de la page « Mon approche »
   ==========================================================================

   OÙ COLLER
   Éditeur de site → Styles → icône ⋮ → CSS supplémentaire.

   PORTÉE
   Le champ CSS supplémentaire de WordPress est unique et global.
   Il n'existe pas de « CSS de cette page ». Ce qui existe, c'est la classe
   que WordPress pose sur la balise <body> de chaque page.
   Pour « Mon approche », c'est page-id-35.
   Toutes les règles ci-dessous en sont préfixées : elles ne s'appliquent
   que sur cette page. Le reste du site ne bouge pas.

   POUR ÉTENDRE À TOUT LE SITE PLUS TARD
   Supprimer les « .page-id-35 » et remplacer « body.page-id-35 »
   par « :root » dans les blocs 1 et 3.

   POUR REVENIR EN ARRIÈRE
   Supprimer le bloc concerné. Aucune de ces règles ne modifie le contenu
   de la page, seulement son affichage.

   PRÉREQUIS — NON FAIT AU 9 SEPTEMBRE
   Work Sans n'est pas installée sur le site : vérifié sur la page, aucune
   fonte n'est servie pour elle et le texte retombe sur la police système.
   Éditeur de site → Styles → Typographie → Polices → Ajouter des polices
   → Google Fonts. Cocher les graisses 400, 500, 600 ET leurs italiques :
   la section « Mon intention » en a besoin.
   WordPress télécharge les fichiers et les sert depuis ton serveur :
   aucune requête vers Google depuis le navigateur du visiteur.
   Fraunces est déjà installée (romain 400 et 500, italique 400).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · LES DEUX FAMILLES
   Le thème définit ces variables sur :root (la balise html). On les
   redéfinit sur le body de la page 35. Les variables CSS s'héritent, donc
   tout ce qui est dans ce body reçoit les nouvelles polices — et rien
   ailleurs sur le site.

   Constat à l'origine : la famille « texte » commençait par DM Sans puis
   Montserrat, dont aucune n'est chargée par le site. Le corps de texte
   tombait sur la police système du visiteur (Segoe UI, San Francisco,
   Roboto selon la machine).
   -------------------------------------------------------------------------- */

body.page-id-35{
  --wp--preset--font-family--display:
    "Playfair Display", Georgia, "Times New Roman", serif;
  --wp--preset--font-family--texte:
    "Work Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* --------------------------------------------------------------------------
   2 · ÉCHELLE ET INTERLIGNAGE
   -------------------------------------------------------------------------- */

/* Texte courant d'abord : les règles d'étiquette qui suivent doivent
   pouvoir le contredire, donc passer après lui dans la cascade. */
.page-id-35 .entry-content p,
.page-id-35 .entry-content li{
  line-height:1.65;
  letter-spacing:normal;            /* le −0,1px actuel n'apporte rien à 18px */
}

.page-id-35 .entry-content .has-lg-font-size{
  font-size:1.25rem;
  line-height:1.55;
}

/* Titre de page : 72 → 60px. Une police plus charpentée pèse autant
   avec moins de corps. */
.page-id-35 h1.wp-block-heading{
  font-size:clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  line-height:1.08;
  letter-spacing:-0.012em;
  text-wrap:balance;
}

/* Titre de section : 48 → 40px */
.page-id-35 h2.wp-block-heading{
  font-size:clamp(1.85rem, 1.45rem + 1.7vw, 2.5rem);
  line-height:1.16;
  letter-spacing:-0.008em;
  text-wrap:balance;
}

/* Chapô : le palier qui manque entre le titre et le texte. 32 → 27px */
.page-id-35 .entry-content .osm-chapo{
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.4rem, 1.15rem + 1vw, 1.7rem);
  line-height:1.42;
  letter-spacing:0;
}

/* Le h4 « Poser de nouvelles bases… » est une citation, pas un titre.
   En sans-serif demi-gras il concurrençait les titres. */
.page-id-35 h4.wp-block-heading{
  font-family:var(--wp--preset--font-family--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.625rem);
  line-height:1.40;
  letter-spacing:0;
}

/* Un seul style d'étiquette, pour les surtitres et les titres de carte.
   Avant : deux styles quasi identiques, 13px/0,22em et 15px/0,18em, avec
   un interligne de 1,12 qui écrasait les étiquettes sur deux lignes.
   Le :not() protège les surtitres passés en Give You Glory. */
.page-id-35 .entry-content .osm-surtitre:not(.has-give-you-glory-font-family),
.page-id-35 .entry-content h3.wp-block-heading{
  font-family:var(--wp--preset--font-family--texte);
  font-size:0.8125rem;              /* 13px */
  font-weight:600;
  line-height:1.45;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

.page-id-35 .entry-content h3.wp-block-heading{
  margin-bottom:0.4em;
}

/* Une légende ne peut pas faire la taille de son propre titre.
   Les cartes passent de 15 à 16px. */
.page-id-35 .osm-mots p,
.page-id-35 .osm-mots li{
  font-size:1rem;
  line-height:1.6;
}

/* Bandeau de valeurs et boutons */
.page-id-35 .entry-content .osm-cadre__valeurs{
  font-size:0.8125rem;
  letter-spacing:0.14em;
  line-height:1.8;
}

.page-id-35 .wp-block-button__link{
  font-size:0.9375rem;
  font-weight:600;
  letter-spacing:0.02em;
}


/* --------------------------------------------------------------------------
   3 · LARGEUR DE COLONNE
   46rem = 736px → lignes pleines mesurées jusqu'à 86 signes.
   41rem = 656px → environ 72 signes à 18px (confort : 65-75).
   La largeur « large » (76rem) ne bouge pas : les cartes et la section
   photo gardent leur pleine mesure.
   -------------------------------------------------------------------------- */

body.page-id-35{
  --wp--style--global--content-size:41rem;
}


/* --------------------------------------------------------------------------
   4 · CONTRASTE DE LA TERRACOTTA
   #D4694B sur crème = 3,32:1, sous le seuil AA de 4,5:1 — or c'est la
   couleur des textes de 13 à 15px (surtitres, titres de carte).
   #B5492C : même teinte, même saturation, luminosité 56% → 44%. 4,98:1.
   Portée limitée aux fonds crème : sur les aplats sombres et les grands
   textes, la terracotta d'origine reste.
   -------------------------------------------------------------------------- */

.page-id-35 .has-creme-background-color .has-terracotta-color,
.page-id-35 .has-creme-fonce-background-color .has-terracotta-color{
  color:#B5492C;
}


/* --------------------------------------------------------------------------
   5 · LISIBILITÉ SUR PHOTO
   « Ici, j'invite à… » est composé en crème sur un feuillage aussi clair
   que lui, sans voile, et les cartes posées dessus sont à 0,70 d'opacité
   pour un texte de 15px.
   Le voile ne concerne que les sections où le texte est posé directement
   sur la photo. Le :not() écarte les sections en style « carte osmOse »
   comme « Mon intention », où un panneau porte le texte : leur photo n'a
   rien à assombrir, et l'assombrir lui retire sa lumière.
   -------------------------------------------------------------------------- */

.page-id-35 .wp-block-group[style*="background-image"]:not(.is-style-osmose-carte){
  position:relative;
  isolation:isolate;
}

.page-id-35 .wp-block-group[style*="background-image"]:not(.is-style-osmose-carte)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,
    rgba(14,11,12,0.62) 0%,
    rgba(14,11,12,0.42) 45%,
    rgba(14,11,12,0.62) 100%);
}

.page-id-35 .wp-block-group[style*="background-image"]:not(.is-style-osmose-carte) > *{
  position:relative;
  z-index:1;
}

.page-id-35 .wp-block-group[style*="background-image"]:not(.is-style-osmose-carte) .wp-block-column{
  background-color:rgba(251,247,241,0.94);
}


/* --------------------------------------------------------------------------
   6 · LE GRAS : GRAISSE ET COULEUR
   700 → 600 : l'emphase reste, l'effet surligneur tombe.
   #241A18 → #3A0A0E : le bordeaux nuit des titres. Chaud, tiré de la
   charte, et assez sombre pour rester distinct des segments déjà colorés
   en bordeaux #6E1216 dans les paragraphes.
   Les mots marqués restent exactement les mêmes.
   -------------------------------------------------------------------------- */

.page-id-35 .entry-content p strong,
.page-id-35 .entry-content li strong{
  font-weight:600;
  color:#3A0A0E;
}

/* Variante bordeaux franc. À n'utiliser que dans les paragraphes où
   aucun segment n'est déjà coloré : sinon les deux marquages se
   confondent et le paragraphe entier vire au bordeaux. */
/*
.page-id-35 .entry-content p strong,
.page-id-35 .entry-content li strong{
  font-weight:600;
  color:#6E1216;
}
*/


/* --------------------------------------------------------------------------
   7 · SECTION « MON INTENTION »
   Le groupe porte en style inline font-weight:1000 et font-style:italic.
   Aucune police ne monte à 1000 : le navigateur épaissit les contours
   lui-même, et penche les lettres lui-même faute de fonte italique.
   Deux simulations superposées — d'où l'aspect empâté.

   Le style inline est sur le groupe, pas sur les paragraphes : ceux-ci
   ne font qu'en hériter. Une valeur héritée cède devant toute valeur
   posée directement, donc une règle sur les enfants suffit, sans
   !important.
   -------------------------------------------------------------------------- */

.page-id-35 .is-style-osmose-carte p,
.page-id-35 .is-style-osmose-carte li{
  font-weight:400;
  font-style:italic;      /* vraie italique une fois les fontes installées */
                          /* passer à normal pour une section droite */
}

/* Une étiquette en capitales espacées ne s'italise pas */
.page-id-35 .is-style-osmose-carte .osm-surtitre{
  font-weight:600;
  font-style:normal;
}

/* Le panneau en verre dépoli. Le flou garde la couleur et la lumière de
   la photo et en efface le grain : c'est lui qui permet de descendre à
   74% d'opacité sans perdre la lisibilité (texte à environ 8:1).

   Le !important est obligatoire ici, et c'est le seul de tout ce CSS :
   WordPress écrit lui-même ses classes de couleur sous la forme
   .has-creme-fonce-background-color{ background-color:… !important }.
   Sans lui, le fond reste opaque quelle que soit la spécificité.

   Le padding corrige l'autre point : le panneau est à 0 de marge
   intérieure, le texte touche ses quatre bords. */
.page-id-35 .is-style-osmose-carte .has-creme-fonce-background-color{
  background-color:rgba(243,234,223,0.74) !important;
  backdrop-filter:blur(12px) saturate(1.08);
  -webkit-backdrop-filter:blur(12px) saturate(22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.40);
  padding:2rem 2.25rem;
}

/* Navigateurs sans flou d'arrière-plan : on remonte l'opacité */
@supports not (backdrop-filter:blur(2px)){
  .page-id-35 .is-style-osmose-carte .has-creme-fonce-background-color{
    background-color:rgba(243,234,223,0.92) !important;
  }
}

/* La barre « Mon intention » déborde le panneau de 62px : son padding
   horizontal s'ajoute à sa largeur au lieu d'être compris dedans.
   border-box aligne exactement les deux blocs. */
.page-id-35 .is-style-osmose-carte .osm-surtitre{
  box-sizing:border-box;
}

/* Formulaire de contact osmOse
   Entièrement porté par .osm-form : ne peut atteindre
   rien d'autre sur le site, sur aucune page. */

.osm-form{
  --f-trait:#E3D8CB;
  --f-actif:#6E1216;
  --f-label:#B5492C;
  --f-encre:#241A18;
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  max-width:41rem;
  margin-inline:auto;
  font-family:var(--wp--preset--font-family--texte);
}
.osm-form p{ margin:0; }

/* Prénom et e-mail côte à côte au-delà de 34rem */
.osm-form__duo{ display:grid; gap:1.75rem; }
@media (min-width:34rem){
  .osm-form__duo{ grid-template-columns:1fr 1fr; }
}

/* Libellés — même style d'étiquette que les pages */
.osm-form .osm-champ__label{
  display:block;
  font-size:0.8125rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--f-label);
  margin-bottom:0.55rem;
}
.osm-form .osm-champ__fac{
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:none;
  color:#7A6A63;
  font-size:0.75rem;
}

/* Champs — filet bas plutôt que boîte */
.osm-form input[type="text"],
.osm-form input[type="email"],
.osm-form input[type="tel"],
.osm-form textarea{
  width:100%;
  font-family:inherit;
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--f-encre);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--f-trait);
  border-radius:0;
  padding:0.55rem 0.1rem;
  transition:border-color .18s ease, box-shadow .18s ease,
             background-color .18s ease;
}
.osm-form textarea{
  background:rgba(243,234,223,0.5);
  border:1px solid var(--f-trait);
  border-radius:3px;
  padding:0.9rem 1rem;
  resize:vertical;
}
.osm-form input[type="text"]:focus,
.osm-form input[type="email"]:focus,
.osm-form input[type="tel"]:focus{
  outline:none;
  border-bottom-color:var(--f-actif);
  box-shadow:0 1px 0 var(--f-actif);
  background-color:rgba(244,228,222,0.3);
}
.osm-form textarea:focus{
  outline:none;
  border-color:var(--f-actif);
  box-shadow:inset 0 0 0 1px var(--f-actif);
  background-color:rgba(244,228,222,0.3);
}
.osm-form ::placeholder{ color:#B3A69D; opacity:1; }

/* Objet de la demande — pastilles, pas un menu déroulant */
.osm-form .osm-objet{ border:0; padding:0; margin:0; min-width:0; }
.osm-form .osm-objet legend{ padding:0; }
.osm-form .wpcf7-radio{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.osm-form .wpcf7-radio .wpcf7-list-item{ margin:0; }
.osm-form .wpcf7-radio label{ display:block; cursor:pointer; }
.osm-form .wpcf7-radio input[type="radio"]{
  position:absolute; opacity:0; width:0; height:0;
}
.osm-form .wpcf7-radio .wpcf7-list-item-label{
  display:inline-block;
  padding:0.55rem 1.15rem;
  border:1px solid var(--f-trait);
  border-radius:999px;
  font-size:0.9375rem;
  line-height:1.4;
  color:var(--f-encre);
  transition:background-color .18s ease, border-color .18s ease,
             color .18s ease;
}
.osm-form .wpcf7-radio label:hover .wpcf7-list-item-label{
  border-color:#C9B8A6;
}
.osm-form .wpcf7-radio input[type="radio"]:checked
  + .wpcf7-list-item-label{
  background:var(--f-actif);
  border-color:var(--f-actif);
  color:#FBF7F1;
}
.osm-form .wpcf7-radio input[type="radio"]:focus-visible
  + .wpcf7-list-item-label{
  outline:2px solid #3A0A0E;
  outline-offset:2px;
}

/* Consentement */
.osm-form .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.osm-form .wpcf7-acceptance label{
  display:flex; gap:0.75rem; align-items:flex-start; cursor:pointer;
}
.osm-form .wpcf7-acceptance .wpcf7-list-item-label{
  font-size:0.9375rem; line-height:1.55; color:#4A3A34;
}
.osm-form input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:1.15rem;
  height:1.15rem;
  margin:0.22rem 0 0;
  border:1px solid var(--f-trait);
  border-radius:3px;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-content:center;
  transition:background-color .18s ease, border-color .18s ease;
}
.osm-form input[type="checkbox"]::after{
  content:"";
  width:0.58rem;
  height:0.32rem;
  border-left:2px solid #FBF7F1;
  border-bottom:2px solid #FBF7F1;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .15s ease;
}
.osm-form input[type="checkbox"]:checked{
  background:var(--f-actif);
  border-color:var(--f-actif);
}
.osm-form input[type="checkbox"]:checked::after{
  transform:rotate(-45deg) scale(1);
}
.osm-form input[type="checkbox"]:focus-visible{
  outline:2px solid #3A0A0E;
  outline-offset:2px;
}

/* Piège à robots — invisible à l'écran, lu par les lecteurs d'écran
   comme un champ à laisser vide */
.osm-form .osm-piege{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Envoi */
.osm-form .osm-envoi{ margin-top:0.25rem; }
.osm-form input[type="submit"]{
  font-family:inherit;
  font-size:0.9375rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:#FBF7F1;
  background:var(--f-actif);
  border:0;
  border-radius:999px;
  padding:0.95rem 2.4rem;
  cursor:pointer;
  transition:background-color .18s ease;
}
.osm-form input[type="submit"]:hover{ background:#3A0A0E; }
.osm-form input[type="submit"]:focus-visible{
  outline:2px solid #3A0A0E;
  outline-offset:3px;
}

/* Messages de Contact Form 7 */
.osm-form .wpcf7-not-valid-tip{
  color:#B0302F; font-size:0.8125rem; margin-top:0.4rem;
}
.osm-form .wpcf7-not-valid{ border-color:#B0302F; }
.wpcf7 form .wpcf7-response-output{
  margin:1.75rem 0 0;
  padding:1rem 1.25rem;
  border:1px solid #E3D8CB;
  border-left:3px solid #9DAA92;
  border-radius:3px;
  background:rgba(220,226,214,0.35);
  font-size:0.9375rem;
  color:#241A18;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
  border-left-color:#B0302F;
  background:rgba(244,228,222,0.5);
}

@media (prefers-reduced-motion:reduce){
  .osm-form *{ transition:none !important; }
}
/* Formulaire de contact osmOse
   Le pare-feu applicatif d'OVH refuse toute balise HTML postée depuis
   l'éditeur de Contact Form 7. Le modèle ne contient donc que des
   étiquettes CF7 et du texte, et tout le dessin s'accroche aux classes
   que CF7 génère lui-même.

   Portée : .wpcf7-form. Ne touche que les formulaires Contact Form 7.
   Remplace intégralement les anciennes règles en .osm-form. */

.wpcf7-form{
  --f-trait:#E3D8CB;
  --f-actif:#6E1216;
  --f-label:#B5492C;
  --f-encre:#241A18;
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  max-width:41rem;
  margin-inline:auto;
  font-family:var(--wp--preset--font-family--texte);
}

/* Chaque champ est un paragraphe, et le texte de ce paragraphe est le
   libellé : c'est ce qui permet de se passer entièrement de balises. */
.wpcf7-form > p{
  margin:0;
  font-size:0.8125rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  line-height:1.45;
  color:var(--f-label);
}

/* Le saut de ligne automatique devient inutile : on passe le champ
   en bloc, juste en dessous de son libellé. */
.wpcf7-form br{ display:none; }
.wpcf7-form .wpcf7-form-control-wrap{ display:block; margin-top:0.55rem; }

/* Champs — filet bas plutôt que boîte.
   Chaque champ reprend sa propre taille et sa propre couleur, sinon il
   hériterait des petites capitales du libellé. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
  display:block;
  width:100%;
  font-family:inherit;
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.6;
  letter-spacing:normal;
  text-transform:none;
  color:var(--f-encre);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--f-trait);
  border-radius:0;
  padding:0.55rem 0.1rem;
  transition:border-color .18s ease, box-shadow .18s ease,
             background-color .18s ease;
}
.wpcf7-form textarea{
  background:rgba(243,234,223,0.5);
  border:1px solid var(--f-trait);
  border-radius:3px;
  padding:0.9rem 1rem;
  resize:vertical;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus{
  outline:none;
  border-bottom-color:var(--f-actif);
  box-shadow:0 1px 0 var(--f-actif);
  background-color:rgba(244,228,222,0.3);
}
.wpcf7-form textarea:focus{
  outline:none;
  border-color:var(--f-actif);
  box-shadow:inset 0 0 0 1px var(--f-actif);
  background-color:rgba(244,228,222,0.3);
}

/* Libellés des choix — remis en bas de casse */
.wpcf7-form .wpcf7-list-item-label{
  display:inline-block;
  font-size:0.9375rem;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  line-height:1.4;
  color:var(--f-encre);
}

/* Objet de la demande — pastilles, pas un menu déroulant */
.wpcf7-form .wpcf7-radio{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item{ margin:0; }
.wpcf7-form .wpcf7-radio label{ display:block; cursor:pointer; }
.wpcf7-form .wpcf7-radio input[type="radio"]{
  position:absolute; opacity:0; width:0; height:0;
}
.wpcf7-form .wpcf7-radio .wpcf7-list-item-label{
  padding:0.55rem 1.15rem;
  border:1px solid var(--f-trait);
  border-radius:999px;
  transition:background-color .18s ease, border-color .18s ease,
             color .18s ease;
}
.wpcf7-form .wpcf7-radio label:hover .wpcf7-list-item-label{
  border-color:#C9B8A6;
}
.wpcf7-form .wpcf7-radio input[type="radio"]:checked
  + .wpcf7-list-item-label{
  background:var(--f-actif);
  border-color:var(--f-actif);
  color:#FBF7F1;
}
.wpcf7-form .wpcf7-radio input[type="radio"]:focus-visible
  + .wpcf7-list-item-label{
  outline:2px solid #3A0A0E;
  outline-offset:2px;
}

/* Consentement */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.wpcf7-form .wpcf7-acceptance label{
  display:flex; gap:0.75rem; align-items:flex-start; cursor:pointer;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label{
  line-height:1.55; color:#4A3A34;
}
.wpcf7-form input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:1.15rem;
  height:1.15rem;
  margin:0.22rem 0 0;
  border:1px solid var(--f-trait);
  border-radius:3px;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-content:center;
  transition:background-color .18s ease, border-color .18s ease;
}
.wpcf7-form input[type="checkbox"]::after{
  content:"";
  width:0.58rem;
  height:0.32rem;
  border-left:2px solid #FBF7F1;
  border-bottom:2px solid #FBF7F1;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .15s ease;
}
.wpcf7-form input[type="checkbox"]:checked{
  background:var(--f-actif);
  border-color:var(--f-actif);
}
.wpcf7-form input[type="checkbox"]:checked::after{
  transform:rotate(-45deg) scale(1);
}
.wpcf7-form input[type="checkbox"]:focus-visible{
  outline:2px solid #3A0A0E;
  outline-offset:2px;
}

/* Piège à robots — repéré par le data-name que CF7 pose sur le champ */
.wpcf7-form p:has(.wpcf7-form-control-wrap[data-name="piege"]){
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Envoi */
.wpcf7-form input[type="submit"]{
  font-family:inherit;
  font-size:0.9375rem;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:none;
  color:#FBF7F1;
  background:var(--f-actif);
  border:0;
  border-radius:999px;
  padding:0.95rem 2.4rem;
  cursor:pointer;
  transition:background-color .18s ease;
}
.wpcf7-form input[type="submit"]:hover{ background:#3A0A0E; }
.wpcf7-form input[type="submit"]:focus-visible{
  outline:2px solid #3A0A0E;
  outline-offset:3px;
}

/* Messages de Contact Form 7 */
.wpcf7-form .wpcf7-not-valid-tip{
  color:#B0302F;
  font-size:0.8125rem;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  margin-top:0.4rem;
}
.wpcf7-form .wpcf7-not-valid{ border-color:#B0302F; }
.wpcf7-form .wpcf7-response-output{
  margin:0;
  padding:1rem 1.25rem;
  border:1px solid #E3D8CB;
  border-left:3px solid #9DAA92;
  border-radius:3px;
  background:rgba(220,226,214,0.35);
  font-size:0.9375rem;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  color:#241A18;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output{
  border-left-color:#B0302F;
  background:rgba(244,228,222,0.5);
}

@media (prefers-reduced-motion:reduce){
  .wpcf7-form *{ transition:none !important; }
}



/* ==========================================================================
   osmOse — billetterie BilletWeb, ancres, et contraste de la terracotta
   À ajouter à la fin de wp-content/themes/osmose/style.css
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · La billetterie BilletWeb
   Le script de BilletWeb remplace le lien par un cadre et lui envoie sa
   hauteur réelle : il n'y a rien à régler à la main. On se contente de
   cadrer la largeur et d'arrondir les angles comme les autres cartes.
   -------------------------------------------------------------------------- */

.osm-billetweb{
  max-width:64rem;
  margin-inline:auto;
}

.osm-billetweb iframe{
  display:block;
  width:100%;
  border:0;
  border-radius:14px;
  background:var(--wp--preset--color--creme);
}

/* Tant que le script n'a pas pris la main — et s'il ne charge jamais —
   le lien reste un lien. On lui donne l'aspect d'un bouton pour qu'il ne
   paraisse pas cassé, et la billetterie s'ouvre alors dans un onglet. */
.osm-billetweb a.shop_frame{
  display:inline-block;
  font-family:var(--wp--preset--font-family--texte);
  font-size:0.9375rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:#FBF7F1;
  background:var(--wp--preset--color--bordeaux);
  border-radius:999px;
  padding:0.95rem 2.4rem;
  text-decoration:none;
}

.osm-billetweb a.shop_frame:hover{
  background:var(--wp--preset--color--bordeaux-nuit);
}

.osm-billetweb__note{
  margin:0;
  font-size:0.875rem;
  color:var(--wp--preset--color--rouge);
}


/* --------------------------------------------------------------------------
   2 · Le saut vers la section des stages
   Le bouton « Voir les dates » pointe sur #stages. Sans cette marge,
   l'en-tête de la section se retrouverait collé en haut de l'écran.
   -------------------------------------------------------------------------- */

#stages{
  scroll-margin-top:2rem;
}

html{
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}


/* --------------------------------------------------------------------------
   3 · Contraste de la terracotta, étendu à tout le site
   #D4694B sur crème donne 3,32:1, sous le seuil AA de 4,5:1 — or c'est la
   couleur des surtitres, donc des plus petits textes du site. #B5492C
   garde exactement la teinte et la saturation, seule la luminosité
   descend de 56% à 44%. Résultat : 4,98:1.
   Portée limitée aux fonds clairs : sur les aplats sombres et les grands
   textes, la terracotta d'origine reste.
   -------------------------------------------------------------------------- */

.has-creme-background-color .has-terracotta-color,
.has-creme-fonce-background-color .has-terracotta-color,
.has-rose-poudre-background-color .has-terracotta-color{
  color:#B5492C;
}


/* Les surtitres tirent leur couleur d'une règle du thème et non d'une
   classe de l'éditeur : c'est cette règle-là qu'il faut reprendre.
   Placée après elle dans la feuille, celle-ci l'emporte. */
.osm-surtitre{ color:#B5492C; }


/* ==========================================================================
   osmOse — corrections de la page d'accueil
   À ajouter à la fin de wp-content/themes/osmose/style.css

   Tout est porté par body.home : rien de ceci n'atteint une autre page.
   Quand le résultat te convient, tu retires les « body.home » et les
   corrections valent pour tout le site.

   Relevés du 9 septembre 2026, sur la page en ligne.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · LES BANDES EN DÉGRADÉ — le problème le plus sérieux

   Deux bandes de la page portent un dégradé orangé sous leur couleur de
   fond, et un texte pâle par-dessus. Mesures :

   « Sans dogme. Sans performance… »  vieux rose #E3C3B8 sur le corail
   #EE8250 du dégradé : 1,59:1.
   « Consentement · Respect · … »     rose poudré #F4E4DE sur le même
   corail : 2,05:1, en 15 px.
   « Éros comme boussole… »           crème foncé #F3EADF sur corail :
   2,15:1, en 32 px.

   Le seuil est de 4,5:1 pour un texte courant, 3:1 pour un grand texte.
   Les trois échouent. À l'œil, ce sont des textes clairs posés sur un
   orange clair : ils se dissolvent dans le fond, surtout en plein jour
   sur un écran de téléphone.

   Le correctif ne touche ni ta palette ni tes textes : il glisse un voile
   bordeaux nuit entre le dégradé et le texte. Le dégradé garde sa chaleur
   et sa direction, il s'assombrit seulement.
   -------------------------------------------------------------------------- */

/* La bande sauge, celle des valeurs et des négations.
   Voile à 0,42 : le corail devient une terracotta profonde, et le rose
   poudré de 15 px remonte à 4,8:1. */
body.home .osm-cadre{
  position:relative;
  isolation:isolate;
}
body.home .osm-cadre::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(58,10,14,0.42);
}
body.home .osm-cadre > *{
  position:relative;
  z-index:1;
}

/* La bande du manifeste. Le texte y fait 32 px, le seuil est donc de 3:1
   et un voile plus léger suffit : 0,28 le porte à 3,6:1. */
body.home .wp-block-group:has(> .osm-manifeste){
  position:relative;
  isolation:isolate;
}
body.home .wp-block-group:has(> .osm-manifeste)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(58,10,14,0.28);
}
body.home .wp-block-group:has(> .osm-manifeste) > *{
  position:relative;
  z-index:1;
}

/* Variante, si tu trouves les bandes trop sombres : plutôt qu'assombrir
   le fond, on fonce le texte. Le rendu est très différent — texte
   bordeaux nuit sur dégradé clair — mais il passe largement le seuil.
   Décommenter alors ceci, et commenter les six règles ci-dessus.

   body.home .osm-cadre__valeurs,
   body.home .osm-negations{ color:#3A0A0E; }
*/


/* --------------------------------------------------------------------------
   2 · LES ÉTIQUETTES DES CARTES

   ÉCOUTER, COMPRENDRE, EXPLORER, CRÉER, PLUS DE CLARTÉ, etc. sont en
   terracotta d'origine #D4694B, soit 3,32:1 sur leur panneau crème —
   sous le seuil, alors qu'elles font 15 px.

   Leur interligne est aussi à 1,12, ce qui les écrase dès qu'elles
   passent sur deux lignes, ce qui est le cas de « Plus de confiance ».
   -------------------------------------------------------------------------- */

body.home .osm-mots h3.wp-block-heading{
  color:#B5492C;          /* même teinte, même saturation, 4,98:1 */
  font-size:0.8125rem;    /* 13 px, comme les surtitres du site */
  line-height:1.45;       /* respire sur deux lignes */
  letter-spacing:0.16em;
  margin-bottom:0.4em;
}

/* Une étiquette ne peut pas faire la même taille que la légende qu'elle
   surmonte : les deux étaient à 15 px. La légende monte à 16. */
body.home .osm-mots p{
  font-size:1rem;
  line-height:1.6;
}


/* --------------------------------------------------------------------------
   3 · LES TITRES DES CARTES VISUELLES

   « Accompagnement individuel » est en noir pur #000000. Le noir pur
   n'existe nulle part dans ta charte : tes titres sont en bordeaux nuit
   #3A0A0E, tes textes en encre #241A18. Sur une photo chaude, le noir
   pur fait un trou froid.

   Sa graisse est aussi à 500 quand la carte voisine, « Accompagnement de
   couple », est à 400. Deux cartes côte à côte, deux traitements.
   -------------------------------------------------------------------------- */

body.home .osm-carte__visuel h3.wp-block-heading{
  color:#3A0A0E;
  font-weight:400;
}


/* --------------------------------------------------------------------------
   4 · DÉTAILS TYPOGRAPHIQUES

   L'approche négative de −0,1 px sur le texte courant ne produit rien de
   perceptible à 16 px : c'est 0,006 em. Elle est retirée. Sur les grands
   titres, l'approche négative garde tout son sens et n'est pas touchée.
   -------------------------------------------------------------------------- */

body.home .entry-content p,
body.home .entry-content li{
  letter-spacing:normal;
}


/* --------------------------------------------------------------------------
   5 · LA POLICE DE TEXTE — en attente d'une action de ta part

   La famille « texte » du thème commence toujours par DM Sans puis
   Montserrat. Aucune des deux n'est chargée par le site : j'ai vérifié,
   elles sont absentes. Tout le texte de l'accueil s'affiche donc dans la
   police d'interface du visiteur — Segoe UI chez toi, San Francisco sur
   Mac, Roboto sur Android.

   C'est, de loin, le plus gros levier restant sur l'apparence du site.
   Et il ne se règle pas en CSS : il faut installer la police.

   Éditeur de site → Styles → Typographie → Polices → Ajouter des polices
   → Google Fonts → Work Sans. Coche les graisses 400, 500, 600 et leurs
   italiques. WordPress télécharge les fichiers et les sert depuis ton
   serveur : rien ne part chez Google.

   Une fois installée, décommente ces trois lignes. Tout le site suit,
   pas seulement l'accueil.
*/
:root{
  --wp--preset--font-family--texte:
    "Work Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* ==========================================================================
   osmOse — page d'accueil, mise au propre typographique
   À ajouter à la fin de wp-content/themes/osmose/style.css

   Tout est porté par body.home. Aucune autre page n'est touchée.
   Chaque règle indique la valeur relevée qui l'a motivée.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · LES INTERLIGNES DES GRANDS TEXTES

   Relevé : « L'univers d'osmOse » est en 46 px avec un interligne de
   78 px, soit 1,70. C'est l'interligne d'un paragraphe appliqué à une
   ligne d'affichage : les mots flottent, la ligne perd sa tenue.

   À l'inverse, le manifeste « Éros comme boussole » est en 32 px avec un
   interligne de 34,5 px, soit 1,08 : quand il passe sur trois lignes,
   elles se touchent presque.

   Règle générale : plus le corps est grand, plus l'interligne se resserre.
   -------------------------------------------------------------------------- */

body.home .osm-surtitre.has-xxxl-font-size{
  line-height:1.12;
  letter-spacing:-0.01em;
}

body.home .osm-manifeste{
  line-height:1.32;
  letter-spacing:-0.008em;
}

body.home .osm-chapo{
  line-height:1.4;
}


/* --------------------------------------------------------------------------
   2 · LES TITRES DES TROIS CARTES

   Relevé : « Accompagnement individuel » est un h3 en Cormorant 25,5 px
   graisse 500. « Accompagnement de couple » est un paragraphe en
   Cormorant 24,6 px graisse 400. « Ateliers & stages » est un paragraphe
   en sans-serif 24,6 px.

   Trois cartes alignées, trois traitements différents pour un rôle
   identique. C'est ce genre d'écart qui fait qu'une page paraît
   bricolée sans qu'on sache dire pourquoi.
   -------------------------------------------------------------------------- */

body.home .wp-block-cover h3.wp-block-heading,
body.home .wp-block-cover p.has-large-font-size{
  font-family:var(--wp--preset--font-family--display) !important;
  font-weight:400;
  font-size:clamp(1.45rem, 1.2rem + 0.9vw, 1.75rem);
  line-height:1.2;
  letter-spacing:-0.01em;
}

/* Le !important est nécessaire pour un seul de ces trois titres :
   WordPress écrit ses classes de police avec !important, et « Ateliers &
   stages » porte une classe de famille explicite. */


/* --------------------------------------------------------------------------
   3 · LE CORPS DE TEXTE

   Relevé : les paragraphes courants sont tantôt à 15 px, tantôt à
   16,4 px. Les listes sont à 15 px avec un interligne de 28,5 px, soit
   1,90 — un espacement de mode d'emploi, qui casse le bloc en lignes
   isolées au lieu d'en faire un paragraphe.
   -------------------------------------------------------------------------- */

body.home .entry-content li:not([class*="has-"]){
  font-size:1rem;
  line-height:1.65;
}

body.home .entry-content ul,
body.home .entry-content ol{
  padding-left:1.2em;
}

body.home .entry-content li + li{
  margin-top:0.35em;
}


/* --------------------------------------------------------------------------
   4 · LA DÉFINITION DU HERO

   Relevé : « Osmose : nom féminin, du grec ôsmos… » est en Cormorant
   16,4 px, en crème sur la photo. Cormorant est une police à fort
   contraste : sous 18 px, et par-dessus une image, ses déliés
   disparaissent. Un demi-point d'approche positive et un corps un peu
   plus grand la rendent lisible sans la rendre bavarde.
   -------------------------------------------------------------------------- */

body.home .osm-definition{
  font-size:1.15rem;
  line-height:1.6;
  letter-spacing:0.01em;
}


/* --------------------------------------------------------------------------
   5 · LES FINS DE LIGNE

   text-wrap:balance répartit les mots d'un titre sur ses lignes au lieu
   de laisser un mot seul en bas. text-wrap:pretty fait la même chose,
   plus discrètement, sur la dernière ligne des paragraphes.

   Deux propriétés que le navigateur applique tout seul, et qui font une
   grande partie de la différence entre une page nette et une page qui
   part en lambeaux à droite.
   -------------------------------------------------------------------------- */

body.home .entry-content h1,
body.home .entry-content h2,
body.home .entry-content h3,
body.home .entry-content h4,
body.home .osm-chapo,
body.home .osm-manifeste,
body.home .osm-negations,
body.home .wp-block-cover p.has-large-font-size{
  text-wrap:balance;
}

body.home .entry-content p{
  text-wrap:pretty;
}


/* --------------------------------------------------------------------------
   6 · LE PARAGRAPHE EN FRAUNCES — à toi de trancher

   Relevé : « Apprendre et s'autoriser à : » est le seul texte de la page
   en Fraunces. Tout le reste des textes d'accent est en Cormorant. Ou
   bien c'est un choix délibéré et il faut l'assumer ailleurs aussi, ou
   bien c'est un reste d'essai et il détonne.

   Je ne tranche pas à ta place. Pour l'aligner sur le reste, retire les
   marqueurs de commentaire ci-dessous.
*/
   body.home .entry-content p.has-fraunces-font-family{
     font-family:var(--wp--preset--font-family--display) !important;
   }
  
/* ==========================================================================
   osmOse — page « À propos »
   À coller à la fin de wp-content/themes/osmose/style.css,
   ou dans Éditeur de site → Styles → icône ⋮ → CSS supplémentaire.

   PORTÉE
   Tout est porté par .osm-apropos, exactement comme .wpcf7-form pour le
   formulaire : ces règles ne peuvent atteindre aucune autre page du site.
   Rien du thème n'est redéfini globalement.

   POUR REVENIR EN ARRIÈRE
   Supprimer ce bloc. Aucune de ces règles ne touche au contenu.
   ========================================================================== */

/* ==========================================================================
   osmOse — page « À propos »
   Tout est porté par .osm-apropos : comme pour .wpcf7-form, ce bloc ne peut
   atteindre aucune autre page du site, et aucune règle du thème n'est
   redéfinie globalement.

   Les couleurs et les polices sont lues dans les variables du thème
   (--wp--preset--*). La valeur de repli écrite dans chaque var() est le hex
   relevé dans style.css : la page s'affiche donc à l'identique dans
   WordPress et hors WordPress.
   ========================================================================== */

.osm-apropos{
  /* Palette : reprise stricte du thème. Aucune couleur inventée. */
  --a-creme:        var(--wp--preset--color--creme,        #FBF7F1);
  --a-creme-fonce:  var(--wp--preset--color--creme-fonce,  #F3EADF);
  --a-vieux-rose:   var(--wp--preset--color--vieux-rose,   #E3C3B8);
  --a-rose-poudre:  var(--wp--preset--color--rose-poudre,  #F4E4DE);
  --a-terracotta:   var(--wp--preset--color--terracotta,   #D4694B);
  --a-corail:       var(--wp--preset--color--corail,       #EE8250);
  --a-bordeaux:     var(--wp--preset--color--bordeaux,     #6E1216);
  --a-nuit:         var(--wp--preset--color--bordeaux-nuit,#3A0A0E);
  --a-encre:        var(--wp--preset--color--encre,        #241A18);
  --a-sauge:        var(--wp--preset--color--sauge,        #9DAA92);

  /* Terracotta corrigée : #D4694B sur crème ne donne que 3,32:1. Même teinte,
     même saturation, luminosité 56% → 44%. C'est la correction déjà appliquée
     dans style.css, reprise ici pour les petits textes. */
  --a-terracotta-aa: #B5492C;

  --a-display: var(--wp--preset--font-family--display,
                "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif);
  --a-texte:   var(--wp--preset--font-family--texte,
                "Work Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

  /* 41rem ≈ 72 signes à 17px. C'est la largeur de colonne déjà retenue pour
     « Mon approche ». Les encadrés respirent 2,5rem de plus. */
  --a-colonne: 41rem;

  font-family: var(--a-texte);
  color: var(--a-encre);
  background: var(--a-creme);
  padding-block: 0 4rem;
}

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

/* --------------------------------------------------------------------------
   1 · La colonne
   -------------------------------------------------------------------------- */

.osm-apropos__col{
  max-width: var(--a-colonne);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Deux blocs seulement débordent la colonne, et seulement au-delà de 52rem :
   le semis de Multifacettes et la respiration finale. Tous les autres bords
   gauches du texte restent alignés — c'est ce qui tient la page. */
@media (min-width: 52rem){
  .osm-apropos__multi,
  .osm-apropos__final{ margin-inline: -2.5rem; }
}

/* --------------------------------------------------------------------------
   2 · Typographie
   Le gras passe à 600 et prend le bordeaux nuit des titres : à 700 en noir,
   l'emphase virait au surligneur. C'est la règle déjà en place sur le site.
   -------------------------------------------------------------------------- */

.osm-apropos p{
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

.osm-apropos p:last-child{ margin-bottom: 0; }

.osm-apropos strong{
  font-weight: 600;
  color: var(--a-nuit);
}

.osm-apropos h1,
.osm-apropos h2,
.osm-apropos h3{
  font-family: var(--a-display);
  color: var(--a-nuit);
  text-wrap: balance;
  margin: 0;
  font-weight: 500;
}

.osm-apropos h1{
  font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.osm-apropos h2{
  font-size: clamp(1.85rem, 1.45rem + 1.7vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.008em;
  margin-bottom: 1.6rem;
}

.osm-apropos h3{
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  line-height: 1.3;
  margin: 2.6rem 0 1rem;
}

/* L'emoji ne se compose pas comme une lettre : il est ramené à la hauteur
   d'x du titre et décalé de la ligne de base, sinon il fait un trou. */
.osm-apropos .emo{
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size: 0.78em;
  line-height: 1;
  margin-right: 0.38em;
  vertical-align: 0.02em;
  display: inline-block;
}

/* Le O central d'osmOse, en terracotta, comme partout ailleurs sur le site. */
.osm-apropos .osm-o{ color: var(--a-terracotta); }

/* --------------------------------------------------------------------------
   3 · Titre de page
   -------------------------------------------------------------------------- */

.osm-apropos__titre{
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
  text-align: center;
}

.osm-apropos__titre h1{ text-transform: none; }

/* --------------------------------------------------------------------------
   4 · Les séparateurs
   Les filets gris de l'ébauche sont remplacés par une vaguelette d'étoiles
   filantes : une courbe très pâle, trois comètes posées dessus. Dessin
   vectoriel, donc net à toutes les tailles et sans requête d'image.
   -------------------------------------------------------------------------- */

.osm-apropos__vague{
  display: block;
  width: min(320px, 70%);
  height: auto;
  margin: clamp(2.75rem, 6vw, 4.25rem) auto;
  overflow: visible;
}

.osm-apropos__vague .courbe{
  fill: none;
  stroke: var(--a-vieux-rose);
  stroke-width: 1;
  stroke-linecap: round;
}

/* Les comètes prennent currentColor : c'est la seule couleur qui franchisse
   le clonage d'un <use>. Une règle posée sur les tracés de <defs> ne les
   atteindrait pas, et ils retomberaient sur le noir par défaut. */
.osm-apropos__vague{ color: var(--a-terracotta); }
.osm-apropos__defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* --------------------------------------------------------------------------
   5 · Les encadrés
   Trois familles seulement, pour que l'encadré garde sa valeur de signal :
   ton sur ton (crème foncé), vert très pâle (sauge), et la respiration finale.
   Le rayon de 22px est celui des cartes du site.
   -------------------------------------------------------------------------- */

.osm-apropos__suite{ margin-top: 2.4rem; }

/* Tous les encadrés reçoivent le semis : il leur faut donc chacun un contexte
   d'empilement propre, et un découpage sur leur propre rayon. */
.osm-apropos__encadre,
.osm-apropos__facettes,
.osm-apropos__multi,
.osm-apropos__final{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.osm-apropos__encadre{
  border-radius: 22px;
  padding: clamp(1.6rem, 4vw, 2.5rem);
  margin-block: 0 0.5rem;
}

/* Ton sur ton : crème foncé sur crème. Pas de bordure — l'écart de valeur
   suffit, une bordure en plus ferait bavard. */
.osm-apropos__encadre--ton{
  background: var(--a-creme-fonce);
}

/* Vert très pâle. La sauge pure serait trop soutenue derrière du texte :
   12% sur le crème donne le vert d'eau de la maquette. */
.osm-apropos__encadre--vert{
  background: color-mix(in srgb, var(--a-sauge) 12%, var(--a-creme));
}

/* Le bloc « L'intime est politique » est en italique dans le document source.
   L'italique est conservé, le gras devient gras italique. */
.osm-apropos__encadre--vert p{
  font-style: italic;
  font-size: 1.09rem;
  line-height: 1.7;
}

.osm-apropos__encadre--vert strong{ font-style: italic; }

/* --------------------------------------------------------------------------
   6 · « Ici, la curiosité suffit. »
   Dans le document source, la seconde moitié de la phrase est composée plus
   grand que la première. C'est une emphase de corps, pas un gras : on la
   rend telle quelle.
   -------------------------------------------------------------------------- */

.osm-apropos .respire{
  font-family: var(--a-display);
  font-size: clamp(1.28rem, 1.12rem + 0.7vw, 1.55rem);
  line-height: 1.15;
  color: var(--a-bordeaux);
  margin-left: 0.22em;
}

.osm-apropos .respire-p{
  margin-bottom: 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7 · Le lien « En savoir plus sur Éros »
   Même trait qui se déploie que les entrées de menu du site.
   -------------------------------------------------------------------------- */

.osm-apropos__lien{
  display: inline-block;
  position: relative;
  margin-top: 0.4rem;
  font-family: var(--a-display);
  font-size: 1.2rem;
  color: var(--a-bordeaux);
  text-decoration: none;
  padding-bottom: 3px;
}

.osm-apropos__lien::after{
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--a-terracotta);
  transition: right .35s ease;
}

.osm-apropos__lien:hover::after,
.osm-apropos__lien:focus-visible::after{ right: 0; }

.osm-apropos__lien .fleche{
  color: var(--a-terracotta);
  display: inline-block;
  transition: transform .3s ease;
}

.osm-apropos__lien:hover .fleche{ transform: translateX(3px); }

/* --------------------------------------------------------------------------
   8 · Les deux sous-titres à puce
   La puce ✦ est sortie du flux : le texte reste aligné même sur deux lignes.
   -------------------------------------------------------------------------- */

.osm-apropos h3.puce{
  position: relative;
  padding-left: 1.7rem;
}

.osm-apropos h3.puce .etoile{
  position: absolute;
  left: 0;
  top: 0.06em;
  color: var(--a-terracotta);
  font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   9 · Multifacettes
   Le fond tient lieu d'emplacement pour la grande image à venir : un lavis de
   plusieurs teintes de la charte, et un semis d'étoiles, fleurs, lunes,
   arbres, soleils et cœurs dessinés au trait — pas des émojis, qui auraient
   fait scrapbook. Opacité basse : c'est une texture, pas un décor.

   Pour poser la photo plus tard : remplacer le background ci-dessous par
   url(...) et retirer le <svg> du semis dans cet encadré-là seulement.
   -------------------------------------------------------------------------- */

.osm-apropos__multi{
  border-radius: 26px;
  padding: clamp(2rem, 5vw, 3.25rem);
  background:
    radial-gradient(120% 90% at 8% 0%,   color-mix(in srgb, var(--a-rose-poudre) 85%, transparent) 0%, transparent 58%),
    radial-gradient(110% 85% at 95% 12%, color-mix(in srgb, var(--a-sauge) 40%, transparent) 0%, transparent 64%),
    radial-gradient(130% 110% at 50% 108%, color-mix(in srgb, var(--a-corail) 30%, transparent) 0%, transparent 62%),
    var(--a-creme-fonce);
}

/* Le semis est posé en z-index négatif dans un contexte d'empilement isolé :
   il passe au-dessus du fond de l'encadré et sous le texte, sans qu'il faille
   envelopper le contenu. Le dessin est partagé, seul le cadrage change. */
.osm-apropos__semis{
  position: absolute;
  inset: -8% -6%;
  width: 112%;
  height: 116%;
  z-index: -1;
  pointer-events: none;
  opacity: .62;
}

/* Multifacettes reste la pièce principale : semis plus présent, et la seule
   dérive de la page. Ailleurs le motif est fixe — un fond qui bouge derrière
   un paragraphe qu'on lit gêne la lecture au lieu de l'accompagner. */
.osm-apropos__multi .osm-apropos__semis{
  opacity: .78;
  animation: osm-derive 46s ease-in-out infinite alternate;
}

@keyframes osm-derive{
  from{ transform: translate3d(0,0,0) scale(1); }
  to  { transform: translate3d(-2.2%, -1.6%, 0) scale(1.04); }
}

.osm-apropos__multi > .osm-apropos__multi-texte{
  position: relative;
  z-index: 1;
}

/* Les quatre affirmations sont les seules phrases de la page à être posées
   une par ligne dans le document source : on garde ce rythme. */
.osm-apropos__multi-texte p{
  font-family: var(--a-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.34;
  color: var(--a-nuit);
  margin-bottom: 0.85em;
}

/* --------------------------------------------------------------------------
   10 · L'encadré des facettes
   Le document source donne une seule ligne de mots séparés par des points
   médians, pas une liste : on garde la ligne, et seuls les points médians
   sont colorés pour aérer la lecture.
   -------------------------------------------------------------------------- */

.osm-apropos__facettes{
  border-radius: 22px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--a-creme-fonce);
  border: 1px solid color-mix(in srgb, var(--a-vieux-rose) 55%, transparent);
  font-family: var(--a-display);
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem);
  line-height: 1.6;
  color: var(--a-nuit);
  text-wrap: balance;
}

.osm-apropos__facettes .sep{
  color: var(--a-terracotta);
  padding-inline: 0.12em;
}

/* --------------------------------------------------------------------------
   11 · Et finalement — la respiration
   Le document demande ici « une grande respiration visuelle ». Elle est faite
   d'espace : marges hautes, lavis très clair, aucune bordure.
   -------------------------------------------------------------------------- */

.osm-apropos__final{
  border-radius: 26px;
  padding: clamp(2.25rem, 6vw, 4rem) clamp(1.6rem, 4vw, 3rem);
  background:
    radial-gradient(90% 130% at 50% -18%, color-mix(in srgb, var(--a-sauge) 30%, transparent) 0%, transparent 72%),
    radial-gradient(80% 90% at 88% 108%, color-mix(in srgb, var(--a-rose-poudre) 70%, transparent) 0%, transparent 70%),
    var(--a-creme);
}

/* --------------------------------------------------------------------------
   12 · L'appel final et les deux boutons
   Pilule, 999px, et les mêmes graisses que les boutons du site. Le bouton
   plein porte le bordeaux, le second se contente d'un filet : deux boutons
   pleins côte à côte se seraient concurrencés.
   -------------------------------------------------------------------------- */

.osm-apropos__cta{
  text-align: center;
  padding-block: clamp(2rem, 5vw, 3rem);
}

.osm-apropos__cta h2{
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.25rem);
  margin-bottom: 1.9rem;
}

.osm-apropos__boutons{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.8rem;
}

.osm-apropos__bouton{
  font-family: var(--a-texte);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.95rem 1.7rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, transform .25s ease;
}

.osm-apropos__bouton .fleche{
  display: inline-block;
  transition: transform .25s ease;
}

.osm-apropos__bouton:hover .fleche{ transform: translateX(4px); }

.osm-apropos__bouton--plein{
  background: var(--a-bordeaux);
  color: var(--a-creme);
  border: 1px solid var(--a-bordeaux);
}

.osm-apropos__bouton--plein:hover{ background: var(--a-nuit); border-color: var(--a-nuit); }

.osm-apropos__bouton--filet{
  background: transparent;
  color: var(--a-bordeaux);
  border: 1px solid color-mix(in srgb, var(--a-bordeaux) 45%, transparent);
}

.osm-apropos__bouton--filet:hover{
  border-color: var(--a-bordeaux);
  background: color-mix(in srgb, var(--a-rose-poudre) 60%, transparent);
}

.osm-apropos__lieu{
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--a-encre) 78%, var(--a-creme));
  margin: 0;
}

.osm-apropos__lieu .emo{ font-size: 1em; margin-right: .25em; }

/* --------------------------------------------------------------------------
   13 · Accessibilité et mouvement
   -------------------------------------------------------------------------- */

.osm-apropos a:focus-visible{
  outline: 2px solid var(--a-corail);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  .osm-apropos__semis{ animation: none; }
  .osm-apropos *{ transition: none !important; }
}

@media (max-width: 600px){
  .osm-apropos__boutons{ flex-direction: column; }
  .osm-apropos__bouton{ justify-content: center; }
}
/* ==========================================================================
   osmOse — page « À propos » · correctif du 19 septembre

   À coller À LA SUITE du bloc .osm-apropos déjà en place, tout à la fin de
   style.css. Ne rien modifier dans le bloc existant : ces quatre règles
   passent après lui dans la cascade et l'emportent.

   Relevés faits sur la page en ligne.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · L'ALIGNEMENT DES DEUX BLOCS LARGES

   Relevé : « Multifacettes ! » et « Et finalement… » débordaient la colonne
   de 2,5 rem, mais leurs titres restaient alignés sur le texte. Le titre
   paraissait donc rentré à l'intérieur de sa propre boîte, d'environ 55 px
   à l'écran.

   L'ampleur recherchée ne valait pas ce désalignement : tous les bords
   gauches reviennent sur la même verticale.
   -------------------------------------------------------------------------- */

@media (min-width: 52rem){
  .osm-apropos__multi,
  .osm-apropos__final{ margin-inline: 0; }
}


/* --------------------------------------------------------------------------
   2 · LE SEMIS

   Il était réglé à 0,62 dans les encadrés de lecture et 0,78 sur
   Multifacettes, valeurs choisies sur un rendu d'essai. Sur le site il ne se
   lit pas. On monte d'un cran net.

   Le texte est en bordeaux nuit sur des fonds très clairs : le contraste
   reste très au-dessus du seuil AA quoi qu'il arrive. C'est donc une
   question de goût, pas de lisibilité. Pour le rendre plus discret,
   redescendre ces deux valeurs ; pour l'effacer, les mettre à 0.
   -------------------------------------------------------------------------- */

.osm-apropos .osm-apropos__semis{ opacity: .8; }
.osm-apropos__multi .osm-apropos__semis{ opacity: .95; }


/* --------------------------------------------------------------------------
   3 · LES DEUX BOUTONS CÔTE À CÔTE

   Les marges intérieures avaient été réglées sur une police de repli plus
   étroite que Work Sans : les deux boutons dépassaient la colonne de
   quelques dizaines de pixels et passaient l'un sous l'autre.

   Pour les garder empilés et centrés — ce qui se défend très bien —
   supprimer simplement ces deux règles.
   -------------------------------------------------------------------------- */

.osm-apropos__boutons{ gap: 0.6rem; }

.osm-apropos__bouton{
  padding: 0.9rem 1.35rem;
  font-size: 0.9rem;
}


/* --------------------------------------------------------------------------
   4 · LA FLÈCHE D'« EN SAVOIR PLUS SUR ÉROS »

   L'espace était écrit dans le texte du lien, et le navigateur l'a avalé en
   fin de ligne. Il est rétabli comme une marge, ce qui ne dépend plus de la
   façon dont l'espace est rendu.
   -------------------------------------------------------------------------- */

.osm-apropos__lien .fleche{ margin-left: 0.3em; }



/* ==========================================================================
   osmOse — DIAGNOSTIC, à retirer une fois la cause trouvée

   Ce bloc est le correctif du 19 septembre, à l'identique, mais forcé.
   Il est à coller tout à la fin de style.css, APRÈS le correctif déjà
   en place — qu'il ne faut pas supprimer.

   POURQUOI CES !important
   Une déclaration !important d'une feuille d'auteur l'emporte sur toute
   déclaration normale d'une autre feuille d'auteur, quel que soit l'ordre
   de chargement. Donc si une seconde copie du CSS traîne dans le champ
   « CSS supplémentaire » — que WordPress injecte APRÈS style.css — ces
   règles passeront quand même devant.

   COMMENT LIRE LE RÉSULTAT
   · Si la page change : la cause est une copie concurrente du CSS.
     Va dans Éditeur de site → Styles → ⋮ → CSS supplémentaire, vide le
     champ de tout ce qui commence par .osm-apropos, puis supprime ce
     bloc de diagnostic. Le correctif normal reprendra la main.
   · Si la page ne change toujours pas : la cascade n'est pas en cause,
     c'est un cache serveur. Le fichier sur le disque n'est alors pas
     celui qui est servi au navigateur.

   Dans les deux cas ce bloc n'a pas vocation à rester : il contredit la
   règle qu'on s'est fixée ailleurs dans cette feuille, où !important est
   réservé aux cas où WordPress l'impose lui-même.
   ========================================================================== */

@media (min-width: 52rem){
  .osm-apropos__multi,
  .osm-apropos__final{ margin-inline: 0 !important; }
}

.osm-apropos .osm-apropos__semis{ opacity: .8 !important; }
.osm-apropos__multi .osm-apropos__semis{ opacity: .95 !important; }

.osm-apropos__boutons{ gap: 0.6rem !important; }

.osm-apropos__bouton{
  padding: 0.9rem 1.35rem !important;
  font-size: 0.9rem !important;
}

.osm-apropos__lien .fleche{ margin-left: 0.3em !important; }
/* ==========================================================================
   osmOse — page « À propos » · le semis, version autonome
   19 septembre

   À coller tout à la fin de style.css, APRÈS le correctif. Le bloc de
   diagnostic aux !important peut être supprimé : il a fait son office.
   Rien à changer dans la page.

   POURQUOI CETTE VERSION
   Le semis reposait sur une référence à deux niveaux : chaque encadré
   pointait vers un groupe, lequel pointait vers les motifs. Les
   vaguelettes, qui n'ont qu'un seul niveau, s'affichent ; le semis, non.
   Ce second niveau ne survit pas à l'enregistrement de la page.

   Ici le dessin est embarqué dans la feuille de style, en vectoriel.
   Aucune référence à résoudre, donc plus rien à casser. Les <svg> restés
   dans la page sont neutralisés : ils ne gênent pas, et tu peux les
   laisser.

   POUR RÉGLER L'INTENSITÉ
   Les deux valeurs d'opacity ci-dessous, rien d'autre. 0 pour l'effacer.

   POUR POSER UNE PHOTO À LA PLACE, dans Multifacettes par exemple :
   remplacer l'url(...) de .osm-apropos__multi::before par l'adresse de
   ton image, et passer background-size à cover.
   ========================================================================== */

.osm-apropos .osm-apropos__semis{ display: none; }

.osm-apropos__encadre::before,
.osm-apropos__facettes::before,
.osm-apropos__multi::before,
.osm-apropos__final::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 340'%3E%3Cdefs%3E%3Cg id='e'%3E%3Cpath d='M0,-7 C0.9,-2.4 2.4,-0.9 7,0 C2.4,0.9 0.9,2.4 0,7 C-0.9,2.4 -2.4,0.9 -7,0 C-2.4,-0.9 -0.9,-2.4 0,-7 Z'/%3E%3C/g%3E%3Cg id='f' fill='none' stroke-width='1.15'%3E%3Ccircle cx='0' cy='-5.6' r='3.1'/%3E%3Ccircle cx='5.3' cy='-1.7' r='3.1'/%3E%3Ccircle cx='3.3' cy='4.5' r='3.1'/%3E%3Ccircle cx='-3.3' cy='4.5' r='3.1'/%3E%3Ccircle cx='-5.3' cy='-1.7' r='3.1'/%3E%3Ccircle cx='0' cy='0' r='1.5'/%3E%3C/g%3E%3Cg id='l'%3E%3Cpath d='M1.6,-7.4 A7.4,7.4 0 1,0 1.6,7.4 A5.8,5.8 0 1,1 1.6,-7.4 Z'/%3E%3C/g%3E%3Cg id='a' fill='none' stroke-width='1.15' stroke-linejoin='round'%3E%3Cpath d='M0,-8.5 L4.6,-1.6 L-4.6,-1.6 Z'/%3E%3Cpath d='M0,-3.6 L6,4.2 L-6,4.2 Z'/%3E%3Cpath d='M0,4.2 L0,8.4'/%3E%3C/g%3E%3Cg id='s' fill='none' stroke-width='1.15' stroke-linecap='round'%3E%3Ccircle cx='0' cy='0' r='3.6'/%3E%3Cpath d='M0,-7.6 L0,-5.6 M0,5.6 L0,7.6 M-7.6,0 L-5.6,0 M5.6,0 L7.6,0 M-5.4,-5.4 L-4,-4 M4,4 L5.4,5.4 M5.4,-5.4 L4,-4 M-4,4 L-5.4,5.4'/%3E%3C/g%3E%3Cg id='c'%3E%3Cpath d='M0,6.2 C-6.8,1.4 -8,-3.6 -4.4,-5.6 C-1.8,-7 0,-5 0,-3.4 C0,-5 1.8,-7 4.4,-5.6 C8,-3.6 6.8,1.4 0,6.2 Z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23D4694B' stroke='%23D4694B' opacity='.42'%3E%3Cuse href='%23e' transform='translate(58,44) scale(1.05)'/%3E%3Cuse href='%23e' transform='translate(512,88) scale(.72)'/%3E%3Cuse href='%23e' transform='translate(286,286) scale(.85)'/%3E%3Cuse href='%23e' transform='translate(154,236) scale(.6)'/%3E%3Cuse href='%23c' transform='translate(452,246) scale(.72)'/%3E%3Cuse href='%23c' transform='translate(112,132) scale(.52)'/%3E%3C/g%3E%3Cg fill='none' stroke='%237E8E74' opacity='.5'%3E%3Cuse href='%23a' transform='translate(96,286) scale(1.15)'/%3E%3Cuse href='%23a' transform='translate(544,196) scale(.85)'/%3E%3Cuse href='%23f' transform='translate(212,62) scale(1.1)'/%3E%3Cuse href='%23f' transform='translate(386,308) scale(.85)'/%3E%3Cuse href='%23f' transform='translate(30,182) scale(.7)'/%3E%3C/g%3E%3Cg fill='%23EE8250' opacity='.38'%3E%3Cuse href='%23l' transform='translate(348,52) rotate(18) scale(1.05)'/%3E%3Cuse href='%23l' transform='translate(28,290) rotate(-24) scale(.7)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C98A3E' opacity='.46'%3E%3Cuse href='%23s' transform='translate(470,140) scale(1.15)'/%3E%3Cuse href='%23s' transform='translate(238,176) scale(.62)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .85;
}

/* Chaque encadré montre un cadrage différent du même dessin : sans cela,
   les cinq boîtes afficheraient le même papier peint. */
.osm-apropos__encadre--ton::before{
  background-size: 120% auto;
  background-position: 14% 22%;
}

.osm-apropos__encadre--vert::before{
  background-size: 145% auto;
  background-position: 82% 64%;
}

.osm-apropos__facettes::before{
  background-size: 135% auto;
  background-position: 38% 92%;
}

.osm-apropos__multi::before{
  background-size: cover;
  background-position: 50% 50%;
  opacity: 1;
}

.osm-apropos__final::before{
  background-size: 130% auto;
  background-position: 88% 8%;
}


/* ==========================================================================
   osmOse — page « Qui suis-je ? »
   Complément à coller à la fin de style.css.

   PORTÉE
   Cette page réutilise tel quel le socle écrit pour « À propos » : son
   conteneur porte les deux classes, osm-apropos pour la colonne, la
   typographie, les encadrés et les vaguelettes, osm-quisuisje pour ce qui
   lui est propre. Rien n'est dupliqué, et rien ne déborde sur une autre page.

   Le nom osm-apropos désigne donc en réalité le gabarit des pages
   éditoriales longues. Si un jour tu veux le renommer, il faudra le faire
   dans les deux blocs HTML en même temps.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · LE CHAPÔ
   La phrase de présentation n'est pas un paragraphe courant : elle annonce
   la page. Elle prend la police de titre, sans devenir un titre.
   -------------------------------------------------------------------------- */

.osm-quisuisje__chapo{
  font-family: var(--a-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  line-height: 1.42;
  color: var(--a-bordeaux);
  margin-bottom: 2.5rem;
}


/* --------------------------------------------------------------------------
   2 · LES DEUX BLOCS D'ACCUEIL
   La note de régie du document demande deux blocs, avec une prise de
   rendez-vous dans chacun. Ils reprennent le dessin des cartes du site :
   même rayon de 22px, même filet vieux rose, même soulèvement au survol.

   En dessous de 40rem ils s'empilent — deux colonnes de texte à moins de
   300px donneraient des lignes de six mots.
   -------------------------------------------------------------------------- */

.osm-quisuisje__duo{
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.75rem;
}

@media (min-width: 40rem){
  .osm-quisuisje__duo{ grid-template-columns: 1fr 1fr; }
}

.osm-quisuisje__carte{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: 22px;
  background: var(--a-creme);
  border: 1px solid color-mix(in srgb, var(--a-vieux-rose) 70%, transparent);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}

.osm-quisuisje__carte:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(110, 18, 22, .09);
}

.osm-quisuisje__carte p{ margin: 0; }

/* Le bouton de rendez-vous se cale en bas de carte, pour que les deux
   soient alignés même si les textes n'ont pas la même longueur. */
.osm-quisuisje__carte .osm-quisuisje__rdv{ margin-top: auto; }

.osm-quisuisje__rdv{
  font-family: var(--a-texte);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--a-bordeaux);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--a-bordeaux) 45%, transparent);
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.osm-quisuisje__rdv:hover{
  background: var(--a-bordeaux);
  border-color: var(--a-bordeaux);
  color: var(--a-creme);
}


/* --------------------------------------------------------------------------
   3 · LES LISTES
   Le document les marque par un simple retrait. Ici un court tiret
   terracotta, comme les listes de cadence des pages d'atelier : il marque
   l'item sans le transformer en puce ronde, qui ferait mode d'emploi.
   -------------------------------------------------------------------------- */

.osm-quisuisje__liste{
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.15em;
}

.osm-quisuisje__liste li{
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.osm-quisuisje__liste li + li{ margin-top: 0.45em; }

.osm-quisuisje__liste li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 9px;
  height: 1px;
  background: var(--a-terracotta);
}


/* --------------------------------------------------------------------------
   4 · LA LIGNE DE RENVOI VERS « À PROPOS »
   -------------------------------------------------------------------------- */

.osm-quisuisje__renvoi{
  font-size: 1rem;
  color: color-mix(in srgb, var(--a-encre) 78%, var(--a-creme));
  margin-top: 2.25rem;
}

.osm-quisuisje__renvoi a{
  color: var(--a-bordeaux);
  text-decoration: none;
  border-bottom: 1px solid var(--a-terracotta);
  padding-bottom: 1px;
}

.osm-quisuisje__renvoi a:hover{
  background: color-mix(in srgb, var(--a-rose-poudre) 60%, transparent);
}

/* position:sticky cesse de fonctionner dès qu'un bloc parent crée un
   conteneur de défilement — typiquement un overflow-x:hidden posé pour
   empêcher le débordement horizontal. overflow:clip coupe pareillement
   mais ne crée pas ce conteneur : le collant refonctionne. */
html,
body,
.wp-site-blocks,
.wp-site-blocks > main,
.wp-block-post-content{
  overflow-x: clip;
}

.osm-cadre ul.wp-block-list > li {
  padding-left: 2.2em !important;
  position: relative !important;
}
.osm-cadre ul.wp-block-list > li::before {
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}



/* ===== Page « Mon approche » (classes osm-ap-*) ===== */

/* Sections pleine largeur */
.osm-ap-section{
	padding: clamp(48px, 7vw, 96px) var(--wp--preset--spacing--30) !important;
}
.osm-ap-creme{ background: var(--wp--preset--color--creme); }
.osm-ap-creme-fonce{ background: var(--wp--preset--color--creme-fonce); }

/* Sections à image de fond */
.osm-ap-photo{ background-position: center !important; }
.osm-ap-photo .osm-surtitre.has-background{
	display: table;
	margin-inline: auto !important;
	padding: .45em 1.3em;
	border-radius: 999px;
}

/* Encadré des 6 phrases d'intro */
.osm-ap-encadre{
	background: var(--wp--preset--color--creme-fonce);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--rouge) 18%, transparent);
	border-left: 4px solid var(--wp--preset--color--rouge);
	border-radius: 28px;
	padding: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 48px) !important;
	margin-top: var(--wp--preset--spacing--40) !important;
}
.osm-ap-encadre > p{ margin-block: 0 .9em; }
.osm-ap-encadre > p:last-child{ margin-bottom: 0; }

/* Notes (astérisque, phrase sous les outils) */
.osm-ap-note,
.osm-ap-note p{
	font-size: .95rem !important;
	font-style: italic;
	opacity: .85;
}
.osm-ap-note{ max-width: 38rem; margin-inline: auto !important; }

/* Cartes (outils, « Ici, j'invite à… ») */
.osm-ap-cartes{
	gap: 20px !important;
	margin-top: var(--wp--preset--spacing--40) !important;
}
.osm-ap-cartes + .osm-ap-cartes{ margin-top: 20px !important; }
.osm-ap-cartes > .wp-block-column{
	background: var(--wp--preset--color--creme);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--rouge) 14%, transparent);
	border-radius: 22px;
	padding: 28px 24px;
	box-shadow: 0 6px 20px rgba(60, 20, 20, .06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.osm-ap-creme .osm-ap-cartes > .wp-block-column{
	background: var(--wp--preset--color--creme-fonce);
}
.osm-ap-cartes > .wp-block-column:hover{
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(60, 20, 20, .10);
}
.osm-ap-cartes h3{
	margin-top: 0 !important;
	font-size: 1.25rem;
}
.osm-ap-cartes h3::before{
	content: "✦";
	display: block;
	margin-bottom: .5rem;
	font-size: .9rem;
	color: var(--wp--preset--color--rose-poudre);
}
.osm-ap-cartes p{
	margin-bottom: 0;
	font-size: .95rem;
}

/* Phrase d'accroche en citation */
.osm-ap-citation{
	font-family: "Playfair Display", serif !important;
	font-style: italic;
	font-weight: 400 !important;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--rouge);
	max-width: 38rem;
	margin-inline: auto !important;
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* Bloc « Mon intention » */
.osm-ap-intention{
	background: var(--wp--preset--color--creme-fonce);
	color: var(--wp--preset--color--vert-profond);
	border-left: 4px solid var(--wp--preset--color--vert-profond);
	border-radius: 28px;
	padding: clamp(28px, 5vw, 52px) !important;
}
.osm-ap-intention ul{ padding-left: 1.4em; }
.osm-ap-intention li{ margin-bottom: .4em; }
.osm-ap-intention li::marker{
	content: "✦  ";
	color: var(--wp--preset--color--rose-poudre);
}
.osm-ap-intention__lead{
	margin-top: var(--wp--preset--spacing--40) !important;
	font-size: 1.15rem;
}
.osm-ap-intention__chute{
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
	line-height: 1.45;
}

/* Police de titres : Playfair Display (charte) */
:root{
	--wp--preset--font-family--display: "Playfair Display", serif;
}


/* ==========================================================================
   À propos — version épurée
   Ne s'applique qu'à la page À propos (classe .osm-apropos--epure).
   Qui suis-je, qui partage le gabarit .osm-apropos, n'est pas touchée.
   À coller tout à la fin de style.css ou du CSS supplémentaire.
   ========================================================================== */

/* Plus de semis (sapins, étoiles, cœurs…) dans les encadrés */
.osm-apropos--epure .osm-apropos__encadre::before,
.osm-apropos--epure .osm-apropos__facettes::before,
.osm-apropos--epure .osm-apropos__multi::before,
.osm-apropos--epure .osm-apropos__final::before{
  display: none;
}

/* Titre de page, souligné d'un filet terracotta comme ailleurs sur le site */
.osm-apropos--epure .osm-apropos__titre::after{
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 1.75rem auto 0;
  background: var(--a-terracotta);
}

/* Rythme régulier entre les sections, avec un filet entre chacune */
.osm-apropos--epure > section{
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.osm-apropos--epure > section + section::before{
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  background: color-mix(in srgb, var(--a-terracotta) 60%, transparent);
}

/* Encadrés : un filet discret pour les détacher du fond crème */
.osm-apropos--epure .osm-apropos__encadre--ton,
.osm-apropos--epure .osm-apropos__final{
  border: 1px solid color-mix(in srgb, var(--a-vieux-rose) 55%, transparent);
}

.osm-apropos--epure .osm-apropos__encadre--vert{
  border: 1px solid color-mix(in srgb, var(--a-sauge) 35%, transparent);
}

/* Multifacettes : le lavis de couleurs suffit, il passe au premier plan */
.osm-apropos--epure .osm-apropos__multi{
  margin-bottom: 0.5rem;
}

/* Espace avant les sous-titres et l'appel final */
.osm-apropos--epure .osm-apropos__suite{ margin-top: 2rem; }
.osm-apropos--epure .osm-apropos__cta{ margin-top: clamp(2rem, 5vw, 3rem); }