:root{
  --bg:#0b0f14;
  --text:#e7eef9;
  --muted:#a9b6c7;
  --border:rgba(255,255,255,.12);
  --shadow: 0 14px 40px rgba(0,0,0,.45);
  --radius:16px;
  --max:1100px;
  --logo-invert: 0;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* ===== FOND ANIMÉ BLEU (VISIBLE MAIS PREMIUM) ===== */

body::before{
  content:"";
  position:fixed;
  inset:-40%;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(900px 700px at 25% 30%, rgba(0,140,255,.55), transparent 70%),
    radial-gradient(950px 750px at 75% 35%, rgba(90,140,255,.40), transparent 72%),
    radial-gradient(1000px 800px at 55% 85%, rgba(0,120,255,.25), transparent 74%),
    radial-gradient(800px 600px at 50% 50%, rgba(255,255,255,.08), transparent 70%);

  background-size: 200% 200%;
  background-position: 0% 0%;

  filter: blur(70px) saturate(135%) contrast(110%);
  opacity:1;

  will-change: background-position;
  transform: translateZ(0); /* aide aussi */
  animation: liquidDrift 9s ease-in-out infinite alternate;
}

@keyframes liquidDrift{
  0%   { background-position: 0% 0%; }
  50%  { background-position: 60% 40%; }
  100% { background-position: 100% 100%; }
}

/* ===== STRUCTURE ===== */

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:22px;
  position:relative;
  z-index:1;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(12px);
  background: rgba(11,15,20,.75);
  border-bottom: 1px solid var(--border);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  max-width:var(--max);
  margin:0 auto;
  padding:14px 22px;
}

.brand{display:flex; align-items:center; gap:12px}

.logo-dynamic{
  width:auto;
  display:block;
  filter: invert(var(--logo-invert));
  transition: filter 1s linear;
}

.brand .logo-dynamic{height:26px}
.hero-logo{max-width:260px; width:100%; height:auto; margin-bottom:15px}

/* ===== NAV ===== */

.nav{display:flex; gap:10px; flex-wrap:wrap}
.nav a{
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--muted);
}
.nav a:hover{
  border-color:var(--border);
  color:var(--text);
  background:rgba(255,255,255,.05);
}
.nav a.active{
  border-color:var(--border);
  color:var(--text);
  background:rgba(255,255,255,.08);
}

/* ===== HERO ===== */

.hero{
  margin-top:22px;
  padding:28px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.hero h1{
  margin:0 0 8px 0;
  font-size: clamp(24px, 4vw, 40px);
}
.hero p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

/* ===== GRID & CARDS ===== */

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}

.card{
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}

.card h3{margin:0 0 6px 0}
.card p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

/* ===== INPUTS & TEXTAREA (PLUS VISIBLES) ===== */

textarea,
input,
select{
  width:100%;
  background: rgba(20,25,35,.90);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:12px;
  color:var(--text);
  transition: all .2s ease;
}

textarea::placeholder,
input::placeholder{
  color: rgba(255,255,255,.45);
}

textarea:focus,
input:focus,
select:focus{
  outline:none;
  border-color: rgba(0,140,255,.8);
  box-shadow: 0 0 0 3px rgba(0,140,255,.25);
  background: rgba(20,25,35,.98);
}

/* ===== BOUTONS PREMIUM ===== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, rgba(30,40,60,.95), rgba(20,28,45,.95));
  color:var(--text);
  transition: all .2s ease;
}

.btn:hover{
  background: linear-gradient(145deg, rgba(40,70,120,1), rgba(30,60,110,1));
  border-color: rgba(0,140,255,.9);
  box-shadow: 0 8px 20px rgba(0,140,255,.35);
  transform: translateY(-2px);
}

.btn.secondary{
  background: #ffffff;
}

/* ===== FOOTER ===== */

.footer{
  margin:26px 0 10px 0;
  color:var(--muted);
  border-top:1px solid var(--border);
  padding-top:14px;
  font-size:14px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 860px){
  .grid{grid-template-columns:1fr}
  .topbar-inner{padding:12px 16px}
  .container{padding:16px}
  .brand .logo-dynamic{height:22px}
}

/* ===== LIENS PREMIUM (PLUS DE BLEU/VIOLET) ===== */

a{
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease, opacity .2s ease;
}

/* évite le violet après visite */
a:visited{
  color: inherit;
}

/* liens “contenu” (dans les cards, textes) */
.card a{
  color: rgba(180,200,255,.92);
  font-weight: 600;
}

/* hover élégant */
.card a:hover{
  color: rgba(0,140,255,1);
  text-shadow: 0 0 10px rgba(0,140,255,.35);
}

/* en thème clair : liens plus sobres */
body.light .card a{
  color: rgba(0,90,180,.95);
}

body.light .card a:hover{
  color: rgba(0,120,255,1);
  text-shadow: 0 0 10px rgba(0,120,255,.25);
}

/* ===== THEME CLAIR (STYLE ORIGINAL) ===== */

body.light{
  --bg:#90caf9;
  --text:#222;
  --muted:#666;
  --border:#ececec;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --logo-invert: 1; /* si ton logo est blanc en dark */
}

/* pas de fond animé en clair */
body.light::before{
  content:none !important;
}

/* topbar clair simple */
body.light .topbar{
  background: #e3f2fd;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

/* hero + cards en blanc */
body.light .hero{
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
body.light .card{
  background:#e3f2fd;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}

/* inputs / textarea “classiques” */
body.light textarea,
body.light input,
body.light select{
  background:#fff;
  border:1px solid #ddd;
  color:#222;
}
body.light textarea::placeholder,
body.light input::placeholder{
  color: rgba(0,0,0,.35);
}

/* boutons “classiques” */
body.light .btn{
  background:#fff;
  border:1px solid #ddd;
  color:#222;
  box-shadow:none;
}
body.light .btn:hover{
  background:#f3f3f3;
  border-color:#d7d7d7;
}

/* liens non bleus */
body.light a,
body.light a:visited{
  color: inherit;
}
body.light .card a{
  color:#222;
  font-weight:600;
}
body.light .card a:hover{
  color:#0b5fff;
  text-shadow:none;
}
.char-cell{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  border:1px solid var(--border);
  background:#ffffff;   /* toujours blanc */
  color:#111111;        /* toujours noir */
  border-radius:12px;
  cursor:pointer;
  transition:.2s ease;
}

.char-cell:hover{
  background:#f3f3f3;
  transform:scale(1.05);
}
/* Toast "Copié" */
.copy-toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(20,20,20,.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}
.copy-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}