/* ==========================================================================
   WAKAME - Page « La carte »

   Prolonge la direction artistique de la landing page : mêmes jetons
   (--u, --cream, --red…, définis dans wakame.css, chargée avant celle-ci),
   mêmes familles et mêmes rythmes de marge. Rien n'est redéfini ici, seuls
   les blocs propres à la carte le sont.

   La page est une feuille posée sur un fond sombre, encadrée d'un filet à
   motifs d'angle - la carte qu'on tend au client, pas une section de plus.
   ========================================================================== */

/* Le site est crème, cette page est sombre : sans cette ligne, le fond du
   corps déborde sous le pied de page en une bande claire. Cette feuille de
   style n'étant chargée que par /menu, la landing page n'est pas touchée. */
body.wakame { background: var(--ink); }

.wk-carte-page {
  /* Format de la carte. Une carte de menu est un objet, pas une section de
     page : elle a sa propre largeur et son propre rapport hauteur/largeur.
     C'est --container (la largeur de section de la landing page) qui la
     rendait large et paysage - il n'a rien à faire ici.
     --carte-l  largeur de la feuille
     --carte-h  hauteur minimale, en proportion de la largeur (1,44 ≈ le
                portrait de l'ébauche) */
  --carte-l: 860px;
  --carte-h: 144cqw;
  /* Air autour de la feuille : elle est posée sur la page, pas encastrée. */
  --carte-air: clamp(24px, 3.5vw, 56px);

  /* flow-root plutôt que block : la marge de la feuille doit rester à
     l'intérieur. Un padding ici ne conviendrait pas, le bandeau rouge de bas de
     page étant lui aussi dans ce bloc - l'air se retrouvait sous le bandeau au
     lieu d'entourer la feuille. */
  display: flow-root;
  background: var(--ink);
}

/* --------------------------------------------------------------------------
   1. La feuille
   -------------------------------------------------------------------------- */
.wk-sheet {
  position: relative;
  display: flex;
  width: min(100% - clamp(16px, 3vw, 48px) * 2, var(--carte-l));
  margin: var(--carte-air) auto;
  background: var(--paper);
  /* la feuille est posée sur le crème du body : ombre encrée, cf. --sh-ink */
  box-shadow: 0 18px 40px var(--sh-ink);

  /* La feuille devient le repère de tout ce qu'elle contient : le cadre et
     ses ornements se dimensionnent en cqw, donc en proportion de la carte
     elle-même. Un ornement réglé en vw grossissait avec la fenêtre alors que
     la carte, elle, ne bougeait plus. */
  container-type: inline-size;

  /* ------ Réglages du cadre : tout part d'ici ------
     --fc  côté du motif d'angle (le motif est dessiné dans une case de 160),
           en proportion de la carte
     --fs  épaisseur du filet, exprimée dans les unités du motif (10 = export)
     --fm  retrait du cadre par rapport au bord de la feuille
     --fcol couleur du filet
     --fjonc  où un filet vient mourir, en unités du motif, mesuré depuis
           l'angle. 105 place ce bout sur l'axe du trait perpendiculaire du
           méandre, qui l'enterre. La marge n'est que d'une demi-épaisseur de
           chaque côté : ne pas y toucher sans relire le tracé dans menu.ejs.
     Les deux suivantes sont dérivées, il n'y a pas à y toucher :
     --fk  ce que vaut 1 unité du motif, en pixels
     --fbout  où commence un filet, en pixels

     L'épaisseur du trait et sa distance au bord n'apparaissent pas ici : elles
     ne vivent qu'à un seul endroit, l'espace de 160 unités du dessin, et sont
     donc forcément les mêmes pour les motifs et pour les filets.

     Déclarées ici, sur la feuille, et pas sur .wk-frame : le contenu en a
     besoin lui aussi pour se tenir à l'écart du cadre, et une variable ne
     descend qu'à ses propres descendants, jamais à un frère. Les unités cqw
     sont résolues chez qui les utilise - tous descendants de la feuille, donc
     tous calés sur sa largeur. */
  --fc:    clamp(38px, 9.5cqw, 82px);
  --fs:    8;
  --fm:    clamp(14px, 2.6cqw, 30px);
  --fjonc: 105;
  --fcol:  var(--red);
  --fk:    calc(var(--fc) / 160);
  --fbout: calc(var(--fjonc) * var(--fk));
}

.wk-sheet__inner {
  /* Le contenu se tient à l'écart du cadre : retrait du cadre, plus la case
     du motif d'angle, plus une respiration. */
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Une carte reste une carte même quand elle est peu remplie ; au-delà, elle
     s'allonge avec son contenu. */
  min-height: var(--carte-h);
  padding: calc(var(--fm) + var(--fc) + clamp(10px, 1.6vw, 30px))
           calc(var(--fm) + var(--fc) * .75 + clamp(10px, 1.8vw, 34px));
}

/* --------------------------------------------------------------------------
   2. Le cadre
   Motifs d'angle à taille fixe (ils ne se déforment jamais) et filets qui
   s'étirent : le cadre suit la hauteur du contenu.

   Le trait extérieur du motif est interrompu par deux trous qui font tout le
   dessin (détail dans menu.ejs) : un filet qui les traverserait transformerait
   le méandre en grille. Les filets s'arrêtent donc avant, à --fbout de l'angle.

   Raccorder deux traits sans que ça se voie est le vrai sujet. Trois choses ne
   marchent pas, chacune mesurée :

   - les rabouter bord à bord : le calcul a beau être juste (écart : 0 px), la
     jointure tombe sur une position fractionnaire (221,891 px), et chacun des
     deux lisse son bord sur la même colonne de pixels. Deux bords à demi
     couverts composés en alpha ne redonnent pas un pixel plein : trait clair ;
   - les faire se recouvrir sur la longueur : plus de trou, mais le trait est
     plus dense là où il est peint deux fois. En pleine ligne droite, ça se voit
     comme un désalignement des bords ;
   - mélanger une boîte CSS et un tracé SVG : le navigateur cale la boîte sur la
     grille de pixels, jamais le tracé. Le bras pesait 6,16 d'encre, le filet
     5,70, pour une épaisseur pourtant identique. D'où des filets en SVG eux
     aussi.

   Ce qui marche : ne jamais peindre deux fois le même bord, et placer la
   jonction là où elle ne peut pas se voir. Les deux bras du motif sont donc
   retirés du tracé et tracés par les filets, qui viennent mourir sur l'axe du
   trait perpendiculaire du méandre. Ce bout est enterré sous du rouge plein, et
   il tombe dans un angle chargé plutôt qu'au milieu d'un bord net.
   -------------------------------------------------------------------------- */
.wk-frame {
  position: absolute;
  inset: var(--fm);
  pointer-events: none;
}

/* Motifs et filets partagent le même trait : même couleur, même épaisseur -
   exprimée dans les unités du dessin, donc toujours 10/160 de la case. */
.wk-frame__corner,
.wk-frame__bar {
  position: absolute;
  overflow: visible;              /* un filet épaissi ne doit pas être rogné */
  fill: none;
  stroke: var(--fcol);
  stroke-width: var(--fs);
}

.wk-frame__corner {
  width: var(--fc);
  height: var(--fc);
  /* Bout carré, comme à l'export : c'est lui qui mène les deux bras du méandre
     jusqu'au bord de leur case, là où les filets les reprennent. */
  stroke-linecap: square;
}

/* Les quarts de tour sont appliqués dans le SVG, pas ici : voir menu.ejs. */
.wk-frame__corner--tl { top: 0;    left: 0;  }
.wk-frame__corner--tr { top: 0;    right: 0; }
.wk-frame__corner--br { bottom: 0; right: 0; }
.wk-frame__corner--bl { bottom: 0; left: 0;  }

/* Chaque filet trace tout son côté, bras des motifs compris, et s'arrête sur
   l'axe du trait perpendiculaire du méandre, qui enterre son bout.

   Son viewBox est étiré sans conserver les proportions : l'étirement ne porte
   que sur la longueur, la largeur restant celle d'une case de 160 unités. Le
   trait vaut donc 10 unités et passe à 5 unités du bord, ici comme dans les
   motifs, et il est rendu par le même moteur des deux côtés. */
.wk-frame__bar { stroke-linecap: butt; }

/* En travers, un filet occupe une case entière, comme un motif, et s'accroche
   au même bord : c'est ce qui garantit l'alignement (voir menu.ejs). Dans le
   sens de la longueur, il est étiré d'une jonction à l'autre - un <svg> étant
   un élément remplacé, poser left ET right ne l'étirerait pas, d'où la largeur
   donnée explicitement. */
.wk-frame__bar--top,
.wk-frame__bar--bottom {
  left: var(--fbout);
  width: calc(100% - var(--fbout) * 2);
  height: var(--fc);
}

.wk-frame__bar--left,
.wk-frame__bar--right {
  top: var(--fbout);
  height: calc(100% - var(--fbout) * 2);
  width: var(--fc);
}

.wk-frame__bar--top    { top: 0; }
.wk-frame__bar--bottom { bottom: 0; }
.wk-frame__bar--left   { left: 0; }
.wk-frame__bar--right  { right: 0; }

/* --------------------------------------------------------------------------
   3. Titre de la carte
   -------------------------------------------------------------------------- */
.wk-carte-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 70px);
}

.wk-carte-head__title {
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.1;
}

.wk-carte-head__sub {
  font-size: var(--fs-48);
  color: var(--red);
}

/* --------------------------------------------------------------------------
   4. Sections et produits
   -------------------------------------------------------------------------- */
/* Carte vide : le message occupe la feuille plutôt que de flotter en haut. */
.wk-carte__vide {
  margin-block: auto;
  font-size: var(--fs-64);
  text-align: center;
  color: var(--red);
  padding-block: clamp(40px, 8vw, 120px);
}

.wk-carte__cat + .wk-carte__cat { margin-top: calc(130 * var(--u)); }

.wk-carte__cathead {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  margin-bottom: calc(60 * var(--u));
}

/* Pas de white-space: nowrap ici : le nom d'une section est saisi librement
   depuis /admin/menu, et un intitulé un peu long (« Les udons (soupe de pâtes
   japonaises) ») élargissait toute la feuille au-delà de l'écran. Il passe donc
   à la ligne quand il ne tient pas - ce qui n'arrive qu'en écran étroit, les
   titres tenant sur une ligne à la largeur de la carte. */
.wk-carte__cathead .wk-title { color: var(--red); }

/* Filet qui prolonge le titre jusqu'au bord, comme un menu imprimé. */
.wk-carte__rule {
  flex: 1;
  height: calc(4 * var(--u));
  min-width: calc(50 * var(--u));
  background: repeating-linear-gradient(
    to right,
    var(--brown) 0 calc(12 * var(--u)),
    transparent calc(12 * var(--u)) calc(24 * var(--u))
  );
  opacity: .45;
}

/* Une seule colonne : à la largeur d'une carte, deux colonnes ne laissent plus
   assez de place pour un nom de plat et son prix sur la même ligne. */
.wk-carte__list {
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--u));
}

.wk-dish { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }

/* Nom, points de conduite, prix : la ligne classique d'une carte. */
.wk-dish__row {
  display: flex;
  align-items: baseline;
  gap: calc(20 * var(--u));
}

.wk-dish__nom {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: 1.25;
}

.wk-dish__dots {
  flex: 1;
  min-width: calc(40 * var(--u));
  height: calc(3 * var(--u));
  translate: 0 calc(-4 * var(--u));
  background: radial-gradient(circle, var(--brown) 40%, transparent 45%) repeat-x;
  background-size: calc(16 * var(--u)) calc(3 * var(--u));
  opacity: .45;
}

.wk-dish__prix {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--fs-48);
  color: var(--red);
  white-space: nowrap;
}

.wk-dish__sub {
  max-width: 52ch;
  font-style: italic;
  line-height: 1.35;
  opacity: .75;
}

/* Mention de bas de carte (prix en francs), comme sur un menu imprimé :
   collée en bas de la feuille, avec sa marge minimale quand la carte est
   longue (le padding, lui, ne se laisse pas absorber par `margin-top: auto`). */
.wk-carte__note {
  margin-top: auto;
  padding-top: clamp(30px, 5vw, 90px);
  text-align: center;
  font-family: var(--f-ui);
  font-size: var(--fs-40);
  opacity: .6;
}

/* --------------------------------------------------------------------------
   5. Bas de page : renvoi kaiten, puis appel à réserver
   Deux blocs séparés, et pas deux boutons côte à côte : le bandeau rouge
   renvoie vers le kaiten, la réservation a sa propre section, centrée et en
   dernier. La section reprend le fond de la page, seul le texte s'éclaircit.
   -------------------------------------------------------------------------- */
.wk-carte-book__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
  text-align: center;
}

/* Un cran au-dessus des titres de section : c'est l'appel principal. */
.wk-carte-book__title { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; }

/* --------------------------------------------------------------------------
   6. Adaptatif  (mêmes points de rupture que la landing page)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Le motif d'angle garde sa place ; c'est la respiration qui se resserre. */
  .wk-carte__cathead { gap: calc(25 * var(--u)); margin-bottom: calc(45 * var(--u)); }
  .wk-carte__cat + .wk-carte__cat { margin-top: calc(90 * var(--u)); }
  /* Les deux appels prennent toute la largeur : ils sont seuls sur leur ligne. */
  .wk-band__inner .wk-btn,
  .wk-carte-book__inner .wk-btn { width: 100%; }
}