/* =============================================================================
   NABSEED · lisibilite du hero sur ordinateur et sur telephone.

   CETTE FEUILLE NE CONTIENT QUE CE QUI EST MESURE, VALIDE ET SANS RISQUE. La composition
   en diptyque, decidee le 19.09, vit dans une page de demonstration separee tant que le
   fondateur ne l a pas jugee sur piece : la mesure ne confirme pas qu elle ameliore, et
   une composition qu on ne peut pas montrer ne se deploie pas sur vingt-quatre pages.

   LE HERO : rendre le titre lisible sans toucher a la photographie

   MESURE AVANT CORRECTION : contraste 2,28:1 entre le titre creme et le sable de la
   photographie, la ou WCAG demande 3:1 au minimum pour un gros texte et 4,5:1 en regle
   generale. Le titre etait donc, litteralement, presque illisible.

   TROIS SOLUTIONS EXISTAIENT, le fondateur a tranche pour la premiere :
     un degrade sombre sous le texte      photographie intacte, superposition preservee
     un bandeau creme sous l image        contraste maximal, superposition perdue
     un titre sombre sur image claire     echoue des que la photographie est sombre

   Le degrade ne recadre rien et ne deforme rien : il ajoute une couche, il ne retire
   aucun pixel. Il monte du bas, la ou le titre est pose, et s eteint avant le milieu de
   l image pour ne pas assombrir le sujet.
   ============================================================================= */

/* NE JAMAIS TOUCHER AU POSITIONNEMENT DE L IMAGE DU HERO.

   Mon premier jet posait position:relative sur .hero > picture pour « etre sur » de la
   pile. L image du hero est en position absolue, c est ce qui permet au titre de se poser
   dessus. La remettre en relatif la remet dans le flux, et le hero grandit de toute la
   hauteur de l image.

   Mesure du degat, avant / apres, sur les cinq pages qui ont un hero :
       702 px  ->  1361, 1390, 1620, 1649 et 1725 px
   Soit un hero qui passe de moins d un ecran a presque deux, avec une image ne couvrant
   plus que 70 a 76 pour cent de sa propre section, le reste en aplat creme. C est
   exactement l ecran vide que cette feuille etait censee supprimer.

   La sonde a rattrape cela avant qu une seule page ne soit modifiee : la feuille etait
   deposee sur le serveur mais chargee par personne. C est la seule raison pour laquelle
   ce paragraphe parle d une mesure et non d un retour en arriere. */

.hero { position: relative; isolation: isolate; }

.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  /* TOP: AUTO, ET C EST TOUT LE CORRECTIF DU 22.09.
     effets.css pose « .fx-plein::after { inset:0 } », donc top:0. Cette regle ci ajoutait
     bottom:0 et une hauteur sans jamais relacher le top. Trois valeurs non auto sur le meme
     axe : le navigateur ignore « bottom » et ancre la boite EN HAUT. Le voile couvrait donc
     le ciel, et le chapeau restait a nu sur le sable.

     Mesure au moment du constat, a 657 px sur sidr :
         hero 81 a 640     voile 81 a 517     chapeau 509 a 583
     soit 66 des 74 pixels du chapeau hors du voile.

     Ma mesure de contraste precedente calculait le degrade comme s il etait ancre en bas.
     Elle rendait 7,26:1 et 10,62:1 sur une page ou l on ne lisait rien. L instrument etait
     faux, pas la cible, et c est la seule raison pour laquelle 62 % puis 78 % ont paru
     insuffisants : la hauteur n etait pas le probleme. */
  top: auto;
  bottom: 0;
  height: 78%;
  z-index: 1;
  pointer-events: none;
  /* Opacites deduites, non choisies. Sur le pixel LE PLUS CLAIR de la photo sous chaque
     bloc (252,180,120 sous le titre, 248,179,116 sous le chapeau), il faut 0,55 pour tenir
     4,5:1 sous le titre et 0,70 sous le chapeau. Le reste est de la marge.

     Les positions des blocs, rapportees a la boite du voile, ont ete mesurees sur sept
     tailles d ecran, et elles bougent beaucoup plus que je ne le croyais :
         chapeau  10 a 30 %        titre  26 a 57 %   (le titre monte quand l ecran est bas)
     D ou un plateau tenu jusqu a 68 % et non 54. La premiere version deployee ce soir
     redescendait des 54 % : elle tenait sur telephone et lachait a 1366 x 640, ou le titre
     de « demande » tombait a 3,46:1. Mesure, pas suppose.

     Banc final : 5 pages x 7 tailles x 2 blocs, soit 70 mesures.
         pire pixel isole      4,31      pire premier centile      5,16
         blocs sous 4,5:1 au centile : 0
     Le pixel isole le plus dur est un point de ciel sous un titre de 68 px en graisse 300,
     que la norme classe en grand texte au seuil de 3:1. Le centile gouverne la lisibilite
     d un trait de lettre, le pixel unique non : les deux sont donnes plutot qu un seul.

     0,80 en bas et non 0,94 : la dune du premier plan est deja la partie sombre de la
     photographie, et une opacite qui la noircit encore ne gagne aucun contraste puisque
     aucun texte ne s y trouve. On ne paie pas une photographie pour l effacer. */
  background: linear-gradient(to top,
      rgba(36, 27, 22, 0.82) 0%,
      rgba(36, 27, 22, 0.80) 32%,
      rgba(36, 27, 22, 0.74) 68%,
      rgba(36, 27, 22, 0.30) 86%,
      rgba(36, 27, 22, 0.00) 100%);
}

/* Le texte repasse au dessus du voile. Sans ce z-index, le degrade le recouvrirait et on
   aurait remplace un probleme de contraste par un probleme de superposition. */
.hero h1,
.hero .lead,
.hero .rang,
.hero > .tete,
.hero > div:not([class*="fx-"]) { position: relative; z-index: 2; }

/* --------------------------------------------------- 06 · le titre du hero, sa place */

@media (min-width: 1100px) {
  /* Mesure : le titre occupait 670 pixels sur 1904, soit 35 pour cent de la largeur, avec
     un max-width de 17ch. Sur un ecran large, un titre de hero qui tient un tiers de la
     largeur et se termine en haut a gauche laisse les deux tiers restants sans rien.
     22ch garde la coupe en deux ou trois lignes et occupe environ la moitie. */
  .hero h1 { max-width: 22ch; }
  .hero .lead { max-width: 52ch; }
}