/* VTC Copilot — le rideau « bientôt disponible ».
   Feuille indépendante de `style.css` : ce n'est pas une page du site, c'est ce
   qui le remplace pendant sa préparation. La mêler au reste obligerait à
   démêler au moment de rouvrir.

   Identité : Concept 1 de la planche livrée par le marketing — violet
   électrique #7B6BFF, formes rondes et continues, noir d'encre #1E1E1E. Les
   couleurs sont celles du fichier `VTC C Violet.svg` lui-même. */

:root {
  --violet:#7b6bff; --violet-deep:#5a49e0; --violet-soft:#efecff;
  --ink:#1e1e1e; --paper:#ffffff; --muted:#5d5b72; --line:#e6e3f5;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --violet:#8f82ff; --violet-deep:#6d5cf0; --violet-soft:#1d1a35;
    --ink:#f3f1ff; --paper:#0c0b16; --muted:#a6a2c4; --line:#272341;
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink); line-height:1.6;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column;
}
.wrap { width:min(1060px, calc(100% - 44px)); margin:0 auto; }
h1,h2,h3,p { margin-top:0; }
a { color:inherit; }

/* Le tracé continu du Concept 1 : une ligne qui serpente derrière le héros,
   dessinée en SVG plutôt qu'en image — nette à toute taille, et sans octet
   de plus à télécharger. */
.backdrop { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.backdrop svg { position:absolute; top:-8%; right:-22%; width:min(1180px, 130%); height:auto; opacity:.16; }
@media (prefers-color-scheme: dark) { .backdrop svg { opacity:.26; } }

/* En-tête */
.site-header { padding:26px 0; }
.nav-row { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand-logo { height:46px; width:auto; display:block; }
.brand-logo.on-dark { display:none; }
@media (prefers-color-scheme: dark) {
  .brand-logo.on-light { display:none; }
  .brand-logo.on-dark { display:block; }
}
.pill {
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--violet) 45%, transparent);
  background:color-mix(in srgb, var(--violet) 12%, transparent);
  color:var(--violet-deep); font-size:12px; font-weight:750; letter-spacing:.07em; text-transform:uppercase;
}
@media (prefers-color-scheme: dark) { .pill { color:var(--violet); } }
.pill .blip { width:7px; height:7px; border-radius:50%; background:var(--violet); }

/* Héros */
main { flex:1; }
.hero { padding:60px 0 20px; max-width:820px; }
.hero h1 { font-size:clamp(2.4rem, 6.4vw, 4.2rem); line-height:1.03; letter-spacing:-.03em; margin-bottom:22px; }
.hero h1 .accent { color:var(--violet); }
.hero .lede { color:var(--muted); font-size:clamp(1.02rem, 2.4vw, 1.25rem); max-width:640px; margin-bottom:16px; }
.hero .summary {
  max-width:700px; margin:0 0 32px; padding:18px 20px; border-radius:16px;
  border:1px solid var(--line); border-left:3px solid var(--violet);
  background:var(--violet-soft); font-size:1.03rem;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.btn {
  min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 24px; border:1px solid transparent; border-radius:999px;
  font-size:15px; font-weight:750; text-decoration:none; cursor:pointer; font-family:inherit;
}
.btn-primary { background:linear-gradient(118deg, var(--violet), var(--violet-deep)); color:#fff; }
.btn-primary:hover { filter:brightness(1.07); }
.btn-ghost { border-color:var(--line); background:var(--paper); color:var(--ink); }
.btn-ghost:hover { border-color:var(--violet); }

/* Les trois piliers */
.section { padding:54px 0; }
.kicker { color:var(--violet-deep); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px; }
/* QA-0711-01 : --violet sur papier blanc = 3,90:1 en clair (12 px) ; --violet-deep = 6,06:1. */
@media (prefers-color-scheme: dark) { .kicker { color:var(--violet); } }
.section h2 { font-size:clamp(1.55rem, 3.4vw, 2.15rem); line-height:1.15; letter-spacing:-.02em; margin-bottom:12px; max-width:700px; }
.section > .lede { color:var(--muted); max-width:680px; margin-bottom:30px; }
.pillars { display:grid; grid-template-columns:repeat(auto-fit, minmax(275px, 1fr)); gap:16px; }
.pillar { border:1px solid var(--line); border-radius:18px; background:var(--paper); padding:24px; }
.pillar .num { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px;
               background:var(--violet-soft); color:var(--violet-deep); font-weight:800; font-size:14px; margin-bottom:16px; }
@media (prefers-color-scheme: dark) { .pillar .num { color:var(--violet); } }
.pillar h3 { font-size:1.05rem; margin-bottom:8px; }
.pillar p { color:var(--muted); font-size:.95rem; margin-bottom:0; }

/* Ce que VTC Copilot n'est pas — le positionnement du brief, dit franchement. */
.clarify { border:1px solid var(--line); border-left:3px solid var(--ink); border-radius:16px;
           background:var(--paper); padding:22px 24px; max-width:760px; }
.clarify p { margin-bottom:0; color:var(--muted); }
.clarify strong { color:var(--ink); }

/* Demande de démonstration */
.demo { border:1px solid var(--line); border-radius:22px; background:var(--paper); padding:clamp(24px, 4vw, 42px); }
.demo-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:38px; align-items:start; }
.demo h2 { margin-bottom:12px; }
.demo .lede { color:var(--muted); margin-bottom:18px; }
.demo-contact { display:inline-flex; align-items:center; gap:9px; color:var(--violet-deep); font-size:.93rem; text-decoration:none; font-weight:650; }
@media (prefers-color-scheme: dark) { .demo-contact { color:var(--violet); } }
.demo-contact:hover { text-decoration:underline; }
form.demo-form { display:grid; gap:15px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
label { display:grid; gap:6px; font-size:13px; font-weight:650; }
input, textarea, select {
  font:inherit; width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
}
input:focus, textarea:focus, select:focus { outline:2px solid var(--violet); outline-offset:1px; border-color:transparent; }
textarea { min-height:108px; resize:vertical; }
.hint { color:var(--muted); font-size:12px; font-weight:400; }
.consent { grid-template-columns:auto 1fr; display:grid; align-items:start; gap:10px; }
.consent input { width:auto; margin-top:4px; }
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Pied de page */
.site-footer { border-top:1px solid var(--line); padding:30px 0 44px; margin-top:34px; color:var(--muted); font-size:12.5px; }
.footer-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; }
.site-footer a { color:var(--muted); }
.site-footer a:hover { color:var(--ink); }
.legal-line { margin:14px 0 0; font-size:11.5px; }

@media (max-width:820px) { .demo-grid { grid-template-columns:1fr; gap:26px; } }
@media (max-width:560px) {
  .wrap { width:min(1060px, calc(100% - 32px)); }
  .form-row { grid-template-columns:1fr; }
  .hero { padding-top:38px; }
  .brand-logo { height:38px; }
}

/* Mobile — même correctif de confort tactile que sur les deux autres sites. */
@media (max-width: 620px) {
  .site-footer a, .demo-contact { min-height: 34px; display: inline-flex; align-items: center; }
}

.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:#0e0b1a;color:#f5f3fb;padding:14px 18px;border:3px solid #c4b5fd}.skip-link:focus{top:12px}a:focus-visible,button:focus-visible{outline:3px solid #35155f;outline-offset:4px}@media(prefers-color-scheme:dark){a:focus-visible,button:focus-visible{outline-color:#c4b5fd}}main[id="contenu"]:focus{outline:none}