@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg-0:#04070a;--bg-1:#070d12;--bg-2:#0c151b;
  --cyan-100:#c7fbff;--cyan-300:#6df1ff;--cyan-500:#22d8f0;--cyan-700:#0b8fa3;--cyan-900:#083b44;
  --white:#eef8fa;--grid-line:rgba(34,216,240,0.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg-0);color:var(--white);font-family:'Inter',system-ui,sans-serif;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:44px 44px;
}
.mono{font-family:'Share Tech Mono',monospace;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ===== NAV ===== */
.site-header{
  position:sticky;top:0;z-index:10;background:rgba(4,7,10,0.9);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--cyan-900);
}
.nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 28px;}
.logo{font-family:'Share Tech Mono';font-size:18px;letter-spacing:0.12em;color:var(--white);display:flex;align-items:center;gap:8px;}
.logo .dot{width:7px;height:7px;background:var(--cyan-500);display:inline-block;box-shadow:0 0 8px var(--cyan-500);}
nav.links{display:flex;gap:26px;}
nav.links a{color:rgba(238,248,250,0.65);text-decoration:none;font-size:13px;transition:color .15s;}
nav.links a:hover{color:var(--cyan-300);}
nav.links a.current{color:var(--cyan-300);}
.nav-actions{display:flex;gap:12px;align-items:center;}
@media (max-width:820px){ nav.links{display:none;} }

/* ===== BOUTONS ===== */
.btn{
  font-family:'Share Tech Mono',monospace;font-size:12.5px;letter-spacing:0.07em;text-transform:uppercase;
  padding:10px 20px;border:1px solid var(--cyan-500);background:transparent;color:var(--cyan-300);
  cursor:pointer;text-decoration:none;display:inline-block;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:all .15s;
}
.btn-primary{background:var(--cyan-500);color:#03181d;border-color:var(--cyan-500);}
.btn-primary:hover{background:var(--cyan-300);}
.btn-ghost:hover{background:rgba(34,216,240,0.08);}
.btn-lg{padding:15px 30px;font-size:13.5px;}

/* ===== CADRE RETICULE (motif signature) ===== */
.hud-frame{position:relative;border:1px solid var(--cyan-900);background:var(--bg-1);}
.hud-frame::before,.hud-frame::after,.hud-frame .br-tl,.hud-frame .br-br{
  content:'';position:absolute;width:14px;height:14px;border-color:var(--cyan-500);border-style:solid;border-width:0;transition:all .15s;
}
.hud-frame::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px;}
.hud-frame::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px;}
.hud-frame .br-tl{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px;}
.hud-frame .br-br{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px;}
.hud-frame:hover::before,.hud-frame:hover::after,.hud-frame:hover .br-tl,.hud-frame:hover .br-br{
  width:20px;height:20px;border-color:var(--cyan-300);
}

/* ===== TITRES DE SECTION ===== */
.section-head{margin-bottom:30px;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.eyebrow{
  font-family:'Share Tech Mono';font-size:12px;color:var(--cyan-500);letter-spacing:0.22em;
  text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.eyebrow .line{width:28px;height:1px;background:var(--cyan-700);}
h2{font-family:'Share Tech Mono';font-size:22px;color:var(--white);font-weight:400;margin:0;}
.see-all{font-family:'Share Tech Mono';font-size:12px;color:var(--cyan-300);text-decoration:none;letter-spacing:0.05em;white-space:nowrap;}
.see-all:hover{color:var(--cyan-100);}

/* ===== HERO ===== */
.hero{max-width:820px;margin:0 auto;padding:70px 28px 90px;text-align:center;}
.hero .eyebrow{justify-content:center;}
h1{font-family:'Share Tech Mono';font-size:29px;line-height:1.42;color:var(--white);font-weight:400;margin:0 auto 8px;max-width:680px;}
h1 .accent{color:var(--cyan-300);}
.hero-visual{aspect-ratio:16/9;margin:36px auto;max-width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;overflow:hidden;}
.hero-visual img{width:90%;height:90%;object-fit:cover;display:block;}
.hero-actions{display:flex;gap:16px;justify-content:center;margin-bottom:20px;}
.hero-note{font-size:12.5px;color:rgba(238,248,250,0.45);font-style:italic;}
.ph-label{font-family:'Share Tech Mono';font-size:11px;color:var(--cyan-700);text-align:center;}
.ph-dim{font-family:'Share Tech Mono';font-size:10px;color:rgba(238,248,250,0.3);}
@media (max-width:820px){ .hero{padding:40px 20px 60px;} }

/* ===== COMPREHENSION RAPIDE (3 colonnes) ===== */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:0 0 80px;}
.col-card{padding:22px;}
.col-card .thumb{aspect-ratio:16/10;margin-bottom:16px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 10px, #0a1319 10px, #0a1319 20px);overflow:hidden}
.col-card .thumb img{width:100%;height:100%;object-fit:cover}
.col-card .thumb .lbl{font-family:'Share Tech Mono';font-size:10px;color:var(--cyan-700);}
.col-card h3{font-family:'Share Tech Mono';font-size:14px;color:var(--cyan-300);margin:0 0 8px;font-weight:400;}
.col-card p{font-size:13.5px;color:rgba(238,248,250,0.7);line-height:1.55;margin:0;}
@media (max-width:900px){ .cols3{grid-template-columns:1fr;} }

/* ===== DIFFERENCIATEURS ===== */
.diff-section{padding-bottom:90px;}
.diff-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:40px;align-items:start;}
.diff-list{display:flex;flex-direction:column;gap:0;}
.diff-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(34,216,240,0.1);}
.diff-item:last-child{border-bottom:none;}
.diff-item .marker{font-family:'Share Tech Mono';font-size:13px;color:var(--cyan-500);flex-shrink:0;width:26px;}
.diff-item .txt strong{display:block;font-size:14.5px;color:var(--white);margin-bottom:3px;font-weight:600;}
.diff-item .txt span{font-size:13px;color:rgba(238,248,250,0.6);line-height:1.5;}
.diff-visual{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;overflow:hidden}
.diff-visual img{width:95%;height:95%;object-fit:cover}
@media (max-width:900px){ .diff-grid{grid-template-columns:1fr;} }

/* ===== ACCROCHE AFFINITAIRE ===== */
.accroche{padding:90px 0;text-align:center;position:relative;}
.accroche::before,.accroche::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:1px;height:36px;background:var(--cyan-700);}
.accroche::before{top:0;}
.accroche::after{bottom:0;}
.accroche p{font-family:'Share Tech Mono';font-size:21px;line-height:1.7;color:var(--cyan-100);max-width:720px;margin:0 auto;font-weight:400;}
.accroche p .cursor{color:var(--cyan-500);animation:blink 1.1s step-end infinite;}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@media (max-width:820px){ .accroche p{font-size:17px;} }

/* ===== TABLEAU DE BORD ===== */
.dashboard{padding:80px 0 100px;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--cyan-900);border:1px solid var(--cyan-900);}
.stat{background:var(--bg-1);padding:34px 20px;text-align:center;position:relative;overflow:hidden;}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan-500),transparent);opacity:0.6;}
.stat .num{font-family:'Share Tech Mono';font-size:36px;color:var(--cyan-300);letter-spacing:0.02em;}
.stat .lbl{font-family:'Inter';font-size:12px;color:rgba(238,248,250,0.55);text-transform:uppercase;letter-spacing:0.12em;margin-top:8px;}
@media (max-width:820px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }

/* ===== BANDEAU / GRILLE DE CAPTURES ===== */
.gallery-strip{padding:80px 0 90px;}
.strip{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;}
.strip::-webkit-scrollbar{height:6px;}
.strip::-webkit-scrollbar-thumb{background:var(--cyan-900);}
.thumb{flex:0 0 220px;cursor:pointer;}
.g-thumb .img{aspect-ratio:16/10;background:repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 10px, #0a1319 10px, #0a1319 20px);display:flex;align-items:center;justify-content:center;font-family:'Share Tech Mono';font-size:9px;color:var(--cyan-700);overflow:hidden;}
.g-thumb .img img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb .cap{font-size:12px;color:rgba(238,248,250,0.6);padding:9px 2px 0;}
.thumb .img img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb .img{width:220px;height:140px;background:repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 10px, #0a1319 10px, #0a1319 20px);display:flex;align-items:center;justify-content:center;font-family:'Share Tech Mono';font-size:10px;color:var(--cyan-700);overflow:hidden;}
.page-head{padding:64px 0 40px;}
.page-title{font-family:'Share Tech Mono';font-size:26px;color:var(--white);font-weight:400;margin:0 0 10px;}
.page-lead{font-size:14px;color:rgba(238,248,250,0.55);max-width:560px;line-height:1.6;margin:0;}
.capture-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:90px;}
.g-thumb{cursor:pointer;}

.g-thumb .cap{font-size:12px;color:rgba(238,248,250,0.6);padding:9px 2px 0;}
@media (max-width:900px){ .capture-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .capture-grid{grid-template-columns:1fr;} }

/* ===== TOUCHE AUTHENTIQUE ===== */
.authentic{padding-bottom:100px;}
.authentic-card{max-width:620px;margin:0 auto;padding:34px 38px;text-align:center;}
.authentic-card .quote{font-size:15.5px;font-style:italic;color:rgba(238,248,250,0.85);line-height:1.7;margin:0 0 14px;}
.authentic-card .signature{font-family:'Share Tech Mono';font-size:11.5px;color:var(--cyan-500);letter-spacing:0.1em;text-transform:uppercase;}

/* ===== CTA FINAL ===== */
.cta-final{padding:90px 0 100px;}
.cta-card{padding:56px 40px;text-align:center;position:relative;overflow:hidden;}
.cta-card::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(34,216,240,0.08), transparent 70%);pointer-events:none;}
.cta-eyebrow{font-family:'Share Tech Mono';font-size:12px;color:var(--cyan-500);letter-spacing:0.22em;text-transform:uppercase;margin-bottom:18px;}
.cta-card h2{font-family:'Share Tech Mono';font-size:24px;color:var(--white);font-weight:400;max-width:600px;margin:0 auto 30px;line-height:1.5;}

/* ===== FOOTER ===== */
.site-footer{border-top:1px solid var(--cyan-900);padding:56px 0 40px;margin-top:20px;}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;margin-bottom:44px;}
.footer-brand .logo{font-size:16px;margin-bottom:8px;}
.footer-brand p{font-size:12.5px;color:rgba(238,248,250,0.4);max-width:280px;line-height:1.6;margin:0;}
.footer-links{display:flex;gap:56px;flex-wrap:wrap;}
.footer-col h4{font-family:'Share Tech Mono';font-size:11px;color:var(--cyan-700);text-transform:uppercase;letter-spacing:0.14em;margin:0 0 14px;font-weight:400;}
.footer-col a{display:block;font-size:13px;color:rgba(238,248,250,0.65);text-decoration:none;margin-bottom:10px;}
.footer-col a:hover{color:var(--cyan-300);}
.footer-banners{display:flex;gap:20px;justify-content:center;padding-top:36px;border-top:1px solid rgba(34,216,240,0.08);}
.banner-slot{width:468px;max-width:44%;aspect-ratio:468/60;background:var(--bg-1);border:1px dashed var(--cyan-900);display:flex;align-items:center;justify-content:center;font-family:'Share Tech Mono';font-size:10px;color:var(--cyan-700);text-align:center;}
.footer-bottom{text-align:center;font-size:11px;color:rgba(238,248,250,0.3);margin-top:36px;}
@media (max-width:820px){ .footer-grid{flex-direction:column;} .footer-banners{flex-direction:column;align-items:center;} .banner-slot{max-width:100%;width:100%;} }

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;background:rgba(2,5,7,0.94);z-index:100;display:none;align-items:center;justify-content:center;flex-direction:column;}
.lightbox.open{display:flex;}
.lightbox .stage{max-width:min(90vw,calc(100vw - 160px));max-height:75vh;background:repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 10px, #0a1319 10px, #0a1319 20px);border:1px solid var(--cyan-700);display:flex;align-items:center;justify-content:center;font-family:'Share Tech Mono';font-size:12px;color:var(--cyan-500);overflow:hidden;}
.lightbox .stage img{display:block;max-width:min(90vw,calc(100vw - 160px));max-height:75vh;width:auto;height:auto;}
.lb-frame{position:relative;display:inline-flex;max-width:min(90vw,calc(100vw - 160px));max-height:75vh;}
.lightbox .cap-lg{margin-top:16px;font-size:13.5px;color:rgba(238,248,250,0.75);font-family:'Inter';max-width:min(80vw,60ch);text-align:justify;}

.lightbox .close{
  position:absolute;top:-15px;right:-15px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Share Tech Mono';font-size:16px;color:var(--cyan-300);
  background:var(--bg-0);border:1px solid var(--cyan-500);cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.lightbox .close:hover{background:rgba(34,216,240,0.12);}
.lightbox .nav-arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid var(--cyan-700);color:var(--cyan-300);font-family:'Share Tech Mono';font-size:18px;width:44px;height:44px;cursor:pointer;z-index:5}
.lightbox .nav-arrow:hover{background:rgba(34,216,240,0.08);}
.lightbox .prev{left:24px;}
.lightbox .next{right:24px;}
.lightbox .counter{position:absolute;bottom:28px;font-family:'Share Tech Mono';font-size:11px;color:rgba(238,248,250,0.4);}