/* Variante bleu électrique : plans superposés, navigation flottante et réseau animé. */
@font-face {
  font-family: 'Cal Sans';
  src: url('./CalSans-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --blue: #1557ff;
  --blue-bright: #3b78ff;
  --blue-deep: #0b226f;
  --orange: var(--blue);
  --orange-light: var(--blue);
  background: #080e24;
}
body { background: #080e24; }
.site-shell {
  max-width: none;
  margin: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

/* Le hero reste en arrière-plan pendant que le panneau clair le recouvre. */
.hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  min-height: 0;
  border-radius: 0;
  background: radial-gradient(ellipse 86% 90% at 23% 24%, #3489ff 0%, #1557ff 39%, #123ba9 70%, #0b1747 100%);
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: -18% -22%;
  pointer-events: none;
  background: radial-gradient(ellipse 36% 42% at 38% 43%, #94caff8c 0%, #5b9cff50 43%, transparent 100%);
  opacity: .72;
  transform: translate3d(-7%, 3%, 0) scale(1);
  animation: hero-glow-drift 26s ease-in-out infinite alternate;
}
.hero.is-covered::before { animation-play-state: paused; }
@keyframes hero-glow-drift {
  to { transform: translate3d(9%, -5%, 0) scale(1.09); opacity: .9; }
}
.hero-portrait {
  inset: -3% -2% -3% auto;
  width: 75%;
  height: 106%;
  transform: scale(var(--hero-scale, 1.07));
  transform-origin: center center;
  will-change: transform;
}
.hero-portrait img {
  filter: grayscale(1) contrast(1.28) brightness(1.18);
  mix-blend-mode: multiply;
  opacity: .84;
}
.hero-wash {
  background: linear-gradient(90deg, #0739a242 0%, #0d2b8070 48%, #050d31ae 100%),
              linear-gradient(0deg, #031340c2, transparent 38%);
}
.hero-grid { padding-top: 110px; }
.service-row span { color: #c7d9ff; }
.hero-spacer { height: 100svh; }
.content-panel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: clamp(22px, 3.2vw, 48px);
  background: #fff;
  box-shadow: 0 -20px 65px #061d5a32, 0 30px 65px #050a1b28;
}
.contact-reveal { height: 100svh; }
.kicker, .accent { color: var(--blue); }
.section-intro .kicker, .about-copy .kicker { color: var(--blue); }
.project-filters button:hover { border-color: var(--blue); color: var(--blue); }
.project-filters button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.carousel-stage::before { background: radial-gradient(ellipse, #1557ff22 0%, transparent 68%); }
.carousel-controls button:hover { border-color: var(--blue); background: var(--blue); }
.dialog-thumbnails button[aria-current="true"] { border-color: var(--blue); }

/* Navigation persistante et contraste adapté au plan situé dessous. */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  color: #fff;
  padding: clamp(18px, 2.4vw, 30px) clamp(23px, 4.8vw, 72px);
  transition: color .25s ease;
}
.top-nav.on-light { color: #161922; }
.brand { position: relative; z-index: 6; color: currentColor; text-shadow: 0 1px 15px #0002; font-family: 'Cal Sans', 'Inter', sans-serif; font-weight: 400; letter-spacing: -.025em; }
.brand span { color: #fff; }
.top-nav.on-light .brand span { color: var(--blue); }
.nav-links { gap: clamp(12px, 2vw, 27px); }
.nav-primary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: #ffffff24;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px #ffffff2e, 0 8px 25px #00000012;
}
.top-nav.on-light .nav-primary { background: #f2f4f7c9; box-shadow: inset 0 1px #fff, 0 8px 22px #101b3514; }
.nav-primary a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  color: currentColor;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.nav-primary a:focus-visible { outline-offset: -2px; }
.nav-hover-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--hover-width, 0px);
  border-radius: 999px;
  background: #0000004d;
  opacity: 0;
  transform: translateX(var(--hover-x, 0px));
  transition: transform .25s cubic-bezier(.2,.8,.2,1), width .25s cubic-bezier(.2,.8,.2,1), opacity .18s;
  pointer-events: none;
}
.top-nav.on-light .nav-hover-pill { background: #0000001b; }
.nav-primary.is-hovered .nav-hover-pill { opacity: 1; }
.nav-contact {
  min-height: 46px;
  padding: 0 22px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 24px #0b3dd744;
}
.nav-contact:hover { background: #0b49ee; }
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #161a23;
  box-shadow: 0 8px 23px #060f2c34;
}
.nav-toggle span {
  display: block;
  width: 23px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.top-nav.is-collapsed .nav-toggle { display: flex; }
.top-nav.is-collapsed .nav-links {
  position: absolute;
  right: clamp(23px, 4.8vw, 72px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

/* Réseau : grande signature et logos lisibles en boucle. */
.partners {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 70px);
  min-height: 220px;
  border-radius: 0;
  background: #f3f6fd;
}
.partners h2 {
  width: auto;
  max-width: 300px;
  color: #171d30;
  font-size: clamp(25px, 2.7vw, 39px);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 800;
}
.partners h2 span { color: var(--blue); }
.partner-marquee {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partner-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: partner-scroll 26s linear infinite;
  animation-play-state: paused;
}
.partners.is-visible .partner-track { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .partner-marquee:hover .partner-track { animation-play-state: paused; }
}
.partner-logos {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(42px, 5vw, 80px);
  padding-right: clamp(42px, 5vw, 80px);
  width: max-content;
  overflow: visible;
}
.partner-logos img {
  flex: none;
  width: clamp(150px, 13vw, 190px);
  height: 88px;
  max-width: none;
  max-height: none;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  object-fit: contain;
  filter: grayscale(1);
  mix-blend-mode: normal;
  opacity: 0;
  transform: translateY(19px);
  transition: opacity .55s ease, transform .55s ease;
}
.partners.is-visible .partner-logos img { opacity: .82; transform: none; }
.partners.is-visible .partner-logos img:nth-child(2) { transition-delay: .08s; }
.partners.is-visible .partner-logos img:nth-child(3) { transition-delay: .16s; }
.partners.is-visible .partner-logos img:nth-child(4) { transition-delay: .24s; }
.partners.is-visible .partner-logos img:nth-child(5) { transition-delay: .32s; }
@keyframes partner-scroll { to { transform: translateX(-50%); } }

/* Contact et mentions légales : dernier décor, du bleu électrique au noir. */
.contact-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  background: radial-gradient(ellipse 80% 90% at 50% 4%, #3b7bff 0%, #1557ff 31%, #0e2b83 62%, #060918 100%);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
body.contact-visible .contact-scene { opacity: 1; visibility: visible; pointer-events: auto; }
.contact-panel {
  flex: 1 0 auto;
  gap: 13px;
  min-height: min(600px, 70dvh);
  margin: 0;
  padding: clamp(78px, 10vh, 105px) 24px 24px;
  border-radius: 0;
  background: transparent;
}
.contact-panel h2 { font-size: clamp(64px, 7.3vw, 110px); }
.contact-photo { border-color: #ffffffa3; }
.contact-kicker, .contact-description { color: #edf4ff; }
.contact-panel h2 span { color: #b9ceff; }
.contact-linkedin { border-color: #ffffff8a; }
.site-footer {
  flex: none;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: transparent;
  color: #b5c0df;
}
.footer-top, .site-footer details { border-color: #ffffff30; }
.footer-top a, .legal-grid a, .site-footer summary, .legal-grid h3 { color: #fff; }
.footer-rights { color: #a3acc8; }

@media (max-width: 767px) {
  .hero { height: 100svh; min-height: 0; border-radius: 0; }
  .hero-spacer, .contact-reveal { height: 100svh; }
  .hero-portrait { inset: -3%; width: 106%; height: 106%; }
  .hero-portrait img {
    opacity: .88;
    filter: grayscale(1) contrast(1.2) brightness(1.15);
    mix-blend-mode: screen;
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 82%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 82%);
  }
  .hero-wash { background: linear-gradient(180deg, #08266312 0%, #0b3eab38 32%, #081b5bae 70%, #051443e8 100%); }
  .hero::before {
    background: radial-gradient(ellipse 36% 32% at 27% 65%, #94caff80 0%, #5b9cff40 45%, transparent 100%);
    opacity: .55;
  }
  .hero-grid { padding-top: 105px; }
  .top-nav { padding: 18px 22px; }
  .nav-toggle { display: flex; }
  .top-nav:has(.nav-links.is-open) .brand { color: #171b25; }
  .top-nav:has(.nav-links.is-open) .brand span { color: var(--blue); }
  .top-nav.is-collapsed .nav-links, .nav-links {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 87px 22px 26px;
    border-radius: 0 0 26px 26px;
    background: #ffffffed;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    color: #171b25;
    box-shadow: 0 18px 45px #0a123b3b;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
  }
  .nav-links.is-open, .top-nav.is-collapsed .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav-primary, .top-nav.on-light .nav-primary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-primary a { justify-content: flex-start; padding: 7px 0; font-size: 25px; color: #171b25; }
  .nav-hover-pill { display: none; }
  .nav-contact { align-self: flex-start; margin: 0; }
  .partners { grid-template-columns: 1fr; gap: 25px; min-height: 215px; padding: 35px 24px; }
  .partners h2 { font-size: 30px; }
  .partner-marquee { margin: 0 -24px; }
  .partner-logos { gap: 38px; padding-right: 38px; }
  .partner-logos img { width: 150px; height: 76px; }
  .partner-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .partner-marquee::-webkit-scrollbar { display: none; }
  .partner-track { animation: none; transform: none; }
  .partners .partner-logos img { opacity: .82; transform: none; }
  .contact-panel { min-height: min(570px, 72dvh); padding-top: 100px; }
  .site-footer { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; transform: none; opacity: .65; }
  .hero-portrait { transform: none !important; }
  .partner-track { animation: none; }
  .partner-logos[aria-hidden="true"] { display: none; }
  .partner-logos img { opacity: .82; transform: none; }
  .nav-hover-pill { transition: none; }
}