/* =====================================================================
   NOXAETERNA - Feuille de style unifiee " Givre & Arcane "
   Remplace l'ancienne. Cible les classes existantes du site.
   Aucune modification de markup necessaire.
   ===================================================================== */

:root{
  /* Couleurs */
  --void:      #080b16;
  --void-2:    #0d1224;
  --panel:     rgba(19,26,48,0.72);
  --panel-2:   rgba(13,19,37,0.82);
  --frost:     #6fd3e8;
  --frost-dim: #4a9fb8;
  --arcane:    #a880ff;
  --arcane-dim:#7a5cc9;
  --gold:      #e8c67a;
  --ice:       #dcecf6;
  --steel:     #8ba0bc;
  --steel-dim: #607390;
  --line:      rgba(111,211,232,0.14);
  --line-2:    rgba(111,211,232,0.30);
  --alliance:  #5a9eff;
  --horde:     #e06666;
  --ok:        #52e0a0;
  --danger:    #e06666;

  /* Typo */
  --display: 'Cinzel', Georgia, serif;
  --body:    'Crimson Pro', Georgia, serif;
  --mono:    ui-monospace, 'Cascadia Code', 'Courier New', monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1240px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--body);
  background:var(--void);
  color:var(--ice);
  min-height:100vh;
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fond ambiant unifie (remplace les multiples body::before) */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 700px at 80% -8%, rgba(168,128,255,0.10), transparent 60%),
    radial-gradient(1000px 800px at 10% 2%, rgba(111,211,232,0.09), transparent 55%),
    linear-gradient(180deg, #0a0f20 0%, var(--void) 48%);
}

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }

a{ color:var(--frost); text-decoration:none; }
strong{ color:var(--ice); }

/* =====================================================================
   AURORE AMBIANTE (element .site-aurora deja present dans layout.php)
   ===================================================================== */
.site-aurora{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.site-aurora::before, .site-aurora::after{
  content:''; position:absolute; left:-20%; right:-20%; top:-12%; height:80%;
  filter:blur(70px); mix-blend-mode:screen;
}
.site-aurora::before{
  background:
    radial-gradient(ellipse 42% 60% at 28% 45%, rgba(111,211,232,0.42), transparent 70%),
    radial-gradient(ellipse 40% 55% at 66% 40%, rgba(168,128,255,0.36), transparent 70%);
  animation:auroraDrift 30s ease-in-out infinite alternate;
  opacity:.55;
}
.site-aurora::after{
  top:18%;
  background:radial-gradient(ellipse 46% 50% at 72% 50%, rgba(90,158,255,0.26), transparent 70%);
  animation:auroraDrift2 38s ease-in-out infinite alternate;
  opacity:.45;
}
@keyframes auroraDrift{ 0%{ transform:translate(-4%,0);} 100%{ transform:translate(6%,3%);} }
@keyframes auroraDrift2{ 0%{ transform:translate(5%,2%);} 100%{ transform:translate(-6%,-3%);} }

/* =====================================================================
   BANNIERE / HERO
   ===================================================================== */
.site-banner{
  position:relative;
  min-height:340px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  border-bottom:1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(8,11,22,0.35) 0%, rgba(8,11,22,0.80) 78%, var(--void) 100%),
    url('/assets/images/cover-wow.png') center 28% / cover no-repeat;
}
/* voile givre + halo */
.site-banner::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 80% at 50% 30%, rgba(111,211,232,0.14), transparent 60%);
}
.site-banner .logo-image{
  position:relative; z-index:1;
  max-width:560px; width:78%; height:auto;
  filter:drop-shadow(0 0 34px rgba(111,211,232,0.45)) drop-shadow(0 6px 18px rgba(0,0,0,0.85));
  margin-bottom:.4rem;
}
/* si pas de logo image, on stylise le h1 texte */
.site-banner h1{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:900; font-size:clamp(2.6rem,7vw,4.4rem);
  letter-spacing:.08em;
  background:linear-gradient(180deg,#ffffff 0%, var(--frost) 45%, var(--arcane) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(111,211,232,0.25);
}
.site-banner .subtitle{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:600;
  color:var(--frost); letter-spacing:.42em; font-size:.8rem;
  text-transform:uppercase; margin-top:.8rem;
}

/* =====================================================================
   NAVIGATION (sticky + verre givre)
   ===================================================================== */
.main-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,11,22,0.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.main-nav .container{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.2rem;
}
.main-nav a{
  position:relative;
  font-family:var(--display); font-weight:600;
  font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--steel); padding:1rem 1.15rem; white-space:nowrap;
  transition:color .2s;
}
.main-nav a::after{
  content:''; position:absolute; left:1.15rem; right:1.15rem; bottom:.65rem; height:1.5px;
  background:linear-gradient(90deg,var(--frost),var(--arcane));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.main-nav a:hover{ color:var(--ice); }
.main-nav a:hover::after{ transform:scaleX(1); }

/* =====================================================================
   LAYOUT 3 COLONNES
   ===================================================================== */
.main-content{ padding:3rem 0 4rem; }
.layout-3col{
  display:grid; grid-template-columns:250px minmax(0,1fr) 270px; gap:2rem; align-items:start;
}

/* =====================================================================
   PANNEAUX LATERAUX (.sidebar)
   ===================================================================== */
.sidebar{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.3rem;
}
.sidebar + .sidebar,
.sidebar > * + h3{ margin-top:0; }
.sidebar h3{
  font-family:var(--display); font-weight:700;
  color:var(--frost); font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  text-align:left; padding-bottom:.7rem; margin-bottom:.9rem;
  border-bottom:1px solid var(--line);
}
.sidebar ul{ list-style:none; }
.sidebar ul li{
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem 0; border-bottom:1px dashed var(--line);
  font-size:.9rem; color:var(--steel);
}
.sidebar ul li:last-child{ border-bottom:none; }
.sidebar ul li .label{ font-family:var(--display); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--steel); }
.sidebar ul li .value{ color:var(--frost); float:none; font-weight:600; font-family:var(--mono); font-size:.82rem; }

/* =====================================================================
   ETAT DU SERVEUR
   ===================================================================== */
.server-status .status-row{ display:flex; justify-content:space-between; align-items:center; padding:.4rem 0; font-size:.9rem; }
.status-online{ color:var(--ok); display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.85rem; }
.status-offline{ color:var(--danger); display:inline-flex; align-items:center; gap:.4rem; }
.status-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; }
.status-dot.online{ background:var(--ok); box-shadow:0 0 10px var(--ok); }
.status-dot.offline{ background:var(--danger); }

/* =====================================================================
   CONTENU CENTRAL
   ===================================================================== */
.content-main{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.2rem 2.4rem;
}
.content-main h2{
  font-family:var(--display); font-weight:700;
  color:var(--ice); font-size:1.9rem; letter-spacing:.08em; text-transform:uppercase;
  text-align:center; padding-bottom:1.1rem; margin-bottom:1.8rem;
  border-bottom:1px solid var(--line);
}
.content-main h3{
  font-family:var(--display); font-weight:700;
  color:var(--frost); font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase;
  margin:2rem 0 1rem;
  display:flex; align-items:center; gap:.6rem;
}
.content-main p{ margin-bottom:1rem; color:#c3d3e2; }

/* =====================================================================
   CARTES NEWS
   (les styles inline par-news - border-left/gradient - restent prioritaires)
   ===================================================================== */
.news-card{
  position:relative;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-left:3px solid var(--frost-dim);
  border-radius:var(--radius);
  padding:1.5rem 1.7rem;
  margin-bottom:1.6rem;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.news-card:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,0.4); }
.news-card h4{
  font-family:var(--display); font-weight:700;
  color:var(--ice); font-size:1.3rem; letter-spacing:.02em; line-height:1.28;
  margin-bottom:.8rem;
}
.news-card p{ color:#c3d3e2; margin-bottom:.7rem; }
.news-card a{ color:var(--frost); font-weight:600; }
.news-card .news-meta{
  font-size:.8rem; color:var(--steel-dim); font-style:italic;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line);
}

/* =====================================================================
   BOUTONS
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.7rem;
  font-family:var(--display); font-weight:700; font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:linear-gradient(180deg, rgba(111,211,232,0.10), rgba(111,211,232,0.03));
  color:var(--frost); cursor:pointer;
  transition:all .22s ease;
}
.btn:hover{
  border-color:var(--frost); color:var(--ice);
  box-shadow:0 0 22px rgba(111,211,232,0.28); transform:translateY(-1px);
}
.btn-block{ display:flex; width:100%; }
.btn-primary{
  background:linear-gradient(180deg, var(--frost), var(--frost-dim));
  border-color:transparent; color:#062028; font-weight:900;
  text-shadow:none;
}
.btn-primary:hover{ box-shadow:0 0 26px rgba(111,211,232,0.45); color:#04161c; }
.btn-gold{
  background:linear-gradient(180deg, rgba(232,198,122,0.16), rgba(232,198,122,0.05));
  border-color:rgba(232,198,122,0.5); color:var(--gold);
}
.btn-gold:hover{ border-color:var(--gold); box-shadow:0 0 22px rgba(232,198,122,0.28); }

/* =====================================================================
   FORMULAIRES
   ===================================================================== */
.form-group{ margin-bottom:1.4rem; }
.form-group label{
  display:block; font-family:var(--display); font-weight:600;
  color:var(--steel); margin-bottom:.5rem; letter-spacing:.08em;
  font-size:.78rem; text-transform:uppercase;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%; padding:.85rem 1rem;
  background:rgba(6,9,18,0.6);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ice); font-family:var(--body); font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none; border-color:var(--frost);
  box-shadow:0 0 0 3px rgba(111,211,232,0.15);
}
.form-help{ font-size:.82rem; color:var(--steel-dim); margin-top:.35rem; font-style:italic; }

/* =====================================================================
   ALERTES
   ===================================================================== */
.alert{ padding:1rem 1.3rem; margin-bottom:1.4rem; border-radius:var(--radius-sm); border-left:4px solid; }
.alert-success{ background:rgba(82,224,160,0.10); border-color:var(--ok); color:#bfeeda; }
.alert-error{ background:rgba(224,102,102,0.10); border-color:var(--danger); color:#f2c9c9; }
.alert-info{ background:rgba(111,211,232,0.10); border-color:var(--frost); color:#c5e8f2; }

/* =====================================================================
   INFO-BOX
   ===================================================================== */
.info-box{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; margin:1.5rem 0; }
.info-box h4{ font-family:var(--display); font-weight:700; color:var(--frost); margin-bottom:.5rem; letter-spacing:.08em; }
.info-box code{
  display:block; margin-top:.5rem; padding:.6rem .8rem;
  background:rgba(111,211,232,0.07); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--frost); font-family:var(--mono); font-size:.9rem;
}

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */
.site-footer{
  border-top:1px solid var(--line);
  padding:2.2rem 0; text-align:center; margin-top:2.5rem;
  background:linear-gradient(180deg, transparent, rgba(4,6,12,0.5));
}
.site-footer p{ color:var(--steel-dim); font-size:.84rem; margin:.2rem 0; }
.footer-sub{ font-size:.75rem; opacity:.7; }

/* =====================================================================
   UTILITAIRES
   ===================================================================== */
.text-center{ text-align:center; }
.mt-2{ margin-top:2rem; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .layout-3col{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  body{ font-size:16px; }
  .site-banner{ min-height:240px; }
  .content-main{ padding:1.5rem 1.3rem; }
  .content-main > div[style*="grid-template-columns:200px"]{ grid-template-columns:1fr !important; }
}

/* Accessibilite */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible{
  outline:2px solid var(--frost); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}


/* =====================================================================
   LVL UP v1 - neige, entrees animees, hovers enrichis (ajout 07/2026)
   ===================================================================== */

/* --- Neige v4 : GPU-only (transform), 1 couche, coupee sur mobile --- */
body::after{
  content:''; position:fixed; left:0; top:0; width:100%; height:200%;
  z-index:4; pointer-events:none;
  background-image:
    radial-gradient(4px 4px at 40px 60px, rgba(235,245,255,.95), transparent 55%),
    radial-gradient(3px 3px at 150px 220px, rgba(220,236,246,.8), transparent 55%),
    radial-gradient(5px 5px at 260px 120px, rgba(240,250,255,.9), transparent 55%),
    radial-gradient(3px 3px at 370px 320px, rgba(220,236,246,.75), transparent 55%),
    radial-gradient(4px 4px at 480px 40px, rgba(235,245,255,.85), transparent 55%),
    radial-gradient(3px 3px at 570px 260px, rgba(220,236,246,.7), transparent 55%),
    radial-gradient(3.5px 3.5px at 110px 460px, rgba(235,245,255,.8), transparent 55%),
    radial-gradient(2.5px 2.5px at 320px 520px, rgba(220,236,246,.65), transparent 55%),
    radial-gradient(4px 4px at 520px 420px, rgba(235,245,255,.8), transparent 55%),
    radial-gradient(2.5px 2.5px at 210px 580px, rgba(220,236,246,.6), transparent 55%);
  background-size:600px 600px;
  background-repeat:repeat;
  transform:translate3d(0,-50%,0);
  animation:noxSnowGPU 13s linear infinite;
  opacity:.8;
  will-change:transform;
}
@keyframes noxSnowGPU{
  0%{ transform:translate3d(0,-50%,0); }
  100%{ transform:translate3d(30px,0,0); }
}
@media (max-width:900px){
  body::after{ display:none; }
}
/* --- Entree en cascade des cartes --- */
@keyframes noxFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.news-card{ animation:noxFadeUp .6s ease both; }
.news-card:nth-child(2){ animation-delay:.08s; }
.news-card:nth-child(3){ animation-delay:.16s; }
.news-card:nth-child(4){ animation-delay:.24s; }
.news-card:nth-child(5){ animation-delay:.32s; }
.news-card:nth-child(6){ animation-delay:.40s; }
.news-card:nth-child(n+7){ animation-delay:.48s; }
.sidebar{ animation:noxFadeUp .7s ease both .1s; }

/* --- Hover enrichi des cartes news : glow + zoom image --- */
.news-card:hover{
  border-color:var(--line-2);
  box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 24px rgba(111,211,232,.12);
}
.news-card img{ transition:transform .5s ease; }
.news-card:hover img{ transform:scale(1.03); }

/* --- Titres h3 : liseré degrade sous le texte --- */
.content-main h3::after{
  content:''; flex:1; height:1px; margin-left:.4rem;
  background:linear-gradient(90deg, var(--line-2), transparent);
}

/* --- Boutons : reflet qui traverse au survol --- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.25), transparent);
  transform:skewX(-20deg); transition:left .45s ease;
}
.btn:hover::before{ left:130%; }

/* --- Sidebar : leve legere au survol des blocs --- */
.sidebar{ transition:transform .25s ease, box-shadow .25s ease; }
.sidebar:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.35); }

/* --- Listes des sidebars : hover ligne --- */
.sidebar ul li{ transition:background .2s, padding-left .2s; border-radius:4px; }
.sidebar ul li:hover{ background:rgba(111,211,232,.06); padding-left:.4rem; }

/* --- Compteur joueurs : pulsation douce du point online --- */
@keyframes noxPulse{
  0%,100%{ box-shadow:0 0 6px var(--ok); }
  50%{ box-shadow:0 0 14px var(--ok), 0 0 22px rgba(82,224,160,.4); }
}
.status-dot.online{ animation:noxPulse 2.2s ease-in-out infinite; }

/* --- Alerts : entree animee --- */
.alert{ animation:noxFadeUp .4s ease both; }

/* --- Formulaires : label s'illumine quand le champ a le focus --- */
.form-group:focus-within label{ color:var(--frost); }


/* =====================================================================
   HERO ACCUEIL (ajout 07/2026)
   ===================================================================== */
.nox-hero{
  position:relative; overflow:hidden; text-align:center;
  padding:2.6rem 2rem 2.4rem;
  margin:0 0 2.4rem;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(19,30,55,.85), rgba(10,14,28,.9));
  animation:noxFadeUp .6s ease both;
}
.nox-hero-glow{
  position:absolute; inset:-40%; pointer-events:none;
  background:
    radial-gradient(ellipse 40% 45% at 25% 30%, rgba(111,211,232,.16), transparent 65%),
    radial-gradient(ellipse 38% 42% at 78% 65%, rgba(168,128,255,.14), transparent 65%);
  animation:auroraDrift 24s ease-in-out infinite alternate;
}
.nox-hero-title{
  position:relative;
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(180deg, #fff 10%, var(--frost) 60%, var(--arcane) 110%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0 0 .7rem !important; display:block !important;
}
.nox-hero-title::after{ display:none !important; }
.nox-hero-sub{
  position:relative; max-width:620px; margin:0 auto 1.6rem;
  color:var(--steel); font-style:italic; font-size:1.02rem;
}
.nox-hero-stats{
  position:relative; display:flex; justify-content:center; gap:2.6rem; flex-wrap:wrap;
  margin-bottom:1.8rem;
}
.nox-stat{ display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.nox-stat-num{
  font-family:var(--display); font-weight:900; font-size:2rem; line-height:1;
  color:var(--ice); text-shadow:0 0 18px rgba(111,211,232,.35);
}
.nox-stat-live{ color:var(--ok); text-shadow:0 0 18px rgba(82,224,160,.45); animation:noxPulseTxt 2.4s ease-in-out infinite; }
@keyframes noxPulseTxt{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }
.nox-stat-label{
  font-family:var(--display); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel-dim);
}
.nox-hero-cta{ position:relative; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
@media (max-width:700px){
  .nox-hero{ padding:1.8rem 1.2rem; }
  .nox-hero-stats{ gap:1.6rem; }
}


/* =====================================================================
   PODIUM CLASSEMENT (ajout 07/2026)
   ===================================================================== */
.nox-podium{
  display:flex; justify-content:center; align-items:flex-end; gap:1.2rem;
  margin:1.5rem 0 2.5rem; flex-wrap:wrap;
}
.pod-col{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  animation:noxFadeUp .7s ease both;
}
.pod-col.pod-second{ animation-delay:.1s; }
.pod-col.pod-third{ animation-delay:.2s; }
.pod-medal{ font-size:2.2rem; filter:drop-shadow(0 0 12px rgba(232,198,122,.4)); }
.pod-name{ font-family:var(--display); font-weight:700; font-size:1.05rem; }
.pod-class{ font-size:.78rem; color:var(--steel-dim); font-style:italic; }
.pod-bloc{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:120px; border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  border:1px solid var(--line-2); border-bottom:none;
  background:linear-gradient(180deg, rgba(111,211,232,.14), rgba(111,211,232,.03));
  padding-top:.6rem;
}
.pod-first .pod-bloc{
  height:110px;
  background:linear-gradient(180deg, rgba(232,198,122,.22), rgba(232,198,122,.04));
  border-color:rgba(232,198,122,.55);
  box-shadow:0 0 26px rgba(232,198,122,.18);
}
.pod-second .pod-bloc{ height:82px; }
.pod-third .pod-bloc{
  height:64px;
  background:linear-gradient(180deg, rgba(205,127,50,.18), rgba(205,127,50,.03));
  border-color:rgba(205,127,50,.45);
}
.pod-level{
  font-family:var(--display); font-weight:900; font-size:1.7rem; line-height:1;
  color:var(--ice); text-shadow:0 0 14px rgba(111,211,232,.35);
}
.pod-first .pod-level{ color:var(--gold); text-shadow:0 0 16px rgba(232,198,122,.5); font-size:2rem; }
.pod-level-label{
  font-family:var(--display); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel-dim);
}
@media (max-width:700px){
  .nox-podium{ gap:.6rem; }
  .pod-bloc{ width:92px; }
}


/* =====================================================================
   BOUTIQUE - hover premium des cartes produits (ajout 07/2026)
   ===================================================================== */
.content-main .news-card[style*="border-top:3px solid"]{
  transition:transform .25s ease, box-shadow .25s ease;
}
.content-main .news-card[style*="border-top:3px solid"]:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 16px 42px rgba(0,0,0,.5), 0 0 26px rgba(111,211,232,.14);
}
.content-main .news-card[style*="border-top:3px solid"] img{
  transition:transform .3s ease, filter .3s ease;
}
.content-main .news-card[style*="border-top:3px solid"]:hover img{
  transform:scale(1.12);
  filter:brightness(1.15);
}


/* =====================================================================
   LVL UP FINAL - espace perso + tables (ajout 07/2026)
   ===================================================================== */
/* Cartes perso (Mon Espace) : leve + glow couleur classe via la bordure */
.content-main div[style*="grid-template-columns:repeat(auto-fit, minmax(280px"] .news-card{
  transition:transform .25s ease, box-shadow .25s ease;
}
.content-main div[style*="grid-template-columns:repeat(auto-fit, minmax(280px"] .news-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(0,0,0,.5);
}

/* Tables (classement) : hover de ligne + transition douce */
.content-main table tbody tr{ transition:background .2s ease; }
.content-main table tbody tr:hover{ background:rgba(111,211,232,.07) !important; }

/* Selects harmonises avec le theme (boutique) */
select{ border-radius:var(--radius-sm); }
select:focus{ outline:none; border-color:var(--frost) !important; }