/* ═══════════════════════════════ Les affiches de naissance ═══════════════════════════════
 *
 * Servie **seulement** sur les six fiches de la gamme (`views/product-affiche.liquid`), pas
 * sur tout le site : quatre cents lignes de mise en page d'affiche n'ont rien à faire dans le
 * chemin critique d'une fiche bracelet, et `theme.css` est déjà la plus grosse pièce du site.
 *
 * ── Les palettes ──
 *
 * Les quatre palettes du prototype, reprises telles quelles. **Ce sont des couleurs de produit,
 * pas de charte** — même distinction qu'au point 6 quater pour le style « Marin » des cartes :
 * les aligner sur `:root` changerait ce qui part à l'impression. Elles sont donc écrites en
 * clair, et elles le sont toutes ici, en tête, dans ce bloc et nulle part ailleurs : c'est
 * cette frontière-là que tient le test de la charte, qui ne tolère une valeur littérale hors
 * de `:root` qu'au-dessus de la première règle `.naissance__`.
 *
 * `[data-palette]` porte le choix du client, et les décors SVG lisent `var(--pal-…)` : changer
 * de palette ne redessine rien et ne demande aucun script. Le sélecteur ne nomme pas
 * `.naissance` exprès — les pastilles du formulaire et les vignettes d'animaux portent le même
 * attribut et se colorent donc toutes seules, au lieu de garder une palette figée à côté d'une
 * affiche qui vient d'en changer. Une fiche réaffichée après un refus
 * (point 3) montre donc la bonne palette même si le JavaScript n'a pas encore tourné.
 *
 * `--pal-nuit` et `--pal-nuit-encre` ne servent qu'au modèle étoilé, qui est le seul sur fond
 * sombre ; `--pal-arc-1..4` ne servent qu'à l'arc-en-ciel et à une feuille sur trois des
 * rameaux d'eucalyptus.
 */
[data-palette="Sable"] {
  --pal-papier: #f2eadf; --pal-encre: #5a4636; --pal-accent: #c49a6c; --pal-doux: #e3d3bf;
  --pal-nuit: #2b2320; --pal-nuit-encre: #f2e6d3; --pal-etoile: #f5ddb0; --pal-rose: #e7b9a0;
  --pal-arc-1: #c98b6b; --pal-arc-2: #d9ae84; --pal-arc-3: #e8cfa8; --pal-arc-4: #b9a58c;
  --pal-feuille: #a08c67; --pal-feuille-claire: #c2ad88; --pal-olive: #6b563f; --pal-trait: #cdbfa8;
}
[data-palette="Sauge"] {
  --pal-papier: #e9eee6; --pal-encre: #34463a; --pal-accent: #8fa88a; --pal-doux: #d3ddce;
  --pal-nuit: #1f2d27; --pal-nuit-encre: #e7efe3; --pal-etoile: #e9f1d9; --pal-rose: #e3b8a8;
  --pal-arc-1: #7e9a7f; --pal-arc-2: #a9bfa2; --pal-arc-3: #d6dfc9; --pal-arc-4: #c7b89a;
  --pal-feuille: #6f8a6a; --pal-feuille-claire: #9db597; --pal-olive: #34463a; --pal-trait: #b8c7b2;
}
[data-palette="Rose"] {
  --pal-papier: #f6e9e6; --pal-encre: #6a434a; --pal-accent: #d69e9b; --pal-doux: #eed3cf;
  --pal-nuit: #2e2230; --pal-nuit-encre: #f6e4e6; --pal-etoile: #f7d6dc; --pal-rose: #e9a9ae;
  --pal-arc-1: #c98a8f; --pal-arc-2: #e0afae; --pal-arc-3: #f0d2c8; --pal-arc-4: #bfa3b8;
  --pal-feuille: #b07a80; --pal-feuille-claire: #d1a2a4; --pal-olive: #6a434a; --pal-trait: #d9bfbc;
}
/* **Encre : noir sur blanc** (Fred, 22 sept. 2026), et elle ne sert qu'à l'affiche des noces.
   Les quatre autres sont des teintes rompues, faites pour une chambre d'enfant ; celle-ci est
   le contraire — du papier blanc et une encre noire, la typographie seule. C'est la palette
   d'un faire-part gravé, et c'est ce qu'on demande pour des noces d'or accrochées dans un
   salon. Le blanc et le noir ne sont pas absolus : #111 plutôt que #000 évite le halo que fait
   un noir pur sur du blanc pur en impression, et l'accent gris tient la chaîne des matières
   lisible sans la rendre grise à l'œil. */
[data-palette="Encre"] {
  --pal-papier: #ffffff; --pal-encre: #111111; --pal-accent: #6f6f6f; --pal-doux: #e9e9e9;
  --pal-nuit: #111111; --pal-nuit-encre: #ffffff; --pal-etoile: #ffffff; --pal-rose: #c4c4c4;
  --pal-arc-1: #2e2e2e; --pal-arc-2: #5e5e5e; --pal-arc-3: #8e8e8e; --pal-arc-4: #bebebe;
  --pal-feuille: #555555; --pal-feuille-claire: #8e8e8e; --pal-olive: #111111; --pal-trait: #c4c4c4;
}
[data-palette="Bleu nuit"] {
  --pal-papier: #e8ecf3; --pal-encre: #1f2b4a; --pal-accent: #6f86b5; --pal-doux: #d2dae8;
  --pal-nuit: #141c33; --pal-nuit-encre: #ede4cf; --pal-etoile: #e8cf8f; --pal-rose: #c9a6b8;
  --pal-arc-1: #4f6798; --pal-arc-2: #8196c1; --pal-arc-3: #bfcbe0; --pal-arc-4: #d8c38f;
  --pal-feuille: #6f86b5; --pal-feuille-claire: #9fb0d1; --pal-olive: #1f2b4a; --pal-trait: #b7c2d8;
}
/* **Blanc : la feuille blanche, le ciel d'Aurore** (Fred, 25 sept. 2026), et il ne sert qu'à
   la naissance « Sous les étoiles » : seule la feuille change, le disque reste un bleu sombre
   au dégradé d'Aurore, étoiles blanches — le même style que « Blanc » sur la carte du ciel et
   la lune. D'où trois variables que les autres palettes n'ont pas : `--pal-fond-etoiles` et
   `--pal-texte-etoiles` séparent la feuille du disque (ailleurs, les deux sont la nuit), et
   `--pal-nuit-centre` porte le cœur du dégradé. `--pal-lune` et `--pal-lune-ombre` font de même
   pour la petite lune, posée sur la feuille et non dans le ciel. */
[data-palette="Blanc"] {
  --pal-papier: #ffffff; --pal-encre: #111111; --pal-accent: #24507a; --pal-doux: #e9e9e9;
  --pal-nuit: #0a1526; --pal-nuit-centre: #24507a; --pal-nuit-encre: #ffffff; --pal-etoile: #ffffff; --pal-rose: #c4c4c4;
  --pal-fond-etoiles: #ffffff; --pal-texte-etoiles: #111111; --pal-lune: #ffffff; --pal-lune-ombre: #2b2b2b;
  --pal-arc-1: #2e2e2e; --pal-arc-2: #5e5e5e; --pal-arc-3: #8e8e8e; --pal-arc-4: #bebebe;
  --pal-feuille: #555555; --pal-feuille-claire: #8e8e8e; --pal-olive: #111111; --pal-trait: #c4c4c4;
}
/* **Olivier : la palette de la mise en page « en chiffres » des noces** (23 sept. 2026),
   relevée sur la référence déposée par Fred : papier crème, encre olive foncé, terracotta pour
   les prénoms, les pictogrammes et le nom des noces, deux verts de feuille et l'olive sombre
   pour le rameau. Les valeurs de nuit, d'étoile et d'arc n'y servent à rien mais existent :
   une palette offerte à une autre mise en page ne doit pas y laisser de trou. */
[data-palette="Olivier"] {
  --pal-papier: #f7f1e6; --pal-encre: #3b3524; --pal-accent: #a8603e; --pal-doux: #ebe2d3;
  --pal-nuit: #2b2a1f; --pal-nuit-encre: #f2ead9; --pal-etoile: #f0dfb5; --pal-rose: #d9a08a;
  --pal-arc-1: #a8603e; --pal-arc-2: #c98b6b; --pal-arc-3: #d9ae84; --pal-arc-4: #8d9a6a;
  --pal-feuille: #6f7a4a; --pal-feuille-claire: #95a06e; --pal-olive: #3d381e; --pal-trait: #b9ad9a;
}

/* **Les palettes de la naissance « signe astrologique »** (30 sept. 2026) : Nuit, Écru et
   Poudre, avec la Sauge de la gamme. Deux variables leur sont propres : `--pal-astre`, la couleur
   des étoiles de la constellation — l'ivoire sur la nuit, l'encre ailleurs, où une étoile claire
   disparaîtrait sur le papier —, et `--pal-lune` / `--pal-lune-ombre` pour la petite lune, posée
   sur la feuille. Les valeurs de nuit, d'arc et de feuille n'y servent pas mais existent : une
   palette offerte un jour à une autre mise en page ne doit pas y laisser de trou. */
[data-palette="Nuit"] {
  --pal-papier: #111b2e; --pal-encre: #efe6d2; --pal-accent: #d6b878; --pal-doux: #1d2940;
  --pal-nuit: #0b1322; --pal-nuit-encre: #efe6d2; --pal-etoile: #f4eedf; --pal-rose: #c9a6b8;
  --pal-astre: #f4eedf; --pal-lune: #e8d39a; --pal-lune-ombre: #0b1322;
  --pal-arc-1: #d6b878; --pal-arc-2: #b89c66; --pal-arc-3: #8a7a5c; --pal-arc-4: #5d6a86;
  --pal-feuille: #8a7a5c; --pal-feuille-claire: #b89c66; --pal-olive: #efe6d2; --pal-trait: #3a4660;
}
[data-palette="Écru"] {
  --pal-papier: #f5f0e7; --pal-encre: #2a2826; --pal-accent: #a8895a; --pal-doux: #e8e0d2;
  --pal-nuit: #2a2826; --pal-nuit-encre: #f5f0e7; --pal-etoile: #2a2826; --pal-rose: #cfb7a8;
  --pal-lune: #f1e9da; --pal-lune-ombre: #3a3632;
  --pal-arc-1: #a8895a; --pal-arc-2: #c4ab83; --pal-arc-3: #ddd0b8; --pal-arc-4: #8c857a;
  --pal-feuille: #8c857a; --pal-feuille-claire: #b3ab9d; --pal-olive: #2a2826; --pal-trait: #cfc6b6;
}
[data-palette="Poudre"] {
  --pal-papier: #f2dfdf; --pal-encre: #5e3348; --pal-accent: #b0835c; --pal-doux: #ead0d0;
  --pal-nuit: #3d2230; --pal-nuit-encre: #f6e8e8; --pal-etoile: #5e3348; --pal-rose: #d9a3a8;
  --pal-lune: #fbf1ef; --pal-lune-ombre: #5e3348;
  --pal-arc-1: #b0835c; --pal-arc-2: #c9a27e; --pal-arc-3: #e2c9b0; --pal-arc-4: #a57a8c;
  --pal-feuille: #a57a8c; --pal-feuille-claire: #c7a3b1; --pal-olive: #5e3348; --pal-trait: #dcbcbc;
}
/* La Sauge vient de la gamme, où la lune est posée sur la nuit : sa teinte par défaut
   (`--pal-etoile`, #e9f1d9) est à trois points du papier sur cette mise en page, où la lune est
   posée sur la feuille. Nommée ici, et **seulement ici** : « Sous les étoiles » garde la sienne. */
.naissance--signe[data-palette="Sauge"] {
  --pal-astre: #34463a; --pal-lune: #eef3e6; --pal-lune-ombre: #1f2d27;
}
/* **Le ciel dans les lettres du prénom étoilé** (3 oct. 2026) : un dégradé de nuit, plus clair
   au centre des lettres — c'est ce qui les fait lire « ciel » à trois mètres —, des étoiles
   claires, les tracés et le contour à l'accent. Sur les palettes claires le ciel reste la nuit de
   la palette, les lettres se lisent comme des fenêtres ouvertes sur elle ; le voile (le même ciel,
   à peine visible autour des lettres) prend alors l'encre, une étoile claire disparaissant sur le
   papier. Les cœurs du dégradé sont écrits ici, la nuit de chaque palette faisant le bord. */
.naissance--prenom {
  --np-centre: var(--pal-nuit-centre, var(--pal-nuit)); --np-bord: var(--pal-nuit);
  --np-etoile: var(--pal-nuit-encre); --np-trait: var(--pal-accent); --np-contour: var(--pal-accent);
  --np-voile: var(--pal-encre); --pal-lune-trait: var(--pal-encre); --np-accent-texte: var(--pal-accent);
}
.naissance--prenom[data-palette="Nuit"] { --np-centre: #2a3f72; --np-bord: #0c1530; --np-etoile: #fbf6e8; --np-voile: #f4eedf; }
.naissance--prenom[data-palette="Écru"] { --np-centre: #4a443d; }
/* L'accent de la Sauge (#8fa88a) fait 2,3 sur son papier : l'accroche et les étiquettes prennent un vert plus sourd. */
.naissance--prenom[data-palette="Sauge"] { --np-centre: #3a5247; --pal-lune: #eef3e6; --pal-lune-ombre: #1f2d27; --np-accent-texte: #56704f; }
.naissance--prenom[data-palette="Poudre"] { --np-centre: #603850; }

/* **« Ma naissance » : quatre fois le même modèle** (7 nov. 2026, la référence de Fred). Papier crème et or, un ciel de
   nuit au centre : « Sable » est la référence, « Rose », « Sauge » et « Ciel » en changent le papier, l'or et la nuit.
   Écrites ici, en tête, comme toutes les couleurs de produit (le test de la charte les tolère avant la première règle
   `.naissance__`). Le ciel du disque lit `--pal-nuit-centre`, `--pal-nuit`, `--pal-etoile` et `--pal-nuit-encre`, comme
   « Sous les étoiles » : ce ne sont pas les nuits des autres palettes, d'où ces quatre-là posées à nouveau. */
[data-palette="Ciel"] {
  --pal-papier: #eaf1f8; --pal-encre: #2f4a72; --pal-accent: #8fb0d6; --pal-doux: #d3e1f0;
  --pal-nuit: #0a1740; --pal-nuit-encre: #eaf1f8; --pal-etoile: #fff6dc; --pal-rose: #c9b3c6;
  --pal-arc-1: #6f95c4; --pal-arc-2: #9ab7da; --pal-arc-3: #cfdef0; --pal-arc-4: #b9b3a2;
  --pal-feuille: #6f95c4; --pal-feuille-claire: #9ab7da; --pal-olive: #2f4a72; --pal-trait: #b7c9de;
}
:is(.naissance--doux, .naissance--douxsimple, .naissance--douxmeteo) {
  --dx-papier: #fbf3e4; --dx-lueur: #fffaf0; --dx-encre: #7a4f1d; --dx-or: #c9983a; --dx-or-clair: #ead3a0;
  --dx-bord: #f0dfbd; --dx-goutte: #6f93b8; --dx-nuage: #fffaf0; --dx-nuage-ombre: #f0e0c4; --dx-lune-a: #f9e3a6; --dx-lune-b: #e8bd5c; --dx-joue: #efa597;
  --dx-ourson: #e6bb8f; --dx-ourson-ombre: #c48c5a; --dx-museau: #f6dcc0; --dx-ruban: #f5e0b4; --dx-ruban-ombre: #dcbc80;
  --pal-nuit-centre: #2a3a6a; --pal-nuit: #0f1838; --pal-etoile: #fff6dc; --pal-nuit-encre: #c9983a;
}
:is(.naissance--doux, .naissance--douxsimple, .naissance--douxmeteo)[data-palette="Rose"] {
  --dx-papier: #fbeeee; --dx-lueur: #fff7f6; --dx-encre: #8a4a56; --dx-or: #c98f7a; --dx-or-clair: #efcdc2;
  --dx-bord: #f3d4d1; --dx-goutte: #7f8fb8; --dx-nuage: #fff7f6; --dx-nuage-ombre: #f5dcd8; --dx-lune-a: #fadccf; --dx-lune-b: #eaa8a2; --dx-joue: #eb98a0;
  --dx-ourson: #ebc4aa; --dx-ourson-ombre: #c98c78; --dx-museau: #f8e0d2; --dx-ruban: #f7dad6; --dx-ruban-ombre: #e3b3ae;
  --pal-nuit-centre: #5a3560; --pal-nuit: #26142e; --pal-etoile: #fff0ee; --pal-nuit-encre: #c98f7a;
}
:is(.naissance--doux, .naissance--douxsimple, .naissance--douxmeteo)[data-palette="Sauge"] {
  --dx-papier: #eef2e8; --dx-lueur: #fafcf5; --dx-encre: #3f5a45; --dx-or: #b59a52; --dx-or-clair: #e3d6a6;
  --dx-bord: #d9e4cd; --dx-goutte: #6f94a8; --dx-nuage: #fbfcf6; --dx-nuage-ombre: #e1e9d6; --dx-lune-a: #f3e9bd; --dx-lune-b: #d9c677; --dx-joue: #e8a898;
  --dx-ourson: #e2bf98; --dx-ourson-ombre: #b98e62; --dx-museau: #f4e0c8; --dx-ruban: #dfe8d2; --dx-ruban-ombre: #bccdb0;
  --pal-nuit-centre: #2a5048; --pal-nuit: #0e2220; --pal-etoile: #f6f7e2; --pal-nuit-encre: #b59a52;
}
:is(.naissance--doux, .naissance--douxsimple, .naissance--douxmeteo)[data-palette="Ciel"] {
  --dx-papier: #eaf1f8; --dx-lueur: #f8fbfe; --dx-encre: #2f4a72; --dx-or: #bf9f5c; --dx-or-clair: #e6d4a8;
  --dx-bord: #d2e1f1; --dx-goutte: #5f86bc; --dx-nuage: #ffffff; --dx-nuage-ombre: #d9e6f4; --dx-lune-a: #fbefc8; --dx-lune-b: #e6cc86; --dx-joue: #efa9a6;
  --dx-ourson: #ead2b4; --dx-ourson-ombre: #bf9a72; --dx-museau: #f7e8d6; --dx-ruban: #d9e6f4; --dx-ruban-ombre: #b3c8e0;
  --pal-nuit-centre: #2a4a92; --pal-nuit: #0a1740; --pal-etoile: #fff6dc; --pal-nuit-encre: #bf9f5c;
}

/* ── Le socle commun ──
 *
 * `.affiche__affiche` pose déjà le rapport du format, le fond, la couleur et le contexte de
 * conteneur : **toutes les dimensions ci-dessous sont en `cqw`**, donc en pour-cent de la
 * largeur de l'affiche. C'est ce qui fait qu'une même mise en page tient de l'A4 au 70 × 100
 * sans être ni étirée ni recadrée — les cinq formats vendus ont un rapport hauteur/largeur
 * compris entre 1,333 (30 × 40) et 1,5 (40 × 60), soit ±6 % autour de l'A4. Les six pour-cent
 * d'écart sont absorbés par un `margin-top: auto`, jamais par une taille de texte qui change :
 * une affiche dont le prénom rétrécit parce qu'on a choisi le grand format se verrait.
 */
.naissance { --fond: var(--pal-papier); --texte: var(--pal-encre); text-align: center; }
.naissance__deco { position: absolute; height: auto; pointer-events: none; }
/* `width: 100%` n'est pas décoratif : le prénom est un enfant de colonne `align-items: center`,
   donc large comme son texte — `clientWidth` valait `scrollWidth` et le script qui le resserre
   ne voyait jamais de débordement. « Maximilien-Alexandre » sortait de l'affiche des deux côtés
   sans qu'aucune mesure ne s'en aperçoive. */
.naissance__prenom { margin: 0; width: 100%; overflow-wrap: break-word; text-wrap: balance; }
.naissance__ligne, .naissance__lieu, .naissance__phrase, .naissance__parents { margin: 0; }
/* Une ligne vide ne doit pas réserver sa place : sans ça, une affiche sans parents garde un
   trou au bas, et l'aperçu ne ressemble plus à ce qui sort de l'imprimante. */
.naissance__ligne:empty, .naissance__lieu:empty, .naissance__phrase:empty,
.naissance__parents:empty, .naissance__faits:empty { display: none; }
.naissance__etiquette {
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300;
  letter-spacing: .12em; text-transform: uppercase; opacity: .78;
}

/* ══ 1. L'essentiel : l'arche fleurie ══
 *
 * L'arche et son contenu partagent exactement la même boîte (`12cqw` de côté, `8cqw` en haut,
 * `22cqw` en bas) : deux boîtes calées séparément se décalent au premier changement de format.
 * Les trois bouquets sont ancrés **au bas de l'arche** et non au haut de l'affiche — c'est
 * l'arche qui grandit quand le format s'allonge, et un feuillage posé en coordonnées absolues
 * depuis le haut s'en détachait de six pour-cent au 40 × 60.
 */
.naissance--arche { font-family: "Cormorant Garamond", Georgia, serif; }
.naissance__arche {
  position: absolute; left: 12cqw; right: 12cqw; top: 8cqw; bottom: 22cqw;
  background: var(--pal-doux); border-radius: 999px 999px 3cqw 3cqw;
}
.naissance__arche::after {
  content: ""; position: absolute; inset: 2.4cqw; opacity: .8;
  border: 1px solid var(--pal-accent); border-radius: 999px 999px 1.8cqw 1.8cqw;
}
.naissance__dedans {
  position: absolute; left: 12cqw; right: 12cqw; top: 8cqw; bottom: 22cqw;
  display: flex; flex-direction: column; align-items: center; padding: 15cqw 7cqw 5cqw;
}
.naissance__deco--gauche { left: 6.4cqw; width: 28.8cqw; bottom: 19.2cqw; }
.naissance__deco--droite { right: 5.2cqw; width: 29.9cqw; bottom: 20.9cqw; }
.naissance__deco--couronne { left: 34cqw; width: 32.1cqw; top: 5.5cqw; }
.naissance--arche .naissance__bienvenue { font-style: italic; font-size: 4.6cqw; letter-spacing: .02em; margin: 0; }
.naissance--arche .naissance__prenom {
  font-family: "Pinyon Script", "Sacramento", cursive; font-weight: 400;
  font-size: calc(17cqw * var(--prenom-echelle, 1)); line-height: 1.05; margin: 1cqw 0 1.5cqw;
}
/* Sur deux lignes, deux moitiés : l'espagnol (« Nació el 30 de septiembre de 2026 a las 14:32 h »)
   laissait sinon « 14:32 h » seul sous une première ligne pleine. */
.naissance--arche .naissance__ligne { font-style: italic; font-size: 4.3cqw; line-height: 1.3; text-wrap: balance; }
.naissance__medaillons { display: flex; gap: 3cqw; margin-top: 6cqw; justify-content: center; }
.naissance__medaillon {
  width: 17.5cqw; height: 17.5cqw; border-radius: 50%; border: 1px solid var(--pal-accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.2cqw var(--pal-papier) inset;
}
.naissance__medaillon .naissance__etiquette { font-size: 2.3cqw; }
.naissance__medaillon .naissance__valeur { font-size: 3.9cqw; line-height: 1.1; margin-top: .4cqw; white-space: nowrap; }
.naissance--arche .naissance__lieu { margin-top: auto; font-size: 4.2cqw; letter-spacing: .08em; }
.naissance--arche .naissance__pied { position: absolute; left: 8cqw; right: 8cqw; bottom: 5.5cqw; }
/* La phrase tient sur une ligne (`ajusterPhrase`) : le pied est posé depuis le bas, et une
   seconde ligne le faisait monter par-dessus l'arche et la ligne du lieu. */
.naissance--arche .naissance__phrase {
  font-family: "Pinyon Script", "Sacramento", cursive; font-size: calc(6.6cqw * var(--phrase-echelle, 1));
  line-height: 1.1;
}
.naissance--arche .naissance__parents { font-style: italic; font-size: 3.8cqw; opacity: .8; margin-top: 1.2cqw; }

/* ══ 2. Sous les étoiles ══
 *
 * Le seul modèle sur fond sombre, et le seul qui calcule quelque chose : le disque porte le
 * **vrai** ciel du lieu et de l'instant, et la **vraie** lune de cette nuit-là. Le canevas est
 * dimensionné par le script, comme celui de l'affiche du ciel — en `min(84 % de la largeur,
 * 52 % de la hauteur)`, ce qui le fait grandir sur un format allongé sans jamais toucher les bords.
 */
.naissance--etoiles {
  --fond: var(--pal-fond-etoiles, var(--pal-nuit)); --texte: var(--pal-texte-etoiles, var(--pal-nuit-encre));
  font-family: "Marcellus", Georgia, serif; padding: 9cqw 9cqw 8cqw;
  align-items: center; justify-content: flex-start;
}
.naissance__ciel { display: grid; place-items: center; flex: none; }
.naissance__ciel canvas { display: block; }
.naissance--etoiles .naissance__texte { display: flex; flex-direction: column; align-items: center; flex: 1; width: 100%; }
.naissance--etoiles .naissance__prenom {
  font-size: calc(11cqw * var(--prenom-echelle, 1)); letter-spacing: .08em;
  margin: 5cqw 0 1cqw; line-height: 1.05;
}
.naissance--etoiles .naissance__ligne { font-size: 4.2cqw; letter-spacing: .04em; }
.naissance__phase {
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; font-size: 2.9cqw;
  letter-spacing: .16em; text-transform: uppercase; opacity: .8; margin: 3cqw 0 0;
}
.naissance--etoiles .naissance__phrase {
  margin-top: auto; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 4.6cqw; line-height: 1.25; opacity: .92;
}
.naissance--etoiles .naissance__lieu {
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; font-size: 2.8cqw;
  letter-spacing: .16em; text-transform: uppercase; opacity: .72; margin-top: 1.4cqw;
}

/* ══ 3. Petit animal ══
 *
 * Les quatre animaux sont dans la page et `[data-animal]` dit lequel se montre : changer
 * d'animal est un attribut qui bouge, et le choix se rejoue sans script après un refus.
 * Les quatre partagent le même `viewBox` carré, donc la même échelle — un renard dessiné
 * plus grand que l'ourson se verrait au premier coup d'œil sur la fiche.
 */
.naissance--animal { font-family: "Fredoka", system-ui, sans-serif; align-items: center; padding: 10cqw 9cqw 9cqw; }
.naissance__animal { display: none; width: 62cqw; height: auto; flex: none; }
.naissance--animal[data-animal="Renard"] .naissance__animal[data-animal="Renard"],
.naissance--animal[data-animal="Ourson"] .naissance__animal[data-animal="Ourson"],
.naissance--animal[data-animal="Lapin"] .naissance__animal[data-animal="Lapin"],
.naissance--animal[data-animal="Baleine"] .naissance__animal[data-animal="Baleine"] { display: block; }
/* Sur l'affiche, l'animal cède quand la page manque de place (`--animal-echelle`, posée par
   `ajusterAnimal`) : une date allemande sur deux lignes, un lieu qui passe les pastilles sur
   deux rangées sortaient les parents du 30 × 40. Jamais le texte, qui est ce qu'on a acheté.
   Les vignettes du formulaire, hors de l'affiche, gardent leur taille. */
.naissance--animal .naissance__animal { width: calc(62cqw * var(--animal-echelle, 1)); }
/* `space-evenly` et non un `margin-top: auto` sur la dernière ligne : les six pour-cent que
   le format laisse en plus, et les vingt que la mise en page laisse de toute façon, se
   répartissaient en un seul vide au bas de l'affiche. Réparti, il devient de l'air ; accumulé,
   il ressemble à une affiche inachevée. */
.naissance--animal .naissance__texte { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; flex: 1; width: 100%; }
.naissance--animal .naissance__prenom { font-weight: 600; font-size: calc(15cqw * var(--prenom-echelle, 1)); line-height: 1; margin: 2cqw 0 3cqw; }
.naissance--animal .naissance__ligne { font-size: 4.2cqw; }
.naissance__pastilles { display: flex; gap: 3cqw; margin-top: 6cqw; flex-wrap: wrap; justify-content: center; }
.naissance__pastille { background: var(--pal-doux); border-radius: 999px; padding: 1.8cqw 4cqw; font-size: 3.6cqw; }
.naissance--animal .naissance__parents { font-size: 3.8cqw; opacity: .85; }

/* ══ 4. Arc-en-ciel ══ */
.naissance--arcenciel { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; align-items: center; padding: 11cqw 9cqw 9cqw; }
.naissance__arc { width: 72cqw; height: auto; flex: none; }
.naissance--arcenciel .naissance__texte { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; flex: 1; width: 100%; }
.naissance--arcenciel .naissance__prenom {
  font-family: "Sacramento", cursive; font-weight: 400;
  font-size: calc(22cqw * var(--prenom-echelle, 1)); line-height: .9; margin: 2cqw 0 4cqw;
}
.naissance--arcenciel .naissance__ligne { font-size: 4cqw; letter-spacing: .06em; }
.naissance__colonnes { display: flex; justify-content: center; gap: 6cqw; margin-top: 6cqw; }
.naissance__colonne .naissance__etiquette { display: block; font-size: 2.8cqw; margin-bottom: .8cqw; }
.naissance__colonne .naissance__valeur { font-size: 4.4cqw; }
.naissance--arcenciel .naissance__pied { display: grid; gap: .8cqw; }
.naissance--arcenciel .naissance__lieu, .naissance--arcenciel .naissance__parents { font-size: 3.8cqw; letter-spacing: .05em; }

/* ══ 5. Le portrait ══
 *
 * Le médaillon et la guirlande sont posés dans une boîte de hauteur connue plutôt que dans le
 * flux : la guirlande mord de quatre pour-cent sur le bas du médaillon, et c'est ce
 * chevauchement qui fait la composition. Une marge négative aurait marché, mais elle se
 * décale dès que la photo change de proportion.
 */
.naissance--portrait { font-family: "Cormorant Garamond", Georgia, serif; align-items: center; padding: 7cqw 8cqw 6cqw; }
.naissance__portrait { position: relative; width: 100%; height: 70.6cqw; flex: none; }
/* Centré sur **la moitié de la boîte**, pas posé à une abscisse en `cqw` : la boîte est le
   contenu de l'affiche, moins ses marges latérales, alors que `cqw` compte sur la largeur
   entière. Le médaillon tombait deux pour-cent à gauche, ce qui ne se nomme pas mais se voit. */
.naissance__photo {
  position: absolute; left: 50%; margin-left: -29cqw; top: 0; width: 58cqw; height: 58cqw; border-radius: 50%;
  overflow: hidden; background: var(--pal-doux);
  box-shadow: 0 0 0 1.8cqw var(--pal-papier), 0 0 0 2.1cqw var(--pal-accent);
}
/* Glisser cadre la photo (`affiche-naissance.js`) : sans `touch-action`, le navigateur prend le
   geste pour un défilement et l'annule. Posé seulement quand une photo est là. */
.naissance__photo[data-photo] { touch-action: none; cursor: grab; }
.naissance__photo img {
  width: 100%; height: 100%; display: block; 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%);
}
.naissance__photo-vide {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2cqw; font-style: italic; font-size: 4cqw; color: var(--pal-accent);
}
.naissance__photo-vide svg { width: 20cqw; height: 20cqw; }
.naissance__deco--guirlande { left: 50%; margin-left: -34.3cqw; width: 68.6cqw; top: 54cqw; }
.naissance--portrait .naissance__texte { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; flex: 1; width: 100%; margin-top: 2cqw; }
.naissance--portrait .naissance__prenom {
  font-family: "Pinyon Script", "Sacramento", cursive;
  font-size: calc(15cqw * var(--prenom-echelle, 1)); line-height: 1.05;
}
.naissance--portrait .naissance__ligne { font-style: italic; font-size: 4.2cqw; margin-top: .5cqw; }
.naissance__faits {
  display: flex; align-items: center; gap: 2.4cqw; margin: 2.6cqw 0 0; flex-wrap: wrap;
  justify-content: center; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300;
  font-size: 3.3cqw; letter-spacing: .06em;
}
/* Le petit cœur entre deux faits : un séparateur dessiné, qui ne se lit pas comme du texte et
   ne part donc pas dans le `textContent` que la fabrication vérifie. Il est porté **après** un
   fait **visible** suivi d'un autre fait visible : les trois `<span>` sont toujours dans la
   page, seulement `hidden` quand ils sont vides, et `span + span` les comptait quand même —
   d'où un cœur en tête de ligne sans poids. Chaque fait reste d'un bloc (`nowrap`), donc quand
   la ligne se replie c'est entre deux faits ; le cœur qui finirait alors la ligne est éteint
   par l'éditeur (`naissance__fait--fin`), sans que sa place bouge — le retirer pourrait faire
   remonter le fait suivant, qui se retrouverait sans séparateur. */
.naissance__faits > span { white-space: nowrap; }
.naissance__faits > span.naissance__fait--fin::after { visibility: hidden; }
.naissance__faits > span:not([hidden]):has(~ span:not([hidden]))::after {
  content: ""; display: inline-block; width: 2.2cqw; height: 2.2cqw; margin-left: 2.4cqw;
  vertical-align: -.2cqw; background: var(--pal-rose);
  clip-path: path("M5 9 C-1 5 1 0 5 3 C9 0 11 5 5 9Z"); transform: scale(.22); transform-origin: left center;
}
/* La phrase tient sur une ligne, comme le prénom (`ajusterPhrase`) : sur deux, au 30 × 40 et
   avec chaque champ plein, la ligne des parents finissait à 2,6 mm du bord du papier. */
.naissance--portrait .naissance__phrase {
  font-family: "Pinyon Script", "Sacramento", cursive; font-size: calc(6.4cqw * var(--phrase-echelle, 1));
  line-height: 1.05; width: 100%;
}
.naissance--portrait .naissance__parents { font-style: italic; font-size: 3.7cqw; opacity: .8; margin-top: 1cqw; }

/* ══ 6. La silhouette ══
 *
 * La plus sobre des six : un dessin au trait, le prénom, et les chiffres en colonnes séparées
 * d'un filet. Trois choses s'y jouent, et aucune n'est décorative :
 *
 * - **le dessin est au trait, et il est vectorisé, pas écrit** (Fred, 19 sept. 2026 : « c'est
 *   moche, il faut du line art »). Il vient d'une planche unique passée à Potrace
 *   (`npm run vectoriser:naissance`), et son trait s'agrandit avec le format comme celui des
 *   rameaux d'eucalyptus — une affiche trois fois plus grande se regarde de plus loin ;
 * - **les quatre dessins sont dans la page** et `[data-dessin]` dit lequel se voit — même
 *   mécanique que les animaux, donc un choix qui se rejoue sans script après un refus ;
 * - **un filet ne sépare que deux colonnes présentes.** Le poids, la taille et l'heure sont
 *   facultatifs : `:not([hidden]) + :not([hidden])` évite le filet en tête de ligne quand la
 *   première colonne manque, et `:has` retire la rangée entière quand les trois manquent —
 *   sans ça il reste une marge qui ne sépare plus rien.
 */
.naissance--silhouette { font-family: "Cormorant Garamond", Georgia, serif; align-items: center; padding: 10cqw 9cqw 8cqw; }
/* **La largeur est posée par le dessin, en style en ligne**, et elle n'est pas la même pour les
   quatre : ils sont égalisés en **surface** et non en boîte, donc l'endormi — deux fois plus
   large que haut — est plus large que le profil. Écrite ici, elle serait quatre nombres à tenir
   d'accord avec quatre tracés qu'une commande peut revectoriser. */
.naissance__dessin { display: none; height: auto; flex: none; }
.naissance--silhouette .naissance__dessin { width: var(--dessin-largeur); }
.naissance--silhouette[data-dessin="Profil"] .naissance__dessin[data-dessin="Profil"],
.naissance--silhouette[data-dessin="Endormi"] .naissance__dessin[data-dessin="Endormi"],
.naissance--silhouette[data-dessin="Mains"] .naissance__dessin[data-dessin="Mains"],
.naissance--silhouette[data-dessin="Pieds"] .naissance__dessin[data-dessin="Pieds"] { display: block; }
.naissance--silhouette .naissance__texte { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; flex: 1; width: 100%; }
.naissance--silhouette .naissance__prenom { font-size: calc(13cqw * var(--prenom-echelle, 1)); line-height: 1.05; margin: 2cqw 0 1cqw; letter-spacing: .01em; }
.naissance--silhouette .naissance__ligne { font-style: italic; font-size: 4.2cqw; line-height: 1.3; }
.naissance__chiffres { display: flex; justify-content: center; }
.naissance__chiffres:not(:has(.naissance__chiffre:not([hidden]))) { display: none; }
.naissance__chiffre { display: flex; flex-direction: column; align-items: center; gap: .9cqw; padding: 0 4cqw; }
.naissance__chiffre:not([hidden]) + .naissance__chiffre:not([hidden]) { border-left: 1px solid var(--pal-accent); }
.naissance__chiffre .naissance__etiquette { font-size: 2.4cqw; }
.naissance__chiffre .naissance__valeur {
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300;
  font-size: 3.6cqw; letter-spacing: .1em; white-space: nowrap;
}
.naissance--silhouette .naissance__phrase { font-family: "Sacramento", cursive; font-size: 5.6cqw; line-height: 1.1; }
.naissance--silhouette .naissance__pied { display: grid; gap: .8cqw; }
.naissance--silhouette .naissance__lieu, .naissance--silhouette .naissance__parents {
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300;
  font-size: 3.1cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .8;
  /* Deux lignes égales plutôt qu'une coupe au trait d'union (« JEAN- / CHRISTOPHE »). */
  text-wrap: balance;
}

/* ══ 7. Le signe astrologique ══
 *
 * Le prénom, la roue des douze signes avec la constellation du signe au centre, le glyphe et
 * le nom du signe, la lune du jour, puis les chiffres. Trois choses à savoir :
 *
 * - **la roue est un SVG écrit par le serveur** (`naissance-calcul.roueZodiaque`) et réécrit
 *   par l'éditeur ; elle ne porte que des classes, la palette est ici ;
 * - **sa largeur se resserre quand la page manque de place** (`--roue-echelle`, posée par
 *   l'éditeur) : le 30 × 40 a sept pour cent de hauteur de moins que l'A4, et c'est la roue qui
 *   cède, jamais le texte ;
 * - **les étoiles lisent `--pal-astre`**, et l'encre à défaut : l'ivoire de la Nuit serait
 *   invisible sur l'Écru.
 */
.naissance--signe {
  font-family: "Cormorant Garamond", Georgia, serif; align-items: center; padding: 9cqw 9cqw 7cqw;
  --pal-lune-trait: var(--pal-encre);
}
.naissance--signe .naissance__prenom {
  font-size: calc(11.5cqw * var(--prenom-echelle, 1)); font-weight: 500; line-height: 1.05;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.4cqw; padding-left: .14em;
}
.naissance__accroche { margin: 0; font-style: italic; font-size: 4.6cqw; line-height: 1.25; opacity: .88; }
.naissance__roue { display: block; flex: none; width: calc(64cqw * var(--roue-echelle, 1)); height: auto; margin: 4cqw 0 2.4cqw; }
.naissance__roue .nz-cercle { fill: none; stroke: var(--pal-accent); stroke-width: .4; opacity: .7; }
.naissance__roue .nz-trait { stroke: var(--pal-accent); stroke-width: .4; opacity: .55; }
.naissance__roue .nz-glyphe { fill: var(--pal-encre); opacity: .42; }
.naissance__roue .nz-glyphe--sien { fill: var(--pal-accent); opacity: 1; }
.naissance__roue .nz-traits { fill: none; stroke: var(--pal-accent); stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.naissance__roue .nz-etoiles { fill: var(--pal-astre, var(--pal-encre)); }
.naissance__signe {
  display: flex; align-items: center; justify-content: center; gap: 2.2cqw; margin: 0;
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 400; font-size: 4.4cqw;
  letter-spacing: .32em; text-transform: uppercase; padding-left: .32em;
}
.naissance__signe .az-glyphe { display: block; width: auto; height: 4.8cqw; fill: var(--pal-accent); }
/* La phase en minuscules : en capitales, « Gibbeuse décroissante · 98 % éclairée » passait sur
   deux lignes, et la lune se retrouvait seule au bout de la première. */
.naissance--signe .naissance__phase { margin-top: 2.6cqw; text-transform: none; font-size: 3.2cqw; letter-spacing: .08em; }
.naissance--signe .naissance__lunule { vertical-align: middle; }
.naissance__bas { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 1.1cqw; padding-top: 3cqw; }
/* Pas de capitales ici : « 3H42 » et « 3,240 KG » ne s'écrivent pas — le symbole du kilo est
   en minuscules, et l'heure française porte un « h ». L'espacement fait le reste. */
.naissance--signe .naissance__ligne, .naissance__mesures {
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; letter-spacing: .14em; margin: 0;
}
.naissance--signe .naissance__ligne { font-size: 3.6cqw; }
.naissance--signe .naissance__lieu { font-size: 4.4cqw; line-height: 1.15; }
.naissance__mesures { font-size: 3.1cqw; opacity: .85; }
.naissance__coord {
  margin: 0; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300;
  font-size: 2.2cqw; letter-spacing: .2em; opacity: .62;
}
.naissance--signe .naissance__parents { font-style: italic; font-size: 3.9cqw; opacity: .85; margin-top: .6cqw; }
.naissance__mesures:empty, .naissance__coord:empty, .naissance__accroche:empty { display: none; }

/* ══ 8. Le prénom étoilé ══
 *
 * Le prénom en très grandes capitales (Playfair Display, la plus grasse : il faut de la surface
 * pour y voir un ciel), et dans ses lettres le vrai ciel. Le SVG est écrit par le serveur et par
 * l'éditeur (`prenom-calcul.svgPrenom`) ; il ne porte que des classes, la palette est ici.
 *
 * - **les étoiles et les tracés prennent leur couleur du `<use>` qui les rappelle**, pas d'une
 *   règle sur eux : le même ciel sert deux fois, une pleine dans les lettres, une en voile autour,
 *   et seule la couleur héritée peut différer d'un rappel à l'autre ;
 * - **le prénom cède quand la page manque de place** (`--np-echelle`, posée par l'éditeur), jamais
 *   le texte du bas ; au plancher, `data-deborde` fait refuser la fabrication.
 */
.naissance--prenom {
  font-family: "Cormorant Garamond", Georgia, serif; align-items: center; padding: 8cqw 5.5cqw 7cqw;
}
.naissance--prenom::before { content: ""; flex: 1 1 0; max-height: 14cqw; }
/* Le prénom au tiers haut de la page : la marge du dessus vaut la moitié de celle du dessous. */
.naissance__nom { width: calc(100% * var(--np-echelle, 1)); flex: none; margin: auto auto 0; }
.np-svg { display: block; width: 100%; height: auto; }
.np-svg text {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: 200px;
  /* Aucun interlettrage : WebKit l'omet dans `getComputedTextLength`, Chromium l'y compte, et la
     boîte mesurée sur un iPhone rognait la première et la dernière lettre. */
  text-anchor: middle; letter-spacing: 0;
}
.np-stop-centre { stop-color: var(--np-centre); }
.np-stop-bord { stop-color: var(--np-bord); }
.np-svg use { fill: var(--np-etoile); stroke: var(--np-trait); }
.np-svg use.np-voile { fill: var(--np-voile); stroke: var(--np-voile); opacity: .16; }
.np-etoiles { stroke: none; }
.np-traits { fill: none; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; stroke-opacity: .55; }
.np-contour text { fill: none; stroke: var(--np-contour); stroke-width: 2; }
.naissance--prenom .naissance__accroche { margin: 4.4cqw 0 0; font-size: 6cqw; color: var(--np-accent-texte); opacity: 1; }
.naissance--prenom .naissance__ligne {
  margin-top: 4.6cqw; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300;
  font-size: 3.5cqw; letter-spacing: .2em;
}
.naissance--prenom .naissance__lieu { margin-top: 1.4cqw; font-size: 5cqw; font-style: italic; line-height: 1.15; }
.naissance--prenom .naissance__coord { margin-top: 1cqw; }
.naissance--prenom .naissance__bas { width: 100%; gap: 1.2cqw; margin-top: auto; padding-top: 6cqw; }
.naissance__faits3 {
  display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-bottom: 2.4cqw;
  border-top: 1px solid var(--pal-accent); padding-top: 4cqw;
}
.naissance__fait { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding: 0 1.4cqw; }
.naissance__fait + .naissance__fait { border-left: 1px solid var(--pal-accent); }
.naissance__icone { display: flex; align-items: center; justify-content: center; height: 4.6cqw; }
.naissance__icone svg { display: block; height: 100%; width: auto; }
.naissance__icone .az-glyphe, .naissance__icone .np-eclat { fill: var(--pal-accent); }
.naissance__icone .az-lunule circle { fill: var(--pal-lune-ombre, var(--pal-nuit)); stroke: var(--pal-lune-trait); stroke-width: .8; }
.naissance__icone .az-lunule path { fill: var(--pal-lune, var(--pal-etoile)); }
.naissance__fait .naissance__etiquette { font-size: 2.1cqw; letter-spacing: .24em; color: var(--np-accent-texte); opacity: 1; }
.naissance__fait .naissance__valeur { font-size: 3.9cqw; line-height: 1.15; text-wrap: balance; }
/* L'élément sur sa ligne : « Capricorne · Terre » se coupait au point médian dans une colonne. */
.naissance__element { font-style: italic; font-size: 3cqw; opacity: .78; margin-top: -.6cqw; }
.naissance__element:empty { display: none; }
.naissance--prenom .naissance__mesures { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; letter-spacing: .14em; margin: 0; }
.naissance--prenom .naissance__parents { font-style: italic; font-size: 3.9cqw; opacity: .85; }
.naissance--prenom .naissance__phrase { font-style: italic; font-size: 4.2cqw; color: var(--np-accent-texte); }

/* ── L'éditeur, côté formulaire ──
 *
 * Les quatre palettes, les quatre animaux et l'accord sont de **vrais boutons radio** et non
 * des boutons pilotés par un script : ils se cochent, se parcourent au clavier et se rejouent
 * après un refus sans qu'une ligne de JavaScript ait tourné. C'est ce que les autres affiches
 * ne font pas — leur style vit dans un champ caché — et c'est mieux ainsi.
 */
.naissance-palettes, .naissance-animaux, .naissance-dessins { display: flex; flex-wrap: wrap; gap: 1.2rem; }
/* **La largeur est posée ici, et il le faut.** Ces boutons radio vivent dans un
   `.affiche__champ`, dont la feuille générale fait des champs pleine largeur
   (`theme.css`, `.affiche__champ input { width: 100% }`). Sortis du flux par
   `position: absolute`, ils gardaient donc 100 % de largeur à leur abscisse statique :
   390 px posés à x = 37 sur un téléphone, soit un document de 427 px et un défilement
   latéral sur les six fiches de naissance. Invisible à l'œil, puisqu'ils sont à
   `opacity: 0` — cela ne se voit qu'à la barre qui apparaît en bas. Un pixel de côté
   suffit, et le champ reste focalisable, donc `:focus-visible + label` continue de
   cerner la pastille au clavier. */
.naissance-palettes input, .naissance-animaux input, .naissance-dessins input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.naissance-palettes label, .naissance-animaux label, .naissance-dessins label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer;
  font-size: 1.2rem; font-weight: 400; color: rgba(var(--color-foreground), .7);
  border: .15rem solid transparent; border-radius: .8rem; padding: .6rem; min-width: 6.4rem;
}
.naissance-palettes input:checked + label, .naissance-animaux input:checked + label, .naissance-dessins input:checked + label {
  border-color: rgb(var(--color-accent)); color: rgb(var(--color-foreground));
}
.naissance-palettes input:focus-visible + label, .naissance-animaux input:focus-visible + label, .naissance-dessins input:focus-visible + label {
  outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem;
}
/* La pastille d'une palette montre ce qu'elle vend : le papier, et l'accent dessous. Elle lit
   les mêmes variables que l'affiche — une palette changée en tête de fichier se voit ici aussi. */
.naissance-palettes .naissance-pastille {
  width: 3.8rem; height: 3.8rem; border-radius: 50%; border: .1rem solid rgba(var(--color-foreground), .2);
  overflow: hidden; position: relative; background: var(--pal-papier);
}
.naissance-palettes .naissance-pastille::after {
  content: ""; position: absolute; inset: 50% 0 0 0; background: var(--pal-accent);
}
.naissance-animaux svg { width: 4.4rem; height: 4.4rem; display: block; }
/* La vignette d'un dessin n'est pas soumise à `[data-dessin]` comme celle de l'affiche : ici
   les quatre se montrent en même temps, c'est tout l'objet du choix. D'où la remise à
   `display: block` de ce que la règle de l'affiche cache. */
.naissance-dessins svg.naissance__dessin { width: 4.6rem; height: auto; display: block; }

/* Le choix du signe, les seuls jours où le Soleil en change et où l'heure manque. */
.naissance-bascule { display: grid; gap: .8rem; }
.naissance-bascule p { margin: 0; font-size: 1.3rem; }
.naissance-photo { display: grid; gap: 1rem; }
.naissance-photo__reglages { display: grid; gap: .6rem; }
.naissance-photo__reglages label { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; font-weight: 400; }
.naissance-photo__reglages input[type="range"] { width: 60%; accent-color: rgb(var(--color-accent)); padding: 0; border: 0; background: none; }
.naissance-photo__avis { margin: 0; font-size: 1.2rem; }
.naissance-photo__avis[data-gravite="alerte"] { color: rgb(var(--rouge)); }

/* La vignette de lune, dans la ligne de la phase : elle se lit comme une initiale, pas comme
   une image. `vertical-align` la cale sur la ligne de base des capitales espacées. */
.naissance__lunule { display: inline-block; vertical-align: -.9cqw; margin-right: 1.6cqw; }

/* ═════════════════════════════════ L'affiche des noces ═════════════════════════════════
 *
 * Elle partage les quatre palettes ci-dessus, et c'est la raison pour laquelle elle vit
 * dans ce fichier plutôt que dans le sien : les recopier ailleurs, c'est se préparer à les
 * voir diverger au premier ajustement. La feuille est servie sur les fiches de naissance
 * **et** sur celle des noces, et sur aucune autre.
 *
 * La composition est celle du prototype (`references/affiches-noces.html`) : les prénoms en
 * haut, le titre de l'anniversaire au centre — c'est lui qu'on lit à deux mètres du mur et
 * lui, seul, qui reste lisible dans une carte de collection de 250 px —, les matières
 * traversées dessous, la date et le lieu en pied.
 *
 * Deux mesures ont décidé de la forme, et elles sont dans le prototype :
 *
 * - **la chaîne des matières remplace une graduation.** Un trait par année faisait code-barres
 *   et ne disait rien ; quatorze mots disent cinquante ans. Et la densité suit la vie du
 *   couple — quatre mots à cinq ans, quatorze à cinquante —, donc l'affiche n'a jamais de
 *   trou à combler ni de place à trouver ;
 * - **l'écart vient du `gap`, pas d'un séparateur.** Un « · » écrit entre deux mots pend en
 *   bout de ligne quand la ligne tombe, et aucune règle CSS ne le fait disparaître là.
 */
.noces {
  --fond: var(--pal-papier); --texte: var(--pal-encre);
  text-align: center; justify-content: space-between;
  padding: 13cqw 10cqw 11cqw;
  font-family: "Cormorant Garamond", Georgia, serif;
}
/* `width: 100%` n'est pas décoratif, ici non plus : enfant d'une colonne centrée, l'élément
   est large comme son texte, donc `clientWidth === scrollWidth` et le script qui le resserre
   ne voit jamais de débordement. C'est le défaut qui avait laissé « Maximilien-Alexandre »
   sortir de l'affiche de naissance, et il vaut pour deux prénoms côte à côte. */
.noces__prenoms {
  width: 100%; margin: 0; font-style: italic;
  font-size: calc(5cqw * var(--ech, 1)); line-height: 1.15;
}
.noces__centre { margin: auto 0; display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Le titre est le produit. Marcellus en capitales espacées : c'est la romaine des faire-part,
   et c'est la seule chose qui doive rester lisible quand l'affiche tombe à 250 px. */
.noces__titre {
  width: 100%; margin: 0;
  font-family: "Marcellus", Georgia, serif; font-size: calc(11cqw * var(--ech, 1));
  line-height: 1.04; letter-spacing: .05em; text-transform: uppercase; text-wrap: balance;
}
.noces__compte { margin: 1.8cqw 0 0; font-style: italic; font-size: 4.4cqw; opacity: .85; }
.noces__chaine {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 3.4cqw; row-gap: .4cqw;
  margin: 7cqw 0 0; max-width: 68cqw; font-size: 3.2cqw; line-height: 1.8; opacity: .72;
}
.noces__pied { display: flex; flex-direction: column; gap: .6cqw; }
.noces__phrase { margin: 0 0 2.4cqw; font-style: italic; font-size: 3.4cqw; opacity: .9; }
.noces__date, .noces__lieu { margin: 0; font-style: italic; font-size: 3.1cqw; line-height: 1.45; opacity: .85; }
/* Une ligne vide ne réserve pas sa place : sans ça une affiche sans lieu garde un trou en bas,
   et l'aperçu cesse de ressembler à ce qui sort de l'imprimante. */
.noces__phrase:empty, .noces__date:empty, .noces__lieu:empty { display: none; }

/* ── La mise en page « en chiffres » (23 sept. 2026) ──
 *
 * Reproduite depuis la référence déposée par Fred, mesurée sur l'affiche de l'image (880 px de
 * large, d'où les cqw) : le nombre d'années en Playfair noire sur 38 % de la largeur, les
 * prénoms en capitales terracotta posés dessus, les millésimes en pastille d'encre au pied du
 * chiffre ; « Ans de bonheur » en anglaise ; le décompte sur trois colonnes séparées d'un
 * filet ; les jalons entre deux filets ; le nom des noces en terracotta ; le rameau ; la phrase.
 *
 * **Tout est en cqw, rien n'est fixé en hauteur** : les cinq formats vont de 1,333 à 1,5 de
 * rapport, et l'écart s'absorbe dans les gaps de la colonne (`space-between`), jamais dans une
 * taille de texte. Les filets et le rameau lisent la palette ; aucune valeur littérale ici.
 *
 * **Les prénoms sur le chiffre portent un halo de papier** (`paint-order` + `text-stroke`) :
 * terracotta sur olive foncé ne se lit pas à 300 dpi sans lui, et c'est ce que montre la
 * référence à y regarder de près — un liseré clair là où les lettres croisent le chiffre.
 */
.noces--chiffres {
  --fond: var(--pal-papier); --texte: var(--pal-encre);
  justify-content: space-between; padding: 6.5cqw 8.5cqw 7cqw;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
}
/* Les symboles, déclarés une fois hors écran et rappelés par `<use>`. Pas `display: none` :
   certains moteurs ne résolvent pas un `<use>` vers un symbole d'un SVG masqué ainsi. */
.noces__symboles { position: absolute; width: 0; height: 0; overflow: hidden; }
.noces__tete { position: relative; width: 100%; }
.noces__nombre {
  margin: 0; font-weight: 900; font-size: 33cqw; line-height: .86; letter-spacing: -.04em;
  font-variant-numeric: lining-nums; color: var(--pal-encre);
}
.noces--chiffres .noces__prenoms {
  position: absolute; left: 0; right: 0; top: 58%; transform: translateY(-50%);
  font-style: normal; font-weight: 700; font-size: calc(5cqw * var(--ech, 1));
  letter-spacing: .07em; text-transform: uppercase; color: var(--pal-accent); line-height: 1;
  /* Sur une ligne, toujours : posés sur le chiffre, deux prénoms qui passeraient à la ligne le
     recouvriraient. `nowrap` est aussi ce qui permet au script de mesurer le débordement et de
     resserrer — un texte qui se replie ne déborde jamais. */
  white-space: nowrap;
  /* .8 et non .4 : à .4 le liseré était trop fin pour détacher les lettres du chiffre, et en
     Encre « CÉLINE & JULIEN » gris sur le « 25 » noir ne se lisait plus (relevé le 26 sept.
     2026 sur la vitrine). Il a la couleur du papier : il ne se voit que sur le chiffre. */
  paint-order: stroke fill; -webkit-text-stroke: .8cqw var(--pal-papier);
}
/* En Encre, l'accent est un gris moyen : sur le chiffre noir, même liseré, il flottait. Les
   prénoms y prennent l'encre, noire, que le liseré blanc détache. */
.noces--chiffres[data-palette="Encre"] .noces__prenoms { color: var(--pal-encre); }
/* L'esperluette de Playfair est une ornée italique ; la référence en montre une droite. */
.noces__et { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.08em; }
.noces__millesimes {
  position: absolute; left: 50%; top: 86%; transform: translate(-50%, -50%); margin: 0;
  background: var(--pal-encre); color: var(--pal-papier);
  font-size: 2.6cqw; letter-spacing: .14em; line-height: 1; padding: 1cqw 2.4cqw .9cqw; border-radius: .7cqw;
  white-space: nowrap;
}
.noces__millesimes:empty { display: none; }
.noces__script { margin: 1.5cqw 0 0; font-family: "Sacramento", cursive; font-size: 10cqw; line-height: 1; }
.noces__decompte { width: 100%; border-bottom: .22cqw solid var(--pal-trait); padding-bottom: 2.4cqw; }
.noces__section { margin: 0 0 1.6cqw; font-weight: 700; font-size: 6.2cqw; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.noces__compteurs { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; }
.noces__compteur { display: flex; flex-direction: column; align-items: center; gap: .5cqw; padding: .6cqw 1.2cqw 0; min-width: 0; }
.noces__compteur + .noces__compteur { border-left: .22cqw solid var(--pal-trait); }
.noces__picto { width: 6cqw; height: 6cqw; color: var(--pal-accent); fill: currentColor; display: block; flex: none; }
.noces__compteur .noces__picto { margin-bottom: .8cqw; }
.noces__valeur { font-weight: 700; font-size: 6.6cqw; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.noces__unite { font-weight: 700; font-size: 4.6cqw; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; }
.noces__legende {
  margin-top: .7cqw; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 400;
  font-size: 2.45cqw; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance;
}
.noces__jalons {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.8cqw;
  border-bottom: .22cqw solid var(--pal-trait); padding-bottom: 2.6cqw;
}
/* Sans un seul jalon rempli, le bloc et ses deux filets disparaissent : une affiche à quatre
   jalons vides n'est pas une affiche à trous, c'est une affiche sans jalons. */
.noces__jalons:not(:has(.noces__jalon:not([hidden]))) { display: none; }
.noces__pictos { display: flex; justify-content: center; gap: 8cqw; }
.noces__pictos .noces__picto { width: 6.4cqw; height: 6.4cqw; }
.noces__picto[hidden], .noces__jalon[hidden] { display: none; }
/* La ligne des jalons est du texte qui se replie, pas une rangée : quatre jalons longs font
   deux lignes, équilibrées (`text-wrap: balance`), et **le point sépare en fin de jalon, jamais en
   tête de ligne** — un `::before` posé sur le suivant se retrouvait seul au début de la seconde
   ligne. Le dernier jalon visible n'en porte pas. */
.noces__jalons-texte {
  margin: 0; text-wrap: balance;
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 400;
  font-size: 2.2cqw; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase;
}
/* Un jalon ne se coupe pas en son milieu : la ligne se replie entre deux jalons, jamais dedans. */
.noces__jalon { white-space: nowrap; }
.noces__jalon:not([hidden]):has(~ .noces__jalon:not([hidden]))::after { content: "\00a0\00a0\2022  "; color: var(--pal-accent); }
.noces__noces {
  width: 100%; margin: 0; font-weight: 700; font-size: calc(6.8cqw * var(--ech, 1)); line-height: 1.1;
  letter-spacing: .03em; text-transform: uppercase; color: var(--pal-accent); white-space: nowrap;
}
.noces__rameau { width: 30cqw; height: auto; display: block; margin: 0 auto; }
.noces__phrase--chiffres {
  margin: 0; font-style: normal; opacity: 1;
  font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 400;
  font-size: 2.7cqw; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase;
}

/* Les quatre jalons du formulaire : un symbole, quelques mots, sur une ligne. */
.noces-jalons legend { padding: 0; margin-bottom: .8rem; }
.noces-jalon { display: grid; grid-template-columns: minmax(11rem, 2fr) 3fr; gap: .8rem; margin-bottom: .8rem; }
.noces-jalon select {
  width: 100%; min-height: 4.4rem; font: inherit; font-size: 1.6rem; padding: .6rem 1rem;
  border: .1rem solid rgba(var(--color-foreground), .35); border-radius: .4rem;
  background: rgb(var(--color-background)); color: rgb(var(--color-foreground));
}
.noces-jalon select:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }


/* ══ 9. Ma naissance (7 nov. 2026) ══
 *
 * La naissance douce et émotionnelle, d'après la référence de Fred. Deux fiches, une mise en page :
 * `.naissance--doux` porte la photo du bébé dans un cœur, `.naissance--douxsimple` n'en a pas.
 *
 * Toutes les dimensions sont en `cqw`, donc l'affiche tient de l'A4 au 70 × 100 sans être étirée. La **scène**
 * (le ciel et son décor) est pleine largeur (`margin: 0 -6cqw`) : ses positions se lisent en pour-cent de
 * l'affiche, pas de la boîte de contenu. Le disque de ciel est dimensionné **par la feuille** (`.dx-ciel`) et
 * dessiné par le script à cette taille ; son anneau d'or est un dégradé qui déborde de 2,2 cqw, **derrière** le
 * canevas. Aucun filtre SVG, aucune ombre qui s'imprimerait de travers : des dégradés et des `box-shadow`
 * portés par des enfants (`cssDeRendu` ne remet à zéro que celle de l'affiche).
 */
.naissance--doux, .naissance--douxsimple, .naissance--douxmeteo {
  font-family: "Cormorant Garamond", Georgia, serif; color: var(--dx-encre);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 5.2cqw 6cqw 5.4cqw; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 95% 70% at 50% 36%, var(--dx-lueur), var(--dx-papier) 58%, var(--dx-bord) 100%);
}
.dx-titre {
  margin: 0; font-family: "Pinyon Script", "Sacramento", cursive; font-size: 12.6cqw; line-height: 1.05;
  color: var(--dx-encre); text-align: center; flex: none; position: relative;
}
.dx-coeur-titre { position: absolute; width: 6cqw; height: 6cqw; top: 9cqw; }
.dx-coeur-titre--g { left: 8cqw; } .dx-coeur-titre--d { right: 8cqw; }
.dx-ruban { position: relative; width: 62cqw; height: 13.4cqw; flex: none; margin-top: -1cqw; }
.dx-ruban > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dx-ruban .naissance__prenom {
  position: absolute; left: 17%; right: 17%; top: 45%; width: auto; transform: translateY(-50%);
  font-family: "Pinyon Script", "Sacramento", cursive; font-size: calc(7.8cqw * var(--prenom-echelle, 1));
  line-height: 1.1; text-align: center; color: var(--dx-encre); text-wrap: nowrap;
}
.dx-scene { position: relative; align-self: stretch; margin: 0 -6cqw; height: 68cqw; flex: none; }
.dx-ciel { position: absolute; left: 25cqw; top: 6.6cqw; width: 50cqw; height: 50cqw; display: block; }
.dx-ciel canvas { position: relative; z-index: 1; display: block; border-radius: 50%; }
.dx-anneau {
  position: absolute; inset: -2.2cqw; border-radius: 50%;
  background: linear-gradient(135deg, var(--dx-or-clair), var(--dx-or) 48%, var(--dx-or-clair));
  box-shadow: 0 1cqw 3cqw color-mix(in srgb, var(--dx-or) 38%, transparent);
}
.dx-anneau::after { content: ""; position: absolute; inset: 2.2cqw; border-radius: 50%; background: var(--dx-papier); }
.dx-cardinal {
  position: absolute; z-index: 2; font-weight: 600; font-size: 3.4cqw; line-height: 1; color: var(--dx-encre);
  font-family: "Cormorant Garamond", Georgia, serif; transform: translate(-50%, -50%);
}
.dx-cardinal--n { left: 50%; top: -4.2cqw; } .dx-cardinal--s { left: 50%; top: calc(100% + 4.2cqw); }
.dx-cardinal--e { left: -4.2cqw; top: 50%; } .dx-cardinal--o { left: calc(100% + 4.2cqw); top: 50%; }
.dx-deco { position: absolute; height: auto; pointer-events: none; display: block; }
.dx-lune { left: 4.6cqw; top: 2.4cqw; width: 22cqw; }
.dx-fil { left: 9.6cqw; top: 22.2cqw; width: 3.2cqw; }
.dx-nuage--haut { left: 71cqw; top: 9cqw; width: 25cqw; }
.dx-nuage--bas { left: 2.4cqw; top: 40cqw; width: 30cqw; }
.dx-ourson { left: 48cqw; top: 45cqw; width: 26cqw; z-index: 6; }
.dx-eclat--1 { left: 38cqw; top: 1.4cqw; width: 4cqw; } .dx-eclat--2 { left: 82cqw; top: 3cqw; width: 5cqw; }
.dx-eclat--3 { left: 91cqw; top: 33cqw; width: 6cqw; } .dx-eclat--4 { left: 7cqw; top: 59cqw; width: 4cqw; }
.dx-etoile--1 { left: 13.4cqw; top: 36.4cqw; width: 4.6cqw; } .dx-etoile--2 { left: 63cqw; top: 2cqw; width: 3.4cqw; }
.dx-etoile--3 { left: 33cqw; top: 62cqw; width: 3.6cqw; }
.dx-petit-coeur--1 { left: 87cqw; top: 46cqw; width: 4.6cqw; } .dx-petit-coeur--2 { left: 12cqw; top: 51cqw; width: 3.6cqw; }

/* Le cœur de la photo : un cadre d'or, la photo découpée par le cœur (`objectBoundingBox`). Sans photo, l'initiale. */
.dx-coeur { position: absolute; left: 65cqw; top: 44.4cqw; width: 29cqw; height: 29cqw; z-index: 5; }
.dx-coeur__cadre { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dx-coeur .naissance__photo {
  left: 6%; top: 5%; width: 88%; height: 88%; margin: 0; border-radius: 0; box-shadow: none;
  clip-path: url(#dx-coeur-clip); background: var(--dx-nuage-ombre);
}
.dx-initiale { font-family: "Pinyon Script", "Sacramento", cursive; font-style: normal; font-size: 14cqw; line-height: 1; color: var(--dx-encre); padding-bottom: 2cqw; }
.dx-initiale[hidden] { display: none; }

.dx-legende { position: relative; flex: none; align-self: flex-start; margin: -5.4cqw 0 0 5cqw; z-index: 4; }
.dx-legende p {
  margin: 0; padding: 1.6cqw 7cqw 2cqw; border-radius: 999px; background: var(--dx-nuage);
  border: .3cqw solid var(--dx-or-clair); font-family: "Pinyon Script", "Sacramento", cursive; font-size: 6.2cqw; line-height: 1.15;
  box-shadow: 0 .8cqw 2cqw color-mix(in srgb, var(--dx-or) 22%, transparent); color: var(--dx-encre); white-space: nowrap;
}

.dx-faits { display: flex; justify-content: center; align-items: stretch; width: 100%; flex: none; gap: 0; }
.dx-fait {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw;
  padding: 3cqw 1cqw 3.2cqw; position: relative; text-align: center;
}
.dx-fait[hidden] { display: none; }
.dx-fait::before {
  content: ""; position: absolute; inset: 1cqw 1.2cqw; z-index: 0; background: var(--dx-nuage-ombre);
  border-radius: 48% 52% 46% 54% / 58% 56% 44% 42%; opacity: .75;
}
.dx-fait + .dx-fait:not([hidden])::after {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; border-left: .22cqw solid var(--dx-or);
}
.dx-fait > * { position: relative; z-index: 1; }
.dx-icone { width: 8.4cqw; height: 8.4cqw; display: block; flex: none; }
.dx-valeur { margin: 0; font-style: italic; font-weight: 500; font-size: 3.9cqw; line-height: 1.15; white-space: nowrap; color: var(--dx-encre); }
.dx-valeur:empty { display: none; }

.dx-pied { flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1cqw; margin-top: 1.6cqw; }
.dx-lieu { margin: 0; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; width: 100%; font-style: italic; font-size: 4.6cqw; line-height: 1.1; }
.dx-lieu::before, .dx-lieu::after { content: ""; flex: 1 1 0; max-width: 22cqw; border-top: .22cqw solid var(--dx-or-clair); }
.dx-epingle { width: 4.8cqw; height: 4.8cqw; display: block; flex: none; }
.naissance--doux .naissance__lieu, .naissance--douxsimple .naissance__lieu, .naissance--douxmeteo .naissance__lieu { font-size: 4.6cqw; letter-spacing: .02em; }
.naissance--doux .naissance__parents, .naissance--douxsimple .naissance__parents, .naissance--douxmeteo .naissance__parents { font-style: italic; font-size: 3.4cqw; opacity: .85; }

/* Sans photo : le disque grandit, l'ourson prend la place du cœur, et la lune et les nuages gardent la leur. */
.naissance--douxsimple .dx-scene { height: 70cqw; }
.naissance--douxsimple .dx-ciel { left: 22cqw; top: 6.8cqw; width: 56cqw; height: 56cqw; }
.naissance--douxsimple .dx-ourson { left: 56cqw; top: 43.6cqw; width: 28cqw; }
.naissance--douxsimple .dx-nuage--haut { left: 74cqw; top: 6cqw; width: 22cqw; }
.naissance--douxsimple .dx-eclat--2 { left: 70cqw; top: 2cqw; }
.naissance--douxsimple .dx-lune { top: 2cqw; } .naissance--douxsimple .dx-fil { top: 27cqw; }
.naissance--douxsimple .dx-nuage--bas { top: 47cqw; }
.naissance--douxsimple .dx-petit-coeur--1 { left: 84cqw; top: 40cqw; }
.dx-nuage--pied-g { left: -6cqw; bottom: -9cqw; width: 36cqw; z-index: 0; } .dx-nuage--pied-d { right: -6cqw; bottom: -9cqw; width: 36cqw; z-index: 0; }
.dx-faits, .dx-pied { position: relative; z-index: 1; }

/* ── « Ma naissance » avec la météo du jour J ──
 * La même mise en page, resserrée : le disque et le cœur de la photo sont plus petits (la photo reste dans son cœur, à côté
 * du ciel) pour laisser la place au tableau du jour — le pictogramme du ciel, la température, le vent, l'humidité, le lever
 * et le coucher du soleil — puis à la phrase. Le pictogramme est celui de « Il faisait quel temps ? » (`meteo-calcul.picto`),
 * habillé ici par les variables de la palette : ses classes `mt-p-*` ne sont pas stylées par `meteo.css`, qui n'est pas chargée. */
.naissance--douxmeteo { padding: 4.4cqw 6cqw 4.4cqw; }
.naissance--douxmeteo .dx-titre { font-size: 10.8cqw; }
.naissance--douxmeteo .dx-coeur-titre { top: 6.4cqw; width: 5cqw; height: 5cqw; }
.naissance--douxmeteo .dx-ruban { width: 54cqw; height: 11.6cqw; }
.naissance--douxmeteo .dx-ruban .naissance__prenom { font-size: calc(6.8cqw * var(--prenom-echelle, 1)); }
.naissance--douxmeteo .dx-scene { height: 47cqw; }
.naissance--douxmeteo .dx-ciel { left: 30cqw; top: 5.2cqw; width: 40cqw; height: 40cqw; }
.naissance--douxmeteo .dx-cardinal { font-size: 3cqw; }
.naissance--douxmeteo .dx-lune { left: 5cqw; top: 3cqw; width: 18cqw; }
.naissance--douxmeteo .dx-fil { left: 9.6cqw; top: 18.4cqw; width: 2.6cqw; }
.naissance--douxmeteo .dx-nuage--haut { left: 75cqw; top: 6cqw; width: 19cqw; }
.naissance--douxmeteo .dx-nuage--bas { left: 3cqw; top: 31cqw; width: 22cqw; }
.naissance--douxmeteo .dx-ourson { left: 41cqw; top: 33.4cqw; width: 19cqw; }
.naissance--douxmeteo .dx-coeur { left: 62cqw; top: 29cqw; width: 22cqw; height: 22cqw; }
.naissance--douxmeteo .dx-initiale { font-size: 10.4cqw; }
.naissance--douxmeteo .dx-eclat--1 { left: 26cqw; top: 1cqw; width: 3.4cqw; } .naissance--douxmeteo .dx-eclat--2 { left: 84cqw; top: 3cqw; }
.naissance--douxmeteo .dx-eclat--3 { left: 90cqw; top: 22cqw; width: 5cqw; } .naissance--douxmeteo .dx-eclat--4 { left: 7cqw; top: 44cqw; }
.naissance--douxmeteo .dx-etoile--1 { left: 18cqw; top: 27cqw; width: 3.6cqw; } .naissance--douxmeteo .dx-etoile--2 { left: 64cqw; top: 1cqw; }
.naissance--douxmeteo .dx-etoile--3 { left: 30cqw; top: 47cqw; }
.naissance--douxmeteo .dx-petit-coeur--1 { left: 87cqw; top: 34cqw; } .naissance--douxmeteo .dx-petit-coeur--2 { left: 4cqw; top: 25cqw; }
/* Sans la bulle « Le ciel de ma naissance » : la place revient au tableau, et l'ourson se pose sur son bord. */
.naissance--douxmeteo .dx-legende { display: none; }
.dx-meteo {
  flex: none; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 3cqw;
  padding: 1.8cqw 3.4cqw; border-radius: 4cqw; background: var(--dx-nuage); border: .3cqw solid var(--dx-or-clair);
  box-shadow: 0 .8cqw 2cqw color-mix(in srgb, var(--dx-or) 18%, transparent); position: relative; z-index: 1;
}
.dx-meteo__jour { display: flex; align-items: center; gap: 2.4cqw; min-width: 0; }
.dx-picto { display: block; width: 13cqw; height: 13cqw; flex: none; }
.dx-picto svg { width: 100%; height: 100%; display: block; }
.dx-picto .mt-p-soleil { fill: var(--dx-lune-a); stroke: var(--dx-or); stroke-width: 2.4; }
.dx-picto .mt-p-rayon { stroke: var(--dx-or); stroke-width: 4.5; stroke-linecap: round; }
.dx-picto .mt-p-nuage { fill: var(--dx-nuage); stroke: var(--dx-or); stroke-width: 2.4; stroke-linejoin: round; }
.dx-picto .mt-p-nuage2 { fill: var(--dx-nuage-ombre); stroke: var(--dx-or); stroke-width: 2.4; stroke-linejoin: round; }
.dx-picto .mt-p-goutte { stroke: var(--dx-goutte); stroke-width: 4; stroke-linecap: round; }
.dx-picto .mt-p-flocon { stroke: var(--dx-goutte); stroke-width: 2.4; stroke-linecap: round; }
.dx-picto .mt-p-eclair { fill: var(--dx-lune-b); stroke: var(--dx-or); stroke-width: 2.2; stroke-linejoin: round; }
.dx-picto .mt-p-brume { stroke: var(--dx-or-clair); stroke-width: 4; stroke-linecap: round; }
.dx-meteo__chiffres { display: flex; flex-direction: column; min-width: 0; }
.dx-meteo__chiffres p { margin: 0; }
.dx-temp { font-size: 9.2cqw; line-height: 1; font-weight: 600; font-style: italic; white-space: nowrap; color: var(--dx-encre); }
.dx-etat { font-size: 3.6cqw; line-height: 1.15; font-style: italic; color: var(--dx-encre); }
.dx-minmax { font-size: 3cqw; line-height: 1.2; opacity: .8; color: var(--dx-encre); }
.dx-meteo__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto; gap: 1.6cqw 3cqw; justify-content: end; }
.dx-meteo__liste li { display: flex; align-items: center; gap: 1.2cqw; font-style: italic; font-size: 3.3cqw; line-height: 1.1; white-space: nowrap; color: var(--dx-encre); }
.dx-meteo__liste li:has(span:empty) { visibility: hidden; }
.dx-mini { width: 4.6cqw; height: 4.6cqw; flex: none; display: block; }
.dx-meteo__attente { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; text-align: center; padding: 0 4cqw; border-radius: inherit; background: color-mix(in srgb, var(--dx-nuage) 92%, transparent); font-style: italic; font-size: 3.2cqw; color: var(--dx-encre); }
.dx-meteo__attente[hidden] { display: none; }
.dx-phrase-meteo {
  flex: none; margin: 1.4cqw 0 0; max-width: 84cqw; text-align: center; text-wrap: balance;
  font-family: "Pinyon Script", "Sacramento", cursive; font-size: 4.6cqw; line-height: 1.25; color: var(--dx-encre); position: relative; z-index: 1;
}
.naissance--douxmeteo .dx-faits { margin-top: .6cqw; }
.naissance--douxmeteo .dx-fait { padding: 1.6cqw .6cqw 1.8cqw; gap: .6cqw; }
.naissance--douxmeteo .dx-icone { width: 5.8cqw; height: 5.8cqw; }
.naissance--douxmeteo .dx-valeur { font-size: 3.4cqw; }
.naissance--douxmeteo .dx-pied { margin-top: .8cqw; }
.naissance--douxmeteo .dx-lieu { font-size: 4.2cqw; }