/*
 * Motion : Perinea & Sport -- apparitions et micro-interactions
 * Description : Le « mouvement et dynamisme » demandé par Léa (18/08/2026), rendu par le
 *   moins coûteux de l'arbre de décision du protocole : transitions CSS pour les états,
 *   apparition au défilement pilotée par une classe posée en JS (l'animation reste CSS).
 * Technique : transition + @keyframes ; aucune boucle runtime.
 * Statut : client (Perinea)
 * Reduced-motion : géré -- les apparitions deviennent un fondu, les mouvements sont retirés.
 * WCAG 2.2.2 : N/A (aucune animation > 5 s, aucune boucle)
 * Poids : ~2 Ko
 * Dependances : tokens motion (design/motion-design/css-motion-tokens.css), tokens-perinea.css
 * Clients : Perinea
 *
 * P1 : seules `transform` et `opacity` sont animées -- jamais une propriété de layout.
 * P3 : l'état par défaut est VISIBLE. La classe `.perinea-anime` n'est posée par le JS que
 *      si le JS tourne ; sans lui, rien n'est caché.
 * P5 : aucune durée ni courbe en dur -- tout vient des tokens motion.
 */

/* ---- Tokens motion, repli inclus -------------------------------------- */
:root {
	--motion-instant: 100ms;
	--motion-fast: 200ms;
	--motion-base: 300ms;
	--motion-slow: 500ms;
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
}

/* ---- Apparition au défilement ------------------------------------------ */
/* `.perinea-anime` sur <html> dit que le JS a pris la main : lui seul autorise l'état
   de départ masqué. Sans JS, les sections sont visibles d'emblée (P3).

   On anime le CONTENU des sections (`*-inner`), JAMAIS la section elle-même : faire
   varier l'opacité d'un bloc à fond coloré fait « apparaître » l'aplat beige, ce qui se
   voit et se lit comme un défaut (retour de Monsieur, 04/09/2026). Le fond reste posé,
   seul ce qu'il porte monte et se révèle. */

.perinea-anime .entry-content [class*="dtb-"] > [class$="-inner"],
.perinea-anime .entry-content > h2,
.perinea-anime .entry-content > h3,
.perinea-anime .entry-content > p,
.perinea-anime .entry-content > ul {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity var(--motion-slow) var(--ease-decelerate),
	            transform var(--motion-slow) var(--ease-decelerate);
}

.perinea-anime .entry-content .est-visible {
	opacity: 1;
	transform: none;
}

/* Le hero n'attend pas : il est déjà à l'écran au chargement, l'y faire monter
   retarderait la première lecture. */
.perinea-anime .entry-content .dtb-hero > [class$="-inner"] {
	opacity: 1;
	transform: none;
}

/* ---- Micro-interactions ------------------------------------------------- */
/* Le mouvement des cartes reste minuscule : c'est une réponse au geste, pas un effet. */

.dtb-cards a,
.dtb-cards article,
.dtb-cards li {
	transition: transform var(--motion-fast) var(--ease-standard),
	            box-shadow var(--motion-fast) var(--ease-standard);
}

.dtb-cards a:hover,
.dtb-cards a:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--dt-shadow-2);
}

.dtb-hero .dtb-hero-cta,
.dtb-cta a,
.main-navigation .main-nav ul li a {
	transition: background-color var(--motion-fast) var(--ease-standard),
	            color var(--motion-fast) var(--ease-standard),
	            transform var(--motion-instant) var(--ease-standard);
}

.dtb-hero .dtb-hero-cta:active,
.dtb-cta a:active {
	transform: translateY(1px);
}

/* Le focus doit être VU : il ne s'anime pas, il apparaît. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--dt-primary);
	outline-offset: 3px;
	border-radius: var(--dt-radius-1);
}

/* La FAQ s'ouvre sur une rotation du chevron -- `transform`, jamais `height`. */
.dtb-faq summary::after,
.dtb-faq [aria-expanded] svg {
	transition: transform var(--motion-fast) var(--ease-standard);
}

/* ---- Mouvement réduit --------------------------------------------------- */
/* « reduce » n'est pas « rien » (P2) : on retire le DÉPLACEMENT, on garde le fondu, qui
   ne déclenche aucun trouble vestibulaire. */
@media (prefers-reduced-motion: reduce) {
	.perinea-anime .entry-content [class*="dtb-"] > [class$="-inner"],
	.perinea-anime .entry-content > h2,
	.perinea-anime .entry-content > h3,
	.perinea-anime .entry-content > p,
	.perinea-anime .entry-content > ul {
		transform: none;
		transition: opacity var(--motion-base) var(--ease-standard);
	}

	.dtb-cards a:hover,
	.dtb-cards a:focus-visible,
	.dtb-hero .dtb-hero-cta:active,
	.dtb-cta a:active {
		transform: none;
	}
}



/* ---- Le thème ne reprend pas la main sur les liens des blocs ------------- */
/* GeneratePress pose `a:hover, a:focus, a:active { color: var(--contrast) }` sur TOUT le
   document, avec une faible spécificité mais sans exception. Sur une palette monochrome,
   ce `--contrast` vaut l'encre : au clic, un lien posé sur une surface sombre virait au
   noir (relevé par Monsieur, 04/09/2026). Les blocs déclarent désormais leurs états ;
   cette règle ferme la porte pour ceux qu'un bloc futur oublierait.

   `:where()` N'EST PAS UN ORNEMENT (11/09/2026, run 434). Écrite `[class*="dtb-"] a:active`,
   cette règle pesait 0,2,1 : elle ne protégeait plus seulement les blocs distraits, elle
   BATTAIT l'anatomie du bouton de conversion (0,2,0) et posait l'encre du corps sur le bouton
   survolé -- 2,63:1 mesuré au rendu, en ligne depuis le 04/09. Un garde-fou posé EN AVAL de ce
   qu'il protège doit être plus FAIBLE que lui : sinon il cesse d'être un filet et devient un
   plafond. Un filet se pose sous le trapèze, pas devant.

   `:where()` annule sa part de spécificité et `:is()` prend le plus fort de ses arguments : il
   reste `a` + une pseudo-classe, soit 0,1,1 -- exactement le poids de GeneratePress, que l'ordre
   de chargement (thème enfant en dernier, mesuré dans le HTML servi) suffit à départager, et
   strictement moins qu'un composant qui déclare ses états. Ne pas réécrire cette règle sans
   recalculer les trois poids : garde-fou >= GeneratePress, garde-fou < composant. */
:where([class*="dtb-"]) a:is(:active, :focus) {
	color: inherit;
}
/* Le pied de page pose une couleur propre plutôt que d'hériter : sur son fond d'encre, la
   couleur du corps serait illisible. Même traitement de poids que le garde-fou ci-dessus, et
   pour la même raison : écrite `.dtb-footer a:active`, cette règle pesait 0,2,1 -- elle battait
   l'anatomie du bouton (0,2,0) exactement comme le faisait D1, dans le fichier même où on venait
   d'écrire qu'on ne le referait plus. Le cas était LATENT (aucun `dtb-btn` au pied de page
   aujourd'hui) : un piège armé, relevé à l'audit du 11/09/2026 (F10), pas un défaut en ligne.
   Ce n'est pas l'intention d'une règle qui la rend inoffensive, c'est son poids. */
:where(.dtb-footer) a:is(:active, :focus) {
	color: var(--dt-text-on-primary);
}