:root{
  --bg-1:#0e1b2a;
  --bg-2:#0a3d62;
  --bg-3:#12263a;
  --accent:#5cc8ff;
  --text:#eaf1f7;
  --muted:#b8c4cf;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
html[data-theme="A"]{ --bg-1:#122033; --bg-2:#0f4d7a; --bg-3:#1a2f46; --accent:#69d1ff; }
html[data-theme="B"]{ --bg-1:#0e1b2a; --bg-2:#0a3d62; --bg-3:#12263a; --accent:#5cc8ff; }
html[data-theme="C"]{ --bg-1:#0a1422; --bg-2:#083353; --bg-3:#0d2032; --accent:#4fc3ff; }
body{ background: var(--bg-1); color: var(--text); }

.topbar{ z-index:1000; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.0)); }
.theme-dot{ width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.35); cursor:pointer; display:inline-block; }
.dot-a{ background: linear-gradient(120deg, #122033, #1a2f46); }
.dot-b{ background: linear-gradient(120deg, #0e1b2a, #12263a); }
.dot-c{ background: linear-gradient(120deg, #0a1422, #0d2032); }

.hero{ position:relative; overflow:hidden; min-height: 92vh; display:flex; align-items:center;
       background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-3) 100%); }
.hero::before{
  content:""; position:absolute; inset:-10% -10% -10% -10%; transform: skewY(-3deg);
  background: linear-gradient(95deg, rgba(92,200,255,.12) 0%, rgba(92,200,255,.0) 40%, rgba(92,200,255,.08) 100%),
              linear-gradient(0deg, var(--bg-2) 0%, transparent 60%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 20px 20px; -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  pointer-events:none;
}
.shield-wrap{ position:relative; width:min(420px, 90vw); margin-inline:auto; }
.shield{ width:100%; height:auto; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); animation: float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-8px)} }
.glow{ position:absolute; inset:-8% -8% auto -8%; height:60%; background: radial-gradient(40% 60% at 50% 60%, rgba(92,200,255,.35), transparent 70%); filter: blur(20px); z-index:-1; }
.hero-title{ font-weight:800; letter-spacing:.2px; text-shadow: 0 6px 16px rgba(0,0,0,.35); }
.hero-lead{ color: var(--muted); }
.btn-accent{ background: var(--accent); color:#042033; border:none; box-shadow: var(--shadow); }
.btn-accent:hover{ filter: brightness(.94); }
.btn-ghost{ color: var(--text); border:1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); }

.section-prestations .tile{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius: 16px; overflow:hidden; }
.tile-img{ width:100%; height:160px; object-fit:contain; background: rgba(0,0,0,.15); }
.card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius: 16px; }
.section-contact .card{ min-height: 100%; }
footer{ background: rgba(0,0,0,.15); }


/* === PRO polish: hero logo badge (soft halo) === */
.hero-logo-badge{
  width: min(220px, 58vw);
  aspect-ratio: 1/1;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 38%, rgba(255,255,255,.18) 72%, rgba(255,255,255,0) 100%);
  box-shadow: 0 22px 50px rgba(0,0,0,.25);
  position:relative;
}
.hero-logo-badge::after{
  content:'';
  position:absolute;
  inset:-18px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 50%, rgba(150,247,255,.28) 0%, rgba(36,216,255,.10) 40%, rgba(36,216,255,0) 70%);
  filter: blur(2px);
  pointer-events:none;
}
.hero-logo{
  width: 64%;
  height:auto;
  border-radius: 16px;
}

/* Remove shield graphic entirely (kept for safety if any remains) */
.shield, .shield-wrap, .hero-graphic svg{ display:none !important; }

/* Consent line */
.ccp-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:14px;
  font-size:.95rem;
  opacity:.95;
}
.ccp-consent input{ margin-top:4px; }
.ccp-consent a{ text-decoration: underline; }

/* Mobile form spacing */
@media (max-width: 980px){
  form.card input, form.card textarea{ font-size:16px; } /* avoids iOS zoom */
  form.card .btn{ width:100%; }
}


/* === v6 hero logo badge + mobile banner fix === */
.hero-graphic{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Make the badge larger and better fill the hero space (desktop) */
.hero-logo-badge{
  width: min(340px, 30vw);
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  isolation: isolate;
}

/* Soft round glow that blends into background (dark theme) */
.hero-logo-badge::before{
  content:'';
  position:absolute;
  inset:-18px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.12) 35%,
    rgba(255,255,255,.06) 58%,
    rgba(255,255,255,0) 78%);
  filter: blur(1.5px);
  z-index:0;
  pointer-events:none;
}

/* Subtle inner ring */
.hero-logo-badge::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 55%,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.16) 45%,
    rgba(255,255,255,0) 75%);
  z-index:0;
  pointer-events:none;
}

.hero-logo{
  width: 68%;
  height:auto;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative;
  z-index:1;
}

/* Invert for light theme (dark halo that melts into light background) */
body.theme-clair .hero-logo-badge::before{
  background: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.06) 35%,
    rgba(0,0,0,.03) 58%,
    rgba(0,0,0,0) 78%);
}
body.theme-clair .hero-logo-badge::after{
  background: radial-gradient(circle at 50% 55%,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.07) 45%,
    rgba(0,0,0,0) 75%);
}

/* Mobile: prevent over-wide hero banner and keep logo perfectly centered */
@media (max-width: 820px){
  .hero-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap: 18px !important;
  }
  .hero-text{
    width: 100% !important;
    max-width: 560px !important;
  }
  .hero-graphic{
    width: 100% !important;
    margin-top: 0 !important;
  }
  .hero-logo-badge{
    width: min(240px, 70vw) !important;
  }
}