/* ═══════════════════════════════ Nos voyages ═══════════════════════════════
 *
 * La carte des voyages faits ensemble, en points, chacun relié au départ. Servie **seulement**
 * sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── Les couleurs ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en
 * tête, et nulle part ailleurs. `[data-style]` ne nomme pas `.vo` exprès, pour que les pastilles
 * du formulaire se colorent avec les mêmes variables.
 *
 * --v-fond : le papier ; --v-texte : prénoms, légende, chiffres ; --v-terre : les points des
 * terres ; --v-accent : arcs, pastilles, surtitre ; --v-sur-accent : le chiffre dans la pastille ;
 * --v-maison : la maison du départ ; --v-doux : sous-titre, années, libellés des chiffres ;
 * --v-filet : les deux filets autour des chiffres ; --v-eu … --v-an : un continent chacun (arcs,
 * pastilles, numéros de la légende), même famille de teintes d'un style à l'autre — l'Europe
 * rouge brique, l'Asie ocre, l'Afrique verte, les Amériques bleue et framboise, l'Océanie
 * turquoise —, assez soutenues pour porter un chiffre en `--v-sur-accent` (4,5 au moins : c'est
 * du petit texte).
 *
 * Les terres sont **opaques** et non transparentes : à .3 d'opacité, le monde se lisait à peine
 * (Fred, 8 oct. 2026 : « trop fade »).
 */
.vo [data-c="eu"] { --vc: var(--v-eu); } .vo [data-c="as"] { --vc: var(--v-as); } .vo [data-c="af"] { --vc: var(--v-af); }
.vo [data-c="na"] { --vc: var(--v-na); } .vo [data-c="sa"] { --vc: var(--v-sa); } .vo [data-c="oc"] { --vc: var(--v-oc); }
.vo [data-c="an"] { --vc: var(--v-an); }
[data-style="Papier"] { --v-fond: #f6f0e4; --v-texte: #1d2733; --v-terre: #7f8a96; --v-accent: #b8432a; --v-sur-accent: #ffffff; --v-maison: #1d2733; --v-doux: #4a5462; --v-filet: rgba(29, 39, 51, .35);
  --v-eu: #c0432a; --v-as: #9c6407; --v-af: #3d7a2c; --v-na: #2d5f9e; --v-sa: #ad3a6c; --v-oc: #0e7480; --v-an: #66727f; }
[data-style="Minimal"] { --v-fond: #ffffff; --v-texte: #111111; --v-terre: #8f8f8f; --v-accent: #111111; --v-sur-accent: #ffffff; --v-maison: #111111; --v-doux: #4d4d4d; --v-filet: rgba(17, 17, 17, .32);
  --v-eu: #c4361f; --v-as: #a86400; --v-af: #237f3d; --v-na: #2064c2; --v-sa: #c8357a; --v-oc: #0a7987; --v-an: #6e6e6e; }
[data-style="Nuit"] { --v-fond: #10203a; --v-texte: #f4ead4; --v-terre: #607392; --v-accent: #e3b866; --v-sur-accent: #10203a; --v-maison: #f4ead4; --v-doux: #cfc5ae; --v-filet: rgba(244, 234, 212, .35);
  --v-eu: #e8b660; --v-as: #f08a63; --v-af: #9dcc72; --v-na: #6fb2ee; --v-sa: #ee93b8; --v-oc: #5fd1c3; --v-an: #c3cdd8; }
[data-style="Sauge"] { --v-fond: #dce4d2; --v-texte: #1c2a1f; --v-terre: #71866a; --v-accent: #8a4520; --v-sur-accent: #ffffff; --v-maison: #1c2a1f; --v-doux: #405043; --v-filet: rgba(28, 42, 31, .35);
  --v-eu: #a84626; --v-as: #94650a; --v-af: #2d6b37; --v-na: #2c5789; --v-sa: #8c375f; --v-oc: #136c76; --v-an: #56635a; }

/* ── L'affiche ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. De haut en bas : les
 * prénoms, la carte — qui prend toute la place qui reste —, la légende, les chiffres, la phrase.
 * La carte cède quand la place manque, jamais le texte ; au plancher, la légende se resserre
 * (`--vo-echelle`, posée par l'éditeur).
 */
.vo {
  --fond: var(--v-fond); --texte: var(--v-texte);
  font-family: "Josefin Sans", system-ui, sans-serif; text-align: center;
  padding: 8cqw 6.5cqw 7cqw; gap: 3cqw; justify-content: space-between;
}
.vo__tete { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
.vo__tete p { margin: 0; max-width: 100%; }
.vo__kicker { font-weight: 600; font-size: 2.1cqw; letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: var(--v-accent); }
/* Les prénoms ne passent pas à la ligne : l'éditeur les resserre au pixel. */
.vo__noms { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 8.6cqw; line-height: 1.08; white-space: nowrap; }
.vo__sous { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 3.6cqw; line-height: 1.2; color: var(--v-doux); overflow-wrap: anywhere; text-wrap: balance; }
.vo__sous[hidden] { display: none; }
/* L'exemple de la fiche en pleine couleur (Fred, 8 oct. 2026 : à 40 %, la règle commune, la
   première vue de l'affiche était délavée). Il ne peut pas partir imprimé : il s'en va en entier
   au premier lieu placé, et une commande exige des lieux placés. Il garde sa classe, donc la
   fabrication et l'écran « Vérifiez votre affiche » le masquent toujours. Seul le sous-titre,
   facultatif et qui ne s'imprime pas s'il reste vide, reste un peu estompé. */
.affiche__affiche.vo .affiche-exemple { opacity: 1; }
.affiche__affiche.vo .vo__sous.affiche-exemple { opacity: .6; }

/* La carte prend toute la largeur, à son rapport (`--vo-ratio`, posé par le calcul) ; le reste
   de la hauteur se répartit entre les blocs. Quand la place manque — l'Europe est presque
   carrée —, elle rétrécit en hauteur, et le SVG, posé en absolu dans sa boîte, garde ses
   proportions (`meet`) : il s'étrécit, il ne se déforme pas. */
.vo__carte { flex: 0 1 auto; aspect-ratio: var(--vo-ratio, 2.6); min-height: 18cqw; position: relative; margin-inline: -6.5cqw; }
.vo[data-vue="europe"] .vo__carte { margin-inline: 0; }
.vo__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vo__terre { fill: none; stroke: var(--v-terre); stroke-linecap: round; }
.vo__arc, .vo__fil { fill: none; stroke: var(--vc, var(--v-accent)); stroke-linecap: round; }
.vo__fil { opacity: .7; }
.vo__ancre { fill: var(--vc, var(--v-accent)); }
.vo__pin circle { fill: var(--vc, var(--v-accent)); stroke: var(--v-fond); }
.vo__pin text { fill: var(--v-sur-accent); font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 700; text-anchor: middle; }
.vo__maison path { fill: var(--v-maison); stroke: var(--v-fond); }

/* La légende : trois colonnes, deux quand elle est courte. Le numéro dans une pastille de la
   couleur de son continent, comme sur la carte, le lieu, l'année à sa suite. Un lieu long passe à la ligne plutôt que d'être coupé. */
.vo__legende {
  flex: none; list-style: none; margin: 0; padding: 0; text-align: left;
  columns: 3; column-gap: 4cqw; font-size: calc(2.5cqw * var(--vo-echelle, 1)); line-height: 1.2; letter-spacing: .02em;
}
.vo__legende[data-courte] { columns: 2; }
.vo__l { break-inside: avoid; display: flex; align-items: baseline; gap: 1.2cqw; margin-bottom: calc(1.2cqw * var(--vo-echelle, 1)); }
.vo__l b {
  flex: none; display: inline-grid; place-items: center; width: calc(3.1cqw * var(--vo-echelle, 1)); height: calc(3.1cqw * var(--vo-echelle, 1)); border-radius: 50%; align-self: center;
  font-size: .78em; font-weight: 700; line-height: 1; padding-top: .12em; color: var(--v-sur-accent); background: var(--vc, var(--v-accent)); font-variant-numeric: tabular-nums;
}
.vo__l-lieu { min-width: 0; overflow-wrap: anywhere; }
.vo__l-an { color: var(--v-doux); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vo__l--depart b { color: var(--v-texte); background: none; }
.vo__l-maison { width: 2.2cqw; height: 2.2cqw; vertical-align: -.2cqw; fill: currentColor; }

.vo__chiffres { flex: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 5cqw; padding: 2.4cqw 0; border-top: max(1px, .15cqw) solid var(--v-filet); border-bottom: max(1px, .15cqw) solid var(--v-filet); }
.vo__chiffres:empty { display: none; }
.vo__c strong { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 6.8cqw; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.vo__c-pastilles { display: flex; justify-content: center; gap: .7cqw; margin-top: 1cqw; }
.vo__c-pastilles i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--vc); }
.vo__c small { display: block; margin-top: 1cqw; font-size: 1.8cqw; letter-spacing: .24em; padding-left: .24em; text-transform: uppercase; color: var(--v-doux); }
.vo__phrase { flex: none; margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 3.8cqw; line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance; }
.vo__phrase:empty { display: none; }

/* ── Le formulaire ── */
.vo-styles, .vo-cartes { display: flex; flex-wrap: wrap; gap: .8rem; }
.vo-styles input, .vo-cartes input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vo-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; min-width: 6.4rem;
  font-size: 1.3rem; color: rgba(var(--color-foreground), .75); border: .15rem solid transparent; border-radius: .8rem; padding: .6rem;
}
.vo-cartes label {
  display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0 1.4rem; cursor: pointer; font-size: 1.4rem;
  border: .1rem solid rgba(var(--color-foreground), .25); border-radius: 99rem;
}
.vo-styles input:checked + label { border-color: rgb(var(--color-accent)); color: rgb(var(--color-foreground)); }
.vo-cartes input:checked + label { border-color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .1rem rgb(var(--color-foreground)); }
.vo-styles input:focus-visible + label, .vo-cartes input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* La pastille montre ce que vend le style : le papier, trois points de terre et un arc. */
.vo-pastille {
  width: 3.8rem; height: 3.8rem; border-radius: 50%; position: relative; overflow: hidden;
  background: radial-gradient(circle, var(--v-terre) 22%, transparent 26%) 0 0 / .8rem .8rem, var(--v-fond);
  border: .1rem solid rgba(var(--color-foreground), .2);
}
.vo-pastille::after { content: ""; position: absolute; left: 22%; right: 22%; top: 34%; height: 40%; border: .2rem solid var(--v-accent); border-color: var(--v-accent) transparent transparent; border-radius: 50%; }

.vo-ligne__recherche { display: flex; gap: .8rem; }
.vo-ligne__recherche input { flex: 1 1 auto; min-width: 0; }
.vo-chercher { flex: none; min-height: 4.4rem; padding: 0 1.4rem; font: inherit; font-size: 1.4rem; cursor: pointer; border-radius: .4rem; border: .1rem solid rgba(var(--color-foreground), .35); background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); }
.vo-chercher:hover { border-color: rgb(var(--color-foreground)); }
.vo-chercher:focus-visible, .vo-retirer:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.vo-ligne__retour { margin: .4rem 0 0; font-size: 1.3rem; color: rgba(var(--color-foreground), .75); min-height: 0; }
.vo-ligne__retour:empty { display: none; }
.vo-manque { margin: .6rem 0 0; font-size: 1.4rem; font-weight: 600; color: rgb(var(--color-foreground)); }
.vo-manque[hidden] { display: none; }
.vo-ligne--depart[data-manque] input[type="text"] { border-color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .1rem rgb(var(--color-foreground)); }
.vo-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.vo-ligne__tete { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.vo-ligne__nom { font-size: 1.4rem; font-weight: 600; }
.vo-ligne__corps { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: .8rem; margin-top: .4rem; }
.vo-retirer { display: inline-grid; place-items: center; width: 4.4rem; height: 4.4rem; margin: -.8rem -.8rem -.8rem 0; padding: 0; border: 0; background: none; cursor: pointer; color: rgba(var(--color-foreground), .7); }
.vo-retirer svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vo-ligne[hidden] { display: none; }
.vo-ajouter { margin-top: 1.2rem; }
@media screen and (max-width: 420px) {
  .vo-ligne__corps { grid-template-columns: minmax(0, 1fr) 7rem; }
  .vo-chercher { padding: 0 1rem; }
}