/*
Theme Name: TopWeb 2000
Theme URI: https://topsitewebgratuit.fr
Description: Thème annuaire rétro « Web 1.0 / an 2000 » pour Top Site Web Gratuit — l'annuaire des meilleurs sites & outils gratuits. Fond étoilé bleu nuit, chrome Windows 95, responsive et accessible sous le capot.
Author: TopSiteWebGratuit
Version: 1.0.4
License: GPLv2 or later
Text Domain: topweb2000
*/

/* ===================================================================== *
 * Tokens
 * ===================================================================== */
:root{
  --night:#000033;
  --night-2:#00005a;
  --navy:#000080;
  --navy-2:#1084d0;
  --silver:#c0c0c0;
  --silver-lt:#e6e6e6;
  --silver-dk:#7c7c7c;
  --ink:#0a0a1a;
  --paper:#fffef4;
  --link:#0000ee;
  --link-visited:#551a8b;
  --lime:#39ff14;
  --hot:#ff2d95;
  --gold:#ffd23f;
  --cyan:#36e2ff;
  --red:#ff1f1f;
}

/* Bevels Windows 95 */
.tw-raised{border:2px solid;border-color:var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #000;}
.tw-sunken{border:2px solid;border-color:var(--silver-dk) var(--silver-lt) var(--silver-lt) var(--silver-dk);box-shadow:inset -1px -1px 0 #fff, inset 1px 1px 0 #000;}

/* ===================================================================== *
 * Base
 * ===================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Verdana,Geneva,Tahoma,sans-serif;
  font-size:16px;
  line-height:1.55;
  color:#e9e9ff;
  background-color:#000018;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 18%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 62%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 74%, #9fd0ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 12% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 40%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 33% 12%, var(--gold) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 52%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #000018 0%, var(--night) 45%, var(--night-2) 100%);
  background-attachment:fixed;
  background-size:380px 380px,420px 420px,300px 300px,520px 520px,460px 460px,360px 360px,640px 640px,280px 280px,100% 100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);}
a:visited{color:var(--link-visited)}
a:hover{color:var(--hot)}

.tw-wrap{max-width:1000px;margin:0 auto;padding:14px 12px 40px}

/* ===================================================================== *
 * Fenêtre / panneaux
 * ===================================================================== */
.tw-window{background:var(--silver);color:var(--ink);margin:0 0 18px;
  border:2px solid;border-color:var(--silver-lt) #000 #000 var(--silver-lt);
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-dk), 3px 3px 0 rgba(0,0,0,.5);}
.tw-titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(90deg,var(--navy),var(--navy-2));
  color:#fff;font-weight:bold;font-size:13px;padding:4px 6px;letter-spacing:.3px;
  text-shadow:1px 1px 0 #000;}
.tw-titlebar .tw-tb-btns{display:flex;gap:3px}
.tw-titlebar .tw-tb-btns b{display:inline-flex;width:16px;height:14px;align-items:center;justify-content:center;
  background:var(--silver);color:#000;font-size:10px;line-height:1;
  border:1px solid;border-color:#fff var(--silver-dk) var(--silver-dk) #fff}
.tw-window-body{padding:14px}

h1,h2,h3{font-family:Verdana,Geneva,sans-serif;line-height:1.2}
.tw-pixel{font-family:'Press Start 2P',Verdana,sans-serif;line-height:1.5;letter-spacing:0}

hr,.tw-hr{border:0;height:2px;background:linear-gradient(90deg,transparent,var(--silver-dk),transparent);margin:18px 0;
  border-top:1px solid #000;border-bottom:1px solid #fff}

/* ===================================================================== *
 * En-tête
 * ===================================================================== */
.tw-topbar{font-family:'VT323',monospace;font-size:18px;color:var(--lime);
  text-align:center;padding:3px 6px;border-bottom:1px solid #1b1b4d;background:rgba(0,0,0,.35)}
.tw-topbar a{color:var(--cyan);text-decoration:none}

.tw-header{margin-top:14px}
.tw-brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;text-align:center;padding:18px 14px}
.tw-logo{font-family:'Press Start 2P',monospace;font-size:30px;line-height:1.35;margin:0;
  color:var(--gold);text-shadow:3px 3px 0 var(--hot), 6px 6px 0 #000;}
.tw-logo a{color:inherit;text-decoration:none}
.tw-logo .tw-l2{color:var(--cyan);text-shadow:3px 3px 0 var(--navy),6px 6px 0 #000}
.tw-tagline{font-family:'VT323',monospace;font-size:24px;color:#fff;margin:6px 0 0;text-shadow:1px 1px 0 #000}
.tw-tagline b{color:var(--lime)}

/* Marquee */
.tw-marquee{overflow:hidden;white-space:nowrap;background:#000;color:var(--lime);
  font-family:'VT323',monospace;font-size:20px;border-top:2px solid var(--lime);border-bottom:2px solid var(--lime);
  padding:4px 0;margin:12px 0}
.tw-marquee span{display:inline-block;padding-left:100%;animation:tw-scroll 22s linear infinite}
.tw-marquee span b{color:var(--gold)}
@keyframes tw-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Navigation principale */
.tw-nav{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px;background:var(--silver);
  border-top:2px solid var(--silver-lt);border-bottom:2px solid #000}
.tw-nav a{display:inline-block;text-decoration:none;color:var(--navy);background:var(--silver);
  font-weight:bold;font-size:13px;padding:6px 12px;
  border:2px solid;border-color:#fff var(--silver-dk) var(--silver-dk) #fff}
.tw-nav a:hover{background:var(--silver-lt);color:var(--hot)}
.tw-nav a:active{border-color:var(--silver-dk) #fff #fff var(--silver-dk)}
.tw-nav .current-menu-item a,.tw-nav a[aria-current]{background:var(--navy);color:#fff}

/* ===================================================================== *
 * Boutons / éléments interactifs
 * ===================================================================== */
.tw-btn,.tw-go{display:inline-block;text-decoration:none;font-weight:bold;cursor:pointer;
  font-family:Verdana,sans-serif;padding:8px 16px;color:#003500;
  background:linear-gradient(180deg,#9dff8a,#2fbf1c);
  border:2px solid;border-color:#d6ffce #145c0a #145c0a #d6ffce;
  box-shadow:inset 1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,.4)}
.tw-go{font-size:18px;letter-spacing:.5px}
.tw-btn:hover,.tw-go:hover{filter:brightness(1.08);color:#002400}
.tw-btn:active,.tw-go:active{border-color:#145c0a #d6ffce #d6ffce #145c0a;box-shadow:inset 1px 1px 0 rgba(0,0,0,.3)}

/* Étoiles de note */
.tw-stars{display:inline-flex;gap:1px;font-size:18px;line-height:1;vertical-align:middle}
.tw-star{font-style:normal;color:#9a9a9a}
.tw-star.on{color:#ff9d00;text-shadow:0 0 2px #ffce00}
.tw-star.half{background:linear-gradient(90deg,#ff9d00 50%,#9a9a9a 50%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Badges statut */
.tw-badge{display:inline-block;font-family:'VT323',monospace;font-size:16px;font-weight:bold;
  padding:1px 8px;border:2px solid #000;line-height:1.3;text-transform:uppercase;letter-spacing:.5px}
.tw-badge-gratuit{background:var(--lime);color:#003a00}
.tw-badge-opensource{background:var(--cyan);color:#003039}
.tw-badge-freemium{background:var(--gold);color:#3a2c00}
.tw-badge-essai{background:#ffb3de;color:#5a0030}

/* "NEW!" clignotant */
.tw-new{display:inline-block;font-family:'Press Start 2P',monospace;font-size:9px;color:#fff;background:var(--red);
  padding:3px 5px;border:1px solid #000;vertical-align:middle;animation:tw-blink 1s steps(1) infinite}
@keyframes tw-blink{50%{opacity:.15}}

/* ===================================================================== *
 * Accueil / portail
 * ===================================================================== */
.tw-hero-body{text-align:center}
.tw-hero-body p{max-width:62ch;margin:0 auto 10px}
.tw-counter{font-family:'VT323',monospace;display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  color:#fff;font-size:20px}
.tw-leds{display:inline-flex;gap:2px}
.tw-led{background:#000;color:var(--lime);border:2px solid;border-color:#000 #444 #444 #000;
  font-family:'VT323',monospace;font-size:22px;width:18px;text-align:center;line-height:1.4;text-shadow:0 0 4px var(--lime)}

.tw-cols{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}

/* Grille de catégories */
.tw-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tw-cat{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);background:var(--silver);padding:10px;
  border:2px solid;border-color:#fff var(--silver-dk) var(--silver-dk) #fff}
.tw-cat:hover{background:var(--silver-lt);outline:2px dashed var(--navy)}
.tw-cat .tw-cat-ico{font-size:26px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:var(--gold);border:2px solid #000;flex:0 0 auto}
.tw-cat .tw-cat-n{font-weight:bold;font-size:14px;color:var(--navy)}
.tw-cat .tw-cat-c{font-size:12px;color:#333}

/* Listes "Top" / "Nouveautés" en barre latérale */
.tw-side .tw-window-body{font-size:14px}
.tw-toplist{list-style:none;margin:0;padding:0;counter-reset:tw}
.tw-toplist li{counter-increment:tw;display:flex;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px dotted var(--silver-dk)}
.tw-toplist li:last-child{border-bottom:0}
.tw-toplist li::before{content:counter(tw);font-family:'Press Start 2P',monospace;font-size:11px;color:var(--hot);min-width:22px}
.tw-toplist a{color:var(--navy);font-weight:bold;text-decoration:none}
.tw-toplist a:hover{color:var(--hot);text-decoration:underline}
.tw-toplist .tw-mini{display:block;font-size:11px;color:#444;font-weight:normal}

/* ===================================================================== *
 * Classement (taxonomie / archive)
 * ===================================================================== */
.tw-rank{list-style:none;margin:0;padding:0;counter-reset:rk}
.tw-rankrow{counter-increment:rk;display:grid;grid-template-columns:54px 150px 1fr;gap:14px;align-items:start;
  background:var(--silver);padding:12px;margin-bottom:12px;
  border:2px solid;border-color:#fff var(--silver-dk) var(--silver-dk) #fff}
.tw-rankrow .tw-rk-num{font-family:'Press Start 2P',monospace;font-size:18px;color:var(--navy);
  text-align:center;align-self:center}
.tw-rankrow .tw-rk-num::before{content:"#" counter(rk)}
.tw-rankrow:nth-child(1) .tw-rk-num{color:#b8860b;font-size:22px}
.tw-rankrow:nth-child(2) .tw-rk-num{color:#6e6e6e}
.tw-rankrow:nth-child(3) .tw-rk-num{color:#a05a2c}
.tw-rk-shot{display:block;border:2px solid;border-color:var(--silver-dk) #fff #fff var(--silver-dk);background:#000;aspect-ratio:16/10;overflow:hidden}
.tw-rk-shot img{width:100%;height:100%;object-fit:cover}
.tw-rk-main h3{margin:0 0 4px;font-size:18px}
.tw-rk-main h3 a{color:var(--navy);text-decoration:none}
.tw-rk-main h3 a:hover{color:var(--hot)}
.tw-rk-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}
.tw-rk-main p{margin:0 0 10px;color:#222;font-size:14px}
.tw-rk-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tw-rk-actions .tw-detail{font-size:12px;color:var(--navy);font-weight:bold}

/* ===================================================================== *
 * Fiche site (single)
 * ===================================================================== */
.tw-single-head{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start}
.tw-single-shot{border:2px solid;border-color:var(--silver-dk) #fff #fff var(--silver-dk);background:#000;overflow:hidden}
.tw-single-shot img{width:100%;display:block}
.tw-single-title{font-size:26px;margin:0 0 6px;color:var(--navy)}
.tw-single-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.tw-lead{font-size:16px;color:#1a1a1a;background:var(--paper);padding:10px 12px;border:1px solid var(--silver-dk)}
.tw-content{font-family:'Times New Roman',Georgia,serif;font-size:18px;line-height:1.7;color:#161616;margin-top:14px}
.tw-content a{color:var(--link)}
.tw-socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tw-socials a{font-size:13px;color:var(--navy);text-decoration:none;background:var(--silver-lt);padding:4px 8px;border:1px solid var(--silver-dk)}
.tw-related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tw-related a{display:block;text-decoration:none;color:var(--navy);font-weight:bold;background:var(--silver);padding:8px;
  border:2px solid;border-color:#fff var(--silver-dk) var(--silver-dk) #fff;font-size:13px}
.tw-related a:hover{color:var(--hot)}

/* ===================================================================== *
 * Pub
 * ===================================================================== */
.tw-ad{margin:14px auto;text-align:center}
.tw-ad-label{display:block;font-family:'VT323',monospace;color:#7e7eb0;font-size:14px;letter-spacing:1px}
.tw-ad-ph{margin:4px auto 0;max-width:468px;height:60px;display:flex;align-items:center;justify-content:center;
  font-family:'VT323',monospace;font-size:18px;color:#444;background:repeating-linear-gradient(45deg,#d8d8d8,#d8d8d8 10px,#c4c4c4 10px,#c4c4c4 20px);
  border:2px dashed var(--silver-dk)}
.tw-ad-rect .tw-ad-ph{max-width:300px;height:250px}

/* ===================================================================== *
 * Pied
 * ===================================================================== */
.tw-webring{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:13px;color:#cfcfe6;
  font-family:'VT323',monospace;font-size:18px}
.tw-webring a{color:var(--cyan);text-decoration:none}
.tw-footer{text-align:center;color:#aab0d8;font-size:13px;padding:8px 0 0}
.tw-footer a{color:var(--cyan)}
.tw-footnav{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:8px 0}
.tw-bestview{font-family:'VT323',monospace;font-size:17px;color:#8f8fc0;margin-top:8px}
.tw-badges88{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.tw-badge88{font-family:'VT323',monospace;font-size:14px;color:#001;background:linear-gradient(180deg,#fff,#bcbcbc);
  border:2px solid #000;padding:3px 8px;line-height:1.2;text-align:center}
.tw-badge88 b{color:var(--navy)}

/* ===================================================================== *
 * Recherche / formulaires
 * ===================================================================== */
.tw-search{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.tw-search input[type=search],input[type=text],input[type=email],input[type=url],textarea,.tw-content input,.tw-content select{
  font-family:Verdana,sans-serif;font-size:15px;padding:6px 8px;background:#fff;color:#000;
  border:2px solid;border-color:var(--silver-dk) #fff #fff var(--silver-dk)}
.tw-empty{padding:20px;text-align:center;color:#333}

/* Formulaire de contact réseau (shortcode [contact_nocodb]) — habillage rétro */
.eagle-contact-form{max-width:560px}
.eagle-contact-form label{display:block;margin:0 0 12px;font-weight:bold;color:#000080;font-size:14px}
.eagle-contact-form input,.eagle-contact-form textarea{display:block;width:100%;margin-top:4px;font-family:Verdana,sans-serif;font-size:15px;padding:7px 9px;background:#fff;color:#000;border:2px solid;border-color:var(--silver-dk) #fff #fff var(--silver-dk)}
.eagle-contact-form button,.eagle-contact-form .button,.eagle-contact-form input[type=submit],
.tw-content .wp-element-button,.tw-content button[type=submit]{
  display:inline-block;cursor:pointer;font-weight:bold;font-family:Verdana,sans-serif;font-size:16px;
  padding:8px 18px;color:#003500 !important;background:linear-gradient(180deg,#9dff8a,#2fbf1c) !important;
  border:2px solid !important;border-color:#d6ffce #145c0a #145c0a #d6ffce !important;border-radius:0 !important;
  box-shadow:inset 1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,.4) !important;text-shadow:none}
.eagle-contact-form button:active,.tw-content .wp-element-button:active{border-color:#145c0a #d6ffce #d6ffce #145c0a !important}
.eagle-contact-footer-link{display:none !important} /* ceinture+bretelles si le plugin l'injecte quand même */

/* ===================================================================== *
 * 404
 * ===================================================================== */
.tw-404{text-align:center}
.tw-404 .tw-bigerr{font-family:'Press Start 2P',monospace;font-size:42px;color:var(--red);text-shadow:3px 3px 0 #000;margin:10px 0}
.tw-brokenimg{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:90px;
  background:#fff;border:2px solid #000;color:#000;font-size:12px;margin:14px auto}
.tw-brokenimg .x{color:var(--red);font-size:30px;font-weight:bold}

/* ===================================================================== *
 * Pagination
 * ===================================================================== */
.tw-pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.tw-pager .page-numbers{display:inline-block;padding:5px 10px;text-decoration:none;color:var(--navy);background:var(--silver);
  font-weight:bold;border:2px solid;border-color:#fff var(--silver-dk) var(--silver-dk) #fff}
.tw-pager .page-numbers.current{background:var(--navy);color:#fff}

/* ===================================================================== *
 * Utilitaires d'accessibilité
 * ===================================================================== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.tw-skip{position:absolute;left:-9999px;top:auto}
.tw-skip:focus{left:8px;top:8px;z-index:999;background:#fff;color:#000;padding:8px}

/* ===================================================================== *
 * Responsive
 * ===================================================================== */
@media (max-width:820px){
  .tw-cols{grid-template-columns:1fr}
  .tw-single-head{grid-template-columns:1fr}
  .tw-single-shot{max-width:420px;margin:0 auto}
  .tw-logo{font-size:22px}
  .tw-related{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:15px}
  .tw-cat-grid{grid-template-columns:1fr}
  .tw-rankrow{grid-template-columns:40px 1fr;}
  .tw-rk-shot{grid-column:1 / -1;max-width:100%;order:3}
  .tw-rk-main{grid-column:2 / 3}
  .tw-related{grid-template-columns:1fr}
  .tw-logo{font-size:18px;text-shadow:2px 2px 0 var(--hot),4px 4px 0 #000}
  .tw-tagline{font-size:20px}
}

/* Mouvement réduit */
@media (prefers-reduced-motion:reduce){
  .tw-marquee span{animation:none;padding-left:0}
  .tw-new{animation:none}
  *{scroll-behavior:auto}
}