/* ==========================================================================
   MacSeeds — Page Apps
   Adapté du mockup validé : hero promo + grille 2 colonnes, cards horizontales
   ========================================================================== */

:root{
  --ms-bg: #FAFAF9;
  --ms-ink: #17181A;
  --ms-ink-soft: #55585E;
  --ms-glass-border: rgba(255,255,255,0.55);
  --ms-glass-fill: rgba(255,255,255,0.38);
}

.macseeds-apps{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--ms-ink);
  position: relative;
}

.macseeds-apps h1,
.macseeds-apps h2,
.macseeds-apps h4,
.macseeds-apps .ms-price{
  font-family: "Bricolage Grotesque", -apple-system, sans-serif;
}

/* ambient mesh background */
.ms-mesh{
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 12% 18%, rgba(27,107,123,0.16), transparent 38%),
    radial-gradient(circle at 85% 10%, rgba(224,92,58,0.14), transparent 42%),
    radial-gradient(circle at 70% 80%, rgba(107,63,160,0.14), transparent 40%),
    radial-gradient(circle at 20% 85%, rgba(122,46,58,0.10), transparent 40%),
    var(--ms-bg);
  filter: blur(40px) saturate(115%);
}

/* hero (promotional) */
.ms-hero{ padding: 48px 28px 20px; max-width: 1180px; margin: 0 auto; }

.ms-featured{
  position:relative;
  border-radius: 28px;
  min-height: 380px;
  display:flex; align-items:flex-end;
  border: 1px solid var(--ms-glass-border);
  box-shadow: 0 24px 70px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.12);
  overflow:hidden;
  background-size: cover;
  background-position: center;
}
.ms-featured-scrim{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 75%);
}
.ms-featured-body{
  position:relative; z-index:1;
  padding: 36px 40px;
  max-width: 620px;
}
.ms-badge-row{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.ms-badge{
  font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:100px;
  background: rgba(255,255,255,0.16); color: #fff;
  backdrop-filter: blur(6px);
}
.ms-featured h2{ font-size: 32px; font-weight:700; margin: 0 0 8px; letter-spacing:-0.02em; color:#fff; }
.ms-featured p{ color: rgba(255,255,255,0.85); font-size:15.5px; margin:0 0 20px; max-width:480px; line-height:1.5; }
.ms-cta{
  display:inline-flex; align-items:center; gap:8px;
  background: #fff; color: var(--ms-ink); border:none;
  padding: 12px 22px; border-radius: 100px; font-size:14.5px; font-weight:700;
  text-decoration:none;
}

/* section title */
.ms-section-title{
  max-width:1180px; margin: 56px auto 20px; padding: 0 28px;
  display:flex; align-items:baseline; justify-content:space-between;
}
.ms-section-title h3{ font-size:22px; font-weight:700; letter-spacing:-0.02em; margin:0; }
.ms-section-title span{ color: var(--ms-ink-soft); font-size:14px; }

/* grid — 2 columns, horizontal cards */
.ms-grid{
  max-width:1180px; margin: 0 auto 90px; padding: 0 28px;
  display:grid; grid-template-columns: repeat(2, 1fr); gap:18px;
}
@media (max-width: 720px){
  .ms-grid{ grid-template-columns: 1fr; }
}

.ms-card{
  position:relative;
  border-radius:22px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.82); /* opaque et net : plus de flou/désaturation du contenu */
  border: 1px solid var(--ms-glass-border);
  box-shadow: 0 8px 26px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
  overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:row; align-items:center; gap:20px;
}
.ms-card::after{
  content:""; position:absolute; top:-80%; left:-40%;
  width:70%; height:260%;
  background: linear-gradient(115deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%);
  transform: rotate(15deg) translateX(-140%);
  transition: transform .6s ease;
  pointer-events:none;
}
.ms-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.10); }
.ms-card:hover::after{ transform: rotate(15deg) translateX(60%); }

.ms-card-icon{
  flex: none;
  width:84px; height:84px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: #E4E2DE;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 8px 18px rgba(0,0,0,0.18);
  position:relative; z-index:2; isolation:isolate; transform: translateZ(0);
}
.ms-card-icon img{ width:100%; height:100%; object-fit:cover; }

.ms-hero-icon{
  flex: none;
  width:96px; height:96px; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: #E4E2DE;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 8px 18px rgba(0,0,0,0.3);
  margin-bottom: 18px;
  position:relative; z-index:2; isolation:isolate; transform: translateZ(0);
}
.ms-hero-icon img{ width:100%; height:100%; object-fit:cover; }

.ms-card-body{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.ms-card h4{ margin:0; font-size:18px; font-weight:700; letter-spacing:-0.01em; }
.ms-card p{ margin:0; color: var(--ms-ink-soft); font-size:13.5px; line-height:1.4; }
.ms-card-meta{ display:flex; gap:8px; align-items:center; font-size:12.5px; margin-top:4px; flex-wrap:wrap; }
.ms-price{ font-weight:700; font-size:13px; }
.ms-dot{ color: rgba(0,0,0,0.2); }

.ms-status-badge{
  font-size:11.5px; font-weight:700;
  color: #9A6A00;
  background: rgba(255,178,0,0.14);
  border: 1px solid rgba(255,178,0,0.28);
  border-radius: 7px;
  padding: 4px 9px;
}

/* badges de plateforme (icône + libellé), dans l'esprit SF Symbols */
.ms-platform-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; color: var(--ms-ink-soft);
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 7px;
  padding: 4px 8px 4px 6px;
}
.ms-platform-badge svg{ width:13px; height:13px; flex:none; }

/* bouton "Voir l'app" qui apparaît au survol de la card */
.ms-card-hover-cta{
  position:absolute; right:22px; bottom:20px;
  opacity:0; transform: translateX(8px);
  transition: opacity .28s ease, transform .28s ease;
  background: #007AFF; color:#fff;
  font-size:12.5px; font-weight:700;
  padding:8px 16px; border-radius:100px;
  white-space:nowrap;
  pointer-events:none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.ms-card:hover .ms-card-hover-cta{ opacity:1; transform:translateX(0); }
@media (max-width: 720px){
  .ms-card-hover-cta{ display:none; } /* pas de hover utile au toucher, on l'enlève sur mobile */
}

/* Les apps pas encore disponibles gardent leur pleine netteté :
   seul le statut affiché change, pas de carte cliquable ni de bouton. */

/* aperçu du blog, bien détaché de la grille d'apps */
.ms-blog-teaser{
  margin-top: 110px;
  padding: 48px 28px 70px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.ms-blog-teaser-inner{ max-width:1180px; margin:0 auto; }

.ms-blog-teaser-header{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: 26px; flex-wrap:wrap; gap:10px;
}
.ms-blog-teaser-header h3{
  font-family:"Bricolage Grotesque", sans-serif;
  font-size:20px; font-weight:700; margin:0; letter-spacing:-0.01em;
}
.ms-blog-teaser-link{
  font-size:13.5px; font-weight:600; color:#55585E; text-decoration:none;
}
.ms-blog-teaser-link:hover{ color:#17181A; }

.ms-blog-teaser-list{ display:flex; flex-direction:column; gap:20px; max-width: 820px; margin:0 auto; }

.ms-post-row{
  display:flex; align-items:stretch; gap:0;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 28px; overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  min-height: 190px;
}
.ms-post-row:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,0.11); }

.ms-post-row-thumb{ flex:none; width: 200px; background:#C7C7CC; }
.ms-post-row-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.ms-post-row-body{
  flex:1; min-width:0; padding: 24px 30px;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
}
.ms-post-row-body h2,
.ms-post-row .ms-post-row-body h2{
  font-size:22px; font-weight:700; margin:0; letter-spacing:-0.01em; line-height:1.25;
  color:#1D1D1F !important;
  transition: color .2s ease;
}
.ms-post-row:hover .ms-post-row-body h2{ color:#007AFF !important; }
.ms-post-row-body p{ font-size:14.5px; color: var(--ms-ink-soft, #55585E); line-height:1.5; margin:0; }

.ms-post-row-meta{ display:flex; align-items:center; gap:12px; margin-top:2px; }
.ms-post-row-date{ font-family:"Bricolage Grotesque", sans-serif; font-size:14px; font-weight:700; color:#17181A; }
.ms-post-row-cat{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  color:#0A6CD9; background: rgba(10,132,255,0.12);
  border-radius:6px; padding:5px 10px;
}

@media (max-width: 640px){
  .ms-post-row{ min-height:0; }
  .ms-post-row-thumb{ width:120px; }
  .ms-post-row-body{ padding:16px 18px; gap:6px; }
  .ms-post-row-body h2{ font-size:16px; line-height:1.3; }
  .ms-post-row-body p{ display:none; }
  .ms-post-row-date{ font-size:13px; }
  .ms-post-row-cat{ font-size:10.5px; padding:4px 8px; }
}

html[data-theme="dark"] .ms-post-row{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
html[data-theme="dark"] .ms-post-row-body h2{ color:#F2F2F3 !important; }
html[data-theme="dark"] .ms-post-row:hover .ms-post-row-body h2{ color:#0A84FF !important; }
html[data-theme="dark"] .ms-post-row-body p{ color:#9A9CA2; }
html[data-theme="dark"] .ms-post-row-date{ color:#F2F2F3; }
html[data-theme="dark"] .ms-blog-teaser{ border-top-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .ms-blog-teaser-link{ color:#9A9CA2; }

/* ---- reste du mode sombre pour la page Apps ---- */

html[data-theme="dark"] .ms-card{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .ms-card::after{
  background: linear-gradient(115deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%);
}
html[data-theme="dark"] .ms-card-icon,
html[data-theme="dark"] .ms-hero-icon{
  background: #2A2A2E;
}
html[data-theme="dark"] .ms-platform-badge{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .ms-dot{ color: rgba(255,255,255,0.25); }
html[data-theme="dark"] .ms-status-badge{
  color:#FFC24D;
  background: rgba(255,178,0,0.16);
  border-color: rgba(255,178,0,0.3);
}
html[data-theme="dark"] .ms-section-title span{ color:#9A9CA2; }