/* ---------------------------------------------------------------------------
   Section « média + cartes » — accents colorés
   ---------------------------------------------------------------------------
   Chaque carte porte une variable `--gfr-accent` posée en style inline par le
   HubL (vert principal, or, ou vert foncé). Toutes les teintes en découlent par
   color-mix : bordure, fond, halo, barre.

   Pourquoi pas des classes Tailwind ? Parce que `css/tailwind.css` est généré
   et ne contient que les combinaisons employées par le site source. Ajouter une
   quatrième couleur d'accent obligerait à régénérer le CSS ; ici il suffit
   d'ajouter un choix dans fields.json.
--------------------------------------------------------------------------- */

.gfr-carte-media {
  --gfr-accent: var(--emerald);
  border-radius: 1rem;
  padding: 1.5rem;
}

.gfr-carte-media:hover {
  border-color: color-mix(in srgb, var(--gfr-accent) 25%, transparent);
  box-shadow: 0 10px 25px -12px color-mix(in srgb, var(--gfr-accent) 25%, transparent);
}

.gfr-carte-media--etape {
  border-radius: 1.5rem;
  padding: 1.75rem;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--gfr-accent) 10%, transparent),
    transparent
  );
}

/* Pastille d'icône : teinte claire au repos, la bordure suit l'accent. */
.gfr-carte-icone {
  border: 1px solid color-mix(in srgb, var(--gfr-accent) 30%, transparent);
  background: color-mix(in srgb, var(--gfr-accent) 8%, transparent);
  color: var(--gfr-accent);
}

/* Barre courte au-dessus des cartes numérotées ; elle s'allonge au survol. */
.gfr-carte-barre {
  background: var(--gfr-accent);
}

/* Halo diffus révélé au survol des cartes simples. */
.gfr-carte-halo {
  opacity: 0;
  background: color-mix(in srgb, var(--gfr-accent) 15%, transparent);
}

.group:hover .gfr-carte-halo {
  opacity: 1;
}

/* Chiffres flottants posés en débord du visuel. */
.gfr-stat-valeur {
  color: var(--gfr-accent);
}

/* En dessous de 1024 px, le visuel occupe toute la largeur de la colonne : les
   cartes en débord négatif viennent alors buter contre les bords de l'écran,
   surtout sur tablette. On les sort du positionnement absolu pour les poser
   sous l'image, en ligne. */
@media (max-width: 1023px) {
  .gfr-stat-flottante {
    position: static;
    display: inline-block;
    margin: 0.75rem 0.75rem 0 0;
  }
}

/* Repli pour les navigateurs sans color-mix : teintes pleines, sans
   transparence calculée. Le rendu reste correct, simplement moins nuancé. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .gfr-carte-icone {
    border-color: var(--gfr-accent);
    background: var(--surface-2);
  }

  .gfr-carte-media--etape {
    background-image: none;
  }

  .gfr-carte-halo {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gfr-carte-media,
  .gfr-carte-barre,
  .gfr-carte-halo {
    transition: none;
  }
}