/* anim.css — les bandeaux animés des pages de travaux.
   Se charge après commun.css et la peau.

   Chaque bandeau rejoue la mécanique réelle du projet qu'il illustre : ce
   n'est pas une décoration posée par-dessus, c'est l'algorithme de la page
   qui tourne. D'où le parti pris de dimension : une BANDE, pas un fond de
   page. Un fond animé derrière du texte se paie toujours en lisibilité, et
   la seule façon de ne pas le payer est de le rendre si discret qu'il ne
   raconte plus rien. Une bande assumée montre l'animation en entier et laisse
   le texte tranquille. */

/* margin-top et margin-bottom separement, pas le raccourci : le raccourci
   poserait aussi margin-left:0 et ecraserait le debordement de .deborde,
   qui est declare dans commun.css donc plus tot dans la cascade. */
.anim{
  position:relative; margin-top:30px; margin-bottom:0;
  border:1px solid var(--filet); border-radius:14px; overflow:hidden;
  background:#0a0813;
  aspect-ratio:16 / 5;
}
.anim canvas{display:block; width:100%; height:100%}

/* Le repli. Il porte le même sens que l'animation, en une phrase : si le
   canvas ne peut pas tourner — vieux navigateur, JavaScript coupé, économie
   d'énergie — la bande ne devient pas un rectangle vide. */
.anim-repli{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px 28px; text-align:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris); line-height:1.8;
}
/* .tourne et non .anim.tourne : le repli sert aussi au bandeau pleine
   largeur, qui ne porte pas la classe .anim. */
.tourne .anim-repli{display:none}

.anim-etiquette{
  position:absolute; left:14px; bottom:12px; z-index:2; pointer-events:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gris);
  background:color-mix(in srgb, #0a0813 78%, transparent);
  border:1px solid var(--filet); border-radius:999px; padding:5px 11px;
}

/* Le compteur en direct : c'est lui qui fait la différence entre une jolie
   boucle et une mesure. Il est en aria-live poli plutôt que muet, parce que
   le nombre EST l'information. */
.anim-compteur{
  position:absolute; right:14px; top:12px; z-index:2; pointer-events:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--encre); font-variant-numeric:tabular-nums;
  background:color-mix(in srgb, #0a0813 78%, transparent);
  border:1px solid var(--filet); border-radius:999px; padding:5px 11px;
}
.anim-compteur b{color:var(--rouge); font-weight:600}

.anim-legende{
  font-size:14.5px; color:var(--gris); margin-top:12px; line-height:1.65;
  max-width:36em;
}
.anim-legende b{color:var(--encre)}

@media (max-width:720px){
  .anim{aspect-ratio:16 / 8}
  .anim-etiquette,.anim-compteur{font-size:9.5px; padding:4px 9px}
}

/* Mouvement réduit : le script dessine une image fixe et n'appelle jamais
   requestAnimationFrame. Rien à neutraliser ici, mais la bordure du repli
   n'a plus de raison de clignoter. */
@media (prefers-reduced-motion: reduce){
  .anim{border-color:var(--filet)}
}


/* ---------- le bandeau animé d'une page de travail ----------
   L'animation va d'un bord à l'autre de l'écran et porte le titre. Elle est
   SORTIE de .feuille dans le HTML — c'est la structure de .hero sur l'accueil,
   et le seul moyen d'aller pleine largeur sans `width:100vw`, qui compte la
   barre de défilement et déborde de quinze pixels. */
.tete-anim{
  position:relative; display:flex; align-items:flex-start;
  min-height:clamp(340px, 50svh, 500px);
  overflow:hidden; background:#0a0813;
  border-bottom:1px solid var(--filet);
}
.tete-anim > canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}

/* Le voile — deuxième version, et la première était fausse.

   Elle assombrissait la GAUCHE en dégradé vers la droite, en reprenant la
   recette du bandeau d'accueil. Ça tient là-bas parce que le visuel de fond a
   son sujet à droite et du vide à gauche. Ici l'animation occupe toute la
   largeur : le dégradé la mangeait d'un côté et pas de l'autre, et la bande
   entière paraissait décentrée alors qu'elle ne l'était pas.

   Le dégradé est donc VERTICAL seulement, donc symétrique par construction.
   Fort en haut, là où se trouve le titre. Il s'allège vers le bas, où
   l'animation a la place de se montrer sur toute la largeur. Une ombre revient
   en pied, uniquement pour fondre la bande dans la page qui suit. */
.tete-voile{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--papier) 90%, transparent) 0%,
    color-mix(in srgb, var(--papier) 78%, transparent) 40%,
    color-mix(in srgb, var(--papier) 50%, transparent) 76%,
    color-mix(in srgb, var(--papier) 68%, transparent) 100%);
}

/* Le texte reprend exactement le rail du reste du site : même largeur, même
   rembourrage que .feuille. C'est ce qui fait qu'il n'y a plus qu'un bord
   gauche sur toute la page. */
.tete-dedans{
  position:relative; z-index:2; width:100%;
  max-width:960px; margin:0 auto; padding:26px 32px 40px;
}
.tete-anim .chapeau{margin:0}
.tete-anim h1{
  font-size:clamp(38px, 5.4vw, 76px); line-height:1;
  margin:12px 0 0; max-width:24ch;
}
/* 44ch : au-delà, le chapô sort de la partie sombre du voile et passe sur les
   cases claires de l'animation. */
.tete-anim .sous-titre{margin:14px 0 0; max-width:44ch}
.tete-anim .tete-actions{margin:20px 0 0}
/* Les deux badges étaient collés aux bords de la FENÊTRE : sur un écran
   large ils flottaient seuls à deux cents pixels de tout le reste, sans
   rapport visible avec la page. Ils se calent maintenant sur le bord droit
   de la colonne de texte, comme tout le reste du site — le max() les garde
   à distance du bord quand la fenêtre devient plus étroite que la colonne.
   448px = la demi-largeur du contenu, (960 - 64) / 2. */
.tete-anim .anim-compteur,
.tete-anim .anim-etiquette{
  z-index:3;
  right:max(20px, calc(50% - 448px));
  left:auto;
}
.tete-anim .anim-compteur{top:20px; bottom:auto}
.tete-anim .anim-etiquette{bottom:20px; top:auto}

/* Le premier conteneur ne porte plus que le bandeau et les onglets : son
   rembourrage bas de 100 px creusait un trou de cent pixels entre les onglets
   et le titre, exactement ce qu'on cherchait à supprimer. */
.feuille.tete-site{padding-bottom:0}
/* Le conteneur du contenu ne referme pas non plus : c'est la marge haute du
   pied de page qui fait l'espace, sinon les deux s'ajoutent. */
.tete-anim + .feuille{padding-top:34px; padding-bottom:0}

@media (max-width:720px){
  .tete-dedans{padding:22px 20px 32px}
  .tete-anim{min-height:auto}
  .tete-anim + .feuille{padding-top:26px}

  /* Sur téléphone le texte descend plus bas dans la bande, là où le voile
     s'allège. On le renforce donc dans la moitié basse. */
  .tete-voile{
    background:linear-gradient(to bottom,
      color-mix(in srgb, var(--papier) 90%, transparent) 0%,
      color-mix(in srgb, var(--papier) 82%, transparent) 55%,
      color-mix(in srgb, var(--papier) 72%, transparent) 100%);
  }
  /* Sur 375 px il n'y a aucune place à droite du texte : le compteur se
     posait sur le chapeau et l'étiquette sur le bouton. On leur réserve donc
     une bande en pied de bandeau — étiquette à gauche, compteur à droite —
     et le texte s'arrête au-dessus. Les masquer aurait été plus simple, mais
     le compteur est ce qui prouve que le calcul tourne vraiment ; c'est la
     dernière chose à sacrifier. */
  .tete-dedans{padding-bottom:64px}
  .tete-anim .anim-compteur{top:auto; bottom:14px; right:20px}
  .tete-anim .anim-etiquette{bottom:14px; left:20px; right:auto}
}

/* Sous 430 px, les deux badges côte à côte dépassent la largeur disponible —
   mesuré sur Mines, dont le compteur est le plus long des six. C'est
   l'étiquette qui part, pas le compteur : elle répète en trois mots ce que la
   légende dit en une phrase complète juste sous le bandeau, alors que le
   compteur est la seule chose qui prouve que le calcul tourne. */
@media (max-width:430px){
  .tete-anim .anim-etiquette{display:none}
  .tete-dedans{padding-bottom:56px}
}