simples */ .ng-card-skin .ng-topics li, .ng-card-skin .ng-topics p { position: relative; margin: 4px 0; padding-left: 22px; /* espace pour la puce */ color: var(--ng-text); } /* La puce verte NG DATA (appliquée aux
) */ .ng-card-skin .ng-topics li::before, .ng-card-skin .ng-topics p::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 999px; background: var(--ng-accent); box-shadow: 0 0 0 2px rgba(148,214,0,.18); transform: translateY(-50%); } /* Hover premium NG DATA */ .ng-card-skin { transition: transform .25s ease, box-shadow .25s ease; } .ng-card-skin:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.35); } .ng-card-skin .ng-divider { width: 40%; height: 2px; margin: 10px 0 15px 0; background: linear-gradient(90deg, transparent, var(--ng-accent), transparent); } .ng-card-skin .ng-topics { background: rgba(255,255,255,0.03); padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); } /* ============================================================ NG DATA – Effet premium pour les cartes de formation (appliqué aux cards ayant la classe .ng-card-skin) ============================================================ */ /* Effet de base */ .ng-card-skin { position: relative; border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.12) !important; transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; } /* Bordure cyber dynamique au hover */ .ng-card-skin:hover { border-color: rgba(148, 214, 0, 0.75) !important; /* vert cyber */ box-shadow: 0 0 22px rgba(148, 214, 0, 0.25), 0 0 44px rgba(0, 200, 180, 0.25), inset 0 0 18px rgba(148, 214, 0, 0.15); transform: translateY(-6px); /* léger lift premium */ } /* Effet border-glow animé */ .ng-card-skin::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, rgba(148,214,0,0.55), rgba(0,200,190,0.55), transparent 70% ); opacity: 0; filter: blur(20px); transition: opacity .45s ease; pointer-events: none; z-index: 0; } .ng-card-skin:hover::before { opacity: 1; } /* Pour que le contenu soit toujours au-dessus */ .ng-card-skin > * { position: relative; z-index: 2; } /* Anti-bouclette mobile (interdit les hover trop agressifs) */ @media (max-width: 767px) { .ng-card-skin:hover { transform: none; box-shadow: 0 0 14px rgba(148,214,0,.25); } .ng-card-skin:hover::before { opacity: .6; } } /* Radius uniforme pour les cartes formations NG DATA */ .ng-card-skin, .ng-card-skin::before, .ng-card-skin::after { border-radius: 26px !important; /* ajuste la valeur si tu les veux plus ou moins rondes */ } /* On force aussi le rayon sur le wrapper interne pour éviter les cassures */ .ng-card-skin > .elementor-widget-wrap, .ng-card-skin > .e-con-inner, .ng-card-skin .elementor-widget-wrap { border-radius: inherit !important; overflow: hidden; /* tout ce qui dépasse est coupé, bord bien net */ } /* L'image respecte aussi le radius global */ .ng-card-skin .elementor-image, .ng-card-skin .elementor-image img { border-top-left-radius: 26px !important; border-top-right-radius: 26px !important; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-102024a *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-102024a { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-102024a img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-102024a::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-102024a::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-102024a img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-102024a::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b9217cf *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-b9217cf { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-b9217cf img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-b9217cf::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-b9217cf::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-b9217cf img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-b9217cf::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a122aff *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-a122aff { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-a122aff img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-a122aff::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-a122aff::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-a122aff img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-a122aff::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d098889 *//* =========================== NG DATA – Card Skin (clean + fixed) =========================== */ :root{ --ng-card-bg:#0E1630; --ng-card-bg2:#0F1A3A; --ng-text:#E9F1FF; --ng-muted:#A6B3D1; --ng-accent:#94D600; --ng-border:rgba(255,255,255,.14); } /* Base card skin */ .ng-card-skin, .ng-card-skin.elementor-container, .ng-card-skin.elementor-column{ position: relative !important; background: linear-gradient(180deg,var(--ng-card-bg),var(--ng-card-bg2)) !important; color: var(--ng-text) !important; border: 1px solid var(--ng-border) !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(0,0,0,.25) !important; overflow: hidden !important; } /* Decorative overlay */ .ng-card-skin::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(120% 120% at 0% 0%, rgba(148,214,0,.16), transparent 42%), radial-gradient(120% 120% at 100% 0%, rgba(0,201,200,.10), transparent 44%); z-index:0; } /* Keep content above overlay */ .ng-card-skin > .elementor-widget-wrap, .ng-card-skin > .e-con-inner, .ng-card-skin .elementor-widget-wrap{ position: relative !important; z-index: 1 !important; } /* Images */ .ng-card-skin .elementor-image img{ border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; object-fit: cover; } /* Text */ .ng-card-skin .elementor-heading-title{ color: var(--ng-text) !important; } .ng-card-skin .elementor-widget-text-editor{ color: var(--ng-muted) !important; } /* --------------------------------- LIST FIX — Very Important Default: NO STYLED BULLETS -----------------------------------*/ .ng-card-skin ul{ list-style: initial !important; } .ng-card-skin ul li::before{ content:none !important; } /* --------------------------------- Styled bullets ONLY on `.ng-topics` -----------------------------------*/ .ng-card-skin ul.ng-topics{ list-style: none !important; padding-left: 0; } .ng-card-skin ul.ng-topics li{ padding-left: 22px; position: relative; color: var(--ng-text); } .ng-card-skin ul.ng-topics li::before{ content:""; position:absolute; left:0; top:0.6em; width:10px; height:10px; border-radius:999px; background: var(--ng-accent); box-shadow: 0 0 0 2px rgba(148,214,0,.18); } /* Button */ .ng-card-skin .elementor-button{ background: var(--ng-accent) !important; color:#0A140A !important; border-radius:999px !important; border:0 !important; box-shadow: 0 6px 18px rgba(148,214,0,.22) !important; } .ng-card-skin .elementor-button:hover{ filter: brightness(1.06); } /* Puces NG DATA uniquement pour le bloc Thèmes abordés */ .ng-card-skin .ng-topics { margin: 0; padding: 0; } /* Cas 1 : si c'est un vrai
simples */ .ng-card-skin .ng-topics li, .ng-card-skin .ng-topics p { position: relative; margin: 4px 0; padding-left: 22px; /* espace pour la puce */ color: var(--ng-text); } /* La puce verte NG DATA (appliquée aux
) */ .ng-card-skin .ng-topics li::before, .ng-card-skin .ng-topics p::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 999px; background: var(--ng-accent); box-shadow: 0 0 0 2px rgba(148,214,0,.18); transform: translateY(-50%); } /* Hover premium NG DATA */ .ng-card-skin { transition: transform .25s ease, box-shadow .25s ease; } .ng-card-skin:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.35); } .ng-card-skin .ng-divider { width: 40%; height: 2px; margin: 10px 0 15px 0; background: linear-gradient(90deg, transparent, var(--ng-accent), transparent); } .ng-card-skin .ng-topics { background: rgba(255,255,255,0.03); padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); } /* ============================================================ NG DATA – Effet premium pour les cartes de formation (appliqué aux cards ayant la classe .ng-card-skin) ============================================================ */ /* Effet de base */ .ng-card-skin { position: relative; border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.12) !important; transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; } /* Bordure cyber dynamique au hover */ .ng-card-skin:hover { border-color: rgba(148, 214, 0, 0.75) !important; /* vert cyber */ box-shadow: 0 0 22px rgba(148, 214, 0, 0.25), 0 0 44px rgba(0, 200, 180, 0.25), inset 0 0 18px rgba(148, 214, 0, 0.15); transform: translateY(-6px); /* léger lift premium */ } /* Effet border-glow animé */ .ng-card-skin::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, rgba(148,214,0,0.55), rgba(0,200,190,0.55), transparent 70% ); opacity: 0; filter: blur(20px); transition: opacity .45s ease; pointer-events: none; z-index: 0; } .ng-card-skin:hover::before { opacity: 1; } /* Pour que le contenu soit toujours au-dessus */ .ng-card-skin > * { position: relative; z-index: 2; } /* Anti-bouclette mobile (interdit les hover trop agressifs) */ @media (max-width: 767px) { .ng-card-skin:hover { transform: none; box-shadow: 0 0 14px rgba(148,214,0,.25); } .ng-card-skin:hover::before { opacity: .6; } } /* Radius uniforme pour les cartes formations NG DATA */ .ng-card-skin, .ng-card-skin::before, .ng-card-skin::after { border-radius: 26px !important; /* ajuste la valeur si tu les veux plus ou moins rondes */ } /* On force aussi le rayon sur le wrapper interne pour éviter les cassures */ .ng-card-skin > .elementor-widget-wrap, .ng-card-skin > .e-con-inner, .ng-card-skin .elementor-widget-wrap { border-radius: inherit !important; overflow: hidden; /* tout ce qui dépasse est coupé, bord bien net */ } /* L'image respecte aussi le radius global */ .ng-card-skin .elementor-image, .ng-card-skin .elementor-image img { border-top-left-radius: 26px !important; border-top-right-radius: 26px !important; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-5757c4e *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-5757c4e { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-5757c4e img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-5757c4e::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-5757c4e::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-5757c4e img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-5757c4e::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-5e9d4c8 *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-5e9d4c8 { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-5e9d4c8 img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-5e9d4c8::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-5e9d4c8::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-5e9d4c8 img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-5e9d4c8::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-10c1881 *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-10c1881 { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-10c1881 img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-10c1881::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-10c1881::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-10c1881 img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-10c1881::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a9eba56 *//* =========================== NG DATA – Card Skin (clean + fixed) =========================== */ :root{ --ng-card-bg:#0E1630; --ng-card-bg2:#0F1A3A; --ng-text:#E9F1FF; --ng-muted:#A6B3D1; --ng-accent:#94D600; --ng-border:rgba(255,255,255,.14); } /* Base card skin */ .ng-card-skin, .ng-card-skin.elementor-container, .ng-card-skin.elementor-column{ position: relative !important; background: linear-gradient(180deg,var(--ng-card-bg),var(--ng-card-bg2)) !important; color: var(--ng-text) !important; border: 1px solid var(--ng-border) !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(0,0,0,.25) !important; overflow: hidden !important; } /* Decorative overlay */ .ng-card-skin::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(120% 120% at 0% 0%, rgba(148,214,0,.16), transparent 42%), radial-gradient(120% 120% at 100% 0%, rgba(0,201,200,.10), transparent 44%); z-index:0; } /* Keep content above overlay */ .ng-card-skin > .elementor-widget-wrap, .ng-card-skin > .e-con-inner, .ng-card-skin .elementor-widget-wrap{ position: relative !important; z-index: 1 !important; } /* Images */ .ng-card-skin .elementor-image img{ border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; object-fit: cover; } /* Text */ .ng-card-skin .elementor-heading-title{ color: var(--ng-text) !important; } .ng-card-skin .elementor-widget-text-editor{ color: var(--ng-muted) !important; } /* --------------------------------- LIST FIX — Very Important Default: NO STYLED BULLETS -----------------------------------*/ .ng-card-skin ul{ list-style: initial !important; } .ng-card-skin ul li::before{ content:none !important; } /* --------------------------------- Styled bullets ONLY on `.ng-topics` -----------------------------------*/ .ng-card-skin ul.ng-topics{ list-style: none !important; padding-left: 0; } .ng-card-skin ul.ng-topics li{ padding-left: 22px; position: relative; color: var(--ng-text); } .ng-card-skin ul.ng-topics li::before{ content:""; position:absolute; left:0; top:0.6em; width:10px; height:10px; border-radius:999px; background: var(--ng-accent); box-shadow: 0 0 0 2px rgba(148,214,0,.18); } /* Button */ .ng-card-skin .elementor-button{ background: var(--ng-accent) !important; color:#0A140A !important; border-radius:999px !important; border:0 !important; box-shadow: 0 6px 18px rgba(148,214,0,.22) !important; } .ng-card-skin .elementor-button:hover{ filter: brightness(1.06); } /* Puces NG DATA uniquement pour le bloc Thèmes abordés */ .ng-card-skin .ng-topics { margin: 0; padding: 0; } /* Cas 1 : si c'est un vrai
simples */ .ng-card-skin .ng-topics li, .ng-card-skin .ng-topics p { position: relative; margin: 4px 0; padding-left: 22px; /* espace pour la puce */ color: var(--ng-text); } /* La puce verte NG DATA (appliquée aux
) */ .ng-card-skin .ng-topics li::before, .ng-card-skin .ng-topics p::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 999px; background: var(--ng-accent); box-shadow: 0 0 0 2px rgba(148,214,0,.18); transform: translateY(-50%); } /* Hover premium NG DATA */ .ng-card-skin { transition: transform .25s ease, box-shadow .25s ease; } .ng-card-skin:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.35); } .ng-card-skin .ng-divider { width: 40%; height: 2px; margin: 10px 0 15px 0; background: linear-gradient(90deg, transparent, var(--ng-accent), transparent); } .ng-card-skin .ng-topics { background: rgba(255,255,255,0.03); padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); } /* ============================================================ NG DATA – Effet premium pour les cartes de formation (appliqué aux cards ayant la classe .ng-card-skin) ============================================================ */ /* Effet de base */ .ng-card-skin { position: relative; border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.12) !important; transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; } /* Bordure cyber dynamique au hover */ .ng-card-skin:hover { border-color: rgba(148, 214, 0, 0.75) !important; /* vert cyber */ box-shadow: 0 0 22px rgba(148, 214, 0, 0.25), 0 0 44px rgba(0, 200, 180, 0.25), inset 0 0 18px rgba(148, 214, 0, 0.15); transform: translateY(-6px); /* léger lift premium */ } /* Effet border-glow animé */ .ng-card-skin::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, rgba(148,214,0,0.55), rgba(0,200,190,0.55), transparent 70% ); opacity: 0; filter: blur(20px); transition: opacity .45s ease; pointer-events: none; z-index: 0; } .ng-card-skin:hover::before { opacity: 1; } /* Pour que le contenu soit toujours au-dessus */ .ng-card-skin > * { position: relative; z-index: 2; } /* Anti-bouclette mobile (interdit les hover trop agressifs) */ @media (max-width: 767px) { .ng-card-skin:hover { transform: none; box-shadow: 0 0 14px rgba(148,214,0,.25); } .ng-card-skin:hover::before { opacity: .6; } } /* Radius uniforme pour les cartes formations NG DATA */ .ng-card-skin, .ng-card-skin::before, .ng-card-skin::after { border-radius: 26px !important; /* ajuste la valeur si tu les veux plus ou moins rondes */ } /* On force aussi le rayon sur le wrapper interne pour éviter les cassures */ .ng-card-skin > .elementor-widget-wrap, .ng-card-skin > .e-con-inner, .ng-card-skin .elementor-widget-wrap { border-radius: inherit !important; overflow: hidden; /* tout ce qui dépasse est coupé, bord bien net */ } /* L'image respecte aussi le radius global */ .ng-card-skin .elementor-image, .ng-card-skin .elementor-image img { border-top-left-radius: 26px !important; border-top-right-radius: 26px !important; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-2a188dd *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-2a188dd { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-2a188dd img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-2a188dd::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-2a188dd::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-2a188dd img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-2a188dd::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-d034121 *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-d034121 { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-d034121 img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-d034121::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-d034121::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-d034121 img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-d034121::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-d639af2 *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-d639af2 { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-d639af2 img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-d639af2::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-d639af2::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-d639af2 img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-d639af2::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-75d5576 *//* =========================== NG DATA – Card Skin (clean + fixed) =========================== */ :root{ --ng-card-bg:#0E1630; --ng-card-bg2:#0F1A3A; --ng-text:#E9F1FF; --ng-muted:#A6B3D1; --ng-accent:#94D600; --ng-border:rgba(255,255,255,.14); } /* Base card skin */ .ng-card-skin, .ng-card-skin.elementor-container, .ng-card-skin.elementor-column{ position: relative !important; background: linear-gradient(180deg,var(--ng-card-bg),var(--ng-card-bg2)) !important; color: var(--ng-text) !important; border: 1px solid var(--ng-border) !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(0,0,0,.25) !important; overflow: hidden !important; } /* Decorative overlay */ .ng-card-skin::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(120% 120% at 0% 0%, rgba(148,214,0,.16), transparent 42%), radial-gradient(120% 120% at 100% 0%, rgba(0,201,200,.10), transparent 44%); z-index:0; } /* Keep content above overlay */ .ng-card-skin > .elementor-widget-wrap, .ng-card-skin > .e-con-inner, .ng-card-skin .elementor-widget-wrap{ position: relative !important; z-index: 1 !important; } /* Images */ .ng-card-skin .elementor-image img{ border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; object-fit: cover; } /* Text */ .ng-card-skin .elementor-heading-title{ color: var(--ng-text) !important; } .ng-card-skin .elementor-widget-text-editor{ color: var(--ng-muted) !important; } /* --------------------------------- LIST FIX — Very Important Default: NO STYLED BULLETS -----------------------------------*/ .ng-card-skin ul{ list-style: initial !important; } .ng-card-skin ul li::before{ content:none !important; } /* --------------------------------- Styled bullets ONLY on `.ng-topics` -----------------------------------*/ .ng-card-skin ul.ng-topics{ list-style: none !important; padding-left: 0; } .ng-card-skin ul.ng-topics li{ padding-left: 22px; position: relative; color: var(--ng-text); } .ng-card-skin ul.ng-topics li::before{ content:""; position:absolute; left:0; top:0.6em; width:10px; height:10px; border-radius:999px; background: var(--ng-accent); box-shadow: 0 0 0 2px rgba(148,214,0,.18); } /* Button */ .ng-card-skin .elementor-button{ background: var(--ng-accent) !important; color:#0A140A !important; border-radius:999px !important; border:0 !important; box-shadow: 0 6px 18px rgba(148,214,0,.22) !important; } .ng-card-skin .elementor-button:hover{ filter: brightness(1.06); } /* Puces NG DATA uniquement pour le bloc Thèmes abordés */ .ng-card-skin .ng-topics { margin: 0; padding: 0; } /* Cas 1 : si c'est un vrai
simples */ .ng-card-skin .ng-topics li, .ng-card-skin .ng-topics p { position: relative; margin: 4px 0; padding-left: 22px; /* espace pour la puce */ color: var(--ng-text); } /* La puce verte NG DATA (appliquée aux
) */ .ng-card-skin .ng-topics li::before, .ng-card-skin .ng-topics p::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 999px; background: var(--ng-accent); box-shadow: 0 0 0 2px rgba(148,214,0,.18); transform: translateY(-50%); } /* Hover premium NG DATA */ .ng-card-skin { transition: transform .25s ease, box-shadow .25s ease; } .ng-card-skin:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.35); } .ng-card-skin .ng-divider { width: 40%; height: 2px; margin: 10px 0 15px 0; background: linear-gradient(90deg, transparent, var(--ng-accent), transparent); } .ng-card-skin .ng-topics { background: rgba(255,255,255,0.03); padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); } /* ============================================================ NG DATA – Effet premium pour les cartes de formation (appliqué aux cards ayant la classe .ng-card-skin) ============================================================ */ /* Effet de base */ .ng-card-skin { position: relative; border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.12) !important; transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; } /* Bordure cyber dynamique au hover */ .ng-card-skin:hover { border-color: rgba(148, 214, 0, 0.75) !important; /* vert cyber */ box-shadow: 0 0 22px rgba(148, 214, 0, 0.25), 0 0 44px rgba(0, 200, 180, 0.25), inset 0 0 18px rgba(148, 214, 0, 0.15); transform: translateY(-6px); /* léger lift premium */ } /* Effet border-glow animé */ .ng-card-skin::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, rgba(148,214,0,0.55), rgba(0,200,190,0.55), transparent 70% ); opacity: 0; filter: blur(20px); transition: opacity .45s ease; pointer-events: none; z-index: 0; } .ng-card-skin:hover::before { opacity: 1; } /* Pour que le contenu soit toujours au-dessus */ .ng-card-skin > * { position: relative; z-index: 2; } /* Anti-bouclette mobile (interdit les hover trop agressifs) */ @media (max-width: 767px) { .ng-card-skin:hover { transform: none; box-shadow: 0 0 14px rgba(148,214,0,.25); } .ng-card-skin:hover::before { opacity: .6; } } /* Radius uniforme pour les cartes formations NG DATA */ .ng-card-skin, .ng-card-skin::before, .ng-card-skin::after { border-radius: 26px !important; /* ajuste la valeur si tu les veux plus ou moins rondes */ } /* On force aussi le rayon sur le wrapper interne pour éviter les cassures */ .ng-card-skin > .elementor-widget-wrap, .ng-card-skin > .e-con-inner, .ng-card-skin .elementor-widget-wrap { border-radius: inherit !important; overflow: hidden; /* tout ce qui dépasse est coupé, bord bien net */ } /* L'image respecte aussi le radius global */ .ng-card-skin .elementor-image, .ng-card-skin .elementor-image img { border-top-left-radius: 26px !important; border-top-right-radius: 26px !important; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-540fa68 *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-540fa68 { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-540fa68 img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-540fa68::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-540fa68::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-540fa68 img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-540fa68::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4ad197d *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-4ad197d { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-4ad197d img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-4ad197d::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-4ad197d::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-4ad197d img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-4ad197d::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e2f762a *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-e2f762a { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-e2f762a img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-e2f762a::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-e2f762a::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-e2f762a img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-e2f762a::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1b9845a *//* =========================== NG DATA – Card Skin (clean + fixed) =========================== */ :root{ --ng-card-bg:#0E1630; --ng-card-bg2:#0F1A3A; --ng-text:#E9F1FF; --ng-muted:#A6B3D1; --ng-accent:#94D600; --ng-border:rgba(255,255,255,.14); } /* Base card skin */ .ng-card-skin, .ng-card-skin.elementor-container, .ng-card-skin.elementor-column{ position: relative !important; background: linear-gradient(180deg,var(--ng-card-bg),var(--ng-card-bg2)) !important; color: var(--ng-text) !important; border: 1px solid var(--ng-border) !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(0,0,0,.25) !important; overflow: hidden !important; } /* Decorative overlay */ .ng-card-skin::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(120% 120% at 0% 0%, rgba(148,214,0,.16), transparent 42%), radial-gradient(120% 120% at 100% 0%, rgba(0,201,200,.10), transparent 44%); z-index:0; } /* Keep content above overlay */ .ng-card-skin > .elementor-widget-wrap, .ng-card-skin > .e-con-inner, .ng-card-skin .elementor-widget-wrap{ position: relative !important; z-index: 1 !important; } /* Images */ .ng-card-skin .elementor-image img{ border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; object-fit: cover; } /* Text */ .ng-card-skin .elementor-heading-title{ color: var(--ng-text) !important; } .ng-card-skin .elementor-widget-text-editor{ color: var(--ng-muted) !important; } /* --------------------------------- LIST FIX — Very Important Default: NO STYLED BULLETS -----------------------------------*/ .ng-card-skin ul{ list-style: initial !important; } .ng-card-skin ul li::before{ content:none !important; } /* --------------------------------- Styled bullets ONLY on `.ng-topics` -----------------------------------*/ .ng-card-skin ul.ng-topics{ list-style: none !important; padding-left: 0; } .ng-card-skin ul.ng-topics li{ padding-left: 22px; position: relative; color: var(--ng-text); } .ng-card-skin ul.ng-topics li::before{ content:""; position:absolute; left:0; top:0.6em; width:10px; height:10px; border-radius:999px; background: var(--ng-accent); box-shadow: 0 0 0 2px rgba(148,214,0,.18); } /* Button */ .ng-card-skin .elementor-button{ background: var(--ng-accent) !important; color:#0A140A !important; border-radius:999px !important; border:0 !important; box-shadow: 0 6px 18px rgba(148,214,0,.22) !important; } .ng-card-skin .elementor-button:hover{ filter: brightness(1.06); } /* Puces NG DATA uniquement pour le bloc Thèmes abordés */ .ng-card-skin .ng-topics { margin: 0; padding: 0; } /* Cas 1 : si c'est un vrai
simples */ .ng-card-skin .ng-topics li, .ng-card-skin .ng-topics p { position: relative; margin: 4px 0; padding-left: 22px; /* espace pour la puce */ color: var(--ng-text); } /* La puce verte NG DATA (appliquée aux
) */ .ng-card-skin .ng-topics li::before, .ng-card-skin .ng-topics p::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 999px; background: var(--ng-accent); box-shadow: 0 0 0 2px rgba(148,214,0,.18); transform: translateY(-50%); } /* Hover premium NG DATA */ .ng-card-skin { transition: transform .25s ease, box-shadow .25s ease; } .ng-card-skin:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.35); } .ng-card-skin .ng-divider { width: 40%; height: 2px; margin: 10px 0 15px 0; background: linear-gradient(90deg, transparent, var(--ng-accent), transparent); } .ng-card-skin .ng-topics { background: rgba(255,255,255,0.03); padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); } /* ============================================================ NG DATA – Effet premium pour les cartes de formation (appliqué aux cards ayant la classe .ng-card-skin) ============================================================ */ /* Effet de base */ .ng-card-skin { position: relative; border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.12) !important; transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; } /* Bordure cyber dynamique au hover */ .ng-card-skin:hover { border-color: rgba(148, 214, 0, 0.75) !important; /* vert cyber */ box-shadow: 0 0 22px rgba(148, 214, 0, 0.25), 0 0 44px rgba(0, 200, 180, 0.25), inset 0 0 18px rgba(148, 214, 0, 0.15); transform: translateY(-6px); /* léger lift premium */ } /* Effet border-glow animé */ .ng-card-skin::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, rgba(148,214,0,0.55), rgba(0,200,190,0.55), transparent 70% ); opacity: 0; filter: blur(20px); transition: opacity .45s ease; pointer-events: none; z-index: 0; } .ng-card-skin:hover::before { opacity: 1; } /* Pour que le contenu soit toujours au-dessus */ .ng-card-skin > * { position: relative; z-index: 2; } /* Anti-bouclette mobile (interdit les hover trop agressifs) */ @media (max-width: 767px) { .ng-card-skin:hover { transform: none; box-shadow: 0 0 14px rgba(148,214,0,.25); } .ng-card-skin:hover::before { opacity: .6; } } /* Radius uniforme pour les cartes formations NG DATA */ .ng-card-skin, .ng-card-skin::before, .ng-card-skin::after { border-radius: 26px !important; /* ajuste la valeur si tu les veux plus ou moins rondes */ } /* On force aussi le rayon sur le wrapper interne pour éviter les cassures */ .ng-card-skin > .elementor-widget-wrap, .ng-card-skin > .e-con-inner, .ng-card-skin .elementor-widget-wrap { border-radius: inherit !important; overflow: hidden; /* tout ce qui dépasse est coupé, bord bien net */ } /* L'image respecte aussi le radius global */ .ng-card-skin .elementor-image, .ng-card-skin .elementor-image img { border-top-left-radius: 26px !important; border-top-right-radius: 26px !important; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-05e6d88 *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-05e6d88 { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-05e6d88 img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-05e6d88::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-05e6d88::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-05e6d88 img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-05e6d88::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-fe77d71 *//* Cadre premium autour de CETTE image */ .elementor-921 .elementor-element.elementor-element-fe77d71 { position: relative; border-radius: 18px; padding: 1px; /* cadre fin */ background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%), linear-gradient(180deg, #1B2648, #050915); box-shadow: 0 18px 40px rgba(0,0,0,.55); overflow: hidden; } /* L'image elle-même */ .elementor-921 .elementor-element.elementor-element-fe77d71 img { width: 100%; height: 190px; /* ajuste à 180/200 si besoin */ object-fit: cover; border-radius: 16px; display: block; transition: transform .4s ease, filter .4s ease; } /* Glow doux en haut de l’image */ .elementor-921 .elementor-element.elementor-element-fe77d71::before { content:""; position:absolute; inset:0; border-radius:16px; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 45%), radial-gradient(120% 120% at 100% 0%, rgba(148,214,0,.35), transparent 55%); mix-blend-mode: soft-light; pointer-events:none; z-index:1; } /* Reflet "glass" en diagonale */ .elementor-921 .elementor-element.elementor-element-fe77d71::after { content:""; position:absolute; top:-40%; left:-40%; width:80%; height:180%; background: linear-gradient(60deg, rgba(255,255,255,.35), transparent 60%); opacity:0; transform: translateX(-10%); pointer-events:none; z-index:2; transition: opacity .4s ease, transform .4s ease; } /* Effet au survol de la CARTE (si le container a la classe .ng-card-skin) */ .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-fe77d71 img { transform: scale(1.06) translateY(-2px); filter: brightness(1.05) contrast(1.02); } .ng-card-skin:hover .elementor-921 .elementor-element.elementor-element-fe77d71::after { opacity:0.25; transform: translateX(15%); }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-9c95e42 *//* ===================================== NG DATA – CTA Premium Ghost (wide) ===================================== */ .ng-cta-ghost.elementor-button, .ng-cta-ghost .elementor-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 42px !important; /* <-- padding élargi LEFT + RIGHT */ border-radius: 999px; border: 1px solid rgba(148,214,0,.45); background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.18), transparent 55%); color: #E9F1FF; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08); cursor: pointer; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .18s ease, color .18s ease; } /* Glow layer */ .ng-cta-ghost.elementor-button::before, .ng-cta-ghost .elementor-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(148,214,0,.22), transparent 50%), radial-gradient(circle at 100% 0%, rgba(0,201,200,.35), transparent 55%); opacity: 0; mix-blend-mode: screen; pointer-events: none; transition: opacity .3s ease; } /* Hover effect */ .ng-cta-ghost.elementor-button:hover, .ng-cta-ghost .elementor-button:hover { border-color: #94D600; color: #0A140A; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(148,214,0,.7), 0 8px 22px rgba(0,0,0,.45); } .ng-cta-ghost.elementor-button:hover::before, .ng-cta-ghost .elementor-button:hover::before { opacity: 1; } /* Arrow to show it's a real redirect */ .ng-cta-ghost.elementor-button::after, .ng-cta-ghost .elementor-button::after { content: "↗"; font-size: 16px; opacity: .85; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-aaad907 *//* NG DATA — Section claire premium (light containers) */ .ng-section-light { position: relative; border-radius: 26px; padding: 40px !important; background: linear-gradient( 135deg, #F5F5F5 0%, #F5F7FF 45%, #F5F5F5 100% ); border: 1px solid rgba(15,22,51,0.06); box-shadow: 0 10px 26px rgba(0,0,0,.06); overflow: hidden; transition: box-shadow .24s ease, border-color .24s ease; } /* Glow vert très léger */ .ng-section-light::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.16), transparent 60%); opacity: .45; /* moins agressif */ z-index: 0; } /* Ligne lumineuse discrète en haut */ .ng-section-light::after { content: ""; position: absolute; top: 0; left: 12%; width: 76%; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, transparent, #94D600, #0F1633, transparent ); opacity: .75; } /* Hover très soft : on renforce juste la bordure + l'ombre */ .ng-section-light:hover { border-color: rgba(148,214,0,.35); box-shadow: 0 16px 38px rgba(0,0,0,.10); } /* Contenu au-dessus de l'effet */ .ng-section-light > .elementor-container, .ng-section-light .elementor-widget-wrap { position: relative; z-index: 2; } /* Mobile */ @media (max-width: 767px) { .ng-section-light { padding: 24px !important; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,.08); } } /* NG DATA — Section claire premium (light containers) */ .ng-section-light { position: relative; border-radius: 26px; padding: 40px !important; background: linear-gradient( 135deg, #F5F5F5 0%, #F5F7FF 45%, #F5F5F5 100% ); border: 1px solid rgba(15,22,51,0.06); box-shadow: 0 10px 26px rgba(0,0,0,.06); overflow: hidden; transition: box-shadow .24s ease, border-color .24s ease; } /* Glow vert très léger */ .ng-section-light::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 0% 0%, rgba(148,214,0,.16), transparent 60%); opacity: .45; /* moins agressif */ z-index: 0; } /* Ligne lumineuse discrète en haut */ .ng-section-light::after { content: ""; position: absolute; top: 0; left: 12%; width: 76%; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, transparent, #94D600, #0F1633, transparent ); opacity: .75; } /* Hover très soft : on renforce juste la bordure + l'ombre */ .ng-section-light:hover { border-color: rgba(148,214,0,.35); box-shadow: 0 16px 38px rgba(0,0,0,.10); } /* Contenu au-dessus de l'effet */ .ng-section-light > .elementor-container, .ng-section-light .elementor-widget-wrap { position: relative; z-index: 2; } /* Mobile */ @media (max-width: 767px) { .ng-section-light { padding: 24px !important; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,.08); } }/* End custom CSS */