/* ═══════════════════════════ Depuis nous ═══════════════════════════
 *
 * L'histoire d'un couple en trois à huit moments, posés sur un chemin qui serpente de haut en
 * bas. Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── Les styles ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en
 * tête, et nulle part ailleurs. Un style ne change que les couleurs et les polices, jamais la mise
 * en page (Fred, 1er oct. 2026). `[data-style]` ne nomme pas `.hc` exprès, pour que les
 * échantillons du formulaire se colorent avec les mêmes variables.
 *
 * --h-fond : le papier ; --h-texte : les lignes ; --h-accent : les pastilles et la phrase ;
 * --h-sur-accent : le pictogramme dans sa pastille ; --h-doux : dates, lieux et surtitre ;
 * --h-route : les pointillés du chemin. **Contrastes mesurés** (1er oct. 2026, WCAG, relevés
 * une première fois au minimum, puis relevés parce que « le contraste entre le fond et le reste » restait
 * trop faible, Fred) : texte ≥ 12, date, lieu et phrase ≥ 7 (le niveau AAA), pastille sur le papier ≥ 5,5,
 * pictogramme sur sa pastille ≥ 6,5, pointillés ≥ 4,5. Avant : la Sauge faisait 4,37 pour sa date, le
 * Poudré 4,07 et 1,96 pour ses pointillés. Puis les polices : --h-f-noms, --h-f-phrase, --h-f-titre,
 * --h-f-date, --h-f-lieu, et la casse des prénoms et des titres.
 */
[data-style="Sauge"] {
  --h-fond: #dfe7d2; --h-texte: #22251b; --h-accent: #714b32; --h-sur-accent: #fffdf9; --h-doux: #454a39; --h-route: #515544;
  --h-f-noms: "Marcellus", Georgia, serif; --h-noms-casse: uppercase; --h-noms-espace: .08em; --h-noms-k: .74;
  --h-f-phrase: "Sacramento", cursive; --h-phrase-taille: 7.2cqw;
  --h-f-titre: "Marcellus", Georgia, serif; --h-titre-casse: none; --h-titre-graisse: 400;
  --h-f-date: "Josefin Sans", system-ui, sans-serif; --h-f-lieu: "Cormorant Garamond", Georgia, serif; --h-lieu-style: italic;
}
[data-style="Poudré"] {
  --h-fond: #f7ede9; --h-texte: #32282b; --h-accent: #764f58; --h-sur-accent: #ffffff; --h-doux: #4c3c40; --h-route: #685459;
  --h-f-noms: "Pinyon Script", cursive; --h-noms-casse: none; --h-noms-espace: 0; --h-noms-k: .5;
  --h-f-phrase: "Cormorant Garamond", Georgia, serif; --h-phrase-taille: 4.6cqw;
  --h-f-titre: "Cormorant Garamond", Georgia, serif; --h-titre-casse: none; --h-titre-graisse: 600;
  --h-f-date: "Cormorant Garamond", Georgia, serif; --h-f-lieu: "Cormorant Garamond", Georgia, serif; --h-lieu-style: italic;
}
[data-style="Encre"] {
  --h-fond: #fbfaf7; --h-texte: #151515; --h-accent: #151515; --h-sur-accent: #fbfaf7; --h-doux: #4e4e4e; --h-route: #565656;
  --h-f-noms: "Josefin Sans", system-ui, sans-serif; --h-noms-casse: uppercase; --h-noms-espace: .22em; --h-noms-k: .82;
  --h-f-phrase: "Cormorant Garamond", Georgia, serif; --h-phrase-taille: 4.6cqw;
  --h-f-titre: "Josefin Sans", system-ui, sans-serif; --h-titre-casse: uppercase; --h-titre-graisse: 600;
  --h-f-date: "Josefin Sans", system-ui, sans-serif; --h-f-lieu: "Josefin Sans", system-ui, sans-serif; --h-lieu-style: normal;
}
[data-style="Nuit"] {
  --h-fond: #15213b; --h-texte: #f1e9d8; --h-accent: #d4b26a; --h-sur-accent: #15213b; --h-doux: #c9bfa8; --h-route: #bba46f;
  --h-f-noms: "Cormorant Garamond", Georgia, serif; --h-noms-casse: none; --h-noms-espace: .02em; --h-noms-k: .5;
  --h-f-phrase: "Pinyon Script", cursive; --h-phrase-taille: 5.6cqw;
  --h-f-titre: "Cormorant Garamond", Georgia, serif; --h-titre-casse: none; --h-titre-graisse: 600;
  --h-f-date: "Josefin Sans", system-ui, sans-serif; --h-f-lieu: "Cormorant Garamond", Georgia, serif; --h-lieu-style: italic;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. La tête (surtitre, prénoms,
 * phrase) en haut, le chemin dans toute la hauteur qui reste. Les moments sont posés en pour
 * cent du cadre, à gauche puis à droite, par le serveur et l'éditeur (`histoire-calcul.mjs`) ;
 * le chemin est un SVG étiré sur le même cadre, dont le trait garde son épaisseur
 * (`vector-effect`) et ses points leur rondeur. Le texte cède quand la place manque
 * (`--hc-echelle`), jamais la position des moments.
 */
.hc {
  --fond: var(--h-fond); --texte: var(--h-texte);
  padding: 8cqw 6cqw 6cqw; text-align: center;
}
.hc__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hc__tete { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; }
.hc__tete p { margin: 0; }
.hc__kicker {
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 400; font-size: 2.4cqw;
  letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; color: var(--h-doux);
}
/* Les prénoms : leur taille suit leur nombre de signes (`--n`, « & » compris), bornée des deux
   côtés ; `--h-noms-k` est la chasse moyenne d'un signe de la police du style, en em. L'éditeur
   les resserre ensuite (`--hc-noms`) pour qu'ils tiennent sur deux lignes, la phrase aussi
   (`--hc-phrase`) : la tête ne doit pas manger le chemin. */
.hc__noms {
  width: 100%; font-family: var(--h-f-noms); text-transform: var(--h-noms-casse); letter-spacing: var(--h-noms-espace);
  font-size: calc(clamp(5cqw, calc(80cqw / (var(--n, 10) * var(--h-noms-k))), 12cqw) * var(--hc-noms, 1)); line-height: 1.12;
  font-weight: 400; text-wrap: balance; overflow-wrap: anywhere;
}
.hc__et { color: var(--h-accent); }
[data-style="Nuit"] .hc__et { font-family: "Pinyon Script", cursive; font-size: .8em; }
.hc__phrase { width: 100%; font-family: var(--h-f-phrase); font-size: calc(var(--h-phrase-taille) * var(--hc-phrase, 1)); line-height: 1.2; color: var(--h-accent); text-wrap: balance; overflow-wrap: anywhere; }
[data-style="Poudré"] .hc__phrase, [data-style="Encre"] .hc__phrase { font-style: italic; color: var(--h-doux); font-weight: 600; }

.hc__carte {
  position: relative; flex: 1; min-height: 0; margin-top: 4cqw;
  /* Définie ici et non sur `.hc` : `--hc-echelle` est posée sur la carte, et une variable lue plus haut
     que l'endroit où on la pose vaut son repli — la pastille ne rétrécissait jamais avec le texte. */
  --hc-pastille: calc(8.4cqw * var(--hc-echelle, 1));
}
.hc__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hc__route path {
  fill: none; stroke: var(--h-route); stroke-width: .85cqw; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 0 1.9cqw; vector-effect: non-scaling-stroke;
}
.hc__moment {
  position: absolute; display: flex; align-items: center; gap: calc(2.4cqw * var(--hc-echelle, 1));
  width: 68%; transform: translateY(-50%); text-align: left;
}
.hc__moment--d { flex-direction: row-reverse; text-align: right; }
.hc__pastille {
  flex: none; display: grid; place-items: center; width: var(--hc-pastille); height: var(--hc-pastille); border-radius: 50%;
  background: var(--h-accent); color: var(--h-sur-accent); box-shadow: 0 0 0 1.2cqw var(--h-fond);
}
.hc__pastille svg { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Le texte d'un moment n'a plus de fond : il en portait un pour cacher les pointillés qui passaient
   dessous, et ce fond les coupait en bribes au bord des lettres. Le chemin passe désormais entre les
   rangées (`chemin()`, `histoire-calcul.mjs`), un essai le mesure. */
.hc__texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.hc__moment--d .hc__texte { align-items: flex-end; }
.hc__date {
  font-family: var(--h-f-date); font-size: calc(2.6cqw * var(--hc-echelle, 1)); letter-spacing: .14em;
  text-transform: uppercase; color: var(--h-doux); overflow-wrap: anywhere;
  /* Des chiffres alignés : les chiffres elzéviriens de la Cormorant font lire « 20ı8 » et descendre le 3 et
     le 7 sous la ligne (Fred, 1er oct. 2026) ; une date n'est pas un texte courant. */
  font-variant-numeric: lining-nums; font-weight: 600;
}
.hc__titre {
  font-family: var(--h-f-titre); font-weight: var(--h-titre-graisse); text-transform: var(--h-titre-casse);
  font-size: calc(4cqw * var(--hc-echelle, 1)); overflow-wrap: anywhere;
}
[data-style="Encre"] .hc__titre { font-size: calc(3cqw * var(--hc-echelle, 1)); letter-spacing: .03em; }
.hc__lieu {
  font-family: var(--h-f-lieu); font-style: var(--h-lieu-style); font-size: calc(3.1cqw * var(--hc-echelle, 1)); color: var(--h-doux); overflow-wrap: anywhere;
  font-weight: 600; font-variant-numeric: lining-nums;
}
[data-style="Encre"] .hc__lieu { font-size: calc(2.6cqw * var(--hc-echelle, 1)); letter-spacing: .04em; }

/* ── Le formulaire ── */
.hc-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.hc-styles input, .hc-nombres input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hc-styles label {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; row-gap: .1rem;
  padding: .8rem 1rem; min-height: 4.4rem; cursor: pointer; font-weight: 400;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: .8rem;
}
.hc-styles input:checked + label, .hc-nombres input:checked + label { border-color: rgb(var(--color-foreground)); }
.hc-styles input:focus-visible + label, .hc-nombres input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.hc-styles__nom { font-weight: 600; }
.hc-styles small { grid-column: 2; opacity: .75; font-size: 1.2rem; }
/* L'échantillon montre le papier, une pastille et un bout de chemin. */
.hc-echantillon {
  grid-row: span 2; width: 4.4rem; height: 4.4rem; border-radius: .6rem; display: grid; place-items: center;
  background: var(--h-fond); border: .1rem solid rgba(var(--color-foreground), .15);
}
.hc-echantillon span { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--h-accent); box-shadow: 0 0 0 .3rem var(--h-fond), 1.2rem 1rem 0 -.6rem var(--h-route); }

.hc-nombres { display: flex; flex-wrap: wrap; gap: .8rem; }
.hc-nombres label {
  display: grid; place-items: center; min-width: 4.4rem; min-height: 4.4rem; cursor: pointer; font-size: 1.6rem;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: .8rem;
}

.hc-bloc { border: 0; padding: 0; margin: 0; }
.hc-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.hc-ligne { border: .1rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: 1rem 1.2rem 1.2rem; }
.hc-ligne[hidden] { display: none; }
.hc-ligne__tete { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .4rem; }
.hc-ligne__nom { font-weight: 600; }
.hc-ligne__outils { display: flex; gap: .4rem; }
.hc-ligne__outils[hidden] { display: none; }
.hc-outil {
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem; padding: 0; cursor: pointer;
  border: .1rem solid rgba(var(--color-foreground), .25); border-radius: .8rem; background: transparent; color: inherit;
}
.hc-outil:disabled { opacity: .35; cursor: default; }
.hc-outil svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hc-outil svg circle { fill: currentColor; stroke: none; }
.hc-ligne__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
.hc-ligne__symbole { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .8rem; }
.hc-ligne__symbole label { grid-column: 1 / -1; }
.hc-ligne__picto { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: .1rem solid rgba(var(--color-foreground), .25); }
.hc-ligne__picto svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hc-ligne__petit { display: block; font-size: 1.3rem; opacity: .8; margin-bottom: .2rem; }
/* Sous 16 px, Safari zoome au focus d'un champ. */
.hc-ligne input, .hc-ligne select { width: 100%; font-size: 1.6rem; min-height: 4.4rem; }
.hc-idees { margin-top: 1rem; }
.hc-idees[hidden], .hc-phrases[hidden] { display: none; }
.hc-idees__liste, .hc-phrases { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.hc-idees__liste button, .hc-phrases button {
  min-height: 4.4rem; padding: .6rem 1.2rem; border-radius: 99rem; cursor: pointer; text-align: left;
  border: .1rem solid rgba(var(--color-foreground), .25); background: transparent; color: inherit; font: inherit; font-size: 1.4rem;
}
.hc-idees__liste button:hover, .hc-phrases button:hover { border-color: rgb(var(--color-foreground)); }