/* ═══════════════════════ La lumière de notre jour ═══════════════════════
 *
 * La course du Soleil un jour donné, en un lieu donné : un ciel peint de la vraie hauteur du Soleil
 * à chaque heure, son arc, l'horizon, puis six repères chiffrés. Servie **seulement** sur sa fiche
 * (`views/product-affiche.liquid`).
 *
 * ── Les couleurs ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : toutes ici, en tête, et nulle
 * part ailleurs. Le dessin (`lumiere-calcul.mjs`) ne porte que des classes et des références à
 * `--lj-z0` … `--lj-z6`, **les sept couleurs du ciel** : de la nuit (Soleil sous −18°) au haut soleil
 * (au-dessus de 45°), en passant par le crépuscule astronomique, nautique, civil, le lever (−0,8°),
 * l'heure dorée (6°) et le plein jour (20°). Le ciel s'en tire par interpolation continue, à partir
 * de la hauteur du Soleil à chaque heure : changer de style change la palette, jamais le dessin.
 *
 * Le reste, par style : --lj-fond le papier ; --lj-texte l'encre ; --lj-doux l'encre secondaire ;
 * --lj-accent le filet et les petites capitales ; --lj-trace l'arc du Soleil ; --lj-dore ses
 * tronçons d'heure dorée ; --lj-sol le sol sous l'horizon et --lj-sol-texte ce qui s'y écrit ;
 * --lj-voile l'ombre du haut du ciel, --lj-brume la clarté de l'horizon ; --lj-etoile les étoiles.
 * Toutes les paires texte/fond sont mesurées par `tests/lumiere.test.js`.
 */
.lj, .lj-styles {
  --lj-astre-1: #fffbe6; --lj-astre-2: #ffd45c; --lj-halo: #ffe9a8;
  /* Le chiffre de la hauteur, posé sur le ciel du jour (clair ou foncé) : blanc contouré, sauf en Encre. */
  --lj-max-texte: #ffffff; --lj-astre-trait: none; --lj-quadrillage: transparent;
}

/* ── Aube : papier chaud, ciel d'une aube de juin, fenêtre en arche ── */
[data-style="Aube"] {
  --lj-fond: #f6efe3; --lj-texte: #2a2133; --lj-doux: #5f5365; --lj-accent: #9a4f3a; --lj-filet: rgba(154, 79, 58, .45);
  --lj-z0: #0d1433; --lj-z1: #1c2860; --lj-z2: #4a4392; --lj-z3: #ea7f6e; --lj-z4: #f7b95f; --lj-z5: #9dcbe9; --lj-z6: #4f9bd8;
  --lj-voile: #0b1030; --lj-brume: #fff0d2; --lj-etoile: #ffffff;
  --lj-trace: #ffffff; --lj-dore: #ffd45c; --lj-sol: #2a2133; --lj-sol-texte: #f6efe3; --lj-sol-doux: #cbbfd2;
  --lj-horizon: #fff7e8; --lj-rep: rgba(255, 255, 255, .34); --lj-rep-texte: #ffffff; --lj-contour: rgba(20, 14, 40, .5);
}
/* ── Crépuscule : un soir sans fin, magenta et ambre sur aubergine ── */
[data-style="Crépuscule"] {
  --lj-fond: #170d28; --lj-texte: #fbe9d4; --lj-doux: #d3b9c9; --lj-accent: #ffb25a; --lj-filet: rgba(255, 178, 90, .5);
  --lj-z0: #12081f; --lj-z1: #2b1352; --lj-z2: #6a1f72; --lj-z3: #f2527c; --lj-z4: #ff9d4a; --lj-z5: #ffcf7a; --lj-z6: #ffe6b0;
  --lj-voile: #12081f; --lj-brume: #ffc27a; --lj-etoile: #fff1dc;
  --lj-trace: #fff6e6; --lj-dore: #ffffff; --lj-sol: #0d0618; --lj-sol-texte: #fbe9d4; --lj-sol-doux: #c9aebf;
  --lj-horizon: #ffb25a; --lj-rep: rgba(255, 236, 214, .3); --lj-rep-texte: #fff1dc; --lj-contour: rgba(18, 8, 31, .55);
}
/* ── Plan : une épure bleue, traits blancs, le ciel en camaïeu ── */
[data-style="Plan"] {
  --lj-fond: #0f3563; --lj-texte: #eaf3ff; --lj-doux: #a9c6e6; --lj-accent: #8fc4ff; --lj-filet: rgba(143, 196, 255, .55);
  --lj-z0: #082748; --lj-z1: #0b3157; --lj-z2: #12457a; --lj-z3: #1d5c97; --lj-z4: #2f78b4; --lj-z5: #4d96ca; --lj-z6: #6fb0dc;
  --lj-voile: #061d38; --lj-brume: #b7dcf5; --lj-etoile: #eaf3ff;
  --lj-trace: #ffffff; --lj-dore: #ffe27a; --lj-sol: #0a2a4f; --lj-sol-texte: #eaf3ff; --lj-sol-doux: #a9c6e6;
  --lj-quadrillage: rgba(143, 196, 255, .09); --lj-horizon: #eaf3ff; --lj-rep: rgba(234, 243, 255, .38); --lj-rep-texte: #eaf3ff; --lj-contour: rgba(6, 29, 56, .6);
}
/* ── Encre : le noir et le blanc d'un tirage photographique ── */
[data-style="Encre"] {
  --lj-fond: #fbfaf7; --lj-texte: #141414; --lj-doux: #55524d; --lj-accent: #141414; --lj-filet: #141414;
  --lj-z0: #0c0c0c; --lj-z1: #262626; --lj-z2: #4a4a4a; --lj-z3: #7c7c7c; --lj-z4: #a8a8a8; --lj-z5: #cfcfcf; --lj-z6: #e9e9e9;
  --lj-voile: #000000; --lj-brume: #ffffff; --lj-etoile: #ffffff;
  --lj-trace: #141414; --lj-dore: #ffffff; --lj-sol: #141414; --lj-sol-texte: #fbfaf7; --lj-sol-doux: #c4c0b8;
  --lj-horizon: #141414; --lj-rep: rgba(20, 20, 20, .28); --lj-rep-texte: #141414; --lj-contour: rgba(255, 255, 255, .85);
  --lj-astre-1: #ffffff; --lj-astre-2: #ffffff; --lj-halo: #ffffff; --lj-max-texte: #141414; --lj-astre-trait: #141414;
}

/* ── 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, les prénoms, le lieu et la date), le ciel — le héros —, les six repères, la phrase, le
 * pied. Les espaces qui restent sur un format haut se répartissent entre les blocs
 * (`space-between`). Le ciel cède quand la place manque (`data-serre`), jamais les chiffres.
 */
.lj {
  --fond: var(--lj-fond); --texte: var(--lj-texte);
  font-family: "Josefin Sans", system-ui, sans-serif; text-align: center;
  align-items: center; justify-content: space-between; padding: 6.5cqw 6cqw 5cqw;
}
.lj > * { flex: none; max-width: 100%; }
.lj p, .lj ul { margin: 0; }

.lj__tete { width: 100%; display: flex; flex-direction: column; align-items: center; }
.lj__kicker { color: var(--lj-accent); font-weight: 400; text-transform: uppercase; font-size: 2.3cqw; letter-spacing: .36em; padding-left: .36em; white-space: nowrap; }
/* Les prénoms : la taille suit le nombre de signes (`--n`, posé par le calcul), bornée des deux côtés ;
   une page sans script ne déborde déjà pas, et l'éditeur resserre au pixel. Pleine largeur : un enfant
   d'une colonne centrée est large comme son texte, et la mesure ne verrait jamais de débordement. */
.lj__prenoms {
  width: 100%; margin-top: 2.2cqw; white-space: nowrap; line-height: 1.1;
  font-size: clamp(3cqw, calc(120cqw / var(--n, 12)), 9cqw);
}
.lj__ou {
  margin-top: 2.4cqw; display: flex; justify-content: center; align-items: baseline; gap: 2.2cqw; width: 100%;
  font-size: calc(2.7cqw * var(--lj-ou, 1)); white-space: nowrap;
}
.lj__lieu { flex: none; color: var(--lj-texte); text-transform: uppercase; letter-spacing: .2em; font-weight: 500; }
.lj__sep { color: var(--lj-accent); }
.lj__date { flex: none; color: var(--lj-doux); font-variant-numeric: lining-nums; letter-spacing: .06em; }

/* Le ciel, héros de l'affiche. */
.lj__ciel { width: 100%; display: flex; justify-content: center; }
.lj__svg { display: block; width: calc(100% * var(--lj-hero, 1)); height: auto; overflow: hidden; }
.lj__vide { width: 100%; aspect-ratio: 88 / 63; border: 1px dashed var(--lj-filet); }

/* Le dessin ne porte que des classes. */
.lj__s { stop-color: color-mix(in srgb, var(--b) var(--k), var(--a)); }
.lj__voile-1 { stop-color: var(--lj-voile); stop-opacity: .42; }
.lj__voile-2 { stop-color: var(--lj-voile); stop-opacity: 0; }
.lj__brume { stop-color: var(--lj-brume); stop-opacity: .38; }
.lj__halo-1 { stop-color: var(--lj-halo); stop-opacity: .4; }
.lj__halo-2 { stop-color: var(--lj-halo); stop-opacity: 0; }
.lj__astre-1 { stop-color: var(--lj-astre-1); }
.lj__astre-2 { stop-color: var(--lj-astre-2); }
.lj__etoile { fill: var(--lj-etoile); }
.lj__rep { stroke: var(--lj-rep); stroke-width: .18; stroke-dasharray: .6 1.2; fill: none; }
.lj__rep--v { stroke-dasharray: none; stroke-width: .12; }
.lj__rep-txt { fill: var(--lj-rep-texte); font-size: 2.1px; letter-spacing: .06em; stroke: var(--lj-contour); stroke-width: .5px; paint-order: stroke; font-variant-numeric: lining-nums; }
.lj__trace { fill: none; stroke: var(--lj-trace); stroke-width: .75; stroke-linecap: round; stroke-linejoin: round; }
.lj__doree { fill: none; stroke: var(--lj-dore); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lj__trace-sous { fill: none; stroke: var(--lj-sol-doux); stroke-width: .35; stroke-dasharray: 1 1.4; opacity: .85; }
.lj__sol { fill: var(--lj-sol); }
.lj__horizon { stroke: var(--lj-horizon); stroke-width: .5; }
.lj__halo { fill: url(#lj-halo); }
.lj__astre { fill: url(#lj-astre); stroke: var(--lj-astre-trait); stroke-width: .5; }
.lj__sous { fill: none; stroke: var(--lj-sol-doux); stroke-width: .5; stroke-dasharray: .8 .8; }
.lj__max { stroke: var(--lj-trace); stroke-width: .22; stroke-dasharray: .7 .9; }
.lj__max-txt { fill: var(--lj-max-texte); font-size: 3.1px; font-weight: 500; stroke: var(--lj-contour); stroke-width: .7px; paint-order: stroke; font-variant-numeric: lining-nums; letter-spacing: .03em; }
.lj__ev { fill: var(--lj-fond); stroke: var(--lj-horizon); stroke-width: .5; }
.lj__rep-ev { stroke: var(--lj-sol-doux); stroke-width: .2; }
.lj__ev-cle { fill: var(--lj-sol-doux); font-size: 2.1px; text-transform: uppercase; letter-spacing: .24em; }
.lj__ev-heure { fill: var(--lj-sol-texte); font-size: 4.4px; font-weight: 500; font-variant-numeric: lining-nums; }
.lj__jour { font-size: 2.2px; baseline-shift: super; fill: var(--lj-sol-doux); }
.lj__tic { stroke: var(--lj-sol-doux); stroke-width: .2; }
.lj__heure-num { fill: var(--lj-sol-doux); font-size: 2.1px; text-anchor: middle; font-variant-numeric: lining-nums; }
.lj__heure-num--0 { text-anchor: start; }
.lj__ev-cle, .lj__ev-heure { text-rendering: geometricPrecision; }

/* Au-delà des cercles polaires : le bandeau qui dit pourquoi il n'y a ni lever ni coucher. */
.lj__polaire { width: 100%; padding: 1.8cqw 3cqw; border-top: max(1px, .2cqw) solid var(--lj-filet); border-bottom: max(1px, .2cqw) solid var(--lj-filet); }
.lj__polaire-titre { color: var(--lj-accent); text-transform: uppercase; letter-spacing: .3em; padding-left: .3em; font-weight: 500; font-size: 3cqw; }
.lj__polaire-det { margin-top: .8cqw; color: var(--lj-doux); font-size: 2.3cqw; }

/* Les six repères : deux rangées de trois. */
.lj__faits { list-style: none; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3cqw; border-top: max(1px, .2cqw) solid var(--lj-filet); padding-top: 3cqw; }
.lj__faits--polaire { row-gap: 0; border-top: 0; padding-top: 2.4cqw; }
.lj__f { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 1.2cqw; }
.lj__f + .lj__f { border-left: max(1px, .15cqw) solid var(--lj-filet); }
.lj__f:nth-child(4) { border-left: 0; }
.lj__ico { width: 4.4cqw; height: 4.4cqw; fill: none; stroke: var(--lj-accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lj__f-lib { margin-top: 1cqw; color: var(--lj-accent); text-transform: uppercase; font-size: 1.8cqw; letter-spacing: .09em; padding-left: .09em; line-height: 1.25; text-wrap: balance; }
.lj__f-val { margin-top: .9cqw; font-size: 5.2cqw; font-weight: 500; line-height: 1.1; font-variant-numeric: lining-nums; white-space: nowrap; }
.lj__f--doree .lj__f-val { font-size: 3.5cqw; padding-top: 1.1cqw; }
.lj__jour { font-size: .55em; vertical-align: super; color: var(--lj-doux); }

.lj__phrase { color: var(--lj-accent); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: calc(4.6cqw * var(--lj-ph, 1)); line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance; }
.lj__phrase:empty { display: none; }
.lj__pied { width: 100%; display: flex; flex-direction: column; align-items: center; }
.lj__methode { color: var(--lj-doux); font-size: 1.7cqw; letter-spacing: .04em; text-wrap: balance; }
.lj__utc { margin-top: .8cqw; color: var(--lj-doux); font-size: 1.7cqw; letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.lj__utc:empty { display: none; }

/* ── Aube : Cormorant en italique pour les prénoms, une fenêtre en arche ── */
.lj[data-style="Aube"] .lj__prenoms { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; }
.lj[data-style="Aube"] .lj__svg { border-radius: 44cqw 44cqw 0 0; }
.lj[data-style="Aube"] .lj__f-val { font-family: "Playfair Display", Georgia, serif; font-weight: 500; }
.lj[data-style="Aube"] .lj__ou { font-family: "Cormorant Garamond", Georgia, serif; font-size: calc(3.4cqw * var(--lj-ou, 1)); }
/* ── Crépuscule : capitales fines et espacées, cadre à filet d'ambre ── */
.lj[data-style="Crépuscule"] .lj__prenoms { font-weight: 300; text-transform: uppercase; letter-spacing: .2em; padding-left: .2em; font-size: clamp(3cqw, calc(88cqw / var(--n, 12)), 6.4cqw); }
.lj[data-style="Crépuscule"] .lj__svg { box-shadow: 0 0 0 max(1px, .22cqw) var(--lj-accent); }
.lj[data-style="Crépuscule"] .lj__f-val { font-weight: 300; }
/* ── Plan : une épure, cotes en capitales condensées ── */
.lj[data-style="Plan"] { font-family: "Roboto Condensed", "Inter", sans-serif; background-image: linear-gradient(var(--lj-quadrillage) 1px, transparent 1px), linear-gradient(90deg, var(--lj-quadrillage) 1px, transparent 1px); background-size: 4cqw 4cqw; }
.lj[data-style="Plan"] .lj__prenoms { font-weight: 300; text-transform: uppercase; letter-spacing: .14em; padding-left: .14em; font-size: clamp(3cqw, calc(92cqw / var(--n, 12)), 7cqw); }
.lj[data-style="Plan"] .lj__svg { box-shadow: 0 0 0 max(1px, .25cqw) var(--lj-accent); }
.lj[data-style="Plan"] .lj__ciel { margin-bottom: 1.6cqw; }
.lj[data-style="Plan"] .lj__f { border: max(1px, .15cqw) solid var(--lj-filet); padding-block: 1.6cqw; }
.lj[data-style="Plan"] .lj__f + .lj__f { border-left: max(1px, .15cqw) solid var(--lj-filet); }
.lj[data-style="Plan"] .lj__faits { border-top: 0; padding-top: 0; row-gap: 0; gap: 1.6cqw; }
.lj[data-style="Plan"] .lj__phrase { font-family: "Roboto Condensed", sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: calc(3.4cqw * var(--lj-ph, 1)); }
/* ── Encre : très noir, très blanc, de grands chiffres ── */
.lj[data-style="Encre"] { font-family: "Inter", system-ui, sans-serif; }
.lj[data-style="Encre"] .lj__prenoms { font-weight: 800; letter-spacing: -.03em; font-size: clamp(3cqw, calc(130cqw / var(--n, 12)), 9.5cqw); }
.lj[data-style="Encre"] .lj__kicker { font-weight: 600; }
.lj[data-style="Encre"] .lj__svg { box-shadow: 0 0 0 max(2px, .5cqw) var(--lj-texte); }
.lj[data-style="Encre"] .lj__f-val { font-weight: 800; letter-spacing: -.03em; font-size: 5.8cqw; }
.lj[data-style="Encre"] .lj__f--doree .lj__f-val { font-size: 3.7cqw; }
.lj[data-style="Encre"] .lj__faits { border-top: max(2px, .5cqw) solid var(--lj-texte); }
.lj[data-style="Encre"] .lj__phrase { font-family: "Playfair Display", Georgia, serif; font-style: italic; color: var(--lj-texte); }

/* ── Le formulaire ── */
.lj-styles { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.lj-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lj-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; min-width: 7rem;
  font-size: 1.2rem; font-weight: 400; color: rgba(var(--color-foreground), .7);
  border: .15rem solid transparent; border-radius: .8rem; padding: .6rem;
}
.lj-styles input:checked + label { border-color: rgb(var(--color-accent)); color: rgb(var(--color-foreground)); }
.lj-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* La pastille montre ce que vend le style : sa palette du ciel, de la nuit au plein jour. */
.lj-pastille {
  width: 6rem; height: 3.8rem; border-radius: .6rem; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--lj-z0), var(--lj-z1) 18%, var(--lj-z2) 30%, var(--lj-z3) 42%, var(--lj-z4) 54%, var(--lj-z5) 76%, var(--lj-z6));
  border: .1rem solid rgba(var(--color-foreground), .2);
}
.lj-pastille::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: var(--lj-sol); }
.lj-lieu__recherche { display: flex; gap: .8rem; }
.lj-lieu__recherche input { flex: 1; min-width: 0; }
.lj-etat { min-height: 1.8rem; margin: .6rem 0 0; font-size: 1.3rem; color: rgba(var(--color-foreground), .7); }
.lj-etat[data-erreur] { color: rgb(var(--erreur, 160 30 30)); }
.lj-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.lj-idee { font: inherit; font-size: 1.3rem; padding: .8rem 1.2rem; min-height: 4.4rem; border-radius: 999px; border: .1rem solid rgba(var(--color-foreground), .25); background: transparent; color: inherit; cursor: pointer; text-align: left; }
.lj-idee:hover { border-color: rgb(var(--color-accent)); }
.lj-idee:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.lj-lieu input, .lj-quand input { font-size: 1.6rem; }