:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --background-color: #f1f5f9;
    --surface-color: #ffffff;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --radius: 12px;
}

* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: system-ui, sans-serif; background: var(--background-color); }
main {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* plutôt que center pour éviter gros vide */
    padding: 40px 20px; /* top padding réduit si besoin */
}

.landing-container { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.right-column { display: grid; grid-template-rows: 1fr 1fr; gap: 30px; }

.role-card { background: var(--surface-color); padding: 30px; border-radius: var(--radius); box-shadow: var(--shadow-sm); border:1px solid #e2e8f0; text-decoration: none; color: inherit; transition: 0.25s ease; display:block; }
.role-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--primary-color); }
.small-card { padding: 22px; }

h1 { margin-top:5%; font-size: 1.5rem; color: var(--text-dark); }
h2 { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 15px; }

.doc-list { list-style:none; margin-bottom:20px; }
.doc-list li { padding:6px 0; color: var(--text-light); border-left: 3px solid var(--primary-color); padding-left:10px; }

.text-light { color: var(--text-light); font-size:0.95rem; margin-bottom:20px; }
.cta { margin-top:25px; background: var(--primary-color); color:white; padding:12px; text-align:center; border-radius: var(--radius); font-weight:600; }
.role-card:hover .cta { background: var(--primary-hover); }
.cta.secondary { background:#334155; }
.cta.secondary:hover { background:#1e293b; }

@media (max-width: 900px) {
    .landing-container { grid-template-columns: 1fr; }
    .right-column { grid-template-rows:auto; }
}