/* ═══════════════════ Les affiches de Noël : la carte de bébé, le camion de la famille, le traîneau ═══════════════════
 *
 * Servie **seulement** sur leurs fiches (`views/product-affiche.liquid`) : une mise en page d'affiche n'a rien à faire dans le
 * chemin critique du reste du site.
 *
 * ── Ce que la feuille tient ──
 *
 * - **Deux illustrations, un seul texte** (`public/images/noel/`) : l'ours et le renne en peluche, le camion rouge dans la neige sont
 *   des images gardées une fois ; elles portent des cartouches **vides**, et tout ce qui est écrit sur l'affiche — le titre, le
 *   prénom, le nom de la famille, l'année — est du vrai texte posé par la page. Les positions sont **relevées sur l'illustration
 *   gardée**, en pour cent de la carte, et un essai les relit : refaire l'image ou changer un cartouche de place, c'est refaire
 *   ces nombres, nulle part ailleurs.
 * - **La carte se pose, elle ne se déforme jamais.** Le rapport de l'illustration est 3:4 ; les formats vendus vont de 3:4 (30 × 40)
 *   à 2:3 (40 × 60). La carte de bébé, qui porte son cadre rouge et son nœud, se pose **en entier** sur le papier crème (`contain` :
 *   un liseré de papier sur les formats les plus allongés) ; le camion, plein cadre, remplit la feuille (`cover` : un peu de ciel et de
 *   neige en moins sur les côtés des formats allongés, jamais un texte).
 * - **Tout est en `cqw`**, et la carte est elle-même un conteneur : les textes suivent sa largeur, quelle que soit la feuille.
 *   Le texte cède (`font-size` resserré par le script, jusqu'à 0,4), jamais la place d'un cartouche.
 * - **Le traîneau est un calcul** : une carte de points (le fond de « Nos voyages »), un arc du Village du Père Noël à l'adresse,
 *   le traîneau posé dessus et tourné dans le sens du vol, trois chiffres. Aucune couleur n'est dans le dessin, que des classes.
 *
 * ── 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. Le vert
 * et le rouge des textes sont ceux des deux références de Fred ; le papier crème est celui, mesuré, des coins de la carte de bébé.
 */
@font-face {
  font-family: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.nl {
  --nl-papier: #f8ecdc; --nl-vert: #1f3d2b; --nl-rouge: #b3122b; --nl-creme: #fbf3e2;
  container-type: size; position: relative; isolation: isolate; background: var(--nl-papier); color: var(--nl-vert);
  font-family: "Cormorant Garamond", Georgia, serif; line-height: 1.1;
}
.nl .affiche-exemple { opacity: .5; }
.nl .nl-t__zone.affiche-exemple, .nl .nl-t__chiffres.affiche-exemple { opacity: 1; }

/* ── La carte (bébé et camion) ── */
.nl__carte { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); aspect-ratio: 3 / 4; container-type: inline-size; }
.nl[data-variante="bebe"] .nl__carte { width: min(100cqw, 75cqh); }
.nl[data-variante="camion"] .nl__carte, .nl[data-variante="attelage"] .nl__carte, .nl[data-variante="maison"] .nl__carte { width: max(100cqw, 75cqh); }
.nl__fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; user-select: none; -webkit-user-drag: none; }
.nl__carte > :not(.nl__fond) { position: absolute; margin: 0; }
.nl-b__t1, .nl-b__t2, .nl-c__t1, .nl-c__t2, .nl-b__prenom, .nl-a__t1, .nl-a__t2, .nl-m__t1, .nl-m__t2 {
  left: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;
  font-family: "Damion", "Sacramento", cursive; font-weight: 400; font-style: normal; line-height: 1;
}

/* Mon premier Noël — positions relevées sur `public/images/noel/bebe.webp` (1600 × 2143). */
.nl-b__t1 { top: 19.6%; width: 76%; font-size: 10.6cqw; color: var(--nl-vert); }
.nl-b__t2 { top: 32.6%; width: 76%; font-size: 23cqw; color: var(--nl-rouge); }
.nl-b__ovale {
  left: 36.4%; top: 49.2%; width: 29.4%; height: 29.4%; overflow: hidden; border-radius: 50%; background: #fffaf0;
  box-shadow: 0 0 0 .9cqw #fffaf0, 0 0 0 1.25cqw var(--nl-rouge), 0 1cqw 3cqw rgba(60, 20, 10, .22);
}
.nl-b__ovale img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; 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%);
}
.nl-b__ovale[data-photo] { touch-action: pan-y; cursor: grab; }
/* Sans photo, l'ovale porte l'initiale du prénom : c'est un cadre, pas un portrait. */
.nl-b__initiale { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; font: 400 19cqw/1 "Damion", cursive; color: var(--nl-rouge); }
.nl-b__prenom { top: 88.9%; width: 38%; font-size: 8.6cqw; color: var(--nl-rouge); }

/* Noël de notre famille — positions relevées sur `public/images/noel/camion.webp` (1600 × 2143). */
.nl-c__t1 { top: 14.6%; width: 42%; font-size: 15.5cqw; color: var(--nl-vert); }
.nl-c__t2 { top: 25.6%; width: 58%; font-size: 8.8cqw; color: var(--nl-rouge); }
.nl-c__plaque {
  left: 42.8%; top: 58.4%; width: 18.2%; height: 13.2%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-family: "Damion", cursive; color: var(--nl-vert); line-height: 1.05;
}
.nl-c__plaque-ligne { font-size: 3.5cqw; }
.nl-c__famille { display: block; width: 100%; font: 400 5.2cqw/1.05 "Damion", cursive; white-space: nowrap; }
.nl-c__etiquette {
  left: 75.4%; top: 59.6%; width: 14.4%; height: 15.2%; transform: rotate(-12deg); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-family: "Damion", cursive; color: var(--nl-rouge); line-height: 1.05;
}
.nl-c__etiquette span { font-size: 4.4cqw; color: var(--nl-vert); }
.nl-c__etiquette b { font: 400 5.6cqw/1.05 "Damion", cursive; }

/* Le traîneau de la famille — positions relevées sur `public/images/noel/attelage.webp` (1600 × 2143), en pour cent de la carte : le titre
 * sur le grand cartouche (le script entre les deux rameaux, la ligne rouge dessous), la plaque du flanc, l'étiquette du sac (penchée comme
 * elle l'est sur l'image) et le ruban du bas. Le texte cède (`font-size` resserré par le script), jamais la place d'un cartouche. */
.nl-a__t1 { top: 13.4%; width: 38%; font-size: 12cqw; color: var(--nl-vert); }
.nl-a__t2 { top: 22.2%; width: 58%; font-size: 7.2cqw; color: var(--nl-rouge); }
.nl-a__plaque {
  left: 15.3%; top: 61.8%; width: 12.8%; height: 7.4%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-family: "Damion", cursive; color: var(--nl-vert); line-height: 1.05;
}
.nl-a__plaque-ligne { font-size: 2.6cqw; }
.nl-a__famille { display: block; width: 100%; font: 400 3.6cqw/1.05 "Damion", cursive; white-space: nowrap; }
.nl-a__etiquette {
  left: 40.8%; top: 49.4%; width: 10.6%; height: 4.2%; transform: rotate(22deg); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-family: "Damion", cursive; line-height: 1;
}
.nl-a__etiquette span { font-size: 2.3cqw; color: var(--nl-vert); }
.nl-a__etiquette b { font: 400 3.5cqw/1 "Damion", cursive; color: var(--nl-rouge); }
.nl-a__ruban { left: 50%; top: 90.4%; width: 52%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; font: 400 4.6cqw/1 "Damion", cursive; color: var(--nl-vert); }

/* Noël dans notre maison — les deux illustrations (la clé, la porte) n'ont pas leurs cartouches aux mêmes endroits : les positions sont des
 * variables posées par `[data-dessin]`, relevées sur `maison-cle.webp` et `maison-porte.webp` (1600 × 2143). Le bandeau du bas porte
 * l'adresse (Cormorant) et les coordonnées (Inter, espacées) ; le nom est sur l'étiquette de la clé ou la plaque du mur. */
.nl[data-variante="maison"][data-dessin="cle"] {
  --m-t1: 13.2%; --m-t2: 22.2%;
  --m-pq-x: 72.3%; --m-pq-y: 67%; --m-pq-w: 13%; --m-pq-h: 10.6%; --m-pq-r: -6deg; --m-pq-l1: 2.8cqw; --m-pq-l2: 4.6cqw;
  --m-b-x: 12%; --m-b-y: 89.6%; --m-b-w: 76%; --m-b-h: 5.6%;
}
.nl[data-variante="maison"][data-dessin="porte"] {
  --m-t1: 14.4%; --m-t2: 23.6%;
  --m-pq-x: 80.7%; --m-pq-y: 50.4%; --m-pq-w: 13.6%; --m-pq-h: 5.2%; --m-pq-r: 0deg; --m-pq-l1: 2cqw; --m-pq-l2: 3.2cqw;
  --m-b-x: 15%; --m-b-y: 90.2%; --m-b-w: 70%; --m-b-h: 5.4%;
}
.nl-m__t1 { top: var(--m-t1); width: 38%; font-size: 10.6cqw; color: var(--nl-vert); }
.nl-m__t2 { top: var(--m-t2); width: 58%; font-size: 7cqw; color: var(--nl-rouge); }
.nl-m__plaque {
  left: var(--m-pq-x); top: var(--m-pq-y); width: var(--m-pq-w); height: var(--m-pq-h); transform: rotate(var(--m-pq-r)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; font-family: "Damion", cursive; color: var(--nl-vert); line-height: 1.05;
}
.nl-m__plaque-ligne { font-size: var(--m-pq-l1); }
.nl-m__famille { display: block; width: 100%; font: 400 var(--m-pq-l2)/1.05 "Damion", cursive; white-space: nowrap; color: var(--nl-rouge); }
.nl-m__bandeau {
  left: var(--m-b-x); top: var(--m-b-y); width: var(--m-b-w); height: var(--m-b-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; text-align: center;
}
.nl-m__bandeau > p { margin: 0; width: 100%; white-space: nowrap; }
.nl-m__adresse { font: 700 3.8cqw/1.1 "Cormorant Garamond", Georgia, serif; color: var(--nl-vert); }
.nl-m__coord { font: 600 2.3cqw/1.2 "Inter", system-ui, sans-serif; letter-spacing: .1em; font-variant-numeric: lining-nums; color: var(--nl-rouge); }
.nl [hidden] { display: none !important; }

/* ── Le trajet du traîneau ──
 * Trois ciels : Nuit (bleu nuit et or), Aurore (nuit polaire, aurore verte et violette), Papier (crème, rouge et vert). Les variables
 * sont sur `[data-style]`, pas sur `.nl`, pour que les pastilles du formulaire se colorent avec les mêmes. */
[data-style="Rouge et or"] {
  --nl-fond: radial-gradient(ellipse at 50% 0%, #a3182b 0%, #7c0f20 52%, #55091a 100%);
  --nl-encre: #fff3dc; --nl-doux: #f6d9c4; --nl-accent: #ffd36b; --nl-terre: #e8b9a0; --nl-arc: #ffd36b; --nl-repere: #ffd23f; --nl-etoile: #ffe9a8; --nl-halo: rgba(255, 211, 107, .3);
  --nl-mer: #6f0f1f; --nl-bord: rgba(255, 243, 220, .4); --nl-p0: #f1d9a4; --nl-p1: #bfe0b0; --nl-p2: #f7c2b8; --nl-p3: #d4d6ee; --nl-p-dep: #ffffff; --nl-p-arr: #ffd23f;
  --nl-toit: #2f7d4f; --nl-mur: #fff6e3; --nl-fen: #ffd23f; --nl-pill: rgba(60, 6, 16, .9); --nl-pill-txt: #fff3dc;
  --nl-gui: #86c97a; --nl-gui-bord: #1f5a33; --nl-baie: #fffdf3; --nl-noeud: #ffd23f;
}
[data-style="Forêt"] {
  --nl-fond: radial-gradient(ellipse at 50% 0%, #185a3b 0%, #104029 52%, #0a2d1d 100%);
  --nl-encre: #fff6e6; --nl-doux: #dcebd3; --nl-accent: #f6cf62; --nl-terre: #9fc7a8; --nl-arc: #f6cf62; --nl-repere: #ff8d7a; --nl-etoile: #fff0c2; --nl-halo: rgba(246, 207, 98, .3);
  --nl-mer: #0d3a26; --nl-bord: rgba(255, 246, 230, .35); --nl-p0: #f0d9a2; --nl-p1: #d6e59f; --nl-p2: #f4b9ad; --nl-p3: #bcd2ee; --nl-p-dep: #ffffff; --nl-p-arr: #ff8d7a;
  --nl-toit: #d63a3a; --nl-mur: #fff6e3; --nl-fen: #ffd23f; --nl-pill: rgba(6, 30, 18, .9); --nl-pill-txt: #fff6e6;
  --nl-gui: #9bd88a; --nl-gui-bord: #1d5a33; --nl-baie: #fffdf3; --nl-noeud: #d63a3a;
}
[data-style="Neige"] {
  --nl-fond: linear-gradient(#ffffff, #eaf0ea);
  --nl-encre: #1d3b2a; --nl-doux: #4f6a5a; --nl-accent: #a8142a; --nl-terre: #b9cdbf; --nl-arc: #ffd34d; --nl-repere: #a8142a; --nl-etoile: #d9a441; --nl-halo: rgba(168, 20, 42, .18);
  --nl-mer: #2f6b4e; --nl-bord: rgba(29, 59, 42, .3); --nl-p0: #f0dba8; --nl-p1: #d4e8b5; --nl-p2: #f5bfb4; --nl-p3: #cfdcf2; --nl-p-dep: #ffffff; --nl-p-arr: #ee4b4b;
  --nl-toit: #b3122b; --nl-mur: #fffaf0; --nl-fen: #f0b429; --nl-pill: rgba(255, 255, 255, .96); --nl-pill-txt: #1d3b2a;
  --nl-gui: #5fae5a; --nl-gui-bord: #1f4a2b; --nl-baie: #ffffff; --nl-noeud: #b3122b;
}
[data-style="Nuit"] {
  --nl-fond: radial-gradient(ellipse at 50% 0%, #1b3566 0%, #0e2146 52%, #08142f 100%);
  --nl-encre: #fbf1dc; --nl-doux: #c9d3ea; --nl-accent: #f4c55e; --nl-terre: #7f95bd; --nl-arc: #f4c55e; --nl-repere: #ff7a6b; --nl-etoile: #fff6dc; --nl-halo: rgba(244, 197, 94, .3);
  --nl-mer: #1d4278; --nl-bord: rgba(251, 241, 220, .35); --nl-p0: #f0d7a0; --nl-p1: #b9dcae; --nl-p2: #f0b9b0; --nl-p3: #b4c9f0; --nl-p-dep: #ffffff; --nl-p-arr: #ff8a78; --nl-toit: #d63a3a; --nl-mur: #fff3dc; --nl-fen: #ffc83d; --nl-pill: rgba(8, 20, 47, .88); --nl-pill-txt: #fff6e3;
  --nl-gui: #9fd690; --nl-gui-bord: #2d6a3c; --nl-baie: #fffbea;
}
[data-style="Aurore boréale"] {
  --nl-fond: radial-gradient(ellipse at 18% 2%, rgba(52, 224, 170, .42) 0%, transparent 46%), radial-gradient(ellipse at 88% 0%, rgba(132, 98, 255, .42) 0%, transparent 44%), linear-gradient(#06182c, #08233a 60%, #061528);
  --nl-encre: #f3fbf6; --nl-doux: #d2eee8; --nl-accent: #ffe58a; --nl-terre: #72c6c8; --nl-arc: #ffe58a; --nl-repere: #ff8497; --nl-etoile: #ffffff; --nl-halo: rgba(255, 229, 138, .3);
  --nl-mer: #0f4a63; --nl-bord: rgba(243, 251, 246, .35); --nl-p0: #f2dfa4; --nl-p1: #aee3c0; --nl-p2: #f3b7c0; --nl-p3: #b9c7f5; --nl-p-dep: #ffffff; --nl-p-arr: #ff8aa0; --nl-toit: #d63a52; --nl-mur: #fff6e6; --nl-fen: #ffe071; --nl-pill: rgba(5, 28, 44, .88); --nl-pill-txt: #f3fbf6;
  --nl-gui: #a6e2a0; --nl-gui-bord: #1f6a4a; --nl-baie: #ffffff;
}
[data-style="Papier"] {
  --nl-fond: linear-gradient(#fbf1e1, #f4e4cd);
  --nl-encre: #2a1a14; --nl-doux: #6b4a3a; --nl-accent: #a01428; --nl-terre: #cdb99a; --nl-arc: #b3122b; --nl-repere: #1f3d2b; --nl-etoile: #d9a441; --nl-halo: rgba(179, 18, 43, .2);
  --nl-mer: #b5d6e6; --nl-bord: rgba(42, 26, 20, .3); --nl-p0: #e3bf72; --nl-p1: #a4cd88; --nl-p2: #eba090; --nl-p3: #9db4e0; --nl-p-dep: #ffffff; --nl-p-arr: #ee7a5f; --nl-toit: #b3122b; --nl-mur: #fffaf0; --nl-fen: #f0b429; --nl-pill: rgba(255, 250, 240, .95); --nl-pill-txt: #2a1a14;
  --nl-gui: #5da457; --nl-gui-bord: #1f3d2b; --nl-baie: #ffffff;
}
.nl[data-variante="traineau"] { background: var(--nl-fond); color: var(--nl-encre); }
.nl-t__fond { position: absolute; inset: 0; z-index: -1; }
.nl-t__ciel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nl-t__etoile { fill: var(--nl-etoile); opacity: .65; }
.nl-t__etoile--g { opacity: .95; }
.nl-t__contenu { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 6.4cqw 6cqw 5.6cqw; gap: 1.6cqw; text-align: center; }
.nl-t__contenu > * { margin: 0; max-width: 100%; }
.nl-t__tete { display: flex; flex-direction: column; align-items: center; gap: .6cqw; width: 100%; }
.nl-t__tete > * { margin: 0; }
.nl-t__kicker { font: 600 2.3cqw/1.2 "Inter", system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--nl-accent); }
.nl-t__kicker b { font-weight: 600; font-variant-numeric: lining-nums; }
.nl-t__titre { font: 400 6.8cqw/1.05 "Damion", cursive; color: var(--nl-encre); }
.nl-t__pour { width: 100%; font: 400 11.4cqw/1.08 "Damion", cursive; color: var(--nl-accent); white-space: nowrap; }
.nl-t__adresse { width: 90%; font: 500 2.7cqw/1.25 "Inter", system-ui, sans-serif; letter-spacing: .04em; color: var(--nl-doux); white-space: nowrap; }

.nl-t__zone { flex: 1; min-height: 0; width: 100%; container-type: size; display: grid; place-items: center; }
/* Le monde est un bandeau large : il garde sa hauteur, et l'air restant se répartit entre les blocs plutôt que de s'empiler au-dessus et au-dessous. */
.nl[data-vue="monde"] .nl-t__zone { flex: 1 1 auto; container-type: normal; display: flex; align-items: center; }
.nl[data-vue="monde"] .nl-t__plan { width: 100%; }
.nl-t__plan { position: relative; width: min(100cqw, calc(100cqh * var(--nl-ratio, 1.4))); aspect-ratio: var(--nl-ratio, 1.4); }
.nl-t__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* Les pays pleins : quatre teintes qui se répartissent (jamais deux voisins du même ton par construction du tracé, les frontières
   les séparent de toute façon), le pays du Père Noël en blanc neige et celui de la maison en couleur vive. */
.nl-t__mer { fill: var(--nl-mer); stroke: var(--nl-bord); stroke-width: .12; }
.nl-t__pays-g { stroke: var(--nl-mer); }
.nl-t__pays--0 { fill: var(--nl-p0); } .nl-t__pays--1 { fill: var(--nl-p1); } .nl-t__pays--2 { fill: var(--nl-p2); } .nl-t__pays--3 { fill: var(--nl-p3); }
.nl-t__pays--depart { fill: var(--nl-p-dep); } .nl-t__pays--arrivee { fill: var(--nl-p-arr); }
.nl-t__arc-fond { fill: none; stroke: var(--nl-mer); stroke-linecap: round; opacity: .55; }
.nl-t__maison .nl-t__halo { fill: var(--nl-halo); }
.nl-t__m-corps { fill: var(--nl-mur); stroke: var(--nl-mer); stroke-width: .18; stroke-linejoin: round; }
.nl-t__m-toit { fill: var(--nl-toit); stroke: var(--nl-mer); stroke-width: .18; stroke-linejoin: round; }
.nl-t__m-fenetre { fill: var(--nl-fen); }
.nl-t__m-orne { fill: var(--nl-fen); stroke: var(--nl-mer); stroke-width: .12; stroke-linejoin: round; }
.nl-t__maison--arrivee .nl-t__m-orne { fill: var(--nl-toit); }
/* Le gui : des feuilles et des baies aux couleurs de la palette, un nœud rouge (le toit des maisons). */
.nl-t__gui-t { stroke: var(--nl-gui-bord); }
.nl-t__gui-f { fill: var(--nl-gui); stroke: var(--nl-gui-bord); }
.nl-t__gui-b { fill: var(--nl-baie); stroke: var(--nl-gui-bord); }
.nl-t__gui-n { fill: var(--nl-noeud, var(--nl-toit)); stroke: var(--nl-gui-bord); }
.nl-t__terre { fill: none; stroke: var(--nl-terre); stroke-linecap: round; opacity: .85; }
.nl-t__arc { fill: none; stroke: var(--nl-arc); stroke-linecap: round; }
.nl-t__depart circle { fill: var(--nl-halo); stroke: var(--nl-arc); }
.nl-t__depart path { fill: var(--nl-arc); }
.nl-t__halo { fill: var(--nl-halo); }
.nl-t__anneau { fill: none; stroke: var(--nl-repere); }
.nl-t__cible { fill: var(--nl-repere); }
.nl-t__traineau {
  position: absolute; display: block; height: auto; transform: translate(-50%, -50%) rotate(var(--nl-angle, 0deg)) scaleX(var(--nl-miroir, 1));
  filter: none; user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.nl-t__nom {
  position: absolute; transform: translate(-50%, 0); padding: .5cqw 1.8cqw .6cqw; border-radius: 99cqw; display: flex; flex-direction: column; align-items: center;
  font: 800 2.9cqw/1.15 "Inter", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: var(--nl-pill-txt, var(--nl-encre)); background: var(--nl-pill, transparent); white-space: nowrap; pointer-events: none;
}
.nl-t__nom small { font: 600 1.9cqw/1.15 "Inter", system-ui, sans-serif; letter-spacing: .08em; opacity: .85; }
.nl-t__nom--depart { transform: translate(-50%, calc(-100% - 2.2cqw)); }
.nl-t__nom--arrivee { transform: translate(-50%, 2.4cqw); }
.nl-t__nom--arrivee.nl-t__nom--haut { transform: translate(-50%, calc(-100% - 2.4cqw)); }

.nl-t__chiffres { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; padding-top: 1.8cqw; border-top: .25cqw solid var(--nl-doux); }
.nl-t__c { display: flex; flex-direction: column; align-items: center; gap: .5cqw; min-width: 0; }
.nl-t__c strong { font: 800 5.6cqw/1 "Inter", system-ui, sans-serif; font-variant-numeric: lining-nums; letter-spacing: -.01em; color: var(--nl-accent); white-space: nowrap; }
.nl-t__c small { font: 500 1.9cqw/1.3 "Inter", system-ui, sans-serif; letter-spacing: .04em; color: var(--nl-doux); text-wrap: balance; }
.nl-t__message { width: 86%; font: 400 4cqw/1.15 "Damion", cursive; color: var(--nl-encre); text-wrap: balance; }
.nl-t__message[hidden] { display: none; }
.nl-t__depart-ligne { font: 500 1.8cqw/1.3 "Inter", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--nl-doux); }

/* ── Le formulaire ── */
.nl-styles { display: flex; flex-wrap: wrap; gap: .8rem; }
.nl-styles input { position: absolute; opacity: 0; pointer-events: none; }
.nl-styles label { display: inline-flex; align-items: center; gap: .6rem; min-height: 4.4rem; padding: 0 1.2rem; border: 1px solid rgb(var(--encre-rgb, 28, 23, 19), .25); cursor: pointer; }
.nl-styles input:checked + label { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.nl-styles input:focus-visible + label { outline: 2px solid var(--bleu-focus, #2f6fed); outline-offset: 2px; }
.nl-pastille { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--nl-fond); box-shadow: inset 0 0 0 2px var(--nl-accent); }
.nl-adresse__recherche { display: flex; gap: .8rem; }
.nl-adresse__recherche input { flex: 1; min-width: 0; }
.nl-chercher { min-height: 4.4rem; flex: none; }
.nl-etat { min-height: 1.4em; margin: .4rem 0 0; font-size: 1.4rem; }
.nl-etat[data-erreur] { color: var(--rouge-erreur, #a3152b); }
.nl-titres { margin: -.4rem 0 1.6rem; }
.nl-titres__legende { margin: 0 0 .6rem; font-size: 1.4rem; }
.nl-idees { display: flex; flex-wrap: wrap; gap: .6rem; }
.nl-idee { min-height: 4.4rem; padding: .4rem 1.2rem; border: 1px solid rgb(28, 23, 19, .3); background: transparent; font: inherit; font-size: 1.4rem; cursor: pointer; }
.nl-idee:hover { background: rgb(28, 23, 19, .06); }
@media (prefers-reduced-motion: reduce) { .nl * { transition: none !important; animation: none !important; } }