/* ==========================================
   VARIABLES
========================================== */

:root {
--wm-background: #262433;
--wm-glass-border: rgba(255, 255, 255, 0.16);
--wm-glass-border-hover: rgba(255, 255, 255, 0.30);
--wm-text: #ffffff;
--wm-text-light: rgba(255, 255, 255, 0.76);
}


/* ==========================================
   BANDEAUX RÉSEAUX SOCIAUX
========================================== */

.reseaux-1 {
background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url("https://webandmedias.com/wp-content/uploads/2026/07/reseaux-1.png");
}


.reseaux-2 {
background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url("https://webandmedias.com/wp-content/uploads/2026/07/reseaux-2.png");
}


.reseaux-3 {
background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url("https://webandmedias.com/wp-content/uploads/2026/07/reseaux-3.png");
}


/* ==========================================
   GRILLES
========================================== */

.services-grid {
display: grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

gap: 30px;

width: 90%;
max-width: 1400px;

margin: 60px auto;

box-sizing: border-box;
}


.social-networks-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}


.services-grid-large {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}


/* ==========================================
   CARTES GLASSMORPHISM
========================================== */

.service-card {
position: relative;

display: flex;
flex-direction: column;
justify-content: space-between;

height: 100%;

padding: 40px;

overflow: hidden;

background:

linear-gradient(
135deg,
rgba(255, 255, 255, 0.11),
rgba(255, 255, 255, 0.035)
);

border:

1px solid
var(--wm-glass-border);

border-radius: 22px;

-webkit-backdrop-filter:
blur(18px);

backdrop-filter:
blur(18px);

box-shadow:

0 20px 50px
rgba(0, 0, 0, 0.22),

inset 0 1px 0
rgba(255, 255, 255, 0.15);

box-sizing: border-box;

transition:

transform 0.35s ease,

background 0.35s ease,

border-color 0.35s ease,

box-shadow 0.35s ease;
}


/* ==========================================
   REFLET LUMINEUX
========================================== */

.service-card::before {
content: "";

position: absolute;

top: -60%;
left: -100%;

width: 80%;
height: 220%;

background:

linear-gradient(
110deg,
transparent 25%,
rgba(255, 255, 255, 0.09) 50%,
transparent 75%
);

transform:
rotate(12deg);

transition:

left 0.8s ease;

pointer-events: none;
}


/* ==========================================
   HALO INTÉRIEUR
========================================== */

.service-card::after {
content: "";

position: absolute;

top: -90px;
right: -90px;

width: 210px;
height: 210px;

border-radius: 50%;

background:

radial-gradient(
circle,
rgba(255, 255, 255, 0.10),
rgba(255, 255, 255, 0.025) 45%,
transparent 72%
);

pointer-events: none;
}


/* ==========================================
   TEXTES DES CARTES
========================================== */

.service-card h3 {
position: relative;

z-index: 2;

margin-top: 0;
margin-bottom: 20px;

color:
var(--wm-text);
}


.service-card p {
position: relative;

z-index: 2;

margin-top: 0;
margin-bottom: 0;

color:
var(--wm-text-light);
}


/* ==========================================
   SURVOL
========================================== */

.service-card:hover {
transform:

translateY(-8px);

background:

linear-gradient(
135deg,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0.055)
);

border-color:

var(--wm-glass-border-hover);

box-shadow:

0 30px 65px
rgba(0, 0, 0, 0.30),

inset 0 1px 0
rgba(255, 255, 255, 0.22);
}


.service-card:hover::before {
left: 130%;
}


/* ==========================================
   CONCLUSION
========================================== */

.social-conclusion {
margin-top: 80px;
margin-bottom: 80px;
}


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

@media screen and (max-width: 1000px) {

.services-grid,
.social-networks-grid,
.services-grid-large {

grid-template-columns:

repeat(2, minmax(0, 1fr));

}

}


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

@media screen and (max-width: 650px) {

.services-grid,
.social-networks-grid,
.services-grid-large {

grid-template-columns:

1fr;

gap: 20px;

width:

calc(100% - 40px);

margin-top: 40px;

margin-bottom: 40px;

}


.service-card {

padding: 30px;

border-radius: 18px;

-webkit-backdrop-filter:

blur(14px);

backdrop-filter:

blur(14px);

}


.service-card:hover {

transform: none;

}


.service-card::before {

display: none;

}

}