/* ========== THEME ========== */
:root{
  --header-h: 64px;
  --bg:#0b0b10;
  --card:#0f111a;
  --fg:#e5e7eb;
  --muted:#9aa1ad;

  --primary:#7A3CE8;    /* violet */
  --secondary:#E200F7;  /* magenta */
  --accent:#FFCC00;     /* or */

  --glass: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.12);

  --radius-s:.6rem;
  --radius-m:1rem;
  --radius-l:1.25rem;

  --shadow-1: 0 6px 20px rgba(0,0,0,.20);
  --shadow-2: 0 10px 40px rgba(0,0,0,.25);
}

[data-theme="light"]{
  --bg:#ffffff;
  --card:#ffffff;
  --fg:#0a0a0a;
  --muted:#6b7280;

  --glass: rgba(0,0,0,.04);
  --glass-border: rgba(0,0,0,.10);
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  -webkit-text-size-adjust:100%;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(122,60,232,.25), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(226,0,247,.20), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family:"Inter","Poppins",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}
body.drawer-open{ overflow:hidden }
input, select, textarea{ font-size:16px; }
img{ max-width:100%; height:auto; display:block }
a{ color:var(--primary); text-decoration:none }
a:hover{ text-decoration:underline }

.container{ max-width:1024px; margin:0 auto; padding:1.6rem 1rem 2.6rem }

/* Utilities */
.blur{ backdrop-filter: blur(10px) }
.glass{
  border:1px solid var(--glass-border);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:var(--radius-l);
  box-shadow: var(--shadow-2);
}

/* ========== HEADER (glassy) ========== */
.site-header{
  position:sticky; top:0; z-index:60;
  min-height:var(--header-h);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  background:color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom:1px solid var(--glass-border);
}
.site-header .wrap{
  max-width:1100px; margin:0 auto;
  display:flex; flex-direction:column;
  gap:.75rem; padding:.6rem 1rem 1.2rem;
}
.header-bar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:.75rem;
}
.menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border-radius:.8rem;
  border:1px solid var(--glass-border);
  background:var(--glass);
  color:var(--fg);
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.menu-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.28);
  background:color-mix(in srgb, var(--glass) 80%, transparent);
}
.menu-btn-box{
  position:relative;
  width:18px; height:12px;
  display:inline-flex; flex-direction:column;
  justify-content:space-between;
}
.menu-btn-box span{
  display:block; height:2px; border-radius:999px;
  background:currentColor;
}
.brand{
  display:inline-flex; align-items:center;
  font-weight:800; letter-spacing:.2px; font-size:1.05rem; color:var(--fg);
  text-decoration:none;
}
.brand img{height:28px; width:auto; display:block}
.header-actions{
  display:flex; align-items:center; justify-content:flex-end;
  gap:.55rem; flex-wrap:nowrap;
  justify-self:end;
}
.header-actions .search{
  flex:0 1 230px;
  min-width:160px;
  max-width: min(230px, 60vw);
}
.site-nav{
  display:none;
}
.site-nav a{
  position:relative; padding:.45rem .75rem; border-radius:.7rem;
  color:var(--fg); border:1px solid var(--glass-border); background:var(--glass);
  transition:transform .15s ease, border-color .15s ease, opacity .15s ease;
  opacity:.9; display:inline-flex; align-items:center; justify-content:center;
}
.site-nav a:hover{
  opacity:1; text-decoration:none; transform:translateY(-1px);
  border-color:rgba(255,255,255,.25);
}

/* Mega-menu A–Z (desktop) */
.nav-item.has-mega{ position:relative }
.nav-link{
  display:inline-block; padding:.45rem .75rem;
  border:1px solid var(--glass-border); border-radius:.7rem;
  background:var(--glass); color:var(--fg);
}
.site-drawer{
  position:fixed;
  inset:0;
  background:rgba(4,6,12,.82);
  backdrop-filter: saturate(140%) blur(24px);
  -webkit-backdrop-filter: saturate(140%) blur(24px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:90;
}
.site-drawer.open{
  opacity:1;
  pointer-events:auto;
}
.drawer-panel{
  position:absolute;
  inset:0 auto 0 0;
  width:min(85vw, 320px);
  background:color-mix(in srgb, var(--card) 88%, rgba(14, 14, 30, .9));
  border-right:1px solid var(--glass-border);
  box-shadow:var(--shadow-2);
  padding:1.4rem 1.25rem;
  transform:translateX(-12px);
  opacity:0;
  transition:transform .25s ease, opacity .2s ease;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.site-drawer.open .drawer-panel{
  transform:translateX(0);
  opacity:1;
}
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.drawer-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:.8rem;
  border:1px solid var(--glass-border);
  background:var(--glass);
  color:var(--fg);
  font-size:1.1rem;
  cursor:pointer;
}
.drawer-search{
  position:relative;
  margin-top:.4rem;
}
.drawer-search input{
  width:100%;
  padding:.65rem .9rem;
  border-radius:.9rem;
  border:1px solid var(--glass-border);
  background:var(--glass);
  color:var(--fg);
}
.drawer-search .search-results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + .3rem);
}
.drawer-nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.5rem;
}
.drawer-nav a{
  display:block;
  padding:.75rem 1rem;
  border-radius:.9rem;
  border:1px solid var(--glass-border);
  background:var(--glass);
  color:var(--fg);
  font-weight:600;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.drawer-nav a:hover{
  text-decoration:none;
  transform:translateX(2px);
  border-color:rgba(255,255,255,.24);
  background:color-mix(in srgb, var(--glass) 80%, transparent);
}
.drawer-brand img{height:24px}

@media (min-width:900px){
  .site-header .wrap{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:.75rem;
    padding:.55rem 1rem;
  }
  .header-bar{
    display:contents;
  }
  .menu-btn{ display:none }
  .site-nav{
    display:flex;
    gap:.8rem;
    justify-content:center;
    align-items:center;
  }
  .header-actions .search{
    max-width:320px;
    flex:0 1 280px;
  }
  .site-drawer{ display:none }
}

.mega-az{
  position:absolute; left:50%; top:100%;
  transform: translateX(-50%) scale(.98);
  opacity:0; pointer-events:none;
  width:min(680px, 92vw);
  padding:.6rem .75rem .75rem; border-radius:var(--radius-l);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
  display:grid; grid-template-columns:repeat(13,1fr); gap:.4rem;
  transition: opacity .15s ease, transform .15s ease;
}
.mega-az-item{
  display:flex; align-items:center; justify-content:center;
  padding:.5rem 0; border-radius:.6rem;
  border:1px solid var(--glass-border); background:var(--card); color:var(--fg);
}
.mega-az-item:hover{ border-color: rgba(255,255,255,.25); text-decoration:none }
.has-mega:hover .mega-az,
.has-mega:focus-within .mega-az,
.mega-az:hover{ opacity:1; pointer-events:auto; transform: translateX(-50%) scale(1) }
@media (max-width:900px){ .has-mega .mega-az{ display:none } }

/* Header actions + search */
.icon-btn{
  border:1px solid var(--glass-border); background:var(--glass);
  border-radius:.6rem; padding:.35rem .6rem; cursor:pointer; line-height:1;
}
.search{position:relative; min-width:160px; flex:0 1 230px}
.search input[type=search]{
  width:100%; padding:.5rem .7rem .5rem 2rem;
  border-radius:.8rem; border:1px solid var(--glass-border);
  background:var(--glass); color:var(--fg);
}
.search::before{
  content:"🔎"; position:absolute; left:.5rem; top:.42rem; opacity:.7; pointer-events:none;
}
.search-results{
  position:absolute; left:0; right:0; top:calc(100% + .3rem);
  background:var(--bg); border:1px solid var(--glass-border); border-radius:.8rem;
  box-shadow:0 6px 24px rgba(0,0,0,.18); max-height:60vh; overflow:auto;
  padding:.35rem; display:block;
}
.search-results[hidden]{display:none}
.res{ display:block; padding:.6rem .8rem; color:var(--fg) }
.res + .res{ border-top:1px solid var(--glass-border) }

@media (max-width:700px){
  .site-header .wrap{
    padding:.55rem .85rem 1rem;
  }
  .header-actions .search{
    display:none;
  }
  .drawer-search{ margin-top:.5rem }
}

/* ========== BARRE A–Z collante ========== */
.az-bar{
  position: sticky; top: var(--header-h); z-index:45;
  display:flex; gap:.25rem; padding:.35rem .75rem;
  overflow-x:auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  background: linear-gradient(180deg, rgba(0,0,0,.25), transparent), var(--bg);
  border-bottom:1px solid var(--glass-border);
}
.az-bar::-webkit-scrollbar{ display:none }
.az-item{
  flex:0 0 auto; min-width:2.2rem; min-height:2.2rem;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; letter-spacing:.2px;
  padding:.3rem .55rem; border-radius:.6rem;
  border:1px solid var(--glass-border); background:var(--glass); color:var(--fg);
  scroll-snap-align:center;
  transition: border-color .15s ease, transform .12s ease, box-shadow .12s ease;
}
.az-item:hover{ border-color:rgba(255,255,255,.25); text-decoration:none; transform:translateY(-1px) }
.az-item:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(122,60,232,.35); border-color:transparent;
}
.az-item.active{
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(122,60,232,.25);
}
@media (min-width:900px){ .az-bar{ justify-content:center } }

/* ========== HERO ========== */
.hero{ margin-top:1.1rem; padding:2.1rem 1.2rem; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; color:#fff; padding:.3rem .6rem; border-radius:999px;
  background:linear-gradient(90deg, var(--secondary), var(--primary));
  box-shadow:0 0 20px rgba(226,0,247,.35);
}
.sync-word{ font-family:"Poppins",sans-serif; font-size:2.4rem; margin:.6rem 0 0 }
.tag{ color:var(--muted); margin:.4rem 0 1.2rem }

.cta-row{ display:flex; gap:.75rem; flex-wrap:wrap }
.btn-primary{
  background:linear-gradient(90deg, var(--primary), var(--secondary)); color:white; border:0;
  padding:.7rem 1rem; border-radius:.8rem; font-weight:700; box-shadow:0 8px 30px rgba(122,60,232,.35);
}
.btn-ghost{
  border:1px solid var(--glass-border); padding:.7rem 1rem; border-radius:.8rem; color:var(--fg); background:var(--glass);
}

/* Hero grid (2 colonnes desktop) */
.hero-grid{
  display:grid; grid-template-columns: 1.6fr 1fr; gap:1.25rem; align-items:start;
}
.hero-right{
  border:1px solid var(--glass-border); border-radius:var(--radius-l);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:1rem 1.1rem;
}
.hero-right h3{ margin:.2rem 0 .4rem; font-family:"Poppins",sans-serif }
.hero-right p{ margin:0 0 .6rem; color:var(--fg) }
.hero-points{ margin:.2rem 0 0 1.1rem; color:var(--muted) }
@media (max-width:900px){
  .hero-grid{ display:block }
  .hero-right{ margin-top:1rem }
}

/* ========== SECTIONS / CARDS ========== */
.section{ margin:2.5rem 0 }
.section-title{ font-size:1.25rem; font-weight:800; font-family:"Poppins",sans-serif; margin:0 0 1rem }

.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem }
.card{
  border:1px solid var(--glass-border); border-radius:var(--radius-m); padding:1rem; background:var(--card);
}

/* Triad “Nouveau / Populaire / Aléatoire” */
.triad{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1rem }
.pill{ position:relative; padding-top:1.2rem }
.pill::before{
  content:""; position:absolute; inset:0 auto auto 0; height:6px; width:100%;
  border-radius:12px 12px 0 0;
}
.pill-new::before{ background:var(--primary); }
.pill-pop::before{ background:var(--secondary); }
.pill-rand::before{ background:var(--accent); }
.triad-slot{ margin-top:.4rem }
.triad-link{ font-weight:700; color:var(--primary); text-decoration:none }
.triad-ex{ color:var(--muted); margin:.25rem 0 0 }

/* ========== LETTERS & WORDS LISTS ========== */
.letters{ display:grid; grid-template-columns:repeat(13,1fr); gap:.5rem }
@media (max-width:900px){ .letters{ grid-template-columns:repeat(8,1fr) } }
.letter{
  text-align:center; padding:.6rem 0; border:1px solid var(--glass-border);
  border-radius:var(--radius-s); color:var(--fg); background:var(--glass);
}

.word-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.5rem }
.word-grid .word{
  display:block; padding:.6rem .7rem; border:1px solid var(--glass-border); border-radius:var(--radius-s);
  color:var(--fg); background:var(--card);
}

/* ========== WORD PAGE ========== */
.word-page{
  max-width: 70ch; margin: 2rem auto;
  background: var(--card); padding: 1.25rem;
  border-radius: var(--radius-m); border:1px solid var(--glass-border);
}
.word-title{ font-family:"Poppins",sans-serif; font-size:2rem; margin:0 0 .5rem }
.btn-fav{
  margin:.75rem 0; padding:.45rem .75rem; border-radius:.6rem;
  border:1px solid var(--glass-border); background:var(--glass); color:var(--fg); cursor:pointer;
}
.btn-fav.active{ background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#fff; border-color:transparent }

/* ========== 404 PAGE ========== */
.error-hero{
  position:relative;
  padding:clamp(2.4rem, 6vw, 3.6rem);
  border-radius:var(--radius-l);
  border:1px solid var(--glass-border);
  background:linear-gradient(140deg, rgba(122,60,232,.28), rgba(11,12,24,.92) 36%, rgba(226,0,247,.18));
  box-shadow:var(--shadow-2);
  overflow:hidden;
  isolation:isolate;
}
.error-hero::before,
.error-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  opacity:.55;
}
.error-hero::before{
  width:320px; height:320px;
  left:-140px; top:-150px;
  background:radial-gradient(circle at center, rgba(255,204,0,.55), transparent 68%);
}
.error-hero::after{
  width:280px; height:280px;
  right:-140px; bottom:-180px;
  background:radial-gradient(circle at center, rgba(122,60,232,.45), transparent 72%);
}
.error-label{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .9rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  color:color-mix(in srgb, var(--accent) 85%, #ffffff 20%);
  font-weight:700;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.error-title{
  font-family:"Poppins",sans-serif;
  font-size:clamp(2.4rem, 6vw, 3.6rem);
  line-height:1.12;
  margin:1.3rem 0 .7rem;
}
.error-copy{
  max-width:60ch;
  margin:0 0 1.9rem;
  color:color-mix(in srgb, var(--fg) 85%, var(--muted) 25%);
}
.error-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.error-actions .btn-primary,
.error-actions .btn-ghost{
  min-width:200px;
  justify-content:center;
  text-align:center;
}
.error-actions #btnRandom[disabled]{
  opacity:.55;
  cursor:wait;
}
.error-tip{
  margin:1.4rem 0 0;
  color:var(--muted);
  font-size:.95rem;
}
.error-suggestions{
  display:grid;
  gap:1.5rem;
  margin:3rem 0 0;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.error-card{
  position:relative;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-l);
  padding:1.8rem;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.error-card::before{
  content:"";
  position:absolute;
  inset:-38% auto auto -32%;
  width:220px; height:220px;
  background:radial-gradient(circle at center, rgba(226,0,247,.18), transparent 70%);
  pointer-events:none;
  opacity:.6;
}
.error-card h2{
  font-family:"Poppins",sans-serif;
  font-size:1.35rem;
  margin:0 0 .6rem;
}
.error-card p{
  margin:0 0 1.2rem;
  color:color-mix(in srgb, var(--fg) 82%, var(--muted) 15%);
}
.error-az{
  display:grid;
  gap:.45rem;
  grid-template-columns:repeat(auto-fill, minmax(48px, 1fr));
}
.error-az a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 0;
  border-radius:.75rem;
  border:1px solid var(--glass-border);
  background:var(--glass);
  color:var(--fg);
  font-weight:700;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.error-az a:hover{
  text-decoration:none;
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--primary) 60%, transparent);
  background:color-mix(in srgb, var(--glass) 60%, transparent);
}
.error-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.65rem;
}
.error-links li{
  position:relative;
  padding-left:1.3rem;
}
.error-links li::before{
  content:"→";
  position:absolute;
  left:0; top:0;
  color:var(--secondary);
  font-weight:700;
  opacity:.8;
}
.error-links a{
  color:var(--fg);
  font-weight:600;
}
.error-links a:hover{
  text-decoration:underline;
}
@media (max-width:900px){
  .error-hero{
    padding:2.2rem 1.6rem 2.4rem;
  }
  .error-hero::before{
    left:-160px; top:-170px;
  }
  .error-hero::after{
    right:-160px; bottom:-200px;
  }
}
@media (max-width:600px){
  .error-actions .btn-primary,
  .error-actions .btn-ghost{
    width:100%;
  }
.error-tip{ font-size:.9rem }
}

/* ========== PWA PROMPT ========== */
.pwa-install{
  position:fixed;
  left:50%; bottom:1rem;
  transform:translate(-50%, 120%);
  padding:.7rem 1.4rem;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:linear-gradient(120deg, rgba(122,60,232,.55), rgba(226,0,247,.28));
  color:var(--fg);
  box-shadow:var(--shadow-1);
  font-weight:600;
  letter-spacing:.01em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor:pointer;
  transition:transform .25s ease, opacity .2s ease;
  z-index:95;
}
.pwa-install.show{
  transform:translate(-50%, 0);
}
.pwa-install:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset:3px;
}
.pwa-install[disabled]{
  opacity:.6;
  cursor:wait;
}

/* ========== FOOTER ========== */
.site-footer{
  margin-top:4rem; padding:2.5rem 1rem; border-top:1px solid var(--glass-border);
  background:var(--glass); text-align:center
}
.site-footer .newsletter{max-width:720px;margin:0 auto 1.5rem}
.site-footer .newsletter .funny{opacity:.9;margin:.25rem 0 1rem}
.nl-form{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap}
.nl-form input[type="email"]{padding:.65rem .9rem;border-radius:.8rem;border:1px solid var(--glass-border);background:var(--bg);color:var(--fg);min-width:260px}
.nl-form .honeypot{position:absolute;left:-9999px}
.socials{display:flex;gap:.75rem;justify-content:center;margin:1rem 0}
.socials .social{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass)}
.socials .social svg{width:20px;height:20px;fill:currentColor;opacity:.9}
.footer-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:1rem 0}
.disclaimer{opacity:.9;margin:.25rem 0 .25rem}
.copy{opacity:.6;margin:.25rem 0 0}
.legal{ color:var(--muted); margin:.5rem 0 0 }

/* ========== MISC ========== */
.resume-link{margin-left:.5rem;opacity:.9}
@media (max-width:700px){
  .sync-word{ font-size:2rem }
  .container{ padding:1.5rem 1rem }
}