/* ——— La carte de ville en forme (9 nov. 2026) ———
 *
 * Chargée sur la fiche « carte de ville en forme de cœur » seulement. La carte n'est plus un rectangle : elle est
 * découpée par une forme (`lib/carte-forme.js`), et un trait de la couleur des rues en dessine le bord — sans lui, sur
 * un fond qui est celui du papier, le contour d'un cœur ne se verrait que là où une rue le coupe.
 *
 * La forme est celle de `data-forme` sur l'affiche, écrite par le serveur : une page sans script la montre déjà, et la
 * page de fabrication, qui rejoue la saisie, imprime celle que le client a vue. Les points du découpage (`clipPath` en
 * `objectBoundingBox`, dans la page) et ceux du contour sont les mêmes ; ici ne se règlent que la place et le trait.
 *
 * La largeur de chaque forme est calée pour que toutes aient **la même hauteur**, 85 % de la largeur de l'affiche : le
 * titre et la dédicace dessous gardent leur place au 30 × 40, le format le plus trapu.
 */
.cf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.affiche__affiche--carte-forme .cf-boite { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cf-cadre { position: relative; flex: none; width: var(--cf-l, 88%); aspect-ratio: var(--cf-r, 1.1066); }
.cf-cadre .affiche__carte { position: absolute; inset: 0; flex: none; }

[data-forme="coeur"]   { --cf-l: 95%; --cf-r: 1.1784; }
[data-forme="rond"]    { --cf-l: 86%; --cf-r: 1; }
[data-forme="maison"]  { --cf-l: 86%; --cf-r: 1; }
[data-forme="epingle"] { --cf-l: 62%; --cf-r: 0.7273; }
[data-forme="etoile"]  { --cf-l: 90%; --cf-r: 1.0515; }

[data-forme="coeur"]   .affiche__carte { clip-path: url(#cf-coeur); }
[data-forme="rond"]    .affiche__carte { clip-path: url(#cf-rond); }
[data-forme="maison"]  .affiche__carte { clip-path: url(#cf-maison); }
[data-forme="epingle"] .affiche__carte { clip-path: url(#cf-epingle); }
[data-forme="etoile"]  .affiche__carte { clip-path: url(#cf-etoile); }

/* Le contour : une boîte de même rapport que la forme (le `viewBox` est écrit pour), donc le trait n'est pas écrasé d'un côté.
   Il est de la couleur des rues (`--texte`, posée par le style) et déborde un peu la forme : la moitié du trait est dehors. */
.cf-contour { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: none; pointer-events: none; fill: none; stroke: var(--texte, currentColor); stroke-width: 9; stroke-linejoin: round; }
[data-forme="coeur"]   .cf-contour--coeur,
[data-forme="rond"]    .cf-contour--rond,
[data-forme="maison"]  .cf-contour--maison,
[data-forme="epingle"] .cf-contour--epingle,
[data-forme="etoile"]  .cf-contour--etoile { display: block; }

/* Le choix de la forme dans le formulaire : une vignette par forme, qui la montre. 44 px de cible au moins. */
.forme-carte__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 560px) { .forme-carte__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.forme-carte__choix { position: relative; }
.forme-carte__choix input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.forme-carte__choix label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .9rem .6rem .7rem; min-height: 44px; cursor: pointer;
  background: rgb(var(--creme)); border: 2px solid rgba(var(--encre), .16); border-radius: .8rem; text-align: center; font-size: 1.35rem; line-height: 1.25;
}
.forme-carte__choix label svg { width: 100%; height: 5.2rem; fill: rgba(var(--encre), .14); stroke: rgb(var(--encre)); stroke-width: 22; stroke-linejoin: round; overflow: visible; padding: .2rem; box-sizing: border-box; }
.forme-carte__choix input:checked + label { border-color: rgb(var(--navy)); box-shadow: 0 0 0 1px rgb(var(--navy)); font-weight: 600; }
.forme-carte__choix input:checked + label svg { fill: rgba(var(--navy), .22); stroke: rgb(var(--navy)); }
.forme-carte__choix input:focus-visible + label { outline: 3px solid rgb(var(--bleu-focus)); outline-offset: 2px; }