/* -------------------------------------------------------- */
/* main.css – FINAL STABLE + RESPONSIVE CLEAN */
/* -------------------------------------------------------- */

main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;

align-items: center;
padding: 20px;
position: relative;

background: linear-gradient(
to bottom,
rgba(0,191,255,0.6),
rgba(0,172,229,0.64),
rgba(0,153,204,0.68),
rgba(0,134,178,0.72),
rgba(0,115,153,0.76),
rgba(0,96,127,0.80),
rgba(0,76,102,0.84),
rgba(0,57,76,0.88),
rgba(0,38,51,0.92),
rgba(0,19,25,0.96),
rgba(0,0,0,1)
);

/* stabilité rendu */
overflow-x: hidden;
}

/* ========================= */
/* IMAGE PHP */
/* ========================= */

.main-php-image {
display: block;
max-width: 90%;
height: auto;
margin: 20px auto;
border-radius: 12px;

box-shadow:
0 6px 25px rgba(0,0,0,0.6),
0 0 8px rgba(255,255,255,0.3);

transition: transform 0.3s ease,
box-shadow 0.3s ease;

/* stabilité GPU */
transform: translateZ(0);
backface-visibility: hidden;
}

/* Hover */
.main-php-image:hover {
transform: translateY(-5px) translateZ(0);
box-shadow: 0 10px 35px rgba(0,0,0,0.75),
0 0 10px rgba(255,255,255,0.4);
}

/* ======================================================== */
/* ====================== RESPONSIVE ======================= */
/* ======================================================== */

/* -------- TABLET -------- */
@media (max-width: 1024px) {
main { padding: 18px;
}

.main-php-image {
max-width: 85%;
margin: 18px auto;
}
}

/* -------- MOBILE -------- */
@media (max-width: 768px) {
main { padding: 15px;
}

.main-php-image {
max-width: 90%;
margin: 15px auto;
}
}

/* -------- SMALL MOBILE -------- */
@media (max-width: 480px) {
main { padding: 12px;
}

.main-php-image {
max-width: 95%;
margin: 12px auto;
}
}