/* ===== COULEURS : change-les ici ===== */
:root{
  --bg1:#0A0620; --bg2:#0D2A66; --bg3:#2A0B56;   /* dégradé du fond : indigo, bleu, violet */
  --cyan:#00F0FF; --pink:#FF2BD6; --yellow:#FCEE09;
  --text:#E8F4FF; --muted:#9DB4D6; --panel:rgba(10,6,32,.7);
  --head:"Chakra Petch",system-ui,sans-serif; --mono:"Share Tech Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 45%,var(--bg3) 80%,var(--bg1) 100%) fixed;
  color:var(--text);font:400 1.05rem/1.6 var(--head);
}
/* lignes de balayage façon vieil écran */
body::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.08) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
h1,h2,h3,.logo{font-family:var(--head);font-weight:700;letter-spacing:.02em;text-transform:uppercase}
a{color:inherit}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* ===== MENU ===== */
.nav{position:fixed;inset:0 0 auto;z-index:70;display:flex;justify-content:space-between;align-items:center;
  padding:1rem 5vw;background:linear-gradient(rgba(10,6,32,.85),transparent)}
.logo{font-size:1.5rem;text-decoration:none;color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.nav nav a{margin-left:2rem;text-decoration:none;font:400 1rem var(--mono);text-transform:uppercase}
.nav nav a:hover{color:var(--pink);text-shadow:0 0 10px var(--pink)}
.burger{display:none;background:none;border:1px solid var(--cyan);color:var(--cyan);padding:.4rem .9rem;font:1rem var(--mono)}

/* ===== ACCUEIL ===== */
.hero{position:relative;z-index:60;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:transparent}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-text{position:relative;z-index:2;padding:0 5vw 12vh;max-width:56rem}
h1{font-size:clamp(2.6rem,8vw,6rem);line-height:1;margin-bottom:1.2rem;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  animation:glitch .6s steps(2) 1}
@keyframes glitch{
  0%{transform:translate(0)} 20%{transform:translate(-6px,2px)} 40%{transform:translate(5px,-2px)}
  60%{transform:translate(-3px,0)} 100%{transform:translate(0)}}
.hero-text p{max-width:34rem;margin-bottom:2rem;font-size:1.2rem}
.btn{display:inline-block;background:var(--yellow);color:#0A0620;font:700 1rem var(--head);text-transform:uppercase;
  padding:.85rem 2rem;border:0;text-decoration:none;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:0 0 18px rgba(252,238,9,.5)}
.btn:hover{background:var(--cyan)}

/* ===== SECTIONS ===== */
.wrap{padding:7rem 5vw 2rem;max-width:80rem;margin:auto}
h2{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:2.5rem;color:var(--cyan);text-shadow:0 0 14px rgba(0,240,255,.6)}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.5rem}
.services article{background:var(--panel);border:1px solid var(--pink);padding:1.5rem;
  box-shadow:0 0 18px rgba(255,43,214,.25),inset 0 0 20px rgba(255,43,214,.08);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
h3{font-size:1.4rem;margin-bottom:.6rem;color:var(--pink)}
.services p{color:var(--muted)}

/* ===== RÉALISATIONS ===== */
.filters{display:flex;gap:.6rem;margin-bottom:2rem;flex-wrap:wrap}
.filters button{background:none;color:var(--cyan);border:1px solid var(--cyan);padding:.4rem 1.1rem;font:1rem var(--mono);text-transform:uppercase;cursor:pointer}
.filters button:hover{box-shadow:0 0 12px var(--cyan)}
.filters .on{background:var(--cyan);color:#0A0620}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:1rem}
.grid figure{position:relative;z-index:60;aspect-ratio:4/3;overflow:hidden;background:var(--bg1);border:1px solid var(--cyan);
  box-shadow:0 0 14px rgba(0,240,255,.25);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.grid figure:hover{border-color:var(--pink);box-shadow:0 0 22px rgba(255,43,214,.6)}
.grid .big{grid-column:span 2;aspect-ratio:auto}
.grid img,.grid video{width:100%;height:100%;object-fit:cover;display:block}
figcaption{position:absolute;inset:auto 0 0;padding:2rem 1rem .8rem;background:linear-gradient(transparent,rgba(10,6,32,.95));
  display:flex;justify-content:space-between;gap:1rem}
figcaption span{color:var(--yellow);font-family:var(--mono);text-transform:uppercase}
.grid figure[hidden]{display:none}

/* ===== CONTACT ===== */
.contact{padding-bottom:6rem}
.contact p{max-width:36rem;margin:-1.5rem 0 2rem;color:var(--muted)}
form{display:grid;gap:1.2rem;max-width:36rem}
label{display:grid;gap:.4rem;font:400 1rem var(--mono);text-transform:uppercase;color:var(--cyan)}
input,textarea{background:var(--panel);border:1px solid var(--cyan);color:var(--text);padding:.8rem;font:1rem var(--head)}
input:focus,textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 14px rgba(255,43,214,.5)}
form .btn{justify-self:start}
footer{padding:2rem 5vw;border-top:1px solid var(--pink);font:.9rem var(--mono);color:var(--muted)}

/* ===== MOBILE ===== */
@media(max-width:700px){
  .burger{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg1);padding:1rem 5vw}
  .nav nav.open{display:grid;gap:1rem}
  .nav nav a{margin:0}
  .grid .big{grid-column:auto;aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}h1{animation:none}}

/* ===== Bouton verre "Demander un devis" ===== */
@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}
@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}

.button-wrap{
  --anim--hover-time:400ms;
  --anim--hover-ease:cubic-bezier(.25,1,.5,1);
  position:relative;z-index:2;display:inline-block;
  border-radius:999vw;background:transparent;pointer-events:none;
  font-size:1.1rem;                 /* taille du bouton : tout est en "em" */
  transition:all var(--anim--hover-time) var(--anim--hover-ease);
}
.button-shadow{
  --shadow-cuttoff-fix:2em;
  position:absolute;
  width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));
  top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter:blur(clamp(2px,.125em,12px));overflow:visible;pointer-events:none;
}
.button-shadow::after{
  content:"";position:absolute;z-index:0;inset:0;border-radius:999vw;
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.1));
  width:calc(100% - var(--shadow-cuttoff-fix) - .25em);height:calc(100% - var(--shadow-cuttoff-fix) - .25em);
  top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);
  padding:.125em;box-sizing:border-box;
  -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,linear-gradient(#000 0 0);mask-composite:exclude;
  transition:all var(--anim--hover-time) var(--anim--hover-ease);
}

.glass-btn{
  --border-width:clamp(1px,.0625em,4px);
  all:unset;
  display:inline-block;cursor:pointer;position:relative;pointer-events:auto;z-index:3;
  -webkit-tap-highlight-color:transparent;
  background:linear-gradient(-75deg,rgba(255,255,255,.05),rgba(255,255,255,.2),rgba(255,255,255,.05));
  border-radius:999vw;
  box-shadow:
    inset 0 .125em .125em rgba(0,0,0,.05),
    inset 0 -.125em .125em rgba(255,255,255,.5),
    0 .25em .125em -.125em rgba(0,0,0,.2),
    0 0 .1em .25em inset rgba(255,255,255,.2),
    0 0 0 0 rgba(255,255,255,1);
  backdrop-filter:blur(clamp(1px,.125em,4px));-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));
  transition:all var(--anim--hover-time) var(--anim--hover-ease);
}
.glass-btn:hover{
  transform:scale(.975);
  backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em);
  box-shadow:
    inset 0 .125em .125em rgba(0,0,0,.05),
    inset 0 -.125em .125em rgba(255,255,255,.5),
    0 .15em .05em -.1em rgba(0,0,0,.25),
    0 0 .05em .1em inset rgba(255,255,255,.5),
    0 0 0 0 rgba(255,255,255,1);
}
.glass-btn:focus-visible{outline:2px solid var(--yellow);outline-offset:6px}

.glass-btn span{
  position:relative;display:block;user-select:none;
  font:500 1em var(--head);letter-spacing:.02em;text-transform:uppercase;
  color:#fff;                       /* mets rgba(50,50,50,1) sur un fond clair */
  text-shadow:0 .1em .3em rgba(0,0,0,.6);
  padding:.875em 1.8em;
  -webkit-font-smoothing:antialiased;
  transition:all var(--anim--hover-time) var(--anim--hover-ease);
}
.glass-btn span::after{
  content:"";display:block;position:absolute;z-index:3;
  width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));
  top:calc(0% + var(--border-width) / 2);left:calc(0% + var(--border-width) / 2);
  box-sizing:border-box;border-radius:999vw;overflow:clip;
  background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%);
  background-size:200% 200%;background-position:0% 50%;background-repeat:no-repeat;
  mix-blend-mode:screen;pointer-events:none;
  transition:background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease),
             --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}
.glass-btn:hover span::after{background-position:25% 50%}
.glass-btn:active span::after{background-position:50% 15%;--angle-2:-15deg}

.glass-btn::after{
  content:"";position:absolute;z-index:1;inset:0;border-radius:999vw;
  width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));
  top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);
  padding:var(--border-width);box-sizing:border-box;
  background:
    conic-gradient(from var(--angle-1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.5));
  -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,linear-gradient(#000 0 0);mask-composite:exclude;
  transition:all var(--anim--hover-time) var(--anim--hover-ease),--angle-1 500ms ease;
  box-shadow:inset 0 0 0 calc(var(--border-width) / 2) rgba(255,255,255,.5);
}
.glass-btn:hover::after{--angle-1:-125deg}
.glass-btn:active::after{--angle-1:-75deg}

.button-wrap:has(.glass-btn:hover) .button-shadow{filter:blur(clamp(2px,.0625em,6px));transition:filter var(--anim--hover-time) var(--anim--hover-ease)}
.button-wrap:has(.glass-btn:hover) .button-shadow::after{top:calc(var(--shadow-cuttoff-fix) - .875em);opacity:1}
.button-wrap:has(.glass-btn:active){transform:rotate3d(1,0,0,25deg)}
.button-wrap:has(.glass-btn:active) .glass-btn{
  box-shadow:
    inset 0 .125em .125em rgba(0,0,0,.05),
    inset 0 -.125em .125em rgba(255,255,255,.5),
    0 .125em .125em -.125em rgba(0,0,0,.2),
    0 0 .1em .25em inset rgba(255,255,255,.2),
    0 .225em .05em 0 rgba(0,0,0,.05),
    0 .25em 0 0 rgba(255,255,255,.75),
    inset 0 .25em .05em 0 rgba(0,0,0,.15);
}
.button-wrap:has(.glass-btn:active) .button-shadow{filter:blur(clamp(2px,.125em,12px))}
.button-wrap:has(.glass-btn:active) .button-shadow::after{top:calc(var(--shadow-cuttoff-fix) - .5em);opacity:.75}

@media(hover:none) and (pointer:coarse){
  .glass-btn span::after,.glass-btn:active span::after{--angle-2:-45deg}
  .glass-btn::after,.glass-btn:hover::after,.glass-btn:active::after{--angle-1:-75deg}
}

/* ===== Fond aurore animé ===== */
.aurora{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(138,43,226,.8) 0%,rgba(138,43,226,0) 60%),
    radial-gradient(ellipse at 80% 50%,rgba(0,191,255,.7) 0%,rgba(0,191,255,0) 70%),
    radial-gradient(ellipse at 50% 80%,rgba(50,205,50,.6) 0%,rgba(50,205,50,0) 65%),
    linear-gradient(135deg,#000 0%,#0a0520 100%);
  background-blend-mode:overlay,screen,hard-light;
  animation:aurora-drift 25s infinite alternate ease-in-out;
}
.aurora::before{
  content:"";position:absolute;width:200%;height:200%;top:-50%;left:-50%;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 60px);
  animation:grid-shift 20s linear infinite;
}
.aurora::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at center,transparent 70%,rgba(10,5,32,.9) 100%);
  animation:aurora-pulse 8s infinite alternate;
}
@keyframes aurora-drift{
  0%{background-position:0% 0%,0% 0%,0% 0%;filter:hue-rotate(0deg) brightness(1)}
  50%{background-position:-10% -5%,5% 10%,0% 15%;filter:hue-rotate(30deg) brightness(1.2)}
  100%{background-position:5% 10%,-10% -5%,15% 0%;filter:hue-rotate(60deg) brightness(1)}
}
@keyframes grid-shift{to{transform:translate(-50%,-50%)}}
@keyframes aurora-pulse{
  0%,100%{opacity:.8;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.05)}
}
@media(prefers-reduced-motion:reduce){.aurora,.aurora::before,.aurora::after{animation:none}}