/* ═══════════════════════════════ « Votre année de naissance » ═══════════════════════════════
 *
 * 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 frise des douze mois, quatre styles ──
 *
 * Le contenu et la structure ne bougent pas ; chaque style a sa palette, ses polices et son
 * accent. La maquette (`references/annee-de-naissance-faits/maquette/`) fait foi :
 * - **Claire** : blanc cassé, vert-de-gris et encre verte, Cormorant — le style que la fiche ouvre ;
 * - **Nuit** : bleu nuit dégradé, or et crème, Cormorant ;
 * - **Vieux papier** : papier jauni, brun et brique, Courier Prime, double filet, grain ;
 * - **Pop** : bandeau jaune, bleu électrique et rose, Anton et Inter, ombres franches.
 *
 * Toutes les polices sont servies par nous (point 2) : Cormorant Garamond, Roboto Condensed et Inter
 * par `theme.css`, Anton et Courier Prime ici. Les chiffres sont **alignés** (`lining-nums`) : le « 9 »
 * élzévirien de Cormorant mord sur la ligne du dessous.
 *
 * ── 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 `.an` exprès, pour que les
 * échantillons du formulaire se colorent avec les mêmes variables.
 *
 * --a-papier : le fond ; --a-fond : ce qui se peint dessus (le dégradé) ; --a-encre : le grand texte ;
 * --a-accent : les dates, le dernier chiffre de l'année ; --a-or : le jour de naissance et le rond ;
 * --a-gris : le texte en retrait ; --a-trait : l'axe et les filets ; --a-txt : le texte des faits ;
 * --a-pil-bg / --a-pil-txt : la pastille d'un mois ; --a-rond : le fond du médaillon ; --a-bandeau :
 * l'aplat de la tête (le Pop seul) ; --a-point : le cœur des points de l'axe ; --a-cadre : le double
 * filet (le Vieux papier seul) ; --a-ombre : l'ombre franche du médaillon (le Pop seul).
 */
@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;
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/courier-prime-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: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/courier-prime-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;
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/courier-prime-bold-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: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/courier-prime-bold-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;
}

[data-style="Claire"] {
  --a-papier: #f2f5f1; --a-fond: none; --a-encre: #15302c; --a-accent: #0b6e69; --a-or: #b96d17; --a-gris: #55675f; --a-trait: #b9c8c3;
  --a-txt: #2c4440; --a-pil-bg: #15302c; --a-pil-txt: #ffffff; --a-rond: #ffffff; --a-bandeau: transparent; --a-point: #f2f5f1; --a-cadre: transparent; --a-ombre: transparent;
}
[data-style="Nuit"] {
  --a-papier: #0e1a2b; --a-fond: radial-gradient(ellipse at 30% 0, #1c3052 0, #0e1a2b 60%); --a-encre: #efe7d4; --a-accent: #e0b04f; --a-or: #e0b04f; --a-gris: #9fadc2; --a-trait: #38506d;
  --a-txt: #cfcab9; --a-pil-bg: #e0b04f; --a-pil-txt: #0e1a2b; --a-rond: #16263d; --a-bandeau: transparent; --a-point: #0e1a2b; --a-cadre: transparent; --a-ombre: transparent;
}
[data-style="Vieux papier"] {
  --a-papier: #e6d3a8; --a-fond: radial-gradient(ellipse at center, #efe0bc 0, #e4d0a4 65%, #d2b985 100%); --a-encre: #2c2012; --a-accent: #8a2a1c; --a-or: #8a2a1c; --a-gris: #5a4630; --a-trait: #a68d5e;
  --a-txt: #37281a; --a-pil-bg: #2c2012; --a-pil-txt: #ecdcb4; --a-rond: #efe3c4; --a-bandeau: transparent; --a-point: #e6d3a8; --a-cadre: #2c2012; --a-ombre: transparent;
}
[data-style="Pop"] {
  --a-papier: #fffdf5; --a-fond: none; --a-encre: #111111; --a-accent: #2447ff; --a-or: #ff3d6e; --a-gris: #444444; --a-trait: #111111;
  --a-txt: #222222; --a-pil-bg: #111111; --a-pil-txt: #ffd93b; --a-rond: #ffffff; --a-bandeau: #ffd93b; --a-point: #ffd93b; --a-cadre: transparent; --a-ombre: #2447ff;
}

/* ── La base, commune aux quatre ──
 *
 * Tout en `cqw`, la largeur de l'affiche : un A4 et un 70 × 100 sont la même frise à deux échelles.
 * Réglée sur le 30 × 40 (1 000 × 1 333, la maquette) ; l'air en plus des formats allongés se répartit
 * entre les rangées de la frise, jamais dans une taille de texte. **Le texte courant suit `--an-ech`**,
 * mesuré par l'éditeur : il repart de 1 à chaque mesure et ne descend que si quelque chose ne tient pas.
 */
.an {
  --fond: var(--a-papier); --texte: var(--a-encre); --an-ech: 1;
  /* La hauteur minimale d'une rangée de la frise : un fait en occupe deux. */
  --an-rangee: calc(5.4cqw * max(var(--an-ech), .72));
  position: relative; display: flex; flex-direction: column; padding: 0;
  background: var(--a-fond), var(--a-papier); color: var(--a-encre);
  font-family: "Cormorant Garamond", Georgia, serif; line-height: 1.2; text-align: left; font-variant-numeric: lining-nums;
}
.an :where(p, h2, h3, figure, small, b, i) { margin: 0; padding: 0; }
.an [hidden] { display: none !important; }
.an__in, .an__nom, .an__phrase { overflow-wrap: anywhere; }

/* `font:` remet à zéro les variantes numériques : les chiffres alignés se redisent après chaque raccourci. */
.an :is(.an__it h3, .an__it p, .an__phrase, .an__nom b, .an__une figcaption, .an__jour b, .an__initiale) { font-variant-numeric: lining-nums; }

/* La tête : l'année en grand dont le dernier chiffre prend l'accent, l'accroche, et la une. */
.an__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw; padding: 4.6cqw 5.2cqw 1.4cqw; }
.an__annee { font: 300 22.2cqw/.82 "Cormorant Garamond", Georgia, serif; font-variant-numeric: lining-nums; letter-spacing: -.045em; color: var(--a-encre); white-space: nowrap; }
.an__annee b { font-weight: 700; color: var(--a-accent); }
.an__sous { font: 600 calc(1.6cqw) / 1.3 "Roboto Condensed", "Inter", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--a-gris); margin-top: 1.6cqw; }
.an__une { width: 37.2cqw; flex: none; text-align: right; }
.an__une img { display: block; width: 100%; aspect-ratio: 372 / 196; object-fit: cover; border-radius: .3cqw; }
.an__une figcaption { font: italic 500 1.75cqw/1.25 "Cormorant Garamond", Georgia, serif; color: var(--a-gris); margin-top: .5cqw; }

/* Le corps : la frise, puis « Toute l'année ». */
.an__corps { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 5.2cqw; margin-top: 1.4cqw; }
.an__frise { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.an__frise::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: .2cqw; margin-left: -.1cqw; background: var(--a-trait); }
/* Un tronçon : une rangée de plus que de faits (le dernier fait déborde d'une rangée), les rangées se
   partagent la hauteur qui reste, entre un plancher et un plafond. `--n` vaut zéro quand il est vide. */
.an__seg {
  display: grid; grid-template-columns: 1fr 7cqw 1fr; grid-template-rows: repeat(var(--n, 0), minmax(0, 1fr));
  flex: var(--n, 0) 1 0; min-height: calc(var(--n, 0) * var(--an-rangee)); max-height: calc(var(--n, 0) * 9cqw); position: relative;
}
.an__it { position: relative; padding: 0 2.2cqw; min-width: 0; }
.an__it--g { grid-column: 1; text-align: right; }
.an__it--d { grid-column: 3; }
.an__it::after { content: ""; position: absolute; top: .3cqw; width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--a-point); border: .2cqw solid var(--a-accent); }
.an__it--g::after { right: -.5cqw; }
.an__it--d::after { left: -.5cqw; }
.an__it h3 { font: 700 calc(2.4cqw * var(--an-ech)) / 1.08 "Cormorant Garamond", Georgia, serif; margin-bottom: .2cqw; }
.an__it time { font: 700 calc(1.4cqw * var(--an-ech)) / 1 "Roboto Condensed", "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--a-accent); margin-right: .7cqw; vertical-align: .1cqw; }
.an__it p { font: 500 calc(1.85cqw * var(--an-ech)) / 1.18 "Cormorant Garamond", Georgia, serif; color: var(--a-txt); }
.an__mois {
  grid-column: 2; justify-self: center; align-self: start; z-index: 1; margin-top: .1cqw; background: var(--a-pil-bg); color: var(--a-pil-txt);
  font: 700 calc(1.3cqw * max(var(--an-ech), .8)) / 1 "Roboto Condensed", "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: .3cqw .5cqw; border-radius: .2cqw;
}

/* La naissance : la date en grand, le médaillon sur l'axe, le prénom et la phrase. */
.an__naiss { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 15cqw 1fr; align-items: center; flex: none; min-height: 15.6cqw; }
.an__jour { text-align: right; padding-right: 2cqw; }
.an__jour small { display: block; font: 700 1.6cqw/1 "Roboto Condensed", "Inter", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--a-gris); margin-bottom: .5cqw; }
.an__jour b { display: block; font: 300 7.2cqw/.9 "Cormorant Garamond", Georgia, serif; color: var(--a-or); font-variant-numeric: lining-nums; }
.an__jour span { display: block; margin-top: .4cqw; font: 700 1.6cqw/1 "Roboto Condensed", "Inter", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--a-encre); }
.an__rond {
  position: relative; width: 15cqw; height: 15cqw; border-radius: 50%; border: .4cqw solid var(--a-or); background: var(--a-rond); overflow: hidden;
  justify-self: center; box-shadow: .5cqw .5cqw 0 var(--a-ombre);
}
.an__rond img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--photo-x, 50%) var(--photo-y, 40%);
  transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-x, 50%) var(--photo-y, 40%);
}
.an__rond[data-photo] { touch-action: pan-y; cursor: grab; }
/* Sans photo, le médaillon porte l'initiale du prénom, en grand : c'est un cadre, pas un portrait. */
.an__initiale { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; font: 600 8cqw/1 "Cormorant Garamond", Georgia, serif; color: var(--a-accent); }
.an__nom { padding-left: 2cqw; min-width: 0; }
.an__nom b { display: block; width: 100%; font: 700 calc(5.8cqw * var(--ech-n, 1)) / .95 "Cormorant Garamond", Georgia, serif; color: var(--a-encre); }
.an__nom b span { display: block; white-space: nowrap; }
/* Deux lignes, quand une ligne ne tient pas même réduite : un prénom de vingt-quatre « W ». */
.an__nom b[data-deux] span { white-space: normal; overflow-wrap: anywhere; }
.an__phrase { display: block; margin-top: .4cqw; font: italic 600 2.2cqw/1.2 "Cormorant Garamond", Georgia, serif; color: var(--a-gris); }

/* « Toute l'année » : les faits qui n'ont que l'année, sans point sur l'axe. */
.an__toute { position: relative; z-index: 2; flex: none; margin-top: .6cqw; padding-top: 1cqw; border-top: .1cqw solid var(--a-trait); }
.an__toute-lib { font: 700 1.4cqw/1 "Roboto Condensed", "Inter", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--a-gris); margin-bottom: 1cqw; }
.an__toute-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw 3cqw; }
.an__it--t { padding: 0; text-align: left; }
.an__it--t::after { display: none; }

.an__pied {
  flex: none; display: flex; justify-content: space-between; gap: 2cqw; padding: 1cqw 5.2cqw 3cqw;
  font: 600 1.3cqw/1 "Roboto Condensed", "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--a-gris);
}

/* ── Vieux papier : le double filet, le grain, les photos passées au sépia, Courier Prime ── */
.an[data-style="Vieux papier"]::before { content: ""; position: absolute; inset: 1.6cqw; border: .4cqw double var(--a-cadre); pointer-events: none; z-index: 3; }
.an[data-style="Vieux papier"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; mix-blend-mode: multiply; z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .1  0 0 0 .9 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
}
.an[data-style="Vieux papier"] .an__une img, .an[data-style="Vieux papier"] .an__rond img { mix-blend-mode: multiply; filter: sepia(.6) saturate(.85) contrast(1.05); }
.an[data-style="Vieux papier"] :is(.an__it time, .an__sous, .an__pied, .an__mois, .an__jour small, .an__jour span, .an__toute-lib) { font-family: "Courier Prime", ui-monospace, monospace; }
.an[data-style="Vieux papier"] .an__it p { font-weight: 600; }
.an[data-style="Vieux papier"] .an__toute { border-top-color: var(--a-trait); }

/* ── Nuit : l'illustration posée sur un cadre ivoire, comme une gravure ── */
.an[data-style="Nuit"] .an__une img { background: var(--a-rond); padding: .5cqw; border: .1cqw solid var(--a-or); }

/* ── Pop : l'aplat jaune de la tête, Anton en capitales, Inter, ombre franche ── */
.an[data-style="Pop"] .an__tete { background: var(--a-bandeau); padding-top: 3.4cqw; padding-bottom: 1.4cqw; border-bottom: .3cqw solid var(--a-encre); }
.an[data-style="Pop"] .an__annee { font: 400 20cqw/.9 "Anton", Impact, sans-serif; letter-spacing: .01em; font-variant-numeric: normal; }
.an[data-style="Pop"] .an__annee b { font-weight: 400; }
.an[data-style="Pop"] .an__sous { color: var(--a-encre); font-family: "Inter", sans-serif; font-weight: 800; }
.an[data-style="Pop"] .an__une img { border: .3cqw solid var(--a-encre); }
.an[data-style="Pop"] .an__une figcaption { color: var(--a-encre); font: 500 1.5cqw/1.25 "Inter", sans-serif; }
.an[data-style="Pop"] .an__corps { margin-top: 1.6cqw; }
.an[data-style="Pop"] .an__frise::before { width: .3cqw; margin-left: -.15cqw; }
.an[data-style="Pop"] .an__it h3 { font: 400 calc(2.3cqw * var(--an-ech)) / 1.08 "Anton", Impact, sans-serif; letter-spacing: .015em; text-transform: uppercase; }
.an[data-style="Pop"] .an__it p { font: 500 calc(1.6cqw * var(--an-ech)) / 1.2 "Inter", sans-serif; }
.an[data-style="Pop"] .an__it time, .an[data-style="Pop"] .an__mois { font-family: "Inter", sans-serif; font-weight: 800; }
.an[data-style="Pop"] .an__it::after { border-color: var(--a-encre); }
.an[data-style="Pop"] .an__jour b { font: 400 8.4cqw/.9 "Anton", Impact, sans-serif; }
.an[data-style="Pop"] :is(.an__jour small, .an__jour span, .an__toute-lib, .an__pied) { font-family: "Inter", sans-serif; font-weight: 800; color: var(--a-encre); }
.an[data-style="Pop"] .an__rond { border-color: var(--a-encre); border-width: .4cqw; }
.an[data-style="Pop"] .an__initiale { font: 400 8cqw/1 "Anton", Impact, sans-serif; }
.an[data-style="Pop"] .an__nom b { font: 400 calc(6.4cqw * var(--ech-n, 1)) / .95 "Anton", Impact, sans-serif; text-transform: uppercase; color: var(--a-accent); }
.an[data-style="Pop"] .an__phrase { font: 700 1.9cqw/1.2 "Inter", sans-serif; font-style: normal; color: var(--a-encre); }
.an[data-style="Pop"] .an__toute { border-top-color: var(--a-encre); border-top-width: .1cqw; }

/* ═══════════════════════════════ Le formulaire ═══════════════════════════════ */
.an-section { border: 0; padding: 0; margin: 0 0 2.4rem; min-width: 0; }
.an-section > legend { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 2rem; padding: 0; margin-bottom: 1rem; }
.an-section > legend small { font-family: inherit; font-weight: 400; font-size: 1.3rem; }
.an-section input[type="text"], .an-section input[type="date"] { font-size: 1.6rem; }
.an-retour:empty { display: none; }
.an-retour { color: rgb(var(--rouge)); font-weight: 600; margin-top: .6rem; }
.an-etiquette { display: block; margin-bottom: .6rem; }
.an-choix { display: flex; gap: .8rem; }
.an-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.an-choix label {
  display: inline-flex; align-items: center; justify-content: center; min-height: 4.4rem; min-width: 8rem; padding: .6rem 1.6rem; cursor: pointer;
  border: .1rem solid rgba(var(--color-foreground), .3); border-radius: 99px; font-size: 1.5rem;
}
.an-choix input:checked + label { border-color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .2rem rgb(var(--color-foreground)); }
.an-choix input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.an-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.an-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.an-styles label {
  display: flex; flex-direction: column; gap: .2rem; min-height: 4.4rem; padding: 1rem 1.4rem; cursor: pointer;
  border: .1rem solid rgba(var(--color-foreground), .22); border-radius: .8rem;
  background: var(--a-fond), var(--a-papier); color: var(--a-encre); border-left: .8rem solid var(--a-accent);
}
.an-styles__nom { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.9rem; line-height: 1.1; }
.an-styles__ligne { font-size: 1.25rem; color: var(--a-gris); }
.an-styles [data-style="Pop"] .an-styles__nom { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; color: var(--a-accent); }
.an-styles [data-style="Vieux papier"] .an-styles__nom { font-family: "Courier Prime", ui-monospace, monospace; }
.an-styles input:checked + label { border-color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .2rem rgb(var(--color-foreground)); }
.an-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.an-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 1rem; }
.an-idee {
  font: inherit; font-size: 1.25rem; min-height: 4.4rem; padding: .6rem 1.2rem; cursor: pointer; text-align: left;
  background: none; color: inherit; border: .1rem dashed rgba(var(--color-foreground), .3); border-radius: 99px;
}
.an-idee:hover { border-style: solid; border-color: rgb(var(--color-foreground)); }
.an-de { font: inherit; min-height: 4.4rem; min-width: 4.4rem; cursor: pointer; background: none; color: inherit; border: .1rem solid rgba(var(--color-foreground), .3); border-radius: .6rem; }
/* Sur téléphone, les phrases défilent sur une rangée au doigt plutôt que de s'empiler. */
@media (max-width: 749px) {
  .an-idees { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .4rem; -webkit-overflow-scrolling: touch; }
  .an-idee { flex: none; scroll-snap-align: start; white-space: nowrap; }
}