/* ENDURIA — Magic Bento (port vanilla fidèle du composant React Bits éponyme).
   Section #results — 4 cards en grille asymétrique 3col × 2rows.
   Effets (spotlight, border-glow, particules, ripple) gérés par magic-bento.js.
   Seules adaptations vs original : contenu (4 blocs résultats), couleurs DA,
   layout 4 cards au lieu de 6. TOUT LE RESTE (padding 6px, mask-composite,
   --glow-intensity dynamique, particules staggerées 100ms) = fidèle. */

#bento-results {
  /* CSS vars pour le border-glow — updated par JS au mousemove.
     --glow-intensity varie 0→1 selon distance curseur (per-card).
     --mx/--my = position curseur relative à la card (%).
     Violet DA boosté : 139, 63, 245 (#8b3ff5) = plus saturé, plus vibrant. */
  --glow-color: 139, 63, 245;
  --glow-radius: 240px;
  --card-radius: 20px;
  --card-bg: var(--ink);
  --card-border: rgba(255, 255, 255, 0.08);

  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Grille 2 rows égales (auto-fill sur contenu) — chaque card fait pile 1 row,
     donc plus de "tall" verticale = plus de vides béants dans le contenu. */
  grid-auto-rows: 1fr;
  gap: 0.65rem;
  margin: clamp(2.5rem, 5vh, 4rem) auto 0;
  isolation: isolate;
  /* Grille resserrée + centrée dans la section (avant : prenait toute la largeur
     du container = trop étalée). Max 1080px = ~360px par colonne, assez d'espace
     pour que les gros chiffres (−18 h/sem., −32 h/mois) rentrent proprement dans
     les cards simples sans déborder, tout en restant beaucoup moins étalé que le
     container full-width. */
  max-width: min(1080px, 100%);
}

/* Spotlight global qui suit le curseur — positioned absolute au-dessus de la grille.
   JS update --sx/--sy (px depuis top-left grid). Opacity animée par .is-hovering.
   Opacités boostées (0.15→0.28) pour un halo plus présent. */
.bento__spotlight {
  position: absolute;
  pointer-events: none;
  width: 560px;
  height: 560px;
  top: 0;
  left: 0;
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(var(--glow-color), 0.28) 0%,
    rgba(var(--glow-color), 0.12) 30%,
    rgba(var(--glow-color), 0.04) 60%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 3;
  will-change: transform, opacity;
}
#bento-results.is-hovering .bento__spotlight { opacity: 1; }

/* Cards */
.bento__card {
  --mx: 50%;
  --my: 50%;
  --glow-intensity: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
  min-height: 200px;
  padding: clamp(1.4rem, 2.3vw, 2rem);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: inherit;
  overflow: hidden;
  transition: border-color 0.35s ease;
  /* Pas de cursor: pointer ni text-decoration : les cards sont des <article>
     purement informatifs, aucun click, aucune navigation. */
}
/* HARD-LOCK anti-mouvement (Théo — les cards doivent rester IMMOBILES).
   Aucun transform ne peut être appliqué à la card sous quelque état que ce soit :
   pas de hover, pas de focus, pas d'active. Le seul mouvement possible reste
   celui du reveal initial au scroll (via [data-reveal] géré par reveals.js). */
.bento__card,
.bento__card:hover,
.bento__card:active,
.bento__card:focus,
.bento__card:focus-visible {
  transform: none !important;
}

/* Layout asymétrique 4 cards, esprit bento — wide sur les diagonales.
   Chaque card fait exactement 1 row de haut → contenu bien réparti, pas de vides.
      [  A  ][  A  ][  B  ]     A = wide top-left (Artisanat)
      [  C  ][  D  ][  D  ]     B = simple top-right (Restauration)
                                C = simple bottom-left (Immobilier)
                                D = wide bottom-right (E-commerce) */
.bento__card--a { grid-column: 1 / span 2; grid-row: 1; }
.bento__card--b { grid-column: 3;          grid-row: 1; }
.bento__card--c { grid-column: 1;          grid-row: 2; }
.bento__card--d { grid-column: 2 / span 2; grid-row: 2; }

/* BORDER-GLOW — port fidèle React Bits, opacités boostées pour un rendu vibrant.
   padding: 6px + mask-composite: exclude = ring qui suit le border-radius arrondi
   parent. Multiplicateurs 0.8→1.15 et 0.4→0.55 pour un violet plus intense. */
.bento__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 6px;
  background: radial-gradient(
    var(--glow-radius) circle at var(--mx) var(--my),
    rgba(var(--glow-color), calc(var(--glow-intensity) * 1.15)) 0%,
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.55)) 30%,
    transparent 65%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Halo intérieur au hover — boosté (0.09 → 0.18) pour être plus perceptible. */
.bento__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--mx) var(--my),
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.18)),
    transparent 55%
  );
  pointer-events: none;
  z-index: 0;
}

/* Contenu au-dessus de tous les glows */
.bento__card > * {
  position: relative;
  z-index: 2;
}

/* Typography */
.bento__label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.bento__metric {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.bento__metric span[data-count] {
  background-image: linear-gradient(120deg, #d1acdf, #7c4fc9 50%, #c5d0ff);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(124, 79, 201, 0.35));
}
.bento__desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 42ch;
  /* Prend l'espace flex disponible entre label et metric — évite que la desc
     colle au label si la card est haute. Description centrée verticalement
     dans l'espace restant. */
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
}

/* Particules (injectées par JS au mouseenter). */
.bento__particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(var(--glow-color));
  box-shadow: 0 0 8px rgba(var(--glow-color), 0.7);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — cards blanches + GLOWS NEUTRES (gris foncé au lieu de violet).
   Cohérent avec le reste du site en light : palette noir/gris/blanc pour les
   accents décoratifs. Les chiffres metric gardent leur dégradé violet (accent
   volontaire du texte), seuls les glows/spotlight/particules deviennent neutres. */
[data-theme="light"] #bento-results {
  --card-bg: rgba(255, 255, 255, 0.6);
  --card-border: rgba(12, 13, 16, 0.10);
  /* Glow BLANC PUR en light : le noir/gris précédent créait un halo "ombre" qui
     suivait le curseur, disgracieux. Le blanc sur fond clair = effet lumineux
     clair qui met les cards en valeur (halo aérien) au lieu d'une ombre parasite. */
  --glow-color: 255, 255, 255;
}
[data-theme="light"] .bento__card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] .bento__metric span[data-count] {
  background-image: linear-gradient(120deg, #5c3ba1, #7c4fc9 50%, #9a7dd0);
  filter: drop-shadow(0 0 8px rgba(124, 79, 201, 0.18));
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE — layout 1 colonne, effets curseur off (JS skip aussi TOUCH). */
@media (max-width: 767px) {
  #bento-results {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0.85rem;
  }
  .bento__card--a,
  .bento__card--b,
  .bento__card--c,
  .bento__card--d {
    grid-column: 1;
    grid-row: auto;
  }
  .bento__card { min-height: 180px; padding: 1.3rem; }
  /* Pseudo-elements cachés sur mobile (spotlight + border-glow + halo). */
  .bento__spotlight,
  .bento__card::before,
  .bento__card::after { display: none; }
}

/* Reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .bento__card { transition: none !important; }
  .bento__spotlight,
  .bento__card::before,
  .bento__card::after { transition: none !important; }
}