/* Carte de guide (partiel guide-card) : hub Guides, « À lire aussi » de l'article, accueil.
   Couverture : l'objet néon de la catégorie (App\View\NeonArt) posé sur du velours, affiné : trait fin, halo bas et
   retenu, sans rubans ni poussière blanche ; au survol l'objet s'éclaire et avance d'un cran (transform, opacity).
   Surface, élévation, survol, appui et lumière de pointeur : system.css. Une seule carte allumée par liste (.card--lit).
   Couleurs : jetons uniquement (transparences via color-mix). */

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--ds-space-5); }

.guide-card {
  --gc-pad: 26px;
  --gc-ink: var(--dc-violet-texte);
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 var(--gc-pad) 22px; overflow: hidden;
  border-radius: var(--ds-r-lg); border: var(--ds-border);
  background: var(--ds-surface-raised); box-shadow: var(--ds-elev-1);
  color: var(--dc-lumiere); text-decoration: none;
}
.guide-card:hover { color: var(--dc-lumiere); }
.guide-card.card--lit { border: 1px solid color-mix(in srgb, var(--dc-violet) 70%, var(--dc-ligne-forte)); box-shadow: var(--ds-elev-2), var(--dc-halo-carte); }
.guide-card:focus-visible { border-radius: var(--ds-r-lg); box-shadow: var(--ds-focus), var(--ds-elev-1); }
.guide-card.card--lit:focus-visible { box-shadow: var(--ds-focus), var(--dc-halo-carte); }

/* ---------- Couverture ---------- */
.guide-card__cover {
  position: relative; display: block; height: 150px; margin: 0 calc(-1 * var(--gc-pad)) 10px; overflow: hidden;
  background:
    radial-gradient(56% 80% at 66% 100%, var(--gc-glow, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--dc-velours) 40%, var(--dc-nuit)), var(--dc-nuit));
  box-shadow: inset 0 -1px 0 var(--dc-ligne);
}
/* Reflet de vitre très léger en haut de la couverture */
.guide-card__cover::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dc-lumiere) 10%, transparent) 50%, transparent);
}
.guide-card.tint-v { --gc-glow: color-mix(in srgb, var(--dc-violet) 16%, transparent); }
.guide-card.tint-g { --gc-glow: color-mix(in srgb, var(--dc-vert) 9%, transparent); }
.guide-card.tint-w { --gc-glow: color-mix(in srgb, var(--dc-lumiere) 5%, transparent); }

/* Illustration affinée : seul l'objet reste, avec un halo bas ; il s'éclaire au survol */
.guide-card__cover .na { transform-origin: 66% 82%; transition: transform var(--ds-dur-slow) var(--ds-ease-out); }
.guide-card__cover .na-r, .guide-card__cover .na-dots .na-d { display: none; }
.guide-card__cover .na-dots .na-dp { opacity: .55; }
.guide-card__cover .na-glow { opacity: .1; transition: opacity var(--ds-dur-slow) var(--ds-ease-out); }
.guide-card__cover .na-core * { stroke-width: 1.5px; }
.guide-card__cover .na-core .na-s { opacity: .6; }
.guide-card__cover .na-refl { opacity: .06; }
@media (hover: hover) {
  .guide-card:hover .guide-card__cover .na-glow { opacity: .24; }
  .guide-card:hover .guide-card__cover .na { transform: scale(1.04); }
}

/* ---------- Texte ---------- */
.guide-card__cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--dc-font-cond); font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gc-ink);
}
.guide-card__cat::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gc-ink); opacity: .9; }
.guide-card__title { margin: 0; font-family: var(--dc-font-sans); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; color: var(--dc-lumiere); text-wrap: pretty; }
.guide-card__excerpt { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dc-texte-2); text-wrap: pretty; }
/* « Lire le guide » : le soulignement se dessine et la flèche avance au survol de la carte */
.guide-card__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; align-self: flex-start;
  color: var(--dc-vert); font-weight: 600; font-size: 15px;
  background: linear-gradient(var(--dc-vert-clair), var(--dc-vert-clair)) 0 calc(100% - 10px) / 0 1.5px no-repeat;
  transition: color var(--ds-dur-fast) var(--ds-ease-out), background-size var(--ds-dur-base) var(--ds-ease-out);
}
.guide-card__go .icon { width: 16px; height: 16px; transition: transform var(--ds-dur-base) var(--ds-ease-out); }
@media (hover: hover) {
  .guide-card:hover .guide-card__go { color: var(--dc-vert-clair); background-size: calc(100% - 24px) 1.5px; }
  .guide-card:hover .guide-card__go .icon { transform: translateX(4px); }
}

/* Catégories : sécurité en couleur de vigilance (maquette Guides), jeu responsable sans néon sur fond Champ */
.guide-card.cat-security { --gc-ink: var(--dc-alerte); }
.guide-card.cat-responsible { --gc-ink: var(--dc-texte-2); background: linear-gradient(180deg, color-mix(in srgb, var(--dc-lumiere) 3%, var(--dc-champ)), var(--dc-champ)); }
.guide-card.cat-responsible .guide-card__go { color: var(--dc-lumiere); background-image: linear-gradient(var(--dc-lumiere), var(--dc-lumiere)); }
@media (hover: hover) { .guide-card.cat-responsible:hover .guide-card__go { color: var(--dc-lumiere); } }

/* Variante compacte (accueil, « À lire aussi ») : couverture plus basse, pas de « Lire le guide » */
.guide-card--compact { gap: 8px; padding-bottom: 22px; border-radius: 22px; }
.guide-card--compact .guide-card__cover { height: 116px; }
.guide-card--compact .guide-card__title { font-size: 18px; line-height: 1.32; }
.guide-card--compact .guide-card__excerpt { font-size: 14px; line-height: 1.55; }
.guide-card--compact .guide-card__go { display: none; }

@media (max-width: 767px) {
  .guide-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .guide-card { --gc-pad: 18px; gap: 6px; padding-bottom: 18px; border-radius: var(--dc-r-card-m); }
  .guide-card:focus-visible { border-radius: var(--dc-r-card-m); }
  .guide-card__cover, .guide-card--compact .guide-card__cover { height: 100px; margin-bottom: 8px; }
  .guide-card__cat { font-size: 12px; }
  .guide-card__title, .guide-card--compact .guide-card__title { font-size: 17px; line-height: 1.3; }
  .guide-card__excerpt { font-size: 14px; line-height: 1.5; }
  .guide-card__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-card__cover .na, .guide-card__go, .guide-card__go .icon { transition: none; }
  .guide-card:hover .guide-card__cover .na, .guide-card:hover .guide-card__go .icon { transform: none; }
}