/* ==========================================================================
   COMPONENTS
   Éléments réutilisables entre la homepage et les pages projets.
   ========================================================================== */

/* CTA ("VOIR LE PROJET", "VOIR TOUS LES PROJETS"…) : libellé d'interface
   en Instrument Sans et pastille cuivre, écho au disque du logo. Un seul
   geste au survol : la pastille pivote, la flèche pointe vers le haut.
   La pastille est réservée aux CTA principaux pour que le cuivre reste un
   accent ponctuel : "Retour" et les liens du footer gardent une flèche simple. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-block: 0.25em;
  font-family: var(--police-texte);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.lien-fleche__fleche {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background-color: var(--couleur-accent-fort-2);
  color: var(--couleur-fond);
  font-weight: 400;
  line-height: 1;
  transition: rotate var(--duree-moyenne) var(--easing-doux);
}

.lien-fleche:hover .lien-fleche__fleche,
.lien-fleche:focus-visible .lien-fleche__fleche {
  rotate: -45deg;
}

/* Tirage au sort (js/cta.js) : la pastille fait parfois un tour complet
   avant de se poser à -45°. Même position finale, trajet plus long. */
.lien-fleche:hover .lien-fleche__fleche--tour,
.lien-fleche:focus-visible .lien-fleche__fleche--tour {
  rotate: -405deg;
  transition-duration: 900ms;
}

/* Remise de -405° à -45° sans animation une fois le tour fini, pour que la
   sortie du survol ne déroule pas le tour à l'envers. */
.lien-fleche__fleche--sans-transition {
  transition: none !important;
}

/* Liens secondaires : flèche simple qui glisse, sans pastille. */
.lien-fleche__fleche--retour,
.footer .lien-fleche__fleche {
  width: auto;
  height: auto;
  background-color: transparent;
  color: inherit;
  transition: translate var(--duree-moyenne) var(--easing-doux);
}

.lien-fleche:hover .lien-fleche__fleche--retour,
.lien-fleche:focus-visible .lien-fleche__fleche--retour {
  rotate: none;
  translate: -0.25em 0;
}

.footer .lien-fleche:hover .lien-fleche__fleche:not(.lien-fleche__fleche--retour),
.footer .lien-fleche:focus-visible .lien-fleche__fleche:not(.lien-fleche__fleche--retour) {
  rotate: none;
  translate: 0.25em 0;
}

/* Paragraphe qui porte un CTA sous un bloc (bandeau, liste…). */
.lien-suite {
  margin-block-start: var(--espace-s);
}

/* Métadonnées discrètes : catégorie, année, informations secondaires */
.meta {
  font-family: var(--police-texte);
  font-size: var(--taille-meta);
  color: var(--couleur-texte);
  opacity: 0.65;
}

/* Titre de section, cohérent sur toute la homepage */
.titre-section {
  font-size: var(--taille-titre-l);
}

/* Indicateur de scroll du Hero */
.indicateur-scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--taille-texte-petit);
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.indicateur-scroll__fleche {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .indicateur-scroll__fleche {
    animation: descendre 1.8s ease-in-out infinite;
  }
}

@keyframes descendre {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Footer commun à l'accueil et aux pages projets. Les pages disciplines
   le redéfinissent dans disciplines.css. */
.footer {
  background-color: var(--couleur-contact-fond);
  color: var(--couleur-contact-texte);
  padding-block: var(--espace-m);
  opacity: 0.8;
}

.footer__conteneur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  font-size: var(--taille-texte-petit);
}

/* « Mon univers » et « Mentions légales » restent côte à côte quand le
   footer passe sur plusieurs lignes. */
.footer__liens {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--espace-xs) var(--espace-m);
}

/* Sur PC, tout tient sur une ligne : chaque lien prend sa place dans la
   répartition du footer (crédit · Mon univers · Mentions légales · …). */
@media (min-width: 1024px) {
  .footer__liens { display: contents; }
}

/* Liens discrets (mentions légales, page Univers), présents dans tous les footers. */
.footer__legal {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.footer__legal:hover,
.footer__legal:focus-visible {
  text-decoration-thickness: 2px;
}

/* -------------------- ATTENTE VIDÉO -------------------- */
/* Animation « La vidéo arrive » : aujourd'hui la vidéo CV de l'accueil.
   Gardée dans le fichier commun pour toute future vidéo en attente. */

/* Bouton lecture entouré d'un anneau qui tourne,
   texte aux points clignotants et barre de chargement en boucle. Même cadre
   16/9 que la future vidéo, pour que la mise en page ne bouge pas. */
.video-attente {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--espace-s);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--couleur-surface-douce);
  border: 1px solid rgba(34, 24, 28, 0.15);
}

.video-attente__lecture {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
}

.video-attente__lecture::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid rgba(23, 190, 187, 0.25);
  border-top-color: var(--couleur-accent-fort-1);
  border-right-color: var(--couleur-accent-fort-2);
  border-radius: 50%;
  animation: video-attente-tour 1.4s linear infinite;
}

.video-attente__lecture::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 1.4rem;
  height: 1.6rem;
  translate: -50% -50%;
  background-color: var(--couleur-accent-fort-2);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: video-attente-pulse 1.4s ease-in-out infinite;
}

.video-attente__texte {
  font-family: var(--police-titre);
  font-size: var(--taille-titre-m);
  letter-spacing: 0.04em;
}

.video-attente__points span {
  animation: video-attente-point 1.4s ease-in-out infinite;
}
.video-attente__points span:nth-child(2) { animation-delay: 0.2s; }
.video-attente__points span:nth-child(3) { animation-delay: 0.4s; }

.video-attente__barre {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background-color: var(--couleur-accent-fort-1);
  transform-origin: left;
  animation: video-attente-barre 2.8s ease-in-out infinite;
}

@keyframes video-attente-tour { to { rotate: 1turn; } }

@keyframes video-attente-pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.12; }
}

@keyframes video-attente-point {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}

@keyframes video-attente-barre {
  0%   { transform: scaleX(0); opacity: 1; }
  80%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Mouvement réduit : composition fixe, barre à mi-course. */
@media (prefers-reduced-motion: reduce) {
  .video-attente__lecture::before,
  .video-attente__lecture::after,
  .video-attente__points span,
  .video-attente__barre {
    animation: none;
  }
  .video-attente__barre { transform: scaleX(0.5); }
}