* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: ui-sans-serif, system-ui, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 20px;
}

/* ── CONTAINER ── */
.role-wrapper {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15,23,42,.2);
    overflow: hidden;
    width: 1100px;
    max-width: 100%;
    min-height: 720px;
    display: flex;
}

/* ── PANNEAU GAUCHE ── */
.left-panel {
    position: relative;
    width: 45%;
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    overflow: hidden;
}

/* Particules */
.medical-particles { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:hidden; }
.particle { position:absolute; font-size:2.2rem; color:rgba(255,255,255,.45); animation:float 20s infinite; filter:drop-shadow(0 0 8px rgba(255,255,255,.4)); }
@keyframes float {
    0%,100%{ transform:translateY(0) rotate(0deg); opacity:0; }
    10%{ opacity:.7; }
    90%{ opacity:.7; }
    100%{ transform:translateY(-100vh) rotate(360deg); opacity:0; }
}

/* Contenu gauche */
.welcome-content { position:relative; z-index:10; text-align:center; color:white; }
.logo-container { margin-bottom:30px; }
.medicare-icon { font-size:70px; color:white; display:block; margin-bottom:10px; }
.medicare-title { font-size:36px; font-weight:800; color:white; letter-spacing:1px; }
.welcome-content h1 { font-size:42px; font-weight:700; margin-bottom:15px; color:white; }
.welcome-content p  { font-size:16px; font-weight:400; color:rgba(255,255,255,.9); line-height:1.6; }

/* ── PANNEAU DROIT ── */
.right-panel {
    width: 55%;
    padding: 60px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roles-container { width:100%; max-width:420px; }
.roles-container h2 { font-size:28px; font-weight:700; color:#1e293b; margin-bottom:30px; text-align:center; }

/* ── BOUTONS DE RÔLE ── */
.role-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 25px;
    margin-bottom: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    background: white;
    cursor: pointer;
    transition: all .3s ease;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    animation: fadeInUp .5s ease forwards;
    opacity: 0;
}

.role-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(56,189,248,.1),transparent); transition:left .5s ease; }
.role-btn:hover::before { left:100%; }
.role-btn:hover { transform:translateX(8px); border-color:#38bdf8; box-shadow:0 8px 20px rgba(56,189,248,.2); }
.role-btn:active { transform:translateX(8px) scale(.98); }

/* Délais d'animation */
.role-btn:nth-child(1) { animation-delay: 0s; }
.role-btn:nth-child(2) { animation-delay: .1s; }
.role-btn:nth-child(3) { animation-delay: .2s; }


/* Icônes */
.role-icon { width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; color:white; flex-shrink:0; transition:all .3s ease; }
.patient-btn   .role-icon { background:linear-gradient(135deg,#38bdf8,#0ea5e9); }
.doctor-btn    .role-icon { background:linear-gradient(135deg,#10b981,#059669); }
.secretary-btn .role-icon { background:linear-gradient(135deg,#f59e0b,#d97706); }
.admin-btn     .role-icon { background:linear-gradient(135deg,#8b5cf6,#7c3aed); }
.role-btn:hover .role-icon { transform:scale(1.1) rotate(5deg); }

/* Texte & flèche */
.role-text { flex:1; font-size:18px; font-weight:600; color:#1e293b; text-align:left; }
.arrow { color:#94a3b8; font-size:18px; transition:all .3s ease; }
.role-btn:hover .arrow { color:#38bdf8; transform:translateX(5px); }

/* ── ANIMATION ENTRÉE ── */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    .role-wrapper { flex-direction:column; width:100%; max-width:520px; min-height:auto; }
    .left-panel { width:100%; min-height:250px; padding:40px 30px; }
    .welcome-content h1 { font-size:32px; }
    .medicare-icon { font-size:50px; }
    .medicare-title { font-size:28px; }
    .right-panel { width:100%; padding:40px 30px; }
    .roles-container h2 { font-size:24px; margin-bottom:20px; }
    .role-btn { padding:16px 20px; }
}

@media (max-width: 576px) {
    .left-panel { min-height:200px; padding:30px 20px; }
    .welcome-content h1 { font-size:28px; }
    .right-panel { padding:30px 20px; }
    .roles-container h2 { font-size:22px; }
    .role-btn { padding:14px 18px; gap:15px; }
    .role-icon { width:42px; height:42px; font-size:18px; }
    .role-text { font-size:16px; }
}