/* 512 IT : styles communs (en-tête, pied de page, formulaire, pages légales, adaptation mobile).
   Les sections des pages gardent les styles en ligne de la maquette de Michel. */

/* Polices hébergées sur le site (sous-ensemble latin, licence SIL OFL) */
@font-face{font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/barlow-600.woff2') format('woff2');}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/barlow-700.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/barlow-condensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/barlow-condensed-700.woff2') format('woff2');}

:root{
  --bleu-nuit:#003280;
  --bleu:#016AB5;
  --cyan:#01AEEF;
  --vert:#93D10A;
  --texte:#1F2937;
  --gris:#5F6B7A;
  --bord:#D9DEE5;
  --fond-clair:#F4F7FB;
  --ok:#2F6B25;
  --err:#A3321B;
  --cond:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono:ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --nuit-0:#010716;
  --nuit:#020B1F;
}

*{box-sizing:border-box;}
html{scroll-padding-top:100px; scroll-behavior:smooth;}
body{margin:0; background:#FFFFFF; color:var(--texte); font-family:'Barlow', Arial, sans-serif; font-size:17px; line-height:1.55; overflow-x:hidden;}
img{max-width:100%;}
a{color:var(--bleu);}
a:hover{color:var(--bleu-nuit);}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--cyan); outline-offset:2px;}
.skip-link{position:absolute; left:16px; top:-80px; z-index:100; background:var(--bleu-nuit); color:#FFFFFF; padding:10px 16px; border-radius:6px; font-weight:700; text-decoration:none;}
.skip-link:focus{top:12px; color:#FFFFFF;}

/* Bandeau supérieur */
.topbar{background:var(--nuit-0); color:#C9D6E8; font-size:14px; border-bottom:1px solid rgba(255,255,255,.06);}
.topbar-in{max-width:1200px; margin:0 auto; padding:8px 24px; display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between;}
.topbar p{margin:0;}
.topbar nav{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center;}
.topbar a{color:#FFFFFF; text-decoration:none;}
.topbar a:hover{color:var(--cyan);}
.topbar .tel{font-weight:700;}

/* En-tête : verre sombre, fixé en haut de l'écran */
.site-header{position:sticky; top:0; z-index:30; background:rgba(2,11,31,.86); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid rgba(1,174,239,.22);}
.site-header::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, transparent, var(--cyan), var(--vert), transparent); opacity:.7;}
.header-in{max-width:1200px; margin:0 auto; padding:12px 24px; display:flex; gap:16px 28px; align-items:center; justify-content:space-between;}
.logo{flex:none; display:block;}
.logo img{height:54px; width:auto; display:block; border-radius:8px;}
.main-nav{display:flex; flex-wrap:nowrap; gap:6px 24px; align-items:center; font-weight:600; font-size:16px;}
.main-nav a{color:#D7E3F4; text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap; transition:color .2s, border-color .2s;}
.main-nav a:hover{color:#FFFFFF; border-bottom-color:rgba(1,174,239,.6);}
.main-nav a[aria-current="page"]{color:#FFFFFF; border-bottom-color:var(--cyan);}
.nav-groupe{position:relative;}
.nav-parent::after{content:""; display:inline-block; width:7px; height:7px; margin:0 0 3px 8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.7;}
.sous-menu{position:absolute; top:100%; left:-18px; min-width:250px; margin-top:8px; padding:10px; display:flex; flex-direction:column; background:rgba(4,18,44,.97); border:1px solid rgba(1,174,239,.28); border-radius:14px; box-shadow:0 24px 50px -20px rgba(0,0,0,.7), 0 0 30px -10px rgba(1,174,239,.35); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s;}
.sous-menu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px;}
.nav-groupe:hover .sous-menu, .nav-groupe:focus-within .sous-menu{opacity:1; visibility:visible; transform:none;}
.sous-menu a{padding:10px 12px; border-radius:8px; border-bottom:0;}
.sous-menu a:hover, .sous-menu a[aria-current="page"]{background:rgba(1,174,239,.12); color:#FFFFFF;}
.btn-devis{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border-radius:999px; background:linear-gradient(90deg, var(--cyan), var(--bleu)); color:#FFFFFF; text-decoration:none; font-weight:700; font-size:16px; white-space:nowrap; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 24px -8px rgba(1,174,239,.7); transition:transform .2s, box-shadow .2s;}
.btn-devis:hover{color:#FFFFFF; transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 10px 30px -6px rgba(1,174,239,.95);}
.main-nav .nav-mobile{display:none;}
.nav-toggle{display:none; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:transparent; color:#FFFFFF; cursor:pointer; flex:none;}
.nav-toggle svg{width:24px; height:24px;}
.nav-toggle .ic-fermer{display:none;}
.nav-toggle[aria-expanded="true"] .ic-ouvrir{display:none;}
.nav-toggle[aria-expanded="true"] .ic-fermer{display:block;}

/* Formulaire de contact */
.form-status{border-radius:6px; padding:12px 14px; font-size:16px; font-weight:600; line-height:1.45;}
.form-status[hidden]{display:none;}
.form-status.is-ok{background:#EAF6E6; color:var(--ok); border-left:4px solid var(--vert);}
.form-status.is-err{background:#FBECE8; color:var(--err); border-left:4px solid var(--err);}
.hp-field{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
button[disabled]{opacity:.6; cursor:wait;}

/* Pied de page */
.site-footer{background:radial-gradient(900px 400px at 85% 0%, rgba(1,174,239,.12), transparent 60%), var(--nuit-0); color:#FFFFFF; font-size:15px; border-top:1px solid rgba(255,255,255,0.2);}
.footer-in{max-width:1200px; margin:0 auto; padding:64px 24px 28px; display:flex; flex-direction:column; gap:40px;}
.footer-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:32px;}
.footer-col{display:flex; flex-direction:column; gap:8px;}
.footer-col p{margin:0; line-height:1.5;}
.footer-col .titre{font-family:var(--cond); font-weight:700; font-size:19px; margin:0 0 2px;}
.site-footer a{color:#FFFFFF;}
.site-footer a:hover{color:#FFFFFF; opacity:.85;}
.footer-col nav{display:flex; flex-direction:column; gap:8px;}
.footer-col nav a{text-decoration:none;}
.footer-brand{gap:14px;}
.footer-brand img{height:56px; width:auto; align-self:flex-start; border-radius:6px;}
.footer-brand .linkedin{font-weight:600;}
.footer-bottom{display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.25); font-size:13px;}

/* Pages de texte : mentions légales, confidentialité, 404 */
.page-hero{color:#FFFFFF;}
.page-hero-in{max-width:1200px; margin:0 auto; padding:56px 24px 64px; display:flex; flex-direction:column; gap:18px;}
.page-hero nav{font-size:15px;}
.page-hero a{color:#FFFFFF;}
.page-hero h1{margin:0; font-family:var(--cond); font-weight:700; font-size:58px; line-height:1;}
.page-hero p{margin:0; font-size:20px; line-height:1.5; max-width:720px;}
.prose{max-width:820px; margin:0 auto; padding:56px 24px 88px;}
.prose h2{font-family:var(--cond); font-weight:700; font-size:32px; line-height:1.1; color:var(--bleu-nuit); margin:40px 0 12px;}
.prose h2:first-child{margin-top:0;}
.prose p, .prose li{line-height:1.7;}
.prose p{margin:0 0 12px;}
.prose ul{padding-left:22px; margin:0 0 12px;}
.prose dl{display:grid; grid-template-columns:max-content 1fr; gap:8px 24px; margin:0;}
.prose dt{font-weight:700;}
.prose dd{margin:0;}
.prose .note{color:var(--gris); font-size:15px;}
.bouton{display:inline-flex; align-items:center; min-height:52px; padding:0 28px; border-radius:6px; background:var(--bleu-nuit); color:#FFFFFF; text-decoration:none; font-weight:700;}
.bouton:hover{background:var(--bleu); color:#FFFFFF;}

/* ===== Couche dynamique : héros animés, cartes réactives à la souris, apparitions au défilement ===== */

/* Héros sombre : réseau animé (canvas ajouté par site.js), halo qui suit la souris, grille en perspective */
.fx-hero{position:relative; overflow:hidden; isolation:isolate; color:#FFFFFF;
  background:radial-gradient(1100px 560px at 85% -10%, rgba(1,174,239,.28), transparent 60%),
             radial-gradient(800px 480px at -5% 105%, rgba(147,209,10,.14), transparent 60%),
             linear-gradient(160deg, #020B1F 0%, #03184A 55%, #012A66 100%) !important;}
.fx-hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(1,174,239,.20), transparent 62%);}
.fx-hero::after{content:""; position:absolute; left:-50%; right:-50%; bottom:-2px; height:46%; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(1,174,239,.30) 1px, transparent 1px), linear-gradient(90deg, rgba(1,174,239,.30) 1px, transparent 1px);
  background-size:64px 64px; transform:perspective(520px) rotateX(64deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 85%); mask-image:linear-gradient(to top, #000 0%, transparent 85%);
  animation:fx-grille 2.6s linear infinite; opacity:.55;}
@keyframes fx-grille{to{background-position:0 64px, 0 0;}}
.fx-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;}
.fx-hero a[style*="border: 2px solid #FFFFFF"]{-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); background:rgba(255,255,255,.04);}

/* Composants des nouvelles pages */
.s{padding:108px 24px; position:relative;}
.s-in{max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:44px;}
.s-nuit{background:var(--nuit); color:#D3DEEE; overflow:hidden; isolation:isolate;}
.s-nuit::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000, transparent 75%); mask-image:radial-gradient(ellipse at 50% 0%, #000, transparent 75%);}
.s-clair{background:var(--fond-clair);}
.s-blanc{background:#FFFFFF;}
.entete{display:flex; flex-direction:column; gap:14px; max-width:780px;}
.entete.centre{align-self:center; text-align:center; align-items:center;}
.surtitre{display:inline-flex; align-items:center; gap:10px; font-family:var(--cond); font-weight:600; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--bleu);}
.surtitre::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(1,174,239,.18), 0 0 14px var(--cyan);}
.s-nuit .surtitre, .fx-hero .surtitre{color:var(--cyan);}
.titre-1{margin:0; font-family:var(--cond); font-weight:700; font-size:72px; line-height:.98; letter-spacing:-.01em; text-wrap:balance;}
.titre-2{margin:0; font-family:var(--cond); font-weight:700; font-size:52px; line-height:1.02; color:var(--bleu-nuit); text-wrap:balance;}
.s-nuit .titre-2{color:#FFFFFF;}
.chapo{margin:0; font-size:20px; line-height:1.55; color:var(--gris);}
.s-nuit .chapo, .fx-hero .chapo{color:#C3D2E6;}
.degrade{background:linear-gradient(90deg, #36C6FF 0%, #01AEEF 40%, #93D10A 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.boutons{display:flex; flex-wrap:wrap; gap:14px;}
.btn-neon, .btn-contour{display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 30px; border-radius:999px; font-weight:700; font-size:17px; text-decoration:none; transition:transform .2s, box-shadow .2s, background .2s;}
.btn-neon{background:linear-gradient(90deg, var(--cyan), var(--bleu)); color:#FFFFFF; box-shadow:0 0 0 1px rgba(255,255,255,.15) inset, 0 12px 34px -10px rgba(1,174,239,.9);}
.btn-neon:hover{color:#FFFFFF; transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 16px 40px -8px rgba(1,174,239,1);}
.btn-contour{border:1px solid rgba(255,255,255,.35); color:#FFFFFF; background:rgba(255,255,255,.04); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.btn-contour:hover{color:#FFFFFF; border-color:var(--cyan); background:rgba(1,174,239,.12);}
.s-clair .btn-contour, .s-blanc .btn-contour{color:var(--bleu-nuit); border-color:var(--bord);}

/* Héros des nouvelles pages */
.heros{max-width:1200px; margin:0 auto; padding:96px 24px 110px; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:48px; align-items:center;}
.heros-texte{display:flex; flex-direction:column; gap:24px;}
.ariane{font-size:15px; color:#AFC3DD;}
.ariane a{color:#FFFFFF;}
.defile{display:block; min-height:1.05em; color:var(--cyan); text-shadow:0 0 24px rgba(1,174,239,.55);}
.defile::after{content:""; display:inline-block; width:.08em; height:.8em; margin-left:.08em; background:currentColor; vertical-align:-.04em; animation:fx-clignote 1s steps(1) infinite;}
@keyframes fx-clignote{50%{opacity:0;}}
.atouts{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px 12px;}
.atouts li{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:15px; font-weight:600; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);}
.atouts li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--vert); box-shadow:0 0 10px var(--vert);}

/* Panneau « supervision » décoratif */
.hud{position:relative; border-radius:20px; padding:22px; background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(1,174,239,.45); transition:transform .25s ease;}
.hud-titre{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:#8FB3D9; text-transform:uppercase; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1);}
.hud-titre span:last-child{color:var(--vert);}
.hud ul{list-style:none; margin:0; padding:8px 0 0;}
.hud li{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px dashed rgba(255,255,255,.08); font-size:15px;}
.hud li:last-child{border-bottom:0;}
.hud .etat{font-family:var(--mono); font-size:12px; color:var(--vert);}
.led{width:9px; height:9px; border-radius:50%; background:var(--vert); box-shadow:0 0 10px var(--vert); animation:fx-led 2.4s ease-in-out infinite;}
.led.cyan{background:var(--cyan); box-shadow:0 0 10px var(--cyan);}
@keyframes fx-led{50%{opacity:.35;}}
.hud-onde{height:54px; margin-top:12px; border-radius:10px; background:rgba(1,174,239,.06); overflow:hidden;}
.hud-onde svg{width:100%; height:100%; display:block;}
.hud-onde path{stroke-dasharray:6 4; animation:fx-onde 1.4s linear infinite;}
@keyframes fx-onde{to{stroke-dashoffset:-20;}}

/* Cartes : halo qui suit la souris et légère inclinaison 3D (site.js) */
.cartes{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:22px;}
.carte{position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 26px; border-radius:18px; overflow:hidden; isolation:isolate;
  background:#FFFFFF; border:1px solid var(--bord); transition:transform .25s ease, border-color .25s, box-shadow .25s;}
.s-nuit .carte{background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.11); color:#C9D6E8;}
.carte::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s; pointer-events:none;
  background:radial-gradient(380px circle at var(--cx, 50%) var(--cy, 50%), rgba(1,174,239,.16), transparent 45%);}
.s-nuit .carte::before{background:radial-gradient(380px circle at var(--cx, 50%) var(--cy, 50%), rgba(1,174,239,.26), transparent 45%);}
.carte:hover{border-color:rgba(1,174,239,.55); box-shadow:0 24px 50px -24px rgba(1,60,140,.45);}
.carte:hover::before{opacity:1;}
.carte h3{margin:0; font-family:var(--cond); font-weight:700; font-size:27px; line-height:1.1; color:var(--bleu-nuit);}
.s-nuit .carte h3{color:#FFFFFF;}
.carte p{margin:0; line-height:1.6;}
.carte ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:15.5px;}
.carte li{display:flex; gap:10px; align-items:baseline;}
.carte li::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--cyan); transform:translateY(-2px);}
.carte .lien{margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; color:var(--bleu);}
.s-nuit .carte .lien{color:var(--cyan);}
.carte .lien::after{content:"→"; transition:transform .2s;}
.carte:hover .lien::after{transform:translateX(4px);}
.carte .tag{position:absolute; top:18px; right:18px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; padding:4px 9px; border-radius:999px; color:var(--vert); border:1px solid rgba(147,209,10,.45); background:rgba(147,209,10,.08);}
.s-blanc .carte .tag, .s-clair .carte .tag{color:#4E7A00;}
.ico{width:56px; height:56px; border-radius:14px; display:grid; place-items:center; color:var(--cyan); background:linear-gradient(140deg, rgba(1,174,239,.16), rgba(147,209,10,.10)); border:1px solid rgba(1,174,239,.35); box-shadow:0 0 24px -8px rgba(1,174,239,.6);}
.s-blanc .ico, .s-clair .ico{color:var(--bleu);}
.ico svg{width:28px; height:28px;}
.carte.vedette{border-color:rgba(1,174,239,.45);}
.carte.vedette::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--angle, 0deg), transparent 0 70%, var(--cyan) 80%, var(--vert) 88%, transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:fx-tour 6s linear infinite;}
@property --angle{syntax:'<angle>'; inherits:false; initial-value:0deg;}
@keyframes fx-tour{to{--angle:360deg;}}

/* Chiffres clés */
.chiffres{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1px; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1);}
.chiffre{padding:30px 24px; background:var(--nuit); display:flex; flex-direction:column; gap:6px;}
.chiffre b{font-family:var(--cond); font-size:58px; line-height:1; font-weight:700;}
.chiffre span{color:#AFC3DD; font-size:15.5px;}

/* Étapes */
.etapes{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:22px; counter-reset:etape;}
.etape{position:relative; padding:26px 22px; border-radius:16px; border:1px solid var(--bord); background:#FFFFFF;}
.s-nuit .etape{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1);}
.etape::before{counter-increment:etape; content:"0" counter(etape); display:block; font-family:var(--mono); font-size:13px; color:var(--bleu); letter-spacing:.1em; margin-bottom:12px;}
.s-nuit .etape::before{color:var(--cyan);}
.etape h3{margin:0 0 8px; font-family:var(--cond); font-size:24px; color:var(--bleu-nuit);}
.s-nuit .etape h3{color:#FFFFFF;}
.etape p{margin:0; line-height:1.55;}

/* Terminal décoratif */
.terminal{border-radius:16px; overflow:hidden; background:#030A18; border:1px solid rgba(1,174,239,.3); box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 50px -20px rgba(1,174,239,.4); font-family:var(--mono); font-size:13.5px; line-height:1.75;}
.terminal-barre{display:flex; gap:7px; padding:12px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.06);}
.terminal-barre i{width:11px; height:11px; border-radius:50%; background:#2A3A55;}
.terminal-barre i:first-child{background:#FF5F57;}
.terminal-barre i:nth-child(2){background:#FEBC2E;}
.terminal-barre i:nth-child(3){background:#28C840;}
.terminal pre{margin:0; padding:18px 20px 22px; color:#9FB8D6; white-space:pre-wrap; min-height:290px; font:inherit;}
.terminal .ok{color:var(--vert);}
.terminal .c{color:var(--cyan);}
.terminal .g{color:#5E7799;}

/* Deux colonnes texte / visuel */
.duo{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:center;}
.duo-texte{display:flex; flex-direction:column; gap:20px;}
.liste-coche{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.liste-coche li{display:flex; gap:12px; align-items:baseline; line-height:1.55;}
.liste-coche li::before{content:""; flex:none; width:14px; height:7px; border-left:2.5px solid var(--vert); border-bottom:2.5px solid var(--vert); transform:rotate(-45deg) translateY(-3px);}

/* Bandeau d'appel final */
.appel{position:relative; border-radius:24px; padding:56px; overflow:hidden; isolation:isolate; display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
  background:radial-gradient(600px 300px at 100% 0%, rgba(147,209,10,.18), transparent 60%), radial-gradient(700px 360px at 0% 100%, rgba(1,174,239,.30), transparent 60%), #041434; border:1px solid rgba(1,174,239,.35); color:#FFFFFF;}
.appel h2{margin:0 0 8px; font-family:var(--cond); font-size:46px; line-height:1.05;}
.appel p{margin:0; color:#C3D2E6; font-size:19px;}

/* Apparition au défilement (classes posées par site.js : sans JavaScript, tout reste visible) */
.fx-revele{opacity:0; translate:0 28px; transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--delai, 0s), translate .8s cubic-bezier(.2,.7,.2,1) var(--delai, 0s), transform .25s ease, border-color .25s, box-shadow .25s;}
.fx-revele.fx-vu{opacity:1; translate:none;}
main article.fx-incline{transition:transform .25s ease, box-shadow .25s, opacity .8s cubic-bezier(.2,.7,.2,1) var(--delai, 0s), translate .8s cubic-bezier(.2,.7,.2,1) var(--delai, 0s);}
main article.fx-incline:hover{box-shadow:0 24px 50px -24px rgba(1,60,140,.45);}
.terminal .l{display:block;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* Halo lumineux qui suit le curseur sur tout le site (écrans avec souris) */
.fx-curseur{position:fixed; left:0; top:0; width:440px; height:440px; margin:-220px 0 0 -220px; border-radius:50%; pointer-events:none; z-index:5;
  background:radial-gradient(circle, rgba(1,174,239,.09), transparent 65%); transition:opacity .4s; opacity:0;}
.fx-curseur.actif{opacity:1;}

/* Boutons Support et Extranet du bandeau supérieur (même style que « Demander un devis ») */
.topbar a.btn-top{display:inline-flex; align-items:center; min-height:30px; padding:0 16px; border-radius:999px; background:linear-gradient(90deg, var(--cyan), var(--bleu)); color:#FFFFFF; font-weight:700; font-size:14px; box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 18px -8px rgba(1,174,239,.8); transition:transform .2s, box-shadow .2s;}
.topbar a.btn-top:hover{color:#FFFFFF; text-decoration:none; transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 8px 22px -6px rgba(1,174,239,1);}
.nav-boutons{gap:10px;}
.nav-boutons .btn-devis{flex:1; border-bottom:0; color:#FFFFFF;}

/* Deux cartes côte à côte (gammes de caméras) */
.cartes.cartes-2{grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));}

/* Mur de caméras décoratif */
.cams{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.cam{position:relative; aspect-ratio:16 / 10; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(120% 90% at 30% 20%, rgba(1,174,239,.18), transparent 60%), linear-gradient(135deg, #0B2550, #061430);}
.cam::before{content:""; position:absolute; left:0; right:0; top:-30%; height:30%; background:linear-gradient(to bottom, transparent, rgba(1,174,239,.16), transparent); animation:fx-balayage 3.2s linear infinite;}
.cam:nth-child(2)::before{animation-delay:-1.1s;}
.cam:nth-child(3)::before{animation-delay:-2s;}
.cam:nth-child(4)::before{animation-delay:-.6s;}
@keyframes fx-balayage{to{top:100%;}}
.cam span{position:absolute; left:8px; bottom:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:#CFE3F7;}
.cam i{position:absolute; right:8px; top:8px; width:8px; height:8px; border-radius:50%; background:#FF4D4D; box-shadow:0 0 8px #FF4D4D; animation:fx-led 1.2s ease-in-out infinite;}
.cam b{position:absolute; left:36%; top:24%; width:24%; height:52%; border:1.5px solid var(--vert); border-radius:4px; box-shadow:0 0 12px rgba(147,209,10,.5); animation:fx-cible 4s ease-in-out infinite;}
.cam b.vehicule{left:22%; top:44%; width:44%; height:32%; border-color:var(--cyan); box-shadow:0 0 12px rgba(1,174,239,.5);}
.cam b::after{content:attr(data-cible); position:absolute; left:-1px; top:-17px; padding:1px 5px; font-family:var(--mono); font-size:9px; font-weight:400; white-space:nowrap; color:#021022; background:var(--vert); border-radius:3px 3px 0 0;}
.cam b.vehicule::after{background:var(--cyan);}
@keyframes fx-cible{50%{transform:translateX(10%);}}

/* Profil de l'ingénieur */
.profil-tete{display:flex; gap:18px; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1);}
.profil-tete b{display:block; font-family:var(--cond); font-size:30px; line-height:1.1; color:#FFFFFF;}
.profil-tete span{color:#AFC3DD; font-size:15px;}
.avatar{flex:none; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; font-family:var(--cond); font-size:34px; font-weight:700; color:#FFFFFF;
  background:radial-gradient(circle at 30% 30%, #0A4A9A, #031230); box-shadow:0 0 0 2px var(--cyan), 0 0 0 7px rgba(1,174,239,.12), 0 0 36px rgba(1,174,239,.6);}
.profil-chiffres{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px;}
.profil-chiffres div{padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:2px;}
.profil-chiffres b{font-family:var(--cond); font-size:38px; line-height:1;}
.profil-chiffres span{font-size:13.5px; color:#AFC3DD;}
.jauges{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.hud .jauges li{display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:0; border:0; font-size:15px; color:#D7E3F4;}
.jauge{display:block; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;}
.jauge i{display:block; height:100%; width:var(--niveau); border-radius:inherit; background:linear-gradient(90deg, var(--cyan), var(--vert)); box-shadow:0 0 12px rgba(1,174,239,.7); transform-origin:left;}
.fx-revele .jauge i{transform:scaleX(0); transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .35s;}
.fx-revele.fx-vu .jauge i{transform:none;}

/* Adaptation : menu replié */
@media (max-width: 1180px){
  .nav-toggle{display:inline-flex;}
  .header-in > .btn-devis{display:none;}
  .main-nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:rgba(2,11,31,.98); border-bottom:1px solid rgba(1,174,239,.3); box-shadow:0 24px 40px -20px rgba(0,0,0,.8); padding:6px 24px 20px; max-height:calc(100vh - 80px); overflow-y:auto;}
  .main-nav.is-open{display:flex;}
  .main-nav a{padding:13px 2px; border-bottom:1px solid rgba(255,255,255,.1); font-size:17px;}
  .main-nav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.1); box-shadow:inset 4px 0 0 var(--cyan); padding-left:14px;}
  .nav-parent::after{display:none;}
  .sous-menu{position:static; margin:0; padding:0 0 0 18px; opacity:1; visibility:visible; transform:none; background:none; border:0; box-shadow:none; border-radius:0;}
  .sous-menu::before{display:none;}
  .sous-menu a{border-radius:0; border-bottom:1px solid rgba(255,255,255,.1); font-size:16px; color:#AFC3DD;}
  .main-nav .nav-mobile{display:flex; margin-top:16px; border-bottom:none;}
  .main-nav .btn-devis.nav-mobile{color:#FFFFFF;}
}

/* Adaptation : tablette et mobile (surcharge des tailles fixes de la maquette) */
@media (max-width: 900px){
  main h1{font-size:clamp(34px, 7vw, 52px) !important;}
  main h2{font-size:clamp(28px, 5.4vw, 40px) !important;}
  .page-hero h1{font-size:clamp(34px, 7vw, 52px);}
  main section:not(.s) > div:not(.heros){padding-top:56px !important; padding-bottom:56px !important;}
}
@media (max-width: 600px){
  body{font-size:16px;}
  .topbar p{display:none;}
  .topbar-in{justify-content:center; padding:6px 16px;}
  .header-in{padding:10px 16px;}
  .logo img{height:46px;}
  .main-nav{padding:6px 16px 18px;}
  main section:not(.s) > div:not(.heros){padding-left:16px !important; padding-right:16px !important; padding-top:44px !important; padding-bottom:44px !important;}
  main section > div > div[style*="padding: 32px"], main form, main aside > div{padding:22px !important;}
  main [style*="minmax(320px"]{grid-template-columns:1fr !important;}
  main [style*="minmax(300px"], main [style*="minmax(270px"], main [style*="minmax(260px"]{grid-template-columns:1fr !important;}
  main [style*="flex: 1 1 520px"], main [style*="flex: 1 1 480px"], main [style*="flex: 2 1 560px"], main [style*="flex: 2 1 480px"], main [style*="flex: 1 1 380px"], main [style*="flex: 1 1 360px"], main [style*="flex: 1 1 340px"], main [style*="flex: 1 1 320px"], main [style*="flex: 0 1 520px"]{flex-basis:100% !important;}
  main p[style*="font-size: 20px"]{font-size:18px !important;}
  .footer-in{padding:48px 16px 24px;}
  .page-hero-in{padding:40px 16px 48px;}
  .page-hero p{font-size:18px;}
  .prose{padding:40px 16px 64px;}
  .prose dl{grid-template-columns:1fr; gap:2px;}
  .prose dd{margin-bottom:10px;}
}
@media (max-width: 1000px){
  .heros{grid-template-columns:1fr; padding:72px 24px 88px;}
  .duo{grid-template-columns:1fr; gap:36px;}
  .chiffres{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 900px){
  .titre-1{font-size:clamp(40px, 8.4vw, 60px) !important;}
  .titre-2{font-size:clamp(32px, 6vw, 44px) !important;}
  .s{padding:76px 24px;}
}
@media (max-width: 600px){
  .s{padding:60px 16px;}
  .heros{padding:52px 16px 72px; gap:32px;}
  .chapo{font-size:18px;}
  .appel{padding:32px 22px;}
  .appel h2{font-size:34px;}
  .chiffre b{font-size:44px;}
  .chiffre{padding:22px 18px;}
  .terminal pre{font-size:12px; min-height:0;}
  .fx-hero::after{height:30%;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
  .fx-revele{opacity:1; translate:none;}
  .fx-curseur{display:none;}
}