/* =========================================================
   Cybalgo Services – premium hover (zoom + gradient glow)
   Brand: pink #ff4bcf · violet #9a4dff · blue #3273ff · ink #110417
   Fonts: Syne (titles), Inter (text)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Syne:wght@700;800&display=swap');

:root{ --reveal-dur:.7s; }

/* =============== Section / Brand tokens =============== */
.cyb-svcs{
  --ink:#110417; --muted:#3a3f52; --card:#ffffff; --line:#0f172a14;
  --brand-start:#ff4bcf; --brand-mid:#9a4dff; --brand-end:#3273ff;

  position:relative;
  padding: clamp(48px, 6vw, 96px) 0;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
  color:var(--ink);
  overflow:hidden;
}
.cyb-svcs.is-dark{
  --ink:#f5f6fa; --muted:#c9cbe1; --card:#0E0412; --line:#ffffff1a;
  background: radial-gradient(60% 60% at 50% 0%, #110417 0%, #0E0412 60%, #0A0612 100%);
}

/* Aurora plus visible (douce, sans hue-rotate agressif) */
.cyb-aurora{
  position:absolute; inset:-18% -8% -28%;
  pointer-events:none; opacity:.95; filter: blur(58px) saturate(120%);
  background:
    radial-gradient(closest-side at 18% 22%, rgba(50,115,255,.35), transparent 62%),
    radial-gradient(closest-side at 80% 18%, rgba(154,77,255,.38), transparent 66%),
    radial-gradient(closest-side at 52% 86%, rgba(255,75,207,.30), transparent 62%);
  transform: translateZ(0);
}

/* =============== Headings & Grid =============== */
.cyb-svcs__inner{ width:min(1120px,92vw); margin:0 auto; position:relative; z-index:2; }
.cyb-svcs__head{ text-align:center; margin-bottom: clamp(28px, 4vw, 52px); }
.cyb-svcs__title{
  font-family:"Syne",system-ui,sans-serif; font-weight:800; letter-spacing:-0.02em;
  color:var(--ink); font-size:clamp(28px,5.2vw,56px); line-height:1.06; margin:0 0 10px;
}
.cyb-svcs__subtitle{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif; color:var(--muted);
  font-size:clamp(15px,1.6vw,18px); max-width:64ch; margin:0 auto;
}
.cyb-svcs__grid{ display:grid; gap:clamp(16px, 2.3vw, 24px); }
.cyb-svcs__grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cyb-svcs__grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cyb-svcs__grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px){ .cyb-svcs__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .cyb-svcs__grid{ grid-template-columns:1fr; } }

/* =============== Cards =============== */
/* base : AUCUNE bordure solide ; ring dégradé discret via mask */
.cyb-card{
  --ring-size:1px;
  position:relative; border-radius:22px;
  padding: clamp(22px, 3vw, 28px);
  background: linear-gradient(var(--card),var(--card)) padding-box;
  border:0 !important;               /* tue toute bordure noir/grise globale */
  overflow:hidden; isolation:isolate;
  box-shadow: 0 10px 28px rgba(12,11,22,.08);
  transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s cubic-bezier(.2,.6,.2,1);
}
.cyb-card > *{ position:relative; z-index:2; }

/* ring dégradé (léger au repos) */
.cyb-card::before{
  content:""; position:absolute; inset:0; padding:var(--ring-size); border-radius:inherit;
  background: linear-gradient(120deg, var(--brand-start), var(--brand-mid), var(--brand-end));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.30; pointer-events:none; z-index:1;  /* discret */
}

/* glow colorée — uniquement AU HOVER (dégradé sur les bords) */
.cyb-card::after{
  content:""; position:absolute; inset:-12px; border-radius:inherit;
  background:
    radial-gradient(120% 120% at 0% 0%,        rgba(255,75,207,.25), transparent 60%),
    radial-gradient(120% 120% at 100% 0%,      rgba(154,77,255,.22), transparent 60%),
    radial-gradient(120% 120% at 100% 100%,    rgba(50,115,255,.26), transparent 60%);
  filter: blur(22px);
  opacity:0; transition: opacity .35s ease;
  pointer-events:none; z-index:0;
}

/* Hover premium : petit zoom + ring renforcé + glow visible */
.cyb-card:hover{
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 50px rgba(12,11,22,.14);
}
.cyb-card:hover::before{ opacity:.85; }
.cyb-card:hover::after{ opacity:.60; }

/* =============== Icones (dégradé + rotation au hover) =============== */
.cyb-card__icon{
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center; margin-bottom:14px;
  background:#ffffff; border:1px solid var(--line);
}
.is-dark .cyb-card__icon{ background:#0f111a; border-color:#ffffff12; }

/* Le stroke des SVG est en dégradé via la fonction PHP (url(#grad)) */
.cyb-card .i{ transition: transform .35s cubic-bezier(.2,.6,.2,1); transform-origin:50% 50%; }
.cyb-card:hover .i{ transform: rotate(-8deg) scale(1.02); }

/* Ombres d’accent légères autour du conteneur de l’icône */
.cyb-card.accent-blue   .cyb-card__icon{ box-shadow:0 4px 14px rgba(50,115,255,.28); }
.cyb-card.accent-violet .cyb-card__icon{ box-shadow:0 4px 14px rgba(154,77,255,.28); }
.cyb-card.accent-cyan   .cyb-card__icon{ box-shadow:0 4px 14px rgba(255,75,207,.22); }
.cyb-card.accent-purple .cyb-card__icon{ box-shadow:0 4px 14px rgba(154,77,255,.24); }

/* =============== Textes & CTA =============== */
.cyb-card__title{
  font-family:"Syne",system-ui,sans-serif; font-weight:800; letter-spacing:-0.01em;
  color:var(--ink); margin:6px 0 8px; font-size:clamp(18px,1.9vw,24px);
}
.cyb-card__desc{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif; color:var(--muted);
  line-height:1.6; margin:0 0 14px; font-size:clamp(14px,1.5vw,16px);
}
.cyb-card__cta{
  display:inline-flex; gap:8px; align-items:center; font-weight:600; text-decoration:none; position:relative;
  color:#3273ff; padding:6px 2px;
}
.is-dark .cyb-card__cta{ color:#a7c8e6; }
.cyb-card__cta::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: currentColor; opacity:.3; transform:scaleX(.4); transform-origin:left;
  transition: transform .22s ease, opacity .22s ease;
}
.cyb-card__cta:hover::after{ transform:scaleX(1); opacity:.6; }

/* =============== Reveal au scroll =============== */
.cyb-reveal{
  opacity:0; transform:translate3d(0,16px,0) scale(.995);
  transition: opacity var(--reveal-dur) ease, transform var(--reveal-dur) ease;
  transition-delay: var(--delay, 0s); will-change: opacity, transform;
}
html.cyb-ob .cyb-reveal.is-in{ opacity:1; transform:none; }

/* =============== Overrides anti-bordure noire globale =============== */
section.cyb-svcs .cyb-card{
  border:0 !important;                        /* neutralise .cyb-card{border:1px solid ...} globaux */
  background: linear-gradient(var(--card),var(--card)) padding-box !important;
  border-radius:22px !important;
  box-shadow:0 10px 28px rgba(12,11,22,.08) !important;
}
section.cyb-svcs .cyb-svcs__grid{ display:grid !important; }
section.cyb-svcs.is-light .cyb-card{ color:var(--ink) !important; }
section.cyb-svcs.is-dark  .cyb-card{ color:#f5f6fa !important; }

/* =============== Accessibilité =============== */
@media (prefers-reduced-motion:reduce){
  .cyb-card, .cyb-card .i{ transition:none !important; }
  .cyb-reveal{ opacity:1; transform:none; }
}





/* ===== Mobile: toujours 1 colonne ===== */
@media (max-width: 820px){
  section.cyb-svcs .cyb-svcs__grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}
@media (max-width: 600px){
  section.cyb-svcs .cyb-svcs__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* un peu plus de douceur sur les cartes en petit écran */
  section.cyb-svcs .cyb-card{
    border-radius: 18px !important;
    padding: clamp(18px, 4vw, 22px) !important;
  }
}




/* ===== Titres: tracking & line-height plus confortables ===== */
section.cyb-svcs .cyb-card__title{
  font-family: "Syne", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;                 /* 800 → 700 pour éviter l’effet tassé */
  letter-spacing: -0.005em;         /* -0.01em → -0.005em */
  line-height: 1.18;                /* + de respiration */
}

section.cyb-svcs .cyb-svcs__title{
  font-weight: 700;                  /* 800 → 700 pour un rendu plus clean */
  letter-spacing: -0.01em;           /* -0.02em → -0.01em */
  line-height: 1.12;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Ajustements spécifiques petits écrans */
@media (max-width: 600px){
  section.cyb-svcs .cyb-card__title{
    font-size: clamp(17px, 4.2vw, 22px);
    line-height: 1.2;
    letter-spacing: -0.004em;
  }
  section.cyb-svcs .cyb-svcs__title{
    font-size: clamp(26px, 10vw, 40px);
    line-height: 1.14;
  }
}

/* Garder une épaisseur de trait stable lors des transforms */
section.cyb-svcs .i { vector-effect: non-scaling-stroke; }