/* =============================================================
   Cindy Ostéopathe — Design System
   Palette : Lavande & sable (pastel, doux, beaucoup d'air)
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
	/* Couleurs */
	--co-bg:           oklch(98% 0.005 80);     /* sable très clair, fond global */
	--co-bg-soft:      oklch(96% 0.012 75);     /* sable un peu plus chaud */
	--co-surface:      oklch(95% 0.022 280);    /* lavande pâle, cartes/sections alt */
	--co-surface-2:    oklch(92% 0.030 280);    /* lavande un peu plus marquée */
	--co-primary:      oklch(72% 0.055 280);    /* lavande principale */
	--co-primary-deep: oklch(55% 0.075 280);    /* lavande profonde, accents */
	--co-soft:         oklch(88% 0.030 280);    /* lavande air, badges */
	--co-accent:       oklch(78% 0.090 75);     /* miel chaud, CTA */
	--co-accent-deep:  oklch(65% 0.110 65);     /* miel profond, hover */
	--co-text:         oklch(28% 0.030 280);    /* prune, corps de texte */
	--co-text-soft:    oklch(45% 0.035 280);    /* prune doux */
	--co-muted:        oklch(58% 0.025 280);    /* violet gris */
	--co-line:         oklch(88% 0.012 280);    /* lignes & bordures */
	--co-white:        oklch(99% 0.003 80);     /* blanc cassé chaud */

	/* Typo */
	--co-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--co-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Échelle typographique fluide (clamp pour responsive sans media-queries) */
	--co-fs-xs:    clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
	--co-fs-sm:    clamp(0.88rem, 0.84rem + 0.2vw, 0.96rem);
	--co-fs-base:  clamp(1rem,    0.96rem + 0.2vw, 1.08rem);
	--co-fs-lg:    clamp(1.15rem, 1.05rem + 0.5vw, 1.32rem);
	--co-fs-xl:    clamp(1.4rem,  1.2rem + 1vw,    1.8rem);
	--co-fs-2xl:   clamp(1.8rem,  1.4rem + 2vw,    2.6rem);
	--co-fs-3xl:   clamp(2.4rem,  1.8rem + 3vw,    3.8rem);
	--co-fs-4xl:   clamp(3rem,    2rem + 5vw,      5.5rem);

	/* Espacement (échelle de 8) */
	--co-s-1:  0.5rem;
	--co-s-2:  1rem;
	--co-s-3:  1.5rem;
	--co-s-4:  2rem;
	--co-s-5:  3rem;
	--co-s-6:  4.5rem;
	--co-s-7:  6rem;
	--co-s-8:  8rem;

	/* Layout */
	--co-container:    72rem;       /* largeur max contenu */
	--co-container-sm: 48rem;       /* largeur max prose */
	--co-radius-sm:    0.5rem;
	--co-radius:       1rem;
	--co-radius-lg:    1.75rem;
	--co-radius-xl:    2.5rem;

	/* Ombres très douces */
	--co-shadow-sm: 0 1px 2px oklch(45% 0.04 280 / 0.06);
	--co-shadow:    0 12px 32px -16px oklch(45% 0.04 280 / 0.18);
	--co-shadow-lg: 0 30px 60px -30px oklch(45% 0.04 280 / 0.22);

	/* Transitions */
	--co-ease:    cubic-bezier(0.22, 1, 0.36, 1);
	--co-dur:     320ms;
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-base);
	line-height: 1.6;
	color: var(--co-text);
	background: var(--co-bg);
	font-feature-settings: "kern", "liga", "calt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--co-primary-deep);
	text-decoration: none;
	transition: color var(--co-dur) var(--co-ease);
}
a:hover {
	color: var(--co-accent-deep);
}

:focus-visible {
	outline: 2px solid var(--co-primary-deep);
	outline-offset: 3px;
	border-radius: 4px;
}
.co-service-card:focus-visible,
.co-btn:focus-visible {
	outline-offset: 4px;
	border-radius: inherit;
}

::selection {
	background: var(--co-soft);
	color: var(--co-text);
}

/* ---------- Typographie ---------- */
h1, h2, h3, h4, h5 {
	font-family: var(--co-font-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--co-text);
	margin: 0 0 var(--co-s-3);
	font-variation-settings: "opsz" 96;
}

h1 { font-size: var(--co-fs-4xl); font-weight: 400; letter-spacing: -0.035em; }
h2 { font-size: var(--co-fs-3xl); font-weight: 400; letter-spacing: -0.03em; }
h3 { font-size: var(--co-fs-2xl); }
h4 { font-size: var(--co-fs-xl); }
h5 { font-size: var(--co-fs-lg); }

p { margin: 0 0 var(--co-s-2); }

.co-eyebrow {
	font-family: var(--co-font-body);
	font-size: var(--co-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
	color: var(--co-primary-deep);
	margin: 0 0 var(--co-s-2);
	display: inline-block;
}

.co-display-italic {
	font-style: italic;
	font-variation-settings: "opsz" 144, "SOFT" 100;
	color: var(--co-primary-deep);
}

/* ---------- Layout ---------- */
.co-container {
	width: 100%;
	max-width: var(--co-container);
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.co-container-sm {
	max-width: var(--co-container-sm);
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.co-section {
	padding-block: var(--co-s-7);
}
.co-section--lg { padding-block: var(--co-s-8); }
.co-section--sm { padding-block: var(--co-s-6); }

.co-section--surface { background: var(--co-surface); }
.co-section--bg-soft { background: var(--co-bg-soft); }

/* ---------- Header ---------- */
.co-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: oklch(98% 0.005 80 / 0.85);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition:
		background var(--co-dur) var(--co-ease),
		backdrop-filter var(--co-dur) var(--co-ease),
		-webkit-backdrop-filter var(--co-dur) var(--co-ease),
		border-color var(--co-dur) var(--co-ease);
}
.co-header.is-scrolled {
	border-bottom-color: var(--co-line);
}

/* ----- Header en overlay sur hero full-bleed ----- */
.co-has-hero-image .co-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
}
.co-has-hero-image .co-header:not(.is-scrolled) {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}
.co-has-hero-image .co-header:not(.is-scrolled) .co-brand {
	color: oklch(98% 0.005 280);
	text-shadow: 0 1px 2px oklch(15% 0.02 280 / 0.5), 0 2px 18px oklch(15% 0.02 280 / 0.4);
}
.co-has-hero-image .co-header:not(.is-scrolled) .co-brand small {
	color: oklch(85% 0.03 280);
	text-shadow: 0 1px 2px oklch(15% 0.02 280 / 0.45);
}
.co-has-hero-image .co-header:not(.is-scrolled) .co-nav a:not(.co-btn) {
	color: oklch(96% 0.01 280);
	text-shadow: 0 1px 2px oklch(15% 0.02 280 / 0.45), 0 2px 14px oklch(15% 0.02 280 / 0.38);
}
.co-has-hero-image .co-header:not(.is-scrolled) .co-nav a:not(.co-btn)::after {
	background: oklch(88% 0.06 280);
}
/* Le panneau déroulant reste blanc : ses liens doivent rester foncés
   même quand le header est transparent (sinon texte clair sur fond blanc). */
.co-has-hero-image .co-header:not(.is-scrolled) .co-nav .co-subnav a,
.co-has-hero-image .co-header:not(.is-scrolled) .co-nav .sub-menu a {
	color: var(--co-text);
	text-shadow: none;
}
.co-has-hero-image .co-header:not(.is-scrolled) .co-subnav a:hover,
.co-has-hero-image .co-header:not(.is-scrolled) .co-nav-list .sub-menu a:hover {
	color: var(--co-primary-deep);
}
/* Bouton CTA en mode glass sur fond image */
.co-has-hero-image .co-header:not(.is-scrolled) .co-btn--pastel {
	background:
		linear-gradient(135deg, oklch(99% 0.003 80 / 0.92) 0%, oklch(95% 0.025 280 / 0.92) 100%);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	box-shadow:
		inset 0 1px 0 oklch(99% 0.003 80 / 0.9),
		0 8px 24px -12px oklch(0% 0 0 / 0.45);
}
.co-has-hero-image .co-header:not(.is-scrolled) .co-btn--pastel:hover {
	background:
		linear-gradient(135deg, oklch(78% 0.07 280) 0%, oklch(65% 0.10 280) 100%);
	color: var(--co-white);
}
.co-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.1rem;
	padding-inline: clamp(1.5rem, 3vw, 2.5rem);
	gap: var(--co-s-3);
	width: 100%;
	max-width: 90rem;
	margin: 0 auto;
}
.co-brand {
	font-family: var(--co-font-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--co-text);
	letter-spacing: -0.02em;
	line-height: 1;
}
.co-brand small {
	display: block;
	font-family: var(--co-font-body);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--co-muted);
	margin-top: 4px;
	transition: color var(--co-dur) var(--co-ease);
}
.co-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}
/* Vire les bullets des <li> rendus par wp_nav_menu */
.co-nav ul,
.co-nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.co-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}
.co-nav li::marker { content: ""; }

.co-nav a {
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-text);
	position: relative;
}
/* Soulignement uniquement sur les liens de nav, pas sur le bouton CTA */
.co-nav a:not(.co-btn)::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -6px;
	height: 1.5px;
	background: var(--co-primary);
	transition: all var(--co-dur) var(--co-ease);
}
.co-nav a:not(.co-btn):hover::after,
.co-nav a:not(.co-btn).current-menu-item::after {
	left: 0;
	right: 0;
}

/* ----- Burger + menu mobile ----- */
.co-burger {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	z-index: 110;
}
.co-burger span {
	display: block;
	width: 1.5rem;
	height: 2px;
	border-radius: 2px;
	background: var(--co-text);
	transition: transform var(--co-dur) var(--co-ease), opacity var(--co-dur) var(--co-ease);
}
/* burger clair sur le hero transparent (accueil) */
.co-has-hero-image .co-header:not(.is-scrolled) .co-burger span { background: oklch(98% 0.005 280); }
body.co-menu-open .co-burger span { background: var(--co-text); }
body.co-menu-open .co-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.co-menu-open .co-burger span:nth-child(2) { opacity: 0; }
body.co-menu-open .co-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.co-mobilemenu {
	position: fixed;
	inset: 0;
	z-index: 100;
	background:
		radial-gradient(circle at 80% 12%, oklch(92% 0.04 280 / 0.9), transparent 55%),
		radial-gradient(circle at 15% 85%, oklch(92% 0.045 75 / 0.7), transparent 55%),
		var(--co-bg);
	padding: 5.25rem clamp(1.5rem, 7vw, 4rem) 2.5rem;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-1.5rem);
	transition: opacity 360ms var(--co-ease), transform 360ms var(--co-ease), visibility 360ms;
}
body.co-menu-open .co-mobilemenu { opacity: 1; visibility: visible; transform: none; }
body.co-menu-open { overflow: hidden; }
/* le header (et son burger) passe au-dessus du panneau pour rester cliquable */
body.co-menu-open .co-header { z-index: 120; }
/* Header au-dessus du panneau : fond ET flou neutralisés, sinon le premier
   élément du menu apparaissait flouté sous le header sur les pages hors accueil. */
body.co-menu-open .co-header:not(.is-scrolled) {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}
/* Sur une page à hero (accueil en haut de page), la marque et le burger sont en
   blanc, avec une ombre portée très diffuse pour rester lisibles sur la photo.
   Menu ouvert, le fond derrière le header devient clair : cette ombre bavait
   autour du texte (effet flou) et le blanc devenait illisible. On repasse donc
   à l'habillage sombre normal dès que le menu est ouvert. */
body.co-menu-open.co-has-hero-image .co-header:not(.is-scrolled) .co-brand {
	color: var(--co-text);
	text-shadow: none;
}
body.co-menu-open.co-has-hero-image .co-header:not(.is-scrolled) .co-brand small {
	color: var(--co-muted);
	text-shadow: none;
}
body.co-menu-open.co-has-hero-image .co-header:not(.is-scrolled) .co-burger span {
	background: var(--co-text);
}
.co-mobilemenu-inner { display: flex; flex-direction: column; gap: 0.5rem; max-width: 32rem; }
/* Reset listes : pas de puces ni d'indentation par défaut (iOS Safari affiche
   les marqueurs même sur des <li> en flex) */
.co-mobilemenu ul { list-style: none; margin: 0; padding: 0; }
.co-mobilemenu .co-nav-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.25rem;
	width: 100%;
}
.co-mobilemenu .co-nav-list > li { width: 100%; }
.co-mobilemenu .co-nav-list > li > a,
.co-mobilemenu .co-has-sub > a,
.co-mobilemenu .menu-item-has-children > a {
	display: block;
	font-family: var(--co-font-display);
	font-size: var(--co-fs-lg);
	color: var(--co-text);
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--co-line);
}
.co-mobilemenu .co-nav-list a::after { display: none !important; }
/* La zone de tap du caret occupe le tiers droit de la ligne : le lien principal
   garde environ 65 % de la largeur, le reste ouvre le sous-menu. */
.co-mobilemenu .co-has-sub > a,
.co-mobilemenu .menu-item-has-children > a { padding-right: 36%; }
/* sous-menu repliable (fermé par défaut, ouvert au tap du caret).
   .co-nav-list dans le sélecteur : spécificité (0,3,0) pour battre à coup sûr
   les règles du dropdown desktop qui partagent les mêmes classes. */
.co-mobilemenu .co-nav-list .co-subnav,
.co-mobilemenu .co-nav-list .sub-menu {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	transform: none;
	opacity: 1;
	visibility: visible;
	display: block;
	background: transparent;
	box-shadow: none;
	min-width: 0;
	max-height: 0;
	overflow: hidden;
	margin: 0 0 0 0.25rem;
	padding: 0 0.9rem;
	border: 0;
	border-radius: var(--co-radius);
	background: oklch(96% 0.022 280 / 0.75);
	transition: max-height 320ms var(--co-ease), padding 320ms var(--co-ease), margin 320ms var(--co-ease);
}
/* Verrou anti-décalage : au tap, le :focus-within / :hover du dropdown desktop
   appliquait position:absolute + translateX(-50%) au sous-menu et le projetait
   hors écran (bug intermittent). On force le flux normal dans tous les états. */
.co-mobilemenu .co-nav-list .co-has-sub:hover > .co-subnav,
.co-mobilemenu .co-nav-list .co-has-sub:focus-within > .co-subnav,
.co-mobilemenu .co-nav-list .menu-item-has-children:hover > .sub-menu,
.co-mobilemenu .co-nav-list .menu-item-has-children:focus-within > .sub-menu {
	position: static;
	left: auto;
	right: auto;
	transform: none;
	min-width: 0;
	opacity: 1;
	visibility: visible;
}
.co-mobilemenu .co-has-sub.is-open > .co-subnav,
.co-mobilemenu .menu-item-has-children.is-open > .sub-menu {
	max-height: 34rem;
	margin: 0.25rem 0 0.5rem 0.25rem;
	padding: 0.15rem 0.9rem 0.35rem;
}
/* Sous-liens : assez grands pour être tapés sans viser, et visiblement des
   liens (chevron à droite, filet de séparation). */
.co-mobilemenu .co-nav-list .co-subnav a,
.co-mobilemenu .co-nav-list .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-base);
	color: var(--co-text);
	padding: 0.65rem 0.1rem;
	border-bottom: 1px solid oklch(85% 0.02 280 / 0.55);
	white-space: normal;
	line-height: 1.35;
}
.co-mobilemenu .co-nav-list .co-subnav li:last-child a,
.co-mobilemenu .co-nav-list .sub-menu li:last-child a { border-bottom: 0; }
/* Le chevron doit rétablir le ::after neutralisé plus haut pour tout le menu. */
.co-mobilemenu .co-nav-list .co-subnav a::after,
.co-mobilemenu .co-nav-list .sub-menu a::after {
	display: block !important;
	content: "";
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.2rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	border-radius: 1px;
	transform: rotate(-45deg);
	opacity: 0.45;
}
/* bouton caret de dépliage (injecté en JS) */
.co-submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 35%;
	min-width: 5rem;
	height: 2.9rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 0.15rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--co-text);
}
.co-submenu-toggle span { display: block; font-size: 0.95rem; transition: transform var(--co-dur) var(--co-ease); }
.co-mobilemenu .is-open > .co-submenu-toggle span { transform: rotate(180deg); }
.co-mobilemenu-cta { margin-top: var(--co-s-3); width: fit-content; }
.co-mobilemenu-phone {
	margin-top: var(--co-s-2);
	font-family: var(--co-font-display);
	font-size: var(--co-fs-lg);
	color: var(--co-primary-deep);
}

@media (max-width: 900px) {
	.co-nav { display: none; }
	.co-burger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	.co-mobilemenu { transition: opacity 200ms linear, visibility 200ms; transform: none; }
}

/* ----- Menu déroulant (Ostéopathie → pages prestation) ----- */
.co-nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.co-has-sub, .co-nav-list .menu-item-has-children { position: relative; }
.co-has-sub > a::after,
.co-nav-list .menu-item-has-children > a::after {
	content: "▾";
	/* réinitialise le ::after de soulignement (sinon flèche en position absolue, invisible) */
	position: static;
	width: auto;
	height: auto;
	background: none;
	font-size: 0.7em;
	margin-left: 0.35rem;
	opacity: 0.55;
	display: inline-block;
	vertical-align: middle;
	transition: transform var(--co-dur) var(--co-ease);
}
/* la flèche pivote quand le sous-menu est ouvert */
.co-has-sub:hover > a::after,
.co-has-sub:focus-within > a::after,
.co-nav-list .menu-item-has-children:hover > a::after,
.co-nav-list .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
	opacity: 0.9;
}
.co-subnav,
.co-nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 18rem;
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	box-shadow: var(--co-shadow);
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--co-dur) var(--co-ease), transform var(--co-dur) var(--co-ease);
	z-index: 60;
}
/* chaque item occupe toute la largeur → zone cliquable maximale */
.co-subnav li,
.co-nav-list .sub-menu li {
	display: block;
	width: 100%;
	margin: 0;
}
/* pont invisible pour ne pas perdre le survol */
.co-has-sub::after,
.co-nav-list .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0.6rem;
}
.co-has-sub:hover .co-subnav,
.co-has-sub:focus-within .co-subnav,
.co-nav-list .menu-item-has-children:hover .sub-menu,
.co-nav-list .menu-item-has-children:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.co-subnav a,
.co-nav-list .sub-menu a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 1rem;
	border-radius: var(--co-radius-sm);
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-text);
	white-space: nowrap;
}
.co-subnav a::after,
.co-nav-list .sub-menu a::after { display: none !important; }
.co-subnav a:hover,
.co-nav-list .sub-menu a:hover { background: var(--co-surface); color: var(--co-primary-deep); }

/* Sur le header transparent (home), le caret suit la couleur claire et ne
   reçoit PAS le fond violet du soulignement de nav (sinon rectangle violet
   derrière le chevron). Le .co-nav porte la spécificité à égalité avec la
   règle du soulignement, et passe après dans la cascade. */
.co-has-hero-image .co-header:not(.is-scrolled) .co-nav .co-has-sub > a::after,
.co-has-hero-image .co-header:not(.is-scrolled) .co-nav .menu-item-has-children > a::after {
	color: oklch(96% 0.01 280);
	background: none;
}

@media (max-width: 860px) {
	.co-subnav, .co-nav-list .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: 0;
		padding: 0.25rem 0 0.25rem 1rem;
		min-width: 0;
		background: transparent;
	}
}

/* ---------- Boutons ---------- */
.co-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.6rem;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--co-dur) var(--co-ease);
	text-decoration: none;
	line-height: 1;
}
.co-btn--primary {
	background: var(--co-text);
	color: var(--co-white);
}
.co-btn--primary:hover {
	background: var(--co-primary-deep);
	color: var(--co-white);
	transform: translateY(-2px);
	box-shadow: var(--co-shadow);
}
.co-btn--ghost {
	background: transparent;
	color: var(--co-text);
	border-color: var(--co-text);
}
.co-btn--ghost:hover {
	background: var(--co-text);
	color: var(--co-white);
}
.co-btn--soft {
	background: var(--co-soft);
	color: var(--co-primary-deep);
}
.co-btn--soft:hover {
	background: var(--co-primary);
	color: var(--co-white);
}
.co-btn--light {
	background: oklch(99% 0.003 80);
	color: var(--co-text);
	padding: 1.05rem 1.7rem;
	font-weight: 500;
	box-shadow: 0 1px 2px oklch(0% 0 0 / 0.08);
}
.co-btn--light:hover {
	background: var(--co-soft);
	color: var(--co-primary-deep);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -14px oklch(0% 0 0 / 0.35);
}
.co-btn--light .co-arrow {
	width: auto;
	height: auto;
	font-size: 1.05em;
	display: inline-block;
}

.co-btn--pastel {
	background:
		linear-gradient(
			135deg,
			oklch(92% 0.035 280) 0%,
			oklch(86% 0.045 280) 100%
		);
	color: var(--co-primary-deep);
	box-shadow:
		inset 0 1px 0 oklch(99% 0.003 80 / 0.85),
		inset 0 -1px 0 oklch(60% 0.075 280 / 0.10),
		0 1px 2px oklch(45% 0.04 280 / 0.10);
	font-weight: 500;
	padding: 0.85rem 1.5rem 0.85rem 1.6rem;
}
.co-btn--pastel:hover {
	background:
		linear-gradient(
			135deg,
			oklch(78% 0.07 280) 0%,
			oklch(65% 0.10 280) 100%
		);
	color: var(--co-white);
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 oklch(99% 0.003 80 / 0.25),
		0 14px 32px -14px oklch(55% 0.10 280 / 0.55);
}
.co-btn--pastel .co-btn-arrow {
	display: inline-block;
	transition: transform var(--co-dur) var(--co-ease);
	font-size: 1.05em;
	line-height: 1;
}
.co-btn--pastel:hover .co-btn-arrow {
	transform: translateX(4px);
}
.co-btn .co-arrow {
	width: 1rem;
	height: 1rem;
	transition: transform var(--co-dur) var(--co-ease);
}
.co-btn:hover .co-arrow {
	transform: translateX(4px);
}

/* =============================================================
   SECTIONS HOME
   ============================================================= */

/* ---------- Hero — full-bleed image + ken-burns + content split ---------- */
.co-hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(40rem, 92vh, 58rem);
	display: flex;
	align-items: flex-end;
	padding-block: clamp(4rem, 8vw, 7rem);
	color: oklch(98% 0.005 280);
	isolation: isolate;
	background-color: oklch(28% 0.03 280);
}

/* Fallback dégradé si aucune image n'est uploadée */
.co-hero.no-image {
	background:
		radial-gradient(circle at 30% 75%, oklch(60% 0.10 280 / 0.55), transparent 55%),
		radial-gradient(circle at 75% 30%, oklch(55% 0.08 75 / 0.35), transparent 55%),
		linear-gradient(135deg, oklch(32% 0.04 280) 0%, oklch(22% 0.03 280) 100%);
}

/* Couche bg image avec ken-burns lent */
.co-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: transform;
	animation: co-ken-burns 16s ease-in-out infinite alternate;
	z-index: 0;
}
@keyframes co-ken-burns {
	0%   { transform: scale(1) translate3d(0, 0, 0); }
	100% { transform: scale(1.14) translate3d(-1.5%, 1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.co-hero-bg { animation: none; }
}

/* Overlay pour lisibilité du texte sur l'image */
.co-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, oklch(22% 0.05 280 / 0.20) 0%, oklch(14% 0.05 280 / 0.66) 100%),
		linear-gradient(90deg, oklch(14% 0.06 280 / 0.46) 0%, oklch(16% 0.05 280 / 0.12) 58%, transparent 100%);
}

.co-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 95rem; /* volontairement plus large que .co-container (72rem) */
	margin: 0 auto;
	padding-inline: clamp(1.5rem, 4vw, 3.5rem);
	display: flex;
	align-items: flex-end;
}

/* Contenu bas-gauche */
.co-hero-content {
	display: flex;
	flex-direction: column;
	gap: var(--co-s-2);
	max-width: 54rem;
}
.co-hero-content .co-eyebrow {
	color: oklch(88% 0.045 280);
	margin: 0 0 0.6rem;
}
.co-hero-content .co-eyebrow::before {
	background: oklch(88% 0.045 280);
}
.co-hero-content h1 {
	color: oklch(99% 0.003 80);
	font-size: clamp(2.4rem, 5.5vw, 4.8rem);
	line-height: 1.02;
	margin: 0 0 var(--co-s-2);
	font-weight: 400;
	max-width: 18ch;
	letter-spacing: -0.03em;
}
.co-hero-content h1 em {
	font-style: italic;
	color: oklch(85% 0.075 280);
	font-variation-settings: "opsz" 144;
}
.co-hero-lead-wrap p {
	font-size: var(--co-fs-base);
	color: oklch(90% 0.015 280);
	margin: 0 0 var(--co-s-3);
	max-width: 42rem;
	line-height: 1.55;
}
.co-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-s-2);
	margin-top: var(--co-s-2);
}
.co-btn--outline-light {
	background: oklch(99% 0.003 80 / 0.08);
	color: oklch(98% 0.005 280);
	border-color: oklch(98% 0.005 280 / 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.co-btn--outline-light:hover {
	background: oklch(99% 0.003 80);
	color: var(--co-text);
	border-color: transparent;
	transform: translateY(-2px);
}

/* Stagger entrée du contenu hero */
.co-hero-content > .co-reveal:nth-child(1) { transition-delay: 100ms; }
.co-hero-content > .co-reveal:nth-child(2) { transition-delay: 240ms; }
.co-hero-content > .co-reveal:nth-child(3) { transition-delay: 380ms; }
.co-hero-content > .co-reveal:nth-child(4) { transition-delay: 520ms; }

@media (max-width: 860px) {
	.co-hero-content h1 { font-size: clamp(2.1rem, 8vw, 3.4rem); }
}
@media (max-width: 600px) {
	.co-hero { min-height: 100vh; min-height: 100svh; }
	.co-hero-lead-wrap p { font-size: 0.875rem; line-height: 1.5; }
}

/* ---------- Trust signals (bandeau sous hero) ---------- */
.co-trust {
	padding-block: var(--co-s-4);
	background: var(--co-bg);
	border-bottom: 1px solid var(--co-line);
}
.co-trust-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem clamp(1rem, 3vw, 2.25rem);
}
.co-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-text);
	white-space: nowrap;
}
.co-trust-icon {
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--co-soft);
	color: var(--co-primary-deep);
	flex-shrink: 0;
}
.co-trust-icon svg { width: 1.05rem; height: 1.05rem; }
@media (max-width: 700px) {
	.co-trust-list { justify-content: flex-start; }
	.co-trust-pill { font-size: var(--co-fs-xs); }
}

/* ---------- Pourquoi consulter (split éditorial) ---------- */
.co-why-layout {
	display: grid;
	grid-template-columns: 0.9fr 1fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.co-why-head { position: sticky; top: 6rem; }
.co-why-head .co-eyebrow { margin-bottom: var(--co-s-2); }
.co-why-head h2 { margin: 0; max-width: 16ch; font-size: var(--co-fs-3xl); }
.co-why-head h2 em { font-style: italic; color: var(--co-primary-deep); }
.co-why-body p {
	font-size: var(--co-fs-base);
	color: var(--co-text-soft);
	line-height: 1.7;
	margin: 0 0 var(--co-s-3);
}
.co-why-list {
	list-style: none;
	margin: 0 0 var(--co-s-4);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1.5rem;
}
.co-why-list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: var(--co-fs-sm);
	color: var(--co-text);
	line-height: 1.4;
}
.co-why-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--co-primary);
}
@media (max-width: 860px) {
	.co-why-layout { grid-template-columns: 1fr; }
	.co-why-head { position: static; }
}
@media (max-width: 600px) {
	/* Titre plus compact sur mobile (sinon le « ? » passe seul à la ligne) */
	.co-why-head h2 { font-size: var(--co-fs-2xl); max-width: none; }
}
@media (max-width: 600px) {
	.co-why-list { grid-template-columns: 1fr; }
}

/* ---------- Indications principales (6 cards cliquables) ---------- */
.co-indications-head {
	max-width: 40rem;
	margin-bottom: var(--co-s-5);
}
.co-indications-head h2 { margin: 0 0 var(--co-s-2); }
.co-indications-head p { color: var(--co-text-soft); margin: 0; }
.co-indications-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--co-s-3);
}
/* Tuile compacte : image plein cadre, titre en surimpression.
   La description reste dans le HTML (SEO) et se révèle au survol. */
.co-indication-card {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	/* Filet de sécurité : la carte est vide en flux (média et texte sont en
	   position absolue), sa hauteur ne tient qu'à aspect-ratio. Si le ratio
	   n'est pas appliqué (Safari iOS), la carte s'effondre à zéro. */
	min-height: 10rem;
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--co-white);
	background: oklch(94% 0.02 285);
	transition:
		transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.co-indication-media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 30%, oklch(86% 0.05 280 / 0.45), transparent 55%),
		radial-gradient(circle at 72% 78%, oklch(85% 0.05 75 / 0.32), transparent 55%),
		oklch(96% 0.018 285);
}
/* Voile dégradé : lisibilité du titre par-dessus l'image */
.co-indication-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, oklch(24% 0.04 280 / 0.88) 0%, oklch(24% 0.04 280 / 0.5) 38%, transparent 72%);
}
.co-indication-media img,
.co-indication-media figure,
.co-indication-media figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.co-indication-media figure { margin: 0; }
.co-indication-media img:not([src]),
.co-indication-media img[src=""] { visibility: hidden; }
.co-indication-icon {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: oklch(99% 0.003 80 / 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--co-primary-deep);
	transition: background 400ms var(--co-ease), color 400ms var(--co-ease), transform 500ms var(--co-ease);
}
.co-indication-icon svg { width: 1.25rem; height: 1.25rem; }
.co-indication-body {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--co-s-2);
	padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
}
.co-indication-text { min-width: 0; }
.co-indication-body h3 {
	font-size: var(--co-fs-lg);
	margin: 0;
	line-height: 1.15;
	color: var(--co-white);
	text-shadow: 0 1px 12px oklch(20% 0.03 280 / 0.5);
}
/* Description : conservée dans le HTML (SEO), révélée au survol sur grand écran */
.co-indication-body p {
	margin: 0.25rem 0 0;
	font-size: var(--co-fs-xs);
	line-height: 1.45;
	color: oklch(93% 0.012 285);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(4px);
	transition: max-height 450ms var(--co-ease), opacity 350ms var(--co-ease), transform 450ms var(--co-ease);
}
.co-indication-card:hover .co-indication-body p,
.co-indication-card:focus-visible .co-indication-body p {
	max-height: 5rem;
	opacity: 1;
	transform: none;
}
.co-indication-arrow {
	color: var(--co-white);
	font-size: 1.1rem;
	flex-shrink: 0;
	transform: translateX(-4px);
	opacity: 0;
	transition: opacity 400ms var(--co-ease), transform 400ms var(--co-ease);
}
.co-indication-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 56px -30px oklch(45% 0.06 280 / 0.45);
}
.co-indication-card:hover .co-indication-media img {
	transform: scale(1.06);
}
.co-indication-card:hover .co-indication-icon {
	background: var(--co-primary-deep);
	color: var(--co-white);
	transform: scale(1.05) rotate(-3deg);
}
.co-indication-card:hover .co-indication-arrow {
	opacity: 1;
	transform: none;
}
@media (max-width: 860px) {
	.co-indications-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.co-indications-grid { grid-template-columns: 1fr; }
	.co-indication-card { aspect-ratio: 16 / 10; }
}
/* Écrans tactiles (pas de survol) : description et flèche toujours visibles */
@media (hover: none) {
	.co-indication-body p { max-height: 5rem; opacity: 1; transform: none; }
	.co-indication-arrow { opacity: 1; transform: none; }
}
/* Entre 561 et 700px, la carte reste en 2 colonnes tout en affichant la
   description en permanence : elle remontait dans la pastille d'icône. On donne
   un peu de hauteur à la carte et on borne le texte. */
@media (hover: none) and (max-width: 700px) {
	.co-indication-card { aspect-ratio: 16 / 11; }
	.co-indication-body p { -webkit-line-clamp: 2; max-height: 2.7rem; }
}

/* ---------- Mon approche (image + contenu) ---------- */
.co-approach {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}
.co-approach-media {
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 1.75rem 5rem 1.75rem 1.75rem;
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 30%, oklch(86% 0.05 280 / 0.5), transparent 55%),
		radial-gradient(circle at 75% 75%, oklch(85% 0.05 75 / 0.3), transparent 55%),
		oklch(94% 0.025 285);
}
.co-approach-media img,
.co-approach-media figure,
.co-approach-media figure img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.co-approach-media img:not([src]),
.co-approach-media img[src=""] { visibility: hidden; }
.co-approach-media figure { margin: 0; height: 100%; }
.co-approach-content h2 { margin: 0 0 var(--co-s-3); max-width: 18ch; }
.co-approach-content > p { font-size: var(--co-fs-base); color: var(--co-text-soft); line-height: 1.7; margin: 0 0 var(--co-s-3); max-width: 36rem; }
.co-approach-quote {
	font-family: var(--co-font-display);
	font-style: italic;
	font-size: var(--co-fs-xl);
	line-height: 1.3;
	color: var(--co-primary-deep);
	margin: 0 0 var(--co-s-4) !important;
	padding-left: var(--co-s-3);
	border-left: 3px solid var(--co-soft);
	font-variation-settings: "opsz" 144;
}
@media (max-width: 860px) {
	.co-approach { grid-template-columns: 1fr; }
	/* On garde le format portrait de l'ordinateur : un ratio plus large sur
	   mobile recadrait la photo en son centre et amputait le sujet. */
	.co-approach-media { aspect-ratio: 4 / 5; max-height: 34rem; }
}

/* ---------- Yoga & Formations (secondaire) ---------- */
.co-yf-head { margin-bottom: var(--co-s-4); }
.co-yf-head h2 { margin: 0; }
.co-yf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--co-s-3);
}
.co-yf-card {
	display: flex;
	flex-direction: column;
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 500ms var(--co-ease), box-shadow 500ms var(--co-ease), border-color 400ms ease;
}
.co-yf-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 30%, oklch(86% 0.05 280 / 0.4), transparent 55%),
		oklch(96% 0.018 285);
}
.co-yf-media img,
.co-yf-media figure,
.co-yf-media figure img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.co-yf-media figure { margin: 0; }
.co-yf-media img:not([src]),
.co-yf-media img[src=""] { visibility: hidden; }
.co-yf-card-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--co-s-3);
	padding: var(--co-s-4);
	flex: 1;
}
.co-yf-card-body h3 { font-size: var(--co-fs-xl); margin: 0 0 0.5rem; }
.co-yf-card-body p { margin: 0; color: var(--co-text-soft); font-size: var(--co-fs-sm); line-height: 1.6; }
.co-yf-card-link {
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-primary-deep);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.co-yf-card-link span { transition: transform 400ms var(--co-ease); }
.co-yf-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 50px -28px oklch(45% 0.06 280 / 0.25);
	border-color: oklch(80% 0.05 280 / 0.5);
}
.co-yf-card:hover .co-yf-media img { transform: scale(1.05); }
.co-yf-card:hover .co-yf-card-link span { transform: translateX(5px); }
@media (max-width: 600px) {
	.co-yf-grid { grid-template-columns: 1fr; }
}

/* ---------- Prendre rendez-vous (3 options) ---------- */
.co-rdv { text-align: center; }
.co-rdv > h2 { max-width: 24ch; margin-inline: auto; }
.co-rdv > p { color: var(--co-text-soft); max-width: 40rem; margin: 0 auto var(--co-s-5); font-size: var(--co-fs-lg); }
.co-rdv-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--co-s-3);
	text-align: left;
}
.co-rdv-option {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--co-s-4);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
	text-decoration: none;
	color: inherit;
	transition: transform 500ms var(--co-ease), box-shadow 500ms var(--co-ease), border-color 400ms ease;
}
.co-rdv-option-icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--co-soft);
	color: var(--co-primary-deep);
	margin-bottom: var(--co-s-2);
	transition: background 400ms var(--co-ease), color 400ms var(--co-ease);
}
.co-rdv-option-icon svg { width: 1.4rem; height: 1.4rem; }
.co-rdv-option-label { font-family: var(--co-font-display); font-size: var(--co-fs-lg); color: var(--co-text); }
.co-rdv-option-meta { font-size: var(--co-fs-sm); color: var(--co-text-soft); }
.co-rdv-option:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 50px -28px oklch(45% 0.06 280 / 0.28);
	border-color: oklch(80% 0.05 280 / 0.5);
}
.co-rdv-option:hover .co-rdv-option-icon {
	background: var(--co-primary-deep);
	color: var(--co-white);
}
@media (max-width: 760px) {
	.co-rdv-options { grid-template-columns: 1fr; }
}

/* ---------- Avis : bouton "Laisser un avis" ---------- */
.co-avis-cta { text-align: center; margin-top: var(--co-s-5); }

/* =============================================================
   PAGES INTERNES (ostéo, yoga, formation, à propos, contact)
   ============================================================= */

.co-section--sm { padding-block: var(--co-s-5); }

/* ---------- Fil d'Ariane ---------- */
.co-breadcrumb {
	padding-top: var(--co-s-4);
	font-size: var(--co-fs-xs);
	color: var(--co-muted);
}
.co-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}
.co-breadcrumb li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--co-line);
}
.co-breadcrumb a { color: var(--co-muted); }
.co-breadcrumb a:hover { color: var(--co-primary-deep); }
.co-breadcrumb [aria-current="page"] { color: var(--co-text); }

/* ---------- Sections prose (contenu SEO lisible) ---------- */
/* Pages en contenu libre (mentions légales, protection des données) : une URL ou
   un mot long saisi par la cliente provoquerait un scroll latéral. */
.co-prose { overflow-wrap: break-word; }

.co-prose-section {
	max-width: 54rem;
	margin-inline: auto;
}
.co-prose-section h1 { margin-bottom: var(--co-s-3); }
.co-prose-section h1 em,
.co-prose-section h2 em { font-style: italic; color: var(--co-primary-deep); font-variation-settings: "opsz" 144; }
.co-prose-section h2 {
	font-size: var(--co-fs-2xl);
	margin: 0 0 var(--co-s-3);
}
.co-prose-section h3 {
	font-size: var(--co-fs-lg);
	margin: var(--co-s-3) 0 var(--co-s-1);
}
/* Sécurité : tout contenu saisi dans WP s'enroule et ne déborde jamais
   horizontalement (mots/URL longs type « yoga.ch », libellés de crédentials). */
.co-prose-section { overflow-wrap: break-word; }
.co-prose-section p {
	font-size: var(--co-fs-base);
	line-height: 1.75;
	color: var(--co-text-soft);
	margin: 0 0 var(--co-s-2);
}
.co-prose-section ul {
	margin: 0 0 var(--co-s-3);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.co-prose-section ul li {
	position: relative;
	padding-left: 1.6rem;
	line-height: 1.5;
	color: var(--co-text);
}
.co-prose-section ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--co-primary);
}
.co-prose-section ul.co-cols-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }
@media (max-width: 600px) { .co-prose-section ul.co-cols-list { grid-template-columns: 1fr; } }
.co-prose-cta { margin-top: var(--co-s-3); }

/* ancrage : compense header + anchornav sticky */
[id] { scroll-margin-top: 7rem; }

/* ---------- Encart d'autorité (ostéo) ---------- */
.co-authority {
	list-style: none;
	margin: var(--co-s-3) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.co-authority li {
	padding: 0.4rem 0.9rem;
	background: var(--co-soft);
	color: var(--co-primary-deep);
	border-radius: 999px;
	font-size: var(--co-fs-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.co-authority li::before { content: none; }

/* ---------- Menu d'ancres sticky ---------- */
.co-anchornav {
	position: sticky;
	top: 3.6rem;
	z-index: 40;
	background: oklch(98% 0.005 80 / 0.9);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-block: 1px solid var(--co-line);
}
.co-anchornav-inner {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	padding-block: 0.75rem;
	scrollbar-width: thin;
}
.co-anchornav a {
	flex-shrink: 0;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-text-soft);
	white-space: nowrap;
	transition: all var(--co-dur) var(--co-ease);
}
.co-anchornav a:hover,
.co-anchornav a.is-active {
	background: var(--co-text);
	color: var(--co-white);
}

/* ---------- Citation ---------- */
.co-quote { text-align: center; }
.co-quote-text {
	font-family: var(--co-font-display);
	font-style: italic;
	font-size: var(--co-fs-xl) !important;
	line-height: 1.4;
	color: var(--co-text) !important;
	font-variation-settings: "opsz" 144;
	margin: 0 0 var(--co-s-2) !important;
}
.co-quote-author {
	font-size: var(--co-fs-sm) !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--co-muted) !important;
}

/* ---------- Valeurs (grille de cards) ---------- */
.co-values-section ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--co-s-2);
}
.co-values-section ul li {
	padding: var(--co-s-3);
	background: var(--co-surface);
	border-radius: var(--co-radius);
	padding-left: var(--co-s-3);
	font-weight: 500;
	color: var(--co-text);
}
.co-values-section ul li::before { content: none; }
@media (max-width: 600px) { .co-values-section ul { grid-template-columns: 1fr; } }

/* ---------- NAP (contact) ---------- */
.co-nap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--co-s-3);
}
.co-nap-block { display: flex; flex-direction: column; gap: 0.3rem; }
.co-nap-label {
	font-size: var(--co-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--co-muted);
}
.co-nap-value { font-family: var(--co-font-display); font-size: var(--co-fs-lg); color: var(--co-text); }
a.co-nap-value:hover { color: var(--co-primary-deep); }

/* ---------- Horaires + accès (contact) ---------- */
.co-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 760px) { .co-contact-grid { grid-template-columns: 1fr; } }
.co-hours { margin: 0; }
.co-hours div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--co-line); }
.co-hours dt { font-weight: 500; }
.co-hours dd { margin: 0; color: var(--co-text-soft); }

/* ---------- Formulaire de contact ---------- */
.co-contact-form { display: flex; flex-direction: column; gap: var(--co-s-3); }
.co-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--co-s-3); }
@media (max-width: 760px) { .co-form-row { grid-template-columns: 1fr; } }
.co-field { display: flex; flex-direction: column; gap: 0.4rem; }
.co-field span { font-size: var(--co-fs-sm); font-weight: 500; color: var(--co-text); }
.co-field input,
.co-field textarea {
	font-family: var(--co-font-body);
	font-size: var(--co-fs-base);
	padding: 0.8rem 1rem;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-sm);
	background: var(--co-white);
	color: var(--co-text);
	transition: border-color var(--co-dur) var(--co-ease);
}
.co-field input:focus,
.co-field textarea:focus { outline: none; border-color: var(--co-primary); }
.co-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.co-form-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--co-radius-sm);
	margin-bottom: var(--co-s-3);
	font-size: var(--co-fs-sm);
}
.co-form-notice--ok { background: oklch(90% 0.06 145); color: oklch(35% 0.08 145); }
.co-form-notice--err { background: oklch(90% 0.06 30); color: oklch(40% 0.10 30); }
.co-contact-form .co-btn { align-self: flex-start; }

.co-form-downloads { display: flex; flex-wrap: wrap; gap: var(--co-s-2); margin: var(--co-s-3) 0; }

/* ---------- Réseaux sociaux ---------- */
.co-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: var(--co-s-2); }
.co-social-link {
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--co-line);
	border-radius: 999px;
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-text);
	transition: all var(--co-dur) var(--co-ease);
}
.co-social-link:hover { background: var(--co-text); color: var(--co-white); border-color: transparent; }

/* ---------- Références utiles : filtres + cards ---------- */
.co-refs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: var(--co-s-5);
}
.co-refs-filter {
	padding: 0.55rem 1.1rem;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-text);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: 999px;
	cursor: pointer;
	transition: all var(--co-dur) var(--co-ease);
}
.co-refs-filter:hover { border-color: var(--co-primary); }
.co-refs-filter.is-active {
	background: var(--co-text);
	color: var(--co-white);
	border-color: transparent;
}

.co-refs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--co-s-3);
}
.co-ref-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
	text-decoration: none;
	color: inherit;
	transition: transform 500ms var(--co-ease), box-shadow 500ms var(--co-ease), border-color 400ms ease;
}
/* Le filtre JS pose [hidden] : on force le masquage (sinon display:flex l'emporte) */
.co-ref-card[hidden] { display: none; }
.co-ref-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--co-surface);
}
.co-ref-media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1000ms var(--co-ease);
}
.co-ref-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--co-s-3) clamp(1.25rem, 2vw, 1.6rem) var(--co-s-4);
	flex: 1;
}
.co-ref-cat {
	font-size: var(--co-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 500;
	color: var(--co-primary-deep);
}
.co-ref-title {
	font-family: var(--co-font-display);
	font-size: var(--co-fs-lg);
	line-height: 1.15;
	color: var(--co-text);
}
.co-ref-desc {
	font-size: var(--co-fs-sm);
	color: var(--co-text-soft);
	line-height: 1.55;
	flex: 1;
}
.co-ref-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-primary-deep);
	margin-top: 0.25rem;
}
.co-ref-link span { transition: transform 400ms var(--co-ease); }
a.co-ref-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 56px -30px oklch(45% 0.06 280 / 0.28);
	border-color: oklch(80% 0.05 280 / 0.5);
}
a.co-ref-card:hover .co-ref-media img { transform: scale(1.05); }
a.co-ref-card:hover .co-ref-link span { transform: translateX(5px); }
.co-refs-empty { color: var(--co-text-soft); margin-top: var(--co-s-3); }

/* ---------- À propos bref (2 colonnes : portrait gauche / contenu droit) ---------- */
.co-about-brief {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}
.co-about-media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 1.75rem 1.75rem 1.75rem 5rem;
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 30%, oklch(86% 0.05 280 / 0.5), transparent 55%),
		radial-gradient(circle at 75% 75%, oklch(85% 0.05 75 / 0.3), transparent 55%),
		oklch(94% 0.025 285);
}
.co-about-media img,
.co-about-media figure,
.co-about-media figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.co-about-media img:not([src]),
.co-about-media img[src=""] {
	visibility: hidden;
}
.co-about-media figure { margin: 0; height: 100%; }
.co-about-media-tag {
	position: absolute;
	bottom: 1.25rem;
	left: 1.25rem;
	background: oklch(99% 0.003 80 / 0.82);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	font-size: 0.78rem;
	color: var(--co-text);
	border: 1px solid oklch(99% 0.003 80 / 0.7);
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 500;
}
.co-about-media-tag span[aria-hidden="true"] {
	color: var(--co-primary-deep);
	font-style: italic;
	font-family: var(--co-font-display);
	font-size: 1rem;
	line-height: 1;
}
.co-about-content h2 {
	margin: 0 0 1.25rem;
	max-width: 22ch;
}
.co-about-content h2 em {
	color: var(--co-primary-deep);
	font-style: italic;
	font-variation-settings: "opsz" 144;
}
.co-about-content p {
	font-size: var(--co-fs-lg);
	color: var(--co-text-soft);
	margin-bottom: var(--co-s-3);
	max-width: 36rem;
}
.co-about-content .co-eyebrow {
	margin-bottom: var(--co-s-2);
}

@media (max-width: 860px) {
	.co-about-brief { grid-template-columns: 1fr; }
	.co-about-media { aspect-ratio: 4 / 4; max-height: 32rem; }
}

/* ---------- Vision (section full-bleed avec image de fond) ---------- */
.co-vision {
	position: relative;
	min-height: clamp(28rem, 65vh, 40rem);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: oklch(35% 0.04 280);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-block: 0;
}
/* Fallback gradient quand aucune image n'est uploadée */
.co-vision:not(.has-image) {
	background-image:
		radial-gradient(circle at 30% 40%, oklch(60% 0.10 280 / 0.6), transparent 55%),
		radial-gradient(circle at 70% 70%, oklch(55% 0.08 75 / 0.4), transparent 55%),
		linear-gradient(135deg, oklch(35% 0.04 280) 0%, oklch(28% 0.03 280) 100%);
}
.co-vision-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, oklch(20% 0.03 280 / 0.55) 0%, oklch(20% 0.03 280 / 0.65) 100%),
		radial-gradient(circle at center, transparent 0%, oklch(15% 0.03 280 / 0.35) 90%);
	pointer-events: none;
}
.co-vision-inner {
	position: relative;
	z-index: 1;
	max-width: 50rem;
	text-align: center;
	padding-block: var(--co-s-5);
	color: oklch(96% 0.015 280);
}
.co-vision-inner .co-eyebrow {
	color: oklch(85% 0.06 280);
	margin-bottom: var(--co-s-3);
	justify-content: center;
}
.co-vision-inner .co-eyebrow::before {
	background: oklch(85% 0.06 280);
}
.co-vision-inner h2 {
	color: oklch(98% 0.005 280);
	font-size: var(--co-fs-3xl);
	font-style: italic;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 var(--co-s-3);
	font-variation-settings: "opsz" 144;
	max-width: 22ch;
	margin-inline: auto;
}
.co-vision-inner p {
	color: oklch(88% 0.02 280);
	font-size: var(--co-fs-lg);
	line-height: 1.55;
	max-width: 36rem;
	margin: 0 auto var(--co-s-3);
}
.co-vision-signature {
	font-size: var(--co-fs-sm) !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: oklch(80% 0.04 280) !important;
	margin-top: var(--co-s-3);
	font-weight: 500;
}

/* ---------- Services ---------- */
.co-services-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--co-s-3);
	margin-bottom: var(--co-s-5);
	flex-wrap: wrap;
}
.co-services-head h2 { margin: 0; max-width: 32rem; }
.co-services-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: var(--co-s-3);
	align-items: stretch;
}

/* ---- Card unifiée : structure identique pour les 3 ---- */
.co-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--co-white);
	border: 1px solid oklch(90% 0.012 280);
	border-radius: 1.5rem;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition:
		transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 400ms ease;
	will-change: transform;
}

/* ---- Zone média : gradient pastel par défaut quand pas d'image ---- */
.co-service-card-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
	background:
		radial-gradient(circle at 28% 28%, oklch(86% 0.05 280 / 0.45), transparent 55%),
		radial-gradient(circle at 72% 78%, oklch(85% 0.05 75 / 0.32), transparent 55%),
		oklch(96% 0.018 285);
}
.co-service-card-media img,
.co-service-card-media figure,
.co-service-card-media figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.co-service-card-media figure { margin: 0; }
/* Si pas de src → on cache l'icône cassée, le gradient prend le relais */
.co-service-card-media img:not([src]),
.co-service-card-media img[src=""] {
	visibility: hidden;
}
.co-service-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, oklch(28% 0.03 280 / 0.18) 100%);
	opacity: 0;
	transition: opacity 700ms var(--co-ease);
}
.co-service-card:hover .co-service-card-media img {
	transform: scale(1.06);
}
.co-service-card:hover .co-service-card-media::after {
	opacity: 1;
}

/* ---- Badge flottant (featured uniquement) ---- */
.co-service-badge-float {
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	z-index: 2;
	background: oklch(99% 0.003 80 / 0.78);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--co-text);
	border: 1px solid oklch(99% 0.003 80 / 0.6);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.co-service-badge-float::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: oklch(70% 0.13 145);
}

/* ---- Corps texte ---- */
.co-service-card-body {
	padding: 1.5rem clamp(1.25rem, 2.5vw, 1.75rem) 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	flex: 1;
}
.co-service-card h3 {
	font-size: var(--co-fs-xl);
	margin: 0;
	line-height: 1.1;
}
.co-service-card p {
	color: var(--co-text-soft);
	margin: 0;
	font-size: var(--co-fs-sm);
	line-height: 1.6;
	flex: 1;
}

/* ---- Footer : id (num + meta) à gauche, arrow circle à droite ---- */
.co-service-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--co-line);
}
.co-service-id {
	display: inline-flex;
	align-items: baseline;
	gap: 0.7rem;
	min-width: 0;
}
.co-service-num {
	font-family: var(--co-font-display);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--co-primary-deep);
	font-weight: 400;
	line-height: 1;
	flex-shrink: 0;
}
.co-service-meta {
	font-size: 0.78rem;
	color: var(--co-muted);
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.co-service-arrow {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--co-bg-soft);
	color: var(--co-primary-deep);
	display: grid;
	place-items: center;
	font-size: 1rem;
	flex-shrink: 0;
	transition:
		background 400ms var(--co-ease),
		color 400ms var(--co-ease),
		transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.co-service-card:hover .co-service-arrow {
	background: var(--co-primary-deep);
	color: var(--co-white);
	transform: rotate(-45deg);
}

/* ---- Featured (Ostéo) : juste plus grand visuellement ---- */
.co-service-card--featured {
	background:
		radial-gradient(circle at 100% 0%, oklch(85% 0.06 75 / 0.12), transparent 55%),
		linear-gradient(170deg, oklch(94% 0.025 280) 0%, oklch(98% 0.008 285) 70%);
	border-color: transparent;
}
.co-service-card--featured .co-service-card-media {
	aspect-ratio: 16 / 11;
}
.co-service-card--featured .co-service-card-body {
	padding: var(--co-s-3) clamp(1.5rem, 2.5vw, 2rem) var(--co-s-3);
	gap: 0.8rem;
}
.co-service-card--featured h3 {
	font-size: var(--co-fs-2xl);
	line-height: 1.05;
}

/* ---- Hover : élévation cohérente ---- */
.co-service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 30px 60px -28px oklch(45% 0.06 280 / 0.28);
	border-color: oklch(80% 0.05 280 / 0.5);
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
	.co-services-grid {
		grid-template-columns: 1fr 1fr;
	}
	.co-service-card--featured {
		grid-column: span 2;
	}
	.co-service-card--featured .co-service-card-media {
		aspect-ratio: 16 / 7;
	}
}
@media (max-width: 600px) {
	.co-services-grid { grid-template-columns: 1fr; }
	.co-service-card--featured {
		grid-column: auto;
	}
	.co-service-card--featured .co-service-card-media {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Reconnaissance — split éditorial avec liste de features ---------- */
.co-recognition-layout {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.co-recognition-head {
	position: sticky;
	top: 6rem;
}
.co-recognition-head .co-eyebrow {
	margin-bottom: var(--co-s-2);
}
.co-recognition-head h2 {
	margin: 0 0 1.25rem;
	max-width: 14ch;
	font-size: var(--co-fs-3xl);
}
.co-recognition-head h2 em {
	font-style: italic;
	color: var(--co-primary-deep);
	font-variation-settings: "opsz" 144;
}
.co-recognition-head p {
	font-size: var(--co-fs-base);
	color: var(--co-text-soft);
	margin: 0;
	max-width: 30rem;
	line-height: 1.65;
}

.co-recognition-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.co-recognition-feature {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
	padding-block: 1.75rem;
	border-bottom: 1px solid oklch(60% 0.075 280 / 0.15);
	align-items: start;
	transition: padding-left 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.co-recognition-feature:first-child { padding-top: 0; }
.co-recognition-feature:last-child  { border-bottom: 0; }
.co-recognition-feature:hover {
	padding-left: 0.5rem;
}

.co-recognition-icon {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--co-soft);
	display: grid;
	place-items: center;
	color: var(--co-primary-deep);
	flex-shrink: 0;
	transition:
		background 400ms var(--co-ease),
		color 400ms var(--co-ease),
		transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.co-recognition-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}
.co-recognition-feature:hover .co-recognition-icon {
	background: var(--co-text);
	color: var(--co-white);
	transform: scale(1.06) rotate(-3deg);
}

.co-recognition-feature-body { min-width: 0; }
.co-recognition-num {
	font-family: var(--co-font-display);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--co-primary-deep);
	opacity: 0.55;
	letter-spacing: 0.08em;
	margin: 0 0 0.35rem;
	line-height: 1;
}
.co-recognition-feature h3 {
	font-size: var(--co-fs-xl);
	margin: 0 0 0.5rem;
	line-height: 1.15;
}
.co-recognition-feature p {
	margin: 0;
	color: var(--co-text-soft);
	font-size: var(--co-fs-sm);
	line-height: 1.6;
	max-width: 32rem;
}

@media (max-width: 860px) {
	.co-recognition-layout { grid-template-columns: 1fr; }
	.co-recognition-head { position: static; }
}

/* ---------- Formations dispensées ---------- */
.co-formations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--co-s-3);
	margin-top: var(--co-s-5);
}
.co-formation-item {
	padding: var(--co-s-4);
	background: var(--co-bg);
	border-radius: var(--co-radius);
	border: 1px solid var(--co-line);
	display: flex;
	flex-direction: column;
	gap: var(--co-s-2);
}
.co-formation-item h3 {
	font-size: var(--co-fs-xl);
	margin: 0;
}
.co-formation-item .co-formation-meta {
	font-size: var(--co-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--co-primary-deep);
	font-weight: 500;
}

/* ---------- Cabinet ---------- */
.co-cabinet {
	display: grid;
	grid-template-columns: 0.55fr 0.45fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: stretch;
}
.co-cabinet-info {
	display: flex;
	flex-direction: column;
	gap: var(--co-s-3);
}
.co-cabinet-info h2 { margin-bottom: var(--co-s-2); }
.co-cabinet-info-block {
	padding-block: var(--co-s-2);
	border-top: 1px solid var(--co-line);
}
.co-cabinet-info-block:last-child { border-bottom: 1px solid var(--co-line); }
.co-cabinet-info-block dt {
	font-size: var(--co-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--co-muted);
	margin-bottom: 0.35rem;
	font-weight: 500;
}
.co-cabinet-info-block dd {
	margin: 0;
	font-size: var(--co-fs-base);
	color: var(--co-text);
	line-height: 1.55;
}
.co-cabinet-info-block dd a {
	color: var(--co-text);
	border-bottom: 1px solid var(--co-line);
}
.co-cabinet-map {
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	min-height: 22rem;
	background: var(--co-surface);
}
.co-cabinet-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	min-height: 22rem;
	filter: saturate(0.7) hue-rotate(10deg);
}
@media (max-width: 860px) {
	.co-cabinet { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.co-faq-wrap {
	max-width: var(--co-container-sm);
	margin: 0 auto;
}
.co-faq-wrap > h2 { text-align: center; margin-bottom: var(--co-s-5); }
.co-faq-item {
	border-bottom: 1px solid var(--co-line);
}
.co-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding-block: var(--co-s-3);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--co-s-2);
	font-family: var(--co-font-display);
	font-size: var(--co-fs-lg);
	font-weight: 400;
	color: var(--co-text);
	transition: color var(--co-dur) var(--co-ease);
}
.co-faq-item summary::-webkit-details-marker { display: none; }
.co-faq-item summary::after {
	content: "+";
	font-size: 1.5rem;
	color: var(--co-primary-deep);
	transition: transform var(--co-dur) var(--co-ease);
	flex-shrink: 0;
	width: 1.5rem;
	text-align: center;
}
.co-faq-item[open] summary::after { transform: rotate(45deg); }
.co-faq-item[open] summary { color: var(--co-primary-deep); }
.co-faq-item-content {
	padding-bottom: var(--co-s-4);
	color: var(--co-text-soft);
	max-width: 90%;
}

/* ---------- Témoignages ---------- */
.co-temoignages-intro { text-align: center; margin-bottom: var(--co-s-5); }
.co-temoignages-intro h2 { max-width: 28rem; margin-inline: auto; }
.co-temoignages-grid {
	display: grid;
	/* min(100%, …) : sans lui, la piste reste bloquée à 18rem et déborde la page
	   sur les très petits écrans (scroll horizontal parasite). */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--co-s-3);
	/* Hauteurs indépendantes : déplier un avis n'étire pas les voisins */
	align-items: start;
}
.co-temoignage {
	background: var(--co-white);
	padding: var(--co-s-4);
	border-radius: var(--co-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--co-s-3);
	border: 1px solid var(--co-line);
}
.co-temoignage-quote {
	color: var(--co-text);
	font-size: var(--co-fs-base);
	line-height: 1.65;
	margin: 0;
	font-style: italic;
	position: relative;
	padding-top: 0;
	/* Tronqué à 3 lignes tant que l'avis n'est pas déplié */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.co-temoignage-quote-wrap.is-open .co-temoignage-quote,
.co-temoignage-quote-wrap.is-measuring .co-temoignage-quote {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}
/* Bouton « Lire la suite » (affiché par le JS seulement si le texte déborde) */
.co-temoignage-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.6rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-sm);
	font-weight: 600;
	color: var(--co-primary-deep);
}
/* Indispensable : sans ça, `display: inline-flex` ci-dessus écrase la règle
   `[hidden] { display: none }` du navigateur et le bouton reste toujours visible. */
.co-temoignage-more[hidden] { display: none; }
.co-temoignage-more { padding-block: 0.6rem; } /* cible tactile confortable */
.co-temoignage-more:hover { text-decoration: underline; }
.co-temoignage-more-ico {
	width: 1rem;
	height: 1rem;
	transition: transform 300ms var(--co-ease);
}
.co-temoignage-quote-wrap.is-open .co-temoignage-more-ico { transform: rotate(180deg); }
/* Le guillemet décoratif est porté par le conteneur : sinon la troncature
   (overflow: hidden) le couperait tant que l'avis n'est pas déplié. */
.co-temoignage-quote-wrap {
	position: relative;
	padding-top: var(--co-s-3);
}
.co-temoignage-quote-wrap::before {
	content: "\201C";
	position: absolute;
	top: -0.5rem;
	left: -0.25rem;
	font-family: var(--co-font-display);
	font-size: 3.5rem;
	line-height: 1;
	color: var(--co-soft);
	font-style: normal;
}
.co-temoignage-author {
	display: flex;
	align-items: center;
	gap: var(--co-s-2);
	margin-top: auto;
}
.co-temoignage-avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--co-surface);
	overflow: hidden;
	flex-shrink: 0;
}
.co-temoignage-avatar img,
.co-temoignage-avatar svg {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Étoiles de notation */
.co-stars {
	display: inline-flex;
	gap: 0.15rem;
	margin-bottom: var(--co-s-1);
}
.co-star {
	width: 1.05rem;
	height: 1.05rem;
	fill: var(--co-line);
}
.co-star.is-on {
	fill: oklch(80% 0.12 75);
}
.co-temoignage-name {
	font-weight: 500;
	font-size: var(--co-fs-sm);
	color: var(--co-text);
}
.co-temoignage-role {
	font-size: var(--co-fs-xs);
	color: var(--co-muted);
	margin: 0;
}

/* ---------- CTA Contact final ---------- */
.co-cta-final {
	background: var(--co-text);
	color: var(--co-white);
	border-radius: var(--co-radius-xl);
	padding: clamp(3rem, 6vw, 5rem);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.co-cta-final::before {
	content: "";
	position: absolute;
	inset: -20%;
	background: radial-gradient(circle at 30% 20%, oklch(72% 0.055 280 / 0.4), transparent 50%),
	            radial-gradient(circle at 80% 80%, oklch(78% 0.090 75 / 0.25), transparent 50%);
	pointer-events: none;
}
.co-cta-final > * { position: relative; z-index: 1; }
.co-cta-final h2 {
	color: var(--co-white);
	max-width: 36rem;
	margin: 0 auto var(--co-s-3);
}
.co-cta-final h2 em {
	color: var(--co-soft);
	font-style: italic;
}
.co-cta-final p {
	color: oklch(85% 0.02 280);
	max-width: 32rem;
	margin: 0 auto var(--co-s-4);
	font-size: var(--co-fs-lg);
}
.co-cta-final .co-btn--primary {
	background: var(--co-white);
	color: var(--co-text);
}
.co-cta-final .co-btn--primary:hover {
	background: var(--co-soft);
}

/* ---------- Footer ---------- */
.co-footer {
	background: var(--co-bg-soft);
	padding-block: var(--co-s-6) var(--co-s-4);
}
/* Section cabinet/maps tout en bas — collée au footer (même fond, pas de gap) */
.co-cabinet-section { padding-bottom: var(--co-s-5); }
.co-cabinet-section + .co-footer { margin-top: 0; }
.co-footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
	gap: var(--co-s-4);
	margin-bottom: var(--co-s-5);
}
.co-footer-col h4 {
	font-family: var(--co-font-body);
	font-size: var(--co-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
	color: var(--co-muted);
	margin-bottom: var(--co-s-2);
}
.co-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.co-footer-col a {
	color: var(--co-text);
	font-size: var(--co-fs-sm);
}
.co-footer-col a:hover { color: var(--co-primary-deep); }
/* Téléphone et « Écrire un message » : au milieu de l'adresse, ils passaient pour
   du texte. Teinte rosée, icône, soulignement franc et fond surligné : on voit
   qu'on peut cliquer. */
.co-footer-col a.co-footer-contact {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-left: -0.4rem;
	padding: 0.5rem 0.45rem;
	border-radius: 0.4rem;
	background: var(--co-surface);
	color: var(--co-primary-deep);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--co-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: background var(--co-dur) var(--co-ease), color var(--co-dur) var(--co-ease), text-decoration-color var(--co-dur) var(--co-ease);
}
.co-footer-col a.co-footer-contact:hover {
	background: var(--co-surface-2);
	color: oklch(45% 0.085 280);
	text-decoration-color: currentColor;
}
.co-footer-contact-ico { flex: none; display: grid; place-items: center; }
.co-footer-contact-ico svg { width: 0.95rem; height: 0.95rem; display: block; }
.co-footer-bottom {
	border-top: 1px solid var(--co-line);
	padding-top: var(--co-s-3);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--co-s-2);
	font-size: var(--co-fs-xs);
	color: var(--co-muted);
}
@media (max-width: 760px) {
	.co-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Reveal au scroll (vanilla, respecte prefers-reduced-motion) ---------- */
.co-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 800ms var(--co-ease), transform 800ms var(--co-ease);
}
.co-reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* Variant headings : un peu plus dramatique + petit blur cinématique */
.co-reveal--heading {
	transform: translateY(28px);
	filter: blur(4px);
	transition:
		opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.co-reveal--heading.is-visible {
	filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	.co-reveal { opacity: 1; transform: none; }
}

/* ---------- Style minimal Gutenberg pour blocs hérités ---------- */
.co-blk-hero, .co-blk-about, .co-blk-services, .co-blk-recognition,
.co-blk-formations, .co-blk-cabinet, .co-blk-faq, .co-blk-temoignages, .co-blk-cta {
	display: contents; /* on les "neutralise" : le PHP wrapper prend le relais */
}

/* =============================================================
   PAGES PRESTATION (motifs de consultation) — layouts variés
   ============================================================= */

/* ---------- Hero prestation ---------- */
.co-presta-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(32rem, 72vh, 46rem);
	padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 4.5rem);
	isolation: isolate;
}

/* Ostéopathie et ses pages enfants : hero photo haut, header transparent
   par-dessus, comme sur l'accueil. Sur ordinateur, on reprend exactement la
   hauteur du hero de l'accueil. */
.co-has-hero-image .co-presta-hero { min-height: clamp(40rem, 92vh, 58rem); }

/* Mobile : plein écran. 100svh (et non 100vh) : la hauteur reste stable quand la
   barre d'adresse du navigateur se rétracte, donc pas de saut au défilement. */
@media (max-width: 900px) {
	.co-has-hero-image .co-presta-hero {
		min-height: 100vh;
		min-height: 100svh;
	}
	/* Contact : le bandeau devient lui aussi plein écran, contenu calé en bas. */
	.co-has-hero-mobile .co-contact-hero {
		min-height: 100vh;
		min-height: 100svh;
		display: grid;
		align-items: end;
		padding-block: 7rem clamp(3rem, 9vw, 4.5rem);
	}
	.co-has-hero-mobile .co-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 100;
	}
	.co-has-hero-mobile .co-header:not(.is-scrolled) {
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-bottom-color: transparent;
	}
	.co-has-hero-mobile .co-header:not(.is-scrolled) .co-brand {
		color: oklch(98% 0.005 280);
		text-shadow: 0 1px 2px oklch(15% 0.02 280 / 0.5), 0 2px 18px oklch(15% 0.02 280 / 0.4);
	}
	.co-has-hero-mobile .co-header:not(.is-scrolled) .co-brand small {
		color: oklch(85% 0.03 280);
		text-shadow: 0 1px 2px oklch(15% 0.02 280 / 0.45);
	}
	.co-has-hero-mobile .co-header:not(.is-scrolled) .co-burger span {
		background: oklch(98% 0.005 280);
	}
	/* Menu ouvert : le fond derrière le header devient clair, on repasse donc à
	   l'habillage sombre (même correctif que sur l'accueil). */
	body.co-menu-open.co-has-hero-mobile .co-header:not(.is-scrolled) .co-brand {
		color: var(--co-text);
		text-shadow: none;
	}
	body.co-menu-open.co-has-hero-mobile .co-header:not(.is-scrolled) .co-brand small {
		color: var(--co-muted);
		text-shadow: none;
	}
	body.co-menu-open.co-has-hero-mobile .co-header:not(.is-scrolled) .co-burger span {
		background: var(--co-text);
	}
}
/* Sans image : dégradé pastel clair (celui d'origine) */
.co-presta-hero.no-image {
	background:
		radial-gradient(circle at 85% 0%, oklch(92% 0.035 280 / 0.7), transparent 55%),
		linear-gradient(180deg, var(--co-surface) 0%, var(--co-bg) 100%);
}
/* Avec image : full-bleed, ken-burns léger, texte clair */
.co-presta-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	animation: co-ken-burns 18s ease-in-out infinite alternate;
}
.co-presta-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
/* Le joli dégradé conservé, posé sur l'image */
.co-presta-hero.has-image .co-presta-hero-overlay {
	background:
		radial-gradient(circle at 82% 8%, oklch(72% 0.06 280 / 0.45), transparent 55%),
		linear-gradient(180deg, oklch(20% 0.03 280 / 0.30) 0%, oklch(16% 0.03 280 / 0.78) 100%);
}
.co-presta-hero.no-image .co-presta-hero-overlay {
	background: radial-gradient(circle at 85% 0%, oklch(88% 0.05 75 / 0.18), transparent 60%);
}
.co-presta-hero-inner { position: relative; z-index: 2; max-width: 60rem; }
/* Hero de la page Ostéopathie : encore un peu plus large */
.co-osteo-hero .co-presta-hero-inner { max-width: 64rem; }
.co-presta-hero h1 {
	font-size: clamp(2.1rem, 6vw, 5rem);
	overflow-wrap: break-word;
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 0 0 var(--co-s-3);
}
.co-presta-hero h1 em { font-style: italic; font-variation-settings: "opsz" 144; }
.co-presta-lead {
	font-size: var(--co-fs-base);
	max-width: 46rem;
	margin: 0 0 var(--co-s-4);
	line-height: 1.55;
}
/* Mobile : lead aligné sur le hero d'accueil (plus petit) + voile plus
   prononcé pour bien voir le texte sur l'image. Le titre reste grand. */
@media (max-width: 600px) {
	.co-presta-hero-inner > p:not(.co-eyebrow) { font-size: 0.875rem; line-height: 1.5; }
	.co-presta-hero.has-image .co-presta-hero-overlay {
		background:
			radial-gradient(circle at 82% 8%, oklch(70% 0.06 280 / 0.4), transparent 55%),
			linear-gradient(180deg, oklch(20% 0.04 280 / 0.45) 0%, oklch(13% 0.04 280 / 0.9) 100%);
	}
}
/* Couleurs selon fond */
.co-presta-hero.no-image h1 { color: var(--co-text); }
.co-presta-hero.no-image h1 em { color: var(--co-primary-deep); }
.co-presta-hero.no-image .co-presta-lead { color: var(--co-text-soft); }
.co-presta-hero.has-image h1 { color: oklch(99% 0.003 80); }
.co-presta-hero.has-image h1 em { color: oklch(88% 0.06 280); }
.co-presta-hero.has-image .co-eyebrow { color: oklch(90% 0.05 280); }
.co-presta-hero.has-image .co-presta-lead,
.co-presta-hero.has-image .co-presta-hero-inner > p:not(.co-eyebrow) { color: oklch(93% 0.012 280); }
/* Fil d'Ariane dans le hero, juste au-dessus de l'eyebrow */
.co-presta-hero .co-breadcrumb { padding-top: 0; margin-bottom: var(--co-s-2); }
.co-presta-hero.has-image .co-breadcrumb,
.co-presta-hero.has-image .co-breadcrumb a,
.co-presta-hero.has-image .co-breadcrumb [aria-current="page"] { color: oklch(88% 0.015 280); }
.co-presta-hero.has-image .co-breadcrumb li + li::before { color: oklch(80% 0.02 280 / 0.6); }

/* ---------- Section motif : zigzag éditorial ---------- */
.co-motif { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Bannière image large en tête de motif */
.co-motif-banner {
	position: relative;
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
	aspect-ratio: 21 / 8;
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	background:
		radial-gradient(circle at 25% 30%, oklch(86% 0.05 280 / 0.5), transparent 55%),
		radial-gradient(circle at 78% 75%, oklch(85% 0.05 75 / 0.32), transparent 55%),
		oklch(95% 0.02 285);
}
.co-motif-banner img,
.co-motif-banner figure,
.co-motif-banner figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-motif-banner figure { margin: 0; height: 100%; }
.co-motif-banner img:not([src]),
.co-motif-banner img[src=""] { visibility: hidden; }
.co-motif-num {
	position: absolute;
	top: 1.1rem; left: 1.5rem; z-index: 2;
	font-family: var(--co-font-display);
	font-style: italic;
	font-size: 2rem;
	color: oklch(99% 0.003 80);
	text-shadow: 0 2px 14px oklch(28% 0.04 280 / 0.45);
}

/* Colonnes : prose lisible + aside compact */
.co-motif-cols {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.co-motif-prose > h2 {
	font-size: var(--co-fs-2xl);
	margin: 0 0 var(--co-s-3);
	max-width: 20ch;
}
.co-motif-prose > p {
	color: var(--co-text-soft);
	line-height: 1.75;
	margin: 0 0 var(--co-s-2);
	max-width: 60ch;
}

/* Aside collant : sous-motifs en chips + références + CTA */
.co-motif-aside {
	position: sticky;
	top: 6rem;
	display: flex;
	flex-direction: column;
	gap: var(--co-s-3);
	padding: var(--co-s-3);
	background: var(--co-bg-soft);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
}
.co-motif-aside-label {
	font-size: var(--co-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 500;
	color: var(--co-muted);
	margin: 0 0 var(--co-s-2);
}
.co-motif-tags ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.co-motif-tags ul li {
	font-size: var(--co-fs-xs);
	font-weight: 500;
	color: var(--co-primary-deep);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	line-height: 1.2;
}
.co-motif-cta { margin-top: 0; width: 100%; justify-content: center; }

/* Références en bande pleine largeur, sous les 2 colonnes (3 colonnes) */
.co-motif-refs-band { margin-top: var(--co-s-4); }
.co-motif-refs-band .co-motif-refs {
	margin: 0;
	background: transparent;
	border: 0;
	padding: 0;
}
.co-motif-refs-band .co-motif-refs-label { margin-bottom: var(--co-s-3) !important; }
.co-motif-refs-band .co-motif-refs ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--co-s-2);
}
.co-motif-refs-band .co-motif-ref {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	padding: var(--co-s-3);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-bottom: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	height: 100%;
	transition: transform 400ms var(--co-ease), box-shadow 400ms var(--co-ease), border-color 400ms ease;
}
.co-motif-refs-band .co-motif-refs ul li:last-child .co-motif-ref { border-bottom: 1px solid var(--co-line); }
.co-motif-refs-band a.co-motif-ref:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px -22px oklch(45% 0.06 280 / 0.3);
	border-color: oklch(80% 0.05 280 / 0.5);
}
.co-motif-refs-band .co-motif-ref-arrow { margin-left: 0; }

@media (max-width: 860px) {
	.co-motif-banner { aspect-ratio: 16 / 9; }
	.co-motif-cols { grid-template-columns: 1fr; }
	.co-motif-aside { position: static; }
}

/* ---------- Références inline (section motif) ---------- */
.co-motif-refs {
	margin: var(--co-s-3) 0;
	padding: var(--co-s-3);
	background: var(--co-surface);
	border-radius: var(--co-radius);
	border: 1px solid oklch(80% 0.04 280 / 0.35);
}
.co-motif-refs-label {
	font-size: var(--co-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--co-primary-deep);
	margin: 0 0 var(--co-s-2) !important;
}
.co-motif-refs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.co-motif-refs ul li::before { content: none; }
.co-motif-refs ul li { padding-left: 0; }
.co-motif-ref {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
	text-decoration: none;
	color: inherit;
	padding: 0.4rem 0;
	border-bottom: 1px solid oklch(80% 0.04 280 / 0.25);
}
.co-motif-refs ul li:last-child .co-motif-ref { border-bottom: 0; }
.co-motif-ref-title { font-weight: 500; color: var(--co-text); }
.co-motif-ref-desc { font-size: var(--co-fs-sm); color: var(--co-text-soft); }
.co-motif-ref-arrow { color: var(--co-primary-deep); margin-left: auto; transition: transform var(--co-dur) var(--co-ease); }
.co-motif-ref-arrow svg { width: 1rem; height: 1rem; display: block; }
a.co-motif-ref:hover .co-motif-ref-title { color: var(--co-primary-deep); }
a.co-motif-ref:hover .co-motif-ref-arrow { transform: translate(3px, -3px); }
.co-motif-cta { margin-top: var(--co-s-2); }

/* ---------- Bande de réassurance (centralisée) — teinte chaude (sable/miel) ---------- */
.co-reassurance-band {
	background:
		radial-gradient(circle at 15% 20%, oklch(93% 0.05 75 / 0.55), transparent 60%),
		radial-gradient(circle at 85% 80%, oklch(92% 0.05 130 / 0.4), transparent 60%),
		oklch(96% 0.025 80);
	padding-block: var(--co-s-5);
}
.co-reassurance { text-align: center; }
.co-reassurance-title {
	font-family: var(--co-font-display);
	font-style: italic;
	font-size: var(--co-fs-xl);
	color: var(--co-accent-deep);
	margin: 0 0 var(--co-s-3);
}
.co-reassurance-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: var(--co-s-2) var(--co-s-5);
}
.co-reassurance-list li { display: inline-flex; align-items: center; gap: 0.7rem; font-size: var(--co-fs-base); color: var(--co-text); font-weight: 500; }
.co-reassurance-icon {
	display: grid; place-items: center;
	width: 2.4rem; height: 2.4rem;
	border-radius: 50%;
	background: oklch(99% 0.003 80 / 0.85);
	color: var(--co-accent-deep);
	flex-shrink: 0;
}
.co-reassurance-icon svg { width: 1.2rem; height: 1.2rem; }

/* ---------- Slider « autres motifs » (scroll-snap) ---------- */
.co-otherslider { overflow: hidden; }
.co-otherslider-head {
	display: flex; align-items: end; justify-content: space-between;
	gap: var(--co-s-3); margin-bottom: var(--co-s-4);
}
.co-otherslider-head h2 { margin: 0; }
.co-otherslider-nav { display: flex; gap: 0.6rem; }
.co-slider-prev, .co-slider-next {
	width: 3rem; height: 3rem;
	border-radius: 50%;
	border: 1px solid var(--co-line);
	background: var(--co-white);
	color: var(--co-text);
	font-size: 1.1rem;
	cursor: pointer;
	transition: all var(--co-dur) var(--co-ease);
}
.co-slider-prev:hover, .co-slider-next:hover { background: var(--co-text); color: var(--co-white); border-color: transparent; }
/* Marquee : boucle réelle et fluide (contenu dupliqué 1×, reset invisible) */
.co-otherslider-track {
	display: flex;
	width: max-content;
	padding-block: 0.5rem var(--co-s-2);
	animation: co-marquee var(--co-marquee-dur, 60s) linear infinite;
	will-change: transform;
}
.co-otherslider:hover .co-otherslider-track,
.co-otherslider-track:focus-within { animation-play-state: paused; }
@keyframes co-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.co-otherslider-track {
		animation: none;
		width: auto;
		overflow-x: auto;
		scrollbar-width: none;
	}
}
/* Tactile / petit écran : pas de marquee auto (cible mouvante = clics ratés).
   Carrousel à défilement tactile avec accroche douce. Le JS ne clone pas les
   tuiles dans ce cas. */
@media (max-width: 767px), (hover: none) {
	.co-otherslider-track {
		animation: none;
		width: auto;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: clamp(1.25rem, 5vw, 2.5rem);
		scroll-padding-left: clamp(1.25rem, 5vw, 2.5rem);
	}
	.co-otherslider-track::-webkit-scrollbar { display: none; }
	.co-otherslide { scroll-snap-align: start; }
}
.co-otherslide {
	/* marge (pas de gap) pour un raccord sans couture entre les 2 copies */
	margin-right: var(--co-s-3);
	flex: 0 0 21rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--co-s-4);
	aspect-ratio: 3 / 4;
	padding: var(--co-s-3);
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--co-text);
	transition: transform 500ms var(--co-ease), box-shadow 500ms var(--co-ease);
	border: 1px solid transparent;
}
.co-otherslide.co-hue-0 { background: radial-gradient(circle at 30% 20%, oklch(90% 0.05 280 / 0.8), oklch(95% 0.02 285)); }
.co-otherslide.co-hue-1 { background: radial-gradient(circle at 30% 20%, oklch(90% 0.05 75 / 0.7), oklch(96% 0.02 80)); }
.co-otherslide.co-hue-2 { background: radial-gradient(circle at 30% 20%, oklch(90% 0.05 145 / 0.6), oklch(96% 0.02 130)); }
/* En-tête de tuile : icône + flèche */
.co-otherslide-head { display: flex; align-items: center; justify-content: space-between; }
/* Vignette image (petite, format préservé, en bas de la case) */
.co-otherslide-thumb {
	margin-top: auto;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--co-radius);
	overflow: hidden;
	background: oklch(99% 0.003 80 / 0.5);
}
.co-otherslide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--co-ease); }
/* Survol : même effet que le bento (élévation + anneau lavande + léger zoom de
   la vignette), sans l'orange du a:hover global. */
.co-otherslide:hover,
.co-otherslide:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 28px 56px -30px oklch(45% 0.06 280 / 0.35);
	border-color: oklch(72% 0.055 280 / 0.55);
	color: var(--co-primary-deep);
}
.co-otherslide:hover .co-otherslide-thumb img { transform: scale(1.06); }
@media (max-width: 600px) {
	.co-otherslide { flex-basis: 15rem; aspect-ratio: 3 / 3.4; }
}
.co-otherslide-icon {
	width: 3.25rem; height: 3.25rem;
	border-radius: 50%;
	background: oklch(99% 0.003 80 / 0.7);
	display: grid; place-items: center;
	color: var(--co-primary-deep);
}
.co-otherslide-icon svg { width: 1.5rem; height: 1.5rem; }
.co-otherslide-label { font-family: var(--co-font-display); font-size: var(--co-fs-xl); line-height: 1.1; }
.co-otherslide-arrow { font-size: 1.3rem; color: var(--co-primary-deep); transition: transform var(--co-dur) var(--co-ease); }
.co-otherslide:hover .co-otherslide-arrow { transform: translateX(5px); }

/* ---------- Barre d'ancres flottante (bas) ---------- */
.co-motifbar {
	position: fixed;
	left: 50%;
	/* env(safe-area-inset-bottom) : sinon la barre tombe dans la zone du geste
	   système sur iPhone à encoche, et les taps sont interceptés par l'OS. */
	bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 150%);
	z-index: 70;
	max-width: calc(100vw - 2rem);
	background: oklch(28% 0.03 280 / 0.92);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid oklch(99% 0.003 80 / 0.12);
	border-radius: 999px;
	box-shadow: 0 18px 44px -18px oklch(20% 0.04 280 / 0.6);
	opacity: 0;
	transition: transform 500ms var(--co-ease), opacity 500ms var(--co-ease);
}
.co-motifbar.is-visible { transform: translate(-50%, 0); opacity: 1; }
.co-motifbar ul {
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	display: flex;
	gap: 0.2rem;
	overflow-x: auto;
	scrollbar-width: none;
	max-width: 100%;
}
.co-motifbar ul::-webkit-scrollbar { display: none; }
.co-motifbar a {
	display: block;
	white-space: nowrap;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: oklch(92% 0.015 280);
	transition: background var(--co-dur) var(--co-ease), color var(--co-dur) var(--co-ease);
}
.co-motifbar a:hover { background: oklch(99% 0.003 80 / 0.12); color: oklch(99% 0.003 80); }
.co-motifbar a.is-active {
	background: var(--co-white);
	color: var(--co-text);
}
@media (prefers-reduced-motion: reduce) {
	.co-motifbar { transition: opacity 300ms linear; }
	.co-motifbar.is-visible { transform: translate(-50%, 0); }
}

/* Champ motif d'origine (formulaire contact) */
.co-form-motif {
	background: var(--co-surface);
	border-left: 3px solid var(--co-primary);
	padding: 0.85rem 1.1rem;
	border-radius: var(--co-radius-sm);
	font-size: var(--co-fs-sm);
	margin-bottom: var(--co-s-3);
	color: var(--co-text);
}

/* ---------- Hub bento (page Ostéopathie → 5 pages prestation) ---------- */
.co-hub-head { max-width: 42rem; margin-bottom: var(--co-s-5); }
.co-hub-head h2 { margin: 0 0 var(--co-s-2); }
.co-hub-head p { color: var(--co-text-soft); margin: 0; }

.co-hub-bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(13.5rem, auto);
	gap: var(--co-s-2);
}
/* Ligne 1 : Douleurs (large) + Accompagnement + Voix.
   Ligne 2 : Santé femme/bébé (large) + Sport (large). */
.co-hub-tile:nth-child(1) { grid-column: span 3; order: 1; } /* Douleurs et tensions */
.co-hub-tile:nth-child(2) { grid-column: span 3; order: 2; } /* Accompagnement en douceur */
.co-hub-tile:nth-child(4) { grid-column: span 2; order: 3; } /* Santé de la femme et bébé */
.co-hub-tile:nth-child(3) { grid-column: span 2; order: 4; } /* Voix */
.co-hub-tile:nth-child(5) { grid-column: span 2; order: 5; } /* Sport */

.co-hub-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--co-s-2);
	padding: var(--co-s-3);
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--co-text);
	border: 1px solid oklch(100% 0 0 / 0);
	transition: transform 500ms var(--co-ease), box-shadow 500ms var(--co-ease), border-color 500ms var(--co-ease);
}
/* Teintes pastel de fond */
.co-hub-tile.co-hue-0 { background-color: oklch(94% 0.04 280); }
.co-hub-tile.co-hue-1 { background-color: oklch(95% 0.045 75); }
.co-hub-tile.co-hue-2 { background-color: oklch(95% 0.04 145); }
.co-hub-tile.co-hue-3 { background-color: oklch(94% 0.045 25); }

/* Icône épinglée en haut à droite de la case (margin-left:auto dans la
   colonne flex de la tuile). */
.co-hub-tile-icon {
	display: grid; place-items: center;
	width: 2.8rem; height: 2.8rem;
	margin-left: auto;
	border-radius: 50%;
	background: oklch(99% 0.003 80 / 0.7);
	color: var(--co-primary-deep);
	flex: none;
}
.co-hub-tile-icon svg { width: 1.35rem; height: 1.35rem; }
.co-hub-tile-body { display: flex; flex-direction: column; gap: 0.4rem; }
.co-hub-tile-title { font-family: var(--co-font-display); font-size: var(--co-fs-xl); line-height: 1.05; }
.co-hub-tile:nth-child(1) .co-hub-tile-title,
.co-hub-tile:nth-child(2) .co-hub-tile-title { font-size: var(--co-fs-2xl); }
/* Mini-texte explicatif visible sous chaque tuile */
.co-hub-tile-desc { font-size: var(--co-fs-sm); color: var(--co-text-soft); line-height: 1.45; }
.co-hub-tile-link {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-sm); font-weight: 600;
	color: var(--co-primary-deep);
	margin-top: 0.2rem;
}
.co-hub-tile-link span { transition: transform 400ms var(--co-ease); }
/* Survol : élévation douce + anneau lavande.
   On neutralise le a:hover global (sinon le texte passait en orange). */
.co-hub-tile:hover,
.co-hub-tile:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 32px 64px -32px oklch(40% 0.06 280 / 0.45);
	border-color: oklch(72% 0.055 280 / 0.55);
	color: var(--co-text);
}
.co-hub-tile:hover .co-hub-tile-link { color: var(--co-primary-deep); }
.co-hub-tile:hover .co-hub-tile-link span { transform: translateX(5px); }

@media (max-width: 860px) {
	.co-hub-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(12.5rem, auto); }
	.co-hub-tile:nth-child(1),
	.co-hub-tile:nth-child(2) { grid-column: span 2; }   /* les deux du haut pleine largeur */
	.co-hub-tile:nth-child(3),
	.co-hub-tile:nth-child(4) { grid-column: span 1; }   /* Voix + Femme cote a cote */
	.co-hub-tile:nth-child(5) { grid-column: span 2; }   /* Sport pleine largeur */
}
@media (max-width: 560px) {
	.co-hub-bento { grid-template-columns: 1fr; }
	.co-hub-tile:nth-child(1),
	.co-hub-tile:nth-child(2),
	.co-hub-tile:nth-child(3),
	.co-hub-tile:nth-child(4),
	.co-hub-tile:nth-child(5) { grid-column: span 1; }
}

/* =============================================================
   Page Ostéopathie — sections éditoriales (qu'est-ce que /
   déroulement / tarifs). Direction artistique variée par section.
   ============================================================= */

/* ---------- Qu'est-ce que l'ostéopathie : split + ondes du toucher ---------- */
.co-what-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}
.co-what-text h2 {
	font-size: var(--co-fs-3xl);
	margin: 0 0 var(--co-s-3);
	text-wrap: balance;
}
.co-what-text p {
	color: var(--co-text-soft);
	line-height: 1.8;
	max-width: 65ch;
	margin: 0 0 var(--co-s-3);
	text-wrap: pretty;
}
.co-what-text > p:first-of-type {
	font-size: var(--co-fs-lg);
	color: var(--co-text);
}
.co-what-text > p:last-child { margin-bottom: 0; }

/* Visuel : ondes concentriques émanant d'un point de contact */
.co-what-visual {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: var(--co-radius-xl);
	background:
		radial-gradient(circle at 50% 50%, oklch(95% 0.03 280) 0%, oklch(97% 0.012 80) 70%);
	overflow: hidden;
}
.co-ripple {
	position: relative;
	width: min(70%, 22rem);
	aspect-ratio: 1;
}
.co-ripple span:not(.co-ripple-core) {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid oklch(68% 0.06 280 / 0.5);
	opacity: 0;
	transform: scale(0.2);
	animation: co-ripple-out 5s var(--co-ease) infinite;
}
.co-ripple span:nth-child(2) { animation-delay: 1.25s; }
.co-ripple span:nth-child(3) { animation-delay: 2.5s; }
.co-ripple span:nth-child(4) { animation-delay: 3.75s; }
.co-ripple-core {
	position: absolute;
	inset: 0;
	width: 22%;
	height: 22%;
	margin: auto;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, var(--co-soft), var(--co-primary-deep));
	box-shadow: 0 10px 40px -8px oklch(55% 0.075 280 / 0.55);
	animation: co-ripple-pulse 5s var(--co-ease) infinite;
}
@keyframes co-ripple-out {
	0%   { opacity: 0; transform: scale(0.2); }
	18%  { opacity: 0.85; }
	100% { opacity: 0; transform: scale(1); }
}
@keyframes co-ripple-pulse {
	0%, 100% { transform: scale(0.92); }
	50%      { transform: scale(1.06); }
}

/* Trois principes fondateurs (triade réelle, pas de numéros) */
.co-principes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(3rem, 7vw, 5.5rem);
}
.co-principe {
	padding-top: 1.25rem;
	border-top: 1px solid var(--co-line);
}
.co-principe-dot {
	display: block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--co-primary);
	box-shadow: 0 0 0 4px oklch(72% 0.055 280 / 0.14);
	margin-bottom: 1rem;
}
.co-principe h3 {
	font-size: var(--co-fs-xl);
	margin: 0 0 0.4rem;
}
.co-principe p {
	color: var(--co-text-soft);
	font-size: var(--co-fs-sm);
	line-height: 1.55;
	margin: 0;
}

/* ---------- Déroulement : parcours vertical numéroté, rail qui se remplit ---------- */
.co-flow-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.co-flow-head h2 { font-size: var(--co-fs-3xl); margin: 0 0 var(--co-s-2); text-wrap: balance; }
.co-flow-head p { color: var(--co-text-soft); line-height: 1.7; margin: 0; max-width: 60ch; }
.co-flow-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--co-s-3) !important;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--co-white);
	border: 1px solid var(--co-line);
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-primary-deep);
	width: fit-content;
}
.co-flow-clock { width: 1.1rem; height: 1.1rem; }

.co-flow-wrap { position: relative; max-width: 46rem; }
.co-flow-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}
.co-flow-rail {
	position: absolute;
	left: 1.4rem;
	top: 0.6rem;
	bottom: 1.4rem;
	width: 2px;
	background: oklch(88% 0.025 280);
	border-radius: 2px;
	overflow: hidden;
}
.co-flow-rail-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--co-primary), var(--co-primary-deep));
	transform-origin: top;
	transform: scaleY(1);
}
.co-flow-step {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.co-flow-step:last-child { padding-bottom: 0; }
.co-flow-num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.85rem;
	height: 2.85rem;
	border-radius: 50%;
	background: var(--co-white);
	border: 1px solid var(--co-line);
	font-family: var(--co-font-display);
	font-size: 1.05rem;
	font-style: italic;
	color: var(--co-primary-deep);
	box-shadow: var(--co-shadow-sm);
	transition: border-color 500ms var(--co-ease), color 500ms var(--co-ease), transform 500ms var(--co-ease);
}
.co-flow-step.is-current .co-flow-num {
	border-color: var(--co-primary);
	color: var(--co-primary-deep);
	transform: scale(1.06);
}
.co-flow-body { padding-top: 0.4rem; }
.co-flow-body h3 { font-size: var(--co-fs-xl); margin: 0 0 0.35rem; }
.co-flow-body p { color: var(--co-text-soft); line-height: 1.6; margin: 0; max-width: 38rem; }

/* ---------- Tarifs : prose éditoriale + carte de réassurance ---------- */
.co-tarif-grid {
	display: grid;
	grid-template-columns: 1.3fr 0.95fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.co-tarif-text h2 { font-size: var(--co-fs-3xl); margin: 0 0 var(--co-s-3); text-wrap: balance; }
.co-tarif-text p {
	color: var(--co-text-soft);
	line-height: 1.8;
	max-width: 60ch;
	margin: 0 0 var(--co-s-3);
	text-wrap: pretty;
}
.co-tarif-text > p:first-of-type { font-size: var(--co-fs-lg); color: var(--co-text); }
.co-tarif-text > p:last-child { margin-bottom: 0; }
.co-tarif-card {
	position: relative;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border-radius: var(--co-radius-lg);
	background:
		radial-gradient(circle at 88% 8%, oklch(92% 0.045 280 / 0.6), transparent 60%),
		var(--co-white);
	border: 1px solid var(--co-line);
	box-shadow: var(--co-shadow);
	overflow: hidden;
}
.co-tarif-card::after {
	content: "";
	position: absolute;
	right: -30%;
	bottom: -40%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, oklch(78% 0.09 75 / 0.25), transparent 70%);
	pointer-events: none;
}
.co-tarif-card-label {
	font-family: var(--co-font-body);
	font-size: var(--co-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--co-muted);
	margin: 0 0 var(--co-s-3);
}
.co-tarif-points { list-style: none; margin: 0 0 var(--co-s-4); padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.co-tarif-points li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: var(--co-fs-sm);
	line-height: 1.45;
	color: var(--co-text);
}
.co-tarif-ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.05rem;
	border-radius: 50%;
	background: oklch(92% 0.045 145);
	color: oklch(45% 0.09 150);
}
.co-tarif-ico svg { width: 0.9rem; height: 0.9rem; }
.co-tarif-card .co-btn { width: 100%; justify-content: center; }

@media (max-width: 860px) {
	.co-what-grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
	.co-what-visual { order: -1; aspect-ratio: 16 / 10; }
	.co-principes { grid-template-columns: 1fr; gap: 0; }
	.co-principe { padding-block: 1.25rem; }
	.co-tarif-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.co-principes { margin-top: 2.5rem; }
}

/* Mouvement réduit : on fige les animations décoratives, états finaux visibles */
@media (prefers-reduced-motion: reduce) {
	.co-ripple span:not(.co-ripple-core) { animation: none; opacity: 0.4; transform: scale(0.85); }
	.co-ripple span:nth-child(4) { opacity: 0.25; transform: scale(1); }
	.co-ripple-core { animation: none; transform: scale(1); }
	.co-flow-rail-fill { transform: scaleY(1) !important; }
}

/* =============================================================
   Page Yoga
   ============================================================= */

/* ---------- Hero yoga : centré, orbe lavande qui respire ---------- */
.co-yoga-hero { position: relative; overflow: hidden; text-align: center; min-height: 90vh; min-height: 90svh; display: grid; place-items: center; padding-block: clamp(3rem, 7vw, 5rem); }
.co-yoga-hero-orb {
	position: absolute;
	top: -20%;
	left: 50%;
	width: min(70vw, 42rem);
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, oklch(92% 0.05 280 / 0.7), transparent 65%);
	z-index: 0;
	animation: co-breathe 9s var(--co-ease) infinite;
	pointer-events: none;
}
@keyframes co-breathe {
	0%, 100% { transform: translateX(-50%) scale(0.95); opacity: 0.75; }
	50%      { transform: translateX(-50%) scale(1.08); opacity: 1; }
}
.co-yoga-hero-inner { position: relative; z-index: 1; max-width: 46rem; }
.co-yoga-hero-inner .co-eyebrow { justify-content: center; }
.co-yoga-hero-inner h1 { font-size: var(--co-fs-4xl); margin: 0 0 var(--co-s-3); text-wrap: balance; }
.co-yoga-hero-inner > p { color: var(--co-text-soft); font-size: var(--co-fs-lg); line-height: 1.7; margin: 0 auto var(--co-s-4); max-width: 40rem; }
.co-yoga-hero-inner .co-btn { margin-top: 0; }

/* ---------- Intro : tradition + définition côte à côte ---------- */
.co-yoga-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.co-yoga-intro-grid .co-prose-section { max-width: none; margin: 0; }

/* ---------- Trois piliers : onglets + scène en fondu ---------- */
.co-pillars-head { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.co-pillars-head .co-blk-yoga-deroulement > :first-child { margin-top: 0; }
.co-pillars-head h2 { font-size: var(--co-fs-3xl); margin: 0 0 var(--co-s-2); text-wrap: balance; }
.co-pillars-head p { color: var(--co-text-soft); margin: 0; line-height: 1.7; }
.co-pillars { display: grid; grid-template-columns: minmax(13rem, 17rem) 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.co-pillars-nav { display: flex; flex-direction: column; gap: 0.6rem; }
/* Astuce d'usage : discrète, en italique, mais elle lève l'ambiguïté sur le fait
   que les piliers sont des boutons. */
.co-pillars-tip {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.6rem 0.15rem;
	font-style: italic;
	font-size: var(--co-fs-xs);
	line-height: 1.3;
	color: var(--co-muted);
}
.co-pillars-tip-arrow { flex: none; display: grid; place-items: center; color: var(--co-primary-deep); }
.co-pillars-tip-arrow svg { width: 0.95rem; height: 0.95rem; display: block; }
.co-pillar-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	text-align: left;
	padding: 0.9rem 1.1rem;
	border-radius: var(--co-radius);
	border: 1px solid var(--co-line);
	background: var(--co-white);
	cursor: pointer;
	transition: border-color var(--co-dur) var(--co-ease), background var(--co-dur) var(--co-ease), transform var(--co-dur) var(--co-ease), box-shadow var(--co-dur) var(--co-ease);
}
.co-pillar-tab-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.co-pillar-tab:hover { transform: translateX(3px); border-color: oklch(80% 0.05 280 / 0.7); box-shadow: var(--co-shadow-sm); }
.co-pillar-tab.is-active {
	background: var(--co-surface);
	border-color: var(--co-primary);
	box-shadow: inset 3px 0 0 var(--co-primary-deep);
}
.co-pillar-tab-title { font-family: var(--co-font-display); font-size: var(--co-fs-lg); color: var(--co-text); }
.co-pillar-tab.is-active .co-pillar-tab-title { color: var(--co-primary-deep); }
.co-pillar-tab-sub { font-size: var(--co-fs-sm); color: var(--co-text-soft); }
.co-pillar-tab.is-active .co-pillar-tab-sub { color: var(--co-primary-deep); }
.co-pillar-tab-chevron {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--co-primary-deep);
	opacity: 0.4;
	transition: transform var(--co-dur) var(--co-ease), opacity var(--co-dur) var(--co-ease);
}
.co-pillar-tab-chevron svg { width: 1.05rem; height: 1.05rem; display: block; }
.co-pillar-tab:hover .co-pillar-tab-chevron { opacity: 0.8; transform: translateX(2px); }
.co-pillar-tab.is-active .co-pillar-tab-chevron { opacity: 1; transform: translateX(2px); }

.co-pillars-stage { display: grid; }
.co-pillar-panel {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 520ms var(--co-ease), transform 520ms var(--co-ease), visibility 520ms;
}
.co-pillar-panel.is-active { opacity: 1; visibility: visible; transform: none; }
.co-pillar-visual {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--co-radius-lg);
	color: var(--co-primary-deep);
}
.co-pillar-panel.co-hue-0 .co-pillar-visual { background: radial-gradient(circle at 35% 30%, oklch(92% 0.05 280 / 0.9), oklch(96% 0.02 285)); }
.co-pillar-panel.co-hue-1 .co-pillar-visual { background: radial-gradient(circle at 35% 30%, oklch(93% 0.05 75 / 0.85), oklch(96% 0.02 80)); color: oklch(50% 0.09 65); }
.co-pillar-panel.co-hue-2 .co-pillar-visual { background: radial-gradient(circle at 35% 30%, oklch(92% 0.05 145 / 0.8), oklch(96% 0.02 150)); color: oklch(45% 0.08 155); }
.co-pillar-glyph { width: clamp(5rem, 12vw, 7.5rem); }
.co-pillar-glyph svg { width: 100%; height: auto; display: block; }
.co-pillar-content h3 { font-size: var(--co-fs-2xl); margin: 0 0 0.6rem; }
.co-pillar-content h3 span { display: block; font-family: var(--co-font-body); font-size: var(--co-fs-sm); font-weight: 500; color: var(--co-primary-deep); letter-spacing: 0; margin-top: 0.2rem; }
.co-pillar-content p { color: var(--co-text-soft); line-height: 1.75; margin: 0; max-width: 42ch; }

/* ---------- Tableaux éditables (horaires / tarifs) ---------- */
.co-yoga-table-wrap > h2 { font-size: var(--co-fs-3xl); margin: 0 0 var(--co-s-4); text-wrap: balance; }
/* Cadre arrondi sur la figure (clippe proprement), cellules sans bordure par
   défaut Gutenberg (qui dépassaient aux coins arrondis). */
.co-yoga-table-wrap .wp-block-table {
	display: block;
	width: 100%;
	margin: 0;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	/* overflow-x: auto et non hidden : sur un petit écran, le tableau à 3 colonnes
	   dépasse et « hidden » coupait la colonne des cours sans permettre de la
	   faire défiler. Le rayon des coins reste appliqué. */
	overflow-x: auto;
	background: var(--co-white);
}
.co-yoga-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: var(--co-fs-sm);
}
.co-yoga-table-wrap :is(th, td) { border: 0; }
.co-yoga-table-wrap thead th {
	text-align: left;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--co-primary-deep);
	background: var(--co-surface);
	padding: 0.85rem 1.1rem;
}
.co-yoga-table-wrap tbody td {
	padding: 0.85rem 1.1rem;
	border-top: 1px solid var(--co-line);
	color: var(--co-text);
	vertical-align: top;
}
.co-yoga-table-wrap tbody td:first-child { font-weight: 600; }
.co-yoga-table-wrap tbody td:nth-child(2) { font-family: var(--co-font-display); color: var(--co-primary-deep); white-space: nowrap; }
.co-yoga-table-wrap tbody tr:hover td { background: oklch(97% 0.012 280); }
.co-yoga-table-wrap p { color: var(--co-text-soft); font-size: var(--co-fs-sm); margin: var(--co-s-3) 0 0; }
.co-yoga-pricing .co-yoga-table-wrap { max-width: 52rem; }

/* Section horaires : image (gauche) + planning (droite), pleine largeur */
.co-yoga-schedule-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.co-yoga-schedule-media {
	position: relative;
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	min-height: 22rem;
	background-size: cover;
	background-position: center;
	display: grid;
	place-items: center;
}
.co-yoga-schedule-media.is-empty {
	background: radial-gradient(circle at 32% 26%, oklch(92% 0.05 280 / 0.95), oklch(95% 0.03 145));
	color: var(--co-primary-deep);
}
.co-yoga-schedule-motif { width: clamp(6rem, 14vw, 9rem); }
.co-yoga-schedule-motif svg { width: 100%; height: auto; display: block; }
.co-yoga-schedule-body { align-self: center; max-width: none; }
.co-yoga-schedule-body > h2 { margin-top: 0; }
/* Galerie défilante (plusieurs photos) : fondu enchaîné automatique */
.co-yoga-slideshow .co-yoga-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s var(--co-ease);
}
.co-yoga-slideshow .co-yoga-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.co-yoga-slideshow .co-yoga-slide { transition: none; }
}
@media (max-width: 760px) {
	.co-yoga-schedule-grid { grid-template-columns: 1fr; }
	/* Sur ordinateur la galerie s'étire sur toute la hauteur du planning : elle
	   est nettement portrait. Une bande de 13rem sur mobile revenait à zoomer au
	   centre de chaque photo. On conserve donc un format proche. */
	.co-yoga-schedule-media {
		/* Jamais 0 : le conteneur est vide (photo en fond), sa hauteur ne
		   tiendrait qu'à aspect-ratio et s'effondrerait sur Safari iOS. 20rem
		   reste sous la hauteur donnée par le ratio, la mise en page ne bouge pas. */
		min-height: 20rem;
		aspect-ratio: 4 / 5;
		max-height: 34rem;
		order: -1;
	}
}

@media (max-width: 860px) {
	.co-yoga-intro-grid { grid-template-columns: 1fr; }
	.co-pillars { grid-template-columns: 1fr; }
	/* Boutons empilés, pleine largeur : la bande défilable ne se lisait pas
	   comme un menu (même correctif que les systèmes de la page Formations). */
	.co-pillar-tab:hover { transform: none; }
	.co-pillar-panel { grid-template-columns: 1fr; }
	.co-pillar-visual { order: -1; aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
	.co-yoga-hero-orb { animation: none; }
	.co-pillar-panel { transition: opacity 200ms linear, visibility 200ms; transform: none; }
}

/* =============================================================
   Mention bilingue (consultations FR + EN) avec petits drapeaux
   ============================================================= */
.co-bilingual {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-text-soft);
	line-height: 1.3;
}
.co-flags { display: inline-flex; gap: 0.3rem; flex: none; }
.co-flag {
	display: block;
	width: 1.4rem;
	height: 0.95rem;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.1), 0 1px 2px oklch(0% 0 0 / 0.18);
	flex: none;
}
.co-flag svg { width: 100%; height: 100%; display: block; }
.co-bilingual--hero { margin-top: var(--co-s-2); }
.co-bilingual--footer { margin-top: var(--co-s-3); }
/* Sur les heros à image (texte clair), le libellé passe en clair */
.co-presta-hero.has-image .co-bilingual--hero { color: oklch(93% 0.012 280); }

/* =============================================================
   Raffinements page Ostéopathie (timeline 2 col, réseau, FAQ 2 col)
   ============================================================= */

/* Déroulement : tête à gauche (sticky), parcours à droite sur desktop */
@media (min-width: 861px) {
	.co-flow .co-container {
		display: grid;
		grid-template-columns: 1fr minmax(0, 27rem);
		gap: clamp(3rem, 8vw, 7rem);
		align-items: start;
	}
	.co-flow-head { margin-bottom: 0; position: sticky; top: 6rem; max-width: 40rem; }
	/* Colonne gauche large, timeline plus étroite collée à droite, grand espace au milieu. */
	.co-flow-wrap { margin-left: auto; max-width: none; }
}

/* Réseau de thérapeutes : bandeau soigné avec motif réseau */
.co-reseau {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--co-radius-xl);
	background:
		radial-gradient(circle at 14% 18%, oklch(93% 0.045 280 / 0.85), transparent 58%),
		linear-gradient(135deg, var(--co-surface) 0%, var(--co-bg-soft) 100%);
	border: 1px solid var(--co-line);
}
.co-reseau-visual { width: clamp(8rem, 18vw, 12rem); color: var(--co-primary); }
.co-reseau-visual svg { width: 100%; height: auto; display: block; }
.co-reseau-body > :first-child { margin-top: 0; }
.co-reseau-body h2 { font-size: var(--co-fs-2xl); margin-bottom: var(--co-s-2); }
.co-reseau-body p { color: var(--co-text-soft); line-height: 1.7; max-width: 52ch; margin: 0; }
.co-reseau-body .co-btn { margin-top: var(--co-s-3); }
@media (max-width: 720px) {
	.co-reseau { grid-template-columns: 1fr; }
	.co-reseau-visual { width: 7rem; }
}

/* FAQ ostéo en 2 colonnes (l'accordéon est costaud) */
.co-faq-wrap--wide { max-width: var(--co-container); }
@media (min-width: 861px) {
	.co-faq-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
}

/* =============================================================
   Raffinements page Yoga (cartes intro, types, pricing, QualiCert)
   ============================================================= */

/* Tradition + Qu'est-ce que le yoga : deux cartes au survol */
.co-yoga-card {
	position: relative;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: var(--co-radius-lg);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	box-shadow: var(--co-shadow-sm);
	transition: transform 500ms var(--co-ease), box-shadow 500ms var(--co-ease), border-color 500ms var(--co-ease);
	max-width: none;
}
.co-yoga-card:hover { transform: translateY(-6px); box-shadow: var(--co-shadow-lg); border-color: oklch(80% 0.05 280 / 0.6); }
.co-yoga-card-mark { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--co-s-3); border-radius: 50%; background: var(--co-surface); color: var(--co-primary-deep); }
.co-yoga-card-mark svg { width: 1.5rem; height: 1.5rem; }
.co-yoga-card h2 { font-size: var(--co-fs-2xl); margin: 0 0 var(--co-s-2); }
.co-yoga-card p { color: var(--co-text-soft); line-height: 1.7; margin: 0; }

/* Horaires : intro */
.co-yoga-schedule-lead { color: var(--co-text-soft); line-height: 1.7; max-width: 52ch; margin: 0 0 var(--co-s-4); }

/* Types de cours : cartes au lieu d'une liste plate */
.co-blk-yoga-types ul {
	list-style: none;
	margin: var(--co-s-3) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--co-s-2);
}
.co-blk-yoga-types li {
	padding: 1.3rem 1.5rem;
	border-radius: var(--co-radius);
	background: var(--co-surface);
	color: var(--co-text-soft);
	font-size: var(--co-fs-sm);
	line-height: 1.6;
}
.co-blk-yoga-types li::before { display: none; }
.co-blk-yoga-types li strong { display: block; font-family: var(--co-font-display); font-size: var(--co-fs-lg); font-weight: 500; color: var(--co-text); margin-bottom: 0.35rem; }

/* Infos pratiques : grille de puces douces */
.co-blk-yoga-infos ul {
	list-style: none;
	margin: var(--co-s-3) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.75rem;
}
.co-blk-yoga-infos li {
	position: relative;
	padding: 0.85rem 1.1rem 0.85rem 2.5rem;
	border-radius: var(--co-radius);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	color: var(--co-text);
	font-size: var(--co-fs-sm);
	line-height: 1.4;
}
.co-blk-yoga-infos li::before {
	content: "";
	position: absolute;
	left: 1.1rem;
	top: 1.15rem;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--co-primary);
}

/* Pricing cards (depuis le tableau éditable) */
.co-yoga-pricing-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.co-yoga-pricing-head h2 { font-size: var(--co-fs-3xl); margin: 0; text-wrap: balance; }
.co-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--co-s-3); }
.co-price-card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--co-radius-lg);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	box-shadow: var(--co-shadow-sm);
	transition: transform 450ms var(--co-ease), box-shadow 450ms var(--co-ease), border-color 450ms var(--co-ease);
}
.co-price-card:hover { transform: translateY(-6px); box-shadow: var(--co-shadow-lg); border-color: oklch(78% 0.06 280 / 0.6); }
.co-price-name { font-family: var(--co-font-display); font-size: var(--co-fs-lg); color: var(--co-text); }
.co-price-amount { font-family: var(--co-font-display); font-size: var(--co-fs-2xl); color: var(--co-primary-deep); margin: 0.4rem 0 0.1rem; line-height: 1; }
.co-price-detail { font-size: var(--co-fs-sm); color: var(--co-text-soft); line-height: 1.5; margin: 0.5rem 0 var(--co-s-3); flex: 1 1 auto; }
.co-price-cta {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	background: var(--co-surface);
	color: var(--co-primary-deep);
	font-size: var(--co-fs-sm); font-weight: 600;
	text-decoration: none;
	transition: background var(--co-dur) var(--co-ease), color var(--co-dur) var(--co-ease), transform var(--co-dur) var(--co-ease);
}
.co-price-cta:hover { background: var(--co-primary-deep); color: var(--co-white); transform: translateY(-1px); }
.co-price-card.co-hue-1 .co-price-amount { color: oklch(55% 0.1 65); }
.co-price-card.co-hue-2 .co-price-amount { color: oklch(48% 0.09 155); }
.co-price-card.co-hue-3 .co-price-amount { color: oklch(52% 0.1 25); }

/* Bandeau QualiCert (logo + texte à droite) */
.co-qualicert {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 1.75rem);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--co-radius-lg);
	background: var(--co-surface);
}
.co-qualicert-badge {
	flex: none;
	display: grid; place-items: center;
	width: 5.5rem; height: 3.25rem;
	border-radius: var(--co-radius-sm);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	font-family: var(--co-font-display);
	font-size: var(--co-fs-sm);
	font-weight: 600;
	color: var(--co-primary-deep);
}
.co-qualicert-text p { margin: 0; color: var(--co-text-soft); font-size: var(--co-fs-sm); line-height: 1.6; }
.co-qualicert-logo { flex: none; height: clamp(3rem, 8vw, 4.25rem); width: auto; border-radius: var(--co-radius-sm); }
@media (max-width: 560px) {
	.co-qualicert { flex-direction: column; align-items: flex-start; }
}

/* --- Pricing : période, liste à puces, carte mise en avant --- */
.co-price-period { font-size: var(--co-fs-sm); color: var(--co-text-soft); }
.co-price-list { list-style: none; margin: var(--co-s-2) 0 var(--co-s-3); padding: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; }
.co-price-list li { position: relative; padding-left: 1.4rem; font-size: var(--co-fs-sm); color: var(--co-text); line-height: 1.4; }
.co-price-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--co-primary); }
.co-price-card.is-featured { border-color: var(--co-primary); box-shadow: 0 24px 50px -28px oklch(55% 0.075 280 / 0.5); }
.co-price-card.is-featured .co-price-cta { background: var(--co-primary-deep); color: var(--co-white); }
.co-price-tag {
	position: absolute;
	top: -0.7rem;
	left: clamp(1.25rem, 3vw, 1.75rem);
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: var(--co-primary-deep);
	color: var(--co-white);
	font-size: var(--co-fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.co-price-card { position: relative; }

/* =============================================================
   Hero yoga : fil d'Ariane centré + images flottantes (up/down)
   ============================================================= */
.co-yoga-hero { position: relative; overflow: hidden; text-align: center; min-height: 90vh; min-height: 90svh; display: grid; place-items: center; padding-block: clamp(3rem, 7vw, 5rem); }
.co-yoga-breadcrumb { display: flex; justify-content: center; margin-bottom: 0.6rem; }
.co-yoga-breadcrumb .co-breadcrumb { padding: 0; font-size: var(--co-fs-xs); justify-content: center; }
.co-yoga-floats { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.co-yoga-float {
	position: absolute;
	border-radius: var(--co-radius-lg);
	box-shadow: var(--co-shadow);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	will-change: transform;
	animation: co-yfloat 7s var(--co-ease) infinite alternate;
}
.co-yoga-float--1 { left: 1%;   top: 15%; width: 11.5rem; height: 15rem; background: linear-gradient(160deg, oklch(90% 0.05 280), oklch(85% 0.06 300)); animation-duration: 6.5s; }
.co-yoga-float--2 { left: 12%;  top: 40%; width: 13rem;   height: 17rem; background: linear-gradient(160deg, oklch(92% 0.05 75), oklch(88% 0.06 60));  animation-duration: 8s;   animation-delay: -1.5s; }
.co-yoga-float--3 { left: 8%;   top: 65%; width: 7.5rem;  height: 10rem; background: linear-gradient(160deg, oklch(91% 0.05 145), oklch(88% 0.05 160)); animation-duration: 7.2s; animation-delay: -3s; }
.co-yoga-float--4 { right: 1%;  top: 14%; width: 11.5rem; height: 15rem; background: linear-gradient(200deg, oklch(91% 0.05 145), oklch(88% 0.06 130)); animation-duration: 7.6s; animation-delay: -2s; }
.co-yoga-float--5 { right: 12%; top: 39%; width: 13rem;   height: 17rem; background: linear-gradient(200deg, oklch(90% 0.05 280), oklch(86% 0.06 270)); animation-duration: 6.8s; animation-delay: -0.8s; }
.co-yoga-float--6 { right: 8%;  top: 64%; width: 7.5rem;  height: 10rem; background: linear-gradient(200deg, oklch(92% 0.05 75), oklch(88% 0.06 80));  animation-duration: 8.2s; animation-delay: -3.5s; }
/* Vignette avec photo : la hauteur suit les proportions de l'image (image
   entière, qui remplit le cadre, sans bande ni coupe). */
.co-yoga-float.co-yoga-float--img { height: auto; background: none; }
.co-yoga-float--img img { width: 100%; height: auto; display: block; border-radius: inherit; }
@keyframes co-yfloat {
	from { transform: translateY(-10px) rotate(-1.5deg); }
	to   { transform: translateY(12px) rotate(1.5deg); }
}
.co-yoga-hero-inner { position: relative; z-index: 1; }
@media (max-width: 1100px) {
	.co-yoga-float--1, .co-yoga-float--4 { width: 9rem; height: 12rem; }
	.co-yoga-float--2, .co-yoga-float--5 { width: 10.5rem; height: 13.5rem; }
	.co-yoga-float--3, .co-yoga-float--6 { display: none; }
}
/* Tablette uniquement (le mobile bascule à 700px et repositionne tout) : les
   vignettes sont repoussées vers les bords, car elles serrent le texte. Les deux
   du milieu, les plus proches, sont les plus décalées. */
@media (min-width: 701px) and (max-width: 1100px) {
	.co-yoga-float--1 { left: -1%; }
	.co-yoga-float--4 { right: -1%; }
	.co-yoga-float--2 { left: 1.5%; }
	.co-yoga-float--5 { right: 1.5%; }
}
@media (max-width: 700px) {
	.co-yoga-float { box-shadow: var(--co-shadow-sm); opacity: 0.92; }
	/* 4 vignettes en mobile : deux en haut, deux en bas (coins), même taille. */
	.co-yoga-float--2, .co-yoga-float--5 { display: none; }
	.co-yoga-float--1 { left: -3%; top: 4%; bottom: auto; width: 6.5rem; height: 8.5rem; }
	.co-yoga-float--4 { right: -3%; top: 4%; bottom: auto; width: 6.5rem; height: 8.5rem; }
	.co-yoga-float--3 { display: block; left: -3%; top: auto; bottom: 4%; width: 6.5rem; height: 8.5rem; }
	.co-yoga-float--6 { display: block; right: -3%; top: auto; bottom: 4%; width: 6.5rem; height: 8.5rem; }
}

/* Le texte du hero ne doit jamais chevaucher les vignettes flottantes.
   Sa largeur suit l'espace réellement libre entre les images (les vignettes
   occupent environ 12% + leur largeur de chaque côté), et sa taille est fluide.
   Sous 700px les vignettes passent dans les coins : le texte reprend sa largeur. */
@media (min-width: 701px) {
	.co-yoga-hero-inner { max-width: clamp(20rem, calc(72vw - 24rem), 46rem); }
}
.co-yoga-hero-inner h1 {
	font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.6rem);
	overflow-wrap: break-word;
}
.co-yoga-hero-inner > p { font-size: clamp(1rem, 0.94rem + 0.35vw, 1.25rem); }

/* Page Ostéopathie : grille du réseau sous le bloc d'intro */
.co-reseau-cards { margin-top: clamp(2rem, 4vw, 3rem); }

/* Références : quand un document PDF est attaché, la carte affiche
   « Voir le document » avec une icône, à la place de « Visiter le site ». */
.co-ref-link--pdf {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.co-ref-link-ico,
.co-motif-ref-doc-ico {
	display: inline-grid;
	place-items: center;
	flex: none;
}
.co-ref-link-ico svg,
.co-motif-ref-doc-ico svg { width: 1.05rem; height: 1.05rem; }
.co-motif-ref-doc {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.45rem;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-sm);
	font-weight: 600;
	color: var(--co-primary-deep);
}

/* Une référence peut porter un site ET un document : la carte n'est alors plus
   cliquable dans son ensemble, elle expose les deux liens côte à côte. */
.co-ref-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.25rem;
	margin-top: auto;
	padding-top: 0.85rem;
}
.co-ref-actions .co-ref-link { margin-top: 0; }
.co-ref-actions .co-ref-link:hover { color: var(--co-primary-deep); }
.co-ref-actions .co-ref-link:hover span:not(.co-ref-link-ico) { transform: translateX(4px); }

.co-motif-ref-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 1.1rem;
	width: 100%;
	margin-top: 0.4rem;
}
.co-motif-ref-action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--co-fs-sm);
	font-weight: 600;
	color: var(--co-primary-deep);
	text-decoration: none;
}
.co-motif-ref-action .co-motif-ref-arrow { margin-left: 0; }
.co-motif-ref-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.co-motif-ref-action:hover .co-motif-ref-arrow { transform: translate(3px, -3px); }
.co-motif-ref-actions .co-motif-ref-doc { margin-top: 0; }

/* Page Ostéopathie : bandeau « Pour aller plus loin » (références utiles) */
.co-refs-band {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.75rem, 5vw, 3rem);
	background:
		radial-gradient(circle at 0% 0%, oklch(94% 0.04 280 / 0.5), transparent 60%),
		var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
	box-shadow: var(--co-shadow-sm);
}
.co-refs-band-glyph {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--co-soft);
	color: var(--co-primary-deep);
}
.co-refs-band-glyph svg { width: 1.6rem; height: 1.6rem; }
.co-refs-band-body h2 { margin: 0 0 0.35rem; font-size: var(--co-fs-xl); }
.co-refs-band-body p { margin: 0; color: var(--co-text-soft); line-height: 1.6; max-width: 58ch; }
.co-refs-band-cta { white-space: nowrap; }
@media (max-width: 760px) {
	.co-refs-band { grid-template-columns: auto 1fr; }
	.co-refs-band-cta { grid-column: 1 / -1; justify-self: start; }
}

/* --- Yoga thérapeutique : split + chips --- */
.co-yoga-therapy-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.co-yoga-therapy-grid .co-prose-section { max-width: none; margin: 0; }
.co-therapy-chips { list-style: none; margin: var(--co-s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.co-therapy-chips li { padding: 0.4rem 0.95rem; border-radius: 999px; background: var(--co-white); border: 1px solid var(--co-line); font-size: var(--co-fs-sm); font-weight: 500; color: var(--co-primary-deep); }
.co-therapy-chips li::before { display: none; }
.co-yoga-therapy-visual { display: grid; place-items: center; width: clamp(9rem, 22vw, 14rem); aspect-ratio: 1; border-radius: var(--co-radius-xl); background: radial-gradient(circle at 35% 30%, oklch(92% 0.05 145 / 0.85), oklch(96% 0.02 150)); color: oklch(45% 0.08 155); }
.co-yoga-therapy-visual svg { width: 46%; height: auto; }
@media (max-width: 760px) {
	.co-yoga-therapy-grid { grid-template-columns: 1fr; }
	.co-yoga-therapy-visual { order: -1; width: 8rem; }
}

/* --- Infos pratiques : texte (gauche) + photo de la salle (droite).
   La photo est un bloc image éditable de la section ; sans photo, la
   section reste en prose pleine largeur (pas de grille). --- */
.co-yoga-infos-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.co-yoga-infos-grid .co-prose-section { max-width: none; margin: 0; align-self: center; }
.co-yoga-infos-media {
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	min-height: 18rem;
	background-size: cover;
	background-position: center;
}
@media (max-width: 760px) {
	.co-yoga-infos-grid { grid-template-columns: 1fr; }
	/* Hauteur mobile tenue par min-height + ratio (jamais 0, cf. galerie horaires). */
	.co-yoga-infos-media { min-height: 14rem; aspect-ratio: 16 / 10; }
}

/* --- Yoga + ostéopathie : bandeau complémentarité --- */
.co-yoga-complement {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: var(--co-radius-xl);
	background: linear-gradient(135deg, var(--co-surface) 0%, oklch(95% 0.03 75) 100%);
	border: 1px solid var(--co-line);
}
.co-complement-motif { color: var(--co-primary); width: clamp(7rem, 16vw, 10rem); }
.co-complement-motif svg { width: 100%; height: auto; }
.co-complement-body > :first-child { margin-top: 0; }
.co-complement-body h2 { font-size: var(--co-fs-2xl); margin-bottom: var(--co-s-2); }
.co-complement-body p { color: var(--co-text-soft); line-height: 1.7; max-width: 50ch; margin: 0; }
.co-complement-body .co-btn { margin-top: var(--co-s-3); }
@media (max-width: 700px) {
	.co-yoga-complement { grid-template-columns: 1fr; }
	.co-complement-motif { width: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.co-yoga-float { animation: none; }
}

/* --- Yoga thérapeutique : 4 éléments sur une ligne avec icônes --- */
.co-yoga-therapy-head { max-width: 52rem; }
.co-therapy-points {
	list-style: none;
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.9rem;
}
.co-therapy-points li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.7rem;
	padding: 1.2rem 0.75rem;
	border-radius: var(--co-radius);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-text);
	line-height: 1.3;
	transition: transform 400ms var(--co-ease), box-shadow 400ms var(--co-ease);
}
.co-therapy-points li::before { display: none; }
.co-therapy-points li:hover { transform: translateY(-4px); box-shadow: var(--co-shadow); }
.co-tp-ico {
	display: grid; place-items: center;
	width: 2.6rem; height: 2.6rem;
	border-radius: 50%;
	background: oklch(92% 0.05 145 / 0.65);
	color: oklch(45% 0.085 155);
}
.co-tp-ico svg { width: 1.35rem; height: 1.35rem; }
@media (max-width: 620px) { .co-therapy-points { grid-template-columns: repeat(2, 1fr); } }

/* --- Infos pratiques : grille de cartes avec pastille --- */
.co-blk-yoga-infos ul {
	list-style: none;
	margin: var(--co-s-3) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.85rem;
}
.co-blk-yoga-infos li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 1.25rem;
	border-radius: var(--co-radius);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	color: var(--co-text);
	font-size: var(--co-fs-sm);
	line-height: 1.4;
	transition: transform 400ms var(--co-ease), box-shadow 400ms var(--co-ease), border-color 400ms var(--co-ease);
}
.co-blk-yoga-infos li:hover { transform: translateY(-3px); box-shadow: var(--co-shadow-sm); border-color: oklch(82% 0.05 280 / 0.6); }
.co-blk-yoga-infos li::before {
	content: "";
	position: static;
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background:
		oklch(92% 0.045 280) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5db8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

/* --- Pricing : prix sur une ligne, CTA aligné en bas, espacement --- */
.co-price-card { gap: 0.15rem; }
.co-price-amount { white-space: nowrap; }
.co-price-list { flex: 0 1 auto; margin: var(--co-s-3) 0 var(--co-s-3); }
.co-price-cta { margin-top: auto; }

/* =============================================================
   Page Contact
   ============================================================= */
.co-contact-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.co-contact-head h1 { font-size: var(--co-fs-3xl); margin: 0 0 var(--co-s-2); text-wrap: balance; }
.co-contact-head p { color: var(--co-text-soft); line-height: 1.7; margin: 0; }
.co-contact-main { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.co-contact-info { display: flex; flex-direction: column; gap: var(--co-s-3); }
.co-contact-info-item { display: flex; flex-direction: column; gap: 0.25rem; padding-bottom: var(--co-s-3); border-bottom: 1px solid var(--co-line); }
.co-contact-info-item:last-of-type { border-bottom: 0; padding-bottom: 0; }
.co-contact-info-label { font-size: var(--co-fs-xs); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--co-muted); }
.co-contact-info-value { font-size: var(--co-fs-base); color: var(--co-text); line-height: 1.5; }
a.co-contact-info-value { display: inline-block; padding-block: 0.35rem; transition: color var(--co-dur) var(--co-ease); }
a.co-contact-info-value:hover { color: var(--co-primary-deep); }
.co-contact-info .co-bilingual { margin-top: var(--co-s-2); }
.co-contact-form-intro { margin-bottom: var(--co-s-3); }
.co-contact-form-intro p { color: var(--co-text-soft); line-height: 1.7; margin: 0; }

/* Séparateur : carte pleine largeur, désaturée, qui revient en couleur au survol */
.co-contact-map-strip { position: relative; margin-block: 0; }
.co-contact-map { height: clamp(13rem, 26vw, 19rem); overflow: hidden; }
.co-contact-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.45) contrast(1.05) brightness(1.02); transition: filter 700ms var(--co-ease); }
.co-contact-map-strip:hover .co-contact-map iframe { filter: none; }
.co-contact-map::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, oklch(45% 0.06 280 / 0.16), transparent 22%, transparent 78%, oklch(45% 0.06 280 / 0.16));
	transition: opacity 700ms var(--co-ease);
}
.co-contact-map-strip:hover .co-contact-map::after { opacity: 0; }
.co-contact-map-pin {
	position: absolute;
	left: clamp(1rem, 4vw, 2.5rem);
	bottom: 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	background: var(--co-white);
	box-shadow: var(--co-shadow);
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-text);
	text-decoration: none;
	transition: transform var(--co-dur) var(--co-ease), color var(--co-dur) var(--co-ease);
}
.co-contact-map-pin:hover { transform: translateY(-2px); color: var(--co-primary-deep); }
.co-contact-map-pin svg { width: 1.1rem; height: 1.1rem; color: var(--co-primary-deep); flex: none; }
@media (max-width: 760px) {
	.co-contact-main { grid-template-columns: 1fr; }
}

/* =============================================================
   Correctifs responsive (audit multi-pages)
   ============================================================= */

/* Accueil : flèche des cartes visible au tactile (sinon révélée au :hover seul) */
@media (hover: none) {
	.co-indication-arrow { opacity: 1; transform: none; }
}
/* Accueil : pills de certifications, retour à la ligne autorisé (anti scroll horizontal) */
@media (max-width: 480px) {
	.co-trust-pill { white-space: normal; }
}
/* Accueil : hero un peu moins haut en tablette / mobile paysage (≤600px garde 100svh) */
@media (min-width: 601px) and (max-width: 860px) {
	.co-hero { min-height: clamp(34rem, 90svh, 52rem); }
}

/* Contact : champs de formulaire jamais plus larges que leur colonne (anti scroll horizontal) */
.co-field input, .co-field textarea, .co-field select { width: 100%; min-width: 0; }
.co-form-row > .co-field { min-width: 0; }
/* Contact : pin de carte, cible tactile pleine largeur en mobile */
@media (max-width: 600px) {
	.co-contact-map-pin { left: 1rem; right: 1rem; bottom: 0.75rem; min-height: 44px; padding-block: 0.7rem; justify-content: center; }
}

/* Prestation : réserver l'espace bas quand la barre d'ancres flottante existe */
@media (max-width: 980px) {
	body:has(.co-motifbar) { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px)); }
}
/* Prestation : grille des références maîtrisée 3 -> 2 -> 1 + anti-débordement */
.co-motif-refs-band .co-motif-refs ul { grid-template-columns: repeat(3, 1fr); }
.co-motif-refs-band .co-motif-ref-title { overflow-wrap: anywhere; }
@media (max-width: 860px) { .co-motif-refs-band .co-motif-refs ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .co-motif-refs-band .co-motif-refs ul { grid-template-columns: 1fr; } }
/* Prestation : cible tactile de la barre d'ancres ; numéro de motif fluide */
.co-motifbar a { padding-block: 0.85rem; }
.co-motif-num { font-size: clamp(1.5rem, 5vw, 2rem); top: clamp(0.6rem, 2vw, 1.1rem); left: clamp(0.9rem, 3vw, 1.5rem); }

/* Yoga : bouton tarif, cible tactile >= 44px */
.co-price-cta { padding-block: 0.8rem; min-height: 2.75rem; }

/* Références : filtres, cible tactile >= 44px */
.co-refs-filter { padding-block: 0.8rem; }

/* À propos : palier intermédiaire pour le hero 2 colonnes (861-1100px) */
@media (min-width: 861px) and (max-width: 1100px) {
	.co-approach { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); }
}

/* Formation : boutons de téléchargement empilés en mobile */
@media (max-width: 480px) {
	.co-form-downloads { flex-direction: column; align-items: stretch; }
	.co-form-downloads .co-btn { justify-content: center; }
}

/* =============================================================
   PAGE FORMATIONS
   ============================================================= */

/* Hero : texte + visuel éditable */
.co-form-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.co-form-hero-text h1 { font-size: clamp(2.05rem, 4vw, 3.3rem); line-height: 1.12; margin: 0.3rem 0 var(--co-s-2); }
.co-form-hero-text > p { color: var(--co-text-soft); font-size: var(--co-fs-base); max-width: 33rem; }
.co-form-hero-text .co-eyebrow { font-size: var(--co-fs-xs); }
.co-form-facts { list-style: none; margin: var(--co-s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.co-form-fact { font-size: var(--co-fs-xs); font-weight: 500; color: var(--co-primary-deep); background: var(--co-surface); border: 1px solid var(--co-line); border-radius: 999px; padding: 0.4rem 0.85rem; }
.co-form-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--co-s-2); margin-top: var(--co-s-4); }
.co-form-hero-media { position: relative; border-radius: var(--co-radius-lg); overflow: hidden; min-height: clamp(20rem, 40vw, 30rem); background-size: cover; background-position: center; box-shadow: var(--co-shadow); }
.co-form-hero-media.is-empty, .co-form-pedago-media.is-empty {
	display: grid; place-items: center; color: var(--co-primary-deep);
	background: radial-gradient(circle at 30% 25%, oklch(92% 0.05 280 / 0.95), oklch(95% 0.03 145));
	box-shadow: none; border: 1px solid var(--co-line);
}
.co-form-hero-glyph svg, .co-form-pedago-glyph svg { width: clamp(5rem, 12vw, 8rem); height: auto; opacity: 0.8; }

/* Pour qui : cartes profils */
.co-form-public-head { max-width: 46rem; margin-bottom: var(--co-s-6); }
.co-form-public-head > p { color: var(--co-text-soft); font-size: var(--co-fs-lg); }
.co-form-profiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--co-s-3); }
.co-form-profile {
	display: flex; align-items: center; gap: var(--co-s-3);
	background: var(--co-white); border: 1px solid var(--co-line); border-radius: var(--co-radius);
	padding: var(--co-s-3) var(--co-s-4); font-weight: 500;
	transition: transform var(--co-dur) var(--co-ease), border-color var(--co-dur) var(--co-ease);
}
.co-form-profile:hover { transform: translateY(-3px); border-color: var(--co-primary); }
.co-form-profile-icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--co-surface); color: var(--co-primary-deep); }
.co-form-profile-icon svg { width: 1.4rem; height: 1.4rem; }

/* Pédagogie : visuel + texte + principes */
.co-form-pedago-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.co-form-pedago-media { border-radius: var(--co-radius-lg); overflow: hidden; min-height: clamp(18rem, 34vw, 26rem); background-size: cover; background-position: center; box-shadow: var(--co-shadow); }
.co-form-pedago-text > p { color: var(--co-text-soft); }
.co-form-principles { list-style: none; margin: var(--co-s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--co-s-3); }
.co-form-principle { text-align: center; background: var(--co-surface); border-radius: var(--co-radius); padding: var(--co-s-3) var(--co-s-2); }
.co-form-principle strong { display: block; font-family: var(--co-font-display); font-size: var(--co-fs-2xl); color: var(--co-primary-deep); line-height: 1; }
.co-form-principle span { font-size: var(--co-fs-xs); color: var(--co-text-soft); }

/* Cours BM2 : grille récit (intro + fondamentaux + systèmes du corps) / fiche du cours */
/* Fiche latérale volontairement étroite : la largeur va aux 3 fondamentaux. */
.co-form-bm2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 16.5rem); gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
.co-form-bm2-main { min-width: 0; }
.co-form-bm2-intro { max-width: 44rem; margin-bottom: var(--co-s-5); }
.co-form-bm2-intro > p { color: var(--co-text-soft); }

/* Les 3 fondamentaux : rangée légère, mais des titres qui se lisent de loin. */
.co-form-fundamentals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.co-form-fundamental { border-left: 1px solid var(--co-line); padding-left: var(--co-s-3); padding-right: var(--co-s-2); }
.co-form-fundamental:first-child { border-left: 0; padding-left: 0; }
.co-form-fundamental-num { display: block; font-size: var(--co-fs-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--co-primary-deep); opacity: 0.6; margin-bottom: 0.3rem; }
.co-form-fundamental-title { font-size: var(--co-fs-lg); line-height: 1.2; margin: 0 0 0.45rem; }
.co-form-fundamental p { font-size: var(--co-fs-sm); color: var(--co-text-soft); margin: 0; line-height: 1.5; }

/* Onglets « Au programme » : formation ana/physio/patho ou cours postgrade */
.co-form-prog-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 var(--co-s-3); }
.co-form-prog-tab {
	appearance: none;
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	font-family: inherit;
	font-size: var(--co-fs-sm);
	font-weight: 600;
	color: var(--co-text-soft);
	cursor: pointer;
	transition: border-color var(--co-dur) var(--co-ease), color var(--co-dur) var(--co-ease), background var(--co-dur) var(--co-ease);
}
.co-form-prog-tab:hover { border-color: var(--co-primary); color: var(--co-primary-deep); }
.co-form-prog-tab:focus-visible { outline: 2px solid var(--co-primary); outline-offset: 2px; }
.co-form-prog-tab.is-active { background: var(--co-primary-deep); border-color: var(--co-primary-deep); color: var(--co-white); }
/* Panneaux empilés dans la même cellule de grille : la zone garde la hauteur
   du panneau le plus haut (pas de saut du contenu dessous), et le panneau
   actif apparaît en fondu + légère translation vers le bas. */
.co-form-prog-stage { display: grid; }
.co-form-prog-panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 420ms var(--co-ease), transform 420ms var(--co-ease), visibility 420ms;
}
.co-form-prog-panel.is-active { opacity: 1; visibility: visible; transform: none; }
/* Dans un panneau, la grille s'adapte au nombre de cartes : une carte seule
   (un thème) prend toute la largeur, les cartes du postgrade se partagent
   la ligne. */
.co-form-prog-panel .co-form-fundamentals { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
@media (max-width: 640px) {
	.co-form-prog-panel .co-form-fundamentals { grid-template-columns: 1fr; }
}

/* Module des systèmes, en pleine largeur sous la double colonne. Respiration
   franche : les deux blocs se lisent comme deux temps distincts. */
.co-form-systemes-block { margin-top: clamp(5rem, 9vw, 7.5rem); }

/* Fiche du cours : carte latérale, sticky sur grand écran (position: sticky ; désactivé en dessous de 980px) */
.co-form-bm2-card {
	position: sticky;
	top: 6rem;
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
	box-shadow: var(--co-shadow-sm);
	padding: clamp(1.1rem, 2vw, 1.4rem);
}
.co-form-bm2-card-label { font-size: var(--co-fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--co-muted); margin: 0 0 var(--co-s-2); }
.co-form-bm2-card-stats { display: flex; flex-direction: column; }
.co-form-bm2-card-stat { padding: 0.75rem 0; border-top: 1px solid var(--co-line); }
.co-form-bm2-card-stat:first-child { border-top: 0; padding-top: 0; }
.co-form-bm2-card-stat strong { display: block; font-family: var(--co-font-display); font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: 1.05; color: var(--co-primary-deep); }
.co-form-bm2-card-stat span { display: block; font-size: var(--co-fs-xs); color: var(--co-text-soft); margin-top: 0.2rem; }
.co-form-bm2-card-note { font-size: var(--co-fs-xs); color: var(--co-text-soft); margin: 0.6rem 0 0; line-height: 1.4; }
.co-form-bm2-card-badges { list-style: none; margin: 0.9rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--co-line); display: flex; flex-direction: column; gap: 0.5rem; }
.co-form-bm2-card-badges li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--co-fs-sm); color: var(--co-text); line-height: 1.35; }
.co-form-bm2-card-check { flex: none; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-top: 0.05rem; border-radius: 50%; background: var(--co-surface); color: var(--co-primary-deep); }
.co-form-bm2-card-check svg { width: 0.75rem; height: 0.75rem; }
.co-form-bm2-card .co-btn { width: 100%; justify-content: center; margin-top: var(--co-s-2); padding-left: 0.75rem; padding-right: 0.75rem; }

/* Module interactif des systèmes du corps (theme-4..N) : onglets à gauche,
   panneau (titre + sous-titre + puces + photo) à droite, en fondu. */
.co-systemes { display: grid; grid-template-columns: minmax(14rem, 19rem) 1fr; gap: clamp(2.25rem, 4.5vw, 4rem); align-items: start; margin-top: var(--co-s-4); }

/* Colonne de gauche : une vraie carte, comme la fiche du cours. Sur le même fond
   que le reste, les onglets ne se lisaient pas comme des boutons. */
.co-systemes-side {
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
	box-shadow: var(--co-shadow-sm);
	padding: 0.9rem;
}
.co-systemes-side-label {
	font-size: var(--co-fs-sm);
	font-weight: 500;
	color: var(--co-muted);
	margin: 0.1rem 0 0.7rem 0.35rem;
}
.co-systemes-nav { display: flex; flex-direction: column; gap: 0.3rem; }
.co-systeme-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: 3.4rem;
	text-align: left;
	/* Titres réduits, mais rembourrage augmenté d'autant : les cases gardent
	   leur présence. */
	padding: 0.95rem 0.85rem;
	border: 1px solid transparent;
	border-radius: var(--co-radius);
	background: var(--co-bg);
	cursor: pointer;
	transition: background var(--co-dur) var(--co-ease), border-color var(--co-dur) var(--co-ease), color var(--co-dur) var(--co-ease);
}
.co-systeme-tab:hover { background: var(--co-surface); border-color: var(--co-line); }
.co-systeme-tab.is-active {
	background: var(--co-surface-2);
	border-color: var(--co-primary);
	box-shadow: inset 3px 0 0 var(--co-primary-deep);
}
.co-systeme-tab-title {
	font-family: var(--co-font-display);
	font-size: var(--co-fs-base);
	line-height: 1.25;
	color: var(--co-text);
}
.co-systeme-tab.is-active .co-systeme-tab-title { color: var(--co-primary-deep); }
.co-systeme-tab-chevron {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--co-primary-deep);
	opacity: 0.45;
	transition: transform var(--co-dur) var(--co-ease), opacity var(--co-dur) var(--co-ease);
}
.co-systeme-tab-chevron svg { width: 1.05rem; height: 1.05rem; display: block; }
.co-systeme-tab:hover .co-systeme-tab-chevron { opacity: 0.8; transform: translateX(2px); }
.co-systeme-tab.is-active .co-systeme-tab-chevron { opacity: 1; transform: translateX(2px); }

.co-systemes-stage { display: grid; }
.co-systemes-panel {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 3vw, 1.75rem);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 420ms var(--co-ease), transform 420ms var(--co-ease), visibility 420ms;
}
/* Comme sur le design fourni : texte d'abord, photo en dessous */
.co-systemes-panel-content { order: 1; }
.co-systemes-panel-media { order: 2; }
.co-systemes-panel.is-active { opacity: 1; visibility: visible; transform: none; }
/* Photo volontairement plus petite (environ 70 % de la largeur du panneau) :
   à pleine largeur, elle écrasait le texte du système. */
.co-systemes-panel-media {
	position: relative;
	width: 70%;
	min-width: 15rem;
	max-width: 100%;
	min-height: 11rem; /* filet de sécurité : conteneur vide, photo en fond */
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
}
.co-systemes-panel-media.is-empty {
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 30% 25%, oklch(92% 0.05 280 / 0.95), oklch(95% 0.03 145));
	color: var(--co-primary-deep);
	border: 1px solid var(--co-line);
}
.co-systemes-panel-media.is-empty svg { width: clamp(4rem, 10vw, 6rem); height: auto; opacity: 0.8; }
.co-systemes-panel-content h3 {
	font-size: var(--co-fs-xl);
	margin: 0 0 0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--co-text);
}
.co-systemes-sub { font-size: var(--co-fs-sm); color: var(--co-primary-deep); font-weight: 500; margin: 0 0 var(--co-s-3); }
.co-systemes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.co-systemes-list li { position: relative; padding-left: 1.1rem; font-size: var(--co-fs-sm); color: var(--co-text-soft); line-height: 1.5; }
.co-systemes-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--co-primary); }

/* Modules BM3 / postgrade */
.co-form-modules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--co-s-4); }
.co-form-module { background: var(--co-surface); border: 1px solid var(--co-line); border-radius: var(--co-radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); }
.co-form-module h2 { font-size: var(--co-fs-2xl); margin: var(--co-s-2) 0; }
.co-form-module p { color: var(--co-text-soft); margin: 0; }
.co-form-module--soon { opacity: 0.85; border-style: dashed; }
.co-form-module-tag { display: inline-block; font-size: var(--co-fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--co-primary-deep); }

/* Agenda : prix + infos + dates */
.co-form-agenda-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.co-form-side { display: flex; flex-direction: column; gap: var(--co-s-4); }
.co-form-price-card { background: var(--co-white); border: 1px solid var(--co-line); border-radius: var(--co-radius-lg); padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: var(--co-shadow-sm); }
.co-form-price-card h2 { font-size: var(--co-fs-lg); margin: 0 0 0.4rem; }
.co-form-price-card p:first-of-type { font-family: var(--co-font-display); font-size: clamp(2rem, 5vw, 2.8rem); color: var(--co-primary-deep); line-height: 1; margin: 0; }
.co-form-price-card p { color: var(--co-text-soft); font-size: var(--co-fs-sm); margin: var(--co-s-2) 0 0; }
.co-form-infos h2 { font-size: var(--co-fs-lg); }
.co-form-infos p { color: var(--co-text-soft); }
.co-form-dates-label { font-size: var(--co-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--co-primary-deep); margin: 0 0 var(--co-s-3); }
.co-form-dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 0.6rem; }
.co-form-date { background: var(--co-white); border: 1px solid var(--co-line); border-radius: var(--co-radius); padding: 0.7rem 0.9rem; font-size: var(--co-fs-sm); font-weight: 500; text-align: center; transition: border-color var(--co-dur) var(--co-ease), color var(--co-dur) var(--co-ease); }
.co-form-date:hover { border-color: var(--co-primary); color: var(--co-primary-deep); }

/* Inscription : bande CTA + boutons PDF éditables */
.co-form-cta { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; background: var(--co-surface); border-radius: var(--co-radius-lg); padding: clamp(2rem, 5vw, 3.5rem); }
.co-form-cta-text h2 { margin-top: 0; }
.co-form-cta-text p { color: var(--co-text-soft); margin-bottom: 0; }
.co-form-cta-actions { display: flex; flex-direction: column; gap: var(--co-s-2); }
.co-form-cta-actions .wp-block-buttons { display: flex; flex-direction: column; gap: var(--co-s-2); margin: 0; }
.co-form-cta-actions .wp-block-button { width: 100%; margin: 0; }
.co-form-cta-actions .wp-block-button__link { display: block; text-align: center; background: var(--co-white); color: var(--co-primary-deep); border: 1px solid var(--co-line); border-radius: 999px; padding: 0.85rem 1.4rem; font-size: var(--co-fs-sm); font-weight: 600; text-decoration: none; transition: border-color var(--co-dur) var(--co-ease), transform var(--co-dur) var(--co-ease); }
.co-form-cta-actions .wp-block-button__link:hover { border-color: var(--co-primary); transform: translateY(-1px); }

/* Responsive Formations */
@media (max-width: 980px) {
	.co-form-hero-grid, .co-form-pedago-grid, .co-form-agenda-grid, .co-form-cta { grid-template-columns: 1fr; }
	.co-form-pedago-media { order: -1; }
	.co-form-profiles { grid-template-columns: repeat(2, 1fr); }
	.co-form-modules-grid { grid-template-columns: 1fr; }
	/* Fiche du cours : passe sous le récit, sticky désactivé (plus de colonnes côte à côte) */
	.co-form-bm2-grid { grid-template-columns: 1fr; }
	.co-form-bm2-card { position: static; top: auto; }
}
@media (max-width: 720px) {
	/* Systèmes du corps : la carte de choix passe au-dessus du panneau. Les
	   onglets restent des boutons pleine largeur empilés (l'ancienne bande
	   défilable ne se lisait pas comme un menu cliquable). */
	.co-systemes { grid-template-columns: 1fr; }
	.co-systemes-panel { grid-template-columns: 1fr; }
	.co-systemes-panel-media { order: -1; width: 100%; min-width: 0; min-height: min(56vw, 14rem); aspect-ratio: 16 / 10; }
	.co-systeme-tab-title { font-size: var(--co-fs-base); }
	.co-systeme-tab-chevron { transform: rotate(90deg); }
	.co-systeme-tab:hover .co-systeme-tab-chevron,
	.co-systeme-tab.is-active .co-systeme-tab-chevron { transform: rotate(90deg) translateX(2px); }
}
@media (max-width: 640px) {
	/* Les 3 fondamentaux s'empilent, séparés par un filet horizontal */
	.co-form-fundamentals { grid-template-columns: 1fr; }
	.co-form-fundamental { border-left: 0; padding-left: 0; padding-right: 0; padding-top: var(--co-s-3); border-top: 1px solid var(--co-line); }
	.co-form-fundamental:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 560px) {
	.co-form-profiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.co-systemes-panel { transition: opacity 200ms linear, visibility 200ms; transform: none; }
	.co-form-prog-panel { transition: opacity 200ms linear, visibility 200ms; transform: none; }
}

/* Titres des sections un peu plus compacts (cohérence avec le hero allégé) */
.co-form-public-head h2,
.co-form-pedago-text h2,
.co-form-cta-text h2 { font-size: clamp(1.5rem, 2.8vw, 2.05rem); }
/* Le cours phare porte toute la section : son titre garde plus de présence. */
.co-form-bm2-intro h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
.co-form-module h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }

/* Inscription : encart (texte + PDF) + formulaire Formations */
.co-form-cta-form .co-contact-form { gap: var(--co-s-2); }
.co-contact-form select {
	font-family: var(--co-font-body);
	font-size: var(--co-fs-base);
	color: var(--co-text);
	padding: 0.8rem 1rem;
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	background: var(--co-white);
	width: 100%;
}
.co-contact-form select:focus-visible { outline: 2px solid var(--co-primary); outline-offset: 1px; }

/* =============================================================
   PAGE À PROPOS — layouts éditoriaux + timeline des formations
   ============================================================= */

/* ---------- En-têtes de section partagés ---------- */
.co-ap-section-head { margin-bottom: var(--co-s-5); max-width: 46rem; }
.co-ap-section-head h2 { margin: 0; }
.co-ap-section-head--center { margin-inline: auto; text-align: center; }
.co-ap-section-head--center .co-eyebrow { display: inline-block; }
.co-ap-section-head--center p:not(.co-eyebrow) { color: var(--co-text-soft); margin: var(--co-s-2) auto 0; max-width: 44rem; }

/* ---------- Hero : portrait + intro, formes organiques ---------- */
.co-ap-hero { position: relative; overflow: hidden; }
.co-ap-hero::before {
	content: "";
	position: absolute;
	inset: auto -12% -40% auto;
	width: 32rem; height: 32rem;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, oklch(90% 0.045 75 / 0.45), transparent 65%);
	pointer-events: none;
	z-index: 0;
}
.co-ap-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}
.co-ap-hero-text h1 { margin: 0 0 var(--co-s-3); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; }
.co-ap-hero-text h1 em { font-style: italic; color: var(--co-primary-deep); font-variation-settings: "opsz" 144; }
.co-ap-hero-text > p { color: var(--co-text-soft); font-size: var(--co-fs-lg); line-height: 1.65; max-width: 38ch; margin: 0 0 var(--co-s-3); }
.co-ap-hero-text .co-bilingual { margin-bottom: var(--co-s-4); }

.co-ap-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-s-2) var(--co-s-4);
	padding-top: var(--co-s-3);
	border-top: 1px solid var(--co-line);
}
.co-ap-hero-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.co-ap-hero-stat strong {
	font-family: var(--co-font-display);
	font-weight: 400;
	font-size: var(--co-fs-2xl);
	line-height: 1;
	color: var(--co-primary-deep);
	letter-spacing: -0.02em;
}
.co-ap-hero-stat span { font-size: var(--co-fs-xs); color: var(--co-muted); letter-spacing: 0.02em; }

.co-ap-hero-media { position: relative; }
.co-ap-portrait {
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 1.75rem 6rem 1.75rem 1.75rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow: var(--co-shadow-lg);
}
.co-ap-portrait.is-empty {
	display: grid;
	place-items: center;
	color: oklch(70% 0.06 280);
	background:
		radial-gradient(circle at 32% 28%, oklch(88% 0.05 280 / 0.6), transparent 58%),
		radial-gradient(circle at 78% 80%, oklch(86% 0.06 75 / 0.4), transparent 58%),
		oklch(94% 0.025 285);
}
.co-ap-portrait-glyph svg { width: clamp(4rem, 9vw, 6rem); height: auto; }
.co-ap-hero-badge {
	position: absolute;
	left: clamp(-1.6rem, -2vw, -1rem);
	bottom: clamp(1.5rem, 5vw, 2.5rem);
	display: grid;
	place-items: center;
	width: 4.25rem; height: 4.25rem;
	border-radius: 50%;
	background: var(--co-white);
	color: var(--co-accent-deep);
	box-shadow: var(--co-shadow);
}
.co-ap-hero-badge svg { width: 1.75rem; height: 1.75rem; }
.co-ap-hero-text.co-reveal { transition-delay: 80ms; }
.co-ap-hero-media.co-reveal { transition-delay: 220ms; }

@media (max-width: 860px) {
	.co-ap-hero-grid { grid-template-columns: 1fr; }
	.co-ap-hero-media { order: -1; width: 100%; max-width: 24rem; margin-inline: auto; }
	/* Le cadre est vide (la photo est un fond) : sa hauteur ne tenait qu'à
	   aspect-ratio, et sur Safari iOS elle s'effondrait à zéro, si bien qu'on ne
	   voyait plus que le badge. Une hauteur minimale garantit le cadre même si le
	   ratio n'est pas appliqué. */
	.co-ap-portrait {
		aspect-ratio: 4 / 4.2;
		min-height: min(92vw, 22rem);
	}
}

/* ---------- Split générique : média + prose (Pourquoi) ---------- */
.co-ap-split {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}
.co-ap-split-media {
	aspect-ratio: 5 / 6;
	min-height: 18rem; /* même filet de sécurité que .co-ap-portrait */
	border-radius: 6rem 1.75rem 1.75rem 1.75rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow: var(--co-shadow);
}
.co-ap-split-media.is-empty {
	display: grid;
	place-items: center;
	color: oklch(68% 0.06 280);
	background:
		radial-gradient(circle at 70% 30%, oklch(88% 0.05 75 / 0.45), transparent 58%),
		oklch(95% 0.02 285);
}
.co-ap-split-glyph svg { width: clamp(3.5rem, 8vw, 5.5rem); height: auto; }
.co-ap-split-text h2 { margin: 0 0 var(--co-s-3); max-width: 16ch; }
.co-ap-split-text p { color: var(--co-text-soft); line-height: 1.75; }
/* Encart « Mon parcours » (colonne droite de Pourquoi) : carte dégradé pastel */
.co-ap-journey {
	display: flex;
	gap: var(--co-s-3);
	margin-top: var(--co-s-4);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: var(--co-radius-lg);
	background: linear-gradient(135deg, oklch(95% 0.04 280 / 0.75), oklch(96% 0.045 75 / 0.55));
	border: 1px solid oklch(88% 0.04 280 / 0.45);
}
.co-ap-journey-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--co-white);
	color: var(--co-primary-deep);
	box-shadow: var(--co-shadow-sm);
}
.co-ap-journey-icon svg { width: 1.45rem; height: 1.45rem; }
.co-ap-journey-body h2,
.co-ap-journey-body h3 {
	margin: 0 0 var(--co-s-2);
	font-family: var(--co-font-body);
	font-size: var(--co-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--co-primary-deep);
}
.co-ap-journey-body p { color: var(--co-text-soft); line-height: 1.7; font-size: var(--co-fs-sm); margin: 0 0 var(--co-s-2); }
.co-ap-journey-body p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
	.co-ap-split { grid-template-columns: 1fr; }
	.co-ap-split-media { aspect-ratio: 16 / 11; max-height: 24rem; min-height: min(62vw, 15rem); }
}

/* ---------- Parcours : carte narrative avec grand guillemet ---------- */
.co-ap-parcours-card {
	position: relative;
	max-width: 52rem;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.75rem, 5vw, 4rem);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
	box-shadow: var(--co-shadow);
}
.co-ap-parcours-mark {
	position: absolute;
	top: clamp(-0.5rem, -1vw, -1rem);
	left: clamp(1rem, 3vw, 2rem);
	font-family: var(--co-font-display);
	font-size: clamp(5rem, 12vw, 8rem);
	line-height: 1;
	color: var(--co-soft);
	pointer-events: none;
}
.co-ap-parcours-body { position: relative; }
.co-ap-parcours-body h2 { margin: 0 0 var(--co-s-3); }
.co-ap-parcours-body p { color: var(--co-text-soft); line-height: 1.75; }
.co-ap-parcours-body p:last-child { margin-bottom: 0; }

/* ---------- Vision : en-tête centré, citation en bandeau, corps lisible ---------- */
.co-ap-vision-inner { max-width: 56rem; margin-inline: auto; }
.co-ap-vision-head { text-align: center; margin-bottom: var(--co-s-4); }
.co-ap-vision-head h2 { margin: 0; }
.co-ap-vision-quote {
	position: relative;
	margin: 0 0 var(--co-s-5);
	padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.5rem, 5vw, 3.5rem);
	text-align: center;
	background:
		radial-gradient(circle at 50% 0%, oklch(92% 0.06 80 / 0.75), transparent 72%),
		oklch(97.5% 0.018 82);
	border: 1px solid oklch(88% 0.05 80 / 0.6);
	border-radius: var(--co-radius-lg);
}
.co-ap-vision-mark {
	display: block;
	font-family: var(--co-font-display);
	font-size: clamp(3rem, 8vw, 4.5rem);
	line-height: 0.5;
	color: var(--co-accent-deep);
	margin-bottom: var(--co-s-2);
}
/* Citation : la cliente y met des textes bien plus longs qu'à l'origine. Italique
   retiré, et taille intermédiaire (entre l'affichage d'origine, trop grand pour
   un texte long, et la première réduction, qui était trop timide). */
.co-ap-vision-quote blockquote {
	margin: 0 auto;
	max-width: 52ch;
	font-family: var(--co-font-display);
	font-style: normal;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	line-height: 1.4;
	color: var(--co-text);
	font-variation-settings: "opsz" 144;
}
.co-ap-vision-body { max-width: 42rem; margin-inline: auto; }
.co-ap-vision-body p { color: var(--co-text-soft); line-height: 1.85; font-size: var(--co-fs-base); }
.co-ap-vision-body p:first-child { font-size: var(--co-fs-lg); color: var(--co-text); }
.co-ap-vision-body p:last-child { margin-bottom: 0; }

/* ---------- Valeurs : tuiles façon bento (page Ostéopathie) ---------- */
.co-ap-valeurs-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.co-ap-valeur {
	display: flex;
	flex-direction: column;
	gap: var(--co-s-2);
	min-height: 11rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--co-radius-lg);
	border: 1px solid oklch(100% 0 0 / 0);
	transition: transform 500ms var(--co-ease), box-shadow 500ms var(--co-ease), border-color 500ms var(--co-ease);
}
.co-ap-valeur-num {
	font-family: var(--co-font-display);
	font-size: var(--co-fs-2xl);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144;
}
.co-ap-valeur p { margin: auto 0 0; font-weight: 500; font-size: var(--co-fs-lg); color: var(--co-text); line-height: 1.3; }
.co-ap-valeur:hover {
	transform: translateY(-6px);
	box-shadow: 0 32px 64px -32px oklch(40% 0.06 280 / 0.45);
	border-color: oklch(72% 0.055 280 / 0.55);
}
/* Teintes pastel exactes du bento */
.co-ap-valeur.co-hue-0 { background-color: oklch(94% 0.04 280); }
.co-ap-valeur.co-hue-1 { background-color: oklch(95% 0.045 75); }
.co-ap-valeur.co-hue-2 { background-color: oklch(95% 0.04 145); }
.co-ap-valeur.co-hue-3 { background-color: oklch(94% 0.045 25); }
.co-ap-valeur.co-hue-0 .co-ap-valeur-num { color: oklch(48% 0.13 280); }
.co-ap-valeur.co-hue-1 .co-ap-valeur-num { color: oklch(52% 0.13 70); }
.co-ap-valeur.co-hue-2 .co-ap-valeur-num { color: oklch(45% 0.1 150); }
.co-ap-valeur.co-hue-3 .co-ap-valeur-num { color: oklch(50% 0.14 30); }

/* ---------- Timeline des formations ---------- */
.co-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	max-width: 60rem;
	margin-inline: auto;
}
/* Le rail vertical : piste discrète (la progression colorée se superpose) */
.co-timeline::before {
	content: "";
	position: absolute;
	top: 0.5rem; bottom: 0.5rem;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: oklch(90% 0.02 285);
}
/* Barre de progression qui se remplit au scroll (hauteur pilotée par le JS) */
.co-timeline-fill {
	position: absolute;
	top: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: linear-gradient(oklch(84% 0.12 88), oklch(70% 0.16 55));
	box-shadow: 0 0 12px oklch(76% 0.15 70 / 0.5);
	z-index: 1;
	transition: height 0.12s linear;
}
/* z-index 2 : au-dessus de la barre de progression (z-index 1), et surtout de
   façon PERMANENTE. Les items portent .co-reveal, dont le transform crée un
   contexte d'empilement tant que l'animation d'apparition tourne. Le z-index de
   la pastille se retrouvait alors enfermé dans l'item, et la barre lui passait
   devant jusqu'à la fin du fondu, avant qu'elle ne repasse au-dessus. */
.co-timeline-item {
	position: relative;
	z-index: 2;
	width: 50%;
	padding: 0 0 clamp(2rem, 5vw, 3.5rem) 0;
	box-sizing: border-box;
}
/* Items pairs à gauche, impairs à droite (alternance desktop) */
.co-timeline-item:nth-child(odd) { left: 0; padding-right: clamp(2rem, 4vw, 3rem); text-align: right; }
.co-timeline-item:nth-child(even) { left: 50%; padding-left: clamp(2rem, 4vw, 3rem); }
/* Le noeud sur le rail */
.co-timeline-node {
	position: absolute;
	top: 0.55rem;
	width: 0.85rem; height: 0.85rem;
	border-radius: 50%;
	background: var(--co-white);
	border: 2px solid var(--co-primary);
	box-shadow: 0 0 0 4px var(--co-bg);
	z-index: 1;
}
.co-timeline-item:nth-child(odd) .co-timeline-node { right: clamp(-0.42rem, -0.5vw, -0.42rem); right: -0.46rem; }
.co-timeline-item:nth-child(even) .co-timeline-node { left: -0.46rem; }
.co-timeline-card {
	display: inline-flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--co-s-2) var(--co-s-3);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	box-shadow: var(--co-shadow-sm);
	transition: transform var(--co-dur) var(--co-ease), box-shadow var(--co-dur) var(--co-ease);
	max-width: 100%;
}
.co-timeline-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--co-shadow);
}
.co-timeline-year {
	align-self: flex-start;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--co-primary-deep);
	background: var(--co-soft);
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
}
.co-timeline-item:nth-child(odd) .co-timeline-card { align-items: flex-end; text-align: right; }
.co-timeline-item:nth-child(odd) .co-timeline-year { align-self: flex-end; }
.co-timeline-label { margin: 0; font-size: var(--co-fs-sm); line-height: 1.5; color: var(--co-text); font-weight: 500; }

/* Éléments actifs (fenêtre de scroll) : teinte pastel du bento, texte foncé.
   Cycle de 3 couleurs (miel / vert / corail) via .co-th-0/1/2. */
.co-timeline-node,
.co-timeline-card {
	transition-property: transform, box-shadow, background-color, border-color, color;
	transition-duration: var(--co-dur);
	transition-timing-function: var(--co-ease);
}
.co-timeline-item.is-active .co-timeline-card {
	border-color: transparent;
	box-shadow: 0 24px 48px -28px oklch(40% 0.06 280 / 0.5);
	transform: translateY(-2px);
}
.co-timeline-item.is-active .co-timeline-node {
	transform: scale(1.4);
	box-shadow: 0 0 0 4px var(--co-bg), 0 0 12px oklch(80% 0.12 80 / 0.6);
}
.co-timeline-item.co-th-0.is-active .co-timeline-card { background: oklch(95% 0.045 75); }
.co-timeline-item.co-th-1.is-active .co-timeline-card { background: oklch(95% 0.04 145); }
.co-timeline-item.co-th-2.is-active .co-timeline-card { background: oklch(94% 0.045 25); }
.co-timeline-item.co-th-0.is-active .co-timeline-node { background: oklch(82% 0.12 75); border-color: oklch(70% 0.14 70); }
.co-timeline-item.co-th-1.is-active .co-timeline-node { background: oklch(82% 0.1 150); border-color: oklch(68% 0.12 150); }
.co-timeline-item.co-th-2.is-active .co-timeline-node { background: oklch(82% 0.12 30); border-color: oklch(70% 0.14 30); }
.co-timeline-item.co-th-0.is-active .co-timeline-year { background: oklch(89% 0.07 75); }
.co-timeline-item.co-th-1.is-active .co-timeline-year { background: oklch(89% 0.06 150); }
.co-timeline-item.co-th-2.is-active .co-timeline-year { background: oklch(89% 0.07 30); }

/* Cascade douce sur les noeuds */
.co-timeline-item:nth-child(2n) { transition-delay: 60ms; }
.co-timeline-item:nth-child(3n) { transition-delay: 120ms; }

@media (max-width: 720px) {
	/* Rail à gauche, tous les items du même côté */
	.co-timeline::before { left: 0.5rem; transform: none; }
	.co-timeline-fill { left: 0.5rem; transform: none; }
	.co-timeline-item,
	.co-timeline-item:nth-child(odd),
	.co-timeline-item:nth-child(even) {
		width: 100%;
		left: 0;
		padding: 0 0 var(--co-s-3) 2rem;
		text-align: left;
	}
	.co-timeline-item:nth-child(odd) .co-timeline-node,
	.co-timeline-item:nth-child(even) .co-timeline-node { left: 0.08rem; right: auto; }
	.co-timeline-item:nth-child(odd) .co-timeline-card {
		align-items: flex-start;
		text-align: left;
	}
	.co-timeline-item:nth-child(odd) .co-timeline-year { align-self: flex-start; }
	.co-timeline-card { display: flex; width: 100%; }
}

/* ---------- Réseau de thérapeutes : grille de cartes (lien optionnel) ---------- */
.co-ap-reseau-intro { color: var(--co-text-soft); margin: var(--co-s-2) 0 0; max-width: 46rem; }
.co-ap-reseau-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--co-s-3);
}
.co-ap-reseau-cell { display: flex; }
.co-ap-reseau-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	width: 100%;
	padding: var(--co-s-3);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius);
	color: var(--co-text);
	text-decoration: none;
	transition: transform var(--co-dur) var(--co-ease), box-shadow var(--co-dur) var(--co-ease), border-color var(--co-dur) ease;
}
.co-ap-reseau-avatar { display: block; margin-bottom: 0.4rem; }
.co-ap-reseau-avatar svg { border-radius: 50%; display: block; }
.co-ap-reseau-name { font-family: var(--co-font-display); font-size: var(--co-fs-lg); font-weight: 500; color: var(--co-text); line-height: 1.2; }
.co-ap-reseau-spec { font-size: var(--co-fs-sm); color: var(--co-text-soft); line-height: 1.45; }
.co-ap-reseau-card { height: 100%; }
.co-ap-reseau-visit {
	margin-top: auto;
	padding-top: var(--co-s-2);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--co-font-body);
	font-size: var(--co-fs-sm);
	font-weight: 600;
	color: var(--co-primary-deep);
}
.co-ap-reseau-visit span { transition: transform var(--co-dur) var(--co-ease); }
.co-ap-reseau-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--co-shadow);
	border-color: oklch(80% 0.05 280 / 0.6);
	color: var(--co-text);
}
.co-ap-reseau-card.has-link:hover .co-ap-reseau-visit span { transform: translateX(4px); }

/* ---------- Citation finale en exergue ---------- */
.co-ap-citation-card {
	position: relative;
	margin: 0;
	text-align: center;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
	background:
		radial-gradient(circle at 50% 0%, oklch(92% 0.035 280 / 0.6), transparent 70%),
		var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
	box-shadow: var(--co-shadow);
}
.co-ap-citation-mark {
	display: block;
	font-family: var(--co-font-display);
	font-size: clamp(4rem, 10vw, 6rem);
	line-height: 0.6;
	color: var(--co-primary);
	margin-bottom: var(--co-s-2);
}
.co-ap-citation-card blockquote {
	margin: 0 auto;
	max-width: 32ch;
	font-family: var(--co-font-display);
	font-style: italic;
	font-size: var(--co-fs-2xl);
	line-height: 1.3;
	color: var(--co-text);
	font-variation-settings: "opsz" 144;
}
.co-ap-citation-card figcaption {
	margin-top: var(--co-s-3);
	font-size: var(--co-fs-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--co-muted);
}

/* =============================================================
   PAGE FORMATIONS — bandeau « Cours postgrade » (à venir)
   ============================================================= */
.co-form-soon {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.75rem, 5vw, 3rem);
	background:
		radial-gradient(circle at 0% 0%, oklch(94% 0.04 280 / 0.55), transparent 60%),
		oklch(97.5% 0.012 285);
	border: 1px dashed oklch(78% 0.05 280 / 0.7);
	border-radius: var(--co-radius-lg);
}
.co-form-soon-glyph {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--co-white);
	color: var(--co-primary);
	box-shadow: var(--co-shadow-sm);
}
.co-form-soon-glyph svg { width: 1.6rem; height: 1.6rem; }
.co-form-soon-tag {
	display: inline-block;
	margin-bottom: var(--co-s-2);
	font-size: var(--co-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--co-primary-deep);
	background: var(--co-soft);
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
}
.co-form-soon-body h2,
.co-form-soon-body h3 { margin: 0 0 0.35rem; font-size: var(--co-fs-xl); }
.co-form-soon-body p { margin: 0; color: var(--co-text-soft); line-height: 1.6; max-width: 52ch; }
.co-form-soon-cta { white-space: nowrap; }
@media (max-width: 760px) {
	.co-form-soon { grid-template-columns: auto 1fr; }
	.co-form-soon-cta { grid-column: 1 / -1; justify-self: start; }
}

/* =============================================================
   Page Ostéopathie — boutons du réseau (deux CTA côte à côte)
   ============================================================= */
.co-reseau-ctas { display: flex; flex-wrap: wrap; gap: var(--co-s-2); margin-top: var(--co-s-3); }
.co-reseau-ctas .co-btn { margin-top: 0; }

/* Accueil — boutons de la section « Mon approche » (deux CTA côte à côte) */
.co-approach-ctas { display: flex; flex-wrap: wrap; gap: var(--co-s-2); margin-top: var(--co-s-3); }
.co-approach-ctas .co-btn { margin-top: 0; }

/* Contact — bouton « Réserver en ligne » dans le bandeau hero */
.co-contact-hero-cta { margin-top: var(--co-s-4); }

/* =============================================================
   Page Contact — bandeau hero (image + dégradé) et encarts
   ============================================================= */
.co-contact-hero {
	position: relative;
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	background-size: cover;
	background-position: center;
	background-color: oklch(95% 0.025 285);
	isolation: isolate;
}
.co-contact-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, oklch(30% 0.05 280 / 0.78) 0%, oklch(35% 0.05 280 / 0.45) 55%, oklch(40% 0.04 280 / 0.15) 100%);
}
/* Sans image : dégradé pastel doux + texte sombre lisible */
.co-contact-hero.no-image { background: linear-gradient(120deg, oklch(95% 0.04 280), oklch(96% 0.04 75)); }
.co-contact-hero.no-image .co-contact-hero-overlay { background: none; }
.co-contact-hero-inner { position: relative; max-width: 44rem; }
.co-contact-hero.has-image .co-contact-hero-inner { color: oklch(99% 0.003 80); }
.co-contact-hero.has-image .co-eyebrow { color: oklch(90% 0.04 280); }
.co-contact-hero-inner h1 { font-size: var(--co-fs-3xl); margin: 0 0 var(--co-s-2); text-wrap: balance; }
.co-contact-hero.has-image .co-contact-hero-inner h1 { color: oklch(99% 0.003 80); }
.co-contact-hero-inner h1 em { font-style: italic; }
.co-contact-hero-inner p { line-height: 1.7; margin: 0; }
.co-contact-hero.has-image .co-contact-hero-inner p { color: oklch(94% 0.012 285); }
.co-contact-hero.no-image .co-contact-hero-inner p { color: var(--co-text-soft); }

/* Encarts horaires + accès */
.co-contact-infos .co-contact-grid { align-items: stretch; }
.co-contact-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--co-white);
	border: 1px solid var(--co-line);
	border-radius: var(--co-radius-lg);
	box-shadow: var(--co-shadow-sm);
}
.co-contact-card-ico {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--co-s-3);
	border-radius: 50%;
	background: var(--co-soft);
	color: var(--co-primary-deep);
}
.co-contact-card-ico svg { width: 1.5rem; height: 1.5rem; }
.co-contact-card h2 { margin: 0 0 var(--co-s-3); font-size: var(--co-fs-xl); }
.co-contact-card .co-prose-section h2 { margin-top: 0; }

/* =============================================================
   Popup de prise de rendez-vous (modale <dialog> + iframe)
   ============================================================= */
dialog.co-rdv-modal {
	margin: auto;
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
dialog.co-rdv-modal::backdrop {
	background: oklch(22% 0.03 280 / 0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.co-rdv-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(920px, 94vw);
	/* dvh : en paysage sur téléphone, 90vh se calcule sur le viewport sans la
	   barre d'adresse et le bas de l'agenda sortait de l'écran. */
	height: min(840px, 90dvh);
	background: var(--co-white);
	border-radius: var(--co-radius-lg);
	overflow: hidden;
	box-shadow: var(--co-shadow-lg);
}
.co-rdv-modal-close {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: var(--co-white);
	color: var(--co-text);
	box-shadow: var(--co-shadow-sm);
	cursor: pointer;
	transition: background-color var(--co-dur) var(--co-ease), color var(--co-dur) var(--co-ease), transform var(--co-dur) var(--co-ease);
}
.co-rdv-modal-close svg { width: 1.2rem; height: 1.2rem; }
.co-rdv-modal-close:hover { background: var(--co-text); color: var(--co-white); transform: rotate(90deg); }
.co-rdv-modal-intro {
	padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.25rem) 0;
}
.co-rdv-modal-intro > :first-child { margin-top: 0; }
.co-rdv-modal-intro h2 { margin: 0 0 0.4rem; font-size: var(--co-fs-xl); padding-right: 2.5rem; }
.co-rdv-modal-intro p { margin: 0; color: var(--co-text-soft); line-height: 1.6; }
.co-rdv-modal-frame {
	flex: 1;
	min-height: 0;
	padding: clamp(1rem, 3vw, 1.5rem);
}
.co-rdv-modal-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--co-radius);
	background: var(--co-bg);
}
body.co-rdv-open { overflow: hidden; }

/* Plein écran sur mobile. L'intro devient une vraie barre d'en-tête : fond rosé
   pour la détacher du blanc du contenu, texte fortement réduit, afin de laisser
   le maximum de hauteur à l'agenda. */
@media (max-width: 640px) {
	dialog.co-rdv-modal { margin: 0; }
	.co-rdv-modal-panel {
		width: 100%;
		height: 100dvh;
		border-radius: 0;
	}
	.co-rdv-modal-intro {
		padding: 0.7rem 3.9rem 0.7rem 1rem;
		background: oklch(95% 0.032 20);
		border-bottom: 1px solid oklch(88% 0.04 20);
	}
	.co-rdv-modal-intro h2 {
		margin: 0;
		padding-right: 0;
		font-size: 1.02rem;
		line-height: 1.25;
	}
	.co-rdv-modal-intro p {
		margin: 0.15rem 0 0;
		font-size: 0.78rem;
		line-height: 1.35;
		color: var(--co-text);
		opacity: 0.75;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	/* 2.75rem : c'est le seul moyen de fermer une modale plein écran, la cible
	   doit rester confortable au pouce. */
	.co-rdv-modal-close {
		top: 0.5rem;
		right: 0.5rem;
		width: 2.75rem;
		height: 2.75rem;
		box-shadow: none;
		border: 1px solid oklch(88% 0.04 20);
	}
	.co-rdv-modal-frame { padding: 0.5rem; }
}