/**
 * assets/css/app.css — page publique (apps.skolsuite.net)
 * S'appuie sur les variables --ss-* définies dans ui/v1/skolsuite-ui.css
 * (thème Akkhor) pour rester cohérent avec le reste de SkolSuite.
 */

body{
  background: var(--ss-paper);
  min-height: 100vh;
  font-size: 15px;
}

.wrap{ max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* ── EN-TÊTE ─────────────────────────────────────────────────────── */
header{
  padding: 1.75rem 0 1.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-icon{
  width:40px; height:40px; border-radius: var(--ss-radius-sm);
  background: var(--ss-gradient-primary);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--ss-shadow-sm);
  flex-shrink:0;
}
.brand-icon svg{ width:21px; height:21px; stroke:#fff; }
.brand-name{ font-family: var(--ss-font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.01em; line-height:1.15; }
.brand-sub{ font-size:.72rem; color: var(--ss-muted); letter-spacing:.05em; margin-top:.1rem; }

.header-actions{ display:flex; align-items:center; gap:.6rem; }
.header-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem 1rem; background:#fff; border-radius:999px;
  font-size:.78rem; color: var(--ss-muted); box-shadow: var(--ss-shadow-sm);
  white-space:nowrap;
}
.header-badge b{ color: var(--ss-ink); }

/* ── INTRO ───────────────────────────────────────────────────────── */
.intro{ padding: .2rem 0 1.7rem; max-width:640px; }
.intro p{ color: var(--ss-muted); line-height:1.7; font-size:.94rem; }

/* ── GRILLE DE CARTES ────────────────────────────────────────────── */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(245px,1fr));
  gap:1rem;
  padding-bottom: 3rem;
}

.card{
  background:#fff;
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  padding: 1.4rem 1.3rem;
  text-decoration:none;
  color: inherit;
  display:flex; flex-direction:column; gap:.55rem;
  position:relative;
  overflow:hidden;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
}

/* Liseré d'accent qui glisse depuis le haut au survol */
.card::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--c, var(--ss-slate));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
html[dir="rtl"] .card::before{ transform-origin: right; }

.card:hover,
.card:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(27,36,56,.15);
  border-color: var(--ss-paper-line);
  outline: none;
}
.card:hover::before{ transform: scaleX(1); }

.card-icon{
  width:44px; height:44px; border-radius: var(--ss-radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; overflow:hidden;
  background: color-mix(in srgb, var(--c, var(--ss-slate)) 12%, white);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.card-icon img{ width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; }
.card-icon-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.05rem; border-radius: inherit;
}
.card:hover .card-icon{ transform: scale(1.1) rotate(-4deg); }

.card-title{
  font-weight:700; font-size:1.02rem; margin-top:.15rem;
  transition: color .18s ease;
}
.card:hover .card-title{ color: var(--c, var(--ss-slate)); }

.card-domain{ font-size:.71rem; color: var(--ss-muted); font-family: ui-monospace, 'SF Mono', Consolas, monospace; word-break: break-all; }
.card-desc{ font-size:.85rem; color: var(--ss-muted); line-height:1.5; flex:1; }

.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.3rem; }
.card-tags{ display:flex; gap:.3rem; flex-wrap:wrap; }
.tag{
  font-size:.65rem; padding:.18rem .55rem; border-radius:999px;
  background: var(--ss-chalk); color: var(--ss-muted);
}
.card-arrow{
  color: var(--ss-paper-line); font-size:1rem; flex-shrink:0;
  transition: color .18s ease, transform .18s ease;
}
.card:hover .card-arrow{ color: var(--c, var(--ss-slate)); transform: translate(3px,-3px); }
html[dir="rtl"] .card:hover .card-arrow{ transform: translate(-3px,-3px); }

.card-comingsoon{ cursor:default; opacity:.72; }
.card-comingsoon:hover{ transform:none; box-shadow: var(--ss-shadow); border-color:transparent; }
.card-comingsoon:hover .card-icon{ transform:none; }
.card-comingsoon:hover .card-title{ color: inherit; }
.card-comingsoon:hover .card-arrow{ color: var(--ss-paper-line); transform:none; }

.badge-soon{
  position:absolute; top:1rem; inset-inline-end:1rem;
  font-size:.62rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color: var(--ss-ochre-deep); background: var(--ss-ochre-soft);
  padding:.2rem .55rem; border-radius:999px;
}

.empty-state{ padding: 3rem 0; text-align:center; color: var(--ss-muted); }

/* ── PIED DE PAGE ────────────────────────────────────────────────── */
footer{
  border-top: 1px solid var(--ss-paper-line);
  padding: 1.2rem 0 2.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.footer-sig{ font-size:.8rem; color: var(--ss-muted); }
.footer-links a{ font-size:.75rem; color: var(--ss-muted); text-decoration:none; }
.footer-links a:hover{ color: var(--ss-slate); }

/* ── RESPONSIVE / MOBILE ─────────────────────────────────────────── */
@media (max-width: 640px){
  .wrap{ padding: 0 1rem; }
  header{ padding: 1.4rem 0 1.1rem; }
  .brand-name{ font-size:1.15rem; }
  .grid{ grid-template-columns: 1fr; gap:.8rem; }
  .intro{ padding-bottom: 1.3rem; }
  .card{ padding: 1.2rem 1.1rem; }
}

@media (max-width: 380px){
  .header-badge{ font-size:.72rem; padding:.35rem .8rem; }
}

/* Respecte les utilisateurs qui préfèrent moins d'animation */
@media (prefers-reduced-motion: reduce){
  .card, .card-icon, .card-title, .card-arrow, .card::before{ transition: none; }
}