:root {
  --cm-primary: #004684;   /* bleu foncé */
  --cm-secondary: #0072bc; /* bleu clair */
  --cm-accent: #f28c28;    /* orange */
  --cm-accent2: #f7b733;   /* jaune orangé */
  --cm-warm: #f15a29;      /* rouge/orangé */
  --cm-text: #0c1014;
  --cm-bg: #ffffff;
}

[data-theme="dark"] {
  --cm-bg: #0c1014;
  --cm-text: #f6f9ff;
  --cm-primary: #0072bc;
  --cm-secondary: #004684;
  --cm-accent: #f28c28;
  --cm-accent2: #f7b733;
  --cm-warm: #f15a29;
}

html,body { height:100% }
body {
  font-family:"Outfit", system-ui, sans-serif;
  color:var(--cm-text);
  background: radial-gradient(1200px 800px at 10% 10%, rgba(0,70,132,.12), transparent 60%),
              radial-gradient(1000px 600px at 90% 20%, rgba(242,140,40,.10), transparent 60%),
              linear-gradient(180deg, var(--cm-bg), #f6f9ff);
  background-color:var(--cm-bg);
  overflow-x:hidden;
  transition: all .3s ease;
}

[data-theme="dark"] body {
  background: linear-gradient(180deg, #0b1114, #182235);
}

/* Logo rond */
.brand-logo {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 50%;
  border: 3px solid var(--cm-accent);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  margin: 0 auto;
  display: block;
}

.bg-icons { position: fixed; inset: 0; pointer-events:none; opacity:.12; }
.bg-icons .icon { position:absolute; font-size:72px }
.i1{top:10%; left:6%}
.i2{top:22%; right:10%}
.i3{bottom:18%; left:14%}
.i4{bottom:8%; right:8%}
.i5{top:50%; left:48%}
.i6{top:70%; right:32%}

.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:48px 16px; }
.brand-card {
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(8px);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,70,132,.12);
  padding:32px 24px; max-width:920px; width:100%;
  border:1px solid rgba(0,70,132,.10);
}
[data-theme="dark"] .brand-card {
  background:rgba(12,16,20,.85);
  border:1px solid rgba(255,255,255,.04);
}

.brand-title {
  font-weight:800;
  margin-top:16px;
  background:linear-gradient(90deg, var(--cm-primary), var(--cm-accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand-sub { color:#47607a }

.cta-wrap{gap:12px; position: relative; z-index: 10;}
.btn-gradient{
  background-image:linear-gradient(135deg, var(--cm-primary), var(--cm-accent));
  color:#fff;
  border:none;
  box-shadow:0 6px 14px rgba(242,140,40,.25);
}
.btn-gradient:hover{filter:brightness(.98)}

.chip {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem; border-radius:999px; font-size:.9rem;
  color:var(--cm-primary);
  background:linear-gradient(180deg, rgba(247,183,51,.15), rgba(242,140,40,.12));
  border:1px dashed rgba(247,183,51,.35);
}

footer { position:relative; padding:28px 0; color:#51607a; font-size:.95rem; }
.glow { position:absolute; width:560px; height:560px; left:50%; transform:translateX(-50%); bottom:-280px; filter:blur(90px); opacity:.15; background:radial-gradient(circle, var(--cm-accent), transparent 60%); }

@keyframes floaty{from{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}
.floaty{animation:floaty 6s ease-in-out infinite}

.toggle-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}