.elementor-kit-2151{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-592de1b:#004995;--e-global-color-606c9e3:#F5F8F9;--e-global-color-ea6484a:#E9F1F3;--e-global-color-a988995:#F4328C;--e-global-color-9073382:#FFFFFF;--e-global-color-58e48a5:#192031;background-color:#F5F8F9;}.elementor-kit-2151 e-page-transition{background-color:var( --e-global-color-606c9e3 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================================================== Cartes savoir-faire / matieres / secteurs : texte revele au survol Par defaut : icone en haut de carte, titre en bas. Au survol : la description et le lien se deplient, le titre remonte. Les classes arcom-card, __col, __text, __title, __desc et __cta sont posees dans les listings JetEngine 3546 (matieres), 3845 (savoir-faire) et 3846 (secteurs). Le comportement suit donc ces listings partout ou ils sont utilises, en grille comme en slider. Le survol est lu sur .jet-listing-grid__item et pas sur la carte : JetEngine pose un lien plein-carte par-dessus, qui capte le pointeur et qui n est pas un descendant de la carte. Ecrans tactiles : aucune de ces regles ne s applique, la description et le lien restent visibles en permanence comme avant. ========================================================================== */ @media (hover: hover) and (pointer: fine) { /* l espacement vertical de la carte est pilote ici, pour que le titre tombe exactement sur le padding bas quand tout est replie */ .arcom-card__col { row-gap: 0 !important; } /* le bloc titre + description descend en bas de carte, l icone reste en haut */ .arcom-card__text { margin-top: auto; } /* replie : la ligne de grille passe de 0fr a 1fr, aucune hauteur en dur */ .arcom-card__desc, .arcom-card__cta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease, margin-top .4s ease; } .arcom-card__cta { margin-top: 0; } .arcom-card__desc > .elementor-widget-container, .arcom-card__cta > .elementor-widget-container { overflow: hidden; opacity: 0; transition: opacity .25s ease; } /* deplie au survol et au focus clavier */ .jet-listing-grid__item:hover .arcom-card__desc, .jet-listing-grid__item:hover .arcom-card__cta, .jet-listing-grid__item:focus-within .arcom-card__desc, .jet-listing-grid__item:focus-within .arcom-card__cta { grid-template-rows: 1fr; } .jet-listing-grid__item:hover .arcom-card__cta, .jet-listing-grid__item:focus-within .arcom-card__cta { margin-top: 20px; } .jet-listing-grid__item:hover .arcom-card__desc > .elementor-widget-container, .jet-listing-grid__item:hover .arcom-card__cta > .elementor-widget-container, .jet-listing-grid__item:focus-within .arcom-card__desc > .elementor-widget-container, .jet-listing-grid__item:focus-within .arcom-card__cta > .elementor-widget-container { opacity: 1; transition-delay: .1s; } } @media (prefers-reduced-motion: reduce) { .arcom-card__desc, .arcom-card__cta, .arcom-card__desc > .elementor-widget-container, .arcom-card__cta > .elementor-widget-container { transition: none; } } /* ========================================================================== Listings d articles : la carte se souleve au survol Un zoom en transform: scale() sur un bloc qui contient du texte fait agrandir par le navigateur l image deja calculee du texte au lieu de le redessiner. Mesure faite sur ce site : 16 % de nettete en moins sur le titre survole. On souleve donc la carte au lieu de l agrandir, une translation en pixels entiers ne degrade rien. Listings vises, par identifiant JetEngine. Si tu crees un nouveau listing d articles, ajoute sa classe .jet-listing-grid-- dans les deux listes. 5049 articles (accueil) 5458 1 article 5464 1 article sans image 5482 dernier article 5499 recent (ancien) 5520 plus recents 5535 tous les articles ========================================================================== */ @media (hover: hover) and (pointer: fine) { :is(.jet-listing-grid--5049, .jet-listing-grid--5458, .jet-listing-grid--5464, .jet-listing-grid--5482, .jet-listing-grid--5499, .jet-listing-grid--5520, .jet-listing-grid--5535) .jet-listing-grid__item { /* duree et courbe du mouvement : monter la duree pour un effet plus doux, la courbe demarre franc et se pose lentement */ transition: transform .55s cubic-bezier(.22, .61, .36, 1), filter .55s cubic-bezier(.22, .61, .36, 1); } :is(.jet-listing-grid--5049, .jet-listing-grid--5458, .jet-listing-grid--5464, .jet-listing-grid--5482, .jet-listing-grid--5499, .jet-listing-grid--5520, .jet-listing-grid--5535) .jet-listing-grid__item:hover, :is(.jet-listing-grid--5049, .jet-listing-grid--5458, .jet-listing-grid--5464, .jet-listing-grid--5482, .jet-listing-grid--5499, .jet-listing-grid--5520, .jet-listing-grid--5535) .jet-listing-grid__item:focus-within { transform: translateY(-6px); /* drop-shadow et pas box-shadow : l ombre epouse la forme reelle de la carte, coins arrondis compris, alors que box-shadow dessinerait un rectangle */ filter: drop-shadow(0 12px 20px rgba(25, 32, 49, .13)); position: relative; z-index: 1; } } @media (prefers-reduced-motion: reduce) { .jet-listing-grid__item { transition: none !important; } }/* End custom CSS */