Sections diagonales - 4 parties
body {
margin: 0;
font-family: 'Arial', sans-serif;
overflow-x: hidden;
}
.container {
display: flex;
flex-wrap: nowrap;
/* Hauteur ajustée */
height: 70vh;
}
/* Style général des sections */
.section {
position: relative;
flex: 1; /* Répartit l'espace équitablement entre les 4 blocs */
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
/* Légère ombre */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: transform 0.4s ease, box-shadow 0.4s ease;
/* Chemin de découpe diagonal */
clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}
/* Surcouche sombre pour lisibilité */
.section::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1;
}
/* Contenu */
.content {
position: relative;
z-index: 2;
padding: 1rem;
}
/* TAILLE DU TEXTE (Gardée petite comme demandé) */
.section h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
text-transform: uppercase;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
/* Style du bouton */
.button-link {
background-color: #ff6600;
color: white;
text-decoration: none;
border: none;
padding: 0.8rem 1.6rem;
border-radius: 1px;
font-weight: bold;
font-size: 0.9rem;
cursor: pointer;
display: inline-block;
transition: background 0.3s;
}
.button-link:hover {
background-color: #ff8533;
}
/* Effet zoom au survol */
.section:hover {
transform: scale(1.03);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
z-index: 10; /* Passe au dessus des autres au survol */
}
/* --- IMAGES DE FOND (À modifier avec vos photos) --- */
#telecom {
/* Mettez ici l'image pour Télécommunication */
background-image: url("https://test.instadrone.fr/wp-content/uploads/2026/01/Copie-de-Pic-du-Midi-de-Bigorre-panoramique-180°-scaled.jpg");
}
#topographie {
/* Mettez ici l'image pour Topographie */
background-image: url("https://test.instadrone.fr/wp-content/uploads/2026/01/image-1.png");
}
#inspections {
/* Mettez ici l'image pour Inspections */
background-image: url("https://test.instadrone.fr/wp-content/uploads/2026/01/Mont-Saint-Michel-scaled.jpg");
}
#agriculture {
/* Mettez ici l'image pour Agriculture */
background-image: url("https://test.instadrone.fr/wp-content/uploads/2026/01/DSC5070-scaled.jpg");
}
/* Responsive Mobile */
@media (max-width: 900px) {
.container {
flex-direction: column;
height: auto;
}
.section {
clip-path: none; /* Enlève la diagonale sur mobile */
height: 40vh; /* Hauteur ajustée car il y a 4 blocs maintenant */
border-bottom: 1px solid white; /* Petit séparateur visuel */
}
}
