/* ===== Vox Aetern'Art — Blog (scopé & prioritaire) ===== */

:root{
  --va-card-radius: 8px; /* unified card/article radius */
  --va-text:#e8e9ee;
  --va-muted:#b1b3c2;
  --va-card:rgba(255,255,255,0.045);
  --va-card-2:rgba(255,255,255,0.025);
  --va-border:rgba(150,150,150,0.30);
  --va-border-strong:rgba(198,204,255,0.38);

  /* états du select tri (hover = noir, focus/sélection = gris) */
  --va-sel-bg: linear-gradient(180deg, var(--va-card), var(--va-card-2));
  --va-sel-bg-hover: #0a0a0d;
  --va-sel-bg-focus: #1a1b20;
}

/* Zone blog */
.va-blog{ padding:63px 6vw 78px; color:var(--va-text); color-scheme:dark; }
.va-blog *{ box-sizing:border-box; }

/* Cadre principal (angles droits) */
.va-blog .va-blog__frame{
  width:860px; margin:20px auto 50px; padding:40px 100px 60px;
  background:#0a0a0d; border:4px solid var(--va-border); border-radius:0;
  box-shadow:0 0 25px rgba(150,150,150,0.25);
  position:relative;
}
@media (max-width:1024px){ .va-blog .va-blog__frame{ width:100%; max-width:860px; padding:40px 28px 60px; } }
@media (max-width:768px){  .va-blog .va-blog__frame{ padding:34px 22px 56px; } }
@media (max-width:480px){  .va-blog .va-blog__frame{ padding:28px 16px 50px; } }

.va-blog .va-blog__title{ text-align:center; margin:0 0 6px; font-size:clamp(30px,3.2vw,46px); }
.va-blog .va-blog__subtitle{ text-align:center; margin:0 0 22px; color:var(--va-muted); }

/* Toolbar */
.va-blog .va-blog__toolbar{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; margin-bottom:18px; }
@media (max-width:760px){ .va-blog .va-blog__toolbar{ grid-template-columns:1fr; } }

.va-blog .va-blog__search{
  display:flex; gap:10px; align-items:center;
  background:linear-gradient(180deg, var(--va-card), var(--va-card-2));
  border:3px solid var(--va-border); border-radius:12px; padding:10px 12px;
}
.va-blog .va-blog__search input{ all:unset; width:100%; font-size:15px; color:var(--va-text); }
.va-blog .va-blog__search svg{ width:18px; height:18px; opacity:.85; }

.va-blog .va-blog__tools{ display:flex; align-items:center; gap:8px; }
.va-blog .va-sort-label{ color:var(--va-muted); font-size:14px; }

/* Select (inversion validée) */
.va-blog .va-blog__sort{
  background:var(--va-sel-bg);
  border:3px solid var(--va-border);
  color:var(--va-text);
  border-radius:10px; padding:8px 34px 8px 10px;
  min-width:160px; line-height:1.2;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  position:relative; cursor:pointer;
}
.va-blog .va-blog__sort:hover{
  background:var(--va-sel-bg-hover);
  border-color:var(--va-border-strong);
  color:var(--va-text);
}
.va-blog .va-blog__sort:focus,
.va-blog .va-blog__sort:focus-visible,
.va-blog .va-blog__sort:active{
  outline:none;
  background:var(--va-sel-bg-focus);
  border-color:var(--va-border);
  color:var(--va-text);
}
.va-blog .va-blog__sort option{ background:#1a1b20; color:var(--va-text); }
.va-blog .va-blog__sort option:hover{ background:#000; color:var(--va-text); }

/* Grille — 3/2/1 colonnes, mais l’affichage est limité à 2 lignes par JS */
.va-blog .va-blog__grid{
  --va-grid-gap:22px;
  --va-card-minh:320px;
  display:grid; gap:var(--va-grid-gap); grid-template-columns:repeat(3,1fr);
  align-content:start; /* AJOUT */
  align-items:start;   /* AJOUT */
  min-height: calc(2 * var(--va-card-minh) + var(--va-grid-gap)); /* stabilité visuelle */
}
@media (max-width:980px){ .va-blog .va-blog__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .va-blog .va-blog__grid{ grid-template-columns:1fr; } }

/* Cartes */
.va-blog .post{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:3px solid var(--va-border); border-radius: 8px; overflow:hidden;
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  min-height:var(--va-card-minh);
}

.va-blog .post:hover{ transform:translateY(-3px); border-color:var(--va-border-strong); box-shadow:0 20px 44px rgba(0,0,0,.45); }

.va-blog .post__media{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#0e0e12; }
.va-blog .post__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.va-blog .badge{ position:absolute; top:10px; left:10px; padding:6px 10px; font-size:12px; background:rgba(0,0,0,.52); border:3px solid var(--va-border); color:var(--va-text); border-radius:999px; }

.va-blog .post__body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.va-blog .post__title{
  font-size:19px; margin:0; line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height: calc(1.25em * 2);
}
.va-blog .post__title a{ color:var(--va-text); text-decoration:none; }
.va-blog .post__title a:hover{ text-decoration:underline; text-underline-offset:2px; }

.va-blog .post__excerpt{
  color:var(--va-muted); font-size:14px; line-height:1.6; margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height: calc(1.6em * 2);
}
.va-blog .post__foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--va-muted); font-size:12px; margin-top:auto; }
.va-blog .post__tags{ display:flex; gap:6px; margin-left:auto; }
.va-blog .post__tags span{ font-size:11px; border:3px solid var(--va-border); color:var(--va-muted); padding:3px 8px; border-radius:999px; }

/* Masquages (pagination + recherche) */
.va-blog .post[hidden],
.va-blog .post.is-hidden-search,
.va-blog .post.is-hidden-page{ display:none !important; }

/* Message vide */
.va-blog .va-blog__empty{ margin-top:14px; text-align:center; color:var(--va-muted); }

/* Message vide — visible : centré au milieu du grand cadre */
.va-blog .va-blog__empty:not([hidden]){
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  margin:0; text-align:center;
}

/* Pagination */
.va-blog .va-blog__pagination{
  margin-top:22px; display:flex; gap:10px; justify-content:center; align-items:center;
}
.va-blog .btn{
  background:linear-gradient(180deg, var(--va-card), var(--va-card-2));
  border:3px solid var(--va-border); color:var(--va-text);
  padding:10px 12px; border-radius:12px; cursor:pointer;
}
.va-blog .btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ===================== OVERLAY ===================== */
.va-overlay{
  position:fixed; inset:0; z-index:2147483646;
  display:none; opacity:0; pointer-events:none;
  background:rgba(0,0,0,0.96);
  transition:opacity 1400ms ease;
}
.va-overlay.is-open{
  display:flex; align-items:center; justify-content:center;
  padding:6vh 4vw; box-sizing:border-box; overflow:auto;
  opacity:1; pointer-events:auto;
}
.va-overlay__panel{
  position: relative; width:min(1100px, 92vw); height:calc(100vh - 12vh);
  margin:0; padding:26px 22px 22px; border-radius: 28px;
   border: 4px solid transparent;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.35), 0 0 16px rgba(255, 105, 180, 0.25);
  overflow-y:scroll; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
  transform-origin:center center; backface-visibility:hidden; will-change:transform, opacity;
  animation: vaPop 1400ms cubic-bezier(.2,.8,.2,1) 180ms both;
  background-color: var(--va-surface);
  

  overflow: hidden;}
@keyframes vaPop{ from{ transform:scale(0.90); opacity:0; } to{ transform:scale(1); opacity:1; } }
.va-overlay__header{
  position:sticky; top:0; z-index:1; background:rgba(14,14,18,.92);
  margin:-10px -10px 14px; padding:12px 10px 10px; border-bottom:1px solid rgba(150,150,150,.25);
}
.va-overlay__title{ margin:0 0 4px; font-size:clamp(22px,2.4vw,32px); }
.va-overlay__meta{ display:flex; gap:8px; font-size:13.5px; color:var(--va-muted); flex-wrap:wrap; }
.va-overlay__body{ line-height:1.75; color:var(--va-text); }
.va-overlay__body img{ max-width:100%; height:auto; display:block; border-radius:var(--va-card-radius); }
.va-side{ position:fixed; z-index:2147483647; will-change:top,left,right; }
.va-side-btn{
  border:3px solid var(--va-border); border-radius:12px; padding:12px 14px; cursor:pointer;
  background:linear-gradient(180deg, var(--va-card), var(--va-card-2)); color:var(--va-text);
  transition:opacity .18s ease;
}
.va-close-outside{
  position:fixed; z-index:2147483647; border:3px solid var(--va-border);
  background:linear-gradient(180deg, var(--va-card), var(--va-card-2));
  color:var(--va-text); padding:8px 12px; border-radius:12px; cursor:pointer; transition:opacity .18s ease;
}
.va-overlay.controls-hidden .va-side,
.va-overlay.controls-hidden .va-close-outside{ opacity:0; visibility:hidden; }
.va-overlay.controls-ready  .va-side,
.va-overlay.controls-ready  .va-close-outside{ opacity:1; visibility:visible; }
body.va-lock{ position:fixed; width:100%; }

/* ===== Overlay content swap animations ===== */
.va-overlay__body.va-swap-out{ animation: vaSwapOut 180ms ease both; }
.va-overlay__body.va-swap-in{  animation: vaSwapIn  220ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes vaSwapOut{ from{ opacity:1; transform:translateY(0);} to{ opacity:0; transform:translateY(-6px);} }
@keyframes vaSwapIn{  from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }


/* Clickable overlay covering the whole post card */
.post{ position:relative; }
.post__overlay{
  position:absolute; inset:0; z-index:5;
  text-indent:-9999px;
  background:transparent; border:0;
 border-radius: inherit;}
.post__overlay:focus{ outline:2px solid var(--va-border-strong); outline-offset:-2px; }

.va-overlay__panel:focus{ outline:none; }

/* Rounded neon frame for article panel, following panel radius */
/* === FINAL OVERRIDE: single overlay frame, rounded; do not touch cards/buttons === */
.va-overlay__panel{
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 4px solid transparent !important;
  border-image: linear-gradient(90deg, #8a2be2 0%, #ff69b4 100%) 1 !important;
  box-shadow: none !important;
}


/* override */
.va-overlay{
border:0 !important;
outline:none !important;
box-shadow:none !important;
}

.va-overlay::before{
content:none !important;
border:0 !important;
box-shadow:none !important;
}

.va-overlay::after{
content:none !important;
border:0 !important;
box-shadow:none !important;
}

/* override */
.va-overlay__panel{
position:relative;
border:0 !important;
border-radius:18px !important;
overflow:hidden !important;
box-shadow:none !important;
}

.va-overlay__panel::after{
content:none !important;
border:0 !important;
box-shadow:none !important;
}

/* override */
.va-blog .post{
position:relative; overflow:hidden;
}

/* override */
.va-blog .post:hover{
transform:translateY(-3px); border-color:transparent;
}

/* override */
.va-overlay__panel{
border-radius:14px !important;
}

/* override */
/* override */
.va-blog .post:hover{
transform: translateY(-3px); border-color: transparent; 
}

/* override */
/* override */
/* ========= FINAL TWEAKS (inline in blog.css) ========= */

/* A) Article panel: even less round + stronger neon glow */
.va-overlay__panel{ border-radius:12px !important; }
/* B) Cards (thumbnails): hover frame must be EXACT same shape/size as normal card */
.va-blog .post{
  border-width:3px !important;          /* base thickness */
  border-radius:inherit;                 /* keep the same radius from your card */
  position:relative; overflow:hidden;   /* ensure ::after clips perfectly */
}

/* No movement, exact same frame: only recolor + glow */
.va-blog .post:hover{
  transform:none !important;
  border-color:transparent !important;  /* hide grey, same thickness kept */
  
}

/* Hover ring draws at the exact border box with same 3px thickness */


/* ===== FINAL INLINE FIXES (keep inside blog.css) ===== */

/* Overlay article panel: slightly less round + single gradient border + strong neon glow */
.va-overlay__panel{
  border-radius: 12px !important;                 /* less rounded */
  overflow: hidden !important;
  border: 3px solid transparent !important;       /* exact border thickness */
  /* draw gradient border that respects radius; keep surface color as before */
  background:
    linear-gradient(var(--va-surface, #0e0e12), var(--va-surface, #0e0e12)) padding-box,
    linear-gradient(90deg, #8a2be2, #ff69b4) border-box !important;
  box-shadow: 0 0 18px rgba(138,43,226,0.55), 0 0 28px rgba(255,105,180,0.45) !important; /* neon glow */
}
/* ensure no competing pseudo-frames */
.va-overlay__panel::before,
.va-overlay__panel::after{ content:none !important; }

/* Cards (thumbnails): keep exact frame shape/size; recolor + neon glow on hover */
.va-blog .post{
  /* restore the card radius if anything overrode it */
  border-radius: 8px !important;   /* same as your base card spec */
  border-width: 3px !important;
  position: relative; overflow: hidden;
}
.va-blog .post:hover{
  transform: none !important;                       /* no movement -> same geometry */
  border: 3px solid transparent !important;         /* keep thickness, hide grey */
                       /* gradient border */
  box-shadow: 0 0 12px rgba(138,43,226,0.55), 0 0 22px rgba(255,105,180,0.45) !important; /* neon glow */
}



/* Hover: border-only neon ring (no interior color) */
.va-blog .post{ position:relative; overflow:hidden; }
.va-blog .post::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  border:3px solid transparent;                /* exact border thickness */
  border-image: linear-gradient(90deg, #8a2be2 0%, #ff69b4 100%) 1;
  box-shadow: 0 0 12px rgba(138,43,226,.55), 0 0 22px rgba(255,105,180,.45);
  opacity:0; transition: opacity .15s ease;
}
.va-blog .post:hover::after{ opacity:1; }









/* BLOG menu button — glow externe seulement */
.menu-box a[href="blog.html"] {
  border: 1.5px solid #fdfdf4 !important;  /* bordure plus fine */
  color: #fdfdf4 !important;

  /* glow externe serré */
  box-shadow:
    0 0 1px #fdfdf4,
    0 0 2px #fdfdf4;
}






.digital-screen-content {
  position: relative;
  z-index: 6; /* contenu au-dessus */
}

/* garder l’overlay visible mais non bloquant */
.digital-screen-overlay {
  pointer-events: none;
}



.va-blog { padding-top: 20px !important; }         
.va-blog .va-blog__frame { margin-top: 0 !important; }  


.subtitle-box {
  max-width: 1250px !important;   
  width: 68% !important;          
}


.va-blog .va-blog__frame {
  border-width: 3px !important;   
}

.va-blog .va-blog__frame {
  border-radius: 11px !important;  
  overflow: hidden;                
}





body:has(.va-blog) .home-neon-frame.lavender,
body:has(.va-blog) .home-neon-frame.pink {
  bottom: 75px !important;   
}    


body:has(.va-blog) .digital-screen-overlay {
  top: -42.5px !important;
  bottom: 64px !important;   
  height: auto !important;
}






.shop-go-top{
  display: flex;
  justify-content: center;
  margin: 0 0 12px;             /* n'affecte plus la frame */
  transform: translateY(-32px);/* remonte visuellement le bouton */
}


/* ================= GO TO TOP (Blog) ================= */
/* Base bouton (fond transparent, texte dégradé, bordure dégradée) */
.shop-go-top .go-back-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:220px; padding:12px 24px;
  border-radius:8px;
  text-decoration:none; text-transform:uppercase; letter-spacing:.08em;
  cursor:pointer; font-family:'Orbitron','Montserrat',system-ui,sans-serif;

  /* Texte dégradé violet → rose */
  --violet-text:#cfc4ff;
  --rose-text:#ff66cc;
  --split:50%;
  --feather:4%;
  color: var(--violet-text); /* fallback */
  background-image: linear-gradient(
    90deg,
    var(--violet-text) 0%,
    var(--violet-text) calc(var(--split) - var(--feather)),
    var(--rose-text)   calc(var(--split) + var(--feather)),
    var(--rose-text)   100%
  );
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;

  /* Bordure dégradée */
  border:2px solid transparent;
  border-image-slice:1;
  border-image-source: linear-gradient(90deg,#4a1fb8 0%, #ff57b0 100%);

  background: transparent;
  box-shadow:none;
  transition: box-shadow .2s ease, transform .15s ease;
}

/* Hover/Focus */
.shop-go-top .go-back-btn:hover,
.shop-go-top .go-back-btn:focus-visible{
  box-shadow:
    0 0 14px rgba(74,31,184,.55),
    0 0 22px rgba(255,87,176,.45);
  transform: translateY(-1px);
  outline:none;
}

/* Active */
.shop-go-top .go-back-btn:active{ transform: translateY(0); }

/* Nettoyage des styles globaux de liens */
.shop-go-top .go-back-btn:link,
.shop-go-top .go-back-btn:visited{ text-decoration:none; }

.shop-go-top .go-to-top{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;

  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(90deg, #9c8cff, #ff66e0) border-box;
  -webkit-background-clip: padding-box, border-box;
          background-clip: padding-box, border-box;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;

  box-shadow:
    0 0 10px rgba(156,140,255,0.45),
    0 0 18px rgba(255,102,224,0.45);
}

.shop-go-top .go-to-top:hover,
.shop-go-top .go-to-top:focus{
  box-shadow:
    0 0 14px rgba(156,140,255,0.65),
    0 0 26px rgba(255,102,224,0.65);
  outline: none;
}




/* --- Fond du cadre plus transparent, contenu intact --- */
.va-blog .va-blog__frame{
  position: relative;
  background: none !important;            /* on retire le fond direct */
}

/* Calque de fond seulement (pas de bordure ici) */
.va-blog .va-blog__frame::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(10,10,13,0.3);        /* ← règle l’opacité du FOND ici */
  z-index:0;                              /* reste sous le contenu */
}

/* Contenu au-dessus du calque */
.va-blog .va-blog__frame > *{ position:relative; z-index:1; }

/* Blindage : fonds OPAQUES pour que les vignettes & outils ne soient pas “affadis” */
/* Fond des vignettes (posts) assombri */
/* Fond des vignettes (posts) : plus sombre mais avec un léger dégradé */
.va-blog .post {
  background: linear-gradient(
    180deg,
    rgba(20,20,24,0.9),   /* haut : très sombre mais pas noir absolu */
    rgba(12,12,16,0.85)   /* bas : encore plus noir mais léger dégradé */
  ) !important;
}





.va-blog .post__media{ background:#0e0e12 !important; } /* garde l’entête visuel net */
.va-blog .va-blog__search,
.va-blog .btn,
.va-blog .va-blog__sort{
  background: #0f0f14 !important;         /* opaques pour ne pas prendre la transparence du fond */
}



/* ====== Cartes du blog : bordure blanche par défaut + dégradé au hover (arrondi conservé) ====== */

/* Reset minimal pour éviter les vieux overrides */
.va-blog .post,
.va-blog .post:hover{ border-image: none !important; }
.va-blog .post::after{ content: none !important; }

/* État normal : même bordure & glow que la Subtitle Box (blanc), épaisseur 3px */
.va-blog .post{
  position: relative;
  overflow: hidden;
  border: 3px solid #fdfdf4 !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 10px rgba(253,253,244,0.45),
    0 0 18px rgba(253,253,244,0.35) !important;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

/* Hover : anneau dégradé violet→rose dans la bordure (fond de carte inchangé), arrondis OK */
.va-blog .post:hover{
  border: 3px solid transparent !important;         /* pour afficher la couche border-box */
  border-radius: 8px !important;
  background:
    /* 1) fond de la carte (padding-box) — adapte si tu as changé le fond ailleurs */
    linear-gradient(180deg, rgba(20,20,24,0.90), rgba(12,12,16,0.85)) padding-box,
    /* 2) dégradé de bordure (border-box) */
    linear-gradient(90deg, #8a2be2, #ff69b4) border-box !important;
  -webkit-background-clip: padding-box, border-box;
          background-clip:  padding-box, border-box;
  box-shadow:
    0 0 14px rgba(138,43,226,0.65),
    0 0 26px rgba(255,105,180,0.55) !important;
}









/* Grand cadre du Blog — effet lumineux (couleur Infos) */
.va-blog .va-blog__frame{
  /* on ne touche pas l'épaisseur ni le radius existants */
  border-color: rgba(253, 253, 244, 0.90) !important; /* plus lumineux que 0.35 */
  box-shadow:
    0 0 12px rgba(253, 253, 244, 0.55),
    0 0 24px rgba(253, 253, 244, 0.35) !important;      /* halo doux blanc chaud */
}