/* ==========================================================================
   culture.css — Page carrefour de la culture générale (24/10/2026)
   /fr/culture-generale et /en/general-knowledge.

   Chargée APRÈS css/dicos.css, qui fournit la colonne, le chapeau, les
   dépliants (.ressources-details) et la sortie vers les préparations
   (.ressources-suite) : on retrouve la page Ressources linguistiques.

   Ici, les TROIS GRANDES VIGNETTES : une par ressource, chacune un vrai
   lien vers la ressource entière (décision de l'auteur, 24/10/2026). Le
   vocabulaire est celui des tuiles du site : dégradé, texte blanc en Plus
   Jakarta Sans, filigrane rogné par le bord qui bouge au survol. Couleurs
   tirées de tokens.css et des outils eux-mêmes (le vert du niveau
   « Essentiel » pour la révision).
   ========================================================================== */

.cg-vignettes {
  display: grid;
  /* Quatre vignettes depuis le 24/10/2026 (« Le monde, preuves à l'appui ») : deux par
     ligne, plutôt que quatre colonnes trop étroites pour la phrase. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-7);
}

/* Couleurs. */
.cg-frise   { --tuile-1: var(--lang-es-1); --tuile-2: var(--lang-es-2); }
.cg-reviser { --tuile-1: #3fb26a;          --tuile-2: #23874a; }
.cg-encyclo { --tuile-1: var(--lang-en-1); --tuile-2: var(--lang-en-2); }
.cg-decouvertes  { --tuile-1: #3a8f78;          --tuile-2: #2a6b59; }   /* vert « vérifié » de la rubrique */

.cg-vignette {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 19rem;
  padding: var(--space-5) var(--space-5) var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--tuile-1), var(--tuile-2));
  box-shadow: 0 8px 20px -10px var(--tuile-2);
  color: var(--on-dark);
  text-decoration: none;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

/* Reflet doux en haut à gauche, comme les tuiles de langue. */
.cg-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 120% at 0% 0%, var(--on-dark-35), transparent 45%);
  opacity: .5;
  pointer-events: none;
}

a.cg-vignette:hover,
a.cg-vignette:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -12px var(--tuile-2);
}
a.cg-vignette:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), 0 18px 32px -12px var(--tuile-2);
}

/* Filigrane : grand, en bas à droite, rogné par le bord. */
.cg-filigrane {
  position: absolute;
  z-index: -1;
  right: -.04em;
  bottom: -.22em;
  font-family: 'Plus Jakarta Sans', 'Inter', 'Inter-fallback', system-ui, sans-serif;
  font-weight: var(--weight-black);
  font-size: 5.5rem;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--on-dark-22);
  pointer-events: none;
  transition: transform var(--duration-slow) var(--ease),
              color var(--duration-slow) var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  a.cg-vignette:hover .cg-filigrane,
  a.cg-vignette:focus-visible .cg-filigrane {
    color: var(--on-dark-35);
    transform: translate(-.08em, -.06em) rotate(-6deg);
  }
}

.cg-compte {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--on-dark-88);
  font-variant-numeric: tabular-nums;
}

/* Sélecteurs à deux classes : passent devant .contenu-principal h2 / p
   de dicos.css (couleur, justification, césure, marges). */
.contenu-principal .cg-titre {
  margin: 0 0 var(--space-3);
  font-family: 'Plus Jakarta Sans', 'Inter', 'Inter-fallback', system-ui, sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--on-dark);
}

.contenu-principal .cg-phrase {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--on-dark);
  text-align: left;
  -webkit-hyphens: manual;
          hyphens: manual;
}

/* Ombre portée du texte blanc, comme sur les tuiles de langue. */
.cg-vignette:not(.cg-a-venir) .cg-compte,
.cg-vignette:not(.cg-a-venir) .cg-titre,
.cg-vignette:not(.cg-a-venir) .cg-phrase,
.cg-vignette:not(.cg-a-venir) .cg-action {
  text-shadow: 0 1px 2px var(--ink-a28);
}

/* L'action, en pied : dit où mène la vignette. */
.cg-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  align-self: flex-start;
  padding: .55rem .95rem;
  border-radius: var(--radius-pill);
  background: var(--on-dark-22);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--on-dark);
  transition: background var(--duration) var(--ease);
}
a.cg-vignette:hover .cg-action,
a.cg-vignette:focus-visible .cg-action {
  background: var(--on-dark-35);
}
@media (prefers-reduced-motion: no-preference) {
  .cg-action svg { transition: transform var(--duration) var(--ease); }
  a.cg-vignette:hover .cg-action svg,
  a.cg-vignette:focus-visible .cg-action svg { transform: translateX(3px); }
}

/* Vignette « bientôt » (ressource fermée) : pointillés, sans couleur. */
.cg-vignette.cg-a-venir {
  background: transparent;
  border: 1px dashed var(--border-card);
  box-shadow: none;
  color: var(--text-soft);
}
.cg-vignette.cg-a-venir::after { content: none; }
.cg-a-venir .cg-filigrane { color: var(--ink-a10); }
.cg-a-venir .cg-compte,
.contenu-principal .cg-a-venir .cg-titre,
.contenu-principal .cg-a-venir .cg-phrase { color: var(--text-soft); }
.cg-a-venir .cg-action { background: transparent; padding-left: 0; color: var(--text-muted); }

/* Dépliants sous les vignettes : collés les uns aux autres, un seul filet
   entre deux (dicos.css en pose un en haut et un en bas de chacun). */
.cg-plus .ressources-details + .ressources-details {
  border-top: 0;
}
.cg-plus {
  margin-bottom: var(--space-2);
}

/* ───── TABLETTE ET MOBILE ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .cg-vignettes {
    grid-template-columns: minmax(0, 1fr);
  }
  .cg-vignette {
    min-height: 0;
  }
  .contenu-principal .cg-phrase {
    max-width: 34rem;
  }
}

@media (max-width: 600px) {
  .cg-vignettes {
    gap: var(--space-3);
    margin-top: var(--space-4);
  }
  .cg-vignette {
    padding: var(--space-4);
  }
  .cg-filigrane {
    font-size: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-vignette,
  .cg-filigrane,
  .cg-action {
    transition: none;
  }
  a.cg-vignette:hover,
  a.cg-vignette:focus-visible {
    transform: none;
  }
}