* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f5f5f7;
color: #222;
}
.auth-page {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 12px;
}
.auth-card {
width: 100%;
max-width: 430px;
background: #fff;
padding: 24px;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.auth-card h1 {
text-align: center;
font-size: 26px;
margin: 0 0 6px;
}
.auth-card h2 {
text-align: center;
font-size: 20px;
margin: 0 0 8px;
}
.auth-intro {
text-align: center;
color: #666;
font-size: 14px;
margin-bottom: 20px;
line-height: 1.4;
}
.form-group {
margin-bottom: 13px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
font-weight: 600;
}
.form-group input,
.form-group select {
width: 100%;
height: 42px;
padding: 9px 11px;
border: 1px solid #d8d8d8;
border-radius: 9px;
background: #fff;
font-size: 14px;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #555;
}
.btn-primary {
width: 100%;
height: 44px;
border: none;
border-radius: 9px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.message {
padding: 10px 12px;
border-radius: 9px;
margin-bottom: 15px;
font-size: 14px;
}
.message p {
margin: 4px 0;
}
.message.error {
background: #ffe8e8;
}
.message.success {
background: #e7f8ea;
}
.auth-footer {
text-align: center;
margin: 16px 0 0;
font-size: 14px;
}
.auth-footer a,
.auth-card a {
color: #222;
font-weight: 600;
}
/* Tablette */
@media (max-width: 768px) {
.auth-page {
align-items: flex-start;
padding-top: 18px;
}
.auth-card {
max-width: 500px;
padding: 22px;
}
}
/* Téléphone */
@media (max-width: 480px) {
.auth-page {
padding: 10px;
}
.auth-card {
max-width: 100%;
padding: 18px 14px;
border-radius: 12px;
}
.auth-card h1 {
font-size: 23px;
}
.auth-card h2 {
font-size: 18px;
}
.auth-intro {
font-size: 13px;
margin-bottom: 16px;
}
.form-group {
margin-bottom: 11px;
}
.form-group input,
.form-group select {
height: 40px;
font-size: 14px;
}
.btn-primary {
height: 42px;
font-size: 14px;
}
}
/* =========================================================
HEADER
========================================================= */
.site-header {
background: #fff;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 100;
}
.header-container {
max-width: 1050px;
margin: auto;
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.logo {
text-decoration: none;
color: #222;
font-weight: 800;
font-size: 21px;
}
.header-container nav {
display: flex;
align-items: center;
gap: 20px;
}
.header-container nav a {
color: #444;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
/* =========================================================
PROFIL
========================================================= */
.profile-page {
max-width: 900px;
margin: auto;
padding: 30px 15px;
}
.profile-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}
.profile-cover {
height: 170px;
background: linear-gradient(
135deg,
#ff6b81,
#ff9f9f
);
}
.profile-content {
padding: 0 30px 30px;
}
.profile-photo-wrapper {
margin-top: -65px;
}
.profile-photo {
width: 130px;
height: 130px;
border-radius: 50%;
object-fit: cover;
border: 5px solid #fff;
}
.profile-photo-default {
background: #eee;
display: flex;
align-items: center;
justify-content: center;
font-size: 55px;
}
.profile-main-info {
margin-top: 12px;
}
.profile-main-info h1 {
margin: 0;
font-size: 27px;
}
.profile-main-info h1 span {
color: #777;
font-weight: 400;
font-size: 20px;
}
.profile-username {
margin: 5px 0;
color: #777;
}
.profile-location {
color: #555;
margin: 8px 0 18px;
}
.btn-profile {
display: inline-block;
padding: 10px 18px;
background: #222;
color: #fff;
border-radius: 9px;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.profile-section {
margin-top: 30px;
border-top: 1px solid #eee;
padding-top: 22px;
}
.profile-section h2 {
font-size: 19px;
margin-bottom: 10px;
}
.profile-section p {
line-height: 1.6;
}
.empty-info {
color: #888;
}
.profile-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 25px;
}
.profile-detail {
background: #f7f7f8;
padding: 16px;
border-radius: 12px;
}
.profile-detail span {
display: block;
color: #777;
font-size: 12px;
margin-bottom: 5px;
}
.profile-detail strong {
font-size: 15px;
}
/* =========================================================
RESPONSIVE PROFIL
========================================================= */
@media (max-width: 700px) {
.header-container {
padding: 12px 15px;
}
.header-container nav {
gap: 12px;
}
.header-container nav a {
font-size: 12px;
}
.profile-page {
padding: 15px 10px;
}
.profile-content {
padding: 0 18px 22px;
}
.profile-cover {
height: 130px;
}
.profile-photo {
width: 105px;
height: 105px;
}
.profile-photo-wrapper {
margin-top: -53px;
}
.profile-main-info h1 {
font-size: 23px;
}
.profile-details {
grid-template-columns: 1fr;
gap: 10px;
}
}
@media (max-width: 520px) {
.header-container {
flex-direction: column;
gap: 9px;
}
.header-container nav {
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
}
/* =========================================================
MODIFICATION PROFIL
========================================================= */
.edit-profile-page {
max-width: 760px;
margin: auto;
padding: 30px 15px;
}
.edit-profile-card {
background: #fff;
border-radius: 18px;
padding: 28px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}
.edit-profile-card h1 {
margin: 0 0 8px;
font-size: 25px;
}
.edit-intro {
color: #777;
margin: 0 0 24px;
font-size: 14px;
}
.edit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 15px;
}
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #d8d8d8;
border-radius: 9px;
font-size: 14px;
font-family: inherit;
resize: vertical;
}
.form-group textarea:focus {
outline: none;
border-color: #555;
}
.current-photo {
margin-bottom: 22px;
}
.current-photo img {
width: 105px;
height: 105px;
object-fit: cover;
border-radius: 50%;
}
.edit-actions {
display: flex;
gap: 12px;
align-items: center;
}
.edit-actions .btn-primary {
width: auto;
min-width: 150px;
padding-left: 20px;
padding-right: 20px;
}
.btn-secondary {
display: inline-flex;
justify-content: center;
align-items: center;
height: 44px;
padding: 0 18px;
border: 1px solid #ddd;
border-radius: 9px;
color: #333;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
@media (max-width: 600px) {
.edit-profile-page {
padding: 15px 10px;
}
.edit-profile-card {
padding: 18px 14px;
border-radius: 12px;
}
.edit-grid {
grid-template-columns: 1fr;
}
.edit-actions {
flex-direction: column;
}
.edit-actions .btn-primary,
.btn-secondary {
width: 100%;
}
}
/* =========================================================
PAGE MEMBRES / DÉCOUVRIR
========================================================= */
.members-page {
max-width: 1100px;
margin: auto;
padding: 30px 15px 50px;
}
.members-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.members-heading h1 {
margin: 0 0 5px;
font-size: 28px;
}
.members-heading p {
margin: 0;
color: #777;
font-size: 14px;
}
.btn-search {
display: inline-flex;
align-items: center;
justify-content: center;
height: 42px;
padding: 0 17px;
background: #222;
color: #fff;
text-decoration: none;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
}
.members-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.member-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 7px 25px rgba(0, 0, 0, 0.07);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.member-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.10);
}
.member-photo-link {
display: block;
text-decoration: none;
}
.member-photo-box {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
background: #eee;
}
.member-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.member-photo-empty {
display: flex;
justify-content: center;
align-items: center;
font-size: 70px;
background: #eee;
}
.online-dot {
position: absolute;
right: 14px;
bottom: 14px;
width: 14px;
height: 14px;
background: #26c267;
border-radius: 50%;
border: 3px solid #fff;
}
.member-content {
padding: 16px;
}
.member-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.member-title h2 {
margin: 0;
font-size: 20px;
}
.member-title h2 span {
font-weight: 400;
color: #777;
}
.online-label {
font-size: 11px;
font-weight: 700;
color: #1e9c56;
}
.member-username {
color: #888;
font-size: 13px;
margin: 5px 0 8px;
}
.member-location {
margin: 0 0 10px;
color: #555;
font-size: 13px;
}
.member-bio {
min-height: 42px;
margin: 0 0 15px;
color: #555;
font-size: 13px;
line-height: 1.5;
}
.member-bio-empty {
color: #aaa;
}
.btn-view-profile {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 100%;
background: #222;
color: #fff;
border-radius: 9px;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.empty-members {
background: #fff;
border-radius: 16px;
padding: 60px 20px;
text-align: center;
}
.empty-members-icon {
font-size: 45px;
margin-bottom: 12px;
}
.empty-members h2 {
margin: 0 0 8px;
}
.empty-members p {
margin: 0;
color: #777;
}
/* =========================================================
RESPONSIVE MEMBRES
========================================================= */
@media (max-width: 900px) {
.members-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.members-page {
padding: 18px 10px 35px;
}
.members-heading {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.btn-search {
width: 100%;
}
.members-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.member-photo-box {
aspect-ratio: 1 / 1.05;
}
}
/* =========================================================
VOIR PROFIL
========================================================= */
.view-profile-page {
max-width: 900px;
margin: auto;
padding: 30px 15px 50px;
}
.view-profile-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}
.view-profile-photo-area {
position: relative;
width: 100%;
max-height: 620px;
background: #eee;
overflow: hidden;
}
.view-profile-photo {
width: 100%;
max-height: 620px;
object-fit: cover;
display: block;
}
.view-profile-photo-empty {
min-height: 430px;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.view-online-badge {
position: absolute;
right: 18px;
bottom: 18px;
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(255, 255, 255, 0.95);
padding: 8px 11px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
color: #159447;
}
.view-online-badge span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #27c267;
}
.view-profile-content {
padding: 26px;
}
.view-profile-top h1 {
margin: 0;
font-size: 28px;
}
.view-profile-top h1 span {
color: #777;
font-weight: 400;
font-size: 21px;
}
.view-profile-username {
color: #888;
margin: 5px 0;
font-size: 14px;
}
.view-profile-location {
margin: 8px 0 0;
color: #555;
font-size: 14px;
}
.view-profile-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 24px;
}
.btn-like,
.btn-message {
height: 46px;
border-radius: 10px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.btn-like {
border: none;
background: #ff5f7a;
color: #fff;
}
.btn-message {
border: 1px solid #ddd;
background: #fff;
color: #222;
}
.btn-like:disabled,
.btn-message:disabled {
opacity: 0.75;
cursor: default;
}
.view-profile-section {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #eee;
}
.view-profile-section h2 {
margin: 0 0 10px;
font-size: 20px;
}
.view-profile-section p {
margin: 0;
line-height: 1.65;
color: #444;
}
.view-profile-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 25px;
}
.view-profile-detail {
background: #f7f7f8;
border-radius: 12px;
padding: 16px;
}
.view-profile-detail span {
display: block;
color: #888;
font-size: 12px;
margin-bottom: 6px;
}
.view-profile-detail strong {
font-size: 15px;
}
.view-profile-bottom {
margin-top: 28px;
}
.btn-back-members,
.btn-profile-main {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 17px;
border-radius: 9px;
background: #222;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
/* =========================================================
PROFIL INTROUVABLE
========================================================= */
.profile-not-found {
background: #fff;
border-radius: 18px;
padding: 60px 20px;
text-align: center;
}
.profile-not-found-icon {
font-size: 50px;
}
.profile-not-found h1 {
margin: 15px 0 8px;
}
.profile-not-found p {
color: #777;
margin-bottom: 22px;
}
/* =========================================================
RESPONSIVE VOIR PROFIL
========================================================= */
@media (max-width: 700px) {
.view-profile-page {
padding: 15px 10px 35px;
}
.view-profile-card {
border-radius: 14px;
}
.view-profile-photo {
max-height: 500px;
}
.view-profile-photo-empty {
min-height: 330px;
}
.view-profile-content {
padding: 20px 16px;
}
.view-profile-top h1 {
font-size: 24px;
}
.view-profile-top h1 span {
font-size: 18px;
}
.view-profile-details {
grid-template-columns: 1fr;
gap: 10px;
}
}
@media (max-width: 480px) {
.view-profile-actions {
grid-template-columns: 1fr;
}
.view-profile-photo {
max-height: 430px;
}
.view-profile-photo-empty {
min-height: 280px;
}
}
/* =========================================================
CORRECTION TAILLE VOIR PROFIL
========================================================= */
.view-profile-page {
max-width: 850px;
margin: 0 auto;
padding: 25px 15px 50px;
}
.view-profile-card {
display: grid;
grid-template-columns: 320px 1fr;
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
/* PHOTO */
.view-profile-photo-area {
width: 320px;
height: 420px;
max-height: none;
background: #eee;
overflow: hidden;
position: relative;
}
.view-profile-photo {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: center;
}
.view-profile-photo-empty {
width: 100%;
height: 420px;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
}
/* INFORMATIONS */
.view-profile-content {
padding: 28px;
}
.view-profile-top h1 {
font-size: 27px;
margin: 0;
}
.view-profile-top h1 span {
font-size: 18px;
}
.view-profile-actions {
margin-top: 20px;
}
.view-profile-section {
margin-top: 22px;
padding-top: 20px;
}
.view-profile-details {
grid-template-columns: 1fr;
gap: 9px;
}
/* =========================================================
TABLETTE / MOBILE
========================================================= */
@media (max-width: 700px) {
.view-profile-page {
padding: 12px 10px 30px;
}
.view-profile-card {
display: block;
max-width: 500px;
margin: auto;
}
.view-profile-photo-area {
width: 100%;
height: 390px;
}
.view-profile-photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.view-profile-photo-empty {
height: 390px;
}
.view-profile-content {
padding: 20px 16px;
}
}
/* PETITS TÉLÉPHONES */
@media (max-width: 450px) {
.view-profile-photo-area {
height: 330px;
}
.view-profile-photo-empty {
height: 330px;
}
.view-profile-actions {
grid-template-columns: 1fr;
}
}
/* =========================================================
LIKES / MATCHS
========================================================= */
.view-profile-actions form {
width: 100%;
}
.view-profile-actions form button {
width: 100%;
}
.btn-unlike {
width: 100%;
height: 46px;
border: 1px solid #ff5f7a;
border-radius: 10px;
background: #fff;
color: #ff4164;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.like-success {
margin-top: 20px;
padding: 13px 15px;
background: #fff0f3;
color: #d92f51;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
}
.match-message {
display: flex;
align-items: center;
gap: 13px;
margin-top: 20px;
padding: 15px;
background: #fff0f3;
border: 1px solid #ffd4dc;
border-radius: 12px;
}
.match-heart {
font-size: 30px;
}
.match-message strong {
display: block;
font-size: 17px;
color: #d92f51;
}
.match-message p {
margin: 3px 0 0;
color: #666;
font-size: 13px;
}
/* =========================================================
CONVERSATION
========================================================= */
.conversation-page {
max-width: 760px;
margin: auto;
padding: 25px 12px;
}
.conversation-card {
height: calc(100vh - 125px);
min-height: 520px;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
display: flex;
flex-direction: column;
}
.conversation-header {
padding: 14px 18px;
border-bottom: 1px solid #eee;
}
.conversation-user {
display: inline-flex;
align-items: center;
gap: 11px;
color: #222;
text-decoration: none;
}
.conversation-avatar {
width: 46px;
height: 46px;
object-fit: cover;
border-radius: 50%;
}
.conversation-avatar-empty {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
font-size: 22px;
}
.conversation-user strong {
display: block;
font-size: 15px;
}
.conversation-user span {
display: block;
margin-top: 3px;
color: #777;
font-size: 11px;
}
.messages-box {
flex: 1;
overflow-y: auto;
padding: 20px;
background: #f6f6f8;
}
.conversation-empty {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #777;
}
.conversation-empty div {
font-size: 42px;
margin-bottom: 10px;
}
.conversation-empty strong {
color: #333;
}
.conversation-empty p {
margin: 5px 0;
font-size: 13px;
}
.message-row {
display: flex;
margin-bottom: 11px;
}
.message-row-me {
justify-content: flex-end;
}
.message-row-other {
justify-content: flex-start;
}
.chat-message {
max-width: 72%;
padding: 10px 12px 7px;
border-radius: 14px;
font-size: 14px;
}
.message-row-me .chat-message {
background: #ff5f7a;
color: #fff;
border-bottom-right-radius: 4px;
}
.message-row-other .chat-message {
background: #fff;
color: #222;
border: 1px solid #e7e7e7;
border-bottom-left-radius: 4px;
}
.chat-message p {
margin: 0;
line-height: 1.45;
word-break: break-word;
}
.message-meta {
display: flex;
justify-content: flex-end;
gap: 5px;
margin-top: 5px;
font-size: 10px;
opacity: 0.75;
}
.conversation-form {
display: flex;
align-items: flex-end;
gap: 10px;
padding: 12px;
border-top: 1px solid #eee;
background: #fff;
}
.conversation-form textarea {
flex: 1;
min-height: 44px;
max-height: 120px;
padding: 11px 13px;
border: 1px solid #ddd;
border-radius: 20px;
resize: none;
font-family: inherit;
font-size: 14px;
outline: none;
}
.conversation-form textarea:focus {
border-color: #aaa;
}
.conversation-send {
width: 44px;
height: 44px;
flex-shrink: 0;
border: none;
border-radius: 50%;
background: #ff5f7a;
color: #fff;
font-size: 18px;
cursor: pointer;
}
/* MOBILE */
@media (max-width: 600px) {
.conversation-page {
padding: 0;
}
.conversation-card {
height: calc(100vh - 110px);
min-height: 0;
border-radius: 0;
box-shadow: none;
}
.messages-box {
padding: 15px 10px;
}
.chat-message {
max-width: 83%;
}
}
a.btn-message {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* =========================================================
ONE CLIC - DESIGN GLOBAL 2026
========================================================= */
:root {
--oc-primary: #ff4f72;
--oc-primary-dark: #e83e61;
--oc-secondary: #7c5cff;
--oc-bg: #f7f7fa;
--oc-card: #ffffff;
--oc-text: #18181b;
--oc-text-soft: #71717a;
--oc-border: #e9e9ef;
--oc-success: #22c55e;
--oc-danger: #ef4444;
--oc-radius-sm: 12px;
--oc-radius-md: 18px;
--oc-radius-lg: 24px;
--oc-shadow:
0 10px 30px rgba(0, 0, 0, 0.07);
--oc-shadow-hover:
0 18px 45px rgba(0, 0, 0, 0.11);
--oc-max-width: 1180px;
}
/* =========================================================
BASE
========================================================= */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background:
linear-gradient(
180deg,
#ffffff 0,
var(--oc-bg) 220px
);
color: var(--oc-text);
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
}
button,
input,
select,
textarea {
font: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
/* =========================================================
HEADER
========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
background:
rgba(255, 255, 255, 0.94);
backdrop-filter: blur(14px);
border-bottom:
1px solid var(--oc-border);
}
.header-container {
width: min(
calc(100% - 32px),
var(--oc-max-width)
);
min-height: 68px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.logo {
flex-shrink: 0;
color: var(--oc-text);
text-decoration: none;
font-size: 22px;
font-weight: 900;
letter-spacing: -0.7px;
}
.site-header nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.site-header nav::-webkit-scrollbar {
display: none;
}
.site-header nav a {
white-space: nowrap;
padding: 10px 12px;
border-radius: 12px;
color: #4b4b55;
text-decoration: none;
font-size: 13px;
font-weight: 650;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.site-header nav a:hover {
color: var(--oc-primary);
background: #fff0f3;
transform: translateY(-1px);
}
/* =========================================================
PAGES
========================================================= */
.members-page,
.search-page,
.matches-page,
.calls-page,
.profile-page,
.conversation-page {
width: min(
calc(100% - 32px),
var(--oc-max-width)
);
margin: 0 auto;
padding-top: 30px;
padding-bottom: 50px;
}
/* =========================================================
TITRES
========================================================= */
.members-heading h1,
.search-header h1,
.matches-header h1,
.calls-heading h1 {
font-size: clamp(
24px,
3vw,
34px
);
letter-spacing: -0.8px;
line-height: 1.15;
}
.members-heading p,
.search-header p,
.matches-header p,
.calls-heading p {
color: var(--oc-text-soft);
font-size: 14px;
}
/* =========================================================
CARDS
========================================================= */
.member-card,
.search-card,
.match-card,
.call-card,
.profile-card,
.conversation-card {
background: var(--oc-card);
border:
1px solid var(--oc-border);
border-radius:
var(--oc-radius-lg);
box-shadow:
var(--oc-shadow);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.member-card:hover,
.search-card:hover,
.match-card:hover {
transform:
translateY(-4px);
box-shadow:
var(--oc-shadow-hover);
}
/* =========================================================
PHOTOS PROFILS
========================================================= */
.member-photo,
.search-photo,
.match-photo {
width: 100%;
object-fit: cover;
background: #eee;
}
.member-photo,
.search-photo {
aspect-ratio: 4 / 5;
}
.match-photo {
aspect-ratio: 1 / 1;
}
/* =========================================================
BOUTONS
========================================================= */
.btn-primary,
.search-btn,
.match-btn-message {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 0;
border-radius:
var(--oc-radius-sm);
background:
linear-gradient(
135deg,
var(--oc-primary),
#ff728d
);
color: #fff;
padding:
0 18px;
text-decoration: none;
font-weight: 750;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.btn-primary:hover,
.search-btn:hover,
.match-btn-message:hover {
transform:
translateY(-1px);
box-shadow:
0 10px 24px
rgba(255, 79, 114, 0.25);
}
.profile-btn {
min-height: 44px;
border-radius:
var(--oc-radius-sm);
background: #1d1d22;
color: #fff;
}
/* =========================================================
LIKE BUTTON
========================================================= */
.like-btn {
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--oc-primary);
font-size: 22px;
box-shadow:
0 6px 20px
rgba(0, 0, 0, 0.10);
cursor: pointer;
transition:
transform 0.2s ease,
background 0.2s ease;
}
.like-btn:hover {
transform:
scale(1.08);
background: #fff0f3;
}
.like-btn.liked {
background:
var(--oc-primary);
color: #fff;
}
/* =========================================================
FORMULAIRES
========================================================= */
.search-form,
.profile-form,
.auth-card {
background:
var(--oc-card);
border:
1px solid var(--oc-border);
border-radius:
var(--oc-radius-lg);
box-shadow:
var(--oc-shadow);
}
input,
select,
textarea {
border:
1px solid #dedee7;
border-radius:
var(--oc-radius-sm);
background: #fff;
color:
var(--oc-text);
outline: none;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
input:focus,
select:focus,
textarea:focus {
border-color:
var(--oc-primary);
box-shadow:
0 0 0 4px
rgba(255, 79, 114, 0.10);
}
/* =========================================================
RECHERCHE
========================================================= */
.search-form {
padding: 15px;
}
.search-grid {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap: 20px;
}
.search-card {
overflow: hidden;
}
.search-card-content {
padding: 16px;
}
/* =========================================================
MATCHS
========================================================= */
.matches-grid {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap: 20px;
}
.match-label {
background:
#fff0f3 !important;
color:
var(--oc-primary) !important;
}
/* =========================================================
APPELS
========================================================= */
.calls-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.call-card {
padding: 15px;
box-shadow: none;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.call-card:hover {
background: #fcfcfd;
transform:
translateY(-1px);
}
.call-action-btn {
transition:
transform 0.2s ease,
background 0.2s ease;
}
.call-action-btn:hover {
transform: scale(1.07);
background:
#fff0f3;
}
/* =========================================================
CONVERSATION
========================================================= */
.conversation-card {
overflow: hidden;
}
.conversation-header {
background: #fff;
border-bottom:
1px solid var(--oc-border);
}
.messages-box {
background:
#f8f8fa;
}
.message-row-me .chat-message {
background:
linear-gradient(
135deg,
var(--oc-primary),
#ff7089
);
color: #fff;
}
.message-row-other .chat-message {
background: #fff;
border:
1px solid #ececf0;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 900px) {
.header-container {
width: 100%;
padding:
0 14px;
}
.site-header nav {
gap: 2px;
}
.site-header nav a {
padding:
9px 8px;
font-size:
12px;
}
.search-grid,
.matches-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}
}
/* =========================================================
SMARTPHONE
========================================================= */
@media (max-width: 600px) {
body {
padding-bottom:
72px;
}
.site-header {
position:
sticky;
}
.header-container {
min-height:
58px;
padding:
0 12px;
}
.logo {
font-size:
19px;
}
/*
Sur téléphone la navigation
principale passe en bas.
*/
.site-header nav {
position:
fixed;
left: 0;
right: 0;
bottom: 0;
z-index:
5000;
min-height:
64px;
padding:
6px 5px
calc(
6px +
env(safe-area-inset-bottom)
);
display:
flex;
justify-content:
space-around;
background:
rgba(
255,
255,
255,
0.97
);
border-top:
1px solid
var(--oc-border);
box-shadow:
0 -5px 20px
rgba(
0,
0,
0,
0.05
);
}
.site-header nav a {
flex:
1 1 auto;
min-width:
58px;
padding:
7px 4px;
display:
flex;
align-items:
center;
justify-content:
center;
text-align:
center;
border-radius:
10px;
font-size:
10px;
}
.members-page,
.search-page,
.matches-page,
.calls-page,
.profile-page,
.conversation-page {
width:
100%;
padding:
18px 10px
30px;
}
.search-form {
grid-template-columns:
1fr !important;
padding:
12px;
}
.search-btn {
width:
100%;
}
.search-grid,
.matches-grid {
grid-template-columns:
1fr;
}
.member-card,
.search-card,
.match-card {
border-radius:
18px;
}
.call-card {
border-radius:
16px;
}
.conversation-card {
border-radius:
0;
min-height:
calc(
100dvh -
122px
);
}
}
/* =========================================================
TRÈS PETITS ÉCRANS
========================================================= */
@media (max-width: 380px) {
.site-header nav a {
font-size:
9px;
min-width:
50px;
}
.logo {
font-size:
17px;
}
.search-page,
.matches-page,
.calls-page {
padding-left:
7px;
padding-right:
7px;
}
}
/* ==============================
CARTE PROFIL MODERNE
============================== */
.search-card,
.member-card {
position: relative;
overflow: hidden;
border-radius: 26px;
background: #fff;
border: none;
box-shadow: 0 14px 40px rgba(0,0,0,.10);
}
.search-photo,
.member-photo {
width: 100%;
height: 430px;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.search-card:hover .search-photo,
.member-card:hover .member-photo {
transform: scale(1.045);
}
.search-card::after,
.member-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 48%;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(0,0,0,.78),
rgba(0,0,0,.28),
transparent
);
}
.search-card-content,
.member-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 22px;
color: #fff;
}
.search-card-name,
.member-name {
font-size: 25px;
font-weight: 850;
letter-spacing: -.4px;
}
.search-card-pseudo,
.search-card-location,
.search-card-bio {
color: rgba(255,255,255,.88);
}
.search-card-bio {
margin-top: 8px;
font-size: 13px;
}
.search-card-actions {
display: flex;
gap: 10px;
margin-top: 16px;
}
.profile-btn {
flex: 1;
background: rgba(255,255,255,.16);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.25);
color: #fff;
}
.like-btn {
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff;
color: #ff4f72;
font-size: 24px;
box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
/* mobile */
@media (max-width: 600px) {
.search-photo,
.member-photo {
height: 68vh;
min-height: 440px;
max-height: 620px;
}
.search-card,
.member-card {
border-radius: 24px;
}
.search-card-content,
.member-content {
padding: 18px;
}
.search-card-name,
.member-name {
font-size: 23px;
}
}
/* =========================================================
DISCRETIMA - DÉCOUVRIR / SWIPE DESIGN
========================================================= */
.discretima-discover-body {
margin: 0;
min-height: 100dvh;
background: #f7f7fa;
color: #18181b;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
padding-bottom: 92px;
}
/* =========================
HEADER
========================= */
.discover-header {
width: 100%;
height: 66px;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 500;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid #eeeeF2;
}
.discover-logo {
text-decoration: none;
color: #18181b;
font-size: 23px;
font-weight: 900;
letter-spacing: -0.8px;
}
.discover-logo span {
color: #ff4f72;
}
.discover-filter {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
border: 1px solid #ececf0;
color: #333;
text-decoration: none;
font-size: 20px;
box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
/* =========================
PAGE
========================= */
.discover-page {
width: min(calc(100% - 28px), 460px);
margin: 0 auto;
padding: 16px 0 10px;
}
/* =========================
STACK
========================= */
.discover-stack {
position: relative;
width: 100%;
height: min(66vh, 650px);
min-height: 500px;
}
/* =========================
CARTE
========================= */
.discover-card {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #ddd;
border-radius: 28px;
box-shadow:
0 20px 50px rgba(0,0,0,.14);
opacity: 0;
visibility: hidden;
transform:
translateY(12px)
scale(.97);
transition:
transform .28s ease,
opacity .25s ease;
pointer-events: none;
}
.discover-card.is-active {
opacity: 1;
visibility: visible;
transform:
translateY(0)
scale(1);
pointer-events: auto;
z-index: 10;
}
/* =========================
PHOTO
========================= */
.discover-photo-link {
display: block;
width: 100%;
height: 100%;
}
.discover-photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.discover-photo-empty {
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
#f1f1f4,
#dedee5
);
font-size: 100px;
}
/* =========================
DÉGRADÉ PHOTO
========================= */
.discover-gradient {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 62%;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.54) 36%,
rgba(0,0,0,.12) 72%,
transparent 100%
);
}
/* =========================
EN LIGNE
========================= */
.discover-online {
position: absolute;
top: 18px;
left: 18px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 11px;
border-radius: 20px;
background: rgba(20,20,20,.48);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.discover-online span {
width: 9px;
height: 9px;
background: #28d36b;
border-radius: 50%;
box-shadow:
0 0 0 3px rgba(40,211,107,.18);
}
/* =========================
INFORMATIONS
========================= */
.discover-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
padding: 25px 23px 27px;
color: #fff;
}
.discover-name-line {
display: flex;
align-items: center;
gap: 9px;
}
.discover-name-line h1 {
margin: 0;
font-size: 30px;
line-height: 1.05;
font-weight: 850;
letter-spacing: -0.7px;
color: #fff;
}
.discover-name-line h1 strong {
font-weight: 450;
}
.discover-verified {
width: 21px;
height: 21px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #438cff;
color: #fff;
font-size: 12px;
font-weight: 900;
}
.discover-location {
margin: 9px 0 0;
color: rgba(255,255,255,.92);
font-size: 14px;
font-weight: 550;
}
.discover-bio {
max-width: 95%;
margin: 10px 0 0;
color: rgba(255,255,255,.90);
font-size: 13px;
line-height: 1.45;
}
.discover-more {
display: inline-block;
margin-top: 10px;
color: #fff;
font-size: 12px;
font-weight: 750;
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================
ACTIONS
========================= */
.discover-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 21px;
padding: 18px 0 5px;
}
.discover-action {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
box-shadow:
0 8px 25px rgba(0,0,0,.11);
transition:
transform .18s ease,
box-shadow .18s ease;
}
.discover-action:active {
transform: scale(.90);
}
.discover-pass {
width: 57px;
height: 57px;
color: #ff536e;
border: 1px solid #ffe0e6;
font-size: 27px;
font-weight: 400;
}
.discover-like {
width: 68px;
height: 68px;
color: #fff;
background:
linear-gradient(
135deg,
#ff416c,
#ff6b86
);
font-size: 31px;
box-shadow:
0 10px 30px rgba(255,65,108,.30);
}
.discover-message {
width: 57px;
height: 57px;
color: #7c5cff;
border: 1px solid #e9e4ff;
font-size: 22px;
}
/* =========================
COMPTEUR
========================= */
.discover-counter {
text-align: center;
margin-top: 4px;
color: #999;
font-size: 11px;
}
/* =========================
SWIPE ANIMATION
========================= */
.discover-card.swipe-left {
opacity: 0;
transform:
translateX(-125%)
rotate(-12deg);
}
.discover-card.swipe-right {
opacity: 0;
transform:
translateX(125%)
rotate(12deg);
}
/* =========================
NAVIGATION DU BAS
========================= */
.discover-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 5000;
min-height: 72px;
padding:
7px 8px
calc(7px + env(safe-area-inset-bottom));
display: flex;
align-items: center;
justify-content: space-around;
background: rgba(255,255,255,.97);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid #ececf1;
box-shadow:
0 -6px 25px rgba(0,0,0,.05);
}
.discover-bottom-nav a {
flex: 1;
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #999;
text-decoration: none;
transition: color .2s ease;
}
.discover-bottom-nav a span {
font-size: 21px;
line-height: 1;
}
.discover-bottom-nav a small {
font-size: 10px;
font-weight: 650;
}
.discover-bottom-nav a.active {
color: #ff4f72;
}
/* =========================
AUCUN PROFIL
========================= */
.discover-empty {
margin-top: 80px;
padding: 45px 25px;
text-align: center;
background: #fff;
border-radius: 25px;
box-shadow:
0 12px 35px rgba(0,0,0,.07);
}
.discover-empty-heart {
color: #ff4f72;
font-size: 55px;
margin-bottom: 12px;
}
.discover-empty h1 {
margin: 0 0 8px;
font-size: 23px;
}
.discover-empty p {
margin: 0 0 20px;
color: #777;
font-size: 14px;
}
.discover-empty a {
display: inline-flex;
padding: 12px 18px;
border-radius: 13px;
background: #ff4f72;
color: #fff;
text-decoration: none;
font-weight: 750;
}
/* =========================================================
TABLETTE
========================================================= */
@media (min-width: 601px) {
.discover-page {
width: min(calc(100% - 40px), 470px);
padding-top: 25px;
}
.discover-stack {
height: min(68vh, 670px);
min-height: 540px;
}
.discover-card {
border-radius: 30px;
}
.discover-bottom-nav {
width: 460px;
left: 50%;
right: auto;
transform: translateX(-50%);
bottom: 15px;
border: 1px solid #ececf1;
border-radius: 24px;
box-shadow:
0 10px 35px rgba(0,0,0,.10);
}
}
/* =========================================================
SMARTPHONE
========================================================= */
@media (max-width: 600px) {
.discretima-discover-body {
padding-bottom:
calc(80px + env(safe-area-inset-bottom));
}
.discover-header {
height: 58px;
padding:
0 14px;
}
.discover-logo {
font-size: 21px;
}
.discover-filter {
width: 38px;
height: 38px;
font-size: 18px;
}
.discover-page {
width: 100%;
padding:
8px 8px 5px;
}
.discover-stack {
height:
calc(
100dvh - 210px
);
min-height: 470px;
max-height: 680px;
}
.discover-card {
border-radius: 25px;
}
.discover-info {
padding:
22px 19px 23px;
}
.discover-name-line h1 {
font-size: 27px;
}
.discover-actions {
gap: 20px;
padding:
12px 0 2px;
}
.discover-pass,
.discover-message {
width: 53px;
height: 53px;
}
.discover-like {
width: 63px;
height: 63px;
}
}
/* =========================================================
PETITS TÉLÉPHONES
========================================================= */
@media (max-width: 380px) {
.discover-stack {
min-height: 430px;
height:
calc(
100dvh - 205px
);
}
.discover-info {
padding:
18px 16px 20px;
}
.discover-name-line h1 {
font-size: 25px;
}
.discover-bio {
font-size: 12px;
}
.discover-actions {
gap: 16px;
}
.discover-pass,
.discover-message {
width: 49px;
height: 49px;
}
.discover-like {
width: 59px;
height: 59px;
}
}/* =========================================================
DISCRETIMA - DÉCOUVRIR / SWIPE DESIGN
========================================================= */
.discretima-discover-body {
margin: 0;
min-height: 100dvh;
background: #f7f7fa;
color: #18181b;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
padding-bottom: 92px;
}
/* =========================
HEADER
========================= */
.discover-header {
width: 100%;
height: 66px;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 500;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid #eeeeF2;
}
.discover-logo {
text-decoration: none;
color: #18181b;
font-size: 23px;
font-weight: 900;
letter-spacing: -0.8px;
}
.discover-logo span {
color: #ff4f72;
}
.discover-filter {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
border: 1px solid #ececf0;
color: #333;
text-decoration: none;
font-size: 20px;
box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
/* =========================
PAGE
========================= */
.discover-page {
width: min(calc(100% - 28px), 460px);
margin: 0 auto;
padding: 16px 0 10px;
}
/* =========================
STACK
========================= */
.discover-stack {
position: relative;
width: 100%;
height: min(66vh, 650px);
min-height: 500px;
}
/* =========================
CARTE
========================= */
.discover-card {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #ddd;
border-radius: 28px;
box-shadow:
0 20px 50px rgba(0,0,0,.14);
opacity: 0;
visibility: hidden;
transform:
translateY(12px)
scale(.97);
transition:
transform .28s ease,
opacity .25s ease;
pointer-events: none;
}
.discover-card.is-active {
opacity: 1;
visibility: visible;
transform:
translateY(0)
scale(1);
pointer-events: auto;
z-index: 10;
}
/* =========================
PHOTO
========================= */
.discover-photo-link {
display: block;
width: 100%;
height: 100%;
}
.discover-photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.discover-photo-empty {
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
#f1f1f4,
#dedee5
);
font-size: 100px;
}
/* =========================
DÉGRADÉ PHOTO
========================= */
.discover-gradient {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 62%;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.54) 36%,
rgba(0,0,0,.12) 72%,
transparent 100%
);
}
/* =========================
EN LIGNE
========================= */
.discover-online {
position: absolute;
top: 18px;
left: 18px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 11px;
border-radius: 20px;
background: rgba(20,20,20,.48);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.discover-online span {
width: 9px;
height: 9px;
background: #28d36b;
border-radius: 50%;
box-shadow:
0 0 0 3px rgba(40,211,107,.18);
}
/* =========================
INFORMATIONS
========================= */
.discover-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
padding: 25px 23px 27px;
color: #fff;
}
.discover-name-line {
display: flex;
align-items: center;
gap: 9px;
}
.discover-name-line h1 {
margin: 0;
font-size: 30px;
line-height: 1.05;
font-weight: 850;
letter-spacing: -0.7px;
color: #fff;
}
.discover-name-line h1 strong {
font-weight: 450;
}
.discover-verified {
width: 21px;
height: 21px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #438cff;
color: #fff;
font-size: 12px;
font-weight: 900;
}
.discover-location {
margin: 9px 0 0;
color: rgba(255,255,255,.92);
font-size: 14px;
font-weight: 550;
}
.discover-bio {
max-width: 95%;
margin: 10px 0 0;
color: rgba(255,255,255,.90);
font-size: 13px;
line-height: 1.45;
}
.discover-more {
display: inline-block;
margin-top: 10px;
color: #fff;
font-size: 12px;
font-weight: 750;
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================
ACTIONS
========================= */
.discover-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 21px;
padding: 18px 0 5px;
}
.discover-action {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
box-shadow:
0 8px 25px rgba(0,0,0,.11);
transition:
transform .18s ease,
box-shadow .18s ease;
}
.discover-action:active {
transform: scale(.90);
}
.discover-pass {
width: 57px;
height: 57px;
color: #ff536e;
border: 1px solid #ffe0e6;
font-size: 27px;
font-weight: 400;
}
.discover-like {
width: 68px;
height: 68px;
color: #fff;
background:
linear-gradient(
135deg,
#ff416c,
#ff6b86
);
font-size: 31px;
box-shadow:
0 10px 30px rgba(255,65,108,.30);
}
.discover-message {
width: 57px;
height: 57px;
color: #7c5cff;
border: 1px solid #e9e4ff;
font-size: 22px;
}
/* =========================
COMPTEUR
========================= */
.discover-counter {
text-align: center;
margin-top: 4px;
color: #999;
font-size: 11px;
}
/* =========================
SWIPE ANIMATION
========================= */
.discover-card.swipe-left {
opacity: 0;
transform:
translateX(-125%)
rotate(-12deg);
}
.discover-card.swipe-right {
opacity: 0;
transform:
translateX(125%)
rotate(12deg);
}
/* =========================
NAVIGATION DU BAS
========================= */
.discover-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 5000;
min-height: 72px;
padding:
7px 8px
calc(7px + env(safe-area-inset-bottom));
display: flex;
align-items: center;
justify-content: space-around;
background: rgba(255,255,255,.97);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid #ececf1;
box-shadow:
0 -6px 25px rgba(0,0,0,.05);
}
.discover-bottom-nav a {
flex: 1;
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #999;
text-decoration: none;
transition: color .2s ease;
}
.discover-bottom-nav a span {
font-size: 21px;
line-height: 1;
}
.discover-bottom-nav a small {
font-size: 10px;
font-weight: 650;
}
.discover-bottom-nav a.active {
color: #ff4f72;
}
/* =========================
AUCUN PROFIL
========================= */
.discover-empty {
margin-top: 80px;
padding: 45px 25px;
text-align: center;
background: #fff;
border-radius: 25px;
box-shadow:
0 12px 35px rgba(0,0,0,.07);
}
.discover-empty-heart {
color: #ff4f72;
font-size: 55px;
margin-bottom: 12px;
}
.discover-empty h1 {
margin: 0 0 8px;
font-size: 23px;
}
.discover-empty p {
margin: 0 0 20px;
color: #777;
font-size: 14px;
}
.discover-empty a {
display: inline-flex;
padding: 12px 18px;
border-radius: 13px;
background: #ff4f72;
color: #fff;
text-decoration: none;
font-weight: 750;
}
/* =========================================================
TABLETTE
========================================================= */
@media (min-width: 601px) {
.discover-page {
width: min(calc(100% - 40px), 470px);
padding-top: 25px;
}
.discover-stack {
height: min(68vh, 670px);
min-height: 540px;
}
.discover-card {
border-radius: 30px;
}
.discover-bottom-nav {
width: 460px;
left: 50%;
right: auto;
transform: translateX(-50%);
bottom: 15px;
border: 1px solid #ececf1;
border-radius: 24px;
box-shadow:
0 10px 35px rgba(0,0,0,.10);
}
}
/* =========================================================
SMARTPHONE
========================================================= */
@media (max-width: 600px) {
.discretima-discover-body {
padding-bottom:
calc(80px + env(safe-area-inset-bottom));
}
.discover-header {
height: 58px;
padding:
0 14px;
}
.discover-logo {
font-size: 21px;
}
.discover-filter {
width: 38px;
height: 38px;
font-size: 18px;
}
.discover-page {
width: 100%;
padding:
8px 8px 5px;
}
.discover-stack {
height:
calc(
100dvh - 210px
);
min-height: 470px;
max-height: 680px;
}
.discover-card {
border-radius: 25px;
}
.discover-info {
padding:
22px 19px 23px;
}
.discover-name-line h1 {
font-size: 27px;
}
.discover-actions {
gap: 20px;
padding:
12px 0 2px;
}
.discover-pass,
.discover-message {
width: 53px;
height: 53px;
}
.discover-like {
width: 63px;
height: 63px;
}
}
/* =========================================================
PETITS TÉLÉPHONES
========================================================= */
@media (max-width: 380px) {
.discover-stack {
min-height: 430px;
height:
calc(
100dvh - 205px
);
}
.discover-info {
padding:
18px 16px 20px;
}
.discover-name-line h1 {
font-size: 25px;
}
.discover-bio {
font-size: 12px;
}
.discover-actions {
gap: 16px;
}
.discover-pass,
.discover-message {
width: 49px;
height: 49px;
}
.discover-like {
width: 59px;
height: 59px;
}
}/* =========================================================
DISCRETIMA - DÉCOUVRIR / SWIPE DESIGN
========================================================= */
.discretima-discover-body {
margin: 0;
min-height: 100dvh;
background: #f7f7fa;
color: #18181b;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
padding-bottom: 92px;
}
/* =========================
HEADER
========================= */
.discover-header {
width: 100%;
height: 66px;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 500;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid #eeeeF2;
}
.discover-logo {
text-decoration: none;
color: #18181b;
font-size: 23px;
font-weight: 900;
letter-spacing: -0.8px;
}
.discover-logo span {
color: #ff4f72;
}
.discover-filter {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
border: 1px solid #ececf0;
color: #333;
text-decoration: none;
font-size: 20px;
box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
/* =========================
PAGE
========================= */
.discover-page {
width: min(calc(100% - 28px), 460px);
margin: 0 auto;
padding: 16px 0 10px;
}
/* =========================
STACK
========================= */
.discover-stack {
position: relative;
width: 100%;
height: min(66vh, 650px);
min-height: 500px;
}
/* =========================
CARTE
========================= */
.discover-card {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #ddd;
border-radius: 28px;
box-shadow:
0 20px 50px rgba(0,0,0,.14);
opacity: 0;
visibility: hidden;
transform:
translateY(12px)
scale(.97);
transition:
transform .28s ease,
opacity .25s ease;
pointer-events: none;
}
.discover-card.is-active {
opacity: 1;
visibility: visible;
transform:
translateY(0)
scale(1);
pointer-events: auto;
z-index: 10;
}
/* =========================
PHOTO
========================= */
.discover-photo-link {
display: block;
width: 100%;
height: 100%;
}
.discover-photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.discover-photo-empty {
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
#f1f1f4,
#dedee5
);
font-size: 100px;
}
/* =========================
DÉGRADÉ PHOTO
========================= */
.discover-gradient {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 62%;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.54) 36%,
rgba(0,0,0,.12) 72%,
transparent 100%
);
}
/* =========================
EN LIGNE
========================= */
.discover-online {
position: absolute;
top: 18px;
left: 18px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 11px;
border-radius: 20px;
background: rgba(20,20,20,.48);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.discover-online span {
width: 9px;
height: 9px;
background: #28d36b;
border-radius: 50%;
box-shadow:
0 0 0 3px rgba(40,211,107,.18);
}
/* =========================
INFORMATIONS
========================= */
.discover-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
padding: 25px 23px 27px;
color: #fff;
}
.discover-name-line {
display: flex;
align-items: center;
gap: 9px;
}
.discover-name-line h1 {
margin: 0;
font-size: 30px;
line-height: 1.05;
font-weight: 850;
letter-spacing: -0.7px;
color: #fff;
}
.discover-name-line h1 strong {
font-weight: 450;
}
.discover-verified {
width: 21px;
height: 21px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #438cff;
color: #fff;
font-size: 12px;
font-weight: 900;
}
.discover-location {
margin: 9px 0 0;
color: rgba(255,255,255,.92);
font-size: 14px;
font-weight: 550;
}
.discover-bio {
max-width: 95%;
margin: 10px 0 0;
color: rgba(255,255,255,.90);
font-size: 13px;
line-height: 1.45;
}
.discover-more {
display: inline-block;
margin-top: 10px;
color: #fff;
font-size: 12px;
font-weight: 750;
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================
ACTIONS
========================= */
.discover-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 21px;
padding: 18px 0 5px;
}
.discover-action {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
box-shadow:
0 8px 25px rgba(0,0,0,.11);
transition:
transform .18s ease,
box-shadow .18s ease;
}
.discover-action:active {
transform: scale(.90);
}
.discover-pass {
width: 57px;
height: 57px;
color: #ff536e;
border: 1px solid #ffe0e6;
font-size: 27px;
font-weight: 400;
}
.discover-like {
width: 68px;
height: 68px;
color: #fff;
background:
linear-gradient(
135deg,
#ff416c,
#ff6b86
);
font-size: 31px;
box-shadow:
0 10px 30px rgba(255,65,108,.30);
}
.discover-message {
width: 57px;
height: 57px;
color: #7c5cff;
border: 1px solid #e9e4ff;
font-size: 22px;
}
/* =========================
COMPTEUR
========================= */
.discover-counter {
text-align: center;
margin-top: 4px;
color: #999;
font-size: 11px;
}
/* =========================
SWIPE ANIMATION
========================= */
.discover-card.swipe-left {
opacity: 0;
transform:
translateX(-125%)
rotate(-12deg);
}
.discover-card.swipe-right {
opacity: 0;
transform:
translateX(125%)
rotate(12deg);
}
/* =========================
NAVIGATION DU BAS
========================= */
.discover-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 5000;
min-height: 72px;
padding:
7px 8px
calc(7px + env(safe-area-inset-bottom));
display: flex;
align-items: center;
justify-content: space-around;
background: rgba(255,255,255,.97);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid #ececf1;
box-shadow:
0 -6px 25px rgba(0,0,0,.05);
}
.discover-bottom-nav a {
flex: 1;
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #999;
text-decoration: none;
transition: color .2s ease;
}
.discover-bottom-nav a span {
font-size: 21px;
line-height: 1;
}
.discover-bottom-nav a small {
font-size: 10px;
font-weight: 650;
}
.discover-bottom-nav a.active {
color: #ff4f72;
}
/* =========================
AUCUN PROFIL
========================= */
.discover-empty {
margin-top: 80px;
padding: 45px 25px;
text-align: center;
background: #fff;
border-radius: 25px;
box-shadow:
0 12px 35px rgba(0,0,0,.07);
}
.discover-empty-heart {
color: #ff4f72;
font-size: 55px;
margin-bottom: 12px;
}
.discover-empty h1 {
margin: 0 0 8px;
font-size: 23px;
}
.discover-empty p {
margin: 0 0 20px;
color: #777;
font-size: 14px;
}
.discover-empty a {
display: inline-flex;
padding: 12px 18px;
border-radius: 13px;
background: #ff4f72;
color: #fff;
text-decoration: none;
font-weight: 750;
}
/* =========================================================
TABLETTE
========================================================= */
@media (min-width: 601px) {
.discover-page {
width: min(calc(100% - 40px), 470px);
padding-top: 25px;
}
.discover-stack {
height: min(68vh, 670px);
min-height: 540px;
}
.discover-card {
border-radius: 30px;
}
.discover-bottom-nav {
width: 460px;
left: 50%;
right: auto;
transform: translateX(-50%);
bottom: 15px;
border: 1px solid #ececf1;
border-radius: 24px;
box-shadow:
0 10px 35px rgba(0,0,0,.10);
}
}
/* =========================================================
SMARTPHONE
========================================================= */
@media (max-width: 600px) {
.discretima-discover-body {
padding-bottom:
calc(80px + env(safe-area-inset-bottom));
}
.discover-header {
height: 58px;
padding:
0 14px;
}
.discover-logo {
font-size: 21px;
}
.discover-filter {
width: 38px;
height: 38px;
font-size: 18px;
}
.discover-page {
width: 100%;
padding:
8px 8px 5px;
}
.discover-stack {
height:
calc(
100dvh - 210px
);
min-height: 470px;
max-height: 680px;
}
.discover-card {
border-radius: 25px;
}
.discover-info {
padding:
22px 19px 23px;
}
.discover-name-line h1 {
font-size: 27px;
}
.discover-actions {
gap: 20px;
padding:
12px 0 2px;
}
.discover-pass,
.discover-message {
width: 53px;
height: 53px;
}
.discover-like {
width: 63px;
height: 63px;
}
}
/* =========================================================
PETITS TÉLÉPHONES
========================================================= *//* =========================================================
DISCRETIMA - DÉCOUVRIR / SWIPE DESIGN
========================================================= */
.discretima-discover-body {
margin: 0;
min-height: 100dvh;
background: #f7f7fa;
color: #18181b;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
padding-bottom: 92px;
}
/* =========================
HEADER
========================= */
.discover-header {
width: 100%;
height: 66px;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 500;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid #eeeeF2;
}
.discover-logo {
text-decoration: none;
color: #18181b;
font-size: 23px;
font-weight: 900;
letter-spacing: -0.8px;
}
.discover-logo span {
color: #ff4f72;
}
.discover-filter {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
border: 1px solid #ececf0;
color: #333;
text-decoration: none;
font-size: 20px;
box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
/* =========================
PAGE
========================= */
.discover-page {
width: min(calc(100% - 28px), 460px);
margin: 0 auto;
padding: 16px 0 10px;
}
/* =========================
STACK
========================= */
.discover-stack {
position: relative;
width: 100%;
height: min(66vh, 650px);
min-height: 500px;
}
/* =========================
CARTE
========================= */
.discover-card {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #ddd;
border-radius: 28px;
box-shadow:
0 20px 50px rgba(0,0,0,.14);
opacity: 0;
visibility: hidden;
transform:
translateY(12px)
scale(.97);
transition:
transform .28s ease,
opacity .25s ease;
pointer-events: none;
}
.discover-card.is-active {
opacity: 1;
visibility: visible;
transform:
translateY(0)
scale(1);
pointer-events: auto;
z-index: 10;
}
/* =========================
PHOTO
========================= */
.discover-photo-link {
display: block;
width: 100%;
height: 100%;
}
.discover-photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.discover-photo-empty {
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
#f1f1f4,
#dedee5
);
font-size: 100px;
}
/* =========================
DÉGRADÉ PHOTO
========================= */
.discover-gradient {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 62%;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.54) 36%,
rgba(0,0,0,.12) 72%,
transparent 100%
);
}
/* =========================
EN LIGNE
========================= */
.discover-online {
position: absolute;
top: 18px;
left: 18px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 11px;
border-radius: 20px;
background: rgba(20,20,20,.48);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.discover-online span {
width: 9px;
height: 9px;
background: #28d36b;
border-radius: 50%;
box-shadow:
0 0 0 3px rgba(40,211,107,.18);
}
/* =========================
INFORMATIONS
========================= */
.discover-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
padding: 25px 23px 27px;
color: #fff;
}
.discover-name-line {
display: flex;
align-items: center;
gap: 9px;
}
.discover-name-line h1 {
margin: 0;
font-size: 30px;
line-height: 1.05;
font-weight: 850;
letter-spacing: -0.7px;
color: #fff;
}
.discover-name-line h1 strong {
font-weight: 450;
}
.discover-verified {
width: 21px;
height: 21px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #438cff;
color: #fff;
font-size: 12px;
font-weight: 900;
}
.discover-location {
margin: 9px 0 0;
color: rgba(255,255,255,.92);
font-size: 14px;
font-weight: 550;
}
.discover-bio {
max-width: 95%;
margin: 10px 0 0;
color: rgba(255,255,255,.90);
font-size: 13px;
line-height: 1.45;
}
.discover-more {
display: inline-block;
margin-top: 10px;
color: #fff;
font-size: 12px;
font-weight: 750;
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================
ACTIONS
========================= */
.discover-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 21px;
padding: 18px 0 5px;
}
.discover-action {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
box-shadow:
0 8px 25px rgba(0,0,0,.11);
transition:
transform .18s ease,
box-shadow .18s ease;
}
.discover-action:active {
transform: scale(.90);
}
.discover-pass {
width: 57px;
height: 57px;
color: #ff536e;
border: 1px solid #ffe0e6;
font-size: 27px;
font-weight: 400;
}
.discover-like {
width: 68px;
height: 68px;
color: #fff;
background:
linear-gradient(
135deg,
#ff416c,
#ff6b86
);
font-size: 31px;
box-shadow:
0 10px 30px rgba(255,65,108,.30);
}
.discover-message {
width: 57px;
height: 57px;
color: #7c5cff;
border: 1px solid #e9e4ff;
font-size: 22px;
}
/* =========================
COMPTEUR
========================= */
.discover-counter {
text-align: center;
margin-top: 4px;
color: #999;
font-size: 11px;
}
/* =========================
SWIPE ANIMATION
========================= */
.discover-card.swipe-left {
opacity: 0;
transform:
translateX(-125%)
rotate(-12deg);
}
.discover-card.swipe-right {
opacity: 0;
transform:
translateX(125%)
rotate(12deg);
}
/* =========================
NAVIGATION DU BAS
========================= */
.discover-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 5000;
min-height: 72px;
padding:
7px 8px
calc(7px + env(safe-area-inset-bottom));
display: flex;
align-items: center;
justify-content: space-around;
background: rgba(255,255,255,.97);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid #ececf1;
box-shadow:
0 -6px 25px rgba(0,0,0,.05);
}
.discover-bottom-nav a {
flex: 1;
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #999;
text-decoration: none;
transition: color .2s ease;
}
.discover-bottom-nav a span {
font-size: 21px;
line-height: 1;
}
.discover-bottom-nav a small {
font-size: 10px;
font-weight: 650;
}
.discover-bottom-nav a.active {
color: #ff4f72;
}
/* =========================
AUCUN PROFIL
========================= */
.discover-empty {
margin-top: 80px;
padding: 45px 25px;
text-align: center;
background: #fff;
border-radius: 25px;
box-shadow:
0 12px 35px rgba(0,0,0,.07);
}
.discover-empty-heart {
color: #ff4f72;
font-size: 55px;
margin-bottom: 12px;
}
.discover-empty h1 {
margin: 0 0 8px;
font-size: 23px;
}
.discover-empty p {
margin: 0 0 20px;
color: #777;
font-size: 14px;
}
.discover-empty a {
display: inline-flex;
padding: 12px 18px;
border-radius: 13px;
background: #ff4f72;
color: #fff;
text-decoration: none;
font-weight: 750;
}
/* =========================================================
TABLETTE
========================================================= */
@media (min-width: 601px) {
.discover-page {
width: min(calc(100% - 40px), 470px);
padding-top: 25px;
}
.discover-stack {
height: min(68vh, 670px);
min-height: 540px;
}
.discover-card {
border-radius: 30px;
}
.discover-bottom-nav {
width: 460px;
left: 50%;
right: auto;
transform: translateX(-50%);
bottom: 15px;
border: 1px solid #ececf1;
border-radius: 24px;
box-shadow:
0 10px 35px rgba(0,0,0,.10);
}
}
/* =========================================================
SMARTPHONE
========================================================= */
@media (max-width: 600px) {
.discretima-discover-body {
padding-bottom:
calc(80px + env(safe-area-inset-bottom));
}
.discover-header {
height: 58px;
padding:
0 14px;
}
.discover-logo {
font-size: 21px;
}
.discover-filter {
width: 38px;
height: 38px;
font-size: 18px;
}
.discover-page {
width: 100%;
padding:
8px 8px 5px;
}
.discover-stack {
height:
calc(
100dvh - 210px
);
min-height: 470px;
max-height: 680px;
}
.discover-card {
border-radius: 25px;
}
.discover-info {
padding:
22px 19px 23px;
}
.discover-name-line h1 {
font-size: 27px;
}
.discover-actions {
gap: 20px;
padding:
12px 0 2px;
}
.discover-pass,
.discover-message {
width: 53px;
height: 53px;
}
.discover-like {
width: 63px;
height: 63px;
}
}
/* =========================================================
PETITS TÉLÉPHONES
========================================================= */
@media (max-width: 380px) {
.discover-stack {
min-height: 430px;
height:
calc(
100dvh - 205px
);
}
.discover-info {
padding:
18px 16px 20px;
}
.discover-name-line h1 {
font-size: 25px;
}
.discover-bio {
font-size: 12px;
}
.discover-actions {
gap: 16px;
}
.discover-pass,
.discover-message {
width: 49px;
height: 49px;
}
.discover-like {
width: 59px;
height: 59px;
}
}
@media (max-width: 380px) {
.discover-stack {
min-height: 430px;
height:
calc(
100dvh - 205px
);
}
.discover-info {
padding:
18px 16px 20px;
}
.discover-name-line h1 {
font-size: 25px;
}
.discover-bio {
font-size: 12px;
}
.discover-actions {
gap: 16px;
}
.discover-pass,
.discover-message {
width: 49px;
height: 49px;
}
.discover-like {
width: 59px;
height: 59px;
}
}
/* =========================================================
DISCRETIMA - AJUSTEMENT CARTE SUR MOBILE
Coins plus arrondis + photo légèrement zoomée
========================================================= */
@media (max-width: 600px) {
.discover-card {
border-radius: 30px 30px 24px 24px;
overflow: hidden;
}
.discover-photo-link {
overflow: hidden;
border-radius: 30px 30px 24px 24px;
}
.discover-photo {
width: 100%;
height: 100%;
object-fit: cover;
/* Zoom très léger */
transform: scale(1.03);
/* Garde le visage mieux centré */
object-position: center center;
}
.discover-gradient {
border-radius: 30px 30px 24px 24px;
}
}