/* =========================================================================
   Expert Cyber Services — Audit — feuille de style
   Thème repris du site public : bleu nuit + accent bleu #3b82f6.
   ========================================================================= */

:root {
  /* Palette alignée sur le main.css du site */
  --bg-main:#0d1221; --bg-section:#111827; --bg-footer:#0a0f1e;
  --line-dark:rgba(255,255,255,.09);
  --text-base:#e2e8f0; --text-muted:#9ca3af; --text-white:#ffffff;
  --accent:#3b82f6; --accent-light:#60a5fa; --accent-dark:#1d4ed8;
  --accent-soft:rgba(59,130,246,.14);
  /* Surfaces claires du rapport (lisibilité document imprimable) */
  --paper:#ffffff; --paper-2:#f4f7fc; --line:#e3e9f3;
  --ink:#0e1730; --ink-2:#33415c; --muted:#5f6f8c;
  --ok:#15a05a; --warn:#dd8800; --fail:#e0364a; --info:#6b7a96;
  --r:12px; --shadow:0 8px 30px rgba(0,0,0,.4);
  --maxw:1040px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
.svg-sprite { position:absolute; }
body {
  margin:0; background:var(--bg-main); color:var(--text-base);
  font-family:Inter,"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
h1,h2,h3 { font-family:Montserrat,Inter,"Segoe UI",sans-serif; letter-spacing:-0.01em; }

.brand-mark { width:30px; height:34px; flex:none; }
.brand-name { font-family:Montserrat,sans-serif; font-weight:700; }
.brand-tag  { color:var(--accent-light); font-size:12px; font-weight:500; }

/* ---------- En-tête ---------- */
.site-header {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px clamp(16px,4vw,40px);
  background:rgba(10,15,30,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark); color:#fff;
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.site-header .brand-name { font-size:16px; }
.header-contact { display:flex; gap:22px; font-size:13.5px; }
.header-contact a { color:var(--text-muted); text-decoration:none; }
.header-contact a:hover { color:#fff; }

/* ---------- HERO / formulaire ---------- */
.hero {
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(700px 500px at 5% 110%, rgba(96,165,250,.14), transparent 55%),
    linear-gradient(180deg, var(--bg-section), var(--bg-main));
  color:#fff; padding:clamp(36px,6vw,72px) clamp(16px,4vw,40px) clamp(44px,6vw,72px);
  border-bottom:1px solid var(--line-dark);
}
.hero-inner { max-width:760px; margin:0 auto; text-align:center; }
.eyebrow {
  display:inline-block; margin:0 0 16px; font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-light);
  border:1px solid var(--line-dark); border-radius:999px; padding:5px 13px;
}
.hero h1 { margin:0 0 14px; font-size:clamp(26px,4.4vw,44px); font-weight:800; line-height:1.1; color:#fff; }
.lede { margin:0 auto 30px; color:var(--text-muted); font-size:clamp(15px,1.6vw,17px); max-width:60ch; }

/* Formulaire : blocs empilés, centrés, à largeur contenue */
.scan-form {
  width:100%; max-width:640px; margin:0 auto; text-align:left;
  display:flex; flex-direction:column; gap:18px;
}
/* Chaque section = une card sombre, dans l'esprit des cards du site */
.fs {
  margin:0; padding:22px 24px;
  background:
    radial-gradient(520px 330px at 50% 0%, rgba(59,130,246,.10), transparent 65%),
    linear-gradient(180deg, rgba(21,32,55,.94), rgba(9,20,36,.95));
  border:1px solid rgba(59,130,246,.18);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.fs legend {
  float:none; width:100%;
  font-family:Montserrat,sans-serif; font-weight:600; font-size:13px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--accent-light);
  margin:0 0 14px; padding:0; text-align:center;
}
.grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field-wide { grid-column:1 / -1; }
.field label {
  font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted);
}
.field input, .field select {
  width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--line-dark);
  background:rgba(7,12,24,.6); color:#fff; font-size:15px; font-family:inherit;
}
.field input::placeholder { color:rgba(255,255,255,.32); }
.field input:focus, .field select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field input.invalid, .field select.invalid { border-color:var(--fail); }
.field-url input { font-family:"JetBrains Mono",monospace; }

.check {
  display:flex; align-items:flex-start; gap:10px; margin-top:12px;
  font-size:13.5px; color:var(--text-muted); cursor:pointer;
}
.check input { width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--accent); }

.btn-scan {
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap; margin:8px auto 0;
  padding:14px 28px; border:none; border-radius:8px; cursor:pointer;
  font-family:Montserrat,sans-serif; font-weight:600; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  box-shadow:0 6px 18px rgba(59,130,246,.35); transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn-scan:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 10px 26px rgba(59,130,246,.45); }
.btn-scan:disabled { filter:saturate(.3) brightness(.7); cursor:not-allowed; }
.btn-scan svg { transition:transform .15s; }
.btn-scan:hover:not(:disabled) svg { transform:translateX(2px); }
.form-note { margin:12px 0 0; font-size:12.5px; color:var(--text-muted); text-align:center; }

/* ---------- Analyse en cours ---------- */
.scanning { background:var(--bg-section); color:#fff; padding:clamp(36px,6vw,64px) clamp(16px,4vw,40px); }
.scan-inner { max-width:560px; margin:0 auto; }
.scan-target { font-size:15px; color:var(--text-muted); margin:0 0 22px; }
.scan-target strong { color:#fff; font-family:"JetBrains Mono",monospace; }
.steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.steps li {
  display:flex; align-items:center; gap:14px; padding:14px 18px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:12px;
  opacity:.45; transition:opacity .25s, border-color .25s;
}
.steps li.active { opacity:1; border-color:rgba(59,130,246,.4); }
.steps li.done { opacity:1; }
.steps .lbl { font-size:15px; }
.spin {
  width:18px; height:18px; flex:none; border-radius:50%;
  border:2px solid rgba(255,255,255,.18); border-top-color:var(--accent-light);
}
.steps li.active .spin { animation:spin .8s linear infinite; }
.steps li.done .spin { border-color:var(--ok); background:var(--ok); animation:none; position:relative; }
.steps li.done .spin::after {
  content:""; position:absolute; inset:0; margin:auto; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg);
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Pied de page ---------- */
.site-footer { background:var(--bg-footer); color:var(--text-muted); padding:46px clamp(16px,4vw,40px) 26px; }
.footer-grid { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
.footer-brand { display:flex; gap:12px; align-items:flex-start; color:#fff; }
.footer-brand p { margin:0; }
.footer-col p { margin:0 0 6px; font-size:13.5px; line-height:1.6; }
.footer-h { font-family:Montserrat,sans-serif; color:#fff; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px !important; }
.footer-bottom { max-width:var(--maxw); margin:30px auto 0; padding-top:18px; border-top:1px solid var(--line-dark); font-size:12px; }

/* ---------- Responsive ---------- */
@media (max-width:700px) {
  .grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
}

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce) {
  *, ::before, ::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- Confirmation (le rapport n'est jamais affiché) ---------- */
.confirm {
  background:var(--bg-main);
  padding:clamp(36px,6vw,72px) clamp(16px,4vw,40px);
}
.confirm-card {
  max-width:560px; margin:0 auto; text-align:center;
  padding:38px 32px;
  background:
    radial-gradient(520px 330px at 50% 0%, rgba(59,130,246,.10), transparent 65%),
    linear-gradient(180deg, rgba(21,32,55,.94), rgba(9,20,36,.95));
  border:1px solid rgba(59,130,246,.18);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.confirm-shield { width:52px; height:58px; margin-bottom:14px; }
.confirm-card h2 { margin:0 0 12px; font-size:24px; color:#fff; }
.confirm-card p { margin:0 0 22px; color:var(--text-muted); font-size:15px; line-height:1.7; }
.confirm-card strong { color:#fff; font-family:"JetBrains Mono",monospace; }
.btn-confirm-new { margin:0 auto; }