/* =====================================================================
   base.css — le mobilier commun à toutes les pages

   Pour l'instant : la barre de défilement. Elle était laissée au système
   sur les pages longues, et redéfinie à trois endroits différents pour les
   zones internes. Elle est maintenant réglée une fois, pour tout.
   ===================================================================== */

/* Quatre pixels, sans piste ni flèches : un filet, comme le reste du site.

   Elle reste invisible tant qu'on n'a pas défilé — en haut de page, elle
   n'apprend rien et ne fait que salir le bord. La classe est posée par
   nav.js dès le premier mouvement.

   Au repos elle est grise : la couleur d'accent en permanence, sur un
   élément qui ne quitte jamais l'écran, c'était trop. Elle ne s'y met qu'au
   survol et pendant qu'on la tire, c'est-à-dire au seul moment où on la
   regarde vraiment. */
*::-webkit-scrollbar{
  width:4px;
  height:4px;
}
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{
  background:transparent;
  border-radius:0;                 /* pas d'arrondi : rien n'en a sur ce site */
  transition:background .35s;
}
html.defile *::-webkit-scrollbar-thumb{ background:#2c2c2c }
html.defile *::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--accent, #ff00d0) 70%, transparent);
}
html.defile *::-webkit-scrollbar-thumb:active{ background:var(--accent, #ff00d0) }
*::-webkit-scrollbar-corner{ background:transparent }

/* Firefox n'expose que deux réglages et ignore les états : la barre y reste
   simplement fine et grise. */
html{ scrollbar-width:thin; scrollbar-color:transparent transparent }
html.defile{ scrollbar-color:#2c2c2c transparent }

/* =====================================================================
   LE FOCUS CLAVIER

   Rien ne change à la souris : `:focus-visible` ne se déclenche que lorsque
   le navigateur juge que la personne navigue au clavier. Un clic ne l'allume
   jamais — c'est toute la différence avec `:focus`, qui entourait aussi les
   boutons qu'on venait de cliquer et que tout le monde a pris l'habitude de
   désactiver, en cassant la navigation au clavier au passage.

   L'anneau reprend la couleur d'accent du site : il appartient au dessin au
   lieu d'être le contour bleu du système.

   Le curseur personnalisé masque celui de la souris sur la plupart des
   pages. Quelqu'un qui tabule n'avait donc aucun repère du tout — ni
   pointeur, ni surbrillance.
   ===================================================================== */
/* =====================================================================
   LE SOMMAIRE HORS ÉCRAN

   Certaines pages ne disent leur contenu qu'une fois le script exécuté :
   l'accueil construit ses sept projets en JavaScript, les archives leurs
   photographies. À l'écran c'est sans conséquence. Ailleurs, non :

     — un robot d'aperçu de lien n'exécute aucun script ;
     — un lecteur d'écran n'a aucun moyen de faire tourner un cylindre 3D
       pour découvrir ce qu'il y a dessus ;
     — un moteur de recherche lit d'abord le HTML servi.

   On pose donc le titre et la liste des projets en clair dans la page, et
   on les sort du cadre visible. Ce n'est pas du texte caché au sens où
   l'entendent les moteurs — c'est exactement ce que la page montre, écrit
   une fois de façon lisible par ce qui ne voit pas.

   `clip-path` plutôt que `display:none` : masqué de cette façon, le texte
   reste dans l'arbre d'accessibilité et dans le document. `display:none`
   l'en retirerait, et l'effort serait vain. */
.hors-ecran{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}
/* On le rend au clavier : un lien de saut doit se voir quand on l'atteint. */
.hors-ecran:focus-within{
  position:fixed; top:10px; left:10px; width:auto; height:auto;
  clip-path:none; padding:10px 14px; background:#000; color:#fff;
  z-index:999; white-space:normal;
}

:focus-visible{
  outline:2px solid var(--accent, #ff00d0);
  outline-offset:3px;
  border-radius:1px;
}
/* On ne retire l'anneau par défaut que là où l'on en pose un soi-même. */
:focus:not(:focus-visible){outline:none}