/* ============================================================
   Échelle des titres — correction du passage à Unbounded
   15/09
   ------------------------------------------------------------
   Pourquoi ce fichier existe : les tailles de titres avaient été
   calées sur Newsreader. Unbounded n'a pas le même encombrement
   optique, donc les mêmes valeurs en rem produisent des titres
   nettement plus gros.

   Mesuré dans le navigateur, pas estimé :
     hauteur d'x / em   Newsreader 0.449   Unbounded 0.566
     largeur d'une même chaîne       2266px          3376px

   Unbounded paraît donc 26% plus grosse à taille égale, et occupe
   49% de largeur en plus. Facteur retenu : 0.78, appliqué aux
   quatre familles de titres d'affichage.

   Les line-height du site sont tous sans unité : ils suivent la
   taille et n'ont rien à corriger ici.

   Chargée en dernier. Pour tout annuler : retirer le <link> des
   six pages et supprimer ce fichier.
   ============================================================ */

/* --- Titres de section ------------------------------------------------
   Un jeton unique alimente toutes les .home-section-title du site :
   une seule ligne suffit, inutile de viser les sélecteurs.
   Origine, luxury.css : clamp(2.3rem, 1.35rem + 4.2vw, 6rem) */
:root{
  --home-title: clamp(1.8rem, 1.05rem + 3.28vw, 4.7rem);
}

/* --- Logotype du hero --------------------------------------------------
   Origine, editorial.css : clamp(4rem, 7.3vw, 8rem) */
.hero-logotype{
  /* Corps abaisse de 5.7vw a 4.7vw le 16/09 : a 5.7vw, faire tenir
     « pensees pour durer. » sur une ligne demandait une boite de 936px,
     qui recouvrait le visage du portrait. */
  font-size: clamp(2.9rem, 4.7vw, 5.4rem);
  /* La contrainte d'origine, max-width: 8.5ch, etait calee sur Newsreader.
     Le ch d'Unbounded est plus large, mais pas assez : mesure a 1440,
     la boite faisait 388px alors que « Des cuisines » en reclame 464 et
     « pensees pour durer. » 730. Le titre partait donc en quatre lignes,
     avec « Des » seul, au lieu des deux voulues par le <br>.

     En em, la contrainte suit la taille du titre a toutes les largeurs.

     Valeur mesuree DANS LE DOM, pas au canevas : canvas.measureText ne
     resolvait pas Unbounded et sous-estimait de 26%. La ligne la plus
     longue reclame 11.22em une fois le crenage applique. */
  max-width: 11.4em;
}

/* --- Titres des panneaux « commission » --------------------------------
   Origine, editorial.css : clamp(2.6rem, 4.8vw, 5.8rem)
   Le crénage d'origine, -0.04em, était calé sur un serif. Sur Unbounded,
   qui est déjà très fermée, il colle les contreformes. Desserré. */
.commission-panel-copy h3{
  font-size: clamp(2rem, 3.75vw, 4.5rem);
  letter-spacing: -0.025em;
}

/* --- Titres des trois manières d'intervenir ----------------------------
   Origine, luxury.css : clamp(1.8rem, 1.2rem + 2vw, 3.5rem) */
.home-practice-copy h3{
  font-size: clamp(1.4rem, 0.94rem + 1.56vw, 2.7rem);
}

/* --- Reprise des paliers mobiles ---------------------------------------
   Cette feuille charge après editorial.css : sans ces reprises, les
   règles de base ci-dessus écraseraient les tailles mobiles d'origine,
   qui ont la même spécificité.

   Les deux titres ne basculent pas au même endroit. Reprendre les bornes
   exactes d'editorial.css, sinon on agrandit au lieu de réduire dans la
   bande entre les deux : c'est ce qui s'est produit au premier essai,
   le titre de panneau passait de 41.6px à 46px à 490px de large. */

/* Origine, editorial.css ligne 279 : clamp(3.3rem, 14vw, 5.5rem) */
@media (max-width: 820px){
  .hero-logotype{ font-size: clamp(2.6rem, 10.9vw, 4.3rem); }
  /* En etroit, imposer 9.3em ferait deborder : on rend la main au
     conteneur, le titre se coupe ou il peut. */
  .hero-logotype{ max-width: 100%; }
}

/* Origine, editorial.css ligne 300 : clamp(2.7rem, 12vw, 4rem) */
@media (max-width: 480px){
  .commission-panel-copy h3{ font-size: clamp(2.1rem, 9.4vw, 3.1rem); }
}

/* --- Filtres du hero allèges -------------------------------------------
   16/09. Trois couches assombrissaient la photo :
     filter      saturate(0.48) contrast(1.08) brightness(0.7)
     horizontal  ink-950 a 0%, 0.91 a 18%, 0.22 a 68%
     vertical    0.36 en haut, transparent a 42%, 0.68 en bas

   Le texte occupe la colonne de gauche et le media ne commence qu'a 41%
   de l'ecran : la couverture n'a donc besoin d'etre forte QUE sur le bord
   gauche du media, la ou les deux zones se touchent. Partout ailleurs
   elle ne protegeait rien et mangeait le portrait. */
.hero-immersive-media img{
  filter: saturate(0.66) contrast(1.05) brightness(0.86);
}

.hero-immersive-media::after{
  background:
    linear-gradient(90deg,
      var(--ink-950) 0%,
      rgba(8, 9, 10, 0.78) 16%,
      rgba(8, 9, 10, 0.06) 62%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(8, 9, 10, 0.2) 0%,
      transparent 40%,
      rgba(8, 9, 10, 0.52) 100%);
}

/* En etroit, le media passe en fond plein derriere le texte : la
   couverture doit rester forte, c'est le seul cas ou le texte est
   reellement pose sur la photo. */
@media (max-width: 820px){
  .hero-immersive-media img{ filter: saturate(0.6) brightness(0.72); }
}