/* GRAPNER — Bleu acier, V2 premium
   Surcouche sans modification de la structure ni des interactions existantes. */
:root {
  --bg:#101821; --panel:#17222d; --panel2:#1c2a37;
  --ink:#f0f4f7; --muted:#afbdcb; --faint:#8192a3;
  --blue:#b8d5ea; --button:#93bdd5;
  --line:rgba(191,211,230,.17);
  --premium-ease:cubic-bezier(.22,1,.36,1);
}
body{background:var(--bg);color:var(--ink)}
html{scroll-behavior:smooth}
.header{
  background:rgba(15,23,32,.91);
  border-bottom:1px solid rgba(184,212,236,.14);
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  transition:background .48s var(--premium-ease),box-shadow .48s var(--premium-ease)
}
.header.is-scrolled{background:rgba(14,22,32,.97);box-shadow:0 10px 35px rgba(3,10,16,.12)}
.desktop-nav a{position:relative;transition:color .32s ease}
.desktop-nav a:after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:1px;
  background:var(--button);transform:scaleX(0);transform-origin:left;transition:transform .42s var(--premium-ease);opacity:.85}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after{transform:scaleX(1)}
.button,.round,.card-arrow{transition:transform .5s var(--premium-ease),background-color .36s ease,border-color .36s ease,box-shadow .5s var(--premium-ease),color .36s ease}
.button{border-radius:3px}
.button.blue{background:var(--button);color:#122432;box-shadow:inset 0 1px rgba(255,255,255,.28),0 6px 21px #050e1740}
.button.blue:hover{background:#b5d6e8;transform:translateY(-2px);box-shadow:inset 0 1px rgba(255,255,255,.35),0 11px 28px #050e1748}
.button.blue:active{transform:translateY(0) scale(.995)}
.hero{background:#101821}
.hero-image>img{opacity:.87;filter:saturate(.61) contrast(1.06) hue-rotate(-4deg);animation:premium-photo-drift 31s ease-in-out infinite alternate}
.photo-shade{
  background:linear-gradient(90deg,#101821 0,rgba(16,24,33,.91) 12%,rgba(16,24,33,.22) 55%,rgba(16,24,33,.06)),
  linear-gradient(0deg,#101821 0,rgba(16,24,33,.54) 17%,transparent 60%,rgba(13,24,37,.39))
}
.hero-grid{opacity:.6}
.hero-content{position:relative;z-index:3}
.hero-eyebrow,.hero-meta{color:#b9cbdc}
.hero h1 em,.accent{color:#b6d5e8}
.intro{animation:premium-arrive 1.05s var(--premium-ease) both}
.hero h1 .intro:nth-child(2){animation-delay:.12s}
.hero-bottom.intro{animation-delay:.22s}
.capabilities{background:#15212c}
.capability-row a{transition:color .36s ease,transform .45s var(--premium-ease),opacity .35s ease}
.capability-row a:hover{color:#c4e0f1;transform:translateY(-2px)}
.expertise{background:radial-gradient(ellipse 70% 58% at 98% 2%,rgba(84,126,162,.07),transparent),#101821}
.materials{background:#16212b}
.project{background:#1a2732}
.company{background:radial-gradient(ellipse 58% 70% at 3% 15%,rgba(83,123,157,.075),transparent),#101821}
.faq-section{background:#111c27}
.footer{background:#101923}
.service-card{background:linear-gradient(155deg,#1b2a37 0%,#16212c 85%);border-color:rgba(184,205,226,.14);
  transition:transform .58s var(--premium-ease),border-color .4s ease,background .45s ease,box-shadow .5s ease}
.service-card:hover{transform:translateY(-4px);border-color:rgba(160,197,223,.48);background:#213240;box-shadow:0 18px 40px rgba(2,8,14,.16)}
.material-display{background:radial-gradient(ellipse at 65% 34%,#3d566b -10%,#253544 36%,#131d27 75%)}
.material-tabs button{transition:color .28s ease,background .3s ease,border-color .3s ease}
.contact{background:#c5d1dc;color:#182839}
.reveal.waiting{opacity:0;transform:translate3d(0,19px,0);transition:opacity .85s ease,transform .9s var(--premium-ease)}
.reveal.waiting.seen{opacity:1;transform:translate3d(0,0,0)}
.service-grid .reveal:nth-child(2),.service-grid .service-card:nth-child(2){transition-delay:.065s}
.service-grid .reveal:nth-child(3),.service-grid .service-card:nth-child(3){transition-delay:.11s}
.service-grid .reveal:nth-child(4),.service-grid .service-card:nth-child(4){transition-delay:.15s}
.service-grid .reveal:nth-child(5),.service-grid .service-card:nth-child(5){transition-delay:.19s}
.menu-dialog{background:linear-gradient(140deg,#192838 0%,#101b27 70%)}
.menu-dialog[open],dialog[open]{animation:premium-dialog .42s var(--premium-ease) both}
.menu-dialog nav>a{transition:color .36s ease,transform .43s var(--premium-ease)}
.menu-dialog nav>a:hover{transform:translateX(4px)}
dialog::backdrop{background:rgba(7,15,24,.77);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
dialog{background:#192534;border-color:rgba(159,192,219,.28)}
@keyframes premium-arrive {0%{opacity:0;transform:translate3d(0,19px,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes premium-dialog{0%{opacity:0;transform:translate3d(0,12px,0) scale(.995)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes premium-photo-drift{0%{transform:scale(1.004) translate3d(0,0,0)}100%{transform:scale(1.034) translate3d(-.3%,.15%,0)}}
@media(max-width:760px){
  .hero-image>img{opacity:.56}
  .photo-shade{background:linear-gradient(0deg,#101821 0,rgba(16,24,33,.88) 29%,rgba(16,24,33,.29) 73%,rgba(16,24,33,.68)),linear-gradient(90deg,#101821b3,transparent 80%)}
  .reveal.waiting{transform:translate3d(0,12px,0)}
  .service-card:hover{transform:none}
  .menu-dialog{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .intro{animation:none!important;opacity:1;transform:none}
  .reveal,.reveal.waiting{opacity:1!important;transform:none!important;transition:none!important}
  .hero-image>img{animation:none!important}
  .button,.service-card,.menu-dialog nav>a{transition:none!important}
}
@media print{body,.hero,.materials,.project,.faq-section,.company,.expertise,.footer{background:white!important;color:black!important}}