/* KOKO IT Services global skin: vivid blue gradient + readable panels */
:root{
  --kokoits-blue-1:#2563eb; /* same as favicon start */
  --kokoits-blue-2:#0ea5e9; /* same as favicon end   */
}

/* Full-page gradient */
html,body{min-height:100%}
body{
  /* halo doux + dégradé principal */
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(255,255,255,0.14) 0%, transparent 60%),
    linear-gradient(135deg, var(--kokoits-blue-1) 0%, var(--kokoits-blue-2) 100%);
  background-attachment: fixed;
}

/* Header/Footer translucides pour flotter sur le fond */
header.sticky{background-color: rgba(255,255,255,0.88) !important}
footer{background-color: rgba(255,255,255,0.92)}

/* Bloc principal lisible sur fond coloré (toutes les pages ont <main>) */
main{
  background: rgba(255,255,255,0.95);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.18);
  margin-top: 12px;  /* espace entre header et carte */
}

/* Petites cartes/figures: accentuer la séparation */
.reveal, figure, .ring-1{
  background-color: white;
}

/* Bannière cookies: lisible sur fond coloré */
#cookie-banner{background-color: rgba(255,255,255,0.96)}

/* Option: renforcer les boutons bleus pour matcher le fond */
.bg-blue-600{ background-color:#2563eb !important }

/* Etend un bloc à l’entière largeur de la fenêtre (même si le site est centré) */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
/* ====== HERO full-bleed — version robuste (Safari-friendly) ====== */
#hero.full-bleed{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* neutralise toute ancienne méthode */
  left: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: hidden;
}

/* Evite tout débordement horizontal éventuel */
html, body { overflow-x: hidden; }

/* Assure que la vidéo occupe bien toute la largeur obtenue */
#hero .hero-video{ position: relative; width: 100%; }
#hero .hero-video__bg{
  display: block;
  width: 100%;
  height: clamp(340px, 64vh, 560px); /* ajuste si tu veux + haut */
  object-fit: cover;
}

/* Overlay + contenu restent en surimpression */
#hero .hero-video__overlay{ position:absolute; inset:0; z-index:1; }
#hero .hero-video__content{ position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:center; }
#hero .hero-video__inner{ color:#fff; padding: 28px 16px 36px; }

/* HERO vidéo */
.hero-video { position: relative; overflow: hidden; }
.hero-video__bg {
  width: 100%;
  height: min(80vh, 760px);
  display: block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.hero-video__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,45,255,.35), rgba(12,23,55,.65));
}
.hero-video__content {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none; /* n’empêche pas les clics sous-jacents */
}
.hero-video__inner {
  pointer-events: auto;
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 48px 20px;
  color: #fff; text-align: left;
}
.hero-title { font-weight: 800; letter-spacing: .2px; font-size: clamp(28px, 4.2vw, 46px); margin: 0 0 10px;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-sub { font-size: clamp(16px, 2.2vw, 20px); opacity: .95; max-width: 920px; margin: 0 0 20px;
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.hero-accent { color: #5ec8ff; }

/* Bandeau tech: logos cliquables */
.tech-strip a {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 12px; transition: .15s; filter: grayscale(1); opacity: .85;
}
.tech-strip a:hover { background: #fff; filter: grayscale(0); opacity: 1; box-shadow: 0 8px 24px rgba(2,6,23,.10); }
.tech-strip img { height: 28px; width: auto; display: block; }

/* Cartes Services cliquables (si utilisées ailleurs) */
.service-card { display:block; border:1px solid #e5e7eb; border-radius:18px; overflow:hidden; background:#fff;
  transition:.15s; text-decoration:none; color:inherit;
}
.service-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(2,6,23,.10); }
.service-card img { width:100%; height:180px; object-fit:cover; display:block; }


/* Video */

.hero-video{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.hero-video__bg{width:100%;height:520px;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.05)}
.hero-video__overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,28,87,.45),rgba(6,28,87,.45));
  /* ou plus léger: .30 */
  backdrop-filter:saturate(1.1) brightness(.95)}
.hero-video__content{position:absolute;left:48px;bottom:48px;right:48px;color:#fff}
@media (max-width:768px){
  .hero-video__bg{height:420px}
  .hero-video__content{left:20px;right:20px;bottom:24px}
}


/* HERO vidéo */
.hero-video { 
  position: relative; 
  overflow: hidden; 
}

.hero-video__bg {
  width: 100%;
  height: clamp(380px, 80vh, 760px); /* plein écran sans « avaler » tout le fold */
  display: block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}

.hero-video { position: relative; }
.hero-video__bg { position: relative; z-index: 0; }
.hero-video__overlay { z-index: 1; }
.hero-video__content { z-index: 2; }


/* Voile bleu premium (par-dessus la vidéo) */
.hero-video__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 550px at 10% 0%, rgba(46,118,255,.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.38) 0%, rgba(12,23,55,.62) 100%);
  pointer-events: none;
}

/* Contenu en overlay (titre/sous-titre/CTA) */
.hero-video__content {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;             /* ne bloque pas les clics sous-jacents */
}
.hero-video__inner {
  pointer-events: auto;             /* réactive les liens/CTA */
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 48px 20px;
  color: #fff; text-align: left;
}
.hero-title {
  font-weight: 800; letter-spacing: .2px;
  font-size: clamp(28px, 4.2vw, 46px); margin: 0 0 10px;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-sub {
  font-size: clamp(16px, 2.2vw, 20px); opacity: .96; max-width: 920px; margin: 0 0 18px;
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.hero-accent { color: #5ec8ff; } /* “Greater Atlanta” en bleu pour l’effet premium */

@media (max-width: 768px) {
  .hero-video__bg { height: clamp(320px, 60vh, 560px); }
}
/* Bandeau partenaires — icônes inline SVG */
.tech-strip a{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;
  background:#f8fafc;border:1px solid #e5e7eb;
  transition:.15s;filter:grayscale(1);opacity:.9
}
.tech-strip a:hover{filter:grayscale(0);opacity:1;box-shadow:0 8px 24px rgba(2,6,23,.10)}
.tech-strip svg{height:22px;width:auto;display:block}
.tech-strip .label{font-size:14px;color:#0f172a}

/* -- HERO: fix mobile overlay/title layering & full-bleed -- */
#hero.full-bleed {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100vw;     /* évite tout scroll horizontal sur mobile */
  overflow: hidden;
}

.hero-video { position: relative; }
.hero-video__bg { position: relative; z-index: 0; }
.hero-video__overlay { position: absolute; inset: 0; z-index: 1; }
.hero-video__content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.hero-video__inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 48px 20px; color: #fff; }

/* Titres premium */
.hero-title {
  font-weight: 800; letter-spacing: .2px;
  font-size: clamp(28px, 4.2vw, 46px); margin: 0 0 10px;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-sub {
  font-size: clamp(16px, 2.2vw, 20px); opacity: .96; max-width: 920px; margin: 0 0 18px;
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.hero-accent { color: #5ec8ff; }

/* Voile bleu premium */
.hero-video__overlay {
  background:
    radial-gradient(1100px 550px at 10% 0%, rgba(46,118,255,.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.38) 0%, rgba(12,23,55,.62) 100%);
  pointer-events: none;
}

/* ✅ Mobile: forcer l’overlay + le titre au-dessus de la vidéo */
@media (max-width: 768px) {
  #hero .hero-video__bg { height: clamp(320px, 60vh, 560px); object-fit: cover; }

  /* Certains anciens styles peuvent annuler l’absolute — on force ici */
  #hero .hero-video__overlay,
  #hero .hero-video__content { position: absolute !important; inset: 0 !important; display: flex !important; }

  #hero .hero-video__inner { padding: 24px 16px; }
  #hero .hero-title { font-size: clamp(22px, 6vw, 30px); }
  #hero .hero-sub { font-size: clamp(14px, 4.2vw, 18px); }
}

/* Casse de ligne contrôlée : cachée sur mobile, visible dès ≥ 900px */
.hero-title .br-lg { display: none; }
@media (min-width: 900px) {
  .hero-title .br-lg { display: inline; }
}
/* — HERO premium tuning — */
.hero-video__inner{
  /* Plus d’air en haut/bas, marges fluides */
  padding: clamp(28px, 6vw, 72px) clamp(18px, 5vw, 48px) clamp(38px, 9vw, 88px);
  max-width: 1100px;
}
.hero-title{
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: .2px;
  margin: 0 0 12px;
  text-shadow: 0 14px 36px rgba(0,0,0,.38);
}
.hero-sub{
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.5;
  letter-spacing: .1px;
  opacity: .98;
  max-width: 940px;
  margin: 0 0 22px;
  text-shadow: 0 10px 28px rgba(0,0,0,.32);
}
/* Overlay un peu plus “verre teinté” mais lumineux */
.hero-video__overlay{
  background:
    radial-gradient(1200px 600px at 12% -6%, rgba(46,118,255,.30) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.32) 0%, rgba(12,23,55,.56) 100%);
}

/* Boutons “waouh” mais sobres */
.btn, .btn-primary, .btn-ghost{
  border-radius: 14px;
  padding: 12px 18px;
}
.btn-primary{
  background: linear-gradient(135deg,#2563eb,#0ea5e9);
  box-shadow: 0 14px 36px rgba(14,165,233,.32), 0 6px 18px rgba(2,6,23,.18);
  border: none;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(2px);
}

/* — Tech strip luxe — */
.tech-strip{
  gap: 12px;
  padding: 12px 16px !important;
  background: linear-gradient(180deg,#f8fafc,#f9fafb);
  border-radius: 18px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
}
.tech-strip a{
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  filter: grayscale(1);
  opacity: .9;
  transition: .15s;
}
.tech-strip a:hover{
  filter: grayscale(0);
  opacity: 1;
  box-shadow: 0 12px 26px rgba(2,6,23,.10);
}

/* — Petits plus : éviter scroll horizontal mobile sur le hero full-bleed — */
#hero.full-bleed{ max-width: 100vw; overflow: hidden; }

/* Mobile : un peu plus de contraste + resserrer l’air si trop grand */
@media (max-width: 768px){
  .hero-video__bg{ height: clamp(340px, 64vh, 560px); }
  .hero-video__overlay{
    background:
      radial-gradient(900px 450px at 12% -6%, rgba(46,118,255,.36) 0%, transparent 60%),
      linear-gradient(180deg, rgba(16,45,255,.38) 0%, rgba(12,23,55,.62) 100%);
  }
  .hero-video__inner{ padding: 28px 16px 36px; }
  .hero-title{ font-size: clamp(24px,7vw,32px); }
  .hero-sub{ font-size: clamp(14px,4.2vw,18px); }
}

/* --- HERO premium (densité & lisibilité) --- */
.hero-video__inner{
  padding: clamp(28px, 6vw, 72px) clamp(18px, 5vw, 48px) clamp(38px, 9vw, 88px);
  max-width: 1100px;
}
.hero-title{
  font-weight: 900;
  font-size: clamp(28px, 4.8vw, 52px);
  line-height: 1.08;
  letter-spacing: .2px;
  margin: 0 0 12px;
  text-shadow: 0 14px 36px rgba(0,0,0,.38);
}
.hero-sub{
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.5;
  letter-spacing: .1px;
  opacity: .98;
  max-width: 940px;
  margin: 0 0 22px;
  text-shadow: 0 10px 28px rgba(0,0,0,.32);
}
/* Overlay bleu légèrement “verre teinté” */
.hero-video__overlay{
  background:
    radial-gradient(1200px 600px at 12% -6%, rgba(46,118,255,.30) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.32) 0%, rgba(12,23,55,.56) 100%);
}

/* Boutons premium sobres */
.btn, .btn-primary, .btn-ghost{ border-radius: 14px; padding: 12px 18px; }
.btn-primary{
  background: linear-gradient(135deg,#2563eb,#0ea5e9);
  box-shadow: 0 14px 36px rgba(14,165,233,.28), 0 6px 18px rgba(2,6,23,.18);
  border: none;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(2px);
}

/* Bandeau logos (tech strip) luxueux & net */
.tech-strip{
  gap: 12px;
  padding: 12px 16px !important;
  background: linear-gradient(180deg,#f8fafc,#f9fafb);
  border-radius: 18px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
}
.tech-strip a{
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  filter: grayscale(1);
  opacity: .9;
  transition: .15s;
}
.tech-strip a:hover{
  filter: grayscale(0);
  opacity: 1;
  box-shadow: 0 12px 26px rgba(2,6,23,.10);
}
/* Espace sain sous le hero pour éviter tout chevauchement */
#hero + section { margin-top: 18px; }

/* Mobile: resserrer légèrement et renforcer l’overlay */
@media (max-width: 768px){
  .hero-video__bg{ height: clamp(340px, 64vh, 560px); }
  .hero-video__overlay{
    background:
      radial-gradient(900px 450px at 12% -6%, rgba(46,118,255,.36) 0%, transparent 60%),
      linear-gradient(180deg, rgba(16,45,255,.38) 0%, rgba(12,23,55,.62) 100%);
  }
  .hero-video__inner{ padding: 28px 16px 36px; }
  .hero-title{ font-size: clamp(24px,7vw,32px); }
  .hero-sub{ font-size: clamp(14px,4.2vw,18px); }
}

/* Accessibilité: si utilisateur préfère réduire les animations, figer la vidéo */
@media (prefers-reduced-motion: reduce){
  .hero-video__bg{ animation: none; }
  .hero-video__bg[autoplay]{ -webkit-animation: none; }
}
/* ===== SERVICES: voile bleuté + style titre ===== */

/* La carte service entière sert de conteneur */
.service-card{ position: relative; overflow: hidden; }

/* L’image a une hauteur fixe (déjà posée) → on peut cibler le haut de la carte */
.service-card img{ width:100%; height:180px; object-fit:cover; display:block; }

/* Voile bleu premium sur la zone image uniquement (0 → 180px) */
.service-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:180px; pointer-events:none;
  background:
    radial-gradient(900px 450px at 12% -6%, rgba(46,118,255,.30) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.25) 0%, rgba(12,23,55,.40) 100%);
  transition: opacity .2s;
  opacity:.95;            /* densité du voile (0.85–1.0) */
}
.service-card:hover::before{ opacity:1; }

/* Bandeau du titre (sous l’image) en “verre teinté” léger */
.svc-title{
  margin:0; padding:10px 14px;
  background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(14,165,233,.08));
  color:#0f172a; font-weight:700; font-size:10px;
  border-top:1px solid rgba(2,6,23,.08);
  backdrop-filter:saturate(1.1);
}

/* Texte descriptif sous le titre (si présent) */
.svc-desc{ margin: 0 14px 14px; color:#475569; font-size:14px; }

/* ===== ESPACEMENT: réduire l’écart sous la vidéo jusqu’au H2 “Services” ===== */
#services{ margin-top: clamp(10px, 2.2vw, 18px); }   /* avant: ~30px */
.section-title{ margin-top: 0; margin-bottom: 12px; }

/* — Voile bleu premium sur les vignettes de services — */
.service-card .thumb {
  position: relative;
  display: block;
  height: 180px;            /* adapte si besoin */
  overflow: hidden;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.service-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-card .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 450px at 12% -6%, rgba(46,118,255,.28) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.22) 0%, rgba(12,23,55,.38) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* --- Thumb + overlay bleu (global) --- */
.thumb { position: relative; display:block; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:0; }
.thumb.overlay-blue::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(900px 450px at 12% -6%, rgba(46,118,255,.28) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.22) 0%, rgba(12,23,55,.38) 100%);
  mix-blend-mode: multiply;
  border-radius:inherit;
}
/* === HERO: full-bleed, overlay bleu, titre au-dessus ================== */
:root {
  --brand-navy: #061a3a;
  --accent-blue: #7ec7ff; /* couleur du mot "Greater Atlanta" */
}

/* section bord à bord même si le layout centralise le contenu */
.hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: clamp(60vh, 56.25vw, 88vh); /* ~16:9 borné par le viewport */
  border-radius: 28px;
  overflow: hidden;
  background: var(--brand-navy);
}

/* vidéo en arrière-plan */
.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* plein écran */
  object-position: 50% 38%;  /* remonte légèrement le cadrage */
}

/* voile bleu premium */
.hero__overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    radial-gradient(900px 460px at 12% -6%, rgba(46,118,255,.28) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.22) 0%, rgba(12,23,55,.38) 100%);
  z-index: 1;
}

/* contenu au-dessus de la vidéo + overlay */
.hero__content{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(18px, 4vw, 56px);
  color: #fff;
  text-shadow: 0 10px 36px rgba(0,0,0,.35);
}

.hero__title{
  margin: 0;
  line-height: 1.06;
  letter-spacing: -.02em;
  font-weight: 800;
  max-width: 18ch;
  font-size: clamp(28px, 5.6vw, 72px);
}

.hero__accent{ color: var(--accent-blue); }

.hero__sub{
  margin: 0;
  max-width: 60ch;
  opacity: .95;
  font-size: clamp(14px, 1.6vw, 22px);
}

.hero__cta{ display: flex; gap: 14px; }

/* ultra-wide: limiter la coupe agressive (option) */
@media (min-aspect-ratio: 21/9){
  .hero__video{ object-fit: contain; background: var(--brand-navy); }
}

/* mobile: un peu moins haut et padding réduit */
@media (max-width: 640px){
  .hero{ height: clamp(58vh, 65vw, 78vh); border-radius: 20px; }
}

/* Service detail pages */
.svc-wrap{max-width:1000px;margin:0 auto;padding:clamp(20px,3vw,40px)}
.breadcrumb{font-size:.9rem;color:#64748b;margin-bottom:12px}
.breadcrumb a{color:#2563eb}
.svc-hero{margin:18px 0 22px;border-radius:18px;overflow:hidden;background:#0b1c3a}
.svc-hero img{display:block;width:100%;height:auto}
.svc-meta{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.svc-meta .tag{background:#eef2ff;border:1px solid #dbeafe;border-radius:999px;padding:6px 10px;font-size:.85rem;color:#1d4ed8}
.svc-cols{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:900px){.svc-cols{grid-template-columns:1.15fr .85fr}}

/* === Service cards (thumbnails with blue veil) === */
.service-card{position:relative;overflow:hidden;border:1px solid #e5e7eb;border-radius:18px;background:#fff}
.service-card .thumb{position:relative;height:200px;overflow:hidden}
.service-card .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.service-card .thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:
    radial-gradient(900px 450px at 12% -6%, rgba(46,118,255,.28) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.22) 0%, rgba(12,23,55,.38) 100%);
}
/* ===== Service detail layout (split 2-col) ===== */
.svc-page { max-width: 1100px; margin: 0 auto; padding: clamp(20px,3vw,40px); }
.svc-breadcrumb { font-size:.95rem; color:#64748b; margin-bottom:12px; }
.svc-breadcrumb a { color:#2563eb; }

.svc-header { margin-bottom: 18px; }
.svc-header h1 { margin:0; font-size: clamp(28px,4.4vw,40px); line-height:1.15; }
.svc-intro { margin:10px 0 20px; max-width: 70ch; }

.svc-split { 
  display:grid; 
  grid-template-columns: 1.2fr .8fr; 
  gap: clamp(18px,3vw,36px); 
  align-items:start;
}
@media (max-width: 900px){ .svc-split { grid-template-columns: 1fr; } }

.svc-main section + section { margin-top: 18px; }

.svc-aside .media {
  border-radius: 18px; overflow:hidden;
  border:1px solid #e5e7eb; background:#0b1c3a;
}
.svc-aside .media img {
  display:block; width:100%; height:auto;
  max-height: 440px; object-fit: cover;
}

/* tags réutilisables */
.svc-tags { display:flex; gap:10px; flex-wrap:wrap; margin: 8px 0 18px; }
.svc-tags .tag { background:#eef2ff; border:1px solid #dbeafe; border-radius:999px; padding:6px 10px; font-size:.85rem; color:#1d4ed8 }

/* petit espacement sous le header global */
.page-top-spacer { height: 10px; }

/* ===== Header variants ===== */
.topbar{ position: sticky; top: 0; z-index: 50; }

.topbar--overlay {            /* pour la Home au-dessus du hero video */
  color:#fff;
  background: transparent;
}

.topbar--solid {              /* pour les pages internes */
  color:#0f172a;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid #e5e7eb;
  backdrop-filter: blur(8px);
}

/* hérite la couleur du header */
.topbar a{ color: inherit; text-decoration: none; }
.topbar nav a{ font-weight:600; margin: 0 .75rem; }
.topbar a[aria-current="page"]{ color:#1d4ed8; }

/* petit espace sous le header pour éviter le chevauchement */
.page-top-spacer{ height: 10px; }
/* ===== Header, brand & nav (Tailwind-free) ===== */
.topbar{ position:sticky; top:0; z-index:60; }
.topbar--overlay{ color:#fff; background:transparent; }        /* home */
.topbar--solid{ color:#0f172a; background:rgba(255,255,255,.92);
  border-bottom:1px solid #e5e7eb; backdrop-filter:blur(8px); } /* inner */

.topbar__inner{ max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; white-space:nowrap; }
.brand__logo{ width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; }
.brand__name{ font-weight:800; font-size:20px; letter-spacing:-.01em; }

.nav a{ color:inherit; text-decoration:none; font-weight:600; margin:0 .75rem; }
.nav a[aria-current="page"]{ color:#1d4ed8; }

/* spacer so content doesn’t tuck under sticky header */
.page-top-spacer{ height:10px; }

/* ==== Trame bleue + carte service ==== */
.page-bg {
  /* dégradé brand (proche du hero) */
  background: linear-gradient(180deg, #0b1c3a 0%, #1e3a8a 45%, #0b1c3a 100%);
  padding: clamp(18px, 3vw, 36px) 0;
}

.svc-card {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(2, 6, 23, .25);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.svc-card__inner {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: clamp(18px, 3vw, 36px);
  padding: clamp(20px, 3.2vw, 40px);
}
@media (max-width: 900px){
  .svc-card__inner { grid-template-columns: 1fr; }
}

.svc-breadcrumb { color:#94a3b8; font-size:.95rem; margin-bottom:10px; }
.svc-breadcrumb a { color:#bfdbfe; text-decoration: underline; }

.svc-title { margin:0 0 8px; font-size: clamp(10px, 4.2vw, 18px); line-height:1.12; }
.svc-intro { margin: 6px 0 14px; color:#334155; max-width: 70ch; }

.svc-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 16px; }
.svc-tags .tag { background:#eef2ff; border:1px solid #dbeafe; color:#1d4ed8; padding:6px 10px; border-radius:999px; font-size:.85rem; }

.svc-media {
  border-radius: 16px; overflow: hidden; border:1px solid #e5e7eb;
  background: #0b1c3a;
}
.svc-media img { display:block; width:100%; height:auto; max-height:460px; object-fit:cover; }

/* Tech icons sizing */
.services-icons li a svg { width: 32px; height: 32px; display:block; }
.services-icons li a { display:flex; align-items:center; gap:10px; }

/* --- Stabilise les tailles de titres de vignettes (Chrome/Opera) --- */
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.svc-title{
  /* Taille stable, très peu responsive */
  font-size: 10px;
  line-height: 1.15;
  font-weight: 750;             /* évite le “bold synthétique” trop gras */
  letter-spacing: -0.015em;
  font-synthesis-weight: none;  /* Blink: empêche l’épaississement artificiel */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Option: verrou total au-dessus de 1280px */
@media (min-width: 1280px){
  .svc-title { font-size: 10px; }
}

/* S'assure que le conteneur ne “zoome” pas le texte */
.service-card .p-6 { font-size: 1rem; }

/* === KOKO – Consolidation finale (hero + services + titres stables) === */
:root{ --brand-navy:#061a3a; --accent-blue:#7ec7ff }

/* Empêche l’auto-grossissement de Blink */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }

/* ---------- HERO full-bleed premium ---------- */
.hero{
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  height:clamp(60vh,56.25vw,88vh);
  border-radius:28px; overflow:hidden; background:var(--brand-navy);
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 38%; background:#000;
}
.hero__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:multiply;
  background:
    radial-gradient(1100px 550px at 12% -6%, rgba(46,118,255,.30) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.32) 0%, rgba(12,23,55,.56) 100%);
}
.hero__content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end; gap:clamp(12px,1.6vw,22px);
  padding:clamp(18px,4vw,56px); color:#fff; text-shadow:0 10px 36px rgba(0,0,0,.35);
}
.hero-title{ margin:0; line-height:1.06; letter-spacing:-.02em; font-weight:800; max-width:18ch;
  font-size:clamp(28px,5.6vw,72px) }
.hero-sub{ margin:0; max-width:60ch; opacity:.96; font-size:clamp(14px,1.6vw,22px) }
.hero-accent{ color:var(--accent-blue) }

/* Resserre l’espace juste sous le hero */
.hero + section{ margin-top:clamp(12px,2vw,18px) }

/* ---------- Cartes Services : overlay bleu sur la vignette ---------- */
.service-card{ position:relative; overflow:hidden; border-radius:18px }
.service-card .thumb{ position:relative; height:200px; overflow:hidden; border-top-left-radius:18px; border-top-right-radius:18px }
.service-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.service-card .thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:
    radial-gradient(900px 450px at 12% -6%, rgba(46,118,255,.28) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,45,255,.22) 0%, rgba(12,23,55,.38) 100%);
}

/* ---------- Titres des vignettes stables (tous navigateurs) ---------- */
.svc-title{
  margin:0; padding:10px 14px;
  background:linear-gradient(90deg, rgba(37,99,235,.12), rgba(14,165,233,.08));
  border-top:1px solid rgba(2,6,23,.08);
  /* Taille fixe “luxe” (pas de yo-yo Blink) */
  font-size:clamp(10px,1.6vw,18px); line-height:1.15; font-weight:750; letter-spacing:-.015em;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.svc-desc{ margin:10px 14px 14px; font-size:14px; color:#475569 }

/* Mobile : overlay un poil plus présent + titre lisible */
@media (max-width:768px){
  .hero__content{ padding:24px 16px }
  .hero-title{ font-size:clamp(22px,6.2vw,32px) }
  .hero-sub{ font-size:clamp(14px,4.2vw,18px) }
  .service-card .thumb::after{
    background:
      radial-gradient(800px 400px at 12% -6%, rgba(46,118,255,.34) 0%, transparent 60%),
      linear-gradient(180deg, rgba(16,45,255,.26) 0%, rgba(12,23,55,.44) 100%);
  }
}