/*
  Accueil : ligne de disponibilité du hero, aperçu des projets (jaquette + rôle)
  et boutons « Découvrir ».

  Aucun style existant n'est modifié : ce fichier ne fait que PLACER des
  composants déjà stylés ailleurs (.project-card, .project-card__meta,
  .project-card__title, .project-card__team, .project-card__role-heading,
  .project-card__role-text, .project-card__link, .hero__cta). Couleurs, rayons,
  ombres et durées viennent uniquement de tokens.css : le thème sombre
  fonctionne donc sans règle supplémentaire.
*/

/* ---------- Aperçu d'un projet : jaquette à gauche, détails à droite ---------- */

.project-overview-list {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

.project-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5);
}

/* La jaquette garde le ratio 2:3 de la vitrine. Sur mobile elle est centrée
   au-dessus du texte, plafonnée pour ne pas occuper tout l'écran. */
.project-overview__cover {
  display: block;
  width: min(100%, 13rem);
  margin-inline: auto;
}

.project-overview__cover img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-soft);
  box-shadow: var(--shadow-soft);
}

.project-overview__body > :first-child {
  margin-top: 0;
}

.project-overview__title {
  margin-top: var(--space-2);
  font-size: var(--step-xl);
}

.project-overview__title a {
  color: inherit;
  transition: color var(--duration-fast) var(--ease-standard);
}

.project-overview__title a:hover,
.project-overview__title a:focus-visible {
  color: var(--color-accent-strong);
}

/* Le titre de la ligne « rôle » reprend .project-card__role-heading ; on
   laisse simplement la ligne d'équipe respirer sous le titre. */
.project-overview__body .project-card__team {
  margin-top: var(--space-2);
}

@media (min-width: 40rem) {
  .project-overview {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .project-overview__cover {
    width: 100%;
    margin-inline: 0;
  }
}

@media (min-width: 64rem) {
  .project-overview {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-7);
  }
}

/* Léger soulèvement de la jaquette au survol de la carte (souris seulement) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-overview__cover img {
    transition: transform var(--duration-base) var(--ease-standard),
      box-shadow var(--duration-base) var(--ease-standard);
  }

  .project-overview:hover .project-overview__cover img {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-raised);
  }
}

/* ---------- Boutons « Découvrir » (un ou plusieurs liens en rangée) ---------- */

.section-actions {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

/* ---------- Liste de tâches (rôle) : accueil et fiche Sînnaya ----------
   base.css retire les puces de tous les <ul> ; sur une liste de plusieurs
   tâches longues, elles aident à séparer les lignes. S'ajoute à
   .project-card__role-text (couleur, largeur) sans le modifier. */

.project-card__role-list {
  padding-inline-start: 1.25rem;
  list-style: disc;
}

.project-card__role-list li + li {
  margin-top: var(--space-2);
}

.project-card__role-list li::marker {
  color: var(--color-secondary);
}

/* ---------- Flèche des liens de carte (« Lire le document complet ») ----------
   Le SVG de ces liens n'avait pas de taille : sans règle, il se serait affiché
   en 300 x 150 px. Même taille que la flèche de .hero__cta. */

.project-card__link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ---------- Hero : ligne de disponibilité (recherche de stage) ----------
   Simple ligne de texte sous l'accroche, avant les boutons : c'est ce qu'un
   recruteur cherche en premier. Aucun cadre ni pastille, dans le ton du reste
   du site : même corps et même gris que les lignes d'équipe des projets, et
   les dates en ocre gras comme les dates de la frise du Parcours
   (--color-secondary-text, le jeton prévu pour du texte ocre). */

.hero__status {
  margin-top: var(--space-3);
  max-width: 34rem;
  font-size: var(--step-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

.hero__status strong {
  color: var(--color-secondary-text);
  font-weight: 700;
  /* Les dates restent groupées : à la ligne, elles passent ensemble. */
  white-space: nowrap;
}

/* ---------- Icône devant un titre de section ----------
   Même trait que les icônes de la navbar (sprite.svg), teinte du violet des
   liens (--color-accent-strong). Décoratif : aria-hidden dans le HTML. */

.section-heading-row {
  display: flex;
  /* Icône calée sur la 1re ligne du titre (centrée sur sa hauteur de ligne),
     même si le titre passe sur plusieurs lignes. */
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.section-heading-row .section-heading {
  margin-bottom: 0;
}

.section-heading-row__icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-top: calc((var(--step-2xl) * var(--leading-tight) - 2rem) / 2);
  color: var(--color-accent-strong);
}

/* Mobile : l'icône passe AU-DESSUS du titre. À côté, elle prend 2,75 rem de
   largeur et fait passer « Personnages pour le jeu de rôle » sur 3 lignes. */
@media (max-width: 40rem) {
  .section-heading-row {
    flex-direction: column;
    gap: var(--space-3);
  }

  .section-heading-row__icon {
    margin-top: 0;
  }
}

/* Chiffres clés : chiffre, titre court, une ligne de description.
   Partagé par la carte de l'accueil et la fiche Sînnaya. */
.key-figures {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}

.key-figures__value {
  display: block;
  font-size: var(--step-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.key-figures__title {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--step-base);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.key-figures__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--step-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

.key-figures + .project-card__role-heading {
  margin-top: var(--space-7);
}

@media (min-width: 64rem) {
  .key-figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}