/* ═══════════════════════════ L'affiche calendrier 2027 ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`) : une mise en page
 * d'affiche et une police de plus n'ont rien à faire dans le chemin critique du reste du site.
 *
 * ── La police ──
 *
 * Anton, une capitale étroite et grasse : c'est la voix des affiches de concert et des
 * stickers, et c'est ce qui rend cette affiche **plus jeune que le reste de la gamme** — que
 * portent des romaines de faire-part. Sous licence SIL Open Font, récupérée une fois et servie
 * par nous (point 2), notice dans `public/fonts/OFL.txt`. Étroite, elle fait aussi tenir
 * « Tonton et la politique » en deux lignes dans un tiers de la largeur.
 *
 * ── Les palettes ──
 *
 * Six, franches, écrites pour ce produit. **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-palette]` porte le choix du client ; le sélecteur ne nomme pas `.cal` exprès, pour que
 * les pastilles du formulaire se colorent avec les mêmes variables.
 */
@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;
}

/* --k-fond : le papier ; --k-encre : le texte ; --k-accent : le grand nombre et les noms des
   mois ; --k-accent2 : les week-ends, le tampon et le trait de feutre des dates entourées ;
   --k-ombre : le décalage du tracé, qui imite un repérage d'impression ; --k-filet : les traits ;
   --k-graisse : Anton n'a qu'une graisse — lui en demander une autre ferait un faux gras. */
[data-palette="Fluo"] {
  --k-fond: #111112; --k-encre: #f4f1ea; --k-accent: #e6ff3a; --k-accent2: #ff4fa3;
  --k-ombre: transparent; --k-filet: #3a3a3d; --k-police: "Anton"; --k-graisse: 400;
}
[data-palette="Riso"] {
  --k-fond: #f4ede0; --k-encre: #2440c8; --k-accent: #ff4f7e; --k-accent2: #ff4f7e;
  --k-ombre: #2440c8; --k-filet: #c9c2e4; --k-police: "Anton"; --k-graisse: 400;
}
[data-palette="Acide"] {
  --k-fond: #d6fb3f; --k-encre: #121212; --k-accent: #121212; --k-accent2: #7330ff;
  --k-ombre: transparent; --k-filet: #9fbd2a; --k-police: "Anton"; --k-graisse: 400;
}
[data-palette="Bubblegum"] {
  --k-fond: #ffc9de; --k-encre: #4b0f45; --k-accent: #ff2d6f; --k-accent2: #7330ff;
  --k-ombre: transparent; --k-filet: #f29bbd; --k-police: "Fredoka"; --k-graisse: 600;
}
[data-palette="Minuit"] {
  --k-fond: #1d1548; --k-encre: #fdf1e1; --k-accent: #ff8c3f; --k-accent2: #ffd33f;
  --k-ombre: transparent; --k-filet: #3c3172; --k-police: "Anton"; --k-graisse: 400;
}
[data-palette="Brut"] {
  --k-fond: #ffffff; --k-encre: #0a0a0a; --k-accent: #0a0a0a; --k-accent2: #ff2b17;
  --k-ombre: transparent; --k-filet: #0a0a0a; --k-police: "Anton"; --k-graisse: 400;
}

/* ── 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 de la grille (`space-evenly`), jamais dans une taille de texte qui changerait
 * avec le format. */
.cal {
  --fond: var(--k-fond); --texte: var(--k-encre);
  padding: 5cqw 5.5cqw 4cqw;
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.1;
}
.cal p { margin: 0; }
.cal [hidden] { display: none !important; }

.cal__tete { display: flex; align-items: flex-end; gap: 3.2cqw; padding-bottom: 2.2cqw; border-bottom: .45cqw solid var(--k-encre); }
.cal__annee {
  position: relative; flex: none;
  font-family: var(--k-police), "Anton", Impact, sans-serif; font-weight: var(--k-graisse, 400);
  font-size: 14.5cqw; line-height: .78; letter-spacing: -.01em; color: var(--k-accent);
  text-shadow: .7cqw .5cqw 0 var(--k-ombre);
}
/* Le tampon : une pastille de travers sur le coin du millésime, comme un autocollant posé à la
   main. Il est dans le millésime pour ne jamais recouvrir le titre, quelle que soit sa longueur. */
.cal__tampon {
  position: absolute; top: -1.2cqw; right: -3.4cqw; transform: rotate(9deg);
  font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: 1.55cqw; letter-spacing: .08em;
  line-height: 1; text-transform: uppercase; white-space: nowrap; text-shadow: none;
  color: var(--k-fond); background: var(--k-accent2); padding: .75cqw 1.3cqw; border-radius: 9cqw;
}
.cal__titres { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1cqw; text-align: right; }
/* Deux lignes au plus, dans une boîte de deux lignes : c'est la hauteur fixe qui permet au
   script de mesurer un débordement — un texte libre de monter ne déborde jamais (la leçon des
   noces, en hauteur). Un titre court se pose en bas, contre le sous-titre. */
.cal__titre {
  width: 100%; height: 2.04em; display: flex; align-items: flex-end; justify-content: flex-end; text-wrap: balance;
  font-family: var(--k-police), "Anton", Impact, sans-serif; font-weight: var(--k-graisse, 400);
  font-size: calc(6.4cqw * var(--ech, 1)); line-height: 1.02; text-transform: uppercase; letter-spacing: .01em;
}
/* Le sous-titre et la phrase du bas tiennent sur **une** ligne : le script les resserre par
   paliers (`ajuster`, une ligne au plus), comme le titre. Un mot sans espace plus large que la
   ligne — « OnTAimeKevinOnTAimeKevin… » — débordait sinon du bord de l'affiche, et à
   l'impression il était coupé net. `overflow-wrap: anywhere` le fait passer à la ligne tant
   que le script n'a pas tourné, et c'est cette seconde ligne que le resserrement fait
   disparaître : la grille, calée au pixel au 30 × 40, ne perd rien de sa hauteur. */
.cal__sous { font-size: calc(2.3cqw * var(--ech, 1)); font-weight: 600; letter-spacing: .02em; opacity: .85; overflow-wrap: anywhere; }

.cal__grille {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 4cqw; align-content: space-evenly; padding-top: 1cqw;
}
.cal__mois { display: flex; flex-direction: column; min-width: 0; padding: .8cqw 0; }
.cal__vrai { font-size: 1.45cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
/* Le nom du mois : deux lignes au plus, collées sur la grille des jours. La tête du mois a la
   hauteur d'un petit nom et de deux lignes, et tout s'y pose en bas : le petit nom reste juste
   au-dessus du grand, qu'il fasse une ligne ou deux, et les grilles des trois mois d'une rangée
   commencent à la même hauteur. Le script resserre ce qui ne tient pas en deux lignes.
   **L'interligne n'est pas serré à 1 comme sur une affiche de concert** : Anton a une tête et
   un pied bien plus hauts que son corps, et à 1,02 ses capitales mordaient la rangée L M M J
   en dessous et, sur deux lignes, le petit nom du mois au-dessus. */
.cal__tete-mois { height: 9.6cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: .35cqw; margin-bottom: 1.3cqw; }
.cal__surnom {
  font-family: var(--k-police), "Anton", Impact, sans-serif; font-weight: var(--k-graisse, 400);
  font-size: calc(3.3cqw * var(--ech, 1)); line-height: 1.12; text-transform: uppercase; text-wrap: balance;
  color: var(--k-accent); text-shadow: .17cqw .13cqw 0 var(--k-ombre);
}
/* Au plancher seulement : un mot de vingt-quatre signes sans espace se coupe plutôt que de sortir. */
.cal--coupe { overflow-wrap: anywhere; }
.cal__jours {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: .12cqw;
  font-size: 1.4cqw; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center;
}
.cal__initiale { font-weight: 800; font-size: 1.15cqw; opacity: .55; padding-bottom: .45cqw; border-bottom: .2cqw solid var(--k-filet); margin-bottom: .35cqw; }
.cal__jour { position: relative; padding: .2cqw 0; }
.cal__jour--we { color: var(--k-accent2); }
/* Le trait de feutre : un cercle un peu de travers, jamais parfait — c'est une main qui l'a
   tracé. Il déborde de sa case sans la pousser. */
.cal__jour--entoure::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3.2cqw; height: 2.4cqw;
  transform: translate(-50%, -50%) rotate(-11deg);
  border: .32cqw solid var(--k-accent2); border-radius: 52% 46% 55% 43% / 50% 55% 45% 50%;
}
.cal__phrase { margin-top: 1.3cqw; text-align: center; font-size: calc(2.5cqw * var(--ech, 1)); font-weight: 700; letter-spacing: .01em; overflow-wrap: anywhere; }

/* Brut : chaque mois dans sa case, filets pleins, comme une grille de journal. */
/* Les cases, leurs filets et l'air au-dessus de la grille coûtent de la hauteur, que le 30 × 40
   — le plus trapu des formats, et le plus vendu — n'avait pas : la grille débordait sur la
   phrase du bas, qui recouvrait quatorze jours de la dernière rangée (relevé le 26 sept. 2026
   sur la vitrine). D'où des marges plus serrées ici que dans les autres styles, et une tête de
   mois un peu plus basse, qui tient encore un nom sur deux lignes. */
[data-palette="Brut"] .cal__grille { column-gap: 0; row-gap: 0; border-left: .35cqw solid var(--k-filet); border-top: .35cqw solid var(--k-filet); margin-top: 1.4cqw; padding-top: 0; }
[data-palette="Brut"] .cal__mois { padding: .6cqw 1.4cqw .7cqw; border-right: .35cqw solid var(--k-filet); border-bottom: .35cqw solid var(--k-filet); }
[data-palette="Brut"] .cal__tete-mois { height: 8.8cqw; margin-bottom: 1cqw; }
[data-palette="Brut"] .cal__tete { border-bottom: 0; padding-bottom: 0; }
/* Bubblegum : la ronde Fredoka n'a pas la hauteur d'Anton, on la laisse en casse normale. */
[data-palette="Bubblegum"] .cal__surnom, [data-palette="Bubblegum"] .cal__titre { text-transform: none; }

/* Le mois qu'on est en train de renommer se montre sur l'aperçu. Seulement après un geste du
   client (le script pose la classe au focus) : la page de fabrication, où personne ne touche
   rien, ne l'imprime jamais. */
.cal__mois--actif { outline: .5cqw dashed var(--k-accent2); outline-offset: .6cqw; border-radius: 1cqw; }

/* ── Le formulaire ── */
.cal-bloc { gap: .8rem; }
.cal-bloc__aide { margin: 0; font-size: 1.3rem; color: rgba(var(--color-foreground), .7); }
.cal-barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cal-barre[hidden], .cal-idees[hidden], .cal-de[hidden] { display: none; }
.cal-progression { margin: 0; font-size: 1.3rem; font-weight: 600; }
.cal-hasard-tout {
  min-height: 4.4rem; padding: .6rem 1.4rem; border-radius: 99rem; cursor: pointer;
  font: inherit; font-size: 1.4rem; font-weight: 700;
  background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border: 0;
}
.cal-puces { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; }
.cal-puce {
  display: grid; place-items: center; min-height: 4.4rem; border-radius: .6rem; text-decoration: none;
  font-size: 1.3rem; font-weight: 700; color: rgb(var(--color-foreground));
  border: .1rem solid rgba(var(--color-foreground), .25);
}
.cal-puce--pleine { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border-color: transparent; }
.cal-puce--courante { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .1rem; }

/* Les douze cartes défilent au doigt : une carte par écran de téléphone, la suivante qui
   dépasse à droite pour dire qu'il y a autre chose à voir. Pas de marge négative : elle
   élargirait le document entier (point 6 bis). */
.cal-defile {
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: .2rem .2rem 1rem; scroll-padding-inline: .2rem;
}
.cal-defile:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.cal-carte {
  scroll-snap-align: start; display: grid; gap: .7rem; align-content: start;
  padding: 1.2rem; border-radius: 1rem; border: .1rem solid rgba(var(--color-foreground), .2);
  background: rgba(var(--color-foreground), .03); scroll-margin-top: 8rem;
}
.cal-carte__tete { display: flex; align-items: baseline; justify-content: space-between; }
.affiche__champ .cal-carte__nom { font-size: 1.8rem; font-weight: 800; text-transform: capitalize; margin: 0; }
.cal-carte__rang { font-size: 1.2rem; color: rgba(var(--color-foreground), .6); font-variant-numeric: tabular-nums; }
.cal-carte__saisie { display: flex; gap: .6rem; }
/* 1,6 rem et non 1,4 : sous 16 px, Safari zoome la page au focus d'un champ — la moitié de
   l'aperçu sort de l'écran à chaque mois renommé. */
.affiche__champ .cal-carte__saisie input { font-size: 1.6rem; font-weight: 600; min-width: 0; }
.cal-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));
}
.cal-carte__compte { margin: 0; font-size: 1.2rem; color: rgba(var(--color-foreground), .6); font-variant-numeric: tabular-nums; }
.cal-carte__compte--plein { color: rgb(var(--color-foreground)); font-weight: 700; }
.cal-idees { display: flex; flex-wrap: wrap; gap: .5rem; }
.cal-idee {
  min-height: 4.4rem; padding: .5rem 1.1rem; border-radius: 99rem; cursor: pointer;
  font: inherit; font-size: 1.3rem; line-height: 1.2; text-align: left;
  border: .1rem solid rgba(var(--color-foreground), .3); background: rgb(var(--color-background)); color: inherit;
}
.cal-idee[aria-pressed="true"] { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border-color: transparent; }
.cal-idee:focus-visible, .cal-de:focus-visible, .cal-puce:focus-visible, .cal-hasard-tout:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.cal-carte__nav { display: flex; justify-content: space-between; gap: 1rem; }
.cal-nav { display: inline-flex; align-items: center; min-height: 4.4rem; font-size: 1.3rem; font-weight: 600; color: inherit; }
.cal-nav--suivant { margin-left: auto; }

.cal-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
/* La largeur des boutons radio est posée ici, et il le faut : la feuille générale fait des
   champs pleine largeur (`.affiche__champ input`), et sortis du flux ils gardaient 100 % à leur
   abscisse — le défilement latéral que les naissances ont payé. */
.cal-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cal-styles label {
  display: flex; align-items: center; gap: .8rem; cursor: pointer; margin: 0;
  font-size: 1.3rem; font-weight: 600; min-height: 4.4rem;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .5rem .7rem;
}
.cal-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.cal-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.cal-pastille {
  flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: .6rem;
  background: var(--k-fond); color: var(--k-accent); border: .1rem solid rgba(var(--color-foreground), .15);
  font-family: var(--k-police), "Anton", Impact, sans-serif; font-weight: var(--k-graisse, 400); font-size: 1.7rem;
  box-shadow: inset 0 -.5rem 0 var(--k-accent2);
}
.cal-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.affiche__champ .cal-dates input { font-size: 1.6rem; padding: .7rem .4rem; min-width: 0; }
@media screen and (max-width: 560px) {
  /* Douze puces sur une ligne font 24 px de large à 390 px : sous les 44 px que se donne la
     maison. Deux rangées de six. */
  .cal-puces { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media screen and (max-width: 420px) {
  .cal-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-dates { grid-template-columns: 1fr; }
}
@media screen and (min-width: 990px) {
  .cal-defile { grid-auto-columns: 92%; }
}
@media (prefers-reduced-motion: no-preference) {
  .cal-defile { scroll-behavior: smooth; }
  .cal__surnom--nouveau { animation: cal-pop .35s ease-out; }
}
@keyframes cal-pop { from { transform: scale(1.12) rotate(-2deg); } to { transform: none; } }