/* Carte NEKTAR — feuille A4 unique (menu + vins au verre)
   La feuille est dessinée à taille fixe (1050 × 1484 px = proportions A4).
   - à l'écran : elle est agrandie/réduite pour remplir la largeur (zoom = net) ;
   - à l'impression : elle fait exactement une page A4 ;
   - --s (taille du texte) et --pad (espacement) sont calculés par ajuster.js
     pour que tout tienne toujours sur la page, quel que soit le nombre d'articles. */

@font-face {
  font-family: "EB Garamond";
  src: url("polices/EBGaramond.woff2") format("woff2");
  font-weight: 400 800;
  font-display: block;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("polices/CormorantGaramond.woff2") format("woff2");
  font-weight: 300 700;
  font-display: block;
}

:root {
  --fond: #2a3244;          /* Pantone 19-4024 TCX « Dress Blues » */
  --fond-clair: #2a3244;
  --or: #ddb547;           /* doré officiel NEKTAR */
  --or-trait: #ddb547;
  --texte: #f6f3ee;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body {
  margin: 0;
  background: var(--fond);
}

/* ---------- Écran : la feuille remplit la largeur, centrée ---------- */
.ecran {
  display: flex;
  justify-content: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.feuille {
  --s: 1;          /* échelle du texte, ajustée par ajuster.js */
  --pad: 0px;      /* espace ajouté entre les articles, ajusté par ajuster.js */
  --z: 1;          /* zoom d'affichage, ajusté par ajuster.js */
  zoom: var(--z);
  position: relative;
  flex: none;
  width: 1050px;
  height: 1484px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 50px 62px 52px;
  background: var(--fond);
  color: var(--texte);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  transition: opacity .2s;
}
/* masquée le temps du calcul (seulement si JavaScript est actif) */
.js .feuille:not(.prete) { opacity: 0; }

/* cadre doré */
.feuille::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px solid var(--or-trait);
  pointer-events: none;
}

/* ---------- En-tête ---------- */
.entete {
  position: relative;
  flex: none;
  text-align: center;
  height: 118px;
}
.entete h1 {
  margin: 8px 0 0;
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-weight: 600;
  font-size: 80px;
  line-height: 1;
  letter-spacing: .15em;
  margin-right: -.15em;
  text-transform: uppercase;
  color: var(--or);
}
.entete h1::after {
  content: "";
  display: block;
  width: 58px;
  height: 2.5px;
  margin: 18px auto 0;
  background: var(--or-trait);
}
.logo {
  position: absolute;
  top: -10px;
  right: -14px;
  width: 112px;
  height: 112px;
}

/* ---------- Zone des articles : prend toute la hauteur disponible ---------- */
.contenu {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.section {
  margin: calc(var(--s) * 18px + var(--pad)) 0 calc(var(--s) * 2px);
  text-align: center;
  font-weight: 500;
  font-size: calc(var(--s) * 19px);
  text-transform: uppercase;
  letter-spacing: .3em;
  margin-right: -.3em;
  color: var(--or);
}

.articles { list-style: none; margin: 0; padding: 0; }

.article {
  padding: calc(var(--s) * 13px + var(--pad)) 0 calc(var(--s) * 14px + var(--pad));
  border-bottom: 2px solid var(--or-trait);
}
.article:last-child { border-bottom: 0; }

.ligne {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.nom {
  flex: 1 1 auto;
  margin: 0;
  white-space: nowrap;       /* nom + allergènes toujours sur UNE ligne */
  font-weight: 500;
  font-size: calc(var(--s) * 32px);
  line-height: 1.15;
  color: var(--or);
}
.prix {
  flex: none;
  white-space: nowrap;
  font-weight: 500;
  font-size: calc(var(--s) * 31px);
  line-height: 1.15;
  color: var(--or);
  font-variant-numeric: lining-nums;
}
.prix .sep { margin: 0 .2em; }

.desc {
  margin: calc(var(--s) * 6px) 0 0;
  max-width: 79%;
  font-size: calc(var(--s) * 21px);
  line-height: 1.32;
  letter-spacing: .012em;
  color: var(--texte);
}

/* ---------- Icônes allergènes ---------- */
.icos {
  display: inline-flex;
  gap: .5em;
  margin-left: .6em;
  vertical-align: -.1em;
}
.ico svg {
  display: block;
  height: .95em;
  width: auto;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico svg .plein { fill: var(--or); stroke: none; }
.ico svg text { fill: var(--or); stroke: none; font: 600 11px "EB Garamond", serif; }

.note {
  margin: calc(var(--s) * 14px) 0 0;
  text-align: center;
  font-style: italic;
  font-size: calc(var(--s) * 19px);
}

/* ---------- Légende (toujours sur une ligne, en bas) ---------- */
.legende {
  flex: none;
  margin-top: 22px;
  --l: 1;          /* échelle de la légende, ajustée si beaucoup d'allergènes */
}
.legende h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--or);
}
.legende h2::before, .legende h2::after {
  content: ""; flex: 1; height: 2px; background: var(--or-trait);
}
.legende h2 span { margin-right: -.32em; }
.legende ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  gap: calc(var(--l) * 14px);
}
.legende li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--l) * 8px);
  white-space: nowrap;
  font-size: calc(var(--l) * 22px);
}
.legende .ico svg { height: calc(var(--l) * 48px); stroke-width: 1.3; }

/* ---------- Impression : exactement une page A4 ---------- */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: var(--fond); }
  .ecran { display: block; padding: 0; }
  .feuille {
    zoom: .75590551 !important;   /* 1050 px -> 210 mm */
    opacity: 1 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}