/* =============================================================
   blog.css — pages publiques du blog NOEVALKY
   Partagé par la liste et la page article, pour qu'ils ne
   divergent jamais.
   ============================================================= */

:root{
  --nuit:#0A0A18; --panneau:#14142A; --creux:#1C1C36;
  --ligne:rgba(255,255,255,.11);
  --cyan:#00D4FF; --rose:#FF2D95; --violet:#A78BFA;
  --texte:#E9E6FA; --doux:#8A85BC;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--nuit);color:var(--texte);
  font-family:'Outfit',system-ui,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 15% 0%,rgba(139,92,246,.16) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 90%,rgba(255,45,149,.11) 0%,transparent 55%);
}
button,input,select{font:inherit;color:inherit}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}

/* ---------- en-tête ---------- */
.bh{
  position:relative;z-index:2;display:flex;align-items:center;gap:16px;
  padding:14px 24px;border-bottom:1px solid var(--ligne);
  background:rgba(10,10,24,.85);backdrop-filter:blur(10px);
  position:sticky;top:0;
}
.bh .marque{
  font-family:'Righteous',cursive;font-size:1.15rem;text-decoration:none;
  background:linear-gradient(135deg,var(--violet),var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.bh .pousse{margin-left:auto}
.bh-langues{display:flex;gap:2px;flex-wrap:wrap}
.bh-langues a{
  color:var(--doux);text-decoration:none;font-size:.7rem;letter-spacing:.06em;
  padding:.25rem .45rem;border-radius:.3rem;text-transform:uppercase;transition:.2s;
}
.bh-langues a:hover{color:var(--texte);background:rgba(255,255,255,.08)}
.bh-langues a.actif{color:var(--violet);background:rgba(167,139,250,.18)}

/* ---------- gabarit ---------- */
.zone{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:44px 24px 90px}
.zone.etroite{max-width:720px}

.titre-page{
  font-family:'Righteous',cursive;font-size:clamp(2rem,6vw,3rem);font-weight:400;
  text-align:center;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--violet),var(--rose),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sous-titre{text-align:center;color:var(--doux);margin:10px 0 40px;font-size:1.02rem}

/* ---------- étiquettes ---------- */
.etiquettes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.etiq{
  background:var(--creux);border:1px solid var(--ligne);border-radius:2rem;
  padding:.35rem .9rem;font-size:.78rem;color:var(--doux);cursor:pointer;transition:.2s;
}
.etiq:hover{color:var(--texte);border-color:var(--violet)}
.etiq.actif{background:rgba(167,139,250,.2);border-color:var(--violet);color:var(--texte)}

/* ---------- grille d'articles ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.carte{
  display:flex;flex-direction:column;background:var(--panneau);
  border:1px solid var(--ligne);border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .25s ease,border-color .25s ease;
}
.carte:hover{transform:translateY(-4px);border-color:var(--violet)}
.carte-img{aspect-ratio:16/9;background:var(--creux);overflow:hidden}
.carte-img img{width:100%;height:100%;object-fit:cover;display:block}
.carte-vide{
  aspect-ratio:16/9;display:grid;place-items:center;font-size:2rem;opacity:.25;
  background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(255,45,149,.1));
}
.carte-corps{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.carte h3{font-size:1.12rem;line-height:1.35;margin-bottom:8px;font-weight:600}
.carte p{color:var(--doux);font-size:.9rem;flex:1}
.carte-pied{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.74rem;color:#5f5a8a;letter-spacing:.04em;
}
.cadenas{color:var(--violet)}

/* ---------- article ---------- */
.art-entete{margin-bottom:34px}
.art-couv{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;
  margin-bottom:28px;display:block;
}
.art-titre{
  font-family:'Righteous',cursive;font-weight:400;
  font-size:clamp(1.7rem,5vw,2.6rem);line-height:1.2;letter-spacing:.01em;
}
.art-meta{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;
  font-size:.78rem;color:#5f5a8a;letter-spacing:.05em;
}
.art-meta .etiq{cursor:default;padding:.2rem .7rem;font-size:.72rem}

.art{font-size:1.06rem;line-height:1.8;color:#D6D2EE}
.art h2{font-size:1.5rem;margin:38px 0 14px;color:#fff;line-height:1.3}
.art h3{font-size:1.2rem;margin:28px 0 10px;color:var(--violet)}
.art p{margin:0 0 18px}
.art strong{color:#fff}
.art em{color:#cfc9ee}
.art a{text-decoration:underline;text-underline-offset:3px}
.art code{
  font-family:ui-monospace,monospace;font-size:.88em;background:var(--creux);
  padding:2px 6px;border-radius:5px;color:var(--rose);
}
.art pre{background:var(--creux);padding:16px;border-radius:12px;overflow:auto;margin:0 0 20px}
.art pre code{background:none;padding:0;color:var(--texte)}
.art blockquote{
  border-left:3px solid var(--rose);padding:2px 0 2px 18px;margin:0 0 20px;
  color:var(--doux);font-style:italic;
}
.art ul,.art ol{margin:0 0 20px;padding-left:24px}
.art li{margin-bottom:7px}
.art hr{border:none;border-top:1px solid var(--ligne);margin:36px 0}
.art img{max-width:100%;border-radius:12px;display:block}
.art figure{margin:0 0 24px}
.art figcaption{
  font-size:.8rem;color:var(--doux);margin-top:9px;text-align:center;font-style:italic;
}
.np-video{
  position:relative;padding-bottom:56.25%;height:0;margin:0 0 24px;
  border-radius:12px;overflow:hidden;background:#000;
}

/* Noetty en ligne : suit la taille du texte qui l'entoure */
.art .noetty{
  height:1.7em;width:auto;display:inline-block;
  vertical-align:-.42em;margin:0 .1em;border-radius:0;
}
.art h2 .noetty,.art h3 .noetty{height:1.15em;vertical-align:-.22em}
.art .noetty-grand{vertical-align:middle}
.art .noetty{max-width:100%}
.art .noetty-seule{text-align:center;margin:0 0 22px}
.art .noetty-seule .noetty{vertical-align:middle}
.np-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- messages ---------- */
.info{
  text-align:center;padding:56px 24px;color:var(--doux);
  border:1px solid var(--ligne);border-radius:16px;background:var(--panneau);
}
.info h2{font-size:1.25rem;color:var(--texte);margin-bottom:10px;font-weight:600}
.info .btn{
  display:inline-block;margin-top:20px;padding:.7rem 1.5rem;border-radius:2rem;
  background:linear-gradient(135deg,var(--violet),#8b5cf6);color:#fff;
  text-decoration:none;font-weight:600;font-size:.9rem;
}
.squelette{
  background:var(--panneau);border:1px solid var(--ligne);border-radius:16px;height:290px;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.85}}

.retour-liste{
  display:inline-block;margin-bottom:26px;color:var(--doux);
  text-decoration:none;font-size:.85rem;
}
.retour-liste:hover{color:var(--violet)}

@media(max-width:600px){
  .bh{padding:12px 16px;gap:10px}
  .zone{padding:30px 16px 70px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}