/* ============================================================================
 * AEXIUM — Social Branding Kit · Thème officiel de la landing aexium.org
 * ----------------------------------------------------------------------------
 * @meta-name        : branding-kit.css
 * @meta-version     : 1.0.0
 * @meta-categorie   : theme / identité visuelle
 * @meta-domaine     : web · landing aexium.org
 * @meta-usage       : chargé APRÈS landing.css — remplace la palette
 *                     violet/doré par l'identité du Social Branding Kit
 *                     (bleu nuit · cyan · bleu électrique · chrome · or antique)
 * @meta-dependances : landing.css (variables :root), themes.css
 * @meta-auteur      : AEXIUM LABS — 2026-10-04
 * ----------------------------------------------------------------------------
 * Palette officielle :
 *   --bg     #040918  bleu nuit profond (fonds)
 *   --cyan   #00d4ff  cyan lumineux (accents techno)
 *   --blue   #2e7dff  bleu électrique (dégradés, glows)
 *   --chrome           argent/chrome (logo, titres)
 *   --gold   #c9a05f  or antique (touches premium)
 * Motifs : hexagones, circuits imprimés, nœuds lumineux.
 * Léger : 100 % CSS vanilla + SVG data-URI inline, zéro framework.
 * ========================================================================== */

:root{
  --bg:#040918;
  --bg2:#071123;
  --ink:#eef3ff;
  --muted:#9db1d4;
  --faint:#5d7194;
  --gold:#c9a05f;
  --gold-soft:rgba(201,160,95,.14);
  --violet:#00d4ff;                 /* le cyan remplace le violet partout */
  --violet-soft:rgba(0,212,255,.12);
  --line:rgba(0,212,255,.12);
  --card:rgba(6,24,52,.55);
  --cyan:#00d4ff;
  --blue:#2e7dff;
  --chrome-hi:#ffffff;
  --chrome-mid:#dbe6fa;
  --chrome-lo:#8fa5c8;
  --hexpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%2300d4ff' stroke-opacity='0.07' stroke-width='1'/%3E%3Ccircle cx='28' cy='0' r='1.6' fill='%2300d4ff' fill-opacity='0.18'/%3E%3Ccircle cx='28' cy='66' r='1.6' fill='%23c9a05f' fill-opacity='0.20'/%3E%3C/svg%3E");
}

/* ---------- fond : bleu nuit + hexagones + circuits ---------- */
body{
  background-color:#040918;
  background-image:
    radial-gradient(1100px 550px at 50% -10%, rgba(0,212,255,.08), transparent 60%),
    radial-gradient(820px 520px at 92% 32%, rgba(46,125,255,.07), transparent 60%),
    radial-gradient(760px 560px at 8% 88%, rgba(0,212,255,.05), transparent 60%),
    var(--hexpat);
  background-attachment:fixed;
}

.halo{
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(0,212,255,.10), transparent 60%),
    radial-gradient(700px 480px at 85% 40%, rgba(201,160,95,.07), transparent 60%),
    radial-gradient(800px 600px at 10% 85%, rgba(46,125,255,.09), transparent 60%);
}

::selection{background:#00d4ff;color:#040918}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#040918}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00d4ff,#2e7dff);border-radius:8px;border:2px solid #040918}

/* ---------- navigation ---------- */
nav.topnav{
  background:rgba(4,9,24,.62);
  border-bottom:1px solid rgba(0,212,255,.14);
}
.brand-name{
  background:linear-gradient(180deg,#ffffff 0%,#dbe6fa 28%,#8fa5c8 48%,#f2f6ff 52%,#a9bedd 72%,#eef3ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.brand-name span{
  background:linear-gradient(180deg,#f3dfae 0%,#c9a05f 55%,#8a6a34 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- hero : titres chromés + tagline officielle ---------- */
h1 .l1,h1 .l2,h1 .l3{
  background:linear-gradient(180deg,#ffffff 0%,#dbe6fa 28%,#8fa5c8 48%,#f2f6ff 52%,#a9bedd 72%,#eef3ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* ── Doctrine des points d'attention (3P) ──────────────────────────────
   Une couleur = un sens. Le cyan ne décore plus : il surligne LE mot qui
   compte dans chaque bloc (souveraineté / "à toi"). Un seul point cyan par
   section, jamais deux. L'or reste cantonnée aux labels (kickers, chiffres,
   icônes). Le chrome porte les titres. ───────────────────────────────── */
.hl{color:#00d4ff;font-weight:600}
/* Point d'attention unique du hero : le mot "machines" */
h1 .l2 .hl{
  background:linear-gradient(180deg,#b5f2ff 0%,#00d4ff 55%,#2e7dff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 22px rgba(0,212,255,.35));
}
.eyebrow{color:var(--gold)}

.ax-tagline{
  margin:26px 0 0;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  font-size:12px;font-weight:700;letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;
  color:#eef3ff;
  text-shadow:0 0 18px rgba(0,212,255,.25);
}
.ax-tagline .sep{
  color:#c9a05f;
  text-shadow:0 0 14px rgba(201,160,95,.9);
  font-size:13px;
}

/* ---------- recoloration des SVG inline (attributs de présentation) ---------- */
#axg stop:first-child{stop-color:#00d4ff}
#axg stop:last-child{stop-color:#c9a05f}
svg [fill="#8f7fe0"]{fill:#00d4ff}
svg [stroke="#8f7fe0"]{stroke:#00d4ff}
svg [fill="#d3ab63"]{fill:#c9a05f}
svg [stroke="#d3ab63"]{stroke:#c9a05f}
svg [fill="#b39ddb"]{fill:#8fd8ff}
svg [stroke="#6b6878"]{stroke:#3f5878}
svg [fill="#a09daa"]{fill:#7d93b8}

/* ---------- boutons : cyan → or antique ---------- */
.btn-invite,.btn-patreon,.btn-submit,.check input:checked + .box{
  background:linear-gradient(120deg,#00d4ff,#2e7dff 60%,#c9a05f);
  color:#040918;
}
.btn-invite:hover,.btn-patreon:hover,.btn-submit:hover{
  box-shadow:0 14px 44px rgba(0,212,255,.32);
}
.btn-ghost:hover{border-color:var(--cyan);background:var(--violet-soft)}

/* ---------- bandes, cartes, modales ---------- */
.hyv3-band{
  background:linear-gradient(180deg,rgba(0,212,255,.06),rgba(201,160,95,.05) 60%,transparent);
  border-top:1px solid rgba(0,212,255,.14);
  border-bottom:1px solid rgba(0,212,255,.14);
}
.avant-band{
  background:linear-gradient(180deg,rgba(201,160,95,.06),rgba(0,212,255,.04) 55%,transparent);
  border-top:1px solid rgba(0,212,255,.14);
  border-bottom:1px solid rgba(0,212,255,.14);
}
.manifesto-inner{
  background:linear-gradient(160deg,rgba(0,212,255,.07),rgba(201,160,95,.05) 55%,rgba(255,255,255,.015));
  border:1px solid rgba(0,212,255,.16);
}
.modal{
  background:linear-gradient(165deg,#0a1428,#040918 60%);
  border:1px solid rgba(0,212,255,.25);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(0,212,255,.06);
}
.modal-overlay{background:rgba(2,5,14,.74)}

/* ---------- détails cyan ---------- */
.feat:hover,.mode:hover,.mega:hover{border-color:rgba(0,212,255,.4)}
.feat::before{background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.mode.m-local:hover{border-color:rgba(0,212,255,.45)}
.hyv3-badge{border:1px solid rgba(0,212,255,.3);background:rgba(0,212,255,.06)}
.pill.on{background:linear-gradient(120deg,rgba(0,212,255,.22),rgba(201,160,95,.22));border-color:var(--cyan)}
.ok-check{
  background:linear-gradient(120deg,rgba(0,212,255,.22),rgba(201,160,95,.22));
  border:1px solid rgba(0,212,255,.5);color:var(--cyan);
}
.seal{border:1px dashed rgba(201,160,95,.55);color:var(--gold);background:rgba(201,160,95,.06)}
.seal .dot{background:var(--cyan)}
.field input:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,212,255,.15)}
.faq-item:hover{border-color:rgba(0,212,255,.3)}
.faq-item[open]{border-color:rgba(0,212,255,.45)}
.faq-item summary .plus{border:1px solid rgba(0,212,255,.4);color:var(--cyan)}
.soc:hover{border-color:var(--cyan);background:var(--violet-soft)}
.cmp thead th.ax{color:var(--cyan)}
.spinner{border:3px solid rgba(0,212,255,.2);border-top-color:var(--cyan)}
.btn-spin{border:2px solid rgba(4,9,24,.3);border-top-color:#040918}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .ax-tagline{font-size:10px;letter-spacing:.34em;text-indent:.34em;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  h1 .l2{filter:none}
  .ax-tagline{text-shadow:none}
  .ax-tagline .sep{text-shadow:none}
}