/* ==========================================================================
   G2RD — Magic Bento (section Expertises)
   Tokens : custom properties --g2rd-* issues de g2rd.json (aucune duplication).
   Effets curseur pilotés par --g2rd-mx / --g2rd-my / --g2rd-near (magic-bento.js).
   ========================================================================== */

.g2rd-bento { position: relative; }

/* Continuité avec la section précédente : ligne descendante centrale */
.g2rd-bento__link-line {
  position: absolute;
  top: calc(-1 * clamp(2rem, 4vw, 3rem));
  left: 50%;
  width: 1px;
  height: clamp(4rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, transparent, rgba(163, 230, 53, 0.55), transparent);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Grille asymétrique — 6 colonnes, tailles au service de la hiérarchie
   -------------------------------------------------------------------------- */
.g2rd-bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: 1.1rem;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
.g2rd-bento-card--large { grid-column: 1 / 4; grid-row: 1 / 3; }
.g2rd-bento-card--m1    { grid-column: 4 / 7; grid-row: 1; }
.g2rd-bento-card--m2    { grid-column: 4 / 7; grid-row: 2; }
.g2rd-bento-card--s1    { grid-column: 1 / 4; grid-row: 3; }
.g2rd-bento-card--s2    { grid-column: 4 / 7; grid-row: 3; }
.g2rd-bento-card--wide  { grid-column: 1 / 7; grid-row: 4; }

/* --------------------------------------------------------------------------
   Carte
   -------------------------------------------------------------------------- */
.g2rd-bento-card {
  --g2rd-mx: 50%;
  --g2rd-my: 50%;
  --g2rd-near: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border-radius: var(--g2rd-radius-l, 16px);
  border: 1px solid var(--g2rd-border-dark, rgba(148, 163, 184, 0.16));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--g2rd-primary, #0f172a) 82%, transparent), color-mix(in srgb, var(--g2rd-ink, #020617) 88%, transparent)),
    var(--g2rd-ink, #020617);
  transition: border-color var(--g2rd-anim-fast, 0.2s) var(--g2rd-anim-easing);
  will-change: transform;
}

/* Liseré réactif : la bordure s'illumine près du curseur, décroît en s'éloignant */
.g2rd-bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    260px circle at var(--g2rd-mx) var(--g2rd-my),
    rgba(163, 230, 53, calc(0.08 + var(--g2rd-near) * 0.5)),
    rgba(148, 163, 184, 0.08) 46%,
    transparent 72%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* Halo intérieur suivant le curseur — vert G2RD, faible intensité */
.g2rd-bento-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    320px circle at var(--g2rd-mx) var(--g2rd-my),
    rgba(163, 230, 53, 0.09),
    transparent 62%
  );
  opacity: var(--g2rd-near);
  transition: opacity 0.35s var(--g2rd-anim-easing);
  pointer-events: none;
  z-index: 0;
}

/* Clavier : le liseré et le halo répondent aussi au focus (aucun effet perdu) */
.g2rd-bento-card:focus-within {
  --g2rd-near: 0.85;
  border-color: rgba(163, 230, 53, 0.35);
}

/* ----- Corps ----- */
.g2rd-bento-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: auto;
}
.g2rd-bento-card__tag {
  font-family: var(--g2rd-font-mono);
  font-size: var(--g2rd-type-meta, 0.78rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g2rd-text-dim, #aab7c9);
}
.g2rd-bento-card__title {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.g2rd-bento-card--large .g2rd-bento-card__title { font-size: clamp(1.55rem, 2.4vw, 2rem); }
.g2rd-bento-card__title a {
  color: var(--g2rd-text-light, #f8fafc);
  text-decoration: none;
}
.g2rd-bento-card__title a::after { /* toute la carte reste cliquable via le titre */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.g2rd-bento-card__title a:hover { color: var(--g2rd-accent, #a3e635); }
.g2rd-bento-card__desc {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--g2rd-text-dim, #aab7c9);
  max-width: 46ch;
}
.g2rd-bento-card__more {
  position: relative;
  z-index: 2; /* au-dessus du lien de carte étendu */
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  min-height: 24px;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--g2rd-accent, #a3e635);
  text-decoration: none;
}
.g2rd-bento-card__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.g2rd-magnet { display: inline-block; }

/* --------------------------------------------------------------------------
   Visuels — CSS/SVG légers, décoratifs (aria-hidden)
   -------------------------------------------------------------------------- */
.g2rd-bvis {
  position: relative;
  z-index: 1;
  transition: opacity 0.3s var(--g2rd-anim-easing), transform 0.3s var(--g2rd-anim-easing);
  opacity: 0.88;
}
.g2rd-bento-card:hover .g2rd-bvis,
.g2rd-bento-card:focus-within .g2rd-bvis { opacity: 1; transform: translateY(-2px); }

/* WordPress — structure de blocs stylisée */
.g2rd-bvis--wp {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid var(--g2rd-border-dark, rgba(148, 163, 184, 0.16));
  border-radius: var(--g2rd-radius-m, 12px);
  background: rgba(2, 6, 23, 0.5);
}
.g2rd-bvis__row {
  display: block;
  width: var(--w, 70%);
  height: 14px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.16);
}
.g2rd-bvis__row.is-on {
  position: relative;
  height: 30px;
  border: 1px dashed rgba(163, 230, 53, 0.6);
  background: rgba(163, 230, 53, 0.07);
}
.g2rd-bvis__row.is-on i {
  position: absolute;
  top: 50%;
  left: 10px;
  translate: 0 -50%;
  font-family: var(--g2rd-font-mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--g2rd-accent, #a3e635);
}

/* WooCommerce — flux panier → paiement → validé */
.g2rd-bvis--woo svg { width: 100%; height: auto; }
.g2rd-bvis__chip { fill: rgba(2, 6, 23, 0.55); stroke: rgba(148, 163, 184, 0.35); }
.g2rd-bvis__chip.is-ok { stroke: rgba(163, 230, 53, 0.65); fill: rgba(163, 230, 53, 0.08); }
.g2rd-bvis__txt {
  fill: #cbd5e1;
  font-family: var(--g2rd-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.g2rd-bvis__txt.is-ok { fill: #a3e635; }

/* SEO — courbe + Core Web Vitals */
.g2rd-bvis--seo svg { width: 100%; height: 56px; display: block; }
.g2rd-bvis__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.g2rd-bvis__chips i {
  font-family: var(--g2rd-font-mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--g2rd-text-dim, #aab7c9);
  border: 1px solid var(--g2rd-border-dark, rgba(148, 163, 184, 0.16));
  border-radius: var(--g2rd-radius-full, 999px);
  padding: 0.28rem 0.6rem;
}

/* Maintenance — monitoring */
.g2rd-bvis--care { display: flex; flex-direction: column; gap: 0.45rem; }
.g2rd-bvis__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  font-family: var(--g2rd-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--g2rd-text-dim, #aab7c9);
  border: 1px solid var(--g2rd-border-dark, rgba(148, 163, 184, 0.16));
  border-radius: var(--g2rd-radius-full, 999px);
  padding: 0.3rem 0.7rem;
  background: rgba(2, 6, 23, 0.45);
}

/* Automatisation — nœuds reliés */
.g2rd-bvis--auto svg { width: min(100%, 240px); height: auto; }
.g2rd-bvis__node { fill: rgba(2, 6, 23, 0.7); stroke: rgba(148, 163, 184, 0.4); }
.g2rd-bvis__node.is-on { stroke: var(--g2rd-accent, #a3e635); fill: rgba(163, 230, 53, 0.12); }

/* WP Manager — bande interface (carte large) */
.g2rd-bento-card--wide { flex-direction: row; align-items: center; gap: clamp(1.2rem, 3vw, 2.5rem); }
.g2rd-bento-card--wide .g2rd-bento-card__body { margin-top: 0; flex: 1 1 46%; }
.g2rd-bvis--wpm {
  flex: 1 1 54%;
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--g2rd-border-dark, rgba(148, 163, 184, 0.16));
  border-radius: var(--g2rd-radius-m, 12px);
  background: rgba(2, 6, 23, 0.5);
}
.g2rd-bvis__side { display: flex; flex-direction: column; gap: 0.4rem; }
.g2rd-bvis__side i {
  width: 26px;
  height: 10px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.18);
}
.g2rd-bvis__side i:first-child { background: rgba(163, 230, 53, 0.45); }
.g2rd-bvis__panel { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; }
.g2rd-bvis__panel svg { width: 100%; height: 26px; margin-top: 0.2rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .g2rd-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .g2rd-bento-card--large { grid-column: 1 / 3; grid-row: auto; }
  .g2rd-bento-card--m1,
  .g2rd-bento-card--m2,
  .g2rd-bento-card--s1,
  .g2rd-bento-card--s2 { grid-column: auto; grid-row: auto; }
  .g2rd-bento-card--wide { grid-column: 1 / 3; grid-row: auto; }
}
@media (max-width: 700px) {
  .g2rd-bento-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .g2rd-bento-card--large,
  .g2rd-bento-card--wide { grid-column: 1; }
  .g2rd-bento-card--wide { flex-direction: column; align-items: stretch; }
  .g2rd-bvis--wpm { order: -1; }
}

/* --------------------------------------------------------------------------
   Sans effet : tactile, prefers-reduced-motion, bouton « Désactiver »
   Le contenu reste complet, la bordure devient statique.
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .g2rd-bento-card::before {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0.06));
  }
  .g2rd-bento-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g2rd-bento-glow { transition: none; }
  .g2rd-bvis,
  .g2rd-bento-card:hover .g2rd-bvis { transition: none; transform: none; }
}
html.g2rd-anim-off .g2rd-bento-glow { opacity: 0 !important; }
html.g2rd-anim-off .g2rd-bento-card,
html.g2rd-anim-off .g2rd-magnet { transform: none !important; }

/* --------------------------------------------------------------------------
   Pont Gutenberg : le lien « en savoir plus » est un paragraphe
   (classe posée sur le bloc, l'ancre reste éditable dans l'éditeur).
   La flèche magnétique et le halo sont injectés par magic-bento.js.
   -------------------------------------------------------------------------- */
p.g2rd-bento-card__more { margin-top: 0.35rem; }
p.g2rd-bento-card__more a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 24px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--g2rd-accent, #a3e635);
  text-decoration: none;
}
p.g2rd-bento-card__more a:hover { text-decoration: underline; text-underline-offset: 4px; }