/* ==========================================================================
   Ozone Groupe ™ — Accueil, style « Webflow » : net, aéré, très lisible.
   Chargé EN DERNIER et uniquement sur index.html (tout est scopé sur body.home) :
   les autres pages (légal, ajouter, zenode, dashboard) ne changent pas.
   Thèmes clair / sombre : mêmes variables, même bouton qu'avant.
   ========================================================================== */

/* ---------- Jetons ---------- */
html body.home {
  --font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max: 1160px;
  --radius: 10px;
  --radius-lg: 20px;

  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  --card: #f7f7f7;
  --card-hover: #ffffff;
  --line: #e9e9e9;
  --line-strong: #d9d9d9;
  --text: #0a0a0a;
  --muted: #616161;
  --muted-soft: #949494;
  --white: #0a0a0a;

  --g: #0a0a0a;
  --g-dark: #2b2b2b;
  --g-soft: #f2f2f2;
  --g-line: #d4d4d4;
  --ink: #0a0a0a;

  --h-glass: rgba(255, 255, 255, .78);
  --h-shadow: 0 1px 2px rgba(18, 18, 18, .04), 0 12px 32px -12px rgba(18, 18, 18, .14);
  --h-grid: rgba(18, 18, 18, .055);
}

html[data-theme="dark"] body.home {
  --bg: #0a0a0a;
  --bg-soft: #0e0e0e;
  --card: #111111;
  --card-hover: #141414;
  --line: #222222;
  --line-strong: #2d2d2d;
  --text: #eaeaea;
  --muted: #9f9f9f;
  --muted-soft: #767676;
  --white: #f6f6f6;

  --g: #ffffff; --on-g: #0a0a0a;
  --g-dark: #e5e5e5;
  --g-soft: #131313;
  --g-line: #2a2a2a;
  --ink: #f2f2f2;

  --h-glass: #111111;
  --h-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -14px rgba(0, 0, 0, .6);
  --h-grid: rgba(255, 255, 255, .05);
}

body.home {
  position: relative;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "ss01", "cv11";
}
body.home ::selection { background: var(--g); color: var(--on-g, #ffffff); }
body.home :focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }

/* Petits smileys texte : trop « chat » pour un rendu pro, masqués sur l'accueil */
body.home .emo { display: none; }

/* ---------- Fond du hero : halo vert + grille fine qui s'estompe ---------- */
body.home .bg-glow {
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  height: 760px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--g) 16%, transparent), transparent 70%),
    linear-gradient(var(--h-grid) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--h-grid) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(#000000 35%, transparent 96%);
  mask-image: linear-gradient(#000000 35%, transparent 96%);
}
body.home .bg-grid { display: none; }

/* ---------- En-tête ---------- */
html body.home .site-header,
html[data-theme="dark"] body.home .site-header {
  background: var(--h-glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
body.home .site-header .nav,
body.home .site-header.is-scrolled .nav { height: 68px; max-width: var(--max); }
body.home .site-header.is-scrolled .nav { height: 62px; }
body.home .brand { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
body.home .brand .mark { width: 32px; height: 32px; padding: 6px; border-radius: 9px; background: var(--ink); }
html[data-theme="dark"] body.home .brand .mark { background: #000; }

html body.home .nav-links ul { gap: 2px; }
html body.home .nav-link,
html[data-theme="dark"] body.home .nav-link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
}
html body.home .nav-link:hover,
html[data-theme="dark"] body.home .nav-link:hover { background: var(--bg-soft); color: var(--text); }
body.home .nav-discord { font-size: 14.5px; font-weight: 500; }
html body.home .theme-btn { border-radius: 8px; background: transparent; }
html body.home .theme-btn:hover { background: var(--bg-soft); }
html body.home .nav-toggle,
html[data-theme="dark"] body.home .site-header .nav-toggle { border-radius: 8px; background: transparent; }

/* ---------- Boutons ---------- */
body.home .btn {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -0.005em;
  box-shadow: none;
}
body.home .btn-sm { padding: 9px 16px; font-size: 14px; }
html body.home .btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
html body.home .btn-primary:hover {
  background: var(--g);
  border-color: var(--g);
  color: var(--on-g, #ffffff);
  transform: none;
  box-shadow: none;
}
html body.home .btn-ghost,
html[data-theme="dark"] body.home .btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
html body.home .btn-ghost:hover,
html[data-theme="dark"] body.home .btn-ghost:hover { background: var(--bg-soft); border-color: var(--muted-soft); transform: none; }
html[data-theme="dark"] body.home .btn-primary { color: #0a0a0a; }
html[data-theme="dark"] body.home .btn-primary:hover { color: #0a0a0a; }

/* ---------- Hero ---------- */
body.home .hero { padding: clamp(84px, 12vw, 148px) 0 clamp(72px, 10vw, 120px); }
body.home .hero h1 {
  max-width: 960px;
  margin: 0 auto;
  font-size: clamp(42px, 8.2vw, 92px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.048em;
}
body.home .hero h1 .tm { font-size: 0.24em; font-weight: 500; color: var(--muted-soft); }
body.home .hero p {
  max-width: 560px;
  margin-top: 28px;
  font-size: clamp(16.5px, 2.2vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}
body.home .hero-actions { margin-top: 40px; gap: 12px; }

/* ---------- Sections ---------- */
body.home .section { padding: clamp(72px, 9vw, 120px) 0; }
body.home hr.divider { display: none; }
body.home .section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
body.home .section-head h2,
body.home .eng-intro h2 {
  margin-top: 16px;
  font-size: clamp(32px, 4.8vw, 54px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.04em;
}
body.home .section-head p { margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 56ch; }

/* ---------- Cartes des bots ---------- */
body.home .bots-grid { gap: 20px; }
html body.home .bot-card,
html[data-theme="dark"] body.home .bot-card {
  gap: 18px;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
html body.home .bot-card:hover,
html[data-theme="dark"] body.home .bot-card:hover {
  background: var(--card-hover);
  border-color: var(--line-strong);
  box-shadow: var(--h-shadow);
  transform: translateY(-3px);
}
body.home .bot-card::after { display: none; }
html body.home .bot-avatar,
html[data-theme="dark"] body.home .bot-avatar {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: none;
}
body.home .bot-card:hover .bot-avatar { transform: none; border-color: var(--line-strong); }
html body.home .pill,
html[data-theme="dark"] body.home .pill {
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--g-line);
  background: var(--g-soft);
  color: var(--g-dark);
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}
html body.home .pill .dot { background: var(--g); }
body.home .bot-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.35; }
body.home .bot-card p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
body.home .bot-tags { gap: 6px; }
body.home .bot-tags span {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
body.home .bot-card:hover .bot-tags span { border-color: var(--line); color: var(--muted); }
/* Bouton de carte : discret au repos, plein au survol de la carte */
html body.home .bot-card .btn-primary {
  margin-top: 6px;
  background: var(--bg);
  color: var(--text);
  border-color: var(--line-strong);
}
html body.home .bot-card:hover .btn-primary,
html body.home .bot-card .btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
html[data-theme="dark"] body.home .bot-card .btn-primary { background: var(--bg); color: var(--text); }
html[data-theme="dark"] body.home .bot-card:hover .btn-primary,
html[data-theme="dark"] body.home .bot-card .btn-primary:hover { background: var(--ink); color: #0a0a0a; }

/* Entrée au scroll : plus sobre (opacité + glissement, sans rotation ni flou) */
.js body.home .bot-card[data-scroll],
.js body.home .bot-card[data-scroll]:nth-child(even) {
  opacity: calc(var(--p, 1));
  translate: 0 calc((1 - var(--p, 1)) * 32px);
  scale: none;
  rotate: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .js body.home .bot-card[data-scroll] { opacity: 1; translate: none; }
}

/* ---------- Statistiques ---------- */
body.home .kpi-grid { gap: 12px; }
html body.home .kpi,
html[data-theme="dark"] body.home .kpi {
  padding: 24px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
}
body.home .kpi::after { display: none; }
body.home .kpi:hover { transform: none; border-color: var(--line-strong); }
body.home .kpi-ico { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 20px; background: var(--g-soft); color: var(--g-dark); }
body.home .kpi strong { font-size: clamp(28px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.04em; }
body.home .kpi-label { margin-top: 6px; font-size: 14px; }
html body.home .stat-panel,
html[data-theme="dark"] body.home .stat-panel { padding: 28px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
body.home .stat-panel h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
body.home .bb-track { height: 6px; border: 0; background: var(--line); }

/* ---------- Engagements ---------- */
body.home .eng { gap: clamp(32px, 6vw, 80px); }
body.home .eng-intro p { margin: 20px 0 28px; font-size: 17px; line-height: 1.6; max-width: 38ch; }
html body.home .eng-item,
html[data-theme="dark"] body.home .eng-item {
  padding: 28px;
  gap: 22px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: none;
}
body.home .eng-item:hover { transform: none; border-color: var(--line-strong); box-shadow: var(--h-shadow); background: var(--card-hover); }
body.home .eng-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--g-soft); color: var(--g-dark); }
body.home .eng-item:hover .eng-ico { background: var(--g); color: var(--on-g, #ffffff); }
body.home .eng-num { font-size: 13px; letter-spacing: 0; font-weight: 500; }
body.home .eng-body h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.025em; }
body.home .eng-body p { font-size: 15.5px; line-height: 1.65; }
body.home .eng-points { gap: 6px; }
body.home .eng-points li { border-radius: 6px; background: var(--bg); font-weight: 500; }
body.home .eng-proof strong { font-size: 22px; font-weight: 600; }

/* ---------- Développeurs ---------- */
html body.home .dev-card,
html[data-theme="dark"] body.home .dev-card { border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: none; }
body.home .dev-card:hover { transform: none; border-color: var(--line-strong); box-shadow: var(--h-shadow); }
html body.home .aj-team li,
html[data-theme="dark"] body.home .aj-team li { border-radius: 12px; background: var(--card); font-weight: 550; }

/* ---------- Bandeau final : bloc encre, très contrasté ---------- */
html body.home .cta,
html[data-theme="dark"] body.home .cta {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 112px) clamp(24px, 5vw, 56px);
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--g) 34%, transparent), transparent 70%),
    #121212;
  color: #ffffff;
}
html[data-theme="dark"] body.home .cta { border: 1px solid var(--line); background:
    radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--g) 26%, transparent), transparent 70%),
    #161616; }
body.home .cta h2 { color: #ffffff; font-size: clamp(32px, 5vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
body.home .cta p { max-width: 520px; margin-top: 20px; font-size: 17.5px; color: rgba(255, 255, 255, .72); }
body.home .cta .hero-actions { margin-top: 36px; }
html body.home .cta .btn-primary { background: #ffffff; border-color: #ffffff; color: #0a0a0a; }
html body.home .cta .btn-primary:hover { background: var(--g-soft); border-color: var(--g-soft); color: #0a0a0a; }
html body.home .cta .btn-ghost,
html[data-theme="dark"] body.home .cta .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .28); color: #ffffff; }
html body.home .cta .btn-ghost:hover,
html[data-theme="dark"] body.home .cta .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }

/* ---------- Pied de page ---------- */
html body.home .site-footer,
html[data-theme="dark"] body.home .site-footer {
  margin-top: 64px;
  padding: 72px 0 40px;
  background: var(--card);
  border-top: 1px solid var(--line);
}
body.home .footer-grid { gap: 48px; }
body.home .footer-grid h4 { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); margin-bottom: 16px; }
body.home .footer-grid a { font-size: 15px; background-image: none; }
body.home .footer-grid a:hover { color: var(--g-dark); }
body.home .footer-brand p { font-size: 15px; line-height: 1.65; }
body.home .footer-bottom { margin-top: 56px; font-size: 13.5px; }

/* ---------- Menu mobile ---------- */
html body.home .drawer-panel,
html[data-theme="dark"] body.home .drawer-panel { background: var(--bg); border-left: 1px solid var(--line); }
html body.home .drawer-backdrop,
html[data-theme="dark"] body.home .drawer-backdrop { background: rgba(18, 18, 18, .45); }
body.home .drawer-link { color: var(--text); font-weight: 550; }
body.home .drawer-link::after { color: var(--muted-soft); }
html body.home .site-header.menu-open .nav,
html[data-theme="dark"] body.home .site-header.menu-open .nav { background: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  body.home .bot-card { padding: 26px; }
  body.home .bg-glow { height: 620px; }
}
@media (max-width: 640px) {
  body.home .site-header .nav,
  body.home .site-header.is-scrolled .nav { height: 60px; }
  body.home .hero { padding-top: 64px; }
  body.home .section-head p,
  body.home .eng-intro p { font-size: 16.5px; }
  body.home .cta { border-radius: 22px; }
}
/* Ozone Groupe ™ — refonte de l'accueil, style « Webflow » : toile claire, typographie XXL, filets fins, bento. */
body.home{--ease:cubic-bezier(.22,1,.36,1);--pad:clamp(72px,10vw,128px);--max:1200px;font-family:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;line-height:1.55;background:var(--bg)}
body.home .emo{display:none}
body.home .site-header{background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
body.home .nav-link{font-weight:500;font-size:14.5px}
body.home .btn{height:46px;padding:0 22px;border-radius:8px;font-weight:500;font-size:15px;letter-spacing:-.01em;transition:background .25s var(--ease),border-color .25s,box-shadow .25s}
body.home .btn-sm{height:38px;padding:0 16px;font-size:14px}
body.home .btn svg{transition:transform .25s var(--ease)}
body.home .btn:hover svg{transform:translate(2px,-2px)}
body.home .btn-primary:hover{box-shadow:0 10px 28px -12px var(--g)}
body.home h1,body.home h2{font-weight:600;letter-spacing:-.04em;text-wrap:balance}

/* Hero */
.wf-hero{position:relative;text-align:center;padding-top:clamp(80px,12vw,152px);padding-bottom:var(--pad)}
.wf-hero::before{content:"";position:absolute;inset:0 -40vw;z-index:-1;background:radial-gradient(60% 50% at 50% 0,var(--g-soft),transparent 70%);opacity:.6;pointer-events:none}
.wf-hero h1{font-size:clamp(44px,8vw,104px);line-height:1;max-width:14ch;margin:0 auto}
.wf-hero h1 .tm{font-size:.3em;vertical-align:super;letter-spacing:0;font-weight:500;opacity:.5}
.wf-hero>p{max-width:580px;margin:28px auto 0;font-size:clamp(17px,1.6vw,20px);color:var(--muted);text-wrap:pretty}
.wf-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}

/* Sections */
.wf-section,body.home .section{padding-block:var(--pad)}
body.home .section-head{max-width:720px;margin:0 auto clamp(48px,6vw,72px);text-align:center}
body.home .section-head h2{font-size:clamp(32px,4.8vw,60px);line-height:1.04}
body.home .section-head p{margin-top:18px;font-size:18px;color:var(--muted);text-wrap:pretty}

/* Bento bots */

/* Engagements */
.wf-trio{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wf-pillar{display:flex;flex-direction:column;padding:32px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.wf-num{font-size:13px;font-weight:500;color:var(--g-dark);letter-spacing:.04em}
.wf-pillar h3{margin:14px 0 12px;font-size:28px;font-weight:600;letter-spacing:-.035em}
.wf-pillar p{color:var(--muted);line-height:1.6}
.wf-pillar p a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.wf-pillar ul{list-style:none;margin:22px 0;display:grid;gap:10px;font-size:15px;font-weight:500}
.wf-pillar ul li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--g);vertical-align:middle}
.wf-proof{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:10px}
.wf-proof strong{font-size:30px;font-weight:600;letter-spacing:-.04em}
.wf-proof span{color:var(--muted);font-size:14px}
.wf-more{margin-top:40px;text-align:center}

/* Stats & équipe (balisage d'origine, habillage unifié) */
body.home .kpi,body.home .stat-panel{border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:none}
body.home .kpi strong{font-weight:600;letter-spacing:-.04em}
body.home .aj-team{justify-content:center}

/* CTA */
.wf-final{padding-bottom:var(--pad)}
.wf-cta{width:100%;padding:clamp(72px,10vw,128px) clamp(24px,5vw,64px);border-radius:0;background:#0c0c0c;text-align:center;background-image:radial-gradient(50% 80% at 50% 0,rgba(125, 125, 125,.28),transparent 70%)}
.wf-cta h2{color:#ffffff;font-size:clamp(34px,5.4vw,68px);line-height:1.03;max-width:14ch;margin:0 auto}
.wf-cta p{color:rgba(255, 255, 255,.66);max-width:520px;margin:20px auto 0;font-size:18px}
.wf-cta .btn-ghost{background:transparent;color:#ffffff;border-color:rgba(255, 255, 255,.24)}
.wf-cta .btn-ghost:hover{background:rgba(255, 255, 255,.08);border-color:rgba(255, 255, 255,.45)}

/* Footer */
.wf-foot{background:var(--card);border-top:1px solid var(--line);padding-top:72px}
.wf-foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.wf-foot-grid p{margin-top:16px;max-width:340px;color:var(--muted);font-size:15px}
.wf-foot h4{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:14px}
.wf-foot ul{list-style:none;display:grid;gap:10px}
.wf-foot li a{font-size:14.5px;color:var(--text);transition:color .2s}
.wf-foot li a:hover{color:var(--g-dark)}
.wf-foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:64px;padding:24px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

@media(max-width:860px){.wf-bots,.wf-trio{grid-template-columns:1fr}.wf-foot-grid{grid-template-columns:1fr 1fr}.wf-foot-grid>div:first-child{grid-column:1/-1}}
@media(max-width:560px){.wf-card,.wf-pillar{padding:24px;border-radius:20px}.wf-strip{margin-top:48px}}
@media(prefers-reduced-motion:reduce){body.home *{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Hero en deux colonnes : texte à gauche, tableau des bots à droite */
.wf-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;text-align:left;padding-bottom:var(--pad)}
.wf-hero h1{font-size:clamp(40px,5.6vw,80px);max-width:none;margin:0}
.wf-hero .wf-copy>p{max-width:520px;margin:26px 0 0;font-size:clamp(17px,1.5vw,19px);color:var(--muted);text-wrap:pretty}
.wf-hero .wf-actions{justify-content:flex-start}
.wf-tablewrap{border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 30px 60px -40px rgba(35, 35, 35,.35);overflow:hidden}
.wf-table{width:100%;border-collapse:collapse;text-align:left}
.wf-table th{padding:14px 20px;font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);background:var(--bg);border-bottom:1px solid var(--line)}
.wf-table td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.wf-table tr:last-child td{border-bottom:0}
.wf-table tbody tr{transition:background .2s}
.wf-table tbody tr:hover{background:var(--bg)}
.wf-bot{display:flex;align-items:center;gap:14px}
.wf-bot img{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.wf-bot b{display:block;font-weight:600;font-size:16px;letter-spacing:-.02em}
.wf-bot small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.wf-table td:last-child{text-align:right;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:960px){.wf-hero{grid-template-columns:1fr}}
@media(max-width:560px){.wf-table th:nth-child(2),.wf-table td:nth-child(2){display:none}.wf-table td,.wf-table th{padding:14px}}

/* Corrections hero : titre sur 2 lignes propres, statut sur une ligne */
.wf-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.wf-hero h1{font-size:clamp(36px,4.6vw,64px);line-height:1.04;text-wrap:wrap}
.wf-hero h1 .tm{white-space:nowrap}
.wf-table .pill{white-space:nowrap}
.wf-table th:nth-child(2),.wf-table td:nth-child(2){white-space:nowrap}

/* ==========================================================================
   Correctifs responsive + CTA + avatars
   ========================================================================== */

/* 1. Hero : repasse bien en UNE colonne sous 960px (la règle à 2 colonnes juste au-dessus
      écrasait l'ancienne media query, ce qui écrasait le tableau à ~140px sur mobile) */
@media(max-width:960px){
  .wf-hero{grid-template-columns:minmax(0,1fr);gap:40px;text-align:left}
  .wf-hero h1{font-size:clamp(34px,9vw,56px);overflow-wrap:break-word}
  .wf-hero .wf-copy>p{max-width:none}
}
.wf-copy,.wf-tablewrap{min-width:0}

/* 2. Tableau des bots : lignes stables, textes qui ne se cassent plus mot par mot */
.wf-table-scroll,.wf-tablewrap{max-width:100%}
.wf-bot{min-width:0}
.wf-bot img{flex:none;filter:none}
.wf-bot>div{min-width:0}
.wf-bot b{white-space:nowrap}
@media(max-width:560px){
  .wf-table td,.wf-table th{padding:12px 14px}
  .wf-bot{gap:12px}
  .wf-bot img{width:40px;height:40px;border-radius:10px}
  .wf-bot b{font-size:15px}
  .wf-bot small{font-size:12.5px;line-height:1.35}
  .wf-table td:last-child .btn{padding-inline:14px}
  .wf-actions{flex-direction:column;align-items:stretch}
  .wf-actions .btn{justify-content:center;width:100%}
}

/* 3. Avatars : vraies photos de profil, en couleur */
html body.home img[src*="/bots/"],
html[data-theme="dark"] body.home img[src*="/bots/"]{filter:none}

/* 4. Bloc « Prêt à équiper votre serveur ? » : boutons lisibles (le style générique
      de l'accueil, plus spécifique, rendait le texte sombre sur fond noir) */
html body.home .wf-cta .btn-primary,
html[data-theme="dark"] body.home .wf-cta .btn-primary{background:#ffffff;border-color:#ffffff;color:#0a0a0a}
html body.home .wf-cta .btn-primary:hover,
html[data-theme="dark"] body.home .wf-cta .btn-primary:hover{background:#e9e9e9;border-color:#e9e9e9;color:#0a0a0a}
html body.home .wf-cta .btn-ghost,
html[data-theme="dark"] body.home .wf-cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#ffffff}
html body.home .wf-cta .btn-ghost:hover,
html[data-theme="dark"] body.home .wf-cta .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);color:#ffffff}
.wf-cta .wf-actions{margin-top:32px}
@media(max-width:560px){
  .wf-cta h2{max-width:none}
  .wf-cta p{font-size:16px}
  .wf-cta .wf-actions{flex-direction:column;align-items:stretch}
  .wf-cta .btn{justify-content:center;width:100%}
}

/* 5. Sécurité iOS Safari : jamais de glissement horizontal de la page */
html{overflow-x:clip}

body.home .wf-final{padding:0;margin-top:clamp(56px,8vw,96px)}
html[data-theme="dark"] body.home .wf-cta{border:0;border-radius:0}
html[data-theme="dark"] body.home .wf-cta{background-color:var(--bg);background-image:radial-gradient(55% 65% at 50% 55%,rgba(255,255,255,.07),transparent 72%)}

/* En-tête identique sur toutes les pages (même largeur, même hauteur, même logo) */
body.home .site-header .nav{max-width:1120px;height:64px}
body.home .site-header.is-scrolled .nav{max-width:1120px;height:60px}
body.home .brand{font-size:16.5px;font-weight:650}
body.home .brand .mark{width:34px;height:34px;padding:6px;border-radius:8px}
body.home .site-header{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
html body.home .nav-links ul{gap:4px}
html body.home .nav-link,html[data-theme="dark"] body.home .nav-link{padding:7px 14px;font-size:13.5px;letter-spacing:-.005em;line-height:1.6}
body.home .nav-discord{font-size:13.5px}
html body.home .nav-cta .btn{height:auto;padding:9px 18px;font-size:13.5px;font-weight:550;letter-spacing:.01em;line-height:1.6}
body.home{overflow-x:clip}