/* =====================================================================
   Bouton CTA Sentis — anchor + icône circulaire + pill texte
   ---------------------------------------------------------------------
   Animation hover gérée 100% en GSAP (cf. button.js) :
     1. Flèche : rotation +360° clockwise depuis sa position initiale (NE).
        Après l'anim, elle est revenue au même endroit visuellement → on
        n'a pas besoin de reverse l'anim au mouseleave.
     2. Ticks  : fade-out staggered (each = 0.058s ≈ durée flèche / 12),
        donne l'illusion qu'ils disparaissent au passage de la flèche.
     3. Label  : line reveal — slide up yPercent 100 → 0 avec mask sur le
        `.sentis-btn__pill` (overflow: hidden) à chaque hover.

   État idle (sans hover) :
     - .sentis-btn__icon  : fond orange (--color-primary), permanent.
     - .sentis-btn__ticks : currentColor = blanc (--color-bg), bien visibles
       sur le fond orange.
     - .sentis-btn__arrow : currentColor = blanc, rotate(-45°) → pointe NE.

   Sizing : tout en `em` → scale via la font-size du parent / Osmo body.
   ===================================================================== */


/* --- Wrapper ---------------------------------------------------------- */

.sentis-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-sans);
	font-size: var(--18px-size);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	color: var(--color-bg);
}

.sentis-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: 0.25em;
}


/* --- Icône circulaire ------------------------------------------------- */
/* Fond `--color-primary` PERMANENT (lavande clair). Pas de fill animé,
   plus de transition CSS. Texte / icônes en `--color-fg` (noir) — sur
   un fond clair, un blanc serait illisible. */

.sentis-btn__icon {
	position: relative;
	flex: 0 0 auto;
	width: 3.6em;
	height: 3.6em;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background-color: var(--color-primary);
	color: var(--color-fg);
}


/* Ticks SVG (cadran 12 marques) — noirs (sur fond primary clair).
   Les <line> internes héritent de currentColor via stroke="currentColor".
   L'anim opacity + stagger se fait dans button.js. */
.sentis-btn__ticks {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--color-fg);
	pointer-events: none;
}


/* Flèche SVG — noire, rotate(-45°) idle → pointe NE.
   GSAP override le `transform` au hover via `rotation: '+=360'`. La
   valeur CSS sert juste de fallback / état initial avant init JS. */
.sentis-btn__arrow {
	position: relative;
	z-index: 2;
	width: 1.1em;
	height: 1.1em;
	color: var(--color-fg);
	transform: rotate(-45deg);
	pointer-events: none;
}


/* --- Pill (rectangle arrondi texte) ----------------------------------- */

.sentis-btn__pill {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-primary);
	color: var(--color-fg);
	padding: 1em 1.6em;
	border-radius: 0.6em;
	overflow: hidden;
}


/* --- Label — pattern text-anim ---------------------------------------- */
/* Repris du module text-anim/ (mwg_effect015). Un `.word` avec 2 spans
   enfants : le 1er en flow normal (visible), le 2e (.word-hidden) en
   absolute translaté à -100% (au-dessus, masqué par le clip-path du .word).
   Au hover du BOUTON (pas du texte, et pas au scroll comme le module
   d'origine), GSAP anime `yPercent: '+=100'` sur les 2 enfants en
   parallèle, ease `expo.inOut` → le visible sort par le bas, le hidden
   glisse à sa place.

   Le clip-path 2-98 (au lieu de 0-100 / overflow:hidden) hérite du module
   d'origine — il évite les pixels de leak des ascenders/descenders.
*/

.sentis-btn__label {
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
}

.sentis-btn__label .word {
	display: inline-block;
	position: relative;
	line-height: 0.9;
	clip-path: polygon(0 2%, 0 98%, 100% 98%, 100% 2%);
}

.sentis-btn__label .word > span {
	display: inline-block;
	will-change: transform;
}

.sentis-btn__label .word-hidden {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(0, -100%);
}


/* =====================================================================
   prefers-reduced-motion — pas d'override CSS, l'opt-out est géré
   dans button.js (skip total des tweens GSAP si reducedMotion).
   ===================================================================== */