/* La navigation des pages bande.
   28/08/2026 : le retour vit dans la marge, il ne recouvre jamais le travail.
   30/08/2026 : trois blocs. En haut a gauche le nom du projet puis « retour
   projets ». A mi-hauteur, « projet precedent » a gauche et « projet suivant »
   a droite. Sur telephone la bande prend toute la largeur, les trois liens
   descendent dans une barre de pastilles en bas.

   La bande occupe 75 % de la largeur, il reste donc 12,5 % de chaque cote. Les
   blocs de marge font exactement cette largeur, avec une gouttiere egale des
   deux cotes : rien ne peut toucher la bande. La largeur est en pourcentage et
   pas en vw, parce que vw compte la barre de defilement et la bande non.

   31/08/2026, le papier. Mesure de depart : aucun pixel des bandes n'est plus
   clair que le fond de page, donc c'etait le fond qui avancait et le travail
   qui reculait. Regle arretee avec Chevreuil : le papier garde une clarte de
   0,945 et un chroma de 0,020, et prend la teinte du blanc du projet, c'est a
   dire l'aplat uni le plus clair qui couvre au moins 2 % de la bande. Chaque
   page pose donc son propre --page ; le calcul se fait avec
   /root/outils-bande/papier-du-projet.py.

   L'ancien #f2f0e9 valait srgb(0,955 · 0,010 · 95,5), soit exactement cette
   regle appliquee a l'Atelier : la page portait deja le papier du premier
   projet, ce qui la mettait en travers des cinq autres.

   La separation, elle, ne se joue pas sur la couleur du fond. Le balayage de
   toutes les clartes possibles ne descend jamais le pire cas sous 19 % de bord
   confondu, les bandes couvrant toute l'echelle des tons. D'ou l'ombre douce,
   qui assombrit la marge au contact et marche quel que soit le bloc. */

@font-face {
  font-family: "Alegreya";
  src: url("/thibaudgrenon/police/alegreya.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* chaque page projet redefinit --page en ligne, avec le papier de son projet */
  /* Depuis le 08/09/2026 le fond d'une page projet est sombre, et l'encre claire.
     Le fond prend la teinte de l'encre du projet, l'aplat uni le plus sombre de
     sa bande, a clarte 0,283 et chroma 0,018 pour tout le portfolio : la plus
     basse clarte et le plus faible chroma des trois encres mesurees, l'egalisation
     se faisant par le bas. L'encre claire reprend l'ancien papier, clarte 0,945 et
     chroma 0,020 sur la meme teinte, ce qui donne 12,3 de contraste partout.
     Ces deux valeurs sont posees en ligne par chaque page ; celles ci servent de
     repli. Voir outils-bande/encre-du-projet.py. */
  --page:  #2a2724;
  --encre: #efece7;
  --gouttiere: clamp(0.7rem, 1.3vw, 1.4rem);
}

html, body { margin: 0; padding: 0; background: var(--page) }

/* la bande, seule piece de la page : une feuille posee sur le papier */
picture img {
  display: block;
  width: 75%;
  height: auto;
  margin: 0 auto;
  /* Sur le fond sombre du 08/09/2026, une ombre teintee disparait dans le fond.
     Elle passe au noir et se densifie, c'est ce qui detache encore la bande. */
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.45),
              0 0.15rem 0.6rem rgb(0 0 0 / 0.25);
}

.nav-bande {
  font-family: "Alegreya", ui-serif, Georgia, serif;
  color: var(--encre);
  transition: opacity .25s ease, translate .25s ease;
}

.marge {
  position: fixed;
  width: 12.5%;
  box-sizing: border-box;
  padding-inline: var(--gouttiere);
  text-align: center;
  z-index: 10;
}

.marge--haut   { top: clamp(1.2rem, 3.5vh, 2.8rem); left: 0 }
.marge--gauche { top: 50%; left: 0;  translate: 0 -50% }
.marge--droite { top: 50%; right: 0; translate: 0 -50% }

.titre-projet {
  margin: 0 0 0.85em;
  font-size: clamp(1rem, 1.35vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  /* couper aux mots, en lignes de longueurs proches */
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}

.lien-nav {
  display: inline-block;
  padding: 0.3em 0.1em;
  color: inherit;
  font-size: clamp(0.9rem, 1.05vw, 1.1rem);
  line-height: 1.35;
  text-decoration: none;
  text-underline-offset: 0.25em;
}

.lien-nav:hover, .lien-nav:focus-visible { text-decoration: underline }
.lien-nav:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; border-radius: 3px }

.fleche { display: inline-block; transition: translate .2s ease }
.precedent:hover .fleche, .precedent:focus-visible .fleche { translate: -0.3em 0 }
.suivant:hover   .fleche, .suivant:focus-visible   .fleche { translate:  0.3em 0 }

/* Sur telephone la bande prend toute la largeur : les liens se posent dessus,
   donc il leur faut leur propre fond pour rester lisibles sur n'importe quelle
   couleur de bande. Ils descendent tous les trois en bas, a portee de pouce :
   precedent a gauche, retour au centre, suivant a droite. Le nom du projet
   disparait, la bande le porte deja dans son premier bloc. */
@media (max-width: 760px) {
  /* la bande prend toute la largeur : elle n'a plus de marge dont se detacher,
     l'ombre y est coupee, elle ne ferait que rogner l'ecran */
  picture img { width: 100%; box-shadow: none }

  .nav-bande {
    position: fixed;
    left: 0; right: 0; bottom: 1.1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-inline: 1.1rem;
  }

  .titre-projet { display: none }
  .precedent .mot, .suivant .mot { display: none }

  .marge {
    position: static;
    width: auto;
    padding-inline: 0;
  }
  .marge--gauche { order: 1; translate: none }
  .marge--haut   { order: 2 }
  .marge--droite { order: 3; translate: none }

  .lien-nav {
    padding: 0.5em 0.95em;
    background: var(--page);
    border-radius: 999px;
    box-shadow: 0 2px 14px rgb(0 0 0 / 0.28);
    font-size: 1rem;
  }
  .precedent, .suivant { padding-inline: 0.75em }

  .nav-bande.efface {
    opacity: 0;
    translate: 0 1.2rem;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bande, .fleche { transition: none }
}