/* ═══════════════════════════ « Putain, t'es vieux » ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * Une affiche typographique de concept store, pas un cadeau de fête : aucune guirlande, aucun
 * émoji, aucune police fantaisie. Ce qui fait rire est écrit en très grand ; ce qui fait lire
 * jusqu'en bas est écrit petit et juste. Les polices sont celles que la maison sert déjà
 * (Inter, Roboto Condensed, Playfair Display, Cormorant Garamond) : rien à télécharger de plus.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici,
 * en tête, et nulle part ailleurs. `[data-palette]` porte le choix du client ; le sélecteur ne
 * nomme pas `.vx`, pour que les pastilles du formulaire se colorent avec les mêmes variables.
 *
 * --v-fond : le papier ; --v-encre : le texte ; --v-accent : la seconde ligne du verdict, l'âge
 * et le compteur des jours ; --v-doux : les petites lignes ; --v-filet : les traits ;
 * --v-titre / --v-texte : les deux voix ; --v-graisse : celle du verdict.
 */
[data-palette="Suisse"] {
  --v-fond: #f1ede3; --v-encre: #141414; --v-accent: #e1301f; --v-doux: #5a5650; --v-filet: #141414;
  --v-titre: "Inter"; --v-texte: "Inter"; --v-graisse: 900;
}
[data-palette="Journal"] {
  --v-fond: #ece5d3; --v-encre: #1c1813; --v-accent: #8f1d12; --v-doux: #57503f; --v-filet: #1c1813;
  --v-titre: "Playfair Display"; --v-texte: "Cormorant Garamond"; --v-graisse: 900;
}
[data-palette="Minuit"] {
  --v-fond: #121212; --v-encre: #efeae0; --v-accent: #ff5a1f; --v-doux: #a19b90; --v-filet: #efeae0;
  --v-titre: "Roboto Condensed"; --v-texte: "Inter"; --v-graisse: 800;
}

/* ── 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 répartition
 * verticale (`space-between`), jamais dans une taille de texte. */
.vx {
  --fond: var(--v-fond); --texte: var(--v-encre);
  padding: 5cqw 5.5cqw 3.8cqw; justify-content: space-between; gap: 1.2cqw;
  font-family: var(--v-texte), "Inter", system-ui, sans-serif; line-height: 1.2;
}
.vx p, .vx h2, .vx h3, .vx ul, .vx ol { margin: 0; padding: 0; }
.vx ul, .vx ol { list-style: none; }
.vx [hidden] { display: none !important; }

.vx__bandeau {
  display: flex; justify-content: space-between; gap: 2cqw; padding-bottom: 1cqw;
  border-bottom: .35cqw solid var(--v-filet);
  font-size: 1.35cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v-doux);
}

/* Le verdict : deux lignes, **chacune à la largeur de l'affiche**. La taille part du nombre de
   signes (`--n`, posé par le serveur et l'éditeur) pour qu'une page sans script ne déborde
   déjà pas, puis l'éditeur resserre au pixel (`--ech`). Jamais agrandie au-delà de 17 cqw :
   « PUTAIN, » en huit signes remplit la largeur, un mot plus court ne doit pas crier plus fort. */
.vx__verdict {
  font-family: var(--v-titre), "Inter", sans-serif; font-weight: var(--v-graisse, 900);
  text-transform: uppercase; line-height: .9; letter-spacing: -.035em; margin-top: 1cqw;
}
.vx__verdict span {
  display: block; white-space: nowrap; overflow: hidden;
  font-size: calc(min(17cqw, 124cqw / var(--n, 8)) * var(--ech, 1));
  padding-bottom: .06em;
}
.vx__verdict span + span { color: var(--v-accent); }

.vx__identite {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3cqw;
  padding: 1.6cqw 0 1.8cqw; border-bottom: .35cqw solid var(--v-filet);
}
.vx__qui { min-width: 0; }
.vx__prenom {
  font-family: var(--v-titre), "Inter", sans-serif; font-weight: var(--v-graisse, 900);
  text-transform: uppercase; letter-spacing: -.02em; line-height: .95; white-space: nowrap; overflow: hidden;
  font-size: calc(min(11cqw, 86cqw / var(--n, 6)) * var(--ech, 1));
}
.vx__ne {
  margin-top: 1cqw; font-size: 1.75cqw; font-weight: 600; letter-spacing: .1em; line-height: 1.3;
  text-transform: uppercase; text-wrap: balance;
}
.vx__age { display: flex; align-items: baseline; gap: 1cqw; color: var(--v-accent); line-height: .8; }
.vx__age-n {
  font-family: var(--v-titre), "Inter", sans-serif; font-weight: var(--v-graisse, 900);
  font-size: 19cqw; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.vx__age-u { font-size: 3.2cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

/* Les six compteurs : trois par rangée, le nombre en gras et l'unité dessous. */
.vx__compteurs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw 2.4cqw;
  padding-bottom: 1.8cqw; border-bottom: .35cqw solid var(--v-filet);
}
.vx__compteur b {
  display: block; font-family: var(--v-titre), "Inter", sans-serif; font-weight: 800;
  font-size: 4cqw; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vx__compteur span { display: block; font-size: 1.4cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--v-doux); }
.vx__compteur--jours b { color: var(--v-accent); }

/* Les cinq sections : trois colonnes, puis deux. La dernière porte deux titres, les
   estimations et ce qui vient, pour qu'aucune colonne ne reste vide. */
.vx__sections {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.4cqw 3cqw; align-content: start;
}
.vx__section { min-width: 0; grid-column: span 2; }
.vx__section--estimations { grid-column: span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3cqw; grid-auto-flow: column; grid-template-rows: auto auto; }
.vx__section h3 {
  font-family: var(--v-texte), "Inter", sans-serif; font-size: 1.4cqw; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--v-accent);
  padding-bottom: .6cqw; margin-bottom: 1cqw; border-bottom: .2cqw solid var(--v-filet);
}
.vx__section li { font-size: 1.62cqw; line-height: 1.3; }
.vx__section li + li { margin-top: .75cqw; }
.vx__section--reperes li b { display: block; font-weight: 800; font-size: 1.7cqw; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
.vx__section--reperes li span { display: block; font-size: 1.45cqw; color: var(--v-doux); margin-top: .15cqw; }
.vx__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1cqw 1.6cqw; }
.vx__grille li + li { margin-top: 0; }
.vx__grille b { display: block; font-family: var(--v-titre), "Inter", sans-serif; font-weight: 800; font-size: 2.9cqw; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx__grille span { display: block; font-size: 1.3cqw; line-height: 1.2; color: var(--v-doux); margin-top: .3cqw; }

.vx__phrase {
  font-family: var(--v-titre), "Inter", sans-serif; font-weight: 800; font-size: 3.1cqw; line-height: 1.12;
  letter-spacing: -.01em; text-wrap: balance; padding-top: 1.8cqw; border-top: .35cqw solid var(--v-filet);
}
.vx__pied { font-size: 1.02cqw; line-height: 1.35; color: var(--v-doux); letter-spacing: .02em; }

/* Journal : une une de quotidien — filets doubles, romaine grasse, colonnes séparées. */
[data-palette="Journal"] .vx__bandeau { border-bottom: .9cqw double var(--v-filet); font-family: "Playfair Display", serif; letter-spacing: .08em; }
[data-palette="Journal"] .vx__verdict { letter-spacing: -.02em; text-transform: none; font-style: italic; }
[data-palette="Journal"] .vx__verdict span { font-size: calc(min(17cqw, 150cqw / var(--n, 8)) * var(--ech, 1)); }
[data-palette="Journal"] .vx__section li { font-size: 1.85cqw; line-height: 1.22; font-weight: 500; }
[data-palette="Journal"] .vx__section h3 { font-family: "Playfair Display", serif; letter-spacing: .06em; font-size: 1.5cqw; }
[data-palette="Journal"] .vx__section--reperes li b { font-family: "Playfair Display", serif; text-transform: none; font-size: 1.9cqw; }
[data-palette="Journal"] .vx__section--reperes li span, [data-palette="Journal"] .vx__grille span { font-size: 1.6cqw; }
[data-palette="Journal"] .vx__compteur span, [data-palette="Journal"] .vx__bandeau { font-size: 1.5cqw; }
[data-palette="Journal"] .vx__phrase { font-style: italic; font-weight: 700; text-align: center; border-top: .9cqw double var(--v-filet); }
[data-palette="Journal"] .vx__compteurs, [data-palette="Journal"] .vx__identite { border-bottom-width: .2cqw; }
/* Playfair dessine des chiffres elzéviriens, dont les jambages (3, 4, 5, 7, 9) descendent sous
   la ligne : dans un tableau de nombres, ils mordaient l'unité posée dessous. La police servie
   n'a pas de chiffres alignés (`lining-nums` ne change rien, vérifié au rendu) : on laisse donc
   la place des jambages sous chaque nombre. */
[data-palette="Journal"] .vx__compteur b, [data-palette="Journal"] .vx__grille b { line-height: 1.3; }

/* Minuit : l'énorme chiffre au centre. Le compteur des jours prend toute la largeur ; le
   reste se tient autour de lui. */
[data-palette="Minuit"] .vx__verdict { letter-spacing: -.01em; }
[data-palette="Minuit"] .vx__verdict span { font-size: calc(min(17cqw, 150cqw / var(--n, 8)) * var(--ech, 1)); }
[data-palette="Minuit"] .vx__compteur--jours { grid-column: 1 / -1; order: -1; text-align: center; padding-bottom: .6cqw; }
[data-palette="Minuit"] .vx__compteur--jours b { font-size: 12cqw; letter-spacing: -.03em; }
[data-palette="Minuit"] .vx__compteur--jours span { font-size: 2cqw; }
[data-palette="Minuit"] .vx__compteurs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2cqw 1.6cqw; }
[data-palette="Minuit"] .vx__compteur:not(.vx__compteur--jours) b { font-size: 2.6cqw; }
[data-palette="Minuit"] .vx__compteur:not(.vx__compteur--jours) span { font-size: 1.15cqw; }
[data-palette="Minuit"] .vx__age-n { font-size: 15cqw; }

/* ── Le formulaire ── */
.vx-aide { margin: -.6rem 0 1.6rem; font-size: 1.3rem; color: rgba(var(--color-foreground), .75); }
.vx-choix { display: grid; gap: .8rem; }
.vx-choix--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vx-tons, .vx-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* La largeur des boutons radio est posée ici : la feuille générale fait des champs pleine
   largeur (`.affiche__champ input`), et sortis du flux ils gardaient 100 % à leur abscisse. */
.vx-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vx-choix label {
  display: flex; flex-direction: column; justify-content: center; gap: .2rem; cursor: pointer; margin: 0;
  font-size: 1.4rem; font-weight: 600; min-height: 4.4rem; line-height: 1.2;
  border: .15rem solid rgba(var(--color-foreground), .18); border-radius: .8rem; padding: .6rem .9rem;
}
.vx-choix--deux label { align-items: center; }
.vx-tons label small { font-size: 1.2rem; font-weight: 400; color: rgba(var(--color-foreground), .72); }
.vx-choix input:checked + label { border-color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .1rem rgb(var(--color-foreground)); }
.vx-choix input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.vx-styles label { flex-direction: row; align-items: center; justify-content: flex-start; gap: .8rem; }
.vx-pastille {
  flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: .6rem;
  background: var(--v-fond); color: var(--v-accent); border: .1rem solid rgba(var(--color-foreground), .15);
  font-family: var(--v-titre), "Inter", sans-serif; font-weight: 900; font-size: 1.6rem; letter-spacing: -.04em;
}
.vx-saisie { display: flex; gap: .6rem; }
/* 1,6 rem : sous 16 px, Safari zoome la page au focus d'un champ. */
.affiche__champ .vx-saisie input { font-size: 1.6rem; min-width: 0; }
.vx-de {
  flex: none; width: 4.6rem; min-height: 4.4rem; border-radius: .6rem; cursor: pointer; font-size: 2rem;
  border: .1rem solid rgba(var(--color-foreground), .3); background: rgb(var(--color-background));
}
.vx-de[hidden], .vx-idees[hidden], .vx-partage[hidden] { display: none; }
.vx-idees { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.vx-idee {
  min-height: 4.4rem; padding: .5rem 1.1rem; border-radius: 1.2rem; cursor: pointer;
  font: inherit; font-size: 1.3rem; line-height: 1.25; text-align: left;
  border: .1rem solid rgba(var(--color-foreground), .3); background: rgb(var(--color-background)); color: inherit;
}
.vx-idee[aria-pressed="true"] { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border-color: transparent; }
.vx-idee:focus-visible, .vx-de:focus-visible, .vx-partager:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.vx-partage { margin: .4rem 0 1.6rem; }
.vx-partager {
  min-height: 4.4rem; padding: .6rem 1.6rem; border-radius: 99rem; cursor: pointer;
  font: inherit; font-size: 1.4rem; font-weight: 700;
  background: transparent; color: rgb(var(--color-foreground)); border: .15rem solid rgb(var(--color-foreground));
}
@media screen and (max-width: 420px) {
  .vx-tons, .vx-styles { grid-template-columns: 1fr; }
}