/* ═══════════════════════════ 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;
}
.cal__sous { font-size: 2.3cqw; font-weight: 600; letter-spacing: .02em; opacity: .85; }

.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: 2.5cqw; font-weight: 700; letter-spacing: .01em; }

/* Brut : chaque mois dans sa case, filets pleins, comme une grille de journal. */
[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: 2.2cqw; padding-top: 0; }
[data-palette="Brut"] .cal__mois { padding: 1.2cqw 1.4cqw; border-right: .35cqw solid var(--k-filet); border-bottom: .35cqw solid var(--k-filet); }
[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; } }