/* ═══════════════════════════════ 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;
}
/* **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;
}

/* ── 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;
}
.naissance--arche .naissance__ligne { font-style: italic; font-size: 4.3cqw; line-height: 1.3; }
.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; }
.naissance--arche .naissance__phrase {
  font-family: "Pinyon Script", "Sacramento", cursive; font-size: 6.6cqw; 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-nuit); --texte: 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; }
/* `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. */
.naissance__faits > span + span::before {
  content: ""; display: inline-block; width: 2.2cqw; height: 2.2cqw; margin-right: 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;
}
.naissance--portrait .naissance__phrase {
  font-family: "Pinyon Script", "Sacramento", cursive; font-size: 6.4cqw; line-height: 1.05;
}
.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;
}

/* ── 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; }

.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;
  paint-order: stroke fill; -webkit-text-stroke: .4cqw var(--pal-papier);
}
/* 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.4rem; 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; }