/* Titre de l'accueil : toujours sur 2 lignes.
   Sa taille d'origine (40 px sur mobile, --fs-title sur ordinateur) baisse juste assez pour que sa ligne la plus
   longue tienne : --title-fit = 40 px / largeur de cette ligne à 40 px, avec 1,4 % de marge. « Real connections, »
   (FR, EN, DE) : 363,7 px → 0,1085. « Conexiones reales, » (ES) : 388,4 px → 0,1015. « 더 간단하게! » (KO, Noto Sans
   KR) : 206 px → 0,1915.
   Mobile : la colonne fait la largeur de l'écran moins 2 × 30 px.
   Ordinateur : l'écran moins 2 × 60 px de marge, 136 px d'écart et 288 px de téléphone (la largeur de l'ancienne
   maquette jusqu'à 1 210 px, plus que la nouvelle), plus 17 px pour une barre de défilement. Au-delà de 1 090 px
   (1 156 px en espagnol), --fs-title tient seule. */
.title {
  --title-fit: 0.1085;
}

.title:lang(es) {
  --title-fit: 0.1015;
}

.title:lang(ko) {
  --title-fit: 0.1915;
}

@media screen and (max-width: 899px) {
  .title {
    font-size: min(40px, calc((100vw - 60px) * var(--title-fit)));
  }
}

@media screen and (min-width: 900px) {
  .title {
    font-size: min(var(--fs-title), calc((100vw - 561px) * var(--title-fit)));
  }
}

/* Ligne des lieux (« Bars, Cafés… ») : sur une ligne dès que possible sur mobile.
   Sa taille d'origine (main.css : 14,4 à 17,3 px) baisse juste assez pour que la ligne tienne dans la colonne (l'écran
   moins 2 × 30 px), sans passer sous 13 px : sous le seuil de sa langue, elle garde sa taille et passe à la ligne,
   comme avant. Coefficient = taille / largeur de la ligne à cette taille, avec 0,5 % de marge (Chromium, Firefox et
   WebKit mesurent la même largeur à 0,05 % près) ; seuil = 60 px + 13 px / coefficient. Espagnol : 336,7 px à
   14,42 px → 0,0426, seuil 366 px. Français : 304,8 px → 0,0470, seuil 337 px. Norvégien : 290,2 px → 0,0494,
   seuil 324 px. Allemand, anglais et coréen tiennent sur une ligne dès 280 px. À recalculer si le texte change
   (tests/e2e/home-places.spec.ts). */
@media screen and (min-width: 366px) and (max-width: 899px) {
  .landing-line.bars-line:lang(es) {
    font-size: min(clamp(0.9rem, 0.855rem + 0.19vw, 1.08rem), calc((100vw - 60px) * 0.0426));
  }
}

@media screen and (min-width: 337px) and (max-width: 899px) {
  .landing-line.bars-line:lang(fr) {
    font-size: min(clamp(0.9rem, 0.855rem + 0.19vw, 1.08rem), calc((100vw - 60px) * 0.047));
  }
}

@media screen and (min-width: 324px) and (max-width: 899px) {
  .landing-line.bars-line:lang(no) {
    font-size: min(clamp(0.9rem, 0.855rem + 0.19vw, 1.08rem), calc((100vw - 60px) * 0.0494));
  }
}

/* Maquette ordinateur (tel-web-<langue>.webp, 1280 × 2295) : plus haute que l'ancienne (1280 × 1995). Sa largeur est
   réduite pour que le téléphone garde sa hauteur d'avant : cadre de 1 848 px sur 1 280 dans l'ancienne, de 7 298 px
   sur 4 451 dans l'original de la nouvelle, soit (1848 / 1280) / (7298 / 4451) = 0,8805.
   Sur un écran bas, elle est encore réduite pour que son haut reste sous le sélecteur de langue : le téléphone y
   atteint le coin haut droit, là où se trouve le sélecteur (bas à 62 px). Centrée dans la hauteur de l'écran moins le
   footer (55 px), l'image garde son haut à 67 px au moins si elle mesure au plus 100vh - 190 px de haut. */
.bodyContentRightFrame img {
  width: min(calc(var(--width-phone-img) * 0.8805), calc((100vh - 190px) * 1280 / 2295));
}