/* Start custom CSS *//* Héros v3 : vitrine des logiciels (Elementor > Réglages de la page > CSS personnalisé de la page d'accueil).
   « body.elementor-page-33 » désigne la page ; le héros est son premier bloc. Seulement ce que les styles Elementor n'expriment pas :
   panneaux superposés (hauteur identique pour les 5 produits, donc aucun décalage), apparition de 400 ms, plaque arrière,
   onglet actif, progression et bouton de la présentation automatique (ara-vitrine.js). */

/* Panneaux superposés dans une même cellule : la zone prend la hauteur du plus grand (aucun décalage entre produits).
   Le produit choisi apparaît en fondu et léger glissement (400 ms) ; le précédent s'efface aussitôt. */
body.elementor-page-33 > .e-con:first-child .e-tabs-content-area-base { display: grid; }
body.elementor-page-33 > .e-con:first-child .e-tabs-content-area-base > .e-tab-content-base { grid-area: 1 / 1; display: block !important; visibility: hidden; }
body.elementor-page-33 > .e-con:first-child .e-tabs-content-area-base > .e-tab-content-base.e--selected { visibility: visible; animation: ara-apparition 0.4s ease both; }
@keyframes ara-apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Chaque fenêtre occupe toute la hauteur de la zone ; le lien produit reste calé en bas */
body.elementor-page-33 > .e-con:first-child .e-tab-content-base > .e-con { height: 100%; }
body.elementor-page-33 > .e-con:first-child .e-tab-content-base > .e-con > .e-con:last-child { flex-grow: 1; }
body.elementor-page-33 > .e-con:first-child .e-tab-content-base > .e-con > .e-con:last-child > .e-con:last-child { margin-block-start: auto; }
/* Les captures des produits non affichés ne sont pas téléchargées (leur cadre garde sa taille) */
body.elementor-page-33 > .e-con:first-child .e-tab-content-base:not(.e--selected) img { display: none; }

/* Profondeur : plaque translucide décalée derrière la fenêtre du logiciel */
body.elementor-page-33 > .e-con:first-child .e-tabs-content-area-base::before {
	content: ""; grid-area: 1 / 1; margin: 14px -10px -12px 14px; border-radius: 16px;
	background-color: rgba(246, 242, 234, 0.07); border: 1px solid rgba(246, 242, 234, 0.1);
}

/* Onglet actif : texte papier, filet latérite douce */
body.elementor-page-33 > .e-con:first-child [role="tab"] { position: relative; }
body.elementor-page-33 > .e-con:first-child [role="tab"][aria-selected="true"] { color: var(--ara-paper); border-color: var(--ara-laterite-soft); }

/* Présentation automatique : filet cyan de progression sous l'onglet actif (seul usage du cyan) */
body.elementor-page-33 > .e-con:first-child [data-ara-lecture] [role="tab"][aria-selected="true"]::after {
	content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background-color: var(--ara-cyan);
	transform-origin: left center; animation: ara-progression var(--ara-duree, 6s) linear forwards;
}
body.elementor-page-33 > .e-con:first-child [data-ara-lecture="pause"] [role="tab"][aria-selected="true"]::after { animation-play-state: paused; }
@keyframes ara-progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Bouton pause / lecture (créé par ara-vitrine.js, absent sans JavaScript ou avec « réduire les animations ») */
body.elementor-page-33 .ara-vitrine-pause {
	position: absolute; top: 26px; inset-inline-end: 24px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center;
	padding: 0; border-radius: 10px; border: 1px solid rgba(246, 242, 234, 0.24); background-color: var(--ara-navy);
	color: var(--ara-paper); cursor: pointer;
}
body.elementor-page-33 .ara-vitrine-pause:hover { background-color: var(--ara-navy-soft); color: var(--ara-paper); }
body.elementor-page-33 .ara-vitrine-pause:focus-visible { outline: 2px solid var(--ara-laterite-soft); outline-offset: 2px; }
body.elementor-page-33 .ara-vitrine-pause::before { content: ""; box-sizing: border-box; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
body.elementor-page-33 .ara-vitrine-pause[aria-pressed="true"]::before {
	width: 0; height: 0; margin-inline-start: 3px; border-style: solid; border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}
@media (max-width: 767px) { body.elementor-page-33 .ara-vitrine-pause { top: 16px; inset-inline-end: 14px; } }

@media (prefers-reduced-motion: reduce) {
	body.elementor-page-33 > .e-con:first-child .e-tabs-content-area-base > .e-tab-content-base.e--selected { animation: none; }
}/* End custom CSS */