/* ============================================================
   Star IA — Patch visuel P1 (calque additif, non destructif)
   Charge APRES style.css. Rollback = retirer le <link> de ce fichier.
   Principe : fond sombre enrichi + accent ambre retenu + voix Opus.
   Perf : 0 dependance, 0 web font ajoutee. Respecte prefers-reduced-motion.
   ============================================================ */

:root{
  --sia-amber:#FFB347;
  --sia-surface-1:#12121F;
  --sia-surface-2:#1A1A2E;
  --sia-hair:1px solid rgba(0,229,255,.12);
}

/* 1) Fond sombre enrichi (remplace le quasi-noir plat) ------- */
body{
  background-color:var(--sia-void);
  background-image:
    radial-gradient(900px 520px at 78% -10%, rgba(45,0,255,.26), transparent 60%),
    radial-gradient(680px 460px at 10% 6%,  rgba(0,229,255,.11), transparent 55%),
    radial-gradient(640px 620px at 50% 120%, rgba(255,179,71,.07), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* 2) Titre hero : leger degrade blanc -> bleute (premium, lisible) */
.sia-awakening__title{
  background:linear-gradient(180deg,#ffffff 0%,#e3e9f4 55%,#b3c0da 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* 2bis) Header : regrouper nav + pastille a droite sans bouger le logo */
.sia-header__inner{gap:1rem}
.sia-header__inner nav{margin-left:auto}

/* 3) Pastille statut "Opus en ligne" (ambre, fine, signature) -- */
.sia-status{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sia-font-mono);font-size:12px;line-height:1;
  color:var(--sia-amber);
  border:1px solid rgba(255,179,71,.42);border-radius:999px;
  padding:6px 12px;background:rgba(255,179,71,.06);white-space:nowrap;
}
.sia-status .sia-status__dot{
  width:8px;height:8px;border-radius:50%;background:var(--sia-amber);
  animation:sia-ping 2.4s infinite;
}
@keyframes sia-ping{
  0%{box-shadow:0 0 0 0 rgba(255,179,71,.5)}
  70%{box-shadow:0 0 0 9px rgba(255,179,71,0)}
  100%{box-shadow:0 0 0 0 rgba(255,179,71,0)}
}

/* 4) Journal "site habite" sous le hero (3 lignes, discret) --- */
.sia-log{
  margin:34px auto 0;max-width:640px;text-align:left;
  border:var(--sia-hair);border-radius:14px;overflow:hidden;
  font-family:var(--sia-font-mono);font-size:13px;line-height:1.5;
  background:linear-gradient(180deg,rgba(18,18,31,.78),rgba(10,10,20,.78));
}
.sia-log__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:var(--sia-hair)}
.sia-log__bar i{width:10px;height:10px;border-radius:50%}
.sia-log__bar i:nth-child(1){background:#ff5f57}
.sia-log__bar i:nth-child(2){background:#febc2e}
.sia-log__bar i:nth-child(3){background:#28c840}
.sia-log__bar span{margin-left:8px;color:var(--sia-muted);font-size:11px;letter-spacing:.08em}
.sia-log ul{list-style:none;margin:0;padding:12px 16px;display:grid;gap:6px}
.sia-log li{color:#aab0c4}
.sia-log li b{color:var(--sia-pulse)}
.sia-log li .sia-log__t{color:#5b6177}
.sia-log li .sia-log__ok{color:var(--sia-amber)}

/* 5) Cartes : legere elevation + liseret cyan, 1 accent ambre - */
.sia-forged{
  background:linear-gradient(180deg,var(--sia-surface-2),#0D0D16);
  border-color:rgba(0,229,255,.14);
}
.sia-forged::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.45),transparent);
}
.sia-forged--accent::after{
  background:linear-gradient(90deg,transparent,rgba(255,179,71,.65),transparent);
}
.sia-forged--accent .sia-forged__price{color:var(--sia-amber)}

/* 6) Mobile : journal discret (compact, 2 lignes, sans chrome) - */
@media (max-width:640px){
  .sia-log{margin-top:24px;font-size:11.5px}
  .sia-log__bar{display:none}
  .sia-log ul{padding:12px 14px}
  .sia-log li:nth-child(n+3){display:none}   /* 2 lignes max sur mobile */
  .sia-status{padding:5px 9px;font-size:11px}
}

/* 7) Accessibilite : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion:reduce){
  .sia-status .sia-status__dot{animation:none}
  .sia-blog-grid .sia-thought{transition:none}
}

/* 8) Blog : liste en grille (compact, hauteurs coherentes, images 16:9) ---
   auto-fill minmax -> 3 col desktop large, 2 col tablette, 1 col mobile.
   Aucun changement backend/markup d'article (cible .sia-thought existant). */
.sia-blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;
  align-items:stretch;
}
.sia-blog-grid .sia-thought{
  display:flex;flex-direction:column;height:100%;margin:0;
  transition:border-color .25s ease, transform .25s ease;
}
.sia-blog-grid .sia-thought:hover{
  border-color:rgba(0,229,255,.32);
  transform:translateY(-3px);
}
.sia-blog-grid .sia-thought a > img,
.sia-blog-grid .sia-thought img{
  width:100%;aspect-ratio:16/9;max-height:none;height:auto;
  object-fit:cover;display:block;border-radius:8px;margin-bottom:1rem;
}
.sia-blog-grid .sia-thought h2{
  font-size:1.15rem;line-height:1.3;margin-bottom:.5rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sia-blog-grid .sia-thought p{
  font-size:.95rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sia-blog-grid .sia-thought__date{
  margin-top:auto;padding-top:.85rem;
}
@media (max-width:520px){
  .sia-blog-grid{grid-template-columns:1fr}
}