:root {
  --navy: #050b18;
  --blue: #087bff;
  --cyan: #13d9ff;
  --paper: #f7f9fc;
  --muted: #9eb1cd;
  /* courbes d'easing unifiées pour toutes les animations du site */
  --ease-reveal: cubic-bezier(.16, .84, .44, 1);   /* fondus/apparitions au scroll : décélération douce */
  --ease-snap: cubic-bezier(.4, 0, .2, 1);          /* interactions hover/click : réactif et net */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: Montserrat, Arial, sans-serif; }

.navbar {
  min-height: 86px;
  background: rgba(5, 11, 24, .93);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
}

.navbar-brand img,
footer img { display: block; width: 130px; height: 34px; object-fit: contain; }
.nav-link { color: #fff !important; font: 11px "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.nav-contact { padding: 10px 14px !important; border: 1px solid rgba(255,255,255,.55); }
.navbar-toggler { border-color: rgba(255,255,255,.6); }
.navbar-toggler-icon { filter: invert(1); }

.hero {
  min-height: 760px;
  color: #fff;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at 75% 47%, #143e9a 0, #081938 28%, var(--navy) 66%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(34,163,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(34,163,255,.09) 1px, transparent 1px);
  background-size: 65px 65px;
  mask-image: linear-gradient(to right, black, transparent 82%);
}

.eyebrow,
.section-label,
.catalog-item span,
.partners > p { font: 11px "DM Mono", monospace; letter-spacing: .12em; }

.hero h1,
h2 { margin: 18px 0 24px; font-size: clamp(47px, 6vw, 88px); line-height: .95; letter-spacing: -.07em; }
h1 em,
h2 em,
.large-copy em { font: 400 1.03em Georgia, serif; }
.hero-copy > p:not(.eyebrow) { max-width: 430px; color: #b9c9e6; font-size: 14px; line-height: 1.8; }

.aria-button {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  margin-top: 15px;
  padding: 16px 20px;
  border: 0;
  background: var(--cyan);
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .3s var(--ease-snap), color .3s var(--ease-snap), transform .3s var(--ease-snap);
}

.aria-button:hover { background: #fff; color: var(--navy); transform: translateY(-3px); }
.aria-button span { font-size: 18px; }

.video-orbit { width: min(40vw, 530px); aspect-ratio: 1; display: grid; place-items: center; position: relative; }

.jarvis-hud { position: relative; width: 72%; aspect-ratio: 1; z-index: 2; animation: breathe 4.5s ease-in-out infinite; will-change: transform; }

.jarvis-wave {
  position: absolute;
  inset: 30%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19,217,255,.55) 0%, rgba(8,123,255,.25) 45%, transparent 72%);
  filter: blur(9px);
  animation: jarvis-glow 4.5s ease-in-out infinite;
  will-change: opacity, transform;
}

.jarvis-ripple {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72%;
  aspect-ratio: 1;
  z-index: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(19,217,255,.6);
  opacity: 0;
  animation: jarvis-ripple 3.6s cubic-bezier(.2,.6,.35,1) infinite;
  will-change: transform, opacity;
}
.ripple-2 { animation-delay: 1.2s; }
.ripple-3 { animation-delay: 2.4s; }

.hud-ring { position: absolute; inset: 0; border-radius: 50%; }
.ring-outer {
  border: 1px dashed rgba(19,217,255,.5);
  animation: jarvis-spin 26s linear infinite;
}
.ring-arc-a {
  inset: 9%;
  border: 2px solid transparent;
  border-top-color: var(--cyan);
  border-right-color: var(--cyan);
  animation: jarvis-spin 7s linear infinite;
}
.ring-arc-b {
  inset: 17%;
  border: 1.5px solid transparent;
  border-bottom-color: rgba(8,123,255,.85);
  border-left-color: rgba(8,123,255,.85);
  animation: jarvis-spin 10s linear infinite reverse;
}
.ring-inner {
  inset: 27%;
  border: 1px dotted rgba(111,228,255,.75);
  animation: jarvis-spin 15s linear infinite;
}
.hud-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  z-index: 2;
  border-radius: 50%;
  background: #eafcff;
  box-shadow: 0 0 10px 3px var(--cyan), 0 0 24px 8px rgba(8,123,255,.7);
  animation: jarvis-glow 4.5s ease-in-out infinite;
}

.orbit-caption { position: absolute; right: 0; bottom: -14px; color: var(--cyan); font: 10px "DM Mono", monospace; letter-spacing: .12em; }
.orbit-caption i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }

.section { padding: 130px 0; }
.section-label { color: var(--blue); }
.large-copy { max-width: 850px; margin: 0 0 32px; font-size: clamp(29px, 3.8vw, 54px); line-height: 1.13; letter-spacing: -.055em; }
.body-copy { max-width: 540px; color: #657285; font-size: 14px; line-height: 1.85; }

.catalog { padding: 125px 0; color: #fff; background: var(--navy); overflow: hidden; }
.catalog-header { max-width: 760px; margin-bottom: 60px; }
.catalog-header .section-label { color: var(--cyan); }
.catalog-header p:last-child { max-width: 430px; color: var(--muted); font-size: 14px; line-height: 1.8; }

.catalog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .75fr);
  gap: 9%;
  align-items: center;
  min-height: 380px;
  padding: 20px 7% 56px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.product-media {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
  background: radial-gradient(circle, #102850 0, transparent 67%);
}

.product-media img {
  max-width: min(100%, 340px);
  max-height: 280px;
  object-fit: contain;
}

.product-duo { gap: 0; }
.product-duo img { width: 52%; }
.product-duo img:last-child { margin-left: -14%; }
.product-info span { color: var(--cyan); }
.product-info h3 { margin: 19px 0 17px; font-size: clamp(30px, 3.3vw, 50px); letter-spacing: -.06em; }
.product-info p { max-width: 430px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 22px; }
.product-card {
  padding: 26px 26px 30px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .4s var(--ease-snap), border-color .4s var(--ease-snap), background-color .4s var(--ease-snap);
}
.product-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.045); border-color: rgba(19,217,255,.45); }
.product-card-media { display: flex; justify-content: center; align-items: center; min-height: 140px; margin-bottom: 18px; background: radial-gradient(circle, #102850 0, transparent 90%); }
.product-card-media img { max-width: 100%; max-height: 130px; object-fit: contain; transition: transform .5s var(--ease-snap); }
.product-card:hover .product-card-media img { transform: scale(1.05); }
.product-card span { color: var(--cyan); font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.product-card h3 { margin: 12px 0 9px; font-size: 19px; letter-spacing: -.03em; }
.product-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.catalog-item.from-left,
.catalog-item.from-right { opacity: 0; will-change: opacity, transform; transition: opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal); }
.catalog-item.from-left { transform: translateX(-70px); }
.catalog-item.from-right { transform: translateX(70px); }
.catalog-item.is-visible { opacity: 1; transform: translateX(0); }

.concept-symbol { color: #e4f7ff; font-size: clamp(180px, 27vw, 380px); font-weight: 800; line-height: .7; letter-spacing: -.18em; }
.concept-symbol span { color: var(--cyan); }
.concept-photo { display: block; width: min(100%, 430px); margin: 0 auto; border-radius: 50%; filter: drop-shadow(0 25px 60px rgba(8,123,255,.25)); transition: filter .4s var(--ease-snap), transform .4s var(--ease-snap); }
.concept-photo:hover { transform: translateY(-4px); filter: drop-shadow(0 32px 70px rgba(8,123,255,.38)); }

.concept-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 40px; margin-top: 110px; }
.concept-feature-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; color: var(--blue); background: rgba(8,123,255,.09); border-radius: 50%; transition: background-color .4s var(--ease-snap), color .4s var(--ease-snap), transform .4s var(--ease-snap); }
.concept-feature:hover .concept-feature-icon { color: #fff; background: var(--blue); transform: scale(1.08); }
.concept-feature-icon svg { width: 26px; height: 26px; }
.concept-feature h4 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.03em; }
.concept-feature p { margin: 0; max-width: 340px; color: #657285; font-size: 13.5px; line-height: 1.8; }

.pricing { padding: 125px 0; color: #fff; background: var(--navy); }
.pricing .catalog-header .section-label { color: var(--cyan); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 44px 34px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .4s var(--ease-snap), border-color .4s var(--ease-snap);
}
.pricing-card:hover { transform: translateY(-8px); border-color: rgba(19,217,255,.5); }
.pricing-featured { background: linear-gradient(165deg, #0c2a63 0, #081938 60%); border-color: var(--cyan); box-shadow: 0 25px 70px rgba(8,123,255,.35); transform: scale(1.05); }
.pricing-featured:hover { transform: scale(1.05) translateY(-8px); }
.pricing-badge { position: absolute; top: -13px; left: 34px; padding: 6px 14px; color: var(--navy); background: var(--cyan); font: 10px "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.pricing-name { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.pricing-tagline { margin: 6px 0 26px; color: var(--muted); font-size: 13px; }
.pricing-price { margin: 0 0 30px; font-size: 44px; font-weight: 800; letter-spacing: -.04em; }
.pricing-price span { color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.pricing-features { flex: 1; margin: 0 0 34px; padding: 0; list-style: none; display: grid; gap: 13px; }
.pricing-features li { position: relative; padding-left: 22px; color: #c4d3e8; font-size: 13.5px; line-height: 1.6; }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan); font-weight: 700; }
.pricing-features li span { display: block; margin-top: 1px; color: var(--muted); font-size: .86em; }
.pricing-cta { align-self: flex-start; }

.partners { padding: 80px 0 70px; overflow: hidden; background: #fff; border-block: 1px solid #dbe3ed; }
.partners > p { color: #657285; }
.logo-rail { margin-top: 48px; overflow: hidden; }
.logo-track { display: flex; width: max-content; will-change: transform; animation: rail 22s linear infinite; }
.logo-track span { display: grid; width: 220px; height: 75px; margin: 0 32px; place-items: center; }
.logo-track img { max-width: 180px; max-height: 58px; object-fit: contain; mix-blend-mode: multiply; }

.contact { padding: 125px 0; color: #fff; background: var(--navy); }
.contact .section-label { color: var(--cyan); }
.contact p:not(.section-label) { color: var(--muted); font-size: 14px; line-height: 1.8; }
.contact-form label { display: block; margin-bottom: 27px; color: #aabece; font: 10px "DM Mono", monospace; letter-spacing: .09em; }
.contact-form input,
.contact-form textarea { display: block; width: 100%; margin-top: 5px; padding: 13px 0 9px; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); outline: 0; background: transparent; color: #fff; font: 15px Montserrat, sans-serif; resize: vertical; }
.form-message { padding: 12px; color: var(--navy); background: #c9f8ff; font-size: 12px; }

.contact-map {
  overflow: hidden;
  margin-top: 90px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.contact-map iframe {
  display: block;
  /* teinte la carte Google en tons sombres pour matcher la section */
  filter: grayscale(.5) invert(92%) contrast(90%);
}

.contact-info { list-style: none; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 22px; }
.contact-info li { display: flex; align-items: center; gap: 16px; }
.contact-info-icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; color: var(--cyan); background: rgba(19,217,255,.08); border-radius: 50%; }
.contact-info-icon svg { width: 19px; height: 19px; }
.contact-info-text { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.contact-info-label { color: var(--cyan); font: 10px "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.contact-info a { color: #fff; text-decoration: none; }
.contact-info a:hover { color: var(--cyan); }

footer { padding: 28px 0; color: #fff; background: #030711; font: 10px "DM Mono", monospace; letter-spacing: .1em; }
footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
footer a { color: inherit; text-decoration: none; }

.social-links { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; transition: color .35s var(--ease-snap), background-color .35s var(--ease-snap), border-color .35s var(--ease-snap), transform .35s var(--ease-snap); }
.social-links a:hover { color: #fff; transform: translateY(-3px); border-color: transparent; }
.social-links .social-fb:hover { background: #1877f2; }
.social-links .social-wa:hover { background: #25d366; }
.social-links .social-li:hover { background: #0a66c2; }
.social-links .social-ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

.reveal { opacity: 0; transform: translateY(25px); will-change: opacity, transform; transition: opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes jarvis-glow {
  0%, 100% { opacity: .65; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.18); }
}
@keyframes jarvis-spin { to { transform: rotate(360deg); } }
@keyframes jarvis-ripple {
  0%   { transform: scale(.82); opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes rail { to { transform: translateX(-50%); } }

@media (max-width: 991px) {
  .navbar-collapse { padding: 15px 24px 24px; margin: 0 -12px; background: var(--navy); }
  .hero { min-height: 820px; }
  .video-orbit { width: min(75vw, 440px); margin-top: 50px; }
  .section, .catalog, .contact, .pricing { padding: 85px 0; }
  .catalog-header { margin-bottom: 45px; }
  .concept-features { grid-template-columns: repeat(2, 1fr); margin-top: 70px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .pricing-featured { transform: none; }
  .pricing-featured:hover { transform: translateY(-8px); }
}

@media (max-width: 767px) {
  .catalog-item { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 10px 0 40px; }
  .product-media { min-height: 220px; }
  .product-media img { max-height: 230px; }
  .product-grid { grid-template-columns: 1fr; }
  .concept-features { grid-template-columns: 1fr; }
  footer .container { align-items: flex-start; flex-direction: column; }
}

/* Respecte les préférences d'accessibilité des visiteurs sensibles aux animations */
@media (prefers-reduced-motion: reduce) {
  .jarvis-hud,
  .jarvis-wave,
  .jarvis-ripple,
  .hud-ring,
  .hud-dot,
  .logo-track,
  .reveal,
  .catalog-item.from-left,
  .catalog-item.from-right,
  .product-card,
  .product-card-media img,
  .pricing-card,
  .pricing-featured,
  .concept-feature-icon,
  .concept-photo,
  .aria-button,
  .social-links a {
    animation: none !important;
    transition: none !important;
  }
  .reveal,
  .catalog-item.from-left,
  .catalog-item.from-right { opacity: 1 !important; transform: none !important; }
  .product-card:hover,
  .product-card:hover .product-card-media img,
  .pricing-card:hover,
  .pricing-featured,
  .pricing-featured:hover,
  .concept-photo:hover,
  .aria-button:hover,
  .social-links a:hover { transform: none !important; }
}

.form-message.is-error { background: #ffd7d7; }