@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap'); /* .profile-item-person { align-items: center; display: flex; flex-direction: column; width: clamp(120px, calc(53.7016px + 17.6796vw), 280px); } .profile-item-container { border-radius: 50%; height: clamp(180px, calc(146.851px + 8.8398vw), 260px); -webkit-tap-highlight-color: transparent; transform: scale(clamp( 0.28, calc(0.28 + 0.20 * (100vw - 375px) / 905px), 0.48 )); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); width: 400px; } .profile-item-container:hover { transform: scale(0.54); } .profile-item-container-inner { clip-path: path( "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z" ); position: relative; transform-origin: 50%; top: -200px; } .profile-item-circle { background-color: #fee7d3; border-radius: 50%; cursor: pointer; height: 380px; left: 10px; pointer-events: none; position: absolute; top: 210px; width: 380px; } .profile-item-img { pointer-events: none; position: absolute; top: 50%; left: 50%; width: 90%; transform: translate(-50%, 80%) scale(1.15); transform-origin: center bottom; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } .profile-item-container:hover .profile-item-img { transform: translate(-50%, 80%) scale(1.25); } */ /* .profile-item-divider { background-color: #13f3ff; height: 1px; width: 160px; } */ .profile-item-person { align-items: center; display: flex; flex-direction: column; /* 112px @375vw → 192px @1280vw : slope = 80/905 = 8.84vw */ width: clamp(112px, calc(78.85px + 8.84vw), 192px); } .profile-item-container { aspect-ratio: 400 / 590; /* on garde les proportions du design */ border-radius: 0 0 50% 50% / 0 0 32.2% 32.2%; overflow: hidden; /* remplace clip-path: path() */ position: relative; -webkit-tap-highlight-color: transparent; width: 100%; /* piloté par .profile-item-person */ } .profile-item-container-inner { height: 100%; position: relative; width: 100%; } .profile-item-circle { background-color: #fee7d3; border-radius: 50%; aspect-ratio: 1; bottom: 0; left: 2.5%; /* 10px / 400px */ position: absolute; width: 95%; /* 380px / 400px */ } .profile-item-img { bottom: 0; left: 50%; position: absolute; transform: translateX(-50%) scale(1.15); transform-origin: center bottom; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); width: 90%; } .profile-item-container:hover .profile-item-img { transform: translateX(-50%) scale(1.25); } .p_name { color: #0d0f17; font-size: 1.8rem; font-weight: 600; margin-top: 16px; text-align: center; } .p_title { color: #0d0f17; font-family: 'Orbitron', sans-serif; font-size: 14px; font-style: italic; margin-top: 4px; text-align: center; } .team-grid { display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); grid-auto-rows: auto; /* gap: 2rem; */ justify-items: center; /* padding-left: 2rem; padding-right: 2rem; */ } @media screen and (max-width: 900px){ .profile-item-container { pointer-events: none; } } /* ===================================================================== 12. ÉQUIPE Utilisé dans
. Les styles de base (.team-grid, .profile-item-person, .profile-item-container, .profile-item-img, .profile-item-circle, .profile-item-divider, .p_name, .p_title) sont définis dans profil.css (voir dans le ) — ici uniquement les ajustements responsive. ===================================================================== */ @media screen and (max-width: 1050px) { .team-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); } /* .profile-item-person { width: 200px; } */ .p_name { font-size: var(--fs-body); } /* .profile-item-container { transform: scale(0.44); height: 262px; } */ .p_title { text-align: center; } } /* .profile-item-divider { width: 100px; } } */ @media screen and (max-width: 574px) { .team-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); } } /* @media screen and (max-width: 375px) { .team-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .commentary-divider { height: 70%; } .card-comment { margin-bottom: 25px; } .section h2 { font-size: 2.5rem; } } */ /* .profile-item-container:after { background-color: #f2f2f2; content: ""; height: 10px; position: absolute; top: 390px; width: 100%; } */