/* ===================================================
   Cyberg — Global CSS
   Charte graphique officielle : Montserrat + Lato, Rouge #C10016, Bleu Nuit #192839
   =================================================== */

:root {
  /* Couleurs primaires — charte officielle */
  --accent:         #C10016;
  --accent-hover:   #a10012;
  --accent-light:   #ff3347;
  --accent-glow:    rgba(193, 0, 22, 0.12);

  /* Fonds — basés sur Bleu Nuit #192839 */
  --bg-dark:        #0d1b29;
  --bg-section:     #192839;
  --bg-card:        #1e3349;
  --bg-card-hover:  #243d57;

  /* Textes */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  /* Bordures */
  --border:         #1e3349;
  --border-light:   #2d4a6a;

  /* Divers */
  --white:          #ffffff;
  --success:        #10b981;
  --blue-steel:     #7195BD;

  /* Typographie — charte officielle */
  --font-sans:  'Montserrat', Arial, sans-serif;
  --font-body:  'Lato', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 18px; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  background-color: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
:focus-visible { outline: 2px solid #7195BD; outline-offset: 2px; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease forwards; }

/* ── Animation picto (disponible pour les sections héros) ─────────────────── */
@keyframes pictoFloat {
  0%   { transform: rotate(0deg)   scale(1)    translateY(0px);  }
  25%  { transform: rotate(8deg)   scale(1.1)  translateY(-7px); }
  50%  { transform: rotate(0deg)   scale(1.05) translateY(-2px); }
  75%  { transform: rotate(-7deg)  scale(0.93) translateY(5px);  }
  100% { transform: rotate(0deg)   scale(1)    translateY(0px);  }
}
.picto-float {
  animation: pictoFloat 4s ease-in-out infinite;
  will-change: transform;
}

/* ── Mega-menu — géré par Reflex state (clic), pas par CSS hover ─────────── */

/* ── Lien téléchargement footer ────────────────────────────────────────────── */
.footer-download { color: var(--text-secondary); }
.footer-download:hover { color: var(--accent-light); }

/* ── Effet de chargement hero (zoom-out + fade) ───────────────────────────── */
@keyframes heroBgReveal {
  from { transform: scale(1.08); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.hero-bg-layer {
  animation: heroBgReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform;
  transform-origin: center center;
}

@keyframes heroContentReveal {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-content {
  animation: heroContentReveal 0.7s ease-out 0.4s both;
}

/* ── Sections avec lucioles / aurora ────────────────────────────────────────── */
/* .lucioles et .red-aurora ont leur propre overflow:hidden — le wrapper n'en a
   plus besoin. Sans overflow:hidden, pas de stacking context forcé → le
   backdrop-filter des glass-card fonctionne sans contrainte. */
.with-fireflies { position: relative; }

/* ── Fondu léger haut/bas — vignette interne à chaque section ───────────────
   Couleur par défaut : transparent → aucun effet visible sur sections sombres.
   .section-light surcharge avec #f0f4f8 pour un vignette cohérent sur fond clair. */
.with-fireflies::before,
.with-fireflies::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 5rem;
  pointer-events: none;
  z-index: 5;
}
.with-fireflies::before {
  top: 0;
  background: transparent;
}
.with-fireflies::after {
  bottom: 0;
  background: transparent;
}

.lucioles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.luciole {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ff3347;
  box-shadow: 0 0 6px 3px rgba(193,0,22,0.55), 0 0 14px 5px rgba(193,0,22,0.18);
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes luc1 {
  0%,100% { transform:translate(0,0);         opacity:0;   }
  15%     {                                    opacity:0.8; }
  50%     { transform:translate(42px,-58px);  opacity:0.9; }
  82%     {                                    opacity:0.2; }
}
@keyframes luc2 {
  0%,100% { transform:translate(0,0);          opacity:0;   }
  20%     {                                     opacity:0.6; }
  48%     { transform:translate(-38px,-44px);  opacity:0.9; }
  78%     { transform:translate(-15px,-78px);  opacity:0.2; }
}
@keyframes luc3 {
  0%,100% { transform:translate(0,0);          opacity:0;   }
  28%     { transform:translate(18px,-22px);   opacity:0.7; }
  58%     { transform:translate(-8px,-62px);   opacity:0.9; }
  88%     {                                     opacity:0.1; }
}
@keyframes luc4 {
  0%,100% { transform:translate(0,0);          opacity:0;   }
  30%     {                                     opacity:0.5; }
  52%     { transform:translate(52px,-30px);   opacity:0.8; }
  78%     { transform:translate(28px,-68px);   opacity:0.3; }
}
@keyframes luc5 {
  0%,100% { transform:translate(0,0);          opacity:0;   }
  12%     {                                     opacity:0.5; }
  42%     { transform:translate(-28px,-46px);  opacity:0.7; }
  68%     { transform:translate(12px,-84px);   opacity:0.4; }
}
@keyframes luc6 {
  0%,100% { transform:translate(0,0);          opacity:0;   }
  35%     { transform:translate(22px,-20px);   opacity:0.9; }
  62%     { transform:translate(-12px,-54px);  opacity:0.6; }
  90%     {                                     opacity:0.1; }
}
@keyframes luc7 {
  0%,100% { transform:translate(0,0);          opacity:0;   }
  22%     {                                     opacity:0.7; }
  50%     { transform:translate(-48px,-28px);  opacity:0.9; }
  80%     { transform:translate(-20px,-58px);  opacity:0.2; }
}
@keyframes luc8 {
  0%,100% { transform:translate(0,0);          opacity:0;   }
  38%     { transform:translate(34px,-48px);   opacity:0.8; }
  72%     { transform:translate(52px,-18px);   opacity:0.4; }
}

.luc1 { animation: luc1  8s ease-in-out 0s    infinite; }
.luc2 { animation: luc2 11s ease-in-out 1.5s  infinite; }
.luc3 { animation: luc3  9s ease-in-out 3.2s  infinite; }
.luc4 { animation: luc4 13s ease-in-out 0.8s  infinite; }
.luc5 { animation: luc5  7s ease-in-out 4.1s  infinite; }
.luc6 { animation: luc6 10s ease-in-out 2.4s  infinite; }
.luc7 { animation: luc7 14s ease-in-out 5.5s  infinite; }
.luc8 { animation: luc8  6s ease-in-out 1.0s  infinite; }

/* ── Cartes partenaires — couleur logo au survol du carré ─────────────────── */
.partner-card img {
  filter: grayscale(100%) brightness(1.8);
  transition: filter 0.25s ease;
}
.partner-card:hover img {
  filter: grayscale(0%) brightness(1);
}
/* Sur fond clair, les logos doivent être sombres (pas blancs) */
.section-light .partner-card img {
  filter: grayscale(100%) brightness(0.55);
}
.section-light .partner-card:hover img {
  filter: grayscale(0%) brightness(1);
}

/* ── Carousel partenaires — double bandeau sens inverses ───────────────────── */
@keyframes scroll-partners-ltr {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scroll-partners-rtl {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.partner-carousel {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.partner-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 1.25rem;
  will-change: transform;
}
.partner-track-ltr { animation: scroll-partners-ltr 40s linear infinite; }
.partner-track-rtl { animation: scroll-partners-rtl 50s linear infinite; }
.partner-carousel:hover .partner-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .partner-track-ltr,
  .partner-track-rtl { animation: none; transform: translateX(0) !important; }
}

/* ── Cartes outlined ghost ───────────────────────────────────────────────────── */
body .glass-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(193,0,22,0.22) !important;
  box-shadow: none;
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(.22,.61,.36,1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  will-change: transform;
}
body .glass-card:hover {
  background: rgba(193,0,22,0.05) !important;
  border-color: rgba(193,0,22,0.65) !important;
  box-shadow: 0 0 0 1px rgba(193,0,22,0.10), 0 8px 32px rgba(193,0,22,0.18) !important;
  transition: transform 0.08s linear, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* ── Aurora rouge (gradients animés sous les cartes) ────────────────────────── */
/* .red-aurora = container pour les aurora-blob rouges floutées. */
.red-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ── Grain fractal GLOBAL — appliqué sur html::after, sous tout le contenu ───
   Position: fixed pour couvrir le viewport quel que soit le scroll.
   Pas de mix-blend-mode (incompatible rendu sur fond très sombre) : on utilise
   un noise blanc semi-transparent qui fonctionne sur tous les backgrounds.
   pointer-events: none pour laisser passer les clics. */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;          /* au-dessus du contenu mais pointer-events:none */
  /* Noise blanc semi-transparent (alpha 0.85 dans le feColorMatrix).
     S'additionne simplement au fond — visible sur sombre comme sur clair. */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  background-repeat: repeat;
  opacity: 0.08;          /* subtil mais perceptible sur toute surface */
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  will-change: transform, opacity;
}
.aurora-blob-1 {
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(193,0,22,0.38) 0%, rgba(193,0,22,0.12) 45%, transparent 70%);
  top: 18%; left: 5%;
  animation: aurora1 14s ease-in-out infinite;
  opacity: 0.75;
}
.aurora-blob-2 {
  width: 450px; height: 550px;
  background: radial-gradient(ellipse, rgba(193,0,22,0.28) 0%, rgba(193,0,22,0.08) 50%, transparent 70%);
  bottom: 18%; right: 8%;
  animation: aurora2 19s ease-in-out 4s infinite;
  opacity: 0.65;
}
.aurora-blob-3 {
  width: 500px; height: 350px;
  background: radial-gradient(ellipse, rgba(193,0,22,0.22) 0%, transparent 70%);
  top: 30%; left: 45%;
  animation: aurora3 24s ease-in-out 10s infinite;
  opacity: 0.55;
}
@keyframes aurora1 {
  0%,100% { transform: translate(0,0) scale(1);           opacity: 0.75; }
  35%      { transform: translate(60px,30px) scale(1.15);  opacity: 1.00; }
  68%      { transform: translate(-30px,50px) scale(0.90); opacity: 0.50; }
}
@keyframes aurora2 {
  0%,100% { transform: translate(0,0) scale(1);            opacity: 0.65; }
  42%      { transform: translate(-60px,-30px) scale(1.15); opacity: 0.90; }
  72%      { transform: translate(40px,30px) scale(0.85);   opacity: 0.40; }
}
@keyframes aurora3 {
  0%,100% { transform: translate(0,0) scale(1);             opacity: 0.55; }
  28%      { transform: translate(50px,35px) scale(1.12);    opacity: 0.80; }
  78%      { transform: translate(-50px,-30px) scale(0.92);  opacity: 0.60; }
}

/* Le contenu passe par-dessus lucioles et aurora grâce à l'ordre DOM (pas besoin de z-index).
   Ne PAS ajouter z-index ici — ça créerait un stacking context et briserait backdrop-filter. */
.with-fireflies > *:not(.lucioles):not(.red-aurora):not(.iso-cube-corner) { position: relative; }

/* ── Widget support flottant ─────────────────────────────────────────────── */
@keyframes pulse-support {
  0%, 100% { box-shadow: 0 4px 20px rgba(193,0,22,0.45); }
  50%       { box-shadow: 0 4px 28px rgba(193,0,22,0.75), 0 0 0 6px rgba(193,0,22,0.15); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Cartes FAQ — bordure rouge au survol ─────────────────────────────────── */
body .glass-card-faq:hover {
  border-color: rgba(193,0,22,0.80) !important;
  box-shadow: 0 0 0 1px rgba(193,0,22,0.15), 0 8px 24px rgba(193,0,22,0.18) !important;
}

/* ── Bouton retour en haut (action 14) ───────────────────────────────────── */
#scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 10000;
  width: 44px;
  height: 44px;
  background-color: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(193,0,22,0.4);
  transition: opacity 0.3s ease, transform 0.2s ease, background-color 0.2s;
  opacity: 0;
  pointer-events: none;
}
#scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
#scroll-top-btn:hover {
  background-color: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(193,0,22,0.55);
}

/* ── Sections avec fond clair (action 13 — alterner sombre/blanc) ─────────── */
.section-light {
  background-color: #f0f4f8 !important;
  /* Grille double densité, points Bleu Acier plus marqués pour visibilité */
  background-image:
    radial-gradient(circle, rgba(113,149,189,0.42) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(113,149,189,0.18) 1px, transparent 1px);
  background-size: 28px 28px, 14px 14px;
  background-position: 0 0, 7px 7px;
}
/* Champs de formulaire sur fond clair */
.section-light input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.section-light select,
.section-light textarea {
  background-color: #ffffff !important;
  color: #0d1b29 !important;
  border-color: #cbd5e1 !important;
}
.section-light input::placeholder,
.section-light textarea::placeholder {
  color: #94a3b8 !important;
}
.section-light h1,
.section-light h2,
.section-light h3,
.section-light [class*="rt-Heading"] {
  color: #0d1b29 !important;
  border-left-color: var(--accent) !important;
}
.section-light p,
.section-light span,
.section-light [class*="rt-Text"]:not([class*="rt-Button"]) {
  color: #334155 !important;
}
/* Boutons dans section-light : forcer blanc sur tout texte interne */
.section-light button span,
.section-light button p,
.section-light button [class*="rt-Text"] {
  color: #ffffff !important;
}
.section-light .cta-btn-primary span,
.section-light .cta-btn-primary p,
.section-light .cta-btn-primary [class*="rt-Text"] {
  color: #ffffff !important;
}
.section-light .glass-card {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(193,0,22,0.18) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  color: #0d1b29 !important;
}
.section-light .glass-card:hover {
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(193,0,22,0.45) !important;
  box-shadow: 0 4px 20px rgba(193,0,22,0.12) !important;
}
.section-light.with-fireflies::before {
  background: linear-gradient(to bottom, #f0f4f8 0%, transparent 100%) !important;
}
.section-light.with-fireflies::after {
  background: linear-gradient(to top, #f0f4f8 0%, transparent 100%) !important;
}
.section-light .lucioles { opacity: 0.08; }
.section-light .red-aurora { display: none !important; }

/* ── Animation compteur chiffres clés (action 11) ────────────────────────── */
.stat-counter {
  display: inline-block;
  will-change: contents;
}

/* ── Liens nav desktop — override Radix (color= est interprété comme nom de thème) ─── */
.nav-link {
  color: #94a3b8 !important;
  text-decoration: none !important;
}
.nav-link:hover {
  color: #f1f5f9 !important;
  text-decoration: none !important;
}

/* ── Navbar responsive — garde desktop/mobile même si Reflex breakpoints régresse ── */
@media (min-width: 768px) {
  .mobile-hamburger { display: none !important; }
  .desktop-navbar   { display: flex !important; }
}
@media (max-width: 767px) {
  .desktop-navbar   { display: none !important; }
  .mobile-hamburger { display: flex !important; }
}

/* ── Grille expertises mega-menu ─────────────────────────────────────────── */
.exp-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.35rem !important;
}

/* ── CTA boutons — override Radix UI (all:unset + color) ─────────────────── */
body .cta-btn-primary {
  display: inline-flex !important; align-items: center !important;
  gap: 0.5rem !important; padding: 0.75rem 1.75rem !important;
  border-radius: 0.5rem !important; border: none !important;
  background-color: #C10016 !important; color: #ffffff !important;
  font-weight: 700 !important; font-size: 0.95rem !important;
  text-decoration: none !important; white-space: nowrap !important;
  cursor: pointer !important; transition: all 0.2s !important;
}
body .cta-btn-primary:hover {
  background-color: #a10012 !important; color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(193,0,22,0.5) !important;
  text-decoration: none !important;
}
body .cta-btn-secondary {
  display: inline-flex !important; align-items: center !important;
  gap: 0.5rem !important; padding: 0.75rem 1.75rem !important;
  border-radius: 0.5rem !important; border: 2px solid #C10016 !important;
  background-color: transparent !important; color: #ff3347 !important;
  font-weight: 700 !important; font-size: 0.95rem !important;
  text-decoration: none !important; white-space: nowrap !important;
  cursor: pointer !important; transition: all 0.2s !important;
}
body .cta-btn-secondary:hover {
  background-color: #C10016 !important; color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(193,0,22,0.4) !important;
  text-decoration: none !important;
}

/* ── Valeurs chiffrées (stats) — dégradé rouge→bleu ─────────────────────── */
.stat-value {
  background: linear-gradient(135deg, #C10016 0%, #7195BD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #C10016 !important; /* fallback navigateurs sans clip */
}

/* ── Cercles numérotés dans sections process (section-light override) ─────── */
.section-light .accent-circle,
.section-light .accent-circle p,
.section-light .accent-circle span,
.section-light .accent-circle [class*="rt-Text"] { color: #ffffff !important; }

/* ── Section fond bleu acier — variante de section ─────────────────────────── */
.section-blue {
  background-color: #7195BD !important;
}

/* ── Bords diagonaux entre sections (section-slant) ─────────────────────── */
.section-slant {
  clip-path: polygon(0 3rem, 100% 0, 100% calc(100% - 3rem), 0 100%);
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
  margin-top: -3rem;
  margin-bottom: -3rem;
  position: relative;
  z-index: 2;
}
/* Le clip-path remplace les gradients haut/bas */
.section-slant.with-fireflies::before,
.section-slant.with-fireflies::after { display: none !important; }

/* ── Animations scroll (fade-in-up) ─────────────────────────────────────── */
.anim-item {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.55s ease var(--anim-delay, 0s),
    transform 0.55s ease var(--anim-delay, 0s);
  will-change: transform, opacity;
}
.anim-heading { transform: translateY(14px); }
.anim-item.anim-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Cubes isométriques — animations flottantes ─────────────────────────────── */
@keyframes cubefloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(1.5deg); }
  66%       { transform: translateY(-6px)  rotate(-1deg); }
}
.cube-float      { animation: cubefloat  9s ease-in-out infinite;    will-change: transform; }
.cube-float-alt  { animation: cubefloat 12s ease-in-out 3s infinite; will-change: transform; }
.cube-float-slow { animation: cubefloat 15s ease-in-out 6s infinite; will-change: transform; }

/* Dérives pour la nuée hero */
@keyframes cubedrift1 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25%     { transform: translate(14px,-22px) rotate(7deg); }
  50%     { transform: translate(-8px,-38px) rotate(-3deg); }
  75%     { transform: translate(20px,-16px) rotate(10deg); }
}
@keyframes cubedrift2 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  30%     { transform: translate(-18px,-26px) rotate(-9deg); }
  65%     { transform: translate(12px,-44px) rotate(5deg); }
}
@keyframes cubedrift3 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  20%     { transform: translate(22px,-14px) rotate(6deg); }
  55%     { transform: translate(-14px,-32px) rotate(-8deg); }
  80%     { transform: translate(8px,-50px) rotate(4deg); }
}
@keyframes cubedrift4 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  40%     { transform: translate(-22px,-20px) rotate(-6deg); }
  70%     { transform: translate(16px,-36px) rotate(9deg); }
}
.cube-d1  { animation: cubedrift1  9s ease-in-out 0s    infinite; will-change: transform; }
.cube-d2  { animation: cubedrift2 13s ease-in-out 2s    infinite; will-change: transform; }
.cube-d3  { animation: cubedrift3 11s ease-in-out 5s    infinite; will-change: transform; }
.cube-d4  { animation: cubedrift4 16s ease-in-out 1.5s  infinite; will-change: transform; }
.cube-d5  { animation: cubedrift1  8s ease-in-out 4s    infinite; will-change: transform; }
.cube-d6  { animation: cubedrift2 14s ease-in-out 7s    infinite; will-change: transform; }
.cube-d7  { animation: cubedrift3 10s ease-in-out 3s    infinite; will-change: transform; }
.cube-d8  { animation: cubedrift4 12s ease-in-out 6s    infinite; will-change: transform; }
.cube-d9  { animation: cubedrift1 15s ease-in-out 0.5s  infinite; will-change: transform; }
.cube-d10 { animation: cubedrift2  9s ease-in-out 8s    infinite; will-change: transform; }
.cube-d11 { animation: cubedrift3 13s ease-in-out 2.5s  infinite; will-change: transform; }
.cube-d12 { animation: cubedrift4 11s ease-in-out 9s    infinite; will-change: transform; }
.cube-d13 { animation: cubedrift2 18s ease-in-out 1s    infinite; will-change: transform; }
.cube-d14 { animation: cubedrift3 20s ease-in-out 3.5s  infinite; will-change: transform; }
.cube-d15 { animation: cubedrift4 22s ease-in-out 0.5s  infinite; will-change: transform; }
.cube-d16 { animation: cubedrift1 19s ease-in-out 6.5s  infinite; will-change: transform; }
.cube-d17 { animation: cubedrift3 12s ease-in-out 4.5s  infinite; will-change: transform; }
.cube-d18 { animation: cubedrift2 24s ease-in-out 2s    infinite; will-change: transform; }

/* ═══════════════════════════════════════════════════════════════════════════
   NOISE overlay — texture subtile globale sur tout le document
   ═══════════════════════════════════════════════════════════════════════════ */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.12;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 240px 240px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVEAL ON SCROLL — h2 et .glass-card apparaissent en fondu ascendant
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal h2[data-rv="1"]:not(.is-revealed),
  html.js-reveal .glass-card[data-rv="1"]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(24px) perspective(900px);
  }
  html.js-reveal h2.is-revealed,
  html.js-reveal .glass-card.is-revealed {
    animation: revealUp 0.6s cubic-bezier(.22,.61,.36,1) forwards;
  }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE WIPE — transition entre routes (clic sur lien interne)
   ═══════════════════════════════════════════════════════════════════════════ */
#page-wipe {
  position: fixed;
  inset: 0;
  background: linear-gradient(105deg, #0d1b29 0%, #192839 45%, #7195BD 100%);
  box-shadow: -2px 0 0 0 #C10016 inset;
  z-index: 99999;
  transform: translateX(-115%) skewX(-6deg);
  pointer-events: none;
  will-change: transform;
}
#page-wipe.wipe-in {
  animation: pageWipeIn 0.45s cubic-bezier(.7,.05,.36,1) forwards;
}
#page-wipe.wipe-out {
  animation: pageWipeOut 0.55s cubic-bezier(.35,.65,.25,1) forwards;
}
@keyframes pageWipeIn {
  from { transform: translateX(-115%) skewX(-6deg); }
  to   { transform: translateX(0) skewX(-6deg); }
}
@keyframes pageWipeOut {
  from { transform: translateX(0) skewX(-6deg); }
  to   { transform: translateX(115%) skewX(-6deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — respect des préférences utilisateur
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body .glass-card { transform: none !important; transition: none !important; }
  #page-wipe { display: none !important; }
  html.js-reveal h2,
  html.js-reveal .glass-card { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEGA-MENU SERVICES — transitions d'ouverture/fermeture
   ═══════════════════════════════════════════════════════════════════════════ */
.services-mega {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background-color: #1e3349;
  border-top: 1px solid #2d4a6a;
  border-bottom: 1px solid #2d4a6a;
  z-index: 200;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  /* État fermé : caché, légèrement remonté */
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.22s cubic-bezier(0.22,0.61,0.36,1),
    transform 0.28s cubic-bezier(0.22,0.61,0.36,1),
    visibility 0s linear 0.28s;   /* visibility au BOUT de la transition fermeture */
  /* Visible uniquement sur md+ (cohérent avec la navbar desktop) */
  display: none;
}
@media (min-width: 768px) {
  .services-mega { display: block; }
}
.services-mega.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.22s cubic-bezier(0.22,0.61,0.36,1),
    transform 0.28s cubic-bezier(0.22,0.61,0.36,1),
    visibility 0s;               /* visibility immédiatement à l'ouverture */
}

@media (prefers-reduced-motion: reduce) {
  .services-mega { transition: opacity 0.1s; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO TYPEWRITER — effet terminal sur le H1 de la homepage
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-typewriter {
  color: #ff3347;        /* rouge accent Cyberg */
  text-shadow: 0 0 20px rgba(193,0,22,0.35);
  /* Toujours sur sa propre ligne — pas de saut quand un mot est long */
  display: block;
  white-space: nowrap;
  /* Hérite la font-family et font-size du H1 (Montserrat 1.9-3.2rem) */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  min-height: 1em;        /* réserve la ligne même quand le texte est vide */
}
/* Curseur clignotant | juste après le texte */
.hero-typewriter::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  color: #ff3347;
  font-weight: 400;
  animation: hero-cursor-blink 1s steps(1) infinite;
  /* Le cursor reste aligné même quand le texte est vide */
}
@keyframes hero-cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Respect du réglage : pas de typing, un seul mot statique */
  .hero-typewriter::after { animation: none; opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BODY CUBES — nuée de cubes Bleu Acier derrière le contenu des sections
   ═══════════════════════════════════════════════════════════════════════════ */
.body-cubes {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  display: block !important;
}
.body-cubes > svg {
  position: absolute !important;
  display: block;
  pointer-events: none;
}

/* ── Lucioles orbitant autour des cubes ──────────────────────────────────────
   Chaque .orbit-luc est positionnée au même point que le cube qu'elle suit.
   L'animation déplace la luciole en cercle (via translate + scale + opacity)
   avec un passage "derrière" le cube (opacity basse + blur + scale down) au
   50% du cycle — effet 3D spiralé. */
.orbit-luc {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ff3347;
  box-shadow: 0 0 7px 3px rgba(193,0,22,0.60), 0 0 16px 5px rgba(193,0,22,0.22);
  will-change: transform, opacity, filter;
  pointer-events: none;
}

/* 6 variantes avec rayons / sens / vitesses différents pour ne pas avoir
   un effet synchronisé sur l'ensemble des cubes. */
@keyframes orbit-a {
  0%,100% { transform: translate(32px, 0)   scale(1);    opacity: 1;    filter: none; }
  25%     { transform: translate(0, -32px)  scale(0.85); opacity: 0.75; filter: none; }
  50%     { transform: translate(-32px, 0)  scale(0.55); opacity: 0.30; filter: blur(2px); }
  75%     { transform: translate(0, 32px)   scale(0.85); opacity: 0.75; filter: none; }
}
@keyframes orbit-b {
  0%,100% { transform: translate(-42px, 0)  scale(1);    opacity: 1;    filter: none; }
  25%     { transform: translate(0, 42px)   scale(0.9);  opacity: 0.85; filter: none; }
  50%     { transform: translate(42px, 0)   scale(0.55); opacity: 0.30; filter: blur(2px); }
  75%     { transform: translate(0, -42px)  scale(0.9);  opacity: 0.85; filter: none; }
}
@keyframes orbit-c {
  0%,100% { transform: translate(26px, 20px) scale(1);    opacity: 1;    filter: none; }
  25%     { transform: translate(-20px, 26px) scale(0.85); opacity: 0.75; filter: none; }
  50%     { transform: translate(-26px, -20px) scale(0.55); opacity: 0.30; filter: blur(2px); }
  75%     { transform: translate(20px, -26px) scale(0.85); opacity: 0.75; filter: none; }
}
@keyframes orbit-d {
  0%,100% { transform: translate(38px, -18px) scale(1);    opacity: 1;    filter: none; }
  25%     { transform: translate(18px, 38px)  scale(0.9);  opacity: 0.80; filter: none; }
  50%     { transform: translate(-38px, 18px) scale(0.55); opacity: 0.30; filter: blur(2px); }
  75%     { transform: translate(-18px, -38px) scale(0.9); opacity: 0.80; filter: none; }
}
@keyframes orbit-e {
  0%,100% { transform: translate(50px, 0)   scale(1);    opacity: 1;    filter: none; }
  25%     { transform: translate(35px, -35px) scale(0.9); opacity: 0.85; filter: none; }
  50%     { transform: translate(-50px, 0)  scale(0.55); opacity: 0.30; filter: blur(2.5px); }
  75%     { transform: translate(-35px, 35px) scale(0.9); opacity: 0.85; filter: none; }
}
@keyframes orbit-f {
  0%,100% { transform: translate(0, 30px)   scale(1);    opacity: 1;    filter: none; }
  25%     { transform: translate(30px, 0)   scale(0.85); opacity: 0.75; filter: none; }
  50%     { transform: translate(0, -30px)  scale(0.55); opacity: 0.30; filter: blur(2px); }
  75%     { transform: translate(-30px, 0)  scale(0.85); opacity: 0.75; filter: none; }
}

.orbit-a { animation: orbit-a 7s linear infinite; }
.orbit-b { animation: orbit-b 9s linear infinite; }
.orbit-c { animation: orbit-c 6s linear infinite; }
.orbit-d { animation: orbit-d 11s linear infinite; }
.orbit-e { animation: orbit-e 8s linear infinite; }
.orbit-f { animation: orbit-f 10s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .orbit-luc { animation: none !important; opacity: 0.8 !important; }
}

/* Footer : s'assurer que les textures (aurora + cubes) remplissent bien
   et restent sous le contenu. */
.footer-textured { position: relative; isolation: isolate; }
.footer-textured > .red-aurora,
.footer-textured > .body-cubes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN — flèches de réordonnancement (visibles au hover)
   ═══════════════════════════════════════════════════════════════════════════ */
.admin-card-reorder {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.admin-emp-card:hover .admin-card-reorder {
  opacity: 1;
}
.admin-card-reorder button:hover {
  background: #C10016 !important;
  border-color: #C10016 !important;
}
.admin-card-reorder button:hover svg {
  color: #ffffff !important;
}
/* Sur mobile, toujours visibles (pas de hover) */
@media (hover: none) {
  .admin-card-reorder { opacity: 1; }
}

/* Désactive le halo rouge néon du hover .glass-card UNIQUEMENT sur les
   formulaires admin (dialogs d'édition) — lisibilité des inputs prioritaire */
body .glass-card-admin:hover {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(193,0,22,0.22) !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Les selects natifs dans le dialog admin : pas de bord rouge au focus/hover */
.glass-card-admin select:hover,
.glass-card-admin select:focus,
.glass-card-admin input:hover,
.glass-card-admin input:focus,
.glass-card-admin textarea:hover,
.glass-card-admin textarea:focus {
  border-color: #2d4a6a !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Select : fond sombre + texte clair (cohérent avec le reste) */
.glass-card-admin select option {
  background: #0d1b29;
  color: #f1f5f9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG PROSE — rendu Markdown articles
   ═══════════════════════════════════════════════════════════════════════════ */
.blog-prose { color: #cbd5e1; font-family: 'Lato', Arial, sans-serif; font-size: 1.05rem; line-height: 1.75; }
.blog-prose h1, .blog-prose h2, .blog-prose h3, .blog-prose h4 {
  color: #f1f5f9; font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700; line-height: 1.3; margin: 2.2rem 0 1rem 0;
}
.blog-prose h1 { font-size: 1.9rem; }
.blog-prose h2 { font-size: 1.5rem; border-bottom: 1px solid #2d4a6a; padding-bottom: 0.5rem; }
.blog-prose h3 { font-size: 1.2rem; }
.blog-prose p  { margin: 0 0 1.15rem 0; }
.blog-prose a  { color: #ff3347; text-decoration: underline; text-underline-offset: 3px; }
.blog-prose a:hover { color: #ffffff; }
.blog-prose ul, .blog-prose ol { margin: 0 0 1.15rem 1.5rem; padding-left: 0.5rem; }
.blog-prose li { margin-bottom: 0.45rem; }
.blog-prose blockquote {
  border-left: 3px solid #C10016; padding: 0.25rem 1rem; margin: 1.5rem 0;
  color: #94a3b8; background: rgba(193,0,22,0.05); border-radius: 0 0.5rem 0.5rem 0;
}
.blog-prose code {
  background: #1e3349; padding: 0.15em 0.4em; border-radius: 0.3em;
  font-size: 0.92em; color: #f1f5f9;
}
.blog-prose pre {
  background: #0d1b29; border: 1px solid #2d4a6a; border-radius: 0.5rem;
  padding: 1rem; overflow-x: auto; margin: 1.25rem 0;
}
.blog-prose pre code { background: transparent; padding: 0; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.25rem 0; }
.blog-prose hr  { border: none; border-top: 1px solid #2d4a6a; margin: 2rem 0; }
.blog-prose strong { color: #f1f5f9; font-weight: 700; }

/* ── Tableaux ───────────────────────────────────────────────────────────────── */
/* Wrapper horizontal-scroll pour mobile (la table ne casse pas le layout) */
.blog-prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.75rem 0;
  background: #0d1b29;
  border: 1px solid #2d4a6a;
  border-radius: 0.65rem;
  overflow: hidden;
  font-size: 0.95rem;
  display: table;
}
.blog-prose thead {
  background: linear-gradient(180deg, rgba(193,0,22,0.22) 0%, rgba(193,0,22,0.10) 100%);
}
.blog-prose thead th {
  color: #f1f5f9;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #2d4a6a;
}
.blog-prose tbody td {
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid rgba(45,74,106,0.5);
  color: #cbd5e1;
  vertical-align: top;
  line-height: 1.55;
}
.blog-prose tbody tr:last-child td { border-bottom: none; }
.blog-prose tbody tr:nth-child(even) { background: rgba(30,51,73,0.35); }
.blog-prose tbody tr:hover          { background: rgba(193,0,22,0.07); }
.blog-prose tbody td code {
  font-size: 0.85em;
  white-space: nowrap;
}
.blog-prose tbody td strong { color: #ff3347; }
/* Alignement cellule via markdown (:---, :---:, ---:) */
.blog-prose th[align="center"], .blog-prose td[align="center"] { text-align: center; }
.blog-prose th[align="right"],  .blog-prose td[align="right"]  { text-align: right; }

/* Scroll horizontal auto si le tableau déborde sur petit écran */
@media (max-width: 640px) {
  .blog-prose table {
    display: block;
    overflow-x: auto;
    white-space: normal;
    -webkit-overflow-scrolling: touch;
  }
  .blog-prose thead th,
  .blog-prose tbody td { padding: 0.6rem 0.8rem; font-size: 0.88rem; }
}