/* ==========================================================================
   Section « Le système » : « Votre site » au centre, les services en orbite.

   Deux cercles concentriques, comme dans la référence « Circles » : le mot au
   centre en dégradé, des éléments posés sur les cercles. Ici, six pastilles
   tournent sur le cercle extérieur, trois points orange sur le cercle
   intérieur en sens inverse, et à l'extérieur, en gris, ce qu'on écarte.
   Le fond reprend le hero : dégradé, halo orange, quadrillage.

   Tout est en CSS : le mouvement suit un `offset-path: circle()`, sans une
   ligne de JavaScript. Sans support, ou avec « réduire les animations »,
   les pastilles sont posées en cercle, immobiles, aux mêmes positions.

   Fichier à part, écrit à la main : app.css est un Tailwind purgé qui ne se
   recompile que depuis le Mac. Les rares classes Tailwind du HTML sont celles
   de webmate_section_header(), donc présentes à coup sûr.
   ========================================================================== */

.wm-orbite-section {
	position: relative;
	overflow: hidden;
	padding: 5rem 1.25rem 6rem;
	/* Démarre et finit sur la couleur du fond de page : la section Douleur
	   sort dessus, la section « Ce que ça change » n'a pas de fond propre. */
	background: linear-gradient(to bottom, #F5F1EA 0%, #FAF7F0 45%, #F5F1EA 100%);
}
.dark .wm-orbite-section { background: linear-gradient(to bottom, #0B0B0B 0%, #141110 45%, #0B0B0B 100%); }
@media (min-width: 640px) { .wm-orbite-section { padding: 6rem 2rem 7rem; } }

/* Décor du hero, repris tel quel : quadrillage fin, puis halo orange. */
.wm-orbite-decor { position: absolute; inset: 0; pointer-events: none; }
.wm-orbite-grille {
	position: absolute;
	inset: 0;
	opacity: 0.32;
	background-image:
		linear-gradient(rgba(240, 74, 10, 0.22) 1px, transparent 1px),
		linear-gradient(90deg, rgba(240, 74, 10, 0.22) 1px, transparent 1px);
	background-size: 56px 56px;
	background-position: center top;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 55%, black 20%, rgba(0,0,0,0.5) 60%, transparent 100%);
	        mask-image: radial-gradient(ellipse 70% 70% at 50% 55%, black 20%, rgba(0,0,0,0.5) 60%, transparent 100%);
}
.dark .wm-orbite-grille { opacity: 0.18; }
.wm-orbite-halo {
	position: absolute;
	left: 50%;
	top: 58%;
	width: 860px;
	height: 520px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(251, 217, 198, 0.55);
	filter: blur(64px);
}
.dark .wm-orbite-halo { background: rgba(240, 74, 10, 0.16); }

.wm-orbite-wrap { position: relative; margin: 0 auto; max-width: 1200px; }

/* En-tête sur deux colonnes : le titre à gauche, le paragraphe à droite,
   aligné en bas. Une colonne sous 900 px. */
.wm-orbite-tete { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
	.wm-orbite-tete { grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: end; }
}
.wm-orbite-tete p { max-width: 34rem; }

/* ---------------------------------------------------------------- schéma */
.wm-orbite {
	position: relative;
	margin: 3.5rem auto 0;
	width: min(100%, 760px);
	aspect-ratio: 1 / 1;
}
@media (min-width: 640px) { .wm-orbite { margin-top: 4rem; } }

.wm-orbite__cercle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgba(11, 11, 11, 0.14);
	pointer-events: none;
}
.dark .wm-orbite__cercle { border-color: rgba(245, 241, 234, 0.14); }
/* Le cercle extérieur est exactement celui que suivent les pastilles. */
.wm-orbite__cercle--ext { width: 92%; height: 92%; }
/* Le cercle intérieur porte le néon : liseré orange et lueur, plus forts la
   nuit, où ils font le même effet que le halo du hero. */
.wm-orbite__cercle--int {
	width: 46%;
	height: 46%;
	border-color: rgba(240, 74, 10, 0.45);
	box-shadow: 0 0 40px -6px rgba(255, 92, 27, 0.35), inset 0 0 40px -10px rgba(255, 92, 27, 0.25);
}
.dark .wm-orbite__cercle--int {
	border-color: rgba(255, 92, 27, 0.7);
	box-shadow: 0 0 60px -4px rgba(255, 92, 27, 0.55), inset 0 0 50px -8px rgba(255, 92, 27, 0.35);
}

/* « Votre site », en dégradé comme le mot de la référence, avec le point
   carré orange du logotype. La nuit, une lueur orange derrière les lettres. */
.wm-orbite__centre {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	margin: 0;
	font-family: "Clash Display", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.6rem, 9.5vw, 5.75rem);
	line-height: 1;
	letter-spacing: -0.035em;
	white-space: nowrap;
	padding-right: 0.28em;
	background: linear-gradient(to bottom, #0B0B0B 0%, #2D2D2D 55%, #7A7A7A 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 28px rgba(255, 92, 27, 0.22));
}
.dark .wm-orbite__centre {
	background: linear-gradient(to bottom, #FFFFFF 0%, #F5F1EA 50%, #8A8A8A 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	filter: drop-shadow(0 0 30px rgba(255, 92, 27, 0.55));
}
.wm-orbite__centre::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0.1em;
	width: 0.2em;
	height: 0.2em;
	background: #FF5C1B;
	box-shadow: 0 0 22px rgba(255, 92, 27, 0.8);
}

/* ------------------------------------------------ pastilles en orbite */
.wm-orbite__sats, .wm-orbite__hors, .wm-orbite__lunes { list-style: none; margin: 0; padding: 0; }

.wm-orbite__sat {
	position: absolute;
	/* Position de repos sur le cercle extérieur, une tous les 60°, en partant
	   de 3 h dans le sens horaire. Vue par les navigateurs sans offset-path
	   et par les personnes qui ont demandé moins d'animations. */
	left: var(--sx);
	top: var(--sy);
	transform: translate(-50%, -50%);
	z-index: 3;
}
.wm-orbite__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.15rem;
	border-radius: 999px;
	background: #0B0B0B;
	color: #F5F1EA;
	font-family: Satoshi, ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: -0.005em;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 14px 30px -12px rgba(11, 11, 11, 0.5);
}
.dark .wm-orbite__pill { background: #F5F1EA; color: #0B0B0B; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8), 0 0 24px -6px rgba(255, 92, 27, 0.35); }
.wm-orbite__pill::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #FF5C1B;
	box-shadow: 0 0 10px rgba(255, 92, 27, 0.9);
	flex: none;
}

/* Trois points orange sur le cercle intérieur, en sens inverse : le second
   cercle vit aussi, sans jamais rien poser sur le mot. */
.wm-orbite__lune {
	position: absolute;
	left: var(--sx);
	top: var(--sy);
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #FF5C1B;
	box-shadow: 0 0 14px rgba(255, 92, 27, 0.9);
	z-index: 1;
}

/* Le mouvement. 54 s par tour pour les six pastilles, donc une toutes les
   9 s : le délai négatif place chacune d'emblée sur sa position de repos.
   Le cercle (46 %) est celui de l'anneau extérieur, le tour part de 3 h et va
   dans le sens horaire. Les points du cercle intérieur tournent à l'envers,
   en 36 s. */
@media (prefers-reduced-motion: no-preference) {
	@supports (offset-path: circle(46% at 50% 50%)) {
		.wm-orbite__sat, .wm-orbite__lune {
			left: 0;
			top: 0;
			transform: none;
			offset-rotate: 0deg;
			offset-anchor: 50% 50%;
			will-change: offset-distance;
		}
		.wm-orbite__sat {
			offset-path: circle(46% at 50% 50%);
			animation: wm-orbite-tour 54s linear infinite;
			animation-delay: calc(var(--i) * -9s);
		}
		.wm-orbite__lune {
			offset-path: circle(23% at 50% 50%);
			animation: wm-orbite-tour 36s linear infinite reverse;
			animation-delay: calc(var(--i) * -12s);
		}
		.wm-orbite:hover .wm-orbite__sat { animation-play-state: paused; }
	}
}
@keyframes wm-orbite-tour {
	from { offset-distance: 0%; }
	to   { offset-distance: 100%; }
}

/* ------------------------------------------- ce qu'on laisse de côté */
.wm-orbite__hor {
	position: absolute;
	left: var(--hx);
	top: var(--hy);
	transform: translate(-50%, -50%);
	padding: 0.6rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(11, 11, 11, 0.14);
	color: rgba(11, 11, 11, 0.45);
	font-family: Satoshi, ui-sans-serif, system-ui, sans-serif;
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
	animation: wm-orbite-flotte var(--t, 10s) ease-in-out var(--f, 0s) infinite;
}
.dark .wm-orbite__hor { border-color: rgba(245, 241, 234, 0.16); color: rgba(245, 241, 234, 0.42); }
@keyframes wm-orbite-flotte {
	0%, 100% { margin-top: 0; }
	50%      { margin-top: -10px; }
}
.wm-orbite__legende { display: none; }

/* ------------------------------------------------------------- mobile */
/* Sous 640 px, le cercle avec ses pastilles ne tient pas : le mot, puis les
   pastilles en rangées. Rien ne tourne, rien ne se chevauche. */
@media (max-width: 639px) {
	.wm-orbite { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
	.wm-orbite__cercle, .wm-orbite__lunes { display: none; }
	.wm-orbite__centre { position: static; transform: none; padding: 1.5rem 0 0.5rem; }
	.wm-orbite__sats, .wm-orbite__hors { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
	.wm-orbite__sat, .wm-orbite__hor {
		position: static; transform: none; offset-path: none; animation: none;
	}
	.wm-orbite__pill { font-size: 0.875rem; padding: 0.6rem 1rem; }
	.wm-orbite__legende {
		display: block;
		margin: 0.5rem 0 -0.75rem;
		font-family: Satoshi, ui-sans-serif, system-ui, sans-serif;
		font-size: 0.8rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: rgba(11, 11, 11, 0.45);
	}
	.dark .wm-orbite__legende { color: rgba(245, 241, 234, 0.42); }
}
/* Entre 640 et 1100 px le cercle tient, mais les pastilles grises des coins,
   posées hors du carré, sortiraient de l'écran : en rangée sous le schéma. */
@media (min-width: 640px) and (max-width: 1099px) {
	.wm-orbite__hors { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
	.wm-orbite__hor { position: static; transform: none; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wm-orbite__sat, .wm-orbite__lune, .wm-orbite__hor { animation: none !important; }
}