/* Deep Beauty — Mouvement : cascades, survols, accordéon. */
/* ---------- Mouvement ---------- */
/* Apparition en cascade : --i (rang dans la grille) décale chaque carte de 90 ms. Animation et non transition :
 * l'état final redevient celui de la feuille de style, donc le survol des cartes reste libre. */
.js .apparition:not(.est-visible) { opacity: 0; }
.js .apparition.est-visible { animation: monter 0.9s var(--ease-sortie) calc(var(--i, 0) * 90ms) backwards; }
.js .apparition-zoom.est-visible { animation-name: zoomer; }
@keyframes zoomer { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes tracer { from { transform: scaleX(0); } }
@keyframes progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes panneau { from { opacity: 0; translate: 0 -10px; } }

/* Filet sous chaque titre de section : il se trace quand le titre apparaît. */
.titre-section::after { content: ""; display: block; width: 56px; height: 2px; margin: 18px auto 0; background: var(--encre); transform-origin: center; }
.js .titre-section:not(.est-visible)::after { transform: scaleX(0); }
.js .titre-section.est-visible::after { animation: tracer 0.8s var(--ease-sortie) 0.35s backwards; }

/* Cartes : légère élévation au survol (souris seulement). */
.carte-produit, .chiffre, .mode, .domaine, .etape { transition: transform 0.45s var(--ease-sortie), box-shadow 0.45s var(--ease-sortie), border-color 0.3s; }
.carte-visuel img { transition: transform 0.9s var(--ease-sortie); transform-origin: center bottom; }
@media (hover: hover) {
	.carte-produit:hover, .chiffre:hover, .mode:hover, .domaine:hover, .etape:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -14px rgba(31, 34, 43, 0.24); border-color: #cfcfcf; }
	.carte-produit:hover .carte-visuel img { transform: scale(1.05); }
}

/* Les trois modes d'action et les quatre étapes : la pastille numérotée « apparaît » dans l'ordre. */
.modes.est-vu .pastille-numero { animation: pop 0.6s var(--ease-sortie) calc(0.25s + var(--i, 0) * 0.28s) backwards; }
.etapes.est-vu .pastille-numero { animation: pop 0.6s var(--ease-sortie) calc(0.15s + var(--i, 0) * 0.3s) backwards; }

/* Comparatif : les lignes se posent l'une après l'autre. */
.comparatif-cadre.est-vu tbody tr { animation: apparaitre 0.6s var(--ease-sortie) calc(0.3s + var(--i, 0) * 70ms) backwards; }

/* Étapes : un filet relie chaque pastille à la suivante (une seule rangée, donc ordinateur seulement). */
@media (min-width: 1101px) {
	.etape { position: relative; }
	.etape:not(:last-child)::after { content: ""; position: absolute; z-index: 2; left: 62px; top: 47px; width: calc(100% - 16px); height: 2px; background: linear-gradient(90deg, var(--encre), rgba(31, 34, 43, 0.25)); transform-origin: left; }
	.js .etapes:not(.est-vu) .etape::after { transform: scaleX(0); }
	.etapes.est-vu .etape:not(:last-child)::after { animation: tracer 0.8s var(--ease-sortie) calc(0.55s + var(--i, 0) * 0.3s) backwards; }
}

/* Bandeau : la vignette active se remplit pendant les 20 s de la diapositive (le JavaScript pose .progresse). */
.heros-vignette.progresse::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: #fff; transform-origin: left; animation: progression var(--duree-diapo, 20s) linear both; }

/* Menu : le panneau glisse et apparaît. translate (et non transform) : le panneau étroit se centre déjà par transform. */
.menu-panneau:not([hidden]) { animation: panneau 0.28s var(--ease-sortie) both; }

/* FAQ : la réponse s'ouvre et se referme en douceur (navigateurs récents ; les autres l'affichent d'un coup). */
.faq-item::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.4s var(--ease-sortie), content-visibility 0.4s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
.faq-item summary { transition: background 0.25s; }
.faq-item summary:hover { background: rgba(31, 34, 43, 0.04); }