/* ——— Le ciel à l'aquarelle (11 nov. 2026) ———
 *
 * Au centre, un canevas carré où `public/js/ciel-lavis.mjs` peint le lavis puis le ciel ; au-dessus, les prénoms et la phrase ; en
 * dessous, la ville, la date et les coordonnées. Cette feuille ne pose que le texte et sa place.
 *
 * **Les couleurs ne sont pas ici** : le papier et l'encre viennent des variables `--fond` et `--texte` que l'éditeur écrit avec
 * l'ambiance choisie (comme les autres ciels), et tout le reste est `currentColor` ou une transparence. Le lavis, lui, est peint
 * dans le canevas avec les palettes de `ciel-lavis.mjs`.
 *
 * **L'écriture est un attribut** (`data-police` sur l'affiche, écrit par le serveur puis par l'éditeur) : trois choix indépendants de
 * l'ambiance, la manuscrite au pinceau (celle de la référence), la calligraphie fine, et une droite en capitales espacées. Aucune
 * police nouvelle à télécharger que Damion, embarquée ici (point 2) ; les quatre autres sont déjà servies par `theme.css`.
 *
 * Tout est en `cqw`, mesuré sur la largeur de l'affiche : le texte garde ses proportions de l'A4 au 70 × 100.
 */
@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;
}

/* Les trois écritures : prénoms et phrase (`--lv-nom`, `--lv-phrase`), ville, date et coordonnées (`--lv-ville`). */
.affiche__affiche--lavis, .lavis-police[data-police="Manuscrite"] { --lv-nom: "Damion", "Pinyon Script", cursive; --lv-phrase: "Cormorant Garamond", Georgia, serif; --lv-ville: "Cormorant Garamond", Georgia, serif; }
.affiche__affiche--lavis[data-police="Calligraphie"], .lavis-police[data-police="Calligraphie"] { --lv-nom: "Pinyon Script", "Sacramento", cursive; --lv-phrase: "Cormorant Garamond", Georgia, serif; --lv-ville: "Cormorant Garamond", Georgia, serif; }
.affiche__affiche--lavis[data-police="Droite"], .lavis-police[data-police="Droite"] { --lv-nom: "Josefin Sans", "Inter", system-ui, sans-serif; --lv-phrase: "Josefin Sans", "Inter", system-ui, sans-serif; --lv-ville: "Josefin Sans", "Inter", system-ui, sans-serif; }

/* Chaque choix du formulaire est écrit dans sa propre écriture : on choisit une écriture en la voyant. */
.lavis-police { font-family: var(--lv-nom); font-size: 1.15em; line-height: 1.1; }
.lavis-police[data-police="Droite"] { font-size: 1em; letter-spacing: .12em; text-transform: uppercase; font-weight: 300; }

/* La mise en page : la légende disparaît du flux (`display: contents`) et ses lignes se rangent autour du canevas par `order` —
   les prénoms et la phrase, le lavis, puis la ville, la date et les coordonnées. */
.affiche__affiche--lavis { justify-content: space-evenly; align-items: center; padding: 3cqw 0; }
.affiche__affiche--lavis .affiche__legende--lavis { display: contents; }
.affiche__affiche--lavis .affiche__ciel--lavis { order: 3; flex: none; padding: 0; margin: -7cqw 0; display: block; }
.affiche__affiche--lavis .affiche__ciel--lavis canvas { display: block; }
.affiche__affiche--lavis .affiche__legende--lavis > * { width: 88%; text-align: center; margin-left: auto; margin-right: auto; }
.affiche__affiche--lavis .affiche__trait { display: none; }

/* Les prénoms. Le script les resserre (`--titre-echelle`) jusqu'au plancher, sans passer à la ligne. */
.affiche__affiche--lavis .affiche__nom {
  order: 1; font-family: var(--lv-nom); font-weight: 400; text-transform: none; letter-spacing: 0; padding: 0; line-height: 1.12;
  font-size: calc(11cqw * var(--titre-echelle, 1)); text-wrap: balance;
}
.affiche__affiche--lavis[data-police="Calligraphie"] .affiche__nom { font-size: calc(12cqw * var(--titre-echelle, 1)); }
.affiche__affiche--lavis[data-police="Droite"] .affiche__nom {
  font-weight: 300; text-transform: uppercase; letter-spacing: var(--titre-espace, .2em); padding-left: var(--titre-espace, .2em);
  font-size: calc(5.6cqw * var(--titre-echelle, 1));
}
/* La phrase : deux lignes, comme la référence. Au-delà, elle passe à la ligne sans toucher le lavis. */
.affiche__affiche--lavis .affiche__dedicace {
  order: 2; font-family: var(--lv-phrase); font-style: italic; font-size: 2.35cqw; line-height: 1.5; letter-spacing: .02em; margin: 0; opacity: .88;
  width: 78%; text-wrap: balance;
}
.affiche__affiche--lavis[data-police="Droite"] .affiche__dedicace { font-style: normal; font-weight: 300; font-size: 1.95cqw; letter-spacing: .07em; }

/* La ville en grand, la date, les coordonnées. La ville se resserre comme les prénoms (`--sous-echelle`). */
.affiche__affiche--lavis .affiche__sous {
  order: 4; font-family: var(--lv-ville); font-weight: 500; font-size: calc(5.4cqw * var(--sous-echelle, 1)); letter-spacing: var(--sous-espace, .3em);
  padding-left: var(--sous-espace, .3em); margin: 0; opacity: 1; line-height: 1.15;
}
.affiche__affiche--lavis[data-police="Droite"] .affiche__sous { font-weight: 300; font-size: calc(4.6cqw * var(--sous-echelle, 1)); }
.affiche__affiche--lavis .affiche__coord { font-family: var(--lv-ville); margin: 0; }
/* Chiffres alignés : Cormorant dessine des chiffres elzéviriens (« 14 » se lit « 1 4 »), qu'un jour et des coordonnées ne supportent pas. */
.affiche__affiche--lavis #a-date, .affiche__affiche--lavis #a-coord { font-variant-numeric: lining-nums tabular-nums; }
.affiche__affiche--lavis #a-date { order: 5; font-size: 2.6cqw; letter-spacing: .2em; padding-left: .2em; font-weight: 500; opacity: .9; }
.affiche__affiche--lavis #a-coord { order: 6; font-size: 2.15cqw; letter-spacing: .14em; padding-left: .14em; opacity: .7; }
.affiche__affiche--lavis[data-police="Droite"] #a-date { font-weight: 400; }