/* ---- Signes animés (2026-10-30) ----
   Les déclinaisons de chaque signe en coupes, sur les couleurs de sa charte : quatre plans de 1,2 s, chacun avance
   de 14 % en continu (demande de Viktor du 2026-10-30 : la vidéo d'août montait de 4,5 %, invisible). Vectoriel dans la page, sans vidéo.
   Mouvement réduit : le premier plan, immobile. */
.signe-anime {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  --duree: 4.8s;
}
.fiche-corps .cadre > .signe-anime { aspect-ratio: 16 / 9; height: auto; }
.signe-anime .signe-plan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--fond);
  opacity: 0;
  animation: signe-coupe var(--duree) linear var(--retard) infinite;
}
/* le décalage passe par une variable, que l'image hérite de son plan : une règle d'image plus spécifique
   ne peut plus le remettre à zéro (les plans 2 à 4 restaient figés en fin de zoom) */
.signe-anime .signe-plan { --retard: 0s; }
.signe-anime .signe-plan:nth-child(2) { --retard: calc(var(--duree) * -0.75); }
.signe-anime .signe-plan:nth-child(3) { --retard: calc(var(--duree) * -0.5); }
.signe-anime .signe-plan:nth-child(4) { --retard: calc(var(--duree) * -0.25); }
.signe-anime .signe-plan img,
.fiche-corps .cadre .signe-anime .signe-plan img,
.media .signe-anime .signe-plan img {
  width: var(--largeur);
  height: auto;
  object-fit: contain;
  display: block;
  transform: none;
  animation: signe-avance var(--duree) linear var(--retard) infinite;
}
@keyframes signe-coupe {
  0%, 24.99% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes signe-avance {
  0% { transform: scale(1); animation-timing-function: linear; }
  25%, 100% { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .signe-anime .signe-plan, .signe-anime .signe-plan img,
  .fiche-corps .cadre .signe-anime .signe-plan img, .media .signe-anime .signe-plan img { animation: none; }
  .signe-anime .signe-plan:first-child { opacity: 1; }
}

/* Tuiles de l'accueil et pied « projet suivant » : le signe occupe tout le cadre.
   Sur l'accueil, il présente le projet en grand, en une seule passe (scripts/signes-animes.js, Viktor, 2026-10-30). */
.tuile .signe-anime { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 1.4s cubic-bezier(0.19, 1, 0.22, 1); }
.tuile.chargee .signe-anime { opacity: 1; }
.index-projets .entree:is(:hover, :has(.entree-lien:focus-visible)) .tuile .signe-anime { transform: scale(1.035); }
/* dans le pied, le signe monte au-dessus du voile de la légende */
.pied-suivant .signe-anime .signe-plan { place-items: start center; padding-top: 9%; }
.pied-suivant .signe-anime { position: absolute; inset: 0; transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1); }
.pied-suivant:hover .signe-anime, .pied-suivant.capte .signe-anime, .pied-suivant:focus-visible .signe-anime { transform: scale(1.03); }

/* ---- Le tracé des fiches aux couleurs de chaque charte (2026-10-30) ----
   Le fond et le signe prennent la palette du projet ; les poignées creuses suivent le fond. */
.fiche-corps .cadre.trace:has(.trace-sp) { --surface: #121315; --surface-forte: #1f2124; --fg: #E4E6E8; }
.fiche-corps .cadre.trace:has(.trace-p37) { --surface: #16140F; --surface-forte: #26231c; --fg: #F2EDE1; }
.fiche-corps .cadre.trace:has(.trace-bau) { --surface: #86391F; --surface-forte: #94442a; --fg: #F3DBB2; }
.fiche-corps .cadre.trace:has(.trace-bb) { --surface: #F2E555; --surface-forte: #e6d84a; --fg: #1A1403; }
.fiche-corps .cadre.trace:is(:has(.trace-sp), :has(.trace-p37), :has(.trace-bau), :has(.trace-bb)) .trace-legende { color: var(--fg); opacity: 0.72; }

/* BisonBât : le tracé montre le logo entier, plus le bison seul (demande de Viktor du 2026-10-30) */
.trace-bb { width: 72%; }
@media (max-width: 759px) { .trace-bb { width: 88%; } }

/* Petites images de l'accueil (8:9) : le cadrage garde le sujet entier (Viktor, 2026-10-30) */
.tuile img[data-src*="P37-20261030-linteau"] { object-position: 32% 50%; }
.tuile img[data-src*="BAU-20261030-flacon"] { object-position: 85% 50%; }
.tuile img[data-src*="BB-20261029-camion"] { object-position: 64% 50%; }

/* Accueil : une seule passe, plan par plan (2,4 s, zoom de 14 %), puis arrêt sur le logo complet. Le script pose
   .une-passe et allume le plan courant (.actif, .avance). Les plans passent en fondu et le zoom se relâche en douceur
   quand la passe s'arrête (Viktor, 2026-10-30). Sans script, la boucle des fiches reste. */
.tuile .signe-anime.une-passe .signe-plan, .tuile .signe-anime.une-passe .signe-plan img { animation: none; }
.tuile .signe-anime.une-passe .signe-plan { transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
.tuile .signe-anime.une-passe .signe-plan.actif { opacity: 1; z-index: 1; }
.tuile .signe-anime.une-passe .signe-plan img { transform: scale(1); transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.tuile .signe-anime.une-passe .signe-plan.avance img { transform: scale(1.14); transition: transform 2.4s linear; }

/* Le caractère SP Sans se dessine en grand dans la fiche Stéphane Pierre (Viktor, 2026-10-30) : même moteur que les
   logos, aux couleurs de la charte. */
.fiche-corps .cadre.trace:has(.trace-spsans) { --surface: #121315; --surface-forte: #1f2124; --fg: #E4E6E8; }
.fiche-corps .cadre.trace:has(.trace-spsans) .trace-legende { color: var(--fg); opacity: 0.72; }
.trace-spsans { width: 100%; }
@media (max-width: 759px) { .trace-spsans { width: 100%; } }

/* Projet suivant : une image fixe forte du projet (Viktor, 2026-10-30) */
.pied-suivant .pied-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1); }
.pied-suivant:hover .pied-image, .pied-suivant.capte .pied-image, .pied-suivant:focus-visible .pied-image { transform: scale(1.03); }

/* Sceau VV (ouverture, carte contact, pied) : plus de cadre pointillé de métriques pendant le dessin ni au survol
   (Viktor, 2026-10-30) */
.sceau-metriques { display: none; }