:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6f572bc *//*========================================
DIGITALSOFT PRO HERO - PARTIE 1
STRUCTURE
========================================*/

.dsp-hero{

position:relative;
overflow:hidden;

padding:110px 20px;

display:flex;
justify-content:center;
align-items:center;

text-align:center;

background:url("https://digitalsoftpro.org/wp-content/uploads/2026/07/167be681-abc5-4940-a882-6d678dce95fe-300x160.webp") center center/cover no-repeat;

}

.hero-content{

position:relative;
z-index:10;

max-width:900px;

margin:auto;

}
/*========================================
PARTIE 2
BACKGROUND PREMIUM
========================================*/

.dsp-hero::before{

content:"";

position:absolute;

inset:0;

background:rgba(8,25,55,.72);

backdrop-filter:blur(2px);

z-index:1;

}

.dsp-hero::after{

content:"";

position:absolute;

width:900px;
height:900px;

border-radius:50%;

background:radial-gradient(circle,
rgba(0,102,255,.35) 0%,
rgba(0,102,255,.12) 40%,
transparent 75%);

top:-280px;
left:-180px;

filter:blur(90px);

animation:heroGlow 12s infinite alternate ease-in-out;

z-index:2;

}

@keyframes heroGlow{

0%{

transform:translate(0,0) scale(1);

}

100%{

transform:translate(120px,70px) scale(1.25);

}

}
/*========================================
PARTIE 3
CONTENU
========================================*/

.hero-badge{

display:inline-block;

padding:14px 28px;

background:rgba(255,255,255,.10);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.20);

border-radius:60px;

color:#fff;

font-weight:700;

margin-bottom:35px;

}

.dsp-hero h1{

font-size:72px;

font-weight:900;

line-height:1.05;

color:#fff;

margin-bottom:25px;

}

.dsp-hero h1 span{

color:#2f8cff;

}

.dsp-hero p{

font-size:22px;

line-height:1.9;

color:rgba(255,255,255,.88);

max-width:760px;

margin:0 auto 50px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 42px;

background:#0066ff;

color:#fff;

font-weight:700;

border-radius:14px;

text-decoration:none;

box-shadow:0 15px 40px rgba(0,102,255,.35);

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-6px);

background:#0050d6;

}

.btn-secondary{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 42px;

background:rgba(255,255,255,.08);

border:2px solid rgba(255,255,255,.25);

color:#fff;

border-radius:14px;

text-decoration:none;

transition:.35s;

backdrop-filter:blur(10px);

}

.btn-secondary:hover{

background:#0066ff;

border-color:#0066ff;

transform:translateY(-6px);

}
/*========================================
PARTIE 4
RESPONSIVE
========================================*/

@media(max-width:992px){

.dsp-hero{

padding:90px 20px;

}

.dsp-hero h1{

font-size:52px;

}

.dsp-hero p{

font-size:19px;

}

}

@media(max-width:768px){

.dsp-hero{

padding:70px 20px;

}

.hero-badge{

font-size:13px;

padding:10px 20px;

}

.dsp-hero h1{

font-size:38px;

line-height:1.15;

}

.dsp-hero p{

font-size:17px;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

}

}

@media(max-width:480px){

.dsp-hero h1{

font-size:32px;

}

.dsp-hero p{

font-size:16px;

}

}
/*========================================
PARTIE 5
ANIMATION DE L'IMAGE DE FOND
========================================*/

/* Image de fond animée */

.dsp-hero{

animation:heroBackground 18s ease-in-out infinite alternate;

}

/* Reflet lumineux */

.dsp-hero .hero-content::after{

content:"";

position:absolute;

top:-40%;

left:-60%;

width:220px;

height:180%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);

transform:rotate(20deg);

animation:shineEffect 8s linear infinite;

pointer-events:none;

}

/* Zoom + déplacement */

@keyframes heroBackground{

0%{

background-size:100%;

background-position:center center;

}

50%{

background-size:108%;

background-position:center top;

}

100%{

background-size:115%;

background-position:center center;

}

}

/* Brillance */

@keyframes shineEffect{

0%{

left:-70%;

}

100%{

left:140%;

}

}
/*====================================================
DIGITALSOFT PRO HERO
PARTIE 6 - PARTICULES PREMIUM
====================================================*/

/* Halo derrière le texte */

.hero-content::before{

content:"";

position:absolute;

left:50%;
top:45%;

transform:translate(-50%,-50%);

width:550px;
height:550px;

border-radius:50%;

background:radial-gradient(circle,
rgba(0,102,255,.22) 0%,
rgba(0,102,255,.08) 45%,
transparent 75%);

filter:blur(50px);

animation:heroPulse 8s ease-in-out infinite;

z-index:-1;

}

/* Particules */

.hero-content{

position:relative;

}

.hero-content span::after{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

background-image:

radial-gradient(circle,#ffffff 1.5px,transparent 2px),
radial-gradient(circle,#4ea1ff 1.8px,transparent 2px),
radial-gradient(circle,#7fc2ff 1.5px,transparent 2px);

background-size:

140px 140px,
190px 190px,
260px 260px;

opacity:.25;

animation:particlesMove 20s linear infinite;

pointer-events:none;

}

/* Halo */

@keyframes heroPulse{

0%{

transform:translate(-50%,-50%) scale(.95);

opacity:.45;

}

50%{

transform:translate(-50%,-50%) scale(1.12);

opacity:1;

}

100%{

transform:translate(-50%,-50%) scale(.95);

opacity:.45;

}

}

/* Particules */

@keyframes particlesMove{

0%{

background-position:

0 0,
0 0,
0 0;

}

100%{

background-position:

0 -300px,
80px -220px,
-80px -160px;

}

}
/*==================================================
DIGITALSOFT PRO HERO
PARTIE 8 - ARRONDIS PREMIUM RESPONSIVE
==================================================*/

/* Hero */

.dsp-hero{

position:relative;

margin:30px auto;

width:calc(100% - 60px);

max-width:1800px;

border-radius:40px;

overflow:hidden;

box-shadow:
0 25px 70px rgba(15,23,42,.15);

}

/* Contenu */

.hero-content{

position:relative;

z-index:5;

max-width:900px;

margin:auto;

padding:80px 60px;

border-radius:30px;

}

/* Badge */

.hero-badge{

border-radius:999px;

}

/* Boutons */

.btn-primary,
.btn-secondary{

border-radius:16px;

}

/*=========================
TABLETTE
=========================*/

@media (max-width:1024px){

.dsp-hero{

width:calc(100% - 40px);

margin:20px auto;

border-radius:32px;

}

.hero-content{

padding:70px 40px;

border-radius:24px;

}

}

/*=========================
MOBILE
=========================*/

@media (max-width:768px){

.dsp-hero{

width:calc(100% - 24px);

margin:12px auto;

border-radius:24px;

}

.hero-content{

padding:50px 25px;

border-radius:20px;

}

.btn-primary,
.btn-secondary{

width:100%;

border-radius:14px;

}

}

/*=========================
PETITS SMARTPHONES
=========================*/

@media (max-width:480px){

.dsp-hero{

width:calc(100% - 16px);

margin:8px auto;

border-radius:18px;

}

.hero-content{

padding:40px 18px;

border-radius:16px;

}

.hero-badge{

font-size:13px;

padding:10px 18px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-85d2860 *//*========================================
DIGITALSOFT PRO
MEILLEURES VENTES
========================================*/

.products-title{

max-width:900px;

margin:80px auto 50px;

padding:0 20px;

text-align:center;

}

.section-badge{

display:inline-block;

padding:10px 22px;

background:#eef5ff;

color:#0066ff;

font-size:14px;

font-weight:700;

border-radius:50px;

margin-bottom:22px;

box-shadow:0 10px 25px rgba(0,102,255,.08);

}

.products-title h2{

margin:0;

font-size:48px;

font-weight:800;

line-height:1.15;

color:#162033;

margin-bottom:18px;

letter-spacing:-1px;

}

.products-title p{

max-width:700px;

margin:auto;

font-size:19px;

line-height:1.8;

color:#667085;

}

/* Animation */

.products-title{

opacity:0;

transform:translateY(30px);

animation:fadeProducts .8s ease forwards;

}

@keyframes fadeProducts{

to{

opacity:1;

transform:translateY(0);

}

}

/* Responsive */

@media(max-width:768px){

.products-title{

margin:60px auto 40px;

}

.products-title h2{

font-size:34px;

}

.products-title p{

font-size:17px;

}

.section-badge{

font-size:13px;

padding:8px 18px;

}

}

@media(max-width:480px){

.products-title h2{

font-size:28px;

line-height:1.25;

}

.products-title p{

font-size:16px;

}

}/* End custom CSS */