/* ═══════════════════════════ L'affiche des bols bretons ═══════════════════════════
 *
 * 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 ──
 *
 * Damion, une écriture au pinceau : c'est la main qui peint un prénom sur un bol, et celle du
 * style Moderne (prénoms et sous-titre). Sous licence SIL Open Font, récupérée une fois et
 * servie par nous (point 2), notice dans `public/fonts/OFL.txt`. Le style Calligraphie écrit en
 * Pinyon Script et les capitales fines sont en Josefin Sans, toutes deux déjà déclarées par
 * `theme.css`.
 *
 * ── Les fonds ──
 *
 * Cinq, chacun avec sa couleur de texte (Fred, 26 sept. 2026). **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. Tous clairs, et c'est voulu : sur un fond marine, un bol marine
 * disparaîtrait. Les dix couleurs de bol, elles, vivent avec le dessin
 * (`public/js/bols-calcul.mjs`). `[data-fond]` ne nomme pas `.bols` exprès, pour que les
 * pastilles du formulaire se colorent avec les mêmes variables.
 */
@font-face {
  font-family: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-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: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-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;
}

/* --b-fond : le papier ; --b-texte : le titre ; --b-doux : le sous-titre, plus effacé. */
[data-fond="Brume"] { --b-fond: #d3dbea; --b-texte: #27366b; --b-doux: #7d8bab; }
[data-fond="Sable"] { --b-fond: #ead9c6; --b-texte: #2b3050; --b-doux: #9c8468; }
[data-fond="Crème"] { --b-fond: #f6f2e9; --b-texte: #1f1c1a; --b-doux: #8e877b; }
[data-fond="Sauge"] { --b-fond: #d8e1d0; --b-texte: #2f4030; --b-doux: #6f8763; }
[data-fond="Poudre"] { --b-fond: #f1dbd5; --b-texte: #5b2e33; --b-doux: #a9776f; }

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur, 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 place autour de la pile, jamais
 * dans une taille de texte qui changerait avec le format. */
.bols {
  --fond: var(--b-fond); --texte: var(--b-texte);
  padding: 7cqw 7cqw 7.5cqw;
  line-height: 1.1;
}
.bols p { margin: 0; }
/* La pile occupe tout ce que le titre laisse. Le SVG est posé en absolu : une hauteur en
   pourcentage ne se résout pas toujours dans un élément flexible, et la pile doit remplir
   exactement sa boîte pour que `xMidYMid meet` la centre. */
.bols__pile { position: relative; flex: 1; min-height: 0; }
.bols__pile svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.bols__titres { flex: none; margin-top: 4cqw; text-align: center; }
/* Une ligne, toujours : un titre qui se replie déborde vers le bas sur la pile. Il se
   resserre (`--ech`, écrit par l'éditeur) ; avant tout script, la taille est estimée sur son
   nombre de signes (`--n`), pour qu'une page sans JavaScript soit déjà juste à peu près. */
.bols__titre, .bols__sous { white-space: nowrap; }
.bols__titre.bols--coupe, .bols__sous.bols--coupe { white-space: normal; overflow-wrap: anywhere; }

/* Moderne : les capitales fines, puis le nom au pinceau, plus effacé. */
[data-style="Moderne"] .bols__titre {
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; text-transform: uppercase;
  letter-spacing: .14em; margin-right: -.14em;
  font-size: calc(min(8.4cqw, 118cqw / var(--n, 10)) * var(--ech, 1));
}
[data-style="Moderne"] .bols__sous {
  font-family: "Damion", cursive; color: var(--b-doux); margin-top: .6cqw;
  font-size: calc(min(10.5cqw, 190cqw / var(--n, 10)) * var(--ech, 1));
}
[data-style="Moderne"] .bols__prenom { font-family: "Damion", cursive; }

/* Calligraphie : le titre à l'anglaise, en grand ; le sous-titre en capitales fines dessous. */
[data-style="Calligraphie"] .bols__titre {
  font-family: "Pinyon Script", cursive; font-size: calc(min(12cqw, 175cqw / var(--n, 10)) * var(--ech, 1));
  line-height: 1.2;
}
[data-style="Calligraphie"] .bols__sous {
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; text-transform: uppercase;
  color: var(--b-doux); letter-spacing: .3em; margin-right: -.3em; margin-top: 1.4cqw;
  font-size: calc(min(3.6cqw, 58cqw / var(--n, 10)) * var(--ech, 1));
}
[data-style="Calligraphie"] .bols__prenom { font-family: "Pinyon Script", cursive; }

/* ── Le formulaire ── */
/* Le nombre de bols, en premier : six vignettes de la pile, sur le fond choisi. Une rangée sur
   un grand écran ; sur un téléphone elle défile au doigt, trois vignettes et demie à l'écran,
   ce qui dit qu'il y en a d'autres. */
.bols-nombre[hidden] { display: none; }
.bols-nombres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.bols-nombres input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bols-nombres label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0; cursor: pointer;
  font-size: 1.3rem; font-weight: 600; text-align: center; min-width: 0;
}
.bols-nombres__affiche {
  overflow: hidden;
  display: block; width: 100%; aspect-ratio: 3 / 4; padding: 12% 10%; background: var(--b-fond);
  border: .15rem solid rgba(var(--color-foreground), .12); border-radius: .6rem;
}
.bols-nombres__affiche svg { display: block; width: 100%; height: 100%; }
.bols-nombres input:checked + label .bols-nombres__affiche { border-color: rgb(var(--color-foreground)); box-shadow: 0 0 0 .15rem rgb(var(--color-foreground)); }
.bols-nombres input:focus-visible + label .bols-nombres__affiche { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.bols-bloc__aide, .bols-bloc__plein { font-size: 1.4rem; margin: 0 0 1rem; opacity: .8; }
.bols-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.bols-ligne { border: .1rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: 1rem 1.2rem 1.2rem; }
.bols-ligne[hidden] { display: none; }
.bols-ligne__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bols-ligne__nom { font-weight: 600; margin: 0; }
.bols-ligne__nom small { font-weight: 400; opacity: .7; }
/* 16 px au moins : sous ce seuil, Safari zoome au focus (point 11 quaterdecies). */
.affiche__champ .bols-ligne input[type="text"] { font-size: 1.6rem; margin: .6rem 0 .8rem; }
.bols-retirer {
  font: inherit; font-size: 2.2rem; line-height: 1; width: 4.4rem; height: 4.4rem; margin: -1rem -1rem -1rem 0;
  border: 0; background: none; color: inherit; cursor: pointer; opacity: .6;
}
.bols-retirer:hover { opacity: 1; }
/* Dix pastilles : une rangée sur un grand écran, deux de cinq sur un téléphone, chacune à
   44 px de cible (point 6 sexies). Les boutons radio sortis du flux reçoivent leur largeur
   ici : la feuille générale fait des champs pleine largeur (`.affiche__champ input`), et
   sortis du flux ils la gardaient — le défilement latéral que les naissances ont payé. */
.bols-couleurs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 4.4rem)); gap: .2rem; }
.bols-couleurs input, .bols-fonds input, .bols-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bols-couleurs label { display: grid; place-items: center; height: 4.4rem; margin: 0; cursor: pointer; }
.bols-couleurs label::before {
  content: ""; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 .1rem rgba(0, 0, 0, .12);
}
.bols-couleurs input:checked + label::before { box-shadow: 0 0 0 .25rem rgb(var(--color-background)), 0 0 0 .45rem rgb(var(--color-foreground)); }
.bols-couleurs input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: -.2rem; border-radius: .6rem; }
.bols-ajouter {
  font: inherit; font-weight: 600; margin-top: 1.2rem; min-height: 4.4rem; width: 100%; cursor: pointer;
  border: .15rem dashed rgba(var(--color-foreground), .35); border-radius: .8rem; background: none; color: inherit;
}
.bols-fonds, .bols-styles { display: grid; gap: .8rem; }
.bols-fonds { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bols-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bols-fonds label, .bols-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; margin: 0;
  font-size: 1.3rem; font-weight: 600; min-height: 4.4rem; text-align: center;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .6rem .4rem;
}
.bols-fonds input:checked + label, .bols-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.bols-fonds input:focus-visible + label, .bols-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.bols-pastille {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: .6rem;
  background: var(--b-fond); color: var(--b-texte); border: .1rem solid rgba(var(--color-foreground), .15);
  font-family: "Josefin Sans", system-ui, sans-serif; font-size: 1.5rem;
}
.bols-echantillon { font-size: 2.6rem; line-height: 1.2; font-weight: 400; }
.bols-styles [data-style="Moderne"] .bols-echantillon { font-family: "Damion", cursive; }
.bols-styles [data-style="Calligraphie"] .bols-echantillon { font-family: "Pinyon Script", cursive; }
@media screen and (max-width: 560px) {
  .bols-nombres { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 27%; overflow-x: auto; scroll-snap-type: x mandatory; padding: .3rem .2rem .6rem; }
  .bols-nombres label { scroll-snap-align: start; }
  .bols-couleurs { grid-template-columns: repeat(5, 4.4rem); column-gap: .8rem; }
  .bols-fonds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}