/* ==========================================================================
   WAKAME - Page « Le kaiten »

   Chargée par la seule route /kaiten (voir routes/pages.js), après tokens.css
   et wakame.css.

   Cette feuille ne redéclare rien de ce qui existe déjà : le tapis, les
   assiettes, les colonnes de prix et leurs étiquettes viennent de wakame.css -
   ce sont les mêmes objets qu'à l'accueil, pas des copies. Ce qui est ici, et
   qui n'est nulle part ailleurs :

     - LA SCÈNE, une grille en trois rangées où le tapis a ses propres cases :
       le rail du haut, la descente entre les deux colonnes, le rail du bas.
       Ces cases sont vides ; c'est /script/kaiten.js qui lit où elles sont
       pour tracer le circuit. Les masquer replie le circuit en tapis droit,
       ce que fait le point de rupture de 1000 px - c'est toute l'adaptation
       du tapis aux petits écrans ;

     - LES DEUX VIRAGES, qui ne sont ni des angles ni des quarts de cercle mais
       des SQUIRCLES : la courbure y monte puis redescend (voir /script/tapis.js).
       Leur ampleur n'est pas un réglage - c'est l'articulation de la latte qui
       la fixe, à 2,19 épaisseurs de recul sur chaque bras. Ils mordent donc
       dans la mise en page : c'est --kt-coin dans le coin haut droit de la
       colonne des prix, et le coin bas gauche du plateau. Les deux règles qui
       s'en servent sont signalées ;

     - LA CONSIGNE, calée dans le premier virage : c'est la seule case de la
       grille que le tapis ne traverse pas, et sa flèche n'a donc qu'un pas à
       faire vers la gauche pour le désigner ;

     - LA ZONE du simulateur : le plateau en pointillés où les assiettes prises
       viennent se poser, et l'addition en bas à droite.

   Comme le reste de la vitrine, les distances sont en --u (1 px de la maquette
   Figma) : la page suit les mêmes paliers d'échelle que l'accueil sur les
   grands écrans, sans règle supplémentaire.
   ========================================================================== */

.kt-page { background: var(--cream); }

/* --------------------------------------------------------------------------
   1. En-tête de page

   Le titre entre deux filets fermés par un losange, comme au carnet. Les
   filets prennent toute la place qui reste : le titre est donc centré quelle
   que soit sa longueur.
   -------------------------------------------------------------------------- */
.kt-head { padding-block: calc(120 * var(--u)) calc(120 * var(--u)); }
.kt-head__inner { display: flex; flex-direction: column; align-items: center; gap: calc(30 * var(--u)); }

.kt-orn {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 100%;
}
.kt-orn__filet {
  flex: 1;
  height: calc(3 * var(--u));
  border-radius: 3px;
  background: rgb(30 24 48 / .5);
}
/* Un carré posé sur la pointe : le losange du carnet. */
.kt-orn__losange {
  flex: none;
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  rotate: 45deg;
  border: calc(4 * var(--u)) solid var(--red);
}
.kt-head__titre { text-align: center; }
.kt-head__sub {
  max-width: calc(1700 * var(--u));
  text-align: center;
  font-size: var(--fs-48);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   2. La scène : les deux colonnes et les cases du tapis

   Rangées :  1  le rail du haut, sur toute la largeur
              2  les prix | la descente | le simulateur
              3  le rail du bas, de la descente au bord droit

   Le tapis lui-même est posé par dessus, en absolu : sa boîte est la scène
   entière, et c'est dans ce repère que /script/kaiten.js calcule le tracé.
   -------------------------------------------------------------------------- */
/* De quoi laisser le tapis sortir de la scène sans frôler la section suivante :
   les assiettes débordent du bandeau de quelques pixels. */
/* `overflow-x: clip` pour la même raison qu'en accueil (voir .wk-belt--droit
   dans wakame.css) : le circuit entre et sort hors champ, et sur téléphone le
   navigateur élargissait le cadre de mise en page jusqu'à la largeur du tracé,
   dézoomant la page à 79 % avec une bande morte à droite.

   La coupe est posée ici et non sur .wk-belt--circuit : la scène est en
   retrait des gouttières (20 px de chaque côté sur un écran de 390), couper
   à son bord arrêterait le tapis avant le bord de l'écran. Ce conteneur-ci
   fait toute la largeur : on coupe donc bien là où l'écran s'arrête.
   `clip` et non `hidden` pour ne pas rogner ce qui dépasse verticalement. */
.kt-scene-wrap {
  padding-bottom: calc(220 * var(--u));
  overflow-x: clip;
}

.kt-scene {
  position: relative;
  z-index: 0;              /* les couches du tapis se rangent dans cette scène */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--belt-h) minmax(0, 1.05fr);
  grid-template-rows: var(--belt-h) auto var(--belt-h);
  gap: var(--kt-gap);
}

.kt-scene {
  --kt-gap: calc(90 * var(--u));
  /* Place à laisser au virage. Ce n'est pas un réglage, c'est le dessin de la
     latte qui décide : son creux s'ouvre à 57° de l'axe, son nez couvre donc
     celui de la voisine jusqu'à 33° d'articulation et pas au-delà (voir
     ARTICULATION dans /script/tapis.js). Un maillon étant la corde du parcours,
     il faut PAS / (2·sin(16,5°)) de rayon, soit 2,19 épaisseurs de recul sur
     chaque bras. Tourner plus court rouvrirait le joint en coin.

     Le bord intérieur du bandeau passe donc à 2,19 - 0,5 épaisseur du rail, et
     rien ne doit se trouver dans ce quart de disque. La gouttière en occupe
     déjà une bonne part ; ce qui reste à réserver aux angles des deux colonnes
     est ce qu'il y a ci-dessous. */
  --kt-coin: calc(var(--belt-h) * 1.7);
}

.kt-rail--haut { grid-area: 1 / 1 / 2 / 4; }
.kt-consigne   { grid-area: 1 / 3 / 2 / 4; }
.kt-col--prix  { grid-area: 2 / 1 / 3 / 2; }
.kt-rail--mid  { grid-area: 2 / 2 / 3 / 3; }
.kt-col--simu  { grid-area: 2 / 3 / 3 / 4; }
.kt-rail--bas  { grid-area: 3 / 2 / 4 / 4; }

/* Les rails ne se voient pas : ce sont des repères de mise en page, le tapis
   qui les suit est peint par le script. Sans JavaScript, la scène est donc
   simplement aérée - il y manque le tapis, pas le contenu. */
.kt-rail { pointer-events: none; }
/* La descente doit être assez longue pour ses deux virages : 4,38 épaisseurs
   d'axe à axe (deux fois le recul, voir --kt-coin), dont il faut retirer les
   deux demi-rails et les deux gouttières qu'elle ne couvre pas elle-même.
   Faute de quoi les deux virages se marcheraient dessus - /script/tapis.js les
   raboterait alors à la moitié du bras, et le tapis tournerait plus court que
   les lattes ne s'articulent. */
.kt-rail--mid { min-height: calc(var(--belt-h) * 3.38 - var(--kt-gap) * 2); }

/* Le tapis couvre toute la scène. z-index: auto, et non la valeur héritée de
   .wk-belt : sans cela le tapis formerait son propre contexte d'empilement et
   ses assiettes ne pourraient plus passer AU DESSUS des colonnes, ni son
   bandeau EN DESSOUS. */
.kt-scene .wk-belt {
  position: absolute;
  inset: 0;
  z-index: auto;
}
/* Entre le bandeau (1) et les assiettes (3) : le contenu. Les assiettes lui
   passent donc dessus - elles débordent du bandeau de quelques pixels - et le
   bandeau passe dessous. */
.kt-col,
.kt-consigne { position: relative; z-index: 2; }

/* LA CONSIGNE, dans le premier virage.
   Elle occupe la case du haut à droite de la descente : la seule que le tapis
   ne traverse pas, puisqu'il tourne au milieu pour redescendre. Centrée sur la
   hauteur du rail, elle est donc à hauteur de bandeau, à côté du virage - et sa
   flèche, à gauche du texte, n'a qu'à pointer vers la gauche pour le désigner.
   Le retrait négatif la fait mordre sur la gouttière : le virage se creuse vers
   la gauche à cette hauteur, la place est libre et la flèche s'en approche. */
.kt-consigne {
  align-self: center;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  max-width: calc(820 * var(--u));
  /* La flèche s'arrête AVANT le bandeau : elle le désigne, elle n'entre pas
     dedans. Le retrait la ramène vers le virage, dont elle est autrement trop
     loin pour rien désigner - la case de droite commence bien après le sommet
     de la descente.

     186 unités : mesure faite sur la page, ce qui laisse la pointe à une petite
     soixantaine d'unités du bord du bandeau. À reprendre si le virage change
     d'ampleur, car c'est de lui que la pointe se rapproche (voir --kt-coin).

     Tout est en --u comme le virage : le retrait le suit à toutes les
     échelles. */
  margin-left: calc(-186 * var(--u));
  color: var(--red);
  font-family: var(--f-round);
  font-weight: 600;
  font-size: var(--fs-48);
  line-height: 1.25;
}
/* Le texte se centre sur la BASE de la flèche, pas sur son cadre.
   Une flèche n'est pas un bloc : elle part d'un texte et va vers son sujet.
   C'est donc son départ qui doit se trouver à hauteur de ligne, et non le
   milieu d'une boîte dont la pointe descend d'un quart de hauteur plus bas.

   `align-items: center` centre le cadre ; on redescend la flèche de ce qui
   sépare son milieu de sa base. Dans le viewBox 78 × 40, la base est en y = 5 :
   0,5 - 5/40 = 37,5 % de la hauteur. En pourcentage, donc juste à toutes les
   tailles de flèche - il y en a deux (voir le point de rupture de 640 px).

   `translate` et non une marge : c'est un décalage de dessin, la case de la
   flèche ne bouge pas et le texte reste où la grille le met. */
.kt-consigne__fleche {
  flex: none;
  width: calc(240 * var(--u));
  height: auto;
  translate: 0 37.5%;
}

.kt-col { display: flex; flex-direction: column; gap: calc(60 * var(--u)); }
.kt-col__head { display: flex; flex-direction: column; gap: calc(15 * var(--u)); }
.kt-col__head .accent { color: var(--red); }
.kt-col__head p { font-size: var(--fs-40); line-height: 1.5; }

/* PREMIER VIRAGE. Le bandeau descend en arrondi dans le coin haut droit de
   cette colonne. Il n'y mord que le tout début - la gouttière absorbe le
   reste - il suffit donc que le TEXTE s'arrête avant : les colonnes de prix,
   plus bas et plus à gauche, sont hors d'atteinte. */
.kt-col--prix .kt-col__head { padding-right: var(--kt-coin); }

/* Les colonnes de prix sont celles de l'accueil (partials/wakame-prix.ejs).
   Ici rien ne les encadre : elles s'alignent à gauche et remplissent la
   colonne. */
.kt-prix__cols { justify-content: flex-start; }

.kt-vide { font-size: var(--fs-48); opacity: .7; }

/* --------------------------------------------------------------------------
   3. Le simulateur

   Un plateau en pointillés, l'addition en bas à droite. Rien de plein : c'est
   une zone d'accueil, elle doit se lire comme une place libre et non comme une
   carte de plus.
   -------------------------------------------------------------------------- */

.kt-zone {
  /* LA GÉOMÉTRIE DU PLATEAU, en un seul endroit.

     Tout part de la case d'une assiette : son dessin, la ligne de prix
     dessous, et la hauteur fixe que les deux occupent ensemble. La hauteur de
     la surface s'en déduit pour un nombre ENTIER de rangées - c'est ce qui
     évite la barre de défilement qui ne défile que de deux pixels. */
  --kt-plate:  calc(160 * var(--u));   /* l'assiette posée               */
  --kt-case:   calc(212 * var(--u));   /* sa case, prix compris          */
  --kt-colonne: calc(158 * var(--u));  /* largeur mini d'une colonne     */
  --kt-inter:  calc(46 * var(--u));    /* entre deux rangées             */
  --kt-rangs: 3;                       /* rangées visibles sans défiler  */

  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(50 * var(--u));
  border: calc(6 * var(--u)) dashed rgb(30 24 48 / .3);
  border-radius: var(--r-panel);
  /* SECOND VIRAGE : le bandeau remonte dans le coin bas gauche du plateau, et
     ce coin doit épouser le sien - la gouttière entre les deux doit garder la
     même largeur d'un bout à l'autre du virage.

     UN ARRONDI NE PEUT PAS Y ARRIVER. Le virage du tapis est un SQUIRCLE : sa
     courbure monte de zéro à son maximum puis redescend (voir /script/tapis.js).
     `border-radius` trace un arc de cercle, donc une courbure CONSTANTE. Les
     deux courbes ne sont pas de la même famille : quel que soit le rayon, la
     gouttière se pince aux deux bouts du virage et se renfle au milieu.

     Mesuré sur la page, en balayant les rayons : 220 unités est le moins
     mauvais, et il laisse encore 4,9 unités d'écart. La règle des arrondis
     concentriques donnerait 263 (le bord intérieur du bandeau tourne au plus
     serré sur 173, plus une gouttière de 90) : c'est juste au milieu du virage,
     et faux partout ailleurs - 10,6 d'écart. D'où 220, qui répartit l'erreur au
     lieu de la concentrer.

     C'est la valeur de repli. La suite se joue en @supports, plus bas. */
  border-bottom-left-radius: calc(220 * var(--u));
  background: rgb(255 247 247 / .45);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

/* LE COIN QUI SUIT VRAIMENT LE VIRAGE.
   `corner-shape` sait tracer autre chose qu'un arc : une SUPERELLIPSE, dont la
   courbure monte et redescend comme celle du squircle. Ce ne sont toujours pas
   les mêmes courbes - une superellipse n'est pas l'offset d'un raccord
   progressif - mais elles se ressemblent assez pour que l'écart tombe de 4,9 à
   2,2 unités, mesure faite en balayant (exposant, recul) sur la page. La
   gouttière se lit alors comme constante.

   Le recul est bien plus grand qu'un rayon de cercle - 400 unités contre 220.
   C'est le propre de ce coin : il commence à tourner tôt et loin, et ne se
   resserre qu'au milieu, exactement comme le bandeau qu'il longe.

   Sous @supports parce que le repli ne peut pas être le même : un navigateur
   qui ignorerait `corner-shape` mais lirait `border-radius: 400` tracerait un
   arc deux fois trop ample - 26 unités d'écart, bien pire que les 220 d'avant.
   Les deux déclarations vont donc ensemble ou pas du tout. */
@supports (corner-shape: squircle) {
  .kt-zone {
    border-bottom-left-radius: calc(400 * var(--u));
    /* `squircle` est le nom que CSS donne à superellipse(2) - le même mot que
       pour le virage du tapis, et à peu près la même intention. */
    corner-bottom-left-shape: squircle;
  }
}
/* Une fois garnie, la zone n'est plus une invitation : le pointillé s'apaise. */
.kt-zone.is-garnie { border-color: rgb(30 24 48 / .15); background: rgb(255 247 247 / .7); }

/* LA SURFACE. Sa hauteur ne dépend pas de ce qu'on y pose : elle vaut un nombre
   entier de rangées, et au delà on défile.

   Ce n'est pas qu'une question de mise en page. Le tapis épouse la scène, et
   /script/tapis.js retrace son parcours dès que la boîte change : un plateau
   qui s'allonge d'une rangée à chaque assiette prise ferait se recharger le
   tapis - assiettes en route comprises - au moment précis où l'on vient d'en
   attraper une. Un plateau a une taille, comme au restaurant.

   La hauteur est calculée et non réglée : un plateau haut « à peu près trois
   rangées » laisse un fond de quelques pixels que le contenu dépasse, et une
   barre apparaît pour ne défiler que de cela. */
.kt-zone__plateau {
  position: relative;
  height: calc(var(--kt-rangs) * var(--kt-case)
             + (var(--kt-rangs) - 1) * var(--kt-inter));
}

.kt-zone__liste {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;   /* arrivé en bas, la page ne part pas avec */
  /* Une grille et non un enroulement libre : les assiettes se rangent en
     colonnes régulières, et `grid-auto-rows` fixe la rangée au pixel - c'est
     de là que vient le compte entier de rangées. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kt-colonne), 1fr));
  grid-auto-rows: var(--kt-case);
  align-content: start;
  gap: var(--kt-inter) calc(20 * var(--u));
  /* De quoi laisser respirer l'ombre des assiettes des deux bords : ce qui
     défile est aussi ce qui rogne, et la dernière colonne y perdait la sienne.
     En marge horizontale seulement - une marge en hauteur rognerait la
     troisième rangée et ramènerait la barre qui ne défile que de trois pixels. */
  padding-inline: calc(16 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgb(30 24 48 / .25) transparent;
}

/* Le message d'accueil couvre la surface sans la remplir : les assiettes se
   rangent au même endroit qu'il soit là ou non. */
.kt-zone__vide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding-inline: calc(60 * var(--u));
  text-align: center;
  font-size: var(--fs-48);
  line-height: 1.35;
  opacity: .5;
  pointer-events: none;
}
/* `hidden` ne suffit pas quand une règle donne un display à l'élément. */
.kt-zone__vide[hidden] { display: none; }

/* Une assiette posée : le dessin, vidé de son sushi, et son prix dessous.
   Transparente tant qu'elle n'est pas arrivée - sa place est réservée dès le
   clic, l'assiette en vol vient s'y poser (voir /script/kaiten.js).

   Hauteur fixe, celle de sa case : le dessin d'assiette est très légèrement
   plus haut que large (203/204), et laisser la case suivre cette hauteur-là
   suffisait à décaler les rangées d'une fraction de pixel - qui s'accumule. */
.kt-puce {
  height: var(--kt-case);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
}
.kt-puce.is-in { opacity: 1; transition: opacity .18s linear; }
.kt-puce .wk-plate { --plate-size: var(--kt-plate); }
/* Ombre plus courte que sur le tapis : ces assiettes-là sont POSÉES, pas
   portées. Celle de la grille tarifaire, longue et décalée, les faisait
   flotter à cette taille - et se faisait rogner dans la dernière colonne. */
.kt-puce .wk-plate__dish,
.kt-puce .wk-plate--photo {
  filter: drop-shadow(calc(4 * var(--u)) calc(5 * var(--u)) calc(9 * var(--u)) rgb(30 24 48 / .22));
}

/* LE PRIX D'UNE ASSIETTE POSÉE : une mention, pas une étiquette.
   La pastille rouge pleine est celle de la GRILLE TARIFAIRE, où elle annonce
   un tarif et n'apparaît que trois fois. Ici il y en a une par assiette prise :
   à cinq ou six, elles criaient toutes plus fort que le total, qui est pourtant
   le seul chiffre qu'on vient chercher. On garde donc le même élément - c'est
   le même prix - en le rendant à sa place dans la hiérarchie. */
.kt-puce .wk-pricetag {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgb(30 24 48 / .6);
  font-size: calc(34 * var(--u));
  font-weight: 600;
}

/* LE PIED : ce que le plateau totalise, et de quoi le vider. Un filet le
   sépare de la surface - il dit que le compte n'est pas une assiette de plus.

   TOUT EST RANGÉ À DROITE, en un seul groupe. Le bord gauche du pied n'est pas
   une place : le coin bas gauche du plateau est creusé par le second virage
   (voir .kt-zone), et ce qu'on y pose flotte dans la découpe, à l'écart de la
   ligne de lecture. Le bouton y était seul en bas d'un panneau qui se lit à
   droite. La commande se tient donc contre son chiffre - on vide le plateau
   là où on lit ce qu'il coûte - et la découpe reste vide, ce qu'elle demande. */
.kt-zone__pied {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(40 * var(--u));
  margin-top: calc(40 * var(--u));
  padding-top: calc(36 * var(--u));
  border-top: calc(3 * var(--u)) solid rgb(30 24 48 / .12);
}

/* Vider le plateau : un bouton rond, juste avant le total.
   Désactivé tant que le plateau est vide : il s'efface alors au lieu de rester
   là à ne rien faire - mais garde sa place, pour que le total ne saute pas à la
   première assiette posée. C'est aussi pourquoi l'écart qui l'en sépare est
   plus large que d'ordinaire : le chiffre se lit souvent, le bouton se clique
   une fois. */
.kt-reset {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(90 * var(--u)); height: calc(90 * var(--u));
  padding: 0;
  border: calc(3 * var(--u)) solid rgb(30 24 48 / .2);
  border-radius: 50%;
  background: none;
  color: rgb(30 24 48 / .55);
  cursor: pointer;
  transition: opacity .3s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), scale .2s var(--ease);
}
.kt-reset svg { width: 52%; height: 52%; }
.kt-reset:hover, .kt-reset:focus-visible { color: var(--red); border-color: var(--red); scale: 1.08; }
.kt-reset[disabled] { opacity: 0; pointer-events: none; }

.kt-total {
  display: flex;
  align-items: baseline;
  gap: calc(20 * var(--u));
  font-family: var(--f-round);
  font-size: var(--fs-48);
}
.kt-total__label { font-weight: 600; opacity: .75; }
.kt-total__valeur {
  font-weight: 700;
  font-size: var(--fs-64);
  color: var(--red);
  /* Les chiffres ne doivent pas danser d'un ajout à l'autre. */
  font-variant-numeric: tabular-nums;
}

/* L'assiette en vol : sortie du tapis, posée sur une couche à elle le temps du
   trajet - elle traverse la page sans se soucier de ce qu'elle survole. Sous
   l'en-tête, qui reste au-dessus de tout.

   Calée sur la PAGE et non sur la vue, contrairement à la chute de l'accueil :
   celle-ci sort de l'écran, celle-là vise le plateau, qui est dans la page.
   Fixée à la vue, l'assiette suivait le défilement pendant son vol pendant que
   sa cible, elle, restait en place. */
.kt-vol {
  position: absolute;
  z-index: 90;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Réserver
   -------------------------------------------------------------------------- */
.kt-book__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
  text-align: center;
}
.kt-book__line {
  font-size: var(--fs-48);
  color: var(--cream);
  margin-bottom: calc(20 * var(--u));
}

/* --------------------------------------------------------------------------
   5. Adaptatif  (mêmes points de rupture que la landing page)
   -------------------------------------------------------------------------- */

/* Le circuit demande deux colonnes côte à côte. En dessous, elles s'empilent :
   la descente et le rail du bas disparaissent, et le parcours n'a plus qu'une
   ligne droite à suivre - le tapis de l'accueil. Rien à changer côté script,
   il ne fait que lire les rails qui restent. */
@media (max-width: 1000px) {
  .kt-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--belt-h) auto auto auto;
    gap: calc(110 * var(--u));
  }
  .kt-rail--haut { grid-area: 1 / 1 / 2 / 2; }
  /* Le plateau passe SOUS le tapis, les prix en dessous : empilé, ce qui
     compte est que l'assiette qu'on vient de prendre reste visible en même
     temps que le tapis d'où elle vient. Les deux colonnes ne peuvent plus se
     lire de front, le voisinage remplace le côte-à-côte. */
  .kt-consigne   { grid-area: 2 / 1 / 3 / 2; }
  .kt-col--simu  { grid-area: 3 / 1 / 4 / 2; }
  .kt-col--prix  { grid-area: 4 / 1 / 5 / 2; }
  .kt-rail--mid, .kt-rail--bas { display: none; }

  /* Plus de virage, donc plus de coin à réserver. */
  .kt-col--prix .kt-col__head { padding-right: 0; }
  /* Plus de virage à épouser : le coin redevient un arrondi ordinaire. */
  .kt-zone {
    border-bottom-left-radius: var(--r-panel);
    corner-bottom-left-shape: round;
  }
  .kt-prix__cols { justify-content: center; }
  /* Plus de virage à désigner : le tapis est droit et passe au dessus. La
     consigne se range donc sous lui, à droite, et sa flèche se retourne pour
     pointer vers le haut - c'est le même dessin, à l'envers. */
  .kt-consigne { justify-self: end; margin-left: 0; }
  /* Retournée, sa base passe en bas : le décalage qui la met à hauteur de
     ligne change donc de sens (`scale` s'applique avant `translate`). */
  .kt-consigne__fleche { scale: 1 -1; translate: 0 -37.5%; }
}

@media (max-width: 640px) {
  .kt-head__sub { font-size: var(--fs-40); }
  .kt-consigne { font-size: var(--fs-40); }
  .kt-consigne__fleche { width: calc(130 * var(--u)); }
  /* Plateau plus étroit : des assiettes plus petites, et une rangée de moins -
     sur un téléphone, trois rangées prendraient tout l'écran avant qu'on ait
     rien pris. */
  .kt-zone {
    --kt-plate: calc(140 * var(--u));
    --kt-case: calc(190 * var(--u));
    --kt-colonne: calc(150 * var(--u));
    --kt-rangs: 2;
    padding: calc(45 * var(--u));
  }
  .kt-zone__vide { padding-inline: calc(45 * var(--u)); }
  .kt-book__inner .wk-btn { width: 100%; }
}