/* ==========================================================================
   Section 1 - accroche

   VERITE TERRAIN. Contrairement a ce que suppose le brief, le modele de reference n'ouvre
   PAS sur un fond clair : son accroche est un panneau pleine largeur, sans
   rayon, en vert tres sombre rgb(20, 45, 37), haut de 752px a 1440, suivi
   immediatement d'une bande claire (la verite terrain home-1440.json,
   noeud MAIN > DIV > SECTION > DIV). Le geste structurant est donc bien un
   BLOC DE COULEUR pleine largeur avec une arete franche en bas, pas une
   accroche posee sur du blanc.

   Mesures relevees dans ce panneau, a 1440 :
   - h1 cale a gauche du conteneur (x=110), 84px / 84px, interlettrage -1,92px,
     graisse 400, sur trois lignes dont deux fragments a l'accent vert ;
   - phrase de soutien a 30px sous le titre, 20px, interlettrage -0,5px ;
   - bouton pilule de 223 x 56px, 30px sous la phrase ;
   - 193px entre le haut du panneau et le haut du titre, 93px sous le contenu.

   CE QUE JE REPRENDS : le panneau pleine largeur, le calage a gauche dans le
   conteneur, l'echelle du titre, les espacements de 30px, le bouton pilule de
   56px, l'accent colore sur une partie du titre.

   CE QUE JE CHANGE, ET POURQUOI : le panneau est CLAIR, pas sombre. La pilule
   de navigation de Numbers est en --ink et flotte au-dessus de l'accroche :
   sur un panneau sombre elle disparaitrait purement et simplement. Le fond est
   donc le creme Numbers, rechauffe sur sa moitie droite par hero-gradient.webp.
   Le degrade garde ainsi son role de seule couleur forte de la marque, mais il
   n'est plus etire sur 1440px de large : cadre sur la moitie droite il subit un
   agrandissement d'environ 1,9x au lieu de 3x, et la colonne de texte reste sur
   du creme uni, donc au contraste maximal.

   Deuxieme ecart au modele, corrige apres coup : le panneau ne se termine PAS
   par une arete franche. L'arete est la consequence directe du fond sombre du
   modele, ou la limite du bloc est de toute facon lisible. Reproduite sous un
   fond clair traverse par un degrade, elle se lisait comme un defaut de
   fabrication : le degrade arrivait a pleine saturation sur le bord et se
   coupait net sur le blanc de la section suivante, jusqu'a 90 niveaux d'ecart
   d'un pixel au suivant. Le pied du panneau se resout donc dans le blanc de la
   page, sur ses 96 a 120 derniers pixels, par deux fondus decrits plus bas.
   L'ecart mesure de part et d'autre de la limite tombe ainsi de 90 / 79 / 78
   niveaux a 4 / 3 / 3 a 1440, 900 et 375px.
   ========================================================================== */

/* Le double selecteur monte la specificite d'un cran : la section porte aussi
   la classe .section, qui pose son propre rythme vertical dans base.css. Sans
   cela, l'ordre de chargement des feuilles deciderait des paddings du panneau,
   ce qui est trop fragile pour la premiere chose que voit le visiteur. */
.section.accroche,
.accroche {
  position: relative;
  /* L'image de fond deborde volontairement a droite, on la rogne au bord de la
     fenetre pour ne jamais provoquer de defilement horizontal. */
  overflow: hidden;
  background-color: var(--cream);
  /* CORRECTION. Le panneau se terminait par une arete franche, un lisere de
     1px pose directement sur le blanc de la section suivante. Sur le modele
     cette arete fonctionne parce que le panneau est vert tres sombre : la
     rupture est assumee et lisible comme une limite de bloc. Ici elle produit
     l'inverse, une couture parasite, parce que le degrade arrive a pleine
     saturation exactement sur ce bord (jusqu'a 90 niveaux d'ecart mesures au
     bord droit a 1440, et une bande peche coupee net sur toute la largeur a
     375). Le lisere est donc supprime et le pied du panneau se resout dans le
     blanc de la page sur ses 96 derniers pixels.
     Le fond est peint en deux temps : la couleur pleine (--cream) sert de
     socle, et l'image de fond, qui se superpose a elle, ramene ce socle au
     blanc en bas. Cette couche reste SOUS le degrade, qui est un enfant de la
     section : c'est le fondu du masque, plus bas, qui eteint le degrade lui
     meme au meme endroit. Les deux fondus se recouvrent, aucun des deux ne
     laisse d'arete. */
  background-image: linear-gradient(to top, var(--white) 0, rgba(255, 255, 255, 0.72) 32px, rgba(255, 255, 255, 0.28) 66px, rgba(255, 255, 255, 0) 96px);
  background-repeat: no-repeat;
  /* 96px de bandeau de navigation, la pilule descend a 80px ; les 130px
     restants sont la respiration propre de l'accroche. Total 182px, du meme
     ordre que les 193px releves sur le modele. */
  padding-top: 182px;
  padding-bottom: 120px;
}

/* --------------------------------------------------------------- le fond */

/* Le degrade n'occupe que la moitie droite du panneau et s'eteint par un masque
   radial ancre en BAS a droite. Le masque n'est pas lineaire pour une raison
   precise : la derniere ligne du titre court jusqu'a environ 1230px a 1440, et
   un masque en degrade horizontal la ferait finir sur le corail. Ancre en bas,
   le degrade laisse la bande du titre presque intacte et se concentre sous la
   colonne de texte, la ou il n'y a rien a lire. */
.accroche__degrade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  /* Pleine largeur : le degrade n'est plus un accent de bord mais le fond de
     la banniere. C'est ce que demande son dessin, qui porte des rubans d'un
     bout a l'autre de l'image ; le confiner a 66 pour cent n'en montrait
     qu'un voile sans structure. */
  width: 100%;
  background-image: url("../img/hero-gradient.webp");
  background-position: 58% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;

  /* Le masque est monte en DEUX couches que l'on croise, plutot qu'en une
     seule. La couche de forme est celle decrite ci-dessus, elle place le
     degrade dans le panneau et se redefinit a chaque palier. La couche de pied
     est commune a tous les paliers et ne fait qu'une chose : eteindre le
     degrade sur les 120 derniers pixels, quelle que soit la forme retenue au
     dessus. Croiser les deux plutot que d'aplatir le fondu dans chaque forme
     evite d'avoir a re-regler la geometrie a chaque point de rupture, et
     garantit qu'aucune variante future ne pourra re-toucher le bord bas.
     Les valeurs sont en pixels et non en pourcentage : la hauteur du degrade
     passe de 671px a 321px selon le palier, un pourcentage donnerait des
     fondus de longueurs tres inegales alors que l'oeil, lui, juge la couture
     en pixels. */
  /* Le masque ne sert plus qu'a adoucir le bord gauche, la ou le titre
     commence. Il atteint sa pleine opacite des 30 pour cent, contre 88
     auparavant : l'ancienne courbe mangeait 60 pour cent de la saturation de
     l'image, mesure faite en comparant la saturation moyenne du fichier source
     a celle reellement peinte dans la page. */
  --masque-forme: linear-gradient(96deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.78) 14%, #000 30%);
  --masque-pied: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.45) 34px, #000 78px);
  -webkit-mask-image: var(--masque-forme), var(--masque-pied);
  mask-image: var(--masque-forme), var(--masque-pied);
  /* La propriete standard est posee apres la propriete prefixee : la ou les
     deux sont comprises, c'est la standard qui decide. "intersect" et
     "source-in" designent la meme operation, garder la plus petite des deux
     opacites. Un moteur qui ne comprend ni l'une ni l'autre affiche les deux
     couches empilees, donc un degrade un peu plus present, jamais casse. */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Voile creme par-dessus le degrade : l'image d'origine sature jusqu'au corail
   dans son quart bas, ce qui ferait une tache trop forte a cote d'une page qui
   n'a plus aucun autre aplat colore. Le voile la ramene au rang de fond. */
/* Grain, pose en surcouche et non cuit dans l'image.

   Raison mesuree : le fichier source porte un grain d'ecart-type 0,53, mais
   apres compression WebP il tombe a 0,21, et monter la qualite ne le ramene
   pas. L'encodeur traite le grain fin comme du bruit et le jette, c'est meme
   pour cela que l'image ne pese que 10 Ko. Cuire le grain dans l'image
   obligerait a servir un PNG de 2 Mo.

   Le filtre SVG le regenere donc a la volee, a la resolution reelle de
   l'ecran : quelques centaines d'octets, net sur un ecran a haute densite la
   ou une texture matricielle serait interpolee. */
.accroche__degrade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='3'%20intercept='-1'/%3E%3CfeFuncG%20type='linear'%20slope='3'%20intercept='-1'/%3E%3CfeFuncB%20type='linear'%20slope='3'%20intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23g%29'/%3E%3C/svg%3E");
  /* Le bruit brut de feTurbulence sort en tons moyens : fondu en soft-light
     il etait invisible, quelle que soit l'opacite. Le feComponentTransfer du
     filtre ecarte donc les valeurs (pente 3, ordonnee -1) AVANT le fondu, ce
     qui donne un grain contraste facon film. overlay mord alors franchement
     la ou soft-light se contentait de l'effleurer. */
  mix-blend-mode: overlay;
  opacity: 0.9;
}

.accroche__degrade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--cream);
  /* Voile allege : il matait un degrade que le masque effacait deja presque.
     Maintenant que le degrade occupe toute la banniere, ce voile n'a plus
     qu'un role, garder l'encre du titre au-dessus du seuil de lisibilite sur
     la moitie gauche. Valeur verifiee par mesure de contraste, pas au juge :
     a 0,06 le pire contraste de la banniere reste tres au-dessus du seuil,
     et l'image garde ses couleurs. */
  opacity: 0.06;
}

/* ------------------------------------------------------------- le contenu */

.accroche__interieur {
  position: relative;
  z-index: 1;
}

/* Le titre est le seul endroit de la page ou le corps depasse l'echelle
   courante : 84px releves sur le modele contre 48px pour un titre de section.
   Le facteur reproduit cet ecart sans toucher au token partage. Il vaut 1,2 et
   non 1,31 (soit 77px et non 84px) parce que l'accroche francaise est nettement
   plus longue que celle du modele, trente-cinq caracteres sur la premiere ligne
   contre quinze : a 84px elle deborderait du conteneur de 1220px. */
.accroche__titre {
  --accroche-echelle: 1.2;
  max-width: 15.5em;
  font-size: calc(var(--t-accroche) * var(--accroche-echelle));
  letter-spacing: calc(var(--t-accroche-ls) * var(--accroche-echelle));
  /* Interligne en relatif plutot qu'en pixels : le rapport 1 des tokens ferait
     toucher les jambages de Hw Cigars d'une ligne a l'autre. */
  line-height: 1.05;
}

/* Les deux phrases sont des blocs : la coupure tombe exactement la ou elle
   tombe sur le site actuel, et se defait d'elle-meme quand la place manque. */
.accroche__ligne {
  display: block;
  /* Chaque phrase s'equilibre sur ses propres lignes quand elle se replie.
     Sans cela, a 768px, "Ayez l'esprit tranquille : je" tient sur une ligne et
     "pilote" reste seul sur la suivante. Amelioration progressive : les
     moteurs qui ignorent la propriete se replient sur le comportement normal. */
  text-wrap: balance;
}

/* Seconde ligne en Inter graisse 500 : c'est le contraste display / sans du
   site actuel, conserve tel quel. */
.accroche__ligne--sans {
  font-family: var(--font-sans);
  font-weight: 500;
}

/* Accent colore sur une PARTIE du titre seulement, comme le modele qui met en
   vert une partie seulement de son titre. Deux syntagmes sur cinq, pas une
   ligne entiere : au-dela l'accent cesse d'etre un accent.
   L'accroche est posee sur le degrade creme et rose : c'est un fond CLAIR, et
   des trois accents seul le vert y porte du texte. Le corail (2,3) et le
   mauve (2,2) y seraient illisibles, ils n'ont donc rien a faire ici. */
/* Pas de couleur d'accent sur "la finance" : le titre est d'une seule encre.
   La cesure entre les deux lignes est deja portee par le changement de
   caractere, serif Exposure pour la premiere, lineale pour la seconde. Une
   couleur en plus faisait redondance, et le vert sur le degrade sature virait
   au gris. Le span est conserve : c'est lui qui porte le changement de police. */
.accroche__accent {
  color: inherit;
}

.accroche__chapo {
  max-width: 33em;
  /* Les espacements de 30px releves sur le modele, arrondis au pas de l'echelle
     de base.css. */
  margin-top: var(--sp-6);
  /* Le modele pose sa phrase de soutien a 20px, un cran au-dessus du texte
     courant. base.css n'a pas de token pour ce niveau intermediaire : il est
     defini ici. A remonter dans base.css si une autre section en a besoin. */
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  /* Encre forte et non douce : le grain de la banniere fait varier le fond
     d'un pixel a l'autre, et l'encre douce tombait a 4,40 pour 1 sur les
     pixels les plus clairs, juste sous le seuil AA. L'encre forte remonte a
     6,6. Mesure faite sur le fond reellement peint, grain compris, en
     retenant le pire pixel de chaque ligne. */
  color: var(--ink-strong);
}

.accroche__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

/* Bouton un cran plus grand que la primitive de base.css : c'est la seule
   action de l'ouverture, elle doit peser autant que les 56px de haut releves
   sur le modele. */
.accroche__bouton {
  height: 56px;
  padding: 0 28px;
  font-size: var(--t-corps);
}

/* Mention posee a cote du bouton, a la place du second lien du modele
   ("Take a product tour") : Numbers n'a pas de produit a visiter en libre
   acces. La mention decrit le rendez-vous lui-meme, elle n'avance aucune
   promesse commerciale et aucun chiffre. */
.accroche__mention {
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
  /* Encre douce et non --grey-texte : selon la largeur de fenetre, la mention
     se retrouve sur la partie teintee du degrade, mesuree entre
     rgb(246, 226, 213) et rgb(249, 197, 200). Le gris n'y tient plus que 3,7
     a 4,4 pour 1, sous le seuil AA. Depuis l'ajout du grain, l'encre douce
     elle-meme tombait a 4,35 : on passe donc a l'encre forte, qui tient 6,4
     sur le pire pixel. Sa discretion vient de la taille, pas de la couleur. */
  color: var(--ink-strong);
}

/* ------------------------------------------------------------ adaptations */

@media screen and (max-width: 991px) {
  .section.accroche,
  .accroche {
    padding-top: 152px;
    padding-bottom: 88px;
  }

  /* base.css a deja redescendu toute l'echelle a ce palier : l'agrandissement
     propre a l'accroche se reduit d'autant. */
  .accroche__titre {
    --accroche-echelle: 1.08;
    max-width: none;
  }

  /* Le masque radial est exprime en pourcentage de l'element : sur une fenetre
     plus etroite, la meme geometrie ramene le corail beaucoup plus pres du
     texte. Le voile est donc epaissi d'autant pour garder le degrade au rang
     de fond. */
  .accroche__degrade {
    width: 72%;
  }

  .accroche__degrade::after {
    opacity: 0.10;
  }

  .accroche__chapo {
    max-width: 30em;
    font-size: 18px;
    line-height: 28px;
  }
}

@media screen and (max-width: 767px) {
  .section.accroche,
  .accroche {
    padding-top: 130px;
    padding-bottom: 64px;
  }

  .accroche__titre {
    --accroche-echelle: 1;
  }

  /* Il n'y a plus de colonne libre a droite : le degrade descend en bas de
     panneau, sous le contenu, plutot que de passer derriere le texte.
     Seule la FORME est redefinie, la couche de pied de la regle de base reste
     en place et continue d'eteindre le bas. La forme monte desormais vers son
     maximum aux deux tiers de la hauteur au lieu de le tenir jusqu'en bas :
     sans cela, le fondu de pied ne ferait que raboter la partie la plus forte
     du degrade et la couleur disparaitrait presque entierement de la fenetre
     etroite, la ou elle est justement la seule respiration du panneau. */
  .accroche__degrade {
    top: 44%;
    width: 100%;
    background-position: 60% 30%;
    --masque-forme: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.85) 24%, #000 48%);
  }

  /* Voile allege d'un cran par rapport aux 0,5 d'origine. Le fondu de pied
     retire deja au degrade son quart le plus sature ; conserver en plus le
     voile le plus epais de la page le reduisait a une trace. Le maximum du
     degrade reste mesure entre rgb(247,206,217) et rgb(249,232,225), donc
     toujours au-dessus de 8 pour 1 pour l'encre douce de la mention. */
  .accroche__degrade::after {
    opacity: 0.10;
  }

  .accroche__chapo {
    max-width: none;
    margin-top: var(--sp-5);
    font-size: 17px;
    line-height: 26px;
  }

  .accroche__actions {
    margin-top: var(--sp-5);
  }
}

@media screen and (max-width: 479px) {
  .section.accroche,
  .accroche {
    padding-top: 118px;
    padding-bottom: 52px;
  }

  .accroche__chapo {
    font-size: 16px;
    line-height: 25px;
  }

  .accroche__actions {
    gap: var(--sp-4);
  }

  /* Le bouton prend toute la largeur : c'est la cible tactile la plus sure sur
     une fenetre de 375px. */
  .accroche__bouton {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}