/* =============================== IMPORT POLICE (à mettre dans le ) ================================= */ /* =============================== PALETTE PASTEL ================================= */ :root { --chien-main: #d85c63; /* rouge rosé */ --parents: #f8c8d8; /* rose pâle */ --grandparents: #d8c2f0; /* parme */ --arriere-gp: #ece3fa; /* violet clair */ } /* =============================== STRUCTURE GÉNÉRALE ================================= */ .pedigree-scroll { width: 100%; } .pedigree-tree { display: flex; gap: 20px; align-items: stretch; flex-wrap: nowrap; font-family: 'Poppins', sans-serif; } /* Colonnes générations */ .generation { display: flex; flex-direction: column; justify-content: space-around; gap: 15px; flex: 1; } /* =============================== CARTES CHIENS ================================= */ .dog-card { padding: 14px; text-align: center; box-sizing: border-box; border-radius: 14px; font-size: 14px; font-weight: 400; letter-spacing: 0.3px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; } .dog-card strong { font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px; } /* Effet léger au survol */ .dog-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10); } .gender { font-size: 16px; margin-right: 6px; vertical-align: middle; color: #333; } .gender.male { color: #1e90ff; } /* bleu doux pour mâle */ .gender.female { color: #ff69b4; } /* rose doux pour femelle */ /* =============================== COULEURS PAR GÉNÉRATION ================================= */ /* Chien principal */ .gen-main .dog-card { background: var(--chien-main); color: #ffffff; } /* Parents */ .generation:nth-child(2) .dog-card { background: var(--parents); } /* Grands-parents */ .generation:nth-child(3) .dog-card { background: var(--grandparents); } /* Arrière-grands-parents */ .generation:nth-child(4) .dog-card { background: var(--arriere-gp); } /* =============================== RESPONSIVE ================================= */ /* Tablette */ @media (max-width: 992px) { .dog-card { font-size: 13px; padding: 12px; } } /* Mobile */ @media (max-width: 768px) { .pedigree-tree { flex-direction: column; } .generation { flex-direction: row; flex-wrap: wrap; justify-content: center; } .dog-card { flex: 1 1 45%; margin-bottom: 10px; } /* Le chien principal prend toute la largeur */ .gen-main .dog-card { flex: 1 1 100%; } }