/* ═══════════════════════════ L'étiquette nutritionnelle ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`) : une mise en page
 * d'affiche n'a rien à faire dans le chemin critique du reste du site.
 *
 * ── Une échelle de A à E, quatre styles qui claquent ──
 *
 * Le contenu et la structure ne bougent pas ; chaque style a sa palette et sa police. Les
 * premiers styles (blanc d'emballage, kraft) étaient jugés fades (Fred, 7 oct. 2026) : ils ont
 * cédé la place à des fonds francs, et l'échelle de A à E — cinq pastilles du vert au rouge, la
 * note de la personne en grand, dans une plaque — est devenue le héros de l'affiche.
 * - **Fluo** : un jaune acide, Anton pour le prénom, une étiquette blanche, des pourcentages rouges.
 * - **Rose** : un rose bonbon, une étiquette crème, Inter en gras.
 * - **Cobalt** : un bleu électrique, du crème dessus, des pourcentages bleus.
 * - **Noir** : le tableau en négatif, une seule couleur chaude pour les pourcentages.
 *
 * Toutes les polices sont servies par nous (point 2) : Inter par `theme.css`, Anton ici.
 * **« Nutri-Score » est une marque déposée : ni le mot, ni le logo.** L'échelle est une parodie
 * qui porte le prénom de la personne.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : elles sont en clair,
 * toutes ici, en tête, et nulle part ailleurs. `[data-style]` ne nomme pas `.nu` exprès, pour
 * que les échantillons du formulaire se colorent avec les mêmes variables.
 */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --n-fond : le papier de l'affiche ; --n-texte : ce qu'on écrit directement dessus (le prénom,
   le slogan) ; --n-papier : le fond de l'étiquette et de la plaque ; --n-encre : le texte, les
   filets et les barres épaisses ; --n-accent : la pastille des pourcentages ; --n-sur : ce qu'on
   écrit sur l'accent. --n-sa … --n-se : les cinq pastilles de l'échelle, du vert au rouge, et
   --n-lettre la lettre qu'elles portent (sombre sur les cinq, toutes assez claires pour la lire). */
[data-style], .nu-notes {
  --n-sa: #20b25d; --n-sb: #9bd23c; --n-sc: #ffd30f; --n-sd: #ff9a1f; --n-se: #ff5240; --n-lettre: #101010;
}
[data-style="Fluo"] { --n-fond: #e9ff3d; --n-texte: #0e0e0e; --n-papier: #ffffff; --n-encre: #0e0e0e; --n-accent: #d4113f; --n-sur: #ffffff; }
[data-style="Rose"] { --n-fond: #ff4f9a; --n-texte: #14060e; --n-papier: #fff3f8; --n-encre: #14060e; --n-accent: #b0004f; --n-sur: #ffffff; }
[data-style="Cobalt"] { --n-fond: #2230ff; --n-texte: #fffdf2; --n-papier: #fffdf2; --n-encre: #0a0a2a; --n-accent: #2230ff; --n-sur: #ffffff; }
[data-style="Noir"] { --n-fond: #131313; --n-texte: #f4f1ea; --n-papier: #131313; --n-encre: #f4f1ea; --n-accent: #ff6a45; --n-sur: #131313; }

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur (le cadre est le conteneur de
 * requête), donc le même dessin tient de l'aperçu de 360 px au 70 × 100 imprimé. Les rapports
 * vendus vont de 1,333 (30 × 40) à 1,5 (40 × 60) : l'écart s'absorbe dans la hauteur des cinq
 * lignes, jamais dans une taille de texte qui changerait avec le format. */
.nu {
  --fond: var(--n-fond); --texte: var(--n-texte);
  --n-police: "Inter"; --n-nom: "Inter"; --n-poids: 900; --n-t: 1;
  display: flex; flex-direction: column;
  padding: 6cqw 6cqw 4.4cqw;
  font-family: var(--n-police), system-ui, sans-serif;
  line-height: 1.15;
}
.nu :where(p, ul) { margin: 0; padding: 0; }
.nu[data-style="Fluo"], .nu[data-style="Cobalt"] { --n-nom: "Anton"; --n-poids: 400; }

/* La tête : un slogan, puis le prénom en titre. Le prénom tient sur **une** ligne et se resserre
   (`--ech`, posé par le serveur puis ajusté au pixel par le script) : c'est ce qui permet de
   mesurer un débordement, un texte qui se replie ne débordant jamais. */
.nu__tete { flex: none; margin-bottom: 2cqw; }
.nu__slogan { font-size: 1.9cqw; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.nu__nom {
  font-family: var(--n-nom), system-ui, sans-serif; font-weight: var(--n-poids); text-transform: uppercase;
  white-space: nowrap; font-size: calc(13.5cqw * var(--ech, 1)); line-height: 1.06; letter-spacing: -.01em; margin-top: 0; padding-top: .24em;
}
.nu[data-style="Fluo"] .nu__nom, .nu[data-style="Cobalt"] .nu__nom { letter-spacing: .01em; font-size: calc(16.5cqw * var(--ech, 1)); }

/* La plaque de la note : l'échelle de A à E, la lettre de la personne agrandie et cernée, son
   prénom suivi de « -Score » et un verdict qui n'a rien d'officiel. Posée sur du papier, elle se
   lit sur n'importe quel fond. Cinq pastilles du vert au rouge, jamais deux fois la même hauteur :
   c'est la grande qui dit la note. */
.nu__score {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 2.4cqw;
  background: var(--n-papier); color: var(--n-encre); border: .8cqw solid var(--n-encre); border-radius: 99cqw;
  padding: 1.2cqw 3cqw 1.2cqw 4cqw; margin-bottom: 2cqw;
}
.nu__score-texte { min-width: 0; flex: 1; }
.nu__score-nom { font-size: calc(2cqw * var(--n-t)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; overflow-wrap: anywhere; }
.nu__verdict { font-size: calc(3.3cqw * var(--n-t)); font-weight: 900; line-height: 1.05; margin-top: .5cqw; text-wrap: balance; }
.nu__echelle { flex: none; list-style: none; display: flex; align-items: center; gap: 1.1cqw; }
.nu__echelle li {
  width: 6.6cqw; height: 6.6cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 3.6cqw; font-weight: 900; color: var(--n-lettre); line-height: 1; opacity: .9;
}
.nu__echelle li[data-actif] { width: 11.4cqw; height: 11.4cqw; font-size: 7.4cqw; border: .7cqw solid var(--n-encre); opacity: 1; box-shadow: 0 0 0 .5cqw var(--n-papier); }
.nu__echelle li[data-lettre="A"], .nu-notes label[data-lettre="A"] { background: var(--n-sa); }
.nu__echelle li[data-lettre="B"], .nu-notes label[data-lettre="B"] { background: var(--n-sb); }
.nu__echelle li[data-lettre="C"], .nu-notes label[data-lettre="C"] { background: var(--n-sc); }
.nu__echelle li[data-lettre="D"], .nu-notes label[data-lettre="D"] { background: var(--n-sd); }
.nu__echelle li[data-lettre="E"], .nu-notes label[data-lettre="E"] { background: var(--n-se); }

/* L'étiquette : un cadre épais, des barres plus épaisses encore, des filets fins entre les lignes.
   Elle prend toute la hauteur que laisse la tête ; ce sont les lignes qui absorbent l'écart. */
.nu__etiquette {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border: .9cqw solid var(--n-encre); background: var(--n-papier); color: var(--n-encre); padding: 2.6cqw 3.4cqw 2.2cqw;
}
/* Les cinq couleurs de l'échelle en bandeau, au ras du cadre : c'est ce qui fait lire « emballage ». */
.nu__etiquette::before {
  content: ""; flex: none; display: block; height: 2.4cqw; margin: -2.6cqw -3.4cqw 2cqw;
  background: linear-gradient(90deg, var(--n-sa) 0 20%, var(--n-sb) 20% 40%, var(--n-sc) 40% 60%, var(--n-sd) 60% 80%, var(--n-se) 80% 100%);
}
.nu__titre { font-size: calc(5.6cqw * var(--n-t)); font-weight: 900; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.nu[data-style="Fluo"] .nu__titre { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
.nu__portion { font-size: calc(2.5cqw * var(--n-t)); margin-top: 1.2cqw; line-height: 1.25; overflow-wrap: anywhere; }
.nu__portion strong { font-weight: 800; }
.nu__barre { flex: none; height: 1.5cqw; background: var(--n-encre); margin: 1.6cqw 0 .8cqw; }
.nu__entete {
  flex: none; display: flex; justify-content: space-between; gap: 2cqw; align-items: baseline;
  font-size: calc(2.1cqw * var(--n-t)); font-weight: 700; padding-bottom: .8cqw; border-bottom: .35cqw solid var(--n-encre);
}
.nu__entete span:last-child { text-align: right; }

/* Les cinq lignes : chacune prend sa part de la hauteur, sans dépasser. Une ligne sans libellé
   n'existe pas (`hidden`). */
.nu__lignes { flex: 1; min-height: 0; list-style: none; display: flex; flex-direction: column; justify-content: space-evenly; }
.nu__ligne {
  flex: 1 1 0; max-height: 11.5cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  border-bottom: .25cqw solid var(--n-encre); min-height: 0;
}
.nu__ligne[hidden] { display: none; }
.nu__ligne:last-child { border-bottom: 0; }
.nu__libelle { font-size: calc(3.9cqw * var(--n-t)); font-weight: 700; min-width: 0; overflow-wrap: anywhere; line-height: 1.1; }
.nu__pct {
  flex: none; font-size: calc(3.9cqw * var(--n-t)); line-height: 1.1; font-weight: 900; background: var(--n-accent); color: var(--n-sur); border-radius: 99cqw;
  padding: .3cqw 2cqw; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.nu[data-style="Fluo"] .nu__libelle { font-weight: 800; }

.nu__ingredients, .nu__traces { flex: none; font-size: calc(2.3cqw * var(--n-t)); line-height: 1.3; overflow-wrap: anywhere; }
.nu__ingredients { margin-top: .6cqw; }
.nu__traces { margin-top: 1cqw; }
.nu__ingredients strong, .nu__traces strong { font-weight: 800; }
.nu__pied {
  flex: none; font-size: calc(1.7cqw * var(--n-t)); line-height: 1.3; margin-top: 1.6cqw; padding-top: 1.1cqw;
  border-top: .25cqw solid var(--n-encre); text-wrap: pretty;
}
.nu__bas { flex: none; text-align: center; font-size: 2cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 3.4cqw; }

/* ── Le formulaire ── */
.nu-phrase { font-size: 1.3rem; margin: 0 0 .4rem; opacity: .75; }
.nu-lignes { display: grid; gap: 1.2rem; }
.nu-ligne-champ { padding: 0; border: 0; margin: 0; min-width: 0; }
.nu-ligne-champ legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.nu-ligne-champ legend small { font-weight: 400; opacity: .7; }
.nu-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 8.4rem; gap: .8rem; align-items: end; }
.nu-ligne label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.nu-ligne input { width: 100%; }
.nu-pct { position: relative; }
.nu-pct input { padding-right: 3rem; text-align: right; }
.nu-pct span { position: absolute; right: 1.1rem; bottom: 1.15rem; font-weight: 700; pointer-events: none; }
.nu-pct input:disabled { opacity: .45; }
.nu-de {
  width: 4.4rem; height: 4.4rem; display: inline-flex; align-items: center; justify-content: center;
  border: .1rem solid currentColor; border-radius: .8rem; background: transparent; cursor: pointer; flex: none;
}
.nu-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nu-de svg circle { fill: currentColor; stroke: none; }
.nu-ligne-rang { display: flex; gap: .6rem; align-items: end; }
.nu-ligne-rang > div:first-child { flex: 1; min-width: 0; }
.nu-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.nu-idees button {
  min-height: 4.4rem; padding: .4rem 1.2rem; border: .1rem solid currentColor; border-radius: 99rem; background: transparent;
  font: inherit; font-size: 1.3rem; cursor: pointer; text-align: left; max-width: 100%;
}
.nu-notes { display: flex; gap: .8rem; }
.nu-notes input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nu-notes label {
  width: 4.8rem; height: 4.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer;
  font-size: 2rem; font-weight: 900; color: var(--n-lettre); border: .3rem solid transparent;
}
.nu-notes input:checked + label { border-color: rgb(var(--color-foreground)); box-shadow: 0 0 0 .2rem rgb(var(--color-background)); transform: scale(1.12); }
.nu-notes input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .3rem; }
.nu-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nu-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.nu-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0;
  font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.25;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .8rem .6rem;
}
.nu-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.nu-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.nu-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.nu-echantillon {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem; width: 100%; max-width: 12rem; padding: .6rem .8rem;
  background: var(--n-fond); color: var(--n-texte); border: .2rem solid var(--n-encre); font-weight: 900; font-size: 1.3rem; line-height: 1.2;
}
.nu-echantillon b { background: var(--n-accent); color: var(--n-sur); border-radius: 9rem; padding: 0 .6rem; white-space: nowrap; }
@media (min-width: 750px) { .nu-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }