/* ============================================================
   CD — Texte qui s'écrit (mot par mot au scroll)
   ------------------------------------------------------------
   Le texte est découpé en mots CÔTÉ SERVEUR : le HTML contient
   la phrase entière, lisible par un moteur de recherche, par un
   lecteur d'écran et par un visiteur sans JavaScript. Le JS ne
   fait que révéler les mots un à un — il n'écrit aucun texte.

   Chaque mot est enveloppé dans un masque (`ck-mots__m`) qui
   coupe ce qui dépasse : c'est ce qui permet au mot de monter
   depuis le dessous de sa propre ligne plutôt que d'apparaître
   en flottant.
   ============================================================ */

.ck-mots{
	--ck-mots-monte: 60;   /* montée du mot, en % de sa hauteur */
	--ck-mots-flou: 4px;
	--ck-mots-etale: 40;   /* étalement entre le premier et le dernier mot, en % */
}

.ck-mots__t{
	margin: 0;
}

/* UN MOT, UNE BOÎTE INSÉCABLE (4.3.140). En mode « lettres », chaque lettre est
   un `inline-block` : sans ce groupe, le navigateur coupait un mot en deux au
   passage à la ligne. */
.ck-mots__w{
	display: inline-block;
	white-space: nowrap;
}

.ck-mots__m{
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

/* ⚠️ LE MASQUE COUPAIT LES LETTRES SUR LES CÔTÉS (4.3.141).
   Kévin, 2026-08-31, sur beta.lesescaliersmougin.fr : « mes mots sont
   toujours coupés ». Mesuré SUR SA PAGE, en DM Serif Display ITALIQUE 43,2 px :
   les sept mots du titre débordent tous de leur masque — « penser » de 10 px,
   « manière » et « métier » de 7, « C'est » de 5. Une italique pose son encre
   HORS de la boîte d'avance du glyphe ; `overflow: hidden` la rogne.

   Le masque doit couper EN BAS, et seulement là : c'est ce qui fait sortir le
   mot de sa propre ligne au lieu de le faire flotter. `clip-path` le permet
   exactement — valeurs négatives = zone visible ÉTENDUE, `0` en bas = coupe
   nette. Et il ne touche à RIEN d'autre : mesuré sur sa page, largeur et
   hauteur de la ligne strictement identiques avant/après (1245 × 92).

   Un padding compensé par une marge négative aurait marché aussi ; il changeait
   la boîte, donc la mise en page, et je n'ai pas pu prouver chez lui qu'elle ne
   bougeait pas. `clip-path` est purement visuel : rien à prouver.

   `@supports` plutôt qu'un remplacement sec : là où `clip-path` manque, le
   masque d'origine reste, avec son défaut mais avec son animation. */
@supports ( clip-path: inset( 0 ) ) {
	.ck-mots__m{
		overflow: visible;
		clip-path: inset( -0.6em -0.35em 0 -0.35em );
	}
}

.ck-mots__i{
	display: inline-block;
}
/* ⚠️ PAS DE `will-change` À DEMEURE (5.0.6). Posé sur chaque mot, il gardait
   un calque graphique par mot, écrit ou pas : 165 sur l'accueil d'XPO SPACE,
   et le téléphone ramait en descendant (Kévin, 2026-10-06 : « c'est la cata
   en mobile, ça lag »). Le JS le pose sur les seuls mots EN TRAIN de
   s'écrire (`ck-mots__i--anim`) et le retire dès qu'ils sont en place. */
.ck-mots__i--anim{
	will-change: transform, opacity, filter;
}

/* Tant que le JS n'a pas pris la main, le texte est simplement là. */
.ck-mots--live .ck-mots__i{
	opacity: 0;
}

@media ( prefers-reduced-motion: reduce ){
	.ck-mots--live .ck-mots__i{
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}