/* ==========================================================================
   Accueil, connexion et inscription
   ========================================================================== */

.auth-wrap { display: flex; justify-content: center; padding: 1rem 0 2rem; }

.auth-card {
    width: 100%; max-width: 430px;
    background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px;
    padding: 2rem 1.75rem; box-shadow: var(--shadow);
}

.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-head .brand-logo { display: inline-block; margin-bottom: .75rem; }
.auth-head h1 { font-size: 1.5rem; margin-bottom: .3rem; }
.auth-head p { color: var(--gray-600); margin: 0; }

.auth-foot { margin: 1.25rem 0 0; text-align: center; font-size: .92rem; color: var(--gray-600); }

/* ---------- Accueil ---------- */

.hero {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center;
    padding: 1.5rem 0 2.5rem;
}

.hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -.02em; margin-bottom: 1rem; }
.hero h1 span { color: var(--blue-600); }
.hero-lead { font-size: 1.12rem; color: var(--gray-700); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.hero-sheet { display: flex; justify-content: center; }

.demo-sheet {
    --line: 34px;
    width: 100%; max-width: 380px; padding: 18px 20px 20px 62px; position: relative;
    background-color: #fffdf7;
    background-image:
        linear-gradient(to right, transparent 46px, #e06666 46px, #e06666 48px, transparent 48px),
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), #b9d3f1 calc(var(--line) - 1px), #b9d3f1 var(--line));
    background-position: 0 0, 0 18px;
    border-radius: 4px 10px 10px 4px;
    box-shadow: var(--shadow), -6px 0 0 var(--blue-700);
    transform: rotate(-1.5deg);
    font-size: 1.05rem;
}
.demo-sheet p { margin: 0; line-height: var(--line); height: var(--line); color: var(--blue-900); }
.demo-head { display: flex; justify-content: space-between; font-size: .78rem; color: var(--gray-600); line-height: var(--line); height: var(--line); gap: 1rem; }
.demo-head span:last-child { font-weight: 700; color: var(--gray-700); }
.caret::after { content: ""; display: inline-block; width: 2px; height: 1.1em; background: var(--blue-600); vertical-align: middle; margin-left: -1ch; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.feature {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 1.25rem; box-shadow: var(--shadow-sm);
}
.feature h2 { font-size: 1.05rem; margin: .65rem 0 .4rem; }
.feature p { margin: 0; color: var(--gray-600); font-size: .95rem; }
.feature-step {
    display: inline-flex; width: 2rem; height: 2rem; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--blue-100); color: var(--blue-700); font-weight: 700;
}

@media (max-width: 800px) {
    .hero { grid-template-columns: 1fr; gap: 1.5rem; }
    .demo-sheet { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .caret::after { animation: none; }
}