/* E0 — l'accueil. Le vide est le message : cette feuille ne fait que placer trois éléments et
   orchestrer leur apparition. Tout le reste vient de base.css et composants.css. */

/* Le filet d'état se détache du châssis nu : il est en haut à gauche, pas dans le flux centré */
.k-page.plein > .k-filet {
	position: absolute;
	top: 16px;
	left: 32px;
	text-align: left;
}

@media (max-width: 640px) {
	.k-page.plein > .k-filet { left: 16px; }
}

/* La scène : l'orbe, le champ, les raccourcis. Elle apparaît en 600 ms au chargement — « le vide,
   puis l'orbe apparaît et commence à respirer. Rien d'autre ne s'affiche avant. »
   L'apparition est une ANIMATION CSS et non une classe posée par le JS. C'est ce qui garantit que
   la porte d'entrée du site s'affiche même si un fichier de script manque ou tombe : sans opacité
   zéro au repos, une page sans JS est visible d'emblée au lieu d'être blanche.
   La règle prefers-reduced-motion de base.css coupe l'animation, et la scène est alors là tout de
   suite — le bon comportement pour qui demande moins de mouvement. */
.accueil-scene {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	animation: accueil-apparait 600ms ease both;
}

@keyframes accueil-apparait {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Les deux raccourcis contextuels, tout en bas. Ils s'effacent dès que le champ prend le focus */
.accueil-raccourcis {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 24px;
	transition: opacity 240ms ease;
}

.accueil-raccourcis.efface {
	opacity: 0;
	pointer-events: none;
}

/* Un raccourci n'est pas un bouton de la charte : c'est un murmure cliquable. 15 px et non 13,
   pour rester au-dessus du plancher de contraste de Brume (§5.8). */
.accueil-raccourci {
	min-height: 44px;
	padding: 0;
	border: none;
	background: none;
	color: var(--brume);
	font-family: var(--police-texte);
	font-size: 15px;
	cursor: pointer;
}

.accueil-raccourci:hover { color: var(--encre); }

/* La réponse de Coco monte depuis le bas — l'animation vient de .k-feuille */
.accueil-reponse {
	max-width: 440px;
	margin: 40px auto 0;
	text-align: left;
}

.accueil-exemples {
	margin-top: 16px;
	color: var(--brume);
	font-size: 15px;
}

/* Les deux choix d'une ambiguïté — deux, jamais trois (§8.5) */
.accueil-choix {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
}