/* PAGE MUSIC – LISTE VERTICALE */ /* #EF3F2D */ /* ---------- Header ---------- header { position: fixed; top: 0; width: 100%; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; background: #2BB2EF; z-index: 10; } header h1, nav a { font-family: "Pinyon Script", cursive; font-size: 48px; font-weight: 400; } nav { display: flex; gap: 24px; } nav a:hover { opacity: 0.6; } */ .music { padding: 4rem 2rem; max-width: 900px; margin: 0 auto; } /* Liste */ .project-list { list-style: none; padding: 0; /* margin-left: -10rem; /* ajuste la valeur */ } /* Élément de liste */ .project { margin-bottom: 5rem; margin-top: 5rem; } /* Titres projets */ .project h2 { font-family: 'Pinyon Script', cursive; font-size: 56px; font-weight: 400; margin-bottom: 0rem; margin-left: -2rem; /* ajuste la valeur */ } /* Description */ .project p { font-family: "Arial Rounded MT Bold", "Arial Rounded", Arial, sans-serif; font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 600px; } /* Bandcamp embed */ .project iframe { width: 100%; max-width: 600px; height: 120px; border: none; } .project-content { display: flex; align-items: flex-start; gap: 2rem; } /* Texte */ .project-text { flex: 1; max-width: 600px; } /* Image */ .project-image { flex: 0 0 400px; /* largeur de l’image */ margin-left: 0rem; /* ajuste la valeur */ margin-top: -3rem; } .project-image img { width: 100%; height: auto; display: block; } /* -------------------- RESPONSIVE -------------------- */ @media (max-width: 900px) { .project-content { flex-direction: column; /* empile texte puis image */ gap: 1.5rem; } .project-image { flex: 1 1 100%; margin-top: 0; /* supprimer le décalage */ } .project h2 { font-size: 42px; /* titre plus petit sur tablette */ } .project p { font-size: 0.95rem; line-height: 1.6; max-width: 100%; /* occupe tout l’espace */ } .project iframe { max-width: 100%; height: auto; /* hauteur auto pour mobile */ } } @media (max-width: 600px) { .music { padding: 2rem 1rem; } .project h2 { font-size: 48px; margin-bottom: 0rem; margin-left: +2rem; /* ajuste la valeur */ } .project p { font-size: 0.9rem; line-height: 1.5; } .project-content { gap: 1rem; } .project-image { width: 100%; } .project iframe { height: 100px; /* réduire hauteur des iframes sur petit écran */ } } @media (max-width: 400px) { .project h2 { font-size: 30px; } .project p { font-size: 0.85rem; } .project iframe { height: 80px; } }