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

main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 20px;
position: relative;
overflow-x: hidden;
}

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

.main-php-image {
display: block;
max-width: 100%;
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;
}

}