/* ═══════════════════════════════════════════════════════════════════════
   BELLOVA × INFOMANIAK — Swiss Digital Sovereignty · Dark Premium
   Design Concept : Space-noir · Glassmorphism · Aurora CSS · Bento Grid
   Version        : 2.0 — Refonte dark premium
   Auteur         : Bellova CORP
═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   VARIABLES — Palette Swiss Digital Sovereignty
───────────────────────────────────────────────────────────────────── */
:root {
  /* Fonds */
  --ik-void:          #010811;
  --ik-deep:          #030D1C;
  --ik-surface:       #050F22;
  --ik-card:          #07142A;
  --ik-card-alt:      #091729;

  /* Bleu Infomaniak */
  --ik-blue:          #0098FF;
  --ik-blue-bright:   #33AEFF;
  --ik-blue-glow:     rgba(0, 152, 255, 0.35);
  --ik-blue-soft:     rgba(0, 152, 255, 0.08);
  --ik-blue-mid:      rgba(0, 152, 255, 0.15);

  /* Accents */
  --ik-teal:          #00C6FF;
  --ik-purple:        #6366F1;
  --ik-green:         #10D98A;
  --ik-green-soft:    rgba(16, 217, 138, 0.10);
  --ik-amber:         #F59E0B;
  --ik-red:           #FF4D4D;

  /* Texte */
  --ik-white:         #FFFFFF;
  --ik-text-dim:      rgba(255, 255, 255, 0.55);
  --ik-text-faint:    rgba(255, 255, 255, 0.28);

  /* Bordures */
  --ik-border:              rgba(255, 255, 255, 0.06);
  --ik-border-blue:         rgba(0, 152, 255, 0.18);
  --ik-border-blue-strong:  rgba(0, 152, 255, 0.40);

  /* Formes & transitions */
  --ik-radius:    16px;
  --ik-radius-sm: 10px;
  --ik-radius-lg: 24px;
  --ik-radius-xl: 32px;
  --ik-trans:     0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Ombres */
  --ik-shadow-card: 0 4px 32px rgba(0, 0, 0, 0.40);
  --ik-shadow-glow: 0 0 40px rgba(0, 152, 255, 0.20);
}


/* ─────────────────────────────────────────────────────────────────────
   KEYFRAMES — Aurora, Scroll Ticker, Pulse Glow
───────────────────────────────────────────────────────────────────── */

/* Aurora orb animation — orbe 1 (bleu) */
@keyframes ik-aurora-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(80px, -60px) scale(1.15); }
  66%  { transform: translate(-40px, 80px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Aurora orb animation — orbe 2 (purple) */
@keyframes ik-aurora-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-100px, 50px) scale(1.1); }
  66%  { transform: translate(60px, -80px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Aurora orb animation — orbe 3 (teal) */
@keyframes ik-aurora-3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(50px, 40px) scale(1.2); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Ticker trust scroll */
@keyframes ik-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Glow pulsé pour badges et highlights */
@keyframes ik-pulse-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(0, 152, 255, 0.3); }
  50%       { box-shadow: 0 0 28px rgba(0, 152, 255, 0.6); }
}

/* Fade-in vertical pour les sections */
@keyframes ik-fadein {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shimmer sur gradient text */
@keyframes ik-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}


/* ─────────────────────────────────────────────────────────────────────
   RESET / BODY
───────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.ik-body {
  background:    var(--ik-void);
  color:         var(--ik-white);
  font-family:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height:    100vh;
  overflow-x:    hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar custom */
.ik-body::-webkit-scrollbar { width: 6px; }
.ik-body::-webkit-scrollbar-track { background: var(--ik-void); }
.ik-body::-webkit-scrollbar-thumb { background: var(--ik-border-blue-strong); border-radius: 3px; }

/* ─── Gradient Text utilitaire ─── */
.ik-gradient-text {
  background: linear-gradient(135deg, var(--ik-blue) 0%, var(--ik-teal) 60%, var(--ik-blue-bright) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ik-shimmer 4s linear infinite;
}


/* ─────────────────────────────────────────────────────────────────────
   NAVBAR — Refonte épurée
───────────────────────────────────────────────────────────────────── */
.ik-nav {
  position:   fixed;
  top: 0; left: 0; right: 0;
  z-index:    1000;
  height:     60px;
  background: rgba(1, 8, 17, 0.70);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--ik-trans), box-shadow var(--ik-trans), border-color var(--ik-trans);
}

.ik-nav.scrolled {
  background:   rgba(1, 8, 17, 0.92);
  border-color: rgba(0, 152, 255, 0.12);
  box-shadow:   0 1px 0 rgba(0, 152, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.5);
}

.ik-nav-inner {
  max-width:       1280px;
  margin:          0 auto;
  height:          60px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 1.25rem;
  gap:             1.25rem;
}

/* Logo & brand */
.ik-nav-logo {
  display:         flex;
  align-items:     center;
  gap:             .5rem;
  text-decoration: none;
  flex-shrink:     0;
}
.ik-nav-logo img { height: 20px; width: auto; display: block; }

.ik-nav-sep {
  width:      1px;
  height:     14px;
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}

.ik-nav-bellova {
  font-size:      .6rem;
  font-weight:    500;
  color:          var(--ik-text-faint);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space:    nowrap;
}

/* Group nav centre */
.ik-nav-center {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(255, 255, 255, 0.03);
  border:          1px solid rgba(255, 255, 255, 0.05);
  border-radius:   100px;
  padding:         .25rem;
  gap:             0;
  flex:            1 1 auto;
  min-width:       0;
  overflow:        hidden;
}

/* Links */
.ik-nav-links {
  display:     flex;
  flex-wrap:   nowrap;
  align-items: center;
  gap:         0;
  list-style:  none;
  margin:      0;
  padding:     0;
  min-width:   0;
}

.ik-nav-link {
  display:         flex;
  align-items:     center;
  padding:         .4rem .8rem;
  font-size:       .815rem;
  font-weight:     500;
  color:           var(--ik-text-faint);
  text-decoration: none;
  border-radius:   100px;
  transition:      color var(--ik-trans), background var(--ik-trans);
  white-space:     nowrap;
}
.ik-nav-link:hover {
  color:      var(--ik-white);
  background: rgba(255, 255, 255, 0.06);
}
.ik-nav-link.active {
  color:      var(--ik-blue-bright);
}

/* Nav actions (droite) */
.ik-nav-actions {
  display:     flex;
  align-items: center;
  gap:         .625rem;
  flex-shrink: 0;
}
/* Actions dans le centre : visibles sur desktop et mobile */
.ik-nav-center .ik-nav-actions { display: flex; margin-left: auto; }

/* CTA nav */
.ik-nav-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             .45rem;
  padding:         .45rem 1.1rem;
  background:      var(--ik-blue);
  color:           var(--ik-white);
  font-size:       .815rem;
  font-weight:     600;
  border-radius:   100px;
  text-decoration: none;
  transition:      background var(--ik-trans), box-shadow var(--ik-trans), transform var(--ik-trans);
  white-space:     nowrap;
}
.ik-nav-cta:hover {
  background:  var(--ik-blue-bright);
  box-shadow:  0 0 20px rgba(0, 152, 255, 0.4);
  transform:   translateY(-1px);
}

/* Retour */
.ik-nav-back {
  display:         inline-flex;
  align-items:     center;
  gap:             .35rem;
  padding:         .4rem .8rem;
  font-size:       .78rem;
  font-weight:     500;
  color:           var(--ik-text-faint);
  text-decoration: none;
  border-radius:   100px;
  border:          1px solid rgba(255, 255, 255, 0.07);
  transition:      color var(--ik-trans), border-color var(--ik-trans), background var(--ik-trans);
  flex-shrink:     0;
}
.ik-nav-back:hover {
  color:         var(--ik-white);
  border-color:  rgba(255, 255, 255, 0.15);
  background:    rgba(255, 255, 255, 0.04);
}

/* Hamburger mobile */
.ik-nav-toggle {
  display:        none;
  flex-direction: column;
  gap:            4px;
  padding:        .5rem;
  background:     rgba(255, 255, 255, 0.05);
  border:         1px solid rgba(255, 255, 255, 0.08);
  border-radius:  8px;
  cursor:         pointer;
}
.ik-nav-toggle span {
  display:       block;
  width:         18px;
  height:        1.5px;
  background:    var(--ik-white);
  border-radius: 1px;
  transition:    transform var(--ik-trans), opacity var(--ik-trans);
}
.ik-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ik-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ik-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }


/* ─────────────────────────────────────────────────────────────────────
   HERO — Aurora space-noir
───────────────────────────────────────────────────────────────────── */
.ik-hero {
  position:    relative;
  min-height:  85vh;
  display:     flex;
  align-items: center;
  overflow:    hidden;
  background:  var(--ik-void);
  padding:     6rem 1.5rem 4rem;
}

/* ── Aurora : 3 orbes en pseudo-éléments ── */
.ik-hero::before,
.ik-hero::after {
  content:       '';
  position:      absolute;
  border-radius: 50%;
  filter:        blur(90px);
  pointer-events: none;
  will-change:   transform;
}

/* Orbe 1 — bleu principal */
.ik-hero::before {
  width:      700px;
  height:     700px;
  top:        -10%;
  left:       -5%;
  background: radial-gradient(circle, rgba(0, 152, 255, 0.22) 0%, transparent 70%);
  animation:  ik-aurora-1 18s ease-in-out infinite;
}

/* Orbe 2 — purple accent */
.ik-hero::after {
  width:      550px;
  height:     550px;
  top:        20%;
  right:      -8%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
  animation:  ik-aurora-2 22s ease-in-out infinite;
}

/* Orbe 3 — teal (via un wrapper dédié) */
.ik-hero-aurora {
  position:      absolute;
  inset:         0;
  pointer-events: none;
  z-index:       0;
}
.ik-hero-aurora::before {
  content:       '';
  position:      absolute;
  width:         400px;
  height:        400px;
  bottom:        5%;
  left:          40%;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(0, 198, 255, 0.12) 0%, transparent 70%);
  filter:        blur(70px);
  animation:     ik-aurora-3 15s ease-in-out infinite;
}

/* Grille de points décorative */
.ik-hero-aurora::after {
  content:  '';
  position: absolute;
  inset:    0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}

/* Contenu hero */
.ik-hero-inner {
  position:    relative;
  z-index:     1;
  max-width:   1280px;
  margin:      0 auto;
  width:       100%;
}

.ik-hero-content {
  max-width:  900px;
  margin:     0 auto;
  text-align: center;
  position:   relative;
  z-index:    1;
}

/* Orbes individuels dans .ik-hero-aurora */
.ik-orb {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(90px);
  pointer-events: none;
  will-change:   transform;
}
.ik-orb-1 {
  width:      700px; height: 700px;
  top: -10%; left: -5%;
  background: radial-gradient(circle, rgba(0,152,255,0.22) 0%, transparent 70%);
  animation:  ik-aurora-1 18s ease-in-out infinite;
}
.ik-orb-2 {
  width:      550px; height: 550px;
  top: 20%; right: -8%;
  background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, transparent 70%);
  animation:  ik-aurora-2 22s ease-in-out infinite;
}
.ik-orb-3 {
  width:      400px; height: 400px;
  bottom: 5%; left: 40%;
  background: radial-gradient(circle, rgba(0,198,255,0.12) 0%, transparent 70%);
  filter:     blur(70px);
  animation:  ik-aurora-3 15s ease-in-out infinite;
}

/* Breadcrumb */
.ik-breadcrumb {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  font-size:       .8rem;
  color:           var(--ik-text-faint);
  margin-bottom:   1.5rem;
}
.ik-breadcrumb a {
  color:           var(--ik-text-dim);
  text-decoration: none;
  transition:      color var(--ik-trans);
}
.ik-breadcrumb a:hover { color: var(--ik-blue-bright); }
.ik-breadcrumb i { font-size: .6rem; }

/* Eyebrow badge */
.ik-hero-eyebrow {
  display:          inline-flex;
  align-items:      center;
  gap:              .5rem;
  padding:          .4rem 1rem;
  background:       var(--ik-blue-soft);
  border:           1px solid var(--ik-border-blue);
  border-radius:    100px;
  font-size:        .78rem;
  font-weight:      600;
  color:            var(--ik-blue-bright);
  letter-spacing:   .05em;
  text-transform:   uppercase;
  margin-bottom:    2rem;
  animation:        ik-pulse-glow 3s ease-in-out infinite;
}

/* H1 */
.ik-hero h1,
.ik-hero-title {
  font-size:      clamp(1.6rem, 3vw, 2.35rem);
  font-weight:    800;
  line-height:    1.2;
  letter-spacing: -0.025em;
  color:          var(--ik-white);
  margin:         0 0 1.25rem;
}

/* Em dans h1 = gradient bleu-teal */
.ik-hero h1 em,
.ik-hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--ik-blue) 0%, var(--ik-teal) 100%);
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
}

/* Description hero */
.ik-hero-desc {
  max-width:    680px;
  margin:       0 auto 2rem;
  font-size:    .95rem;
  line-height:  1.7;
  color:        var(--ik-text-dim);
}
.ik-hero-desc strong { color: var(--ik-white); font-weight: 600; }

/* Actions hero */
.ik-hero-actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .875rem;
  flex-wrap:       wrap;
  margin-bottom:   2.5rem;
}

/* ── Boutons globaux ── */
.btn-ik,
.btn-ik-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  padding:         .7rem 1.5rem;
  background:      var(--ik-blue);
  color:           var(--ik-white);
  font-size:       .875rem;
  font-weight:     700;
  border-radius:   var(--ik-radius-sm);
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      background var(--ik-trans), box-shadow var(--ik-trans), transform var(--ik-trans);
  white-space:     nowrap;
}
.btn-ik:hover,
.btn-ik-primary:hover {
  background:  var(--ik-blue-bright);
  box-shadow:  0 0 40px var(--ik-blue-glow), 0 4px 20px rgba(0,0,0,0.3);
  transform:   translateY(-2px);
}

/* Bouton ghost / outline */
.btn-ik-ghost {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  padding:         .7rem 1.5rem;
  background:      transparent;
  color:           var(--ik-blue-bright);
  font-size:       .875rem;
  font-weight:     600;
  border-radius:   var(--ik-radius-sm);
  text-decoration: none;
  border:          1px solid var(--ik-border-blue-strong);
  cursor:          pointer;
  transition:      background var(--ik-trans), border-color var(--ik-trans), box-shadow var(--ik-trans), transform var(--ik-trans);
  white-space:     nowrap;
}
.btn-ik-ghost:hover {
  background:   var(--ik-blue-soft);
  border-color: var(--ik-blue);
  box-shadow:   0 0 20px rgba(0, 152, 255, 0.15);
  transform:    translateY(-2px);
}

/* KPIs hero */
.ik-hero-kpis {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1px;
  background:            var(--ik-border-blue);
  border:                1px solid var(--ik-border-blue);
  border-radius:         var(--ik-radius-lg);
  overflow:              hidden;
  max-width:             860px;
  margin:                0 auto;
}

.ik-kpi {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             .3rem;
  padding:         1.25rem 1rem;
  background:      rgba(7, 20, 42, 0.85);
  backdrop-filter: blur(12px);
  text-align:      center;
  transition:      background var(--ik-trans);
}
.ik-kpi:hover { background: rgba(0, 152, 255, 0.08); }

.ik-kpi strong {
  font-size:      1.25rem;
  font-weight:    800;
  color:          var(--ik-white);
  letter-spacing: -0.02em;
  line-height:    1;
}
.ik-kpi span {
  font-size:   .75rem;
  color:       var(--ik-text-dim);
  line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────────────
   BANDEAU AFFILIATION
───────────────────────────────────────────────────────────────────── */
.ik-affil {
  background:   rgba(0, 152, 255, 0.05);
  border-top:   1px solid var(--ik-border-blue);
  border-bottom: 1px solid var(--ik-border-blue);
  padding:      1rem 1.5rem;
}

.ik-affil-inner {
  max-width:   1280px;
  margin:      0 auto;
  padding:     0 1.5rem;
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
}

.ik-affil-inner > i {
  color:       var(--ik-blue-bright);
  font-size:   1.1rem;
  margin-top:  .15rem;
  flex-shrink: 0;
}

.ik-affil-inner strong {
  display:       block;
  font-size:     .875rem;
  font-weight:   700;
  color:         var(--ik-white);
  margin-bottom: .25rem;
}

.ik-affil-inner p {
  font-size:   .825rem;
  color:       var(--ik-text-dim);
  margin:      0;
  line-height: 1.6;
}
.ik-affil-inner p strong { display: inline; font-weight: 600; color: var(--ik-white); }


/* ─────────────────────────────────────────────────────────────────────
   TRUST TICKER — Défilement continu
───────────────────────────────────────────────────────────────────── */
.ik-trust {
  overflow:     hidden;
  padding:      1.1rem 0;
  background:   var(--ik-deep);
  border-bottom: 1px solid var(--ik-border);
  position:     relative;
}

/* Fondu sur les côtés */
.ik-trust::before,
.ik-trust::after {
  content:  '';
  position: absolute;
  top: 0; bottom: 0;
  width:    80px;
  z-index:  1;
  pointer-events: none;
}
.ik-trust::before {
  left: 0;
  background: linear-gradient(to right, var(--ik-deep), transparent);
}
.ik-trust::after {
  right: 0;
  background: linear-gradient(to left, var(--ik-deep), transparent);
}

/* Track en flex qui se duplique (ticker) */
.ik-trust-inner {
  display:    flex;
  width:      max-content;
  animation:  ik-scroll 36s linear infinite;
}
.ik-trust:hover .ik-trust-inner {
  animation-play-state: paused;
}
.ik-trust-track {
  display:    flex;
  align-items: center;
  gap:        2.5rem;
  flex-shrink: 0;
  padding-right: 2.5rem;
}

.ik-trust-item {
  display:     flex;
  align-items: center;
  gap:         .6rem;
  white-space: nowrap;
  font-size:   .8rem;
  font-weight: 600;
  color:       var(--ik-text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding:     0 .5rem;
}
.ik-trust-item i {
  color:     var(--ik-blue);
  font-size: .9rem;
}


/* ─────────────────────────────────────────────────────────────────────
   PREUVE SOCIALE
───────────────────────────────────────────────────────────────────── */
.ik-proof {
  background: var(--ik-surface);
  border-top:    1px solid var(--ik-border);
  border-bottom: 1px solid var(--ik-border);
  padding:       2rem 1.5rem;
}

.ik-proof-inner {
  max-width:   1280px;
  margin:      0 auto;
  display:     flex;
  align-items: center;
  gap:         1.5rem;
  flex-wrap:   wrap;
}

.ik-proof-icon {
  width:            52px;
  height:           52px;
  border-radius:    50%;
  background:       var(--ik-blue-soft);
  border:           1px solid var(--ik-border-blue);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  color:            var(--ik-blue);
  font-size:        1.2rem;
}

.ik-proof-body {
  flex:        1;
  min-width:   200px;
}
.ik-proof-body strong {
  display:       block;
  font-size:     .95rem;
  font-weight:   700;
  color:         var(--ik-white);
  margin-bottom: .35rem;
}
.ik-proof-body p {
  font-size:   .85rem;
  color:       var(--ik-text-dim);
  margin:      0;
  line-height: 1.6;
}
.ik-proof-body p strong { display: inline; color: var(--ik-white); }

.ik-proof-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          .4rem;
  padding:      .4rem .875rem;
  background:   var(--ik-green-soft);
  border:       1px solid rgba(16, 217, 138, 0.25);
  border-radius: 100px;
  font-size:    .75rem;
  font-weight:  700;
  color:        var(--ik-green);
  white-space:  nowrap;
  flex-shrink:  0;
}


/* ─────────────────────────────────────────────────────────────────────
   SECTIONS COMMUNES
───────────────────────────────────────────────────────────────────── */
.ik-section {
  padding: 4.5rem 0;
}

.ik-section-dark  { background: var(--ik-deep); }
.ik-section-light { background: var(--ik-surface); }
.ik-section-gray  { background: var(--ik-void); }

.ik-container {
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 1.5rem;
}

/* Tag badge section */
.ik-section-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            .4rem;
  padding:        .35rem .875rem;
  background:     var(--ik-blue-soft);
  border:         1px solid var(--ik-border-blue);
  border-radius:  100px;
  font-size:      .72rem;
  font-weight:    700;
  color:          var(--ik-blue-bright);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom:  1.25rem;
}

/* Titre section */
.ik-section-title {
  font-size:      clamp(1.2rem, 2vw, 1.55rem);
  font-weight:    700;
  line-height:    1.3;
  letter-spacing: -0.02em;
  color:          var(--ik-white);
  margin:         0 0 .875rem;
}

/* Em dans titre = bleu */
.ik-section-title em {
  font-style:  normal;
  color:       var(--ik-blue-bright);
}

/* Sous-titre section */
.ik-section-subtitle {
  font-size:   .95rem;
  color:       var(--ik-text-dim);
  max-width:   620px;
  line-height: 1.7;
  /* Aligné avec le titre (gauche sur sections non-centrées) */
}
.ik-section-subtitle strong { color: var(--ik-white); }

/* Section header : gauche par défaut, centré uniquement si .centered */
.ik-section-header {
  margin-bottom: 2.5rem;
  text-align:    left;
}
.ik-section-header.centered {
  text-align: center;
}
.ik-section-header.centered .ik-section-subtitle {
  margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────────────────
   GRILLE PRODUITS — Bento layout
   (Les cartes utilisent .ik-product dans le template)
───────────────────────────────────────────────────────────────────── */
.ik-products-grid,
.ik-bento {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows:        minmax(280px, auto);
  gap:                   1px;
  background:            var(--ik-border-blue);
  border:                1px solid var(--ik-border-blue);
  border-radius:         var(--ik-radius-lg);
  overflow:              hidden;
}

/* Carte produit */
.ik-product,
.ik-bento-item {
  display:        flex;
  flex-direction: column;
  padding:        2rem;
  background:     var(--ik-card);
  transition:     background var(--ik-trans), transform var(--ik-trans);
  position:       relative;
  overflow:       hidden;
}

/* Bordure bleue au hover */
.ik-product::after,
.ik-bento-item::after {
  content:   '';
  position:  absolute;
  inset:     0;
  border:    1.5px solid transparent;
  transition: border-color var(--ik-trans);
  pointer-events: none;
}

.ik-product:hover,
.ik-bento-item:hover {
  background: var(--ik-card-alt);
}
.ik-product:hover::after,
.ik-bento-item:hover::after {
  border-color: var(--ik-border-blue-strong);
}

/* Carte kSuite featured (utilisée inline dans le template) */
.ik-product[style*="border-color"],
.ik-bento-featured {
  grid-column: span 2;
  background:  linear-gradient(135deg, var(--ik-card) 0%, rgba(0, 152, 255, 0.07) 100%);
  border:      1.5px solid var(--ik-border-blue-strong) !important;
}

/* Dernière carte (Public Cloud) — span 2 pour équilibrer la 3e ligne */
.ik-bento .ik-bento-item:last-child {
  grid-column: span 2;
}

/* Header carte */
.ik-product-top,
.ik-bento-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             .75rem;
  margin-bottom:   1.25rem;
}

/* Icône produit */
.ik-product-icon,
.ik-bento-icon {
  width:            44px;
  height:           44px;
  border-radius:    var(--ik-radius-sm);
  background:       var(--ik-blue-soft);
  border:           1px solid var(--ik-border-blue);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--ik-blue);
  font-size:        1.1rem;
  flex-shrink:      0;
  transition:       background var(--ik-trans), box-shadow var(--ik-trans);
}
.ik-product:hover .ik-product-icon,
.ik-bento-item:hover .ik-bento-icon {
  background: var(--ik-blue-mid);
  box-shadow: 0 0 16px rgba(0, 152, 255, 0.25);
}

/* Badge affiliation */
.ik-badge-affil,
.ik-bento-badge {
  display:      inline-flex;
  align-items:  center;
  padding:      .25rem .65rem;
  background:   var(--ik-blue-soft);
  border:       1px solid var(--ik-border-blue);
  border-radius: 100px;
  font-size:    .68rem;
  font-weight:  700;
  color:        var(--ik-blue-bright);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space:  nowrap;
}

/* Badge "Utilisé par Bellova" — vert */
.ik-badge-used {
  background:   var(--ik-green-soft) !important;
  border-color: rgba(16, 217, 138, 0.25) !important;
  color:        var(--ik-green) !important;
}

/* Titre produit */
.ik-product h3,
.ik-bento-title {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--ik-white);
  margin:         0 0 .75rem;
  line-height:    1.3;
  letter-spacing: -0.01em;
}

/* Description produit */
.ik-product > p,
.ik-bento-item > p {
  font-size:   .875rem;
  color:       var(--ik-text-dim);
  line-height: 1.65;
  margin:      0 0 1rem;
  flex:        1;
}

/* Features liste */
.ik-product-feats,
.ik-bento-feats {
  list-style:    none;
  margin:        0 0 1.25rem;
  padding:       0;
  display:       flex;
  flex-direction: column;
  gap:           .4rem;
}
.ik-product-feats li,
.ik-bento-feats li {
  display:     flex;
  align-items: flex-start;
  gap:         .5rem;
  font-size:   .8rem;
  color:       var(--ik-text-dim);
  line-height: 1.4;
}
.ik-product-feats li i,
.ik-bento-feats li i {
  color:      var(--ik-green);
  font-size:  .75rem;
  margin-top: .15rem;
  flex-shrink: 0;
}

/* Lien produit */
.ik-product-link,
.ik-bento-link {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  margin-top:      auto;
  padding:         .6rem 1.125rem;
  background:      var(--ik-blue-soft);
  border:          1px solid var(--ik-border-blue);
  border-radius:   var(--ik-radius-sm);
  font-size:       .8rem;
  font-weight:     700;
  color:           var(--ik-blue-bright);
  text-decoration: none;
  transition:      background var(--ik-trans), border-color var(--ik-trans), box-shadow var(--ik-trans);
  align-self:      flex-start;
}
.ik-product-link:hover,
.ik-bento-link:hover {
  background:  var(--ik-blue-mid);
  border-color: var(--ik-blue);
  box-shadow:  0 0 16px rgba(0, 152, 255, 0.25);
}


/* ─────────────────────────────────────────────────────────────────────
   COMPARATIF TABLE
───────────────────────────────────────────────────────────────────── */
.ik-compare-wrap {
  overflow-x:   auto;
  border-radius: var(--ik-radius-lg);
  border:        1px solid var(--ik-border-blue);
  /* Scrollbar fine */
  scrollbar-width: thin;
  scrollbar-color: var(--ik-border-blue-strong) transparent;
}
.ik-compare-wrap::-webkit-scrollbar { height: 4px; }
.ik-compare-wrap::-webkit-scrollbar-thumb { background: var(--ik-border-blue-strong); border-radius: 2px; }

.ik-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .875rem;
}

.ik-table thead tr {
  background: var(--ik-deep);
}

.ik-table th {
  padding:        1rem 1.25rem;
  font-size:      .78rem;
  font-weight:    700;
  color:          var(--ik-text-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align:     left;
  white-space:    nowrap;
  border-bottom:  1px solid var(--ik-border);
}

/* Colonne Infomaniak — header */
.ik-table th.th-ik {
  background: rgba(0, 152, 255, 0.12);
  color:      var(--ik-blue-bright);
  border-left:  1px solid var(--ik-border-blue);
  border-right: 1px solid var(--ik-border-blue);
}

.ik-table tbody tr {
  background:  var(--ik-card);
  transition:  background var(--ik-trans);
}
.ik-table tbody tr:nth-child(even) {
  background: var(--ik-card-alt);
}
.ik-table tbody tr:hover {
  background: rgba(0, 152, 255, 0.04);
}

.ik-table td {
  padding:    .9rem 1.25rem;
  color:      var(--ik-text-dim);
  border-bottom: 1px solid var(--ik-border);
  line-height: 1.5;
}
.ik-table td:first-child {
  color:       var(--ik-white);
  font-weight: 500;
  white-space: nowrap;
}

/* Colonne Infomaniak — cellules */
.ik-table td.td-ik {
  background:  rgba(0, 152, 255, 0.06);
  color:       var(--ik-white);
  font-weight: 500;
  border-left:  1px solid var(--ik-border-blue);
  border-right: 1px solid var(--ik-border-blue);
}

/* Icônes check / cross / warn */
.ik-check { color: var(--ik-green); }
.ik-cross { color: var(--ik-red); }
.ik-warn  { color: var(--ik-amber); }

/* Note table */
.ik-table-note {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  margin-top:    1rem;
  font-size:     .78rem;
  color:         var(--ik-text-faint);
}
.ik-table-note i { color: var(--ik-blue); flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────────────
   CONSEIL GRID
───────────────────────────────────────────────────────────────────── */
.ik-conseil-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.25rem;
}

.ik-conseil-card {
  padding:         2rem;
  background:      rgba(7, 20, 42, 0.7);
  border:          1px solid var(--ik-border);
  border-radius:   var(--ik-radius);
  backdrop-filter: blur(12px);
  transition:      background var(--ik-trans), border-color var(--ik-trans), transform var(--ik-trans), box-shadow var(--ik-trans);
  position:        relative;
  overflow:        hidden;
}

/* Trait bleu en haut au hover */
.ik-conseil-card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, var(--ik-blue), var(--ik-teal));
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform var(--ik-trans);
}
.ik-conseil-card:hover::before { transform: scaleX(1); }

.ik-conseil-card:hover {
  background:   rgba(0, 152, 255, 0.06);
  border-color: var(--ik-border-blue);
  transform:    translateY(-4px);
  box-shadow:   var(--ik-shadow-glow);
}

.ik-conseil-card > i {
  font-size:     1.75rem;
  color:         var(--ik-blue);
  margin-bottom: 1rem;
  display:       block;
}

.ik-conseil-card h3 {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--ik-white);
  margin:         0 0 .6rem;
  letter-spacing: -0.01em;
}

.ik-conseil-card p {
  font-size:   .875rem;
  color:       var(--ik-text-dim);
  line-height: 1.65;
  margin:      0;
}


/* ─────────────────────────────────────────────────────────────────────
   INFOGÉRANCE — Option grid
───────────────────────────────────────────────────────────────────── */
.ik-option-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4rem;
  align-items:           center;
}

.ik-option-left > * + * { margin-top: 1.25rem; }

.ik-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            .4rem;
  padding:        .35rem .875rem;
  background:     var(--ik-green-soft);
  border:         1px solid rgba(16, 217, 138, 0.2);
  border-radius:  100px;
  font-size:      .72rem;
  font-weight:    700;
  color:          var(--ik-green);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ik-option-left h2 {
  font-size:      clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--ik-white);
  line-height:    1.3;
  margin:         0;
}
.ik-option-left h2 em {
  font-style: normal;
  color:      var(--ik-blue-bright);
}

.ik-option-left > p {
  font-size:   .95rem;
  color:       var(--ik-text-dim);
  line-height: 1.7;
  margin:      0;
}
.ik-option-left > p strong { color: var(--ik-white); }

/* Checklist verte */
.ik-checklist {
  list-style:    none;
  padding:       0;
  margin:        0;
  display:       flex;
  flex-direction: column;
  gap:           .6rem;
}
.ik-checklist li {
  display:     flex;
  align-items: flex-start;
  gap:         .65rem;
  font-size:   .875rem;
  color:       var(--ik-text-dim);
  line-height: 1.5;
}
.ik-checklist li i {
  color:      var(--ik-green);
  margin-top: .15rem;
  flex-shrink: 0;
}

/* Grille 2×2 option cards */
.ik-option-cards {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}

.ik-option-card {
  display:         flex;
  align-items:     flex-start;
  gap:             1rem;
  padding:         1.5rem;
  background:      rgba(7, 20, 42, 0.7);
  border:          1px solid var(--ik-border);
  border-radius:   var(--ik-radius);
  backdrop-filter: blur(12px);
  transition:      background var(--ik-trans), border-color var(--ik-trans), transform var(--ik-trans);
}
.ik-option-card:hover {
  background:   rgba(0, 152, 255, 0.06);
  border-color: var(--ik-border-blue);
  transform:    translateY(-3px);
}

.ik-option-card > i {
  font-size:  1.5rem;
  color:      var(--ik-blue);
  flex-shrink: 0;
  margin-top: .1rem;
}

.ik-option-card div { display: flex; flex-direction: column; gap: .3rem; }
.ik-option-card strong {
  font-size:   .875rem;
  font-weight: 700;
  color:       var(--ik-white);
}
.ik-option-card span {
  font-size:   .8rem;
  color:       var(--ik-text-dim);
  line-height: 1.55;
}


/* ─────────────────────────────────────────────────────────────────────
   FAQ
───────────────────────────────────────────────────────────────────── */
.ik-faq-list {
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
  max-width:      800px;
  margin:         0 auto;
}

.ik-faq-item {
  background:    rgba(7, 20, 42, 0.6);
  border:        1px solid var(--ik-border);
  border-radius: var(--ik-radius);
  overflow:      hidden;
  transition:    border-color var(--ik-trans);
}
.ik-faq-item:hover { border-color: var(--ik-border-blue); }

.ik-faq-item details { }
.ik-faq-item details[open] {
  border-color: var(--ik-border-blue);
}
.ik-faq-item details[open] > summary { border-bottom: 1px solid var(--ik-border); }

.ik-faq-q {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.25rem 1.5rem;
  cursor:          pointer;
  list-style:      none;
  font-size:       .95rem;
  font-weight:     600;
  color:           var(--ik-white);
  user-select:     none;
  transition:      color var(--ik-trans);
}
.ik-faq-q::-webkit-details-marker { display: none; }
.ik-faq-q:hover { color: var(--ik-blue-bright); }

.ik-faq-q i {
  color:      var(--ik-blue);
  font-size:  .85rem;
  flex-shrink: 0;
  transition: transform var(--ik-trans);
}
details[open] .ik-faq-q i { transform: rotate(180deg); }

.ik-faq-a {
  padding: 1.25rem 1.5rem;
}
.ik-faq-a p {
  font-size:   .875rem;
  color:       var(--ik-text-dim);
  line-height: 1.75;
  margin:      0 0 .75rem;
}
.ik-faq-a p:last-child { margin-bottom: 0; }
.ik-faq-a p strong { color: var(--ik-white); }


/* ─────────────────────────────────────────────────────────────────────
   CTA FINAL — Section dramatique
───────────────────────────────────────────────────────────────────── */
.ik-cta {
  position:   relative;
  padding:    4.5rem 1.5rem;
  background: linear-gradient(135deg, var(--ik-deep) 0%, rgba(0, 152, 255, 0.08) 50%, var(--ik-deep) 100%);
  overflow:   hidden;
}

/* Halo central décoratif */
.ik-cta::before {
  content:       '';
  position:      absolute;
  width:         600px;
  height:        600px;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  background:    radial-gradient(circle, rgba(0, 152, 255, 0.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.ik-cta-inner {
  position:    relative;
  z-index:     1;
  max-width:   700px;
  margin:      0 auto;
  text-align:  center;
}
.ik-cta-inner > img { margin-bottom: 1.5rem; }

.ik-cta-inner h2 {
  font-size:      clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--ik-white);
  line-height:    1.25;
  margin:         0 0 1rem;
}

.ik-cta-inner > p {
  font-size:   1rem;
  color:       var(--ik-text-dim);
  line-height: 1.7;
  margin:      0 0 2rem;
}
.ik-cta-inner > p strong { color: var(--ik-white); }

.ik-cta-actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
  flex-wrap:       wrap;
  margin-bottom:   1.5rem;
}

/* Bouton blanc */
.btn-ik-white {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  padding:         .75rem 1.75rem;
  background:      var(--ik-white);
  color:           var(--ik-deep);
  font-size:       .875rem;
  font-weight:     700;
  border-radius:   var(--ik-radius-sm);
  text-decoration: none;
  border:          none;
  transition:      background var(--ik-trans), box-shadow var(--ik-trans), transform var(--ik-trans);
  white-space:     nowrap;
}
.btn-ik-white:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 32px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(0,0,0,0.2);
  transform:  translateY(-2px);
}

/* Bouton outline blanc */
.btn-ik-outline-w {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  padding:         .75rem 1.75rem;
  background:      transparent;
  color:           var(--ik-white);
  font-size:       .875rem;
  font-weight:     600;
  border-radius:   var(--ik-radius-sm);
  text-decoration: none;
  border:          1px solid rgba(255, 255, 255, 0.3);
  transition:      background var(--ik-trans), border-color var(--ik-trans), transform var(--ik-trans);
  white-space:     nowrap;
}
.btn-ik-outline-w:hover {
  background:   rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  transform:    translateY(-2px);
}

/* Note CTA */
.ik-cta-note {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         .4rem;
  font-size:   .78rem;
  color:       var(--ik-text-faint);
}
.ik-cta-note i { color: var(--ik-blue); }


/* ─────────────────────────────────────────────────────────────────────
   FADE ANIMATIONS — Scroll reveal
───────────────────────────────────────────────────────────────────── */
.ik-fade {
  opacity:    0;
  transform:  translateY(30px);
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.ik-fade.visible {
  opacity:   1;
  transform: translateY(0);
}

/* Délais en cascade pour les grilles */
.ik-products-grid .ik-product:nth-child(1),
.ik-conseil-grid .ik-conseil-card:nth-child(1),
.ik-faq-list .ik-faq-item:nth-child(1) { transition-delay: .05s; }

.ik-products-grid .ik-product:nth-child(2),
.ik-conseil-grid .ik-conseil-card:nth-child(2),
.ik-faq-list .ik-faq-item:nth-child(2) { transition-delay: .1s; }

.ik-products-grid .ik-product:nth-child(3),
.ik-conseil-grid .ik-conseil-card:nth-child(3),
.ik-faq-list .ik-faq-item:nth-child(3) { transition-delay: .15s; }

.ik-products-grid .ik-product:nth-child(4),
.ik-conseil-grid .ik-conseil-card:nth-child(4),
.ik-faq-list .ik-faq-item:nth-child(4) { transition-delay: .2s; }

.ik-products-grid .ik-product:nth-child(5),
.ik-conseil-grid .ik-conseil-card:nth-child(5) { transition-delay: .25s; }

.ik-products-grid .ik-product:nth-child(6),
.ik-conseil-grid .ik-conseil-card:nth-child(6) { transition-delay: .3s; }


/* ─────────────────────────────────────────────────────────────────────
   SECTION FOCUS PRODUIT — NAS & Public Cloud
───────────────────────────────────────────────────────────────────── */
.ik-focus-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.5rem;
  margin-bottom:         2rem;
}

.ik-focus-card {
  display:         flex;
  flex-direction:  column;
  background:      var(--ik-card);
  border:          1px solid var(--ik-border);
  border-radius:   var(--ik-radius-lg);
  overflow:        hidden;
  transition:      border-color var(--ik-trans), box-shadow var(--ik-trans), transform var(--ik-trans);
  position:        relative;
}
.ik-focus-card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, var(--ik-blue), var(--ik-teal));
  opacity:    0;
  transition: opacity var(--ik-trans);
}
.ik-focus-card:hover {
  border-color: var(--ik-border-blue);
  box-shadow:   var(--ik-shadow-glow);
  transform:    translateY(-3px);
}
.ik-focus-card:hover::before { opacity: 1; }

.ik-focus-card-head {
  display:     flex;
  align-items: center;
  gap:         1rem;
  padding:     1.75rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--ik-border);
}
.ik-focus-card-icon {
  width:            48px;
  height:           48px;
  border-radius:    var(--ik-radius-sm);
  background:       var(--ik-blue-soft);
  border:           1px solid var(--ik-border-blue);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--ik-blue);
  font-size:        1.2rem;
  flex-shrink:      0;
}
.ik-focus-card-meta { flex: 1; min-width: 0; }
.ik-focus-card-meta h3 {
  font-size:      1.05rem;
  font-weight:    700;
  color:          var(--ik-white);
  margin:         0 0 .2rem;
  letter-spacing: -0.01em;
}
.ik-focus-card-meta span {
  font-size:  .72rem;
  font-weight: 600;
  color:       var(--ik-blue-bright);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.ik-focus-card-body { padding: 1.25rem 1.75rem 1.75rem; }
.ik-focus-card-body > p {
  font-size:     .875rem;
  color:         var(--ik-text-dim);
  line-height:   1.7;
  margin:        0 0 1.25rem;
}

/* Liste features avec icône */
.ik-focus-feats {
  list-style:     none;
  padding:        0;
  margin:         0 0 1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
}
.ik-focus-feats li {
  display:     flex;
  align-items: flex-start;
  gap:         .625rem;
  font-size:   .85rem;
  color:       var(--ik-text-dim);
  line-height: 1.5;
}
.ik-focus-feats li i {
  color:      var(--ik-blue);
  font-size:  .8rem;
  margin-top: .2rem;
  flex-shrink: 0;
  width:      14px;
  text-align: center;
}
.ik-focus-feats li strong { color: var(--ik-white); font-weight: 600; }

.ik-focus-card-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1rem 1.75rem;
  border-top:      1px solid var(--ik-border);
  background:      rgba(0, 0, 0, 0.15);
  margin-top:      auto;
}
.ik-focus-card-footer a {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  font-size:       .815rem;
  font-weight:     700;
  color:           var(--ik-blue-bright);
  text-decoration: none;
  transition:      color var(--ik-trans), gap var(--ik-trans);
}
.ik-focus-card-footer a:hover { color: var(--ik-teal); gap: .65rem; }
.ik-focus-card-badge {
  font-size:    .68rem;
  font-weight:  700;
  color:        var(--ik-text-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
}


/* ─────────────────────────────────────────────────────────────────────
   SECTION VIDÉOS RGPD — Façade click-to-load
───────────────────────────────────────────────────────────────────── */
.ik-videos-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.5rem;
}

.ik-video-wrapper {
  border-radius:   var(--ik-radius-lg);
  overflow:        hidden;
  position:        relative;
  background:      var(--ik-card);
  border:          1px solid var(--ik-border);
  box-shadow:      var(--ik-shadow-card);
  transition:      border-color var(--ik-trans), box-shadow var(--ik-trans);
}
.ik-video-wrapper:hover { border-color: var(--ik-border-blue); }

/* Aspect ratio 16/9 */
.ik-video-facade {
  position:   relative;
  width:      100%;
  padding-top: 56.25%; /* 16:9 */
  cursor:     pointer;
  overflow:   hidden;
}

.ik-video-thumb {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter:     brightness(0.65);
}
.ik-video-facade:hover .ik-video-thumb {
  transform: scale(1.03);
  filter:    brightness(0.5);
}

/* Overlay sombre au centre */
.ik-video-overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
  background:      radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 100%);
  transition:      background var(--ik-trans);
}
.ik-video-facade:hover .ik-video-overlay {
  background: radial-gradient(ellipse at center, rgba(0,152,255,0.15) 0%, rgba(0,0,0,0.3) 100%);
}

/* Bouton play */
.ik-video-play {
  width:           68px;
  height:          68px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.95);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--ik-trans), transform var(--ik-trans), box-shadow var(--ik-trans);
  box-shadow:      0 4px 24px rgba(0,0,0,0.4);
}
.ik-video-play i {
  color:     var(--ik-blue);
  font-size: 1.4rem;
  margin-left: 4px; /* centre visuel icône play */
}
.ik-video-facade:hover .ik-video-play {
  background:  var(--ik-blue);
  transform:   scale(1.08);
  box-shadow:  0 0 32px rgba(0, 152, 255, 0.5), 0 4px 24px rgba(0,0,0,0.4);
}
.ik-video-facade:hover .ik-video-play i { color: var(--ik-white); }

/* Titre vidéo overlay */
.ik-video-label {
  font-size:   .8rem;
  font-weight: 600;
  color:       rgba(255, 255, 255, 0.9);
  text-align:  center;
  padding:     0 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Mention RGPD sous la façade */
.ik-video-meta {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .75rem;
  padding:         .875rem 1.25rem;
  background:      rgba(0, 0, 0, 0.2);
  border-top:      1px solid var(--ik-border);
}
.ik-video-title {
  font-size:   .825rem;
  font-weight: 600;
  color:       var(--ik-white);
  line-height: 1.3;
}
.ik-video-rgpd {
  font-size:   .68rem;
  color:       var(--ik-text-faint);
  white-space: nowrap;
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  gap:         .3rem;
}
.ik-video-rgpd i { color: var(--ik-green); font-size: .65rem; }

/* iframe chargée */
.ik-video-iframe-wrap {
  display:    none;
  position:   relative;
  width:      100%;
  padding-top: 56.25%;
}
.ik-video-iframe-wrap.loaded { display: block; }
.ik-video-iframe-wrap iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   0;
}

/* ─────────────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────────────── */
.ik-footer {
  background:    var(--ik-deep);
  border-top:    1px solid var(--ik-border);
  padding:       0;
  color:         var(--ik-text-dim);
}

.ik-footer-top {
  display:               grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap:                   3rem;
  padding:               4rem 1.5rem;
  max-width:             1280px;
  margin:                0 auto;
}

.ik-footer-brand {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}
.ik-footer-brand img { height: 28px; width: auto; }
.ik-footer-brand p {
  font-size:   .825rem;
  line-height: 1.65;
  color:       var(--ik-text-faint);
  margin:      0;
}

.ik-footer-socials {
  display:    flex;
  gap:        .625rem;
  margin-top: .5rem;
}
.ik-footer-socials a {
  width:           34px;
  height:          34px;
  border-radius:   var(--ik-radius-sm);
  background:      var(--ik-blue-soft);
  border:          1px solid var(--ik-border-blue);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--ik-blue-bright);
  font-size:       .875rem;
  text-decoration: none;
  transition:      background var(--ik-trans), border-color var(--ik-trans), box-shadow var(--ik-trans);
}
.ik-footer-socials a:hover {
  background:  var(--ik-blue-mid);
  border-color: var(--ik-blue);
  box-shadow:  0 0 14px rgba(0, 152, 255, 0.25);
}

.ik-footer-col h4 {
  font-size:      .72rem;
  font-weight:    700;
  color:          var(--ik-white);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin:         0 0 1rem;
}
.ik-footer-col ul {
  list-style:    none;
  margin:        0;
  padding:       0;
  display:       flex;
  flex-direction: column;
  gap:           .5rem;
}
.ik-footer-col a {
  font-size:       .825rem;
  color:           var(--ik-text-faint);
  text-decoration: none;
  transition:      color var(--ik-trans);
}
.ik-footer-col a:hover { color: var(--ik-blue-bright); }

.ik-footer-bottom {
  border-top: 1px solid var(--ik-border);
  padding:    1.25rem 1.5rem;
  max-width:  1280px;
  margin:     0 auto;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  gap:        1rem;
  flex-wrap:  wrap;
  font-size:  .78rem;
  color:      var(--ik-text-faint);
}
.ik-footer-bottom a {
  color:           var(--ik-text-dim);
  text-decoration: none;
  transition:      color var(--ik-trans);
}
.ik-footer-bottom a:hover { color: var(--ik-blue-bright); }


/* ─────────────────────────────────────────────────────────────────────
   PRODUCT HERO CARD — kSuite featured sur la page catalogue
───────────────────────────────────────────────────────────────────── */
.ik-prod-hero {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2rem;
  padding:         2rem 2.5rem;
  background:      linear-gradient(135deg, var(--ik-card) 0%, rgba(0,152,255,0.08) 100%);
  border:          1.5px solid var(--ik-border-blue-strong);
  border-radius:   var(--ik-radius-lg);
  text-decoration: none;
  margin-bottom:   1.5rem;
  transition:      background var(--ik-trans), box-shadow var(--ik-trans), transform var(--ik-trans);
  position:        relative;
  overflow:        hidden;
}
.ik-prod-hero::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, var(--ik-blue), var(--ik-teal));
}
.ik-prod-hero:hover {
  background:  linear-gradient(135deg, var(--ik-card-alt) 0%, rgba(0,152,255,0.13) 100%);
  box-shadow:  var(--ik-shadow-glow);
  transform:   translateY(-2px);
}

.ik-prod-hero-left {
  display:     flex;
  align-items: flex-start;
  gap:         1.5rem;
  flex:        1;
  min-width:   0;
}
.ik-prod-hero-icon {
  width:            56px;
  height:           56px;
  border-radius:    var(--ik-radius-sm);
  background:       var(--ik-blue-soft);
  border:           1px solid var(--ik-border-blue);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--ik-blue);
  font-size:        1.4rem;
  flex-shrink:      0;
}
.ik-prod-hero-body { flex: 1; min-width: 0; }
.ik-prod-hero-badges {
  display:     flex;
  gap:         .5rem;
  flex-wrap:   wrap;
  margin-bottom: .75rem;
}
.ik-prod-hero-title {
  font-size:      1.05rem;
  font-weight:    700;
  color:          var(--ik-white);
  margin:         0 0 .5rem;
  letter-spacing: -0.01em;
}
.ik-prod-hero p {
  font-size:   .875rem;
  color:       var(--ik-text-dim);
  margin:      0 0 .875rem;
  line-height: 1.65;
}
.ik-prod-hero-feats {
  list-style:  none;
  padding:     0;
  margin:      0;
  display:     flex;
  flex-wrap:   wrap;
  gap:         .35rem 1.5rem;
}
.ik-prod-hero-feats li {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  font-size:   .8rem;
  color:       var(--ik-text-dim);
}
.ik-prod-hero-feats li i { color: var(--ik-green); font-size: .7rem; }

.ik-prod-hero-right { flex-shrink: 0; }
.ik-prod-hero-cta {
  display:      inline-flex;
  align-items:  center;
  gap:          .5rem;
  padding:      .8rem 1.5rem;
  background:   var(--ik-blue);
  color:        var(--ik-white);
  font-size:    .875rem;
  font-weight:  700;
  border-radius: var(--ik-radius-sm);
  white-space:  nowrap;
  transition:   background var(--ik-trans), box-shadow var(--ik-trans);
}
.ik-prod-hero:hover .ik-prod-hero-cta {
  background: var(--ik-blue-bright);
  box-shadow: 0 0 24px var(--ik-blue-glow);
}


/* ─────────────────────────────────────────────────────────────────────
   PRODUCT GRID 3×3 — 9 autres produits
───────────────────────────────────────────────────────────────────── */
.ik-prod-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
}

.ik-prod-card {
  display:        flex;
  flex-direction: column;
  padding:        1.5rem 1.75rem 1.75rem;
  background:     rgba(7, 20, 42, 0.8);
  border:         1px solid rgba(255, 255, 255, 0.06);
  border-radius:  var(--ik-radius);
  text-decoration: none;
  transition:     background var(--ik-trans), border-color var(--ik-trans), transform var(--ik-trans), box-shadow var(--ik-trans);
  position:       relative;
  overflow:       hidden;
  /* Respirez — padding généreux */
  min-height:     200px;
}
.ik-prod-card::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0;
  height:           2px;
  background:       linear-gradient(90deg, var(--ik-blue), var(--ik-teal));
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform var(--ik-trans);
}
.ik-prod-card:hover::before { transform: scaleX(1); }
.ik-prod-card:hover {
  background:   var(--ik-card-alt);
  border-color: var(--ik-border-blue);
  transform:    translateY(-3px);
  box-shadow:   var(--ik-shadow-glow);
}

.ik-prod-card-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1rem;
}
.ik-prod-card h3 {
  font-size:      .95rem;
  font-weight:    700;
  color:          var(--ik-white);
  margin:         0 0 .5rem;
  letter-spacing: -0.01em;
}
.ik-prod-card p {
  font-size:   .825rem;
  color:       var(--ik-text-dim);
  line-height: 1.6;
  margin:      0;
  flex:        1;
}
.ik-prod-card-link {
  display:     inline-flex;
  align-items: center;
  gap:         .4rem;
  margin-top:  1.25rem;
  font-size:   .8rem;
  font-weight: 700;
  color:       var(--ik-blue-bright);
  transition:  gap var(--ik-trans), color var(--ik-trans);
}
.ik-prod-card:hover .ik-prod-card-link {
  gap:   .65rem;
  color: var(--ik-teal);
}


/* ─────────────────────────────────────────────────────────────────────
   STICKY SUB-NAV — Navigation interne page Infomaniak
───────────────────────────────────────────────────────────────────── */
.ik-subnav {
  position:       sticky;
  top:            68px;
  z-index:        900;
  background:     rgba(3, 13, 28, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom:  1px solid rgba(0, 152, 255, 0.1);
  padding:        0;
}
.ik-subnav-inner {
  max-width:       1280px;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  gap:             0;
  padding:         0 1.5rem;
  overflow-x:      auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ik-subnav-inner::-webkit-scrollbar { display: none; }

a.ik-subnav-link {
  display:         inline-flex;
  align-items:     center;
  padding:         .75rem 1rem;
  font-size:       .78rem;
  font-weight:     600;
  color:           var(--ik-text-faint) !important;
  text-decoration: none;
  white-space:     nowrap;
  border-bottom:   2px solid transparent;
  transition:      color var(--ik-trans), border-color var(--ik-trans);
  letter-spacing:  .03em;
}
a.ik-subnav-link:hover {
  color: var(--ik-white) !important;
}
a.ik-subnav-link.active {
  color:        var(--ik-blue-bright) !important;
  border-color: var(--ik-blue);
}

/* ─── Video disclaimer ─── */
.ik-video-disclaimer {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  margin-top:  1.25rem;
  font-size:   .75rem;
  color:       var(--ik-text-faint);
  line-height: 1.5;
}
.ik-video-disclaimer i { color: var(--ik-blue); flex-shrink: 0; }
.ik-video-disclaimer strong { color: var(--ik-text-dim); font-weight: 600; }

/* ─── Product card "used" variant — green border accent ─── */
.ik-prod-card--used {
  border-color: rgba(16, 217, 138, 0.2);
}
.ik-prod-card--used:hover {
  border-color: rgba(16, 217, 138, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────
   PAGE PRODUIT — Hero + badge "utilisé par Bellova"
───────────────────────────────────────────────────────────────────── */
.ik-prod-page-hero { min-height: 70vh; }

.ik-prod-used-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  padding:        .45rem 1.1rem;
  background:     var(--ik-green-soft);
  border:         1px solid rgba(16, 217, 138, 0.3);
  border-radius:  100px;
  font-size:      .8rem;
  font-weight:    700;
  color:          var(--ik-green);
  margin-bottom:  1.25rem;
  letter-spacing: .04em;
}


/* ─────────────────────────────────────────────────────────────────────
   PAGE PRODUIT — Grille fonctionnalités
───────────────────────────────────────────────────────────────────── */
.ik-feat-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.25rem;
}

.ik-feat-card {
  padding:         2rem;
  background:      rgba(7, 20, 42, 0.7);
  border:          1px solid var(--ik-border);
  border-radius:   var(--ik-radius);
  backdrop-filter: blur(12px);
  transition:      background var(--ik-trans), border-color var(--ik-trans), transform var(--ik-trans);
}
.ik-feat-card:hover {
  background:   rgba(0, 152, 255, 0.06);
  border-color: var(--ik-border-blue);
  transform:    translateY(-3px);
}
.ik-feat-icon {
  width:            48px;
  height:           48px;
  border-radius:    var(--ik-radius-sm);
  background:       var(--ik-blue-soft);
  border:           1px solid var(--ik-border-blue);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--ik-blue);
  font-size:        1.1rem;
  margin-bottom:    1.25rem;
}
.ik-feat-card h3 {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--ik-white);
  margin:         0 0 .6rem;
  letter-spacing: -0.01em;
}
.ik-feat-card p {
  font-size:   .875rem;
  color:       var(--ik-text-dim);
  line-height: 1.65;
  margin:      0;
}


/* ─────────────────────────────────────────────────────────────────────
   PAGE PRODUIT — Liste bénéfices numérotée
───────────────────────────────────────────────────────────────────── */
.ik-benefits-list {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  max-width:      860px;
  margin:         0 auto;
}
.ik-benefit-item {
  display:     flex;
  align-items: flex-start;
  gap:         1.5rem;
  padding:     1.75rem 2rem;
  background:  rgba(7, 20, 42, 0.6);
  border:      1px solid var(--ik-border);
  border-radius: var(--ik-radius);
  transition:  background var(--ik-trans), border-color var(--ik-trans);
}
.ik-benefit-item:hover {
  background:   rgba(0, 152, 255, 0.05);
  border-color: var(--ik-border-blue);
}
.ik-benefit-num {
  font-size:      2rem;
  font-weight:    900;
  color:          var(--ik-border-blue-strong);
  line-height:    1;
  flex-shrink:    0;
  letter-spacing: -0.04em;
  min-width:      3rem;
  transition:     color var(--ik-trans);
}
.ik-benefit-item:hover .ik-benefit-num { color: var(--ik-blue); }
.ik-benefit-body h3 {
  font-size:      1.05rem;
  font-weight:    700;
  color:          var(--ik-white);
  margin:         0 0 .5rem;
}
.ik-benefit-body p {
  font-size:   .9rem;
  color:       var(--ik-text-dim);
  line-height: 1.7;
  margin:      0;
}


/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE — Tablette ≤ 1024px
───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ik-products-grid,
  .ik-bento {
    grid-template-columns: repeat(2, 1fr);
  }

  /* kSuite featured et dernière carte : span 2 = pleine largeur sur grille 2 cols */
  .ik-product[style*="border-color"],
  .ik-bento-featured,
  .ik-bento .ik-bento-item:last-child {
    grid-column: span 2;
  }

  .ik-prod-grid { grid-template-columns: repeat(2, 1fr); }
  .ik-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .ik-focus-grid { grid-template-columns: 1fr; }
  .ik-videos-grid { grid-template-columns: 1fr; }
  .ik-prod-hero { flex-direction: column; align-items: flex-start; }
  .ik-prod-hero-right { width: 100%; }
  .ik-prod-hero-cta { width: 100%; justify-content: center; }

  .ik-conseil-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ik-option-grid {
    grid-template-columns: 1fr;
    gap:                   2.5rem;
  }

  .ik-footer-top {
    grid-template-columns: 1fr 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE — Mobile ≤ 900px
───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Nav */
  .ik-nav-center         { display: none; }
  .ik-nav-toggle         { display: flex; }

  /* Menu mobile overlay */
  .ik-nav-center.open {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    position:       fixed;
    top:            60px; left: 0; right: 0;
    background:     rgba(3, 13, 28, 0.98);
    backdrop-filter: blur(24px);
    border-bottom:  1px solid rgba(0, 152, 255, 0.12);
    border-radius:  0;
    padding:        1rem 1.5rem 1.5rem;
    gap:            .25rem;
    z-index:        999;
  }
  .ik-nav-center.open .ik-nav-links {
    flex-direction: column;
    align-items:    stretch;
    gap:            .25rem;
  }
  .ik-nav-center.open .ik-nav-link {
    border-radius: 10px;
    padding:       .7rem 1rem;
    font-size:     .9rem;
  }
  /* Actions dans le menu mobile : affichées */
  .ik-nav-center.open .ik-nav-actions {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    margin-top:     .5rem;
    padding-top:    .75rem;
    border-top:     1px solid rgba(255, 255, 255, 0.06);
  }
  .ik-nav-center.open .ik-nav-cta,
  .ik-nav-center.open .ik-nav-back {
    border-radius:   10px;
    justify-content: center;
    padding:         .75rem 1rem;
    font-size:       .875rem;
  }
  .ik-nav-center.open .ik-nav-back {
    display:      flex;
    border-color: rgba(255, 255, 255, 0.08);
  }

  /* Hero */
  .ik-hero { padding: 6rem 1.25rem 4rem; }
  .ik-hero h1, .ik-hero-title { letter-spacing: -0.03em; }

  .ik-hero-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Conseil grid */
  .ik-conseil-grid {
    grid-template-columns: 1fr;
  }

  /* Option cards */
  .ik-option-cards {
    grid-template-columns: 1fr;
  }

  /* Proof */
  .ik-proof-inner {
    flex-direction: column;
    align-items:    flex-start;
  }
  .ik-proof-badge { align-self: flex-start; }

  /* Footer */
  .ik-footer-top {
    grid-template-columns: 1fr;
    gap:                   2rem;
    padding:               2.5rem 1.25rem;
  }
  .ik-footer-bottom {
    flex-direction: column;
    text-align:     center;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE — Mobile ≤ 640px
───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  .ik-section { padding: 3rem 0; }

  /* Hero actions */
  .ik-hero-actions {
    flex-direction: column;
    align-items:    stretch;
  }
  .btn-ik, .btn-ik-primary, .btn-ik-ghost {
    justify-content: center;
    width: 100%;
  }

  /* KPIs — 1 colonne */
  .ik-hero-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bento — 1 colonne */
  .ik-products-grid, .ik-bento {
    grid-template-columns: 1fr;
    background: var(--ik-border-blue);
  }
  .ik-product[style*="border-color"],
  .ik-bento-featured,
  .ik-bento .ik-bento-item:last-child {
    grid-column: span 1;
  }

  .ik-prod-grid { grid-template-columns: 1fr; }
  .ik-feat-grid { grid-template-columns: 1fr; }
  .ik-focus-grid { grid-template-columns: 1fr; }
  .ik-videos-grid { grid-template-columns: 1fr; }
  .ik-benefit-item { flex-direction: column; gap: .75rem; }
  .ik-benefit-num { font-size: 1.5rem; }

  /* CTA actions */
  .ik-cta-actions {
    flex-direction: column;
    align-items:    stretch;
  }
  .btn-ik-white, .btn-ik-outline-w {
    justify-content: center;
  }

  /* Section header */
  .ik-section-header { margin-bottom: 2.5rem; }

  /* Comparatif */
  .ik-table { font-size: .8rem; }
  .ik-table th, .ik-table td { padding: .75rem .875rem; }
}


/* ─────────────────────────────────────────────────────────────────────
   ACCESSIBILITY — Réduction de mouvement
───────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────
   OVERRIDES — Force dark theme against styles.css conflicts
   (styles.css impose body{background:white} et p{color:gray-600})
───────────────────────────────────────────────────────────────────── */

/* Body dark override */
body.ik-body {
  background: var(--ik-void) !important;
  color: var(--ik-white) !important;
}

/* ── Navbar dark override pour pages Infomaniak ── */
body.ik-body .navbar {
  background: rgba(2, 6, 23, .92);
  border-bottom-color: var(--ik-border);
}
body.ik-body .navbar.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .4);
}
body.ik-body .nav-link,
body.ik-body .nav-dropdown-trigger {
  color: var(--ik-text-dim);
}
body.ik-body .nav-link:hover,
body.ik-body .nav-dropdown-trigger:hover,
body.ik-body .nav-link.active,
body.ik-body .nav-dropdown-active > .nav-dropdown-trigger {
  color: var(--ik-white);
  background: rgba(255, 255, 255, .07);
}
body.ik-body .nav-toggle span {
  background: var(--ik-white);
}

/* Paragraphes & listes : héritent de la couleur du parent dark */
.ik-body p,
.ik-body li,
.ik-body span:not(.ik-nav-bellova):not(.ik-nav-sep) {
  color: inherit;
}

/* Titres toujours blancs dans ik-body */
.ik-body h1,
.ik-body h2,
.ik-body h3,
.ik-body h4,
.ik-body h5 {
  color: var(--ik-white);
}

/* ── Reset navbar — restaurer les couleurs d'origine ── */
body.ik-body .navbar .nav-dropdown-item strong { color: var(--gray-900); }
body.ik-body .navbar .nav-dropdown-item small  { color: var(--gray-500); }
body.ik-body .navbar .nav-dropdown-item span   { color: initial; }
body.ik-body .navbar .nav-dropdown-item p       { color: initial; }
body.ik-body .navbar .nav-dropdown-menu h4      { color: initial; }
body.ik-body .navbar li                         { color: initial; }
body.ik-body .navbar .nav-ik-products a         { color: var(--gray-500); }
body.ik-body .navbar .nav-ik-products a:hover   { color: #16a34a; }

/* ── Reset footer — restaurer les couleurs d'origine ── */
body.ik-body .footer h4                { color: rgba(255,255,255,.45); }
body.ik-body .footer li                { color: initial; }
body.ik-body .footer p                 { color: initial; }
body.ik-body .footer span              { color: initial; }
body.ik-body .footer a                 { color: inherit; }
body.ik-body .footer-col ul a          { color: rgba(255,255,255,.6); }
body.ik-body .footer-col ul a:hover    { color: var(--white); }
body.ik-body .footer-col address p     { color: rgba(255,255,255,.55); }
body.ik-body .footer-col address a     { color: var(--yellow); }
body.ik-body .footer-brand p           { color: rgba(255,255,255,.55); }
body.ik-body .footer-bottom p          { color: rgba(255,255,255,.35); }
body.ik-body .footer-bottom a          { color: rgba(255,255,255,.55); }

/* Sections — spécificité plus haute pour battre tout override */
body.ik-body .ik-section { color: var(--ik-text-dim); }
body.ik-body .ik-section-dark  { background: var(--ik-deep) !important; }
body.ik-body .ik-section-light { background: var(--ik-surface) !important; }
body.ik-body .ik-section-gray  { background: var(--ik-void) !important; }

/* Masquer colonne Services dans le footer Infomaniak */
body.ik-body .footer-col-services { display: none; }

/* Proof, affil, trust */
body.ik-body .ik-proof,
body.ik-body .ik-affil,
body.ik-body .ik-trust { background: var(--ik-deep); }

/* Texte dimmed dans sections */
.ik-section p,
.ik-option-left > p,
.ik-conseil-card p,
.ik-option-card span,
.ik-checklist li,
.ik-hero-desc,
.ik-section-subtitle,
.ik-proof-body p,
.ik-faq-a p { color: var(--ik-text-dim); }

/* Titres forts dans sections sombres */
.ik-section h2,
.ik-section h3,
.ik-option-left h2,
.ik-conseil-card h3,
.ik-option-card strong,
.ik-proof-body strong,
.ik-cta-inner h2 { color: var(--ik-white); }


@media (prefers-reduced-motion: reduce) {
  .ik-hero::before,
  .ik-hero::after,
  .ik-hero-aurora::before,
  .ik-trust-inner,
  .ik-gradient-text,
  .ik-hero-eyebrow {
    animation: none;
  }

  .ik-fade {
    opacity:   1;
    transform: none;
    transition: none;
  }

  .ik-product,
  .ik-bento-item,
  .ik-conseil-card,
  .ik-option-card,
  .btn-ik,
  .btn-ik-primary,
  .btn-ik-ghost,
  .btn-ik-white,
  .btn-ik-outline-w {
    transition: none;
  }
}