/* =========================================================================
   phsmw-motion.css — couche de dynamisme (côté candidat / vitrine)
   -------------------------------------------------------------------------
   ADDITIF : ne modifie aucune règle existante de phsmw.css / phsmw-accueil.css.
   Objectif : scroll fluide, apparitions au défilement, micro-interactions.
   Accessibilité : tout est neutralisé si l'utilisateur demande moins d'animations.
   ========================================================================= */

/* ---------- 1. Défilement ---------- */

html {
	scroll-behavior: smooth;
}

/* Les ancres ne passent plus sous l'en-tête fixe (+ sous-nav si présente) :
   valeur calculée en JS (site.js) à partir de la hauteur réelle du header. */
[id] {
	scroll-margin-top: var(--section-scroll-offset, 90px);
}

/* ---------- 2. Apparition au défilement ---------- */
/* La classe .reveal est posée par phsmw-motion.js ; .is-visible arrive
   quand l'élément entre dans le viewport. Sans JS, rien n'est masqué. */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
	            transform .7s cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Décalage en cascade pour les grilles de cartes */
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }
.reveal--delay-4 { transition-delay: .32s; }

/* ---------- 3. Barre de progression de lecture ---------- */

.progression-lecture {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 1080;
	background: linear-gradient(90deg, var(--phswm-gold, #c08a3e), var(--phswm-gold-dark, #a6742f));
	transition: width .1s linear;
	pointer-events: none;
}

/* ---------- 4. Micro-interactions ---------- */

/* Boutons : léger soulèvement + ombre */
.btn,
.hero__actions a,
.bouton,
button[type="submit"] {
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn:hover,
.hero__actions a:hover,
.bouton:hover,
button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(26, 26, 26, .16);
}

.btn:active,
.bouton:active,
button[type="submit"]:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(26, 26, 26, .12);
}

/* Cartes : élévation au survol */
.carte,
.card,
.programme__jour,
.temoignage,
.metier__bloc {
	transition: transform .22s ease, box-shadow .22s ease;
}

.carte:hover,
.card:hover,
.programme__jour:hover,
.temoignage:hover,
.metier__bloc:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(26, 26, 26, .12);
}

/* Liens de navigation : soulignement animé */
.nav-link,
.navigation a {
	position: relative;
}

.nav-link::after,
.navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: var(--phswm-gold, #c08a3e);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.nav-link:hover::after,
.navigation a:hover::after {
	transform: scaleX(1);
}

/* Champs de formulaire : focus net et rassurant */
.form-control,
.form-select,
input,
textarea,
select {
	transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--phswm-gold, #c08a3e);
	box-shadow: 0 0 0 3px rgba(192, 138, 62, .18);
	outline: none;
}

/* Accessibilité : anneau de focus visible au clavier (jamais supprimé) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--phswm-gold, #c08a3e);
	outline-offset: 2px;
}

/* ---------- 5. Compteurs animés (section chiffres) ---------- */

.chiffre-anime {
	font-variant-numeric: tabular-nums;
}

/* ---------- 6. Bouton retour en haut ---------- */

.retour-haut {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 50%;
	background: var(--phswm-black, #1a1a1a);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .2s ease;
	z-index: 1070;
	box-shadow: 0 6px 18px rgba(26, 26, 26, .28);
}

.retour-haut.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.retour-haut:hover {
	background: var(--phswm-gold, #c08a3e);
}

/* ---------- 7. Respect des préférences utilisateur ---------- */
/* Si l'utilisateur a demandé moins d'animations, tout redevient statique. */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.reveal,
	.reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.btn:hover,
	.bouton:hover,
	button[type="submit"]:hover,
	.carte:hover,
	.card:hover,
	.programme__jour:hover,
	.temoignage:hover,
	.metier__bloc:hover {
		transform: none;
	}

	.progression-lecture,
	.retour-haut {
		transition: none;
	}
}