/* ASITECH SOLUTION — styles custom (hors utilitaires Tailwind, chargé en CDN depuis base.html).
   Polices self-host, animations, scrollbar, curseur. CSS plat, pas de build step. */

/* --------------------------- Polices (self-host) --------------------------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/roboto-var.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../fonts/poppins-bold.woff2") format("woff2");
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #0048AA; color: #fff; }
/* Titres en Poppins — registre agence digitale, géométrique et professionnel. */
h1, h2, h3 { font-family: "Poppins", Arial, Helvetica, sans-serif; letter-spacing: -0.01em; }
/* Champ honeypot — masqué aux humains. */
input[name="website"] { position: absolute !important; left: -9999px !important; }
[x-cloak] { display: none !important; }

/* Scrollbar aux couleurs de la marque (Firefox + navigateurs WebKit/Chromium). */
html { scrollbar-width: thin; scrollbar-color: #0048AA #F5F7FA; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #F5F7FA; }
::-webkit-scrollbar-thumb { background-color: #0048AA; border-radius: 9999px; border: 2.5px solid #F5F7FA; }
::-webkit-scrollbar-thumb:hover { background-color: #003378; }

/* Portfolio en colonnes (vrais ratios via CSS columns). */
.masonry { column-gap: 1.25rem; }
.masonry > * { break-inside: avoid; margin-bottom: 1.25rem; }
@media (min-width: 640px)  { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }

/* Compteurs — chiffres tabulaires. */
.stat-value { font-variant-numeric: tabular-nums; }

/* Marquee logos partenaires / stack technique. */
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track.marquee-reverse { animation-direction: reverse; }

/* Spotlight qui suit le curseur — uniquement sur les cartes "Nos services". */
.svc-card { overflow: hidden; }
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(280px circle at var(--x, 50%) var(--y, 50%), rgba(0, 72, 170, 0.10), transparent 72%);
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-card:hover::before { opacity: 1; }
.svc-card > * { position: relative; z-index: 1; }

/* Curseur personnalisé (desktop, souris fine) — injecté par main.js. */
html.custom-cursor-active,
html.custom-cursor-active * { cursor: none !important; }

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  border-radius: 9999px;
  pointer-events: none;
}
.cursor-dot {
  width: 8px;
  height: 8px;
  background: #0048AA;
  transition: opacity .2s ease, background-color .25s ease;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(0, 72, 170, 0.4);
  transition: width .25s ease, height .25s ease, opacity .2s ease, border-color .25s ease, background-color .25s ease;
}
.cursor-ring.is-hover {
  width: 54px;
  height: 54px;
  border-color: #0048AA;
  background: rgba(0, 72, 170, 0.08);
}
.cursor-ring.is-hover-warm {
  width: 60px;
  height: 60px;
  border-color: #2E6FD0;
  background: rgba(46, 111, 208, 0.12);
}
.cursor-dot.is-hover-warm { background: #2E6FD0; }
.cursor-dot.is-hidden, .cursor-ring.is-hidden { opacity: 0; }

/* Scroll-reveal : fondu + léger slide, déclenché via IntersectionObserver (main.js). */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* Variante « groupe » : chaque enfant direct (carte, colonne) apparaît en cascade. */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
[data-reveal-stagger].is-revealed > * { opacity: 1; transform: translateY(0); }
[data-reveal-stagger] > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger] > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-stagger] > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-stagger] > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-stagger] > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-stagger] > *:nth-child(6) { transition-delay: 450ms; }
[data-reveal-stagger] > *:nth-child(7) { transition-delay: 540ms; }
[data-reveal-stagger] > *:nth-child(n+8) { transition-delay: 630ms; }

/* Entrée du hero au chargement (au-dessus de la ligne de flottaison : pas d'IntersectionObserver). */
[data-hero-in] {
  opacity: 0;
  transform: translateY(18px);
  animation: heroIn .75s cubic-bezier(.16,1,.3,1) forwards;
}
[data-hero-in="1"] { animation-delay: .05s; }
[data-hero-in="2"] { animation-delay: .15s; }
[data-hero-in="3"] { animation-delay: .25s; }
[data-hero-in="4"] { animation-delay: .35s; }
[data-hero-in="5"] { animation-delay: .45s; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-stagger] > *, [data-hero-in] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Le curseur personnalisé ne concerne que les pointeurs fins (souris) — sur
   tactile, JS ne l'active jamais, mais on verrouille aussi côté CSS. */
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}