/* ==========================================================================
   Pastilles de services qui flottent autour du hero.

   Quatre étiquettes orange, comme des étiquettes de calque dans un outil de
   design partagé. Elles apparaissent l'une après l'autre,
   puis dérivent lentement, sans gravité.

   Décoratives : aria-hidden, aucun clic possible (pointer-events: none).
   Affichées à partir de 1280 px seulement : en dessous, il n'y a pas assez de
   place de part et d'autre du titre pour qu'elles ne le chevauchent pas.

   Uniquement transform, opacity et filter : tout se joue sur le compositeur,
   aucun recalcul de mise en page.
   ========================================================================== */

.wm-pastilles {
	position: absolute;
	inset: 0;
	/* Sous le texte du hero, au-dessus de son fond (-z-10). La section n'est
	   pas un contexte d'empilement, les deux couches négatives se rangent
	   donc dans l'ordre de leur z-index. */
	z-index: -1;
	pointer-events: none;
	display: none;
}
@media (min-width: 1280px) {
	.wm-pastilles { display: block; }
}

/* Couche 1 : la position et la dérive sans gravité. */
.wm-pastille {
	position: absolute;
	left: calc(50% + var(--x));
	top: var(--y);
	animation: wm-flotte var(--t) ease-in-out var(--f) infinite;
	will-change: transform;
}

/* Couche 2 : l'inclinaison et l'apparition. Séparées de la dérive, sinon les
   deux animations se disputeraient la même propriété transform. */
.wm-pastille__pivot {
	position: relative;
	transform: translate(-50%, -50%) rotate(var(--r));
	animation: wm-apparait 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) both;
}

/* Couche 3 : l'étiquette elle-même, et l'enfoncement au clic. */
.wm-pastille__bouton {
	display: block;
	white-space: nowrap;
	padding: 0.85rem 1.5rem;
	border-radius: 1rem;
	background: linear-gradient(135deg, #ff6a2e 0%, #f04a0a 100%);
	color: #0B0B0B; /* encre depuis le 2026-09-21 : la pastille décore, elle ne doit pas ressembler au bouton */
	font-family: Satoshi, ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1;
	letter-spacing: -0.005em;
	box-shadow:
		0 18px 40px -12px rgba(240, 74, 10, 0.45),
		0 0 60px -6px rgba(255, 92, 27, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
}


/* Réglages de chaque pastille.
   --x : décalage horizontal par rapport au centre de la page. Borné par
         clamp() : assez loin pour ne jamais toucher le titre à 1280 px, pas
         au point de filer vers les bords sur un écran de 2560.
   --y : hauteur dans la section. --r : inclinaison.
   --d : délai d'apparition. --t / --f : durée et phase de la dérive, toutes
         différentes pour que les quatre ne bougent jamais à l'unisson. */
.wm-pastille--1 { --x: calc(-1 * clamp(470px, 37vw, 620px)); --y: 250px; --r: -9deg; --d: 0.7s;  --t: 9s;  --f: -2s; }
.wm-pastille--2 { --x: clamp(480px, 38vw, 610px);             --y: 200px; --r: 8deg;  --d: 0.95s; --t: 11s; --f: -6s; }
.wm-pastille--3 { --x: calc(-1 * clamp(450px, 35vw, 580px)); --y: 545px; --r: 6deg;  --d: 1.2s;  --t: 10s; --f: -4s; }
.wm-pastille--4 { --x: clamp(460px, 37vw, 600px);             --y: 505px; --r: -7deg; --d: 1.45s; --t: 12s; --f: -8s; }


@keyframes wm-apparait {
	from { opacity: 0; filter: blur(10px); transform: translate(-50%, -50%) rotate(var(--r)) scale(0.4); }
	60%  { opacity: 1; filter: blur(0); }
	to   { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
}

@keyframes wm-flotte {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	25%      { transform: translate3d(6px, -12px, 0) rotate(1.5deg); }
	50%      { transform: translate3d(-4px, -20px, 0) rotate(-0.5deg); }
	75%      { transform: translate3d(-8px, -8px, 0) rotate(-1.5deg); }
}




@media (prefers-reduced-motion: reduce) {
	.wm-pastille,
	.wm-pastille__pivot,
	.wm-pastille__bouton,
	.wm-cta,
	.wm-cta__curseur,
	.wm-cta__onde { animation: none !important; }
	.wm-cta__curseur { display: none; }
}

/* ==========================================================================
   Quadrillage de marque en fond du hero. Même pas de 56 px que la bande de
   réalisations et la section Douleur, mais plus léger qu'elles : le hero est
   la première chose qu'on voit, la trame doit se deviner, pas se lire. Elle
   s'estompe vers le bas pour ne pas dessiner une ligne de coupe sur la bande.
   ========================================================================== */
.wm-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: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, black 40%, rgba(0,0,0,0.45) 78%, transparent 100%);
	        mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, black 40%, rgba(0,0,0,0.45) 78%, transparent 100%);
}
.dark .wm-grille { opacity: 0.18; }

/* ==========================================================================
   Le curseur qui clique « Lancer mon projet ». Un seul sur toute la page.
   Il arrive du bas à droite, enfonce le bouton, une onde s'échappe, et il
   repart. Le bouton se comprime au moment du clic, comme sous le doigt.
   Le curseur vit DANS le lien pour suivre le bouton où qu'il soit, mais ne
   capte aucun clic. Sur écran tactile un curseur n'a pas de sens : même
   seuil que les pastilles, plus la condition de survol.
   ========================================================================== */
.wm-cta { position: relative; }
.wm-cta__curseur {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 26px;
	pointer-events: none;
	filter: drop-shadow(0 4px 10px rgba(240, 74, 10, 0.5));
	transform: translate(70px, 60px);
	opacity: 0;
}
.wm-cta__curseur svg { display: block; width: 100%; height: 100%; }
.wm-cta__onde {
	position: absolute;
	left: -7px;
	top: -7px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.9);
	opacity: 0;
	transform: scale(0.2);
}
@media (min-width: 1280px) and (hover: hover) {
	.wm-cta__curseur { display: block; animation: wm-curseur-cta 7s ease-in-out 2.5s infinite; }
	.wm-cta__onde { animation: wm-onde-cta 7s ease-out 2.5s infinite; }
	.wm-cta { animation: wm-cta-clic 7s ease-in-out 2.5s infinite; }
}

@keyframes wm-curseur-cta {
	0%   { opacity: 0; transform: translate(70px, 60px); }
	10%  { opacity: 1; }
	28%  { transform: translate(6px, 4px); }
	33%  { transform: translate(6px, 4px) scale(0.82); }
	38%  { transform: translate(6px, 4px) scale(1); }
	50%  { opacity: 1; transform: translate(6px, 4px); }
	64%  { opacity: 0; transform: translate(80px, 50px); }
	100% { opacity: 0; transform: translate(80px, 50px); }
}
@keyframes wm-cta-clic {
	0%, 31%   { transform: scale(1); }
	34%       { transform: scale(0.94); }
	40%       { transform: scale(1.02); }
	45%, 100% { transform: scale(1); }
}
@keyframes wm-onde-cta {
	0%, 33% { opacity: 0; transform: scale(0.2); }
	36%     { opacity: 0.9; }
	52%     { opacity: 0; transform: scale(1.7); }
	100%    { opacity: 0; transform: scale(1.7); }
}

/* ==========================================================================
   Bande de réalisations : les cartes mènent au site du client (2026-09-16).
   La capture et la pastille de marque sont des liens ; « Voir le site » est
   le rappel explicite en pied de carte, poussé à droite. Nouvel onglet
   partout, pour que le visiteur retrouve webmate.digital en revenant.
   ========================================================================== */
.wm-real-lien { cursor: pointer; text-decoration: none; color: inherit; }
.wm-real-lien:focus-visible, .wm-real-voir:focus-visible { outline: 2px solid #F04A0A; outline-offset: 3px; border-radius: 1rem; }
.wm-real-voir {
	margin-left: auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #F04A0A;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.wm-real-voir:hover { text-decoration: underline; text-underline-offset: 3px; }
.dark .wm-real-voir { color: #FF7A48; }
.wm-real-voir svg { width: 0.85rem; height: 0.85rem; }

/* ==========================================================================
   Bouton primaire : texte blanc sur orange, lumière néon (2026-09-21).
   Décision de Lilian : le bouton doit donner envie de cliquer. Le blanc sur
   orange reste sous le seuil de contraste (3,7 sur #F04A0A), on le compense
   par la taille du halo. Les pastilles flottantes passent en texte encre et
   perdent la moitié de leur halo, pour que le bouton soit la seule lumière.
   Le fond et la couleur sont ici, pas dans les classes Tailwind : app.css est
   purgé et n a pas les variantes voulues. Au survol le néon s intensifie.
   ========================================================================== */
.wm-btn-primaire {
	background-color: #F04A0A;
	color: #fff;
	/* Néon adouci le 2026-09-21 à la demande de Lilian : la première version
	   était beaucoup trop prononcée. Halo court à peine visible, halo long
	   léger, ombre portée retenue, plus d ombre de texte. */
	text-shadow: none;
	box-shadow:
		0 0 0 1px rgba(255, 122, 72, 0.3),
		0 0 8px rgba(255, 92, 27, 0.25),
		0 0 22px rgba(240, 74, 10, 0.18),
		0 8px 20px -8px rgba(240, 74, 10, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
	transition: background-color 0.2s, box-shadow 0.25s;
}
.wm-btn-primaire:hover,
.wm-btn-primaire:focus-visible {
	background-color: #FF5C1B;
	box-shadow:
		0 0 0 1px rgba(255, 157, 119, 0.45),
		0 0 12px rgba(255, 92, 27, 0.4),
		0 0 30px rgba(240, 74, 10, 0.28),
		0 10px 24px -8px rgba(240, 74, 10, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ==========================================================================
   Bouton WhatsApp de l en-tête, copié sur 1600.agency (2026-09-21).
   Relevé sur leur page : rond vert #25D366 de 50 px, liseré 1 px vert foncé
   rgb(1,130,49), ombre « 5px 15px 30px rgba(37,211,102,.2), 0 1px 6px -2px
   #25D366 ». Derrière le rond, un disque vert rgb(27,199,57) d un tiers du
   diamètre, centré, qui passe de l échelle 1 à 4,3 et de l opacité 1 à 0 en
   2 s, linéaire, en boucle : c est lui qui fait les anneaux. Un seul disque à
   la fois, pas deux. Portée : 1,46 fois le diamètre du bouton.
   ========================================================================== */
.wm-wa {
	overflow: visible;
	box-shadow: 5px 15px 30px 0 rgba(37, 211, 102, 0.2), 0 1px 6px -2px rgb(37, 211, 102);
}
.wm-wa::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 1px solid rgb(1, 130, 49);
	pointer-events: none;
}
.wm-wa-pulse {
	position: absolute;
	width: 34%;
	height: 34%;
	top: 33%;
	left: 33%;
	border-radius: 999px;
	background: rgb(27, 199, 57);
	pointer-events: none;
	animation: wm-wa-pulse 2s linear infinite;
}
@keyframes wm-wa-pulse {
	0%   { transform: scale(1);   opacity: 1; }
	100% { transform: scale(4.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wm-wa-pulse { display: none; }
}

/* Survol : glissement de l icône, relevé sur 1600.agency (2026-09-21). La
   fenêtre est le rond lui-même, elle rogne ; le lien reste en overflow visible
   pour le pulsar. Coupé avec prefers-reduced-motion. */
.wm-wa-fenetre {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	overflow: hidden;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.wm-wa-ico {
	grid-area: 1 / 1;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wm-wa-ico--2 { transform: translateY(160%); }
.wm-wa:hover .wm-wa-ico { transform: translateY(-160%); }
.wm-wa:hover .wm-wa-ico--2 { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.wm-wa-ico { transition: none; }
	.wm-wa-ico--2 { display: none; }
	.wm-wa:hover .wm-wa-ico { transform: none; }
}