*{}
/* =========================
VARIABLES & STYLES DE BASE
========================= */
:root {
--bleu-fonce: #003366;
--bleu-clair: #1e88e5;
--gris-fond: #f5f7fa;
--gris-texte: #444;
--blanc: #ffffff;
--vert-prix: #2e7d32;
--arrondi: 12px;
--ombre: rgba(0, 0, 0, 0.15);
--transition: 0.3s ease;
}
body {
font-family: "Segoe UI", "Roboto", sans-serif;
margin: 0;
background: #bfbbbb;
color: var(--gris-texte);
line-height: 1.6;
}
/* =========================
HEADER & IMAGES RECTANGULAIRES
========================= */
header {
background: #2176cb;
color: var(--blanc);
text-align: center;
padding: 40px 20px;
position: relative;
box-shadow: 0 3px 10px var(--ombre);
}
.header-content {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-bottom: 20px;
}
.side-photo {
width: 500px;
height: 120px;
object-fit: cover;
border: 3px solid var(--blanc);
border-radius: var(--arrondi);
box-shadow: 0 2px 6px rgba(255,255,255,0.4);
}
header h2 {
font-size: 1.8em;
margin-top: 10px;
font-weight: bold;
font-family: poppins ;
}
/* =========================
ZONE DE TEXTE EN CASCADE
========================= */
main {
max-width: 1100px;
margin: 40px 80px;
padding: 0 20px;
}
.membre {
margin: 20px 0;
padding: 15px;
border-left: 5px solid var(--bleu-clair);
background: var(--blanc);
box-shadow: 0 2px 8px var(--ombre);
border-radius: var(--arrondi);
transition: transform var(--transition);
}
.membre:hover {
transform: translateX(8px);
}
.membre strong {
font-size: 1.05em;
color: var(--bleu-fonce);
}
.membre a {
text-decoration: none;
color: #003366;
}
.cascade-1 { margin-left: 0; }
.cascade-2 { margin-left: 40px; }
.cascade-3 { margin-left: 170px; }
.cascade-4 { margin-left: 170px; }
.cascade-5 { margin-left: 170px; }
.texte2{
font-family: 'Courier New', Courier, monospace;
font-size:large;
font-weight: bold;
color:#011529
}
/* =========================
CATALOGUE DES PRODUITS
========================= */
.photo-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
gap: 35px;
padding: 10px;
max-width: 800px;
margin:auto;
}
.photo-row img {
width: 40%;
height: 50px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
cursor: pointer;
transition: transform 0.3s ease;
text-decoration: none;
}
.photo-row img:hover {
transform: scale(1.05);
}
/* =========================
FOOTER
========================= */
footer {
text-align: center;
padding: 20px;
background: #003366;
color: white;
margin-top: 40px;
}