/* ═══════════════════════════ Ta vie en semaines ═══════════════════════════
 *
 * Une case par semaine : 4 680 pour une vie (90 lignes de 52), 3 120 pour un couple (60 lignes,
 * les noces de diamant), remplies jusqu'à la semaine où l'on est. Servie **seulement** sur sa fiche
 * (`views/product-affiche.liquid`).
 *
 * ── Les couleurs ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en
 * tête, et nulle part ailleurs dans cette feuille (un essai le vérifie). Quatre styles, et chacun
 * dessine sa case : Encre (des carrés d'encre sur un papier crème, la semaine en cours en rouge),
 * Nuit (des points d'or, comme des étoiles, sur un bleu profond), Décennies (de gros ronds, une
 * couleur par décennie vécue) et Fluo (des gélules acides sur du noir).
 *
 * --vs-fond : le papier ; --vs-texte : le prénom et les grands nombres ; --vs-doux : les petits
 * textes, ≥ 4,5 de contraste sur le fond ; --vs-accent : le titre de l'affiche et la phrase ;
 * --vs-vecu / --vs-avenir : la case vécue et la case à venir ; --vs-ici : la semaine en cours ;
 * --vs-filet : le trait entre deux blocs.
 */
@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-02AF, U+0304, U+0308, U+0329, 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; }

.vs, .vs-styles {
  --vs-dec-0: #e4572e; --vs-dec-1: #ef8a3a; --vs-dec-2: #f2b632; --vs-dec-3: #a9c23f; --vs-dec-4: #4aa96c;
  --vs-dec-5: #2aa198; --vs-dec-6: #3f88c5; --vs-dec-7: #6a5acd; --vs-dec-8: #b0489a;
}
[data-style="Encre"] {
  --vs-fond: #f5f0e6; --vs-texte: #1d1b18; --vs-doux: #5c564c; --vs-accent: #b3291a; --vs-filet: rgba(29, 27, 24, .35);
  --vs-vecu: #1d1b18; --vs-avenir: rgba(29, 27, 24, .16); --vs-ici: #c8321f; --vs-halo: rgba(200, 50, 31, .18);
  --vs-police: "Playfair Display", Georgia, serif; --vs-poids: 700; --vs-casse: none; --vs-pas: 0;
  --vs-nombre: 33cqi; --vs-devant: 23cqi; --vs-trait: butt; --vs-largeur: 6.6; --vs-dash: 6.6 3.4; --vs-decalage: -1.7; --vs-av-opacite: 1;
}
[data-style="Nuit"] {
  --vs-fond: #0b1b36; --vs-texte: #f3ead7; --vs-doux: #b9b2a2; --vs-accent: #d9b66e; --vs-filet: rgba(217, 182, 110, .45);
  --vs-vecu: #e6c27a; --vs-avenir: rgba(243, 234, 215, .17); --vs-ici: #ffffff; --vs-halo: rgba(255, 244, 214, .26);
  --vs-police: "Cormorant Garamond", Georgia, serif; --vs-poids: 500; --vs-casse: none; --vs-pas: .01em;
  --vs-nombre: 36cqi; --vs-devant: 25cqi; --vs-trait: round; --vs-largeur: 5.4; --vs-dash: 0 10; --vs-decalage: -5; --vs-av-opacite: 1;
}
[data-style="Décennies"] {
  --vs-fond: #fbf8f2; --vs-texte: #1f2430; --vs-doux: #555b68; --vs-accent: #9a3d6e; --vs-filet: rgba(31, 36, 48, .3);
  --vs-vecu: #e4572e; --vs-avenir: #e4572e; --vs-ici: #1f2430; --vs-halo: rgba(31, 36, 48, .12);
  --vs-police: "Josefin Sans", system-ui, sans-serif; --vs-poids: 700; --vs-casse: uppercase; --vs-pas: .06em;
  --vs-nombre: 33cqi; --vs-devant: 22cqi; --vs-trait: round; --vs-largeur: 7.8; --vs-dash: 0 10; --vs-decalage: -5; --vs-av-opacite: .22;
}
[data-style="Fluo"] {
  --vs-fond: #0d0d0d; --vs-texte: #f4f3ea; --vs-doux: #b3b2a8; --vs-accent: #d6ff2e; --vs-filet: rgba(214, 255, 46, .45);
  --vs-vecu: #d6ff2e; --vs-avenir: #2c2c2a; --vs-ici: #ff3e8e; --vs-halo: rgba(255, 62, 142, .28);
  --vs-police: "Anton", Impact, sans-serif; --vs-poids: 400; --vs-casse: uppercase; --vs-pas: .03em;
  --vs-nombre: 42cqi; --vs-devant: 30cqi; --vs-trait: round; --vs-largeur: 4.6; --vs-dash: 3.4 6.6; --vs-decalage: -3.3; --vs-av-opacite: 1;
}
/* Les décennies ne se distinguent que dans le style qui les colore : la couleur d'une case vécue ou
   à venir y est celle de sa décennie. */
[data-style="Décennies"] .vs__d0 { --vs-vecu: var(--vs-dec-0); --vs-avenir: var(--vs-dec-0); }
[data-style="Décennies"] .vs__d1 { --vs-vecu: var(--vs-dec-1); --vs-avenir: var(--vs-dec-1); }
[data-style="Décennies"] .vs__d2 { --vs-vecu: var(--vs-dec-2); --vs-avenir: var(--vs-dec-2); }
[data-style="Décennies"] .vs__d3 { --vs-vecu: var(--vs-dec-3); --vs-avenir: var(--vs-dec-3); }
[data-style="Décennies"] .vs__d4 { --vs-vecu: var(--vs-dec-4); --vs-avenir: var(--vs-dec-4); }
[data-style="Décennies"] .vs__d5 { --vs-vecu: var(--vs-dec-5); --vs-avenir: var(--vs-dec-5); }
[data-style="Décennies"] .vs__d6 { --vs-vecu: var(--vs-dec-6); --vs-avenir: var(--vs-dec-6); }
[data-style="Décennies"] .vs__d7 { --vs-vecu: var(--vs-dec-7); --vs-avenir: var(--vs-dec-7); }
[data-style="Décennies"] .vs__d8 { --vs-vecu: var(--vs-dec-8); --vs-avenir: var(--vs-dec-8); }

/* ── L'affiche ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. De haut en bas : l'en-tête
 * (le titre, le prénom, la date de départ), puis le corps — à gauche les grands nombres, à droite la
 * grille, tenue sur **toute la hauteur qui reste** —, la phrase, le pied. La grille prend la hauteur
 * que lui laisse le format (le 30 × 40 est plus trapu que le 40 × 60) et sa largeur suit son rapport :
 * le texte de gauche prend le reste. Rien ne flotte.
 */
.vs {
  --fond: var(--vs-fond); --texte: var(--vs-texte);
  font-family: "Josefin Sans", system-ui, sans-serif; text-align: left;
  align-items: stretch; padding: 5.6cqw 6.4cqw 4.6cqw;
}
.vs > * { flex: none; min-width: 0; }
.vs p, .vs ul, .vs figure { margin: 0; }

.vs__tete { display: flex; flex-direction: column; align-items: flex-start; }
.vs__kicker {
  color: var(--vs-accent); font-weight: 600; text-transform: uppercase; font-size: 2.2cqw;
  letter-spacing: .3em; white-space: nowrap;
}
/* Le prénom : la taille suit le nombre de signes (`--n`, posé par le calcul), bornée des deux côtés.
   Il ne passe pas à la ligne : l'éditeur le resserre au pixel. Pleine largeur, sinon `clientWidth`
   vaudrait `scrollWidth` et la mesure ne verrait jamais de débordement. */
.vs__prenoms {
  width: 100%; margin-top: 3.6cqw; font-family: var(--vs-police); font-weight: var(--vs-poids); text-transform: var(--vs-casse);
  letter-spacing: var(--vs-pas); font-size: clamp(3cqw, calc(135cqw / var(--n, 12)), 9.2cqw); line-height: 1.08; white-space: nowrap;
}
/* Les capitales ont des accents qui montent au-dessus de l'interligne : « LÉA » touchait le titre. */
[data-style="Décennies"] .vs__prenoms, [data-style="Fluo"] .vs__prenoms { margin-top: 4.2cqw; }
.vs__depart {
  margin-top: 1.1cqw; color: var(--vs-doux); font-weight: 400; font-size: 2.35cqw; letter-spacing: .14em;
  text-transform: uppercase; font-variant-numeric: lining-nums; white-space: nowrap; max-width: 100%;
}

/* Le corps : les nombres à gauche, la grille à droite. */
.vs__corps { flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; gap: 4.4cqw; margin-top: 3.4cqw; }
.vs__stats {
  flex: 1 1 0; min-width: 0; container-type: inline-size; display: flex; flex-direction: column;
  justify-content: space-between; padding: .8cqw 0 .4cqw;
}
.vs__bloc { display: flex; flex-direction: column; }
.vs__nombre {
  font-family: var(--vs-police); font-weight: var(--vs-poids); font-size: var(--vs-nombre); line-height: .95; letter-spacing: 0;
  font-variant-numeric: lining-nums; white-space: nowrap; color: var(--vs-texte);
}
.vs__nombre--devant { font-size: var(--vs-devant); color: var(--vs-doux); }
.vs__etiquette { margin-top: 3.4cqi; font-weight: 600; font-size: 8.2cqi; line-height: 1.2; color: var(--vs-texte); }
.vs__sous { margin-top: 1.4cqi; font-weight: 400; font-size: 6.8cqi; line-height: 1.3; color: var(--vs-doux); text-wrap: balance; }
.vs__sous:empty { display: none; }
.vs__part { margin-top: 7cqi; display: flex; align-items: baseline; gap: 3cqi; color: var(--vs-accent); }
.vs__part b { font-family: var(--vs-police); font-weight: var(--vs-poids); font-size: 17cqi; line-height: 1; font-variant-numeric: lining-nums; }
.vs__part span { font-size: 6.8cqi; line-height: 1.25; color: var(--vs-doux); }
.vs__bloc--devant { padding-top: 5cqi; border-top: max(1px, .2cqw) solid var(--vs-filet); }

.vs__cles { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 3.2cqi; }
.vs__cles li { display: flex; align-items: center; gap: 4cqi; font-size: 6.8cqi; line-height: 1.2; color: var(--vs-doux); }
.vs__cle-svg { flex: none; width: 11cqi; height: 11cqi; overflow: visible; }

/* La grille : toute la hauteur du corps, sa largeur suit son rapport (`--vs-rapport`, posé par le
   calcul). Le dessin est en unités de 10 par case ; la forme d'une case est celle du style. */
.vs__grille { flex: none; align-self: stretch; aspect-ratio: var(--vs-rapport, 540 / 974); max-width: 67%; }
.vs__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vs__v, .vs__a, .vs__ici, .vs__cle-svg path {
  fill: none; stroke-linecap: var(--vs-trait); stroke-width: var(--vs-largeur);
  stroke-dasharray: var(--vs-dash); stroke-dashoffset: var(--vs-decalage);
}
.vs__v { stroke: var(--vs-vecu); }
.vs__a { stroke: var(--vs-avenir); stroke-opacity: var(--vs-av-opacite); }
.vs__ici { stroke: var(--vs-ici); }
.vs__halo { fill: var(--vs-halo); stroke: none; }
.vs__anneau { fill: none; stroke: var(--vs-ici); stroke-width: 1.5; }
.vs__pointeur { fill: var(--vs-ici); }
.vs__age { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 700; font-size: 10.5px; fill: var(--vs-doux); font-variant-numeric: lining-nums; }
.vs__axe { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 600; font-size: 7.6px; letter-spacing: .14em; text-transform: uppercase; fill: var(--vs-doux); }

.vs__phrase {
  margin-top: 4cqw; color: var(--vs-accent); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500;
  font-size: calc(4.6cqw * var(--vs-ph, 1)); line-height: 1.18; overflow-wrap: anywhere; text-wrap: balance;
}
.vs__phrase:empty { display: none; }
.vs__pied { margin-top: 2.6cqw; padding-top: 2cqw; border-top: max(1px, .2cqw) solid var(--vs-filet); }
.vs__methode { color: var(--vs-doux); font-weight: 400; font-size: 1.85cqw; letter-spacing: .06em; text-wrap: balance; }
.vs__methode:empty { display: none; }

/* Quand la place manque malgré tout (prénoms et phrase au plus long, allemand, 30 × 40) : le script
   resserre d'abord la phrase (`--vs-ph`), puis pose `data-serre`, qui rapproche les blocs. Jamais
   les nombres. */
.vs[data-serre] .vs__corps { margin-top: 2cqw; }
.vs[data-serre] .vs__phrase { margin-top: 1.6cqw; }
.vs[data-serre] .vs__pied { margin-top: 1.4cqw; padding-top: 1.2cqw; }

/* ── Le formulaire ──
   La formule (une personne / un couple) commande les libellés de la date de départ : sans script,
   `:has()` suffit ; le script pose aussi `data-pour` pour les navigateurs qui ne le connaissent pas. */
.vs-champs .vs-couple { display: none; }
.vs-champs[data-pour="Un couple"] .vs-couple, .vs-champs:has(input[value="Un couple"]:checked) .vs-couple { display: inline; }
.vs-champs[data-pour="Un couple"] .vs-solo, .vs-champs:has(input[value="Un couple"]:checked) .vs-solo { display: none; }
.vs-formules, .vs-styles { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.vs-formules input, .vs-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vs-formules label {
  display: flex; align-items: center; justify-content: center; min-height: 4.8rem; padding: .6rem 1.8rem; cursor: pointer; flex: 1 1 14rem;
  font-size: 1.5rem; font-weight: 500; text-align: center; color: rgba(var(--color-foreground), .75);
  border: .15rem solid rgba(var(--color-foreground), .22); border-radius: .8rem;
}
.vs-formules input:checked + label { border-color: rgb(var(--color-accent)); color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .1rem rgb(var(--color-accent)); }
.vs-formules input:focus-visible + label, .vs-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.vs-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; min-width: 6.4rem;
  font-size: 1.2rem; font-weight: 400; color: rgba(var(--color-foreground), .7);
  border: .15rem solid transparent; border-radius: .8rem; padding: .6rem;
}
.vs-styles input:checked + label { border-color: rgb(var(--color-accent)); color: rgb(var(--color-foreground)); }
/* La pastille montre ce que vend le style : le papier et trois rangées de cases, deux pleines. */
.vs-pastille {
  width: 3.8rem; height: 3.8rem; border-radius: .6rem; position: relative; overflow: hidden;
  background: var(--vs-fond); border: .1rem solid rgba(var(--color-foreground), .2);
}
.vs-pastille::before {
  content: ""; position: absolute; inset: 20% 16%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 12%, var(--vs-vecu) 0 22%, transparent 24%) 0 0 / 33.4% 33.4% repeat-x,
    radial-gradient(circle at 50% 50%, var(--vs-vecu) 0 22%, transparent 24%) 0 33.4% / 33.4% 33.4% repeat-x,
    radial-gradient(circle at 50% 88%, var(--vs-ici) 0 22%, transparent 24%) 0 66.8% / 33.4% 33.4% repeat-x;
  border-radius: 0;
}