/* Belote — habillage.
   Tapis vert et cartes blanches : c'est l'image qu'on a d'une table de belote,
   et s'en écarter ferait perdre une seconde à chaque coup d'œil.

   TOUT EST EN DOM, jamais en canevas : une carte est un bouton, donc elle se
   désactive, reçoit le focus et s'annonce. Les cartes interdites par la règle
   sont grisées — c'est la fonction principale de cette feuille. */

.game-belote .game-stage{
  background:
    radial-gradient(ellipse 110% 70% at 50% 20%, rgba(90,190,120,.20), transparent 62%),
    linear-gradient(170deg, #17492F 0%, #103322 52%, #0A2418 100%);
}
@media(min-width:720px){
  .game-belote .game-stage{border-color:rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(8,30,20,.45)}
}

/* LA TAILLE DES CARTES EST UN SEUL NOMBRE, et il est ici.
   Elles faisaient 54 px au plus, et c'était trop petit pour lire un rang d'un
   coup d'œil — or on lit sa main à chaque pli.

   Ce qui a permis de les agrandir sans rien casser, c'est une mesure : huit
   cartes de 54 px plus leurs écarts font 460 px, donc la main passait DÉJÀ sur
   deux lignes en dessous de cette largeur, c'est-à-dire sur tout téléphone.
   Les agrandir ne fait donc pas déborder : ça remplit mieux les deux lignes
   qu'on avait de toute façon. Sur un écran large, huit cartes de 64 px et
   leurs écarts font 540 px et tiennent sur une seule ligne. */
.bl{
  --bl-carte:clamp(56px, 16vw, 78px);
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  padding:8px 8px calc(6px + env(safe-area-inset-bottom));
  gap:6px;color:#EAF5EE;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}

/* ---------- bandeau ---------- */
.bl-haut{display:flex;gap:8px;width:100%;max-width:560px;flex:none}
.bl-stat{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5px 4px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
}
.bl-stat small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.bl-stat b{font-size:16px;font-variant-numeric:tabular-nums}
/* « ♠ Marcel » tient dans la case ; « ♠ Marguerite » déborderait. On rétrécit
   plutôt que de couper un prénom au milieu. */
#bl-atout{font-size:clamp(11px,3vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bl-stat b.rouge{color:#FF8A80}
.bl-aide-btn{
  flex:none;width:34px;border-radius:10px;font:600 15px/1 inherit;color:inherit;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
}

/* ---------- la table ----------
   Une croix : partenaire en haut, adversaires sur les côtés, le tapis au
   milieu. C'est la disposition d'une vraie table, et elle porte à elle seule
   l'information la plus importante du jeu — qui est avec qui. */
/* LA TABLE PREND LA LARGEUR QU'ON LUI DONNE, jusqu'à 720 px : c'est ce qui
   ÉCARTE les deux joueurs de côté, qui se serraient contre le tapis alors
   qu'il restait du vert inutilisé à droite et à gauche. Les cartes jouées,
   elles, ne bougent pas — elles se placent depuis le centre. */
.bl-table{
  position:relative;flex:1;min-height:0;width:100%;max-width:720px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto 1fr auto;
  align-items:center;justify-items:center;
  gap:4px;
}
.bl-place{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 8px;border-radius:10px;
  border:1px solid transparent;
  font-size:11px;
}
/* Le joueur dont c'est le tour s'éclaire : sans ça, on ne sait pas qui on
   attend, et le jeu a l'air figé. */
.bl-place.actif{background:rgba(255,235,150,.14);border-color:rgba(255,235,150,.45)}
.bl-nord{grid-column:2;grid-row:1}
.bl-ouest{grid-column:1;grid-row:2}
.bl-est{grid-column:3;grid-row:2}
.bl-nom{
  display:flex;align-items:center;gap:5px;
  font-size:12px;letter-spacing:.01em;font-weight:600;opacity:.95;
}
/* L'INITIALE, AUX COULEURS DE SON CAMP. Trois prénoms écrits pareil se
   confondent du coin de l'œil ; une pastille dit « avec toi » ou « contre
   toi » sans qu'on ait à lire. */
.bl-rond{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;
  font:800 11px/1 inherit;text-decoration:none;
  color:#0F2A1C;
}
.bl-rond.nous{background:#74D99F;box-shadow:0 0 0 2px rgba(116,217,159,.35)}
.bl-rond.eux{background:#F0A0A0;box-shadow:0 0 0 2px rgba(240,160,160,.32)}

/* ---------- ce qu'ils disent ----------
   Une bulle ne porte aucune information : tout ce qui compte est ailleurs.
   Elle sert à ce qu'il y ait quelqu'un en face. D'où sa discrétion — elle
   apparaît, elle s'en va, et elle ne pousse rien du doigt. */
.bl-bulle{
  position:absolute;z-index:3;
  max-width:130px;padding:4px 9px;border-radius:12px;
  background:#FBF8F1;color:#1B2430;
  font:600 11px/1.25 inherit;text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  opacity:0;transform:translateY(4px) scale(.9);
  transition:opacity .16s, transform .16s;
  pointer-events:none;white-space:nowrap;
}
.bl-bulle.vue{opacity:1;transform:none}
.bl-bulle:empty{display:none}
/* Chacune sort du côté de sa place, pour qu'on sache qui parle sans lire. */
.bl-nord .bl-bulle{top:100%;margin-top:4px}
.bl-ouest .bl-bulle{left:100%;margin-left:6px}
.bl-est .bl-bulle{right:100%;margin-right:6px}
.bl-place{position:relative}
/* ---------- les mains des autres, face cachée ----------
   Des dos DESSINÉS plutôt qu'un compteur : à une table, on voit d'un coup
   d'œil qui a encore du jeu. Ils se chevauchent, comme des cartes tenues en
   éventail — et les huit tiennent ainsi dans la largeur d'une place.
   Le dos est rayé : un aplat uni passerait pour un rectangle de décor. */
.bl-dos{display:flex;line-height:0}
.bl-dos-carte{
  display:block;flex:none;
  border-radius:4px;
  background:
    repeating-linear-gradient(45deg, #2C4E8A 0 4px, #24406F 4px 8px);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}

/* L'ORIENTATION SUIT LA PLACE, comme à une vraie table.
   EN FACE, le partenaire tient ses cartes droites : on voit des dos debout,
   côte à côte.
   SUR LES CÔTÉS, on tient ses cartes EN TRAVERS — vues d'ici, leurs dos sont
   couchés et empilés de haut en bas. Les dessiner droits, comme au premier
   jet, donnait trois joueurs assis face à nous, ce qui n'a aucun sens autour
   d'une table carrée.

   Le chevauchement est calculé sur le PETIT côté dans les deux cas : c'est
   lui qui décide de la place occupée, et huit cartes doivent tenir. */
.bl-dos.couche{flex-direction:row}
.bl-dos.couche .bl-dos-carte{width:calc(var(--bl-carte) * .86);aspect-ratio:5/7}
.bl-dos.couche .bl-dos-carte + .bl-dos-carte{margin-left:calc(var(--bl-carte) * -.53)}

.bl-dos.debout{flex-direction:column;align-items:center}
.bl-dos.debout .bl-dos-carte{width:calc(var(--bl-carte) * 1.18);aspect-ratio:7/5}
.bl-dos.debout .bl-dos-carte + .bl-dos-carte{margin-top:calc(var(--bl-carte) * -.52)}

/* CELUI QUI A PRIS porte une pastille dorée. C'est ce qu'on cherche au milieu
   d'un pli — « qui défend quoi ? » — et le bandeau seul obligeait à remonter
   les yeux en haut de l'écran. */
.bl-place.preneur{background:rgba(240,180,41,.13);border-color:rgba(240,180,41,.45)}
.bl-place.preneur .bl-nom::after{content:' ★';color:#F0B429}
.bl-place.preneur.actif{background:rgba(240,180,41,.24)}

/* ---------- le tapis ----------
   Chaque joueur pose SA carte à SA place autour du centre. Empiler les quatre
   cartes au même endroit ferait gagner de la place et perdre l'essentiel : on
   ne saurait plus qui a joué quoi, donc pourquoi le pli est gagné. */
.bl-tapis{
  grid-column:2;grid-row:2;
  position:relative;width:100%;height:100%;
  display:grid;place-items:center;
}
/* RIEN SOUS LES CARTES. Deux tentatives, deux échecs, et la leçon est la
   même : un dégradé radial garde toujours un BORD, aussi doux soit-il. On le
   voit, donc on le juge, et une tache sombre au milieu d'un tapis ne se
   justifie par rien.
   Le tapis a déjà son propre dégradé, du plus clair en haut au plus sombre en
   bas. Il suffit — c'est lui qui donne la profondeur, sans dessiner quoi que
   ce soit. */

.bl-carte-pli{position:absolute}
@keyframes bl-de-sud  {from{opacity:0;transform:translateY(90px) scale(.85)}}
@keyframes bl-de-nord {from{opacity:0;transform:translateY(-90px) scale(.85)}}
@keyframes bl-de-ouest{from{opacity:0;transform:translateX(-110px) scale(.85)}}
@keyframes bl-de-est  {from{opacity:0;transform:translateX(110px) scale(.85)}}
#bl-pli0 .bl-carte{animation:bl-de-sud  .26s ease-out backwards}
#bl-pli2 .bl-carte{animation:bl-de-nord .26s ease-out backwards}
#bl-pli1 .bl-carte{animation:bl-de-ouest .26s ease-out backwards}
#bl-pli3 .bl-carte{animation:bl-de-est  .26s ease-out backwards}

/* LA DERNIÈRE POSÉE. Les quatre cartes restent à la place de leur joueur —
   c'est ainsi qu'on sait qui a joué quoi — mais alors la carte qui vient
   d'arriver peut se trouver n'importe où autour du centre, et l'on ne suit
   plus l'ordre du pli. Un liseré clair, et un demi-pixel de relief, disent
   « celle-ci est la dernière » sans rien bouger. */
.bl-carte-pli.derniere .bl-carte{
  box-shadow:0 0 0 2px rgba(255,255,255,.62), 0 6px 16px rgba(0,0,0,.42);
}

/* La carte qui remporte le pli : un cerclage d'or, le temps qu'on la voie. */
.bl-carte-pli.gagnante .bl-carte{
  box-shadow:0 0 0 3px #F0B429, 0 4px 14px rgba(0,0,0,.45);
  z-index:2;
}

/* Le ramassage. Le délai laisse le temps de VOIR le pli complet : c'est
   pendant cette demi-seconde qu'on comprend pourquoi on l'a gagné ou perdu. */
.bl-tapis.ramasse .bl-carte-pli{
  /* LE DÉLAI EST CE QU'ON A POUR VOIR LE PLI COMPLET. Six dixièmes : en
     dessous, la quatrième carte arrive et le pli part déjà — on ne voit
     jamais les quatre ensemble, donc jamais pourquoi il est gagné. Le
     ramassage lui-même dure 0,42 s, et le tout tient dans la seconde qui
     sépare deux plis. */
  transition:transform .42s .6s cubic-bezier(.4,0,.7,.4), opacity .42s .6s;
  opacity:0;
}
.bl-tapis.ramasse.vers-0 .bl-carte-pli{transform:translateY(150px) scale(.7)}
.bl-tapis.ramasse.vers-2 .bl-carte-pli{transform:translateY(-150px) scale(.7)}
.bl-tapis.ramasse.vers-1 .bl-carte-pli{transform:translateX(-180px) scale(.7)}
.bl-tapis.ramasse.vers-3 .bl-carte-pli{transform:translateX(180px) scale(.7)}
/* LES CARTES JOUÉES SE PLACENT PAR RAPPORT AU CENTRE, pas par rapport aux
   bords du tapis. Avec des pourcentages, élargir la table pour écarter les
   joueurs écartait AUSSI les quatre cartes, et le pli cessait d'être un pli :
   quatre cartes éparpillées aux quatre coins ne se lisent plus ensemble.
   On les décale donc d'une largeur de carte depuis le milieu, quelle que soit
   la taille du tapis.

   PAR LA MARGE, ET NON PAR `transform` : c'est `transform` qui emporte le pli
   vers son vainqueur au ramassage, et l'utiliser ici écraserait l'animation. */
.bl-carte-pli{margin:0}
#bl-pli0{margin-top:calc(var(--bl-carte) * 1.15)}
#bl-pli2{margin-top:calc(var(--bl-carte) * -1.15)}
#bl-pli1{margin-left:calc(var(--bl-carte) * -1.15)}
#bl-pli3{margin-left:calc(var(--bl-carte) * 1.15)}
.bl-retourne{position:absolute;opacity:.95}
.bl-retourne.vide{display:none}
/* Au second tour, la retourne a été refusée par tout le monde : on le montre
   plutôt que de la laisser croire encore disponible. */
.bl-retourne.refusee{opacity:.4;filter:grayscale(.6)}

/* ---------- ce que la table annonce ----------
   AU MILIEU, ET EN GROS. C'était une ligne de douze pixels sous le tapis,
   entre la table et la main : l'endroit où l'œil ne va jamais pendant un pli.
   On lisait « Maurice ramasse » trois secondes trop tard, ou pas du tout.
   Le centre du tapis est libre — les quatre cartes se posent sur ses bords —
   et c'est précisément là que l'on regarde. */
.bl-mot{
  /* AU BAS DU TAPIS, ET PLUS AU MILIEU — une correction, pas un recul.
     Posé au centre, il RECOUVRAIT les cartes jouées : les quatre se placent à
     une largeur de carte du milieu, et une pastille de trois cents pixels les
     enjambe. On voyait « Jeanne prend à ♣ » et plus du tout la carte
     d'entame — donc plus moyen de comprendre pourquoi seul le pique était
     jouable. Le message cachait précisément l'information dont il fallait
     disposer pour lire le sien.
     En bas du tapis il reste grand, centré, au milieu du jeu — et il ne passe
     jamais devant une carte. */
  /* Au-dessus des cartes jouées, qui montent maintenant jusqu'à 4 pour
     s'empiler dans l'ordre de jeu. */
  position:absolute;z-index:9;
  left:50%;bottom:0;transform:translate(-50%,0);
  margin:0;max-width:min(88%, 320px);text-align:center;
  padding:7px 16px;border-radius:14px;
  font:600 clamp(13px,3.6vw,18px)/1.3 inherit;
  color:#FFFDF6;
  background:rgba(8,32,20,.62);
  box-shadow:0 3px 14px rgba(0,0,0,.35);
  opacity:0;transition:opacity .18s, transform .18s;
  pointer-events:none;
}
.bl-mot.plein{opacity:1}
/* Plus besoin de cas particulier pour la retourne : le message est déjà bas,
   donc sous elle. Un seul emplacement, aucun état à tenir. */

/* ---------- l'annonce de la prise ----------
   ON MONTRE L'ÉVÉNEMENT, PAS SEULEMENT L'ÉTAT. « ♣ Jeanne » s'affichait dans
   le bandeau et y restait toute la donne : impossible de rater l'information,
   impossible aussi de voir le MOMENT où elle est apparue. On joue donc la
   prise — le signe d'atout grandit au milieu du tapis, la place du preneur
   s'allume — puis tout s'efface et le bandeau reprend son rôle de mémoire. */
.bl-prise{
  position:absolute;z-index:8;
  left:50%;top:50%;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.bl-prise[hidden]{display:none}
.bl-prise-signe{
  font:700 calc(var(--bl-carte) * 1.5)/1 inherit;
  color:#F6F1E4;
  text-shadow:0 4px 18px rgba(0,0,0,.7), 0 0 26px rgba(240,180,41,.35);
}
.bl-prise-signe.rouge{color:#FF9C8D}
.bl-prise-qui{
  font:700 calc(var(--bl-carte) * .30)/1.2 inherit;
  color:#FFFDF6;letter-spacing:.02em;text-align:center;
  padding:3px 11px;border-radius:999px;
  background:rgba(8,32,20,.72);
  box-shadow:0 3px 14px rgba(0,0,0,.45);
}
/* Grandir, tenir, s'en aller — et le tout en un seul jeu d'images, pour que
   la fin de l'animation soit garantie même si une minuterie glisse. */
.bl-prise.montre .bl-prise-signe{animation:bl-prise-signe 1.3s ease-out both}
.bl-prise.montre .bl-prise-qui{animation:bl-prise-qui 1.3s ease-out both}
@keyframes bl-prise-signe{
  0%{opacity:0;transform:scale(.3) rotate(-14deg)}
  22%{opacity:1;transform:scale(1.12) rotate(3deg)}
  34%{transform:scale(1) rotate(0)}
  74%{opacity:1}
  100%{opacity:0;transform:scale(1.25)}
}
@keyframes bl-prise-qui{
  0%{opacity:0;transform:translateY(10px)}
  26%{opacity:1;transform:translateY(0)}
  74%{opacity:1}
  100%{opacity:0}
}
/* LA PLACE DU PRENEUR PULSE LE TEMPS DE L'ANNONCE. Elle porte déjà l'étoile
   de `preneur` pendant toute la donne — un état ; ici on marque l'instant, et
   sous un autre nom, sinon l'éclat en s'éteignant emporterait l'étoile. */
.bl-place.annonce, .bl-main.annonce{
  animation:bl-annonce 1.3s ease-out both;
}
@keyframes bl-annonce{
  0%,100%{box-shadow:none}
  16%{box-shadow:0 0 0 3px #F0B429, 0 0 26px rgba(240,180,41,.6)}
  70%{box-shadow:0 0 0 2px rgba(240,180,41,.7), 0 0 18px rgba(240,180,41,.4)}
}

/* ---------- les cartes ---------- */
.bl-carte{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
  width:var(--bl-carte);
  aspect-ratio:5/7;
  padding:0;border-radius:7px;cursor:pointer;
  /* Un très léger dégradé et un liseré clair : une carte en aplat pur a l'air
     d'une étiquette, pas d'un carton. */
  background:linear-gradient(160deg, #FFFDF8 0%, #F6F0E4 100%);
  color:#1B2430;
  border:1px solid #C9C2B4;
  box-shadow:0 2px 7px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.9);
  /* Le rang se cale sur la LARGEUR DE LA CARTE, pas sur celle de l'écran :
     deux cartes de même taille doivent porter le même chiffre, quelle que
     soit la fenêtre. */
  font:700 calc(var(--bl-carte) * .40)/1 inherit;
  gap:calc(var(--bl-carte) * .04);
}
.bl-carte.rouge{color:#C62828}
/* PAS D'INDEX DANS LE COIN, finalement. Je l'avais ajouté pour le cas des
   cartes en éventail, où l'on ne voit que les coins — sauf que la main ne se
   chevauche pas ici : les cartes sont posées côte à côte, en entier. L'index
   ne servait donc à rien et faisait lire le rang DEUX FOIS, une fois dans le
   coin et une fois au milieu. Une carte qui répète son propre nom a l'air
   fausse sans qu'on sache dire pourquoi.
   Un grand rang, un grand signe, rien d'autre. */
.bl-carte u{display:none}
.bl-carte b{font-weight:800;font-size:1.02em;line-height:1}
.bl-carte i{font-style:normal;font-size:1.22em;line-height:1}
.bl-carte:hover:not(:disabled){transform:translateY(-4px)}
.bl-carte:focus-visible{outline:none;box-shadow:0 0 0 3px #FFD54F}

/* LA CARTE INTERDITE : grisée, et sourde. C'est ce qui permet à quelqu'un qui
   ne connaît pas les obligations de la belote de jouer sans se tromper — et
   d'apprendre la règle en regardant lesquelles s'éteignent. */
.bl-carte.morte{
  /* ON LES ÉTEINT, ON NE LES REPEINT PAS. Un fond gris-vert posé par-dessus
     leur donnait la couleur du tapis : elles cessaient d'être des cartes, et
     l'on ne lisait plus le rang du tout — alors qu'on en a besoin pour
     comprendre POURQUOI elles sont interdites.
     Un simple dégrisement garde la carte lisible et dit clairement qu'elle
     est hors-jeu. */
  filter:grayscale(.65) brightness(.74);
  opacity:.8;box-shadow:none;cursor:default;
}

/* ---------- la main ---------- */
.bl-main{
  display:flex;gap:4px;flex:none;flex-wrap:wrap;justify-content:center;
  /* 8 x 78 + 7 x 4 = 652 : la largeur qu'il faut pour garder UNE ligne sur
     un grand écran. Au-delà la main se plie en deux, ce qui n'a rien de
     gênant — c'est même ainsi qu'on tient ses cartes. */
  width:100%;max-width:660px;min-height:calc(var(--bl-carte) * 1.4);
  align-items:flex-end;
}
.bl-main .bl-carte{transition:transform .1s}

/* LA CARTE QUI ARRIVE vient du centre de la table, là où se trouve le paquet.
   Elle ne surgit pas sur place : c'est ce déplacement qui fait lire « on
   distribue » plutôt que « l'écran a changé ».
   `backwards` est indispensable — sans lui, une carte qui attend son tour de
   décalage s'affiche d'abord à sa place finale, puis saute au point de
   départ. On la verrait clignoter. */
@keyframes bl-arrive{
  from{opacity:0;transform:translateY(-120px) scale(.7) rotate(-8deg)}
  to{opacity:1;transform:none}
}
.bl-carte.neuve{animation:bl-arrive .3s ease-out backwards}

/* Une distribution animée est une DÉCORATION : qui demande moins de
   mouvement ne doit pas la subir. La carte apparaît alors simplement. */
@media(prefers-reduced-motion:reduce){
  /* L'annonce reste affichée, sans grandir : c'est l'information qui compte,
     le mouvement n'était qu'un moyen de la faire remarquer. */
  .bl-prise.montre .bl-prise-signe, .bl-prise.montre .bl-prise-qui,
  .bl-place.annonce, .bl-main.annonce{animation:none}
  .bl-carte.neuve{animation:none}
  .bl-carte:hover:not(:disabled){transform:none}
  .bl-carte-pli .bl-carte{animation:none}
  .bl-tapis.ramasse .bl-carte-pli{transition:opacity .2s .45s;transform:none}
  .bl-bulle{transition:none}
}

/* ---------- les enchères ---------- */
.bl-encheres{
  display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:center;
  width:100%;max-width:560px;
}
.bl-encheres[hidden]{display:none}
.bl-ench{
  padding:9px 14px;border-radius:10px;cursor:pointer;
  font:600 13px/1 inherit;color:#EAF5EE;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
}
.bl-ench:hover{background:rgba(255,255,255,.18)}
.bl-ench.fort{background:#F0B429;border-color:#F0B429;color:#1B2430}
.bl-ench.couleur{font-size:20px;padding:6px 16px;background:#FBF8F1;color:#1B2430;border-color:#C9C2B4}
.bl-ench.couleur.rouge{color:#C62828}

.bl-aide{
  margin:0;flex:none;text-align:center;font-size:11.5px;color:#DDEEE3;opacity:.55;
  min-height:1.2em;
}

/* Sur un écran court, ce sont les quatre cartes du tapis qui manquent de
   place : posées en croix, elles demandent deux fois leur hauteur. On rend
   donc les cartes un peu plus petites plutôt que de les laisser se
   chevaucher au milieu. */
@media(max-height:620px){
  .bl{--bl-carte:clamp(50px, 13vw, 62px)}
  .bl-aide{display:none}
  .bl-place{padding:2px 6px}
}
@media(max-height:520px){
  .bl{--bl-carte:clamp(44px, 11vw, 54px)}
}