/* ============================================================
   LANDING PAGE — écran public affiché avant connexion/inscription
   Reprend les tokens de index.css (couleurs, typos) sans en redéfinir.
   ============================================================ */

#landingScreen{ min-height:100vh; }

.landing-topbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; row-gap:10px;
  padding:18px 24px; max-width:1080px; margin:0 auto;
}
.landing-topbar .tag{ padding:0; }
.landing-topbar-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 10px; }
.landing-topbar-actions a.btn{
  text-decoration:none; color:var(--text); background:transparent;
  display:inline-flex; align-items:center; padding:5px 10px; font-size:11px;
}
.landing-topbar-actions a.btn:hover{ border-color:var(--accent); color:var(--accent); }

.landing-hero{
  max-width:1080px; margin:0 auto;
  padding:36px 24px 64px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.landing-hero h2{
  font-size:44px; line-height:1.05; margin:0 0 18px; max-width:15ch;
}
.landing-hero .lead{
  font-size:16px; line-height:1.6; color:var(--muted); max-width:44ch; margin:0 0 26px;
}
.landing-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.landing-cta-row button{ padding:12px 22px; font-size:14px; min-height:44px; }
.landing-fineprint{ font-size:12px; color:var(--muted2); }
.landing-fineprint a{ text-decoration:underline; }

/* ---------- Aperçu simulé de l'appli (composé avec les vraies classes de l'UI) ---------- */
.landing-preview{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.landing-preview-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--line); background:var(--panel2);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2);
}
.landing-preview-bar .dot{ width:7px; height:7px; border-radius:50%; background:var(--olive-dim); }
.landing-preview-body{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.landing-preview-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel3); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:12px 14px;
}
.landing-preview-card .name{ font-size:14px; margin-bottom:4px; }
.landing-preview-card .meta{ font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--olive); display:inline-block; flex-shrink:0; }
.landing-preview-card .pill{
  font-family:'JetBrains Mono'; font-size:11px; color:var(--accent);
  border:1px solid var(--accent-dim); border-radius:var(--radius); padding:3px 8px; letter-spacing:.06em;
}
.landing-preview-label{ text-align:center; font-size:11px; color:var(--muted2); padding-top:2px; }

/* ---------- Fonctionnalités ---------- */
.landing-section{ max-width:1080px; margin:0 auto; padding:8px 24px 64px; }
.landing-section h3{ font-size:28px; margin:0 0 8px; }
.landing-section .lead{ color:var(--muted); font-size:14px; margin:0 0 28px; max-width:56ch; }
.landing-feature-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.landing-feature{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
}
.landing-feature .ico{ font-size:22px; margin-bottom:10px; display:block; }
.landing-feature h4{ font-family:'Bebas Neue'; letter-spacing:.03em; font-size:18px; margin:0 0 6px; font-weight:400; }
.landing-feature p{ font-size:13px; color:var(--muted); line-height:1.55; margin:0; }

/* ---------- Comment ça marche ---------- */
.landing-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.landing-step{ position:relative; padding-left:44px; }
.landing-step .num{
  position:absolute; left:0; top:-2px;
  font-family:'Bebas Neue'; font-size:30px; color:var(--accent-dim); line-height:1;
}
.landing-step h4{ font-size:16px; margin:0 0 6px; font-family:'Oswald'; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text); }
.landing-step p{ font-size:13px; color:var(--muted); line-height:1.55; margin:0; }

/* ---------- Bandeau CTA final ---------- */
.landing-final{
  max-width:1080px; margin:0 auto 64px; padding:0 24px;
}
.landing-final-panel{
  border:1px solid var(--accent-dim); border-radius:var(--radius);
  background:linear-gradient(135deg, var(--panel2), var(--panel));
  padding:32px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.landing-final-panel h3{ font-size:24px; margin:0 0 4px; }
.landing-final-panel p{ font-size:13px; color:var(--muted); margin:0; }

.landing-footer{
  max-width:1080px; margin:0 auto; padding:0 24px 40px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:11px; color:var(--muted2);
}
.landing-footer a{ color:var(--muted2); }

@media (max-width:820px){
  .landing-hero{ grid-template-columns:1fr; padding-top:12px; gap:28px; }
  .landing-hero h2{ font-size:34px; max-width:none; }
  .landing-feature-grid{ grid-template-columns:repeat(2, 1fr); }
  .landing-steps{ grid-template-columns:1fr; }
  .landing-final-panel{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:900px){
  .landing-topbar-actions a.btn{ min-height:44px; }
}
@media (max-width:760px){
  .landing-footer{ font-size:12px; }
  .landing-footer a{ line-height:2.4; }
}
@media (max-width:480px){
  .landing-feature-grid{ grid-template-columns:1fr; }
  .landing-topbar{ padding:14px 16px; }
  .landing-topbar-actions{ width:100%; justify-content:flex-start; }
  .landing-hero{ padding:20px 16px 48px; }
  .landing-hero h2{ font-size:28px; line-height:1.03; }
  .landing-section{ padding:8px 16px 48px; }
  .landing-final{ padding:0 16px; }
}