/* VIGITRONIC — site vitrine statique.
   Charte du 10/08/2026 (arbitrée par Eric) : « tech sombre + bleu ».
   Fond noir, grille technique, accent bleu #0038e3, Sora/Inter auto-hébergées.
   Aucune ressource externe : polices et images vivent dans le site. */

@font-face { font-family:'Sora'; src:url('/polices/sora.woff2') format('woff2'); font-weight:100 800; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/polices/inter.woff2') format('woff2'); font-weight:100 900; font-display:swap; }

:root{
  --noir:#0c0e14;
  --anthracite:#151823;
  --ardoise:#1e2230;
  --bleu:#0038e3;
  --bleu-clair:#3d6bff;
  --brume:#8a92a6;
  --trait:#2a2f3e;
  --blanc:#f4f6fb;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--noir);color:var(--blanc);line-height:1.65;}
h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;}
img{max-width:100%;height:auto;}
a{color:var(--bleu-clair);}

/* grille technique réutilisable (fond des zones sombres) */
.grille-fond{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--trait) 1px,transparent 1px),linear-gradient(90deg,var(--trait) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 72% 38%,#000,transparent 76%);
  mask-image:radial-gradient(circle at 72% 38%,#000,transparent 76%);}

/* ----------------------------------------------------------- en-tête */
.entete{position:sticky;top:0;z-index:10;background:rgba(12,14,20,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait);}
.entete-inner{max-width:1150px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.entete img{height:26px;width:auto;display:block;}
.entete nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;}
.entete nav a{color:var(--brume);text-decoration:none;font-weight:500;font-size:.92rem;padding:8px 14px;border-radius:8px;border-bottom:2px solid transparent;}
.entete nav a:hover{color:#fff;background:rgba(255,255,255,.05);}
.entete nav a.actif{color:#fff;border-bottom-color:var(--bleu);border-radius:8px 8px 0 0;}

/* ------------------------------------------------------------ héros */
.heros{position:relative;overflow:hidden;background:var(--noir);}
.heros .lueur{position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(0,56,227,.5),transparent 68%);right:-160px;top:-200px;z-index:0;}
.heros-inner{position:relative;z-index:1;max-width:1150px;margin:0 auto;padding:66px 22px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;}
.heros .sur-titre{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bleu-clair);font-weight:600;margin-bottom:12px;}
.heros h1{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.16;font-weight:700;}
.heros h1 em{font-style:normal;color:var(--bleu-clair);}
.heros p.accroche{color:var(--brume);max-width:520px;margin:16px 0 26px;font-size:1.05rem;}
.heros .visuel{text-align:center;position:relative;z-index:1;}
.heros .visuel img{max-height:220px;width:auto;filter:drop-shadow(0 20px 36px rgba(0,0,0,.6));}
.heros.page .heros-inner{grid-template-columns:1fr;padding:48px 22px;}
.heros.page p.accroche{margin-bottom:0;}

/* boutons */
.btn{display:inline-block;font-weight:600;border-radius:10px;padding:12px 26px;text-decoration:none;font-size:.96rem;border:0;cursor:pointer;}
.btn-bleu{background:var(--bleu);color:#fff;}
.btn-bleu:hover{background:#0030c4;}
.btn-contour{border:1.5px solid rgba(255,255,255,.4);color:#fff;margin-left:10px;}
.btn-contour:hover{background:rgba(255,255,255,.08);}

/* ---------------------------------------------------------- sections */
.section{max-width:1150px;margin:0 auto;padding:56px 22px;}
.section.contraste{background:var(--anthracite);max-width:none;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);}
.section.contraste>.inner{max-width:1150px;margin:0 auto;padding:0 22px;}
.etiquette{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--bleu-clair);margin-bottom:6px;}
h2{font-size:1.65rem;line-height:1.25;margin-bottom:14px;color:#fff;}
.section p,.section li{color:#c3c8d4;}
.section h3{color:#fff;}

/* cartes produit (piliers) */
.produits{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.pcarte{background:var(--anthracite);border:1px solid var(--trait);border-radius:16px;padding:24px;position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block;transition:transform .18s,box-shadow .18s,border-color .18s;}
.pcarte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bleu);}
.pcarte:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.45);border-color:#3a4256;}
.pcarte h3{font-family:Sora;font-size:1.15rem;margin-bottom:6px;color:#fff;}
.pcarte p{color:var(--brume);font-size:.92rem;}
.pcarte .visuel{text-align:center;margin:14px 0 6px;min-height:96px;display:flex;align-items:center;justify-content:center;}
.pcarte .visuel img{max-height:100px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));}
.pcarte .lien{display:inline-block;margin-top:10px;font-weight:600;font-size:.88rem;color:var(--bleu-clair);}

/* bloc marque : texte + visuel (pages produit) */
.bloc{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:center;padding:44px 0;border-top:1px solid var(--trait);}
.bloc:first-of-type{border-top:0;}
.bloc.inverse{grid-template-columns:340px 1fr;}
.bloc.inverse .bloc-texte{order:2;}
.bloc.inverse .bloc-visuel{order:1;}
.bloc-visuel{text-align:center;}
.bloc-visuel img{max-height:240px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.5));}
.bloc h3{font-size:1.35rem;margin-bottom:10px;}
.bloc ul{margin:10px 0 0 20px;}
.bloc li{margin:4px 0;}

/* liste de specs (caméras) */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:22px;}
.spec{background:var(--anthracite);border:1px solid var(--trait);border-radius:12px;padding:16px 18px;}
.spec strong{display:block;color:#fff;font-family:Sora;margin-bottom:2px;}
.spec span{color:var(--brume);font-size:.9rem;}

/* atouts avec icône */
.atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px;}
.atout{background:var(--anthracite);border:1px solid var(--trait);border-radius:14px;padding:22px;}
.atout svg{stroke:var(--bleu-clair);display:block;margin-bottom:12px;}
.atout h3{font-size:1.02rem;margin-bottom:6px;}
.atout p{font-size:.92rem;color:var(--brume);}

/* chiffres clés */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px;}
.chiffre{background:var(--anthracite);border:1px solid var(--trait);border-radius:14px;padding:22px;text-align:center;}
.chiffre strong{font-family:Sora;font-size:1.9rem;display:block;color:#fff;}
.chiffre strong em{font-style:normal;color:var(--bleu-clair);}
.chiffre span{font-size:.82rem;color:var(--brume);}

/* appel à l'action */
.cta{position:relative;overflow:hidden;background:var(--anthracite);border-top:1px solid var(--trait);text-align:center;padding:54px 22px;}
.cta .lueur{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(0,56,227,.35),transparent 68%);left:50%;top:-320px;transform:translateX(-50%);}
.cta h2{position:relative;margin-bottom:20px;}
.cta .btn-bleu{position:relative;}

/* ----------------------------------------------------------- contact */
.contact-grille{display:grid;grid-template-columns:340px 1fr;gap:40px;margin-top:22px;}
.contact-coordonnees p{margin:10px 0;color:#c3c8d4;}
.contact-coordonnees strong{display:block;color:var(--bleu-clair);font-family:Sora;font-size:.92rem;}
.formulaire{display:grid;gap:14px;}
.formulaire .deux{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.formulaire label{font-weight:600;font-size:.9rem;display:block;margin-bottom:4px;color:#fff;}
.formulaire input,.formulaire textarea{width:100%;padding:11px 13px;border:1px solid var(--trait);border-radius:10px;font:inherit;background:var(--anthracite);color:#fff;}
.formulaire input:focus,.formulaire textarea:focus{outline:2px solid var(--bleu);border-color:var(--bleu);}
.formulaire textarea{min-height:140px;resize:vertical;}
.formulaire button{justify-self:start;}
.form-ok{color:#4ade80;font-weight:600;}
.form-erreur{color:#f87171;font-weight:600;}

/* ------------------------------------------------------- pied de page */
.pied{position:relative;overflow:hidden;background:#090b10;border-top:1px solid var(--trait);}
.pied-inner{max-width:1150px;margin:0 auto;padding:44px 22px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;}
.pied img{height:24px;width:auto;margin-bottom:12px;}
.pied p{color:var(--brume);font-size:.92rem;}
.pied h4{color:#fff;margin-bottom:10px;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;}
.pied a{color:var(--brume);text-decoration:none;display:block;margin:6px 0;}
.pied a:hover{color:#fff;}
.pied .legal{border-top:1px solid var(--trait);text-align:center;padding:14px 22px;font-size:.85rem;color:var(--brume);}
.pied .legal a{display:inline;color:var(--brume);}

/* prose légale */
.prose h3{margin-top:24px;color:#fff;}
.prose p{color:#c3c8d4;}

/* ----------------------------------------------------------- réactif */
@media(max-width:880px){
  .heros-inner{grid-template-columns:1fr;padding:44px 22px;}
  .heros .visuel img{max-height:150px;}
  .produits,.contact-grille{grid-template-columns:1fr;}
  .atouts,.chiffres{grid-template-columns:1fr 1fr;}
  .bloc,.bloc.inverse{grid-template-columns:1fr;gap:20px;}
  .bloc.inverse .bloc-texte{order:1;}
  .bloc.inverse .bloc-visuel{order:2;}
  .pied-inner{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .atouts,.chiffres{grid-template-columns:1fr;}
  .formulaire .deux{grid-template-columns:1fr;}
  .btn-contour{margin-left:0;margin-top:10px;}
}