/* Les Folies de Nath — cadre de Noël « guirlande » (avec /js/noel-cadre.js ; chargés par app.js pendant la période seulement,
   jamais sur l’admin). Une guirlande de sapin cousue sur un ruban de velours rouge baie, tout autour de l’écran, avec ses petites
   ampoules ; la neige qui tombe ; le bouton ❄ en bas à gauche. Préfixe propre lfn-nlg / nlg- / --nlg- (jamais celui de noel.js,
   lfn-nl-). Ne prend AUCUN clic, sauf le bouton ❄ ; seuls transform / opacity s’animent (la pose, une fois par session, puis le
   scintillement des ampoules, sur ordinateur, quelques couches à la fois, que le bouton ❄ arrête avec la neige).
   Plans : contenu, en-tête 900 < GUIRLANDE 920 < NEIGE 925 < BOUTON ❄ et bouton musique 930 < paillettes 940 < menu mobile 950
   < tiroir 980/990 < cookies 1050 < toasts 1100 < modales 1150 < lightbox 1200 < curseur 1300 < film 9000. */

/* ---------- la page s’écarte de la guirlande en haut (bandeau d’annonce entier, jamais recoloré) et en bas (dernière ligne du
   pied de page). Ces règles arrivent AVEC la feuille (avant le script) : la guirlande se pose sans faire bouger la page ; elles
   partent avec elle quand app.js la retire, après le fondu de la guirlande. ---------- */
/* épaisseur plafonnée à 18 px sur ordinateur : sur une page ouverte sans le voile de transition (fiche produit, panier…), la feuille
   arrive avec /api/boot, parfois juste après l’affichage — le décalage reste petit */
html { --nlg-g: clamp(12px, calc(1.1vw + 6px), 18px); scroll-padding-top: var(--nlg-g); }
/* un élément focalisé au clavier ne finit jamais sous le bouton ❄ (accueil avec musique : la règle de noel.css, plus précise, gagne) */
html { scroll-padding-bottom: calc(var(--nlg-g) + 40px); }
body { padding-top: var(--nlg-g); padding-bottom: var(--nlg-g); }
/* accueil : le hero garde « plein écran sous l’en-tête », entre les deux guirlandes */
.hs-hero:not(.is-film) { min-height: calc(100svh - var(--header-h, 76px) - 38px - 2 * var(--nlg-g)); }
/* accueil, portables de 761 à 800 px de haut (1366×768, 1280×800…) : les deux guirlandes prennent 2 × --nlg-g, on prolonge donc la
   règle « écran bas » de home-studio.css (≤ 760 px, copie exacte) pour que la note et le lanceur du film restent dans l’écran */
@media (min-width: 900px) and (min-height: 761px) and (max-height: 800px) {
  .hs-hero-title { font-size: min(clamp(2.6rem, 1.4rem + 5.6vw, 6rem), 10.5svh); }
  .hs-hero-copy { gap: 14px; }
  .hs-hero { padding-top: clamp(28px, 4svh, 48px); }
}
/* boutique : la barre collante s’accroche sous la guirlande ; sa sentinelle est décalée d’autant (décalage relatif : aucun effet sur
   la mise en page) pour que boutique.js la déclare accrochée pile au contact de la guirlande */
.bq-bar { top: calc(var(--bq-bar-top, 0px) + var(--nlg-g)); }
.bq-bar-sentinel { position: relative; top: calc(-1 * var(--nlg-g)); }
/* pack : la barre collée en bas garde ses boutons au-dessus de la guirlande du bas, et à distance de celles des côtés (contenu
   centré à 1 080 px : rien ne bouge sur grand écran) ; le bouton ❄ monte au-dessus d’elle (--nlg-lift, mesuré par le script) */
.pack-stickybar { padding: 0 var(--nlg-g) var(--nlg-g); }
/* accueil, téléphones bas (≤ 700 px de haut, où le hero dépasse l’écran) : le hero rend la place prise par les deux guirlandes
   (2 × --nlg-g : 1,5 en haut, 0,5 entre le texte et le lanceur du film) pour que la ligne « 39 s · voix off et sous-titres »
   reste au-dessus de la guirlande du bas ; l’étiquette « Atelier artisanal… » (penchée) passe alors à 2 ou 3 px sous l’en-tête
   par son coin relevé (17 ou 18 px sans cette règle). Téléphones plus hauts : rien ne change (contenu centré, ou déjà dans
   l’écran). */
@media (max-width: 640px) and (max-height: 700px) {
  .hs-hero:not(.is-film) { padding-top: calc(28px - 1.5 * var(--nlg-g)); }
  .hs-hero:not(.is-film) .hs-hero-inner { row-gap: calc(24px - .5 * var(--nlg-g)); }
}

.lfn-nlg {
  position: fixed; z-index: 920; pointer-events: none;
  top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px);
  container-type: size; contain: strict;
  --nlg-thread: #fbe8cc;                                     /* fil crème du point avant */
  --nlg-gh: calc(var(--nlg-g) * 1.28);                       /* hauteur de la guirlande : la marge réservée + les pointes des
                                                                aiguilles, qui débordent un peu sur la page (aucun liseré vide) */
  --nlg-rh: calc(var(--nlg-g) * .27);                        /* hauteur du ruban de velours, côté écran */
  --nlg-lk: 12;                                              /* largeur d’un motif de 8 ampoules, en épaisseurs de guirlande */
  --nlg-bw: calc(var(--nlg-g) * 2.5);                        /* nœuds des coins du haut */
  --nlg-hs: calc(var(--nlg-g) * 1.9);                        /* houx des coins du bas */
  --nlg-gw: clamp(16px, calc(max(4vw, 50vw - 590px) - var(--nlg-g) - 4px), 44px);   /* lueur : reste dans la marge du site */
  transition: opacity .4s ease;
}
.lfn-nlg, .lfn-nlg * { pointer-events: none !important; -webkit-user-select: none; user-select: none; }
.lfn-nlg i, .lfn-nlg b { display: block; font-style: normal; }
.lfn-nlg.is-out { opacity: 0; }

/* ---------- un côté = la même guirlande, tournée ; son « haut » est le bord de l’écran (le ruban), son « bas » côté page ---------- */
.lfn-nlg-band {
  position: absolute; left: 0; top: 0; height: var(--nlg-g); transform-origin: 0 0;
  /* motifs du côté (ordinateur ; le téléphone a les siens, plus bas) */
  --nlg-up: var(--nlg-pine); --nlg-uh: var(--nlg-holly);
  --nlg-u0: var(--nlg-l0); --nlg-u1: var(--nlg-l1); --nlg-u2: var(--nlg-l2); --nlg-u3: var(--nlg-l3); --nlg-u4: var(--nlg-l4);
}
.lfn-nlg-band.is-t { width: 100%; }
.lfn-nlg-band.is-r { left: 100%; width: 100vh; width: 100cqh; transform: rotate(90deg); }
.lfn-nlg-band.is-b { left: 100%; top: 100%; width: 100%; transform: rotate(180deg); }
.lfn-nlg-band.is-l { top: 100%; width: 100vh; width: 100cqh; transform: rotate(-90deg); }
/* ombre douce de la guirlande sur la page (sous les pointes des aiguilles), coupée en onglet elle aussi */
.lfn-nlg-band::before {
  content: ""; position: absolute; left: calc(var(--nlg-g) * .9); right: calc(var(--nlg-g) * .9); top: calc(var(--nlg-g) * .9); height: calc(var(--nlg-g) * .32 + 6px);
  background: linear-gradient(rgba(16, 34, 22, .34), rgba(16, 34, 22, .12) 48%, rgba(16, 34, 22, 0));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--nlg-g) * .32 - 6px) 100%, calc(var(--nlg-g) * .32 + 6px) 100%);
}
.lfn-nlg-win { position: absolute; left: 0; top: 0; width: 100%; height: var(--nlg-gh); overflow: hidden; }
.lfn-nlg-in { position: absolute; inset: 0; }
.lfn-nlg-rib {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--nlg-gh);
  /* coins en onglet : chaque côté est un trapèze à 45°, les quatre se rejoignent en diagonale */
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--nlg-gh)) 100%, var(--nlg-gh) 100%);
  --nlg-us: var(--nlg-snow, none);
  background-image:
    /* neige posée (côté du haut seulement) */
    var(--nlg-us),
    /* houx en feutrine et baies rouges */
    var(--nlg-uh, none),
    /* les aiguilles, du fond sombre aux pointes claires ; côté page, leurs pointes dentellent le bord sur fond transparent */
    var(--nlg-up, none),
    /* le point avant crème qui coud la guirlande sur son ruban, et l’ombre du fil */
    linear-gradient(90deg, var(--nlg-thread) 0 56%, transparent 56%),
    linear-gradient(90deg, rgba(58, 6, 16, .55) 0 56%, transparent 56%),
    /* reflet du velours */
    linear-gradient(to bottom, transparent 30%, rgba(255, 170, 170, .2) 48%, transparent 66%),
    /* le ruban de velours rouge baie, côté écran */
    linear-gradient(to bottom, #5a0f1e, #8b2132 34%, #a32b3c 60%, #7a1a2b 90%, #5a0f1d),
    /* le cœur sombre de la guirlande (opaque, toute la marge réservée : rien de la page ne passe dessous) */
    linear-gradient(to bottom, #0f281b, #163a28 46%, #183f2b 76%, #12301f);
  background-size:
    auto 100%, auto 100%, auto 100%,
    6.6px 1.3px, 6.6px 1.3px,
    100% var(--nlg-rh), 100% var(--nlg-rh),
    100% var(--nlg-g);
  background-position:
    0 0, 0 0, 0 0,
    0 calc(var(--nlg-rh) * .48 - .65px), .6px calc(var(--nlg-rh) * .48 + .35px),
    0 0, 0 0,
    0 0;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
}

/* ---------- les ampoules : en retrait des coins (jamais coupées par l’onglet), motif ajusté au nombre entier (round) ---------- */
.lfn-nlg-lights { position: absolute; top: 0; height: var(--nlg-gh); left: var(--nlg-g); right: var(--nlg-g); }
.lfn-nlg-lit { position: absolute; inset: 0; }
.lfn-nlg-li { position: absolute; inset: 0; background-position: 0 0; background-size: calc(var(--nlg-gh) * var(--nlg-lk)) 100%; background-repeat: round no-repeat; }
.lfn-nlg-li.is-0 { background-image: var(--nlg-u0); }
.lfn-nlg-li.is-1 { background-image: var(--nlg-u1); }
.lfn-nlg-li.is-2 { background-image: var(--nlg-u2); }
.lfn-nlg-li.is-3 { background-image: var(--nlg-u3); }
.lfn-nlg-li.is-4 { background-image: var(--nlg-u4); }
/* scintillement doux, à tour de rôle (ordinateur) : le script pose is-tw sur une couche d’un côté, elle pâlit puis se rallume UNE
   fois (4 rythmes) et le script la retire ; 4 à 5 couches à la fois sur 16 — le navigateur n’a que celles-là à recalculer */
.lfn-nlg-lit .lfn-nlg-li.is-tw { animation: nlgTwinkle 3.3s ease-in-out; }
.lfn-nlg-lit .lfn-nlg-li.is-2.is-tw { animation-duration: 4.1s; }
.lfn-nlg-lit .lfn-nlg-li.is-3.is-tw { animation-duration: 2.9s; }
.lfn-nlg-lit .lfn-nlg-li.is-4.is-tw { animation-duration: 4.7s; }
@keyframes nlgTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
/* bouton ❄ (et téléphone, plus bas) : ampoules allumées, immobiles */
.lfn-nlg.is-calm .lfn-nlg-lit .lfn-nlg-li { animation: none; opacity: 1; }

/* ---------- lueur dorée douce vers l’intérieur (ordinateur seulement) : statique, côtés et bas, jamais en haut ---------- */
.lfn-nlg-glow { position: absolute; inset: 0; display: none; opacity: 0; }
.lfn-nlg-gl { position: absolute; }
.lfn-nlg-gl.is-l, .lfn-nlg-gl.is-r { top: 0; bottom: var(--nlg-g); width: var(--nlg-gw); }
.lfn-nlg-gl.is-l { left: var(--nlg-g); background: linear-gradient(to right, rgba(255, 186, 96, .13), rgba(255, 186, 96, .045) 42%, rgba(255, 186, 96, 0)); }
.lfn-nlg-gl.is-r { right: var(--nlg-g); background: linear-gradient(to left, rgba(255, 186, 96, .13), rgba(255, 186, 96, .045) 42%, rgba(255, 186, 96, 0)); }
.lfn-nlg-gl.is-b { left: var(--nlg-g); right: var(--nlg-g); bottom: var(--nlg-g); height: calc(var(--nlg-gw) * .7);
  background: linear-gradient(to top, rgba(255, 186, 96, .11), rgba(255, 186, 96, .035) 42%, rgba(255, 186, 96, 0)); }
/* bandeau du haut à l’écran (annonce…) : la lueur des côtés s’efface sur sa hauteur (--nlg-bar, mesurée par le script) */
.lfn-nlg.is-top-bar .lfn-nlg-gl.is-l, .lfn-nlg.is-top-bar .lfn-nlg-gl.is-r {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--nlg-bar, 0px), #000 calc(var(--nlg-bar, 0px) + 28px));
  mask-image: linear-gradient(to bottom, transparent var(--nlg-bar, 0px), #000 calc(var(--nlg-bar, 0px) + 28px));
}

/* ---------- les coins : nœud de velours en haut, brin de houx en bas (posés sur la jonction en onglet) ---------- */
/* le nœud (viewBox 46 × 36, nœud central à 50 % / 41,7 %) : ses boucles restent entières dans l’écran */
.lfn-nlg-bow { position: absolute; top: max(0px, calc(var(--nlg-g) * .62 - var(--nlg-bw) * .326)); width: var(--nlg-bw); height: calc(var(--nlg-bw) * .783);
  filter: drop-shadow(0 1.5px 1.4px rgba(40, 8, 16, .42)); }
.lfn-nlg-bow.is-tl { left: max(0px, calc(var(--nlg-g) * .62 - var(--nlg-bw) * .5)); transform: rotate(-7deg); }
.lfn-nlg-bow.is-tr { right: max(0px, calc(var(--nlg-g) * .62 - var(--nlg-bw) * .5)); transform: rotate(8deg) scaleX(-1); }
.lfn-nlg-holly { position: absolute; bottom: calc(var(--nlg-g) * .55 - var(--nlg-hs) * .5); width: var(--nlg-hs); height: var(--nlg-hs);
  filter: drop-shadow(0 1px 1.2px rgba(10, 30, 16, .45)); }
.lfn-nlg-holly.is-bl { left: calc(var(--nlg-g) * .55 - var(--nlg-hs) * .5); transform: rotate(-90deg); }
.lfn-nlg-holly.is-br { right: calc(var(--nlg-g) * .55 - var(--nlg-hs) * .5); transform: rotate(180deg); }
.lfn-nlg-bow svg, .lfn-nlg-holly svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- la pose (une fois par session) : une fenêtre glisse le long de la guirlande, la guirlande reste en place ---------- */
.lfn-nlg:not(.is-static) .lfn-nlg-win, .lfn-nlg:not(.is-static) .lfn-nlg-in { will-change: transform; }
.lfn-nlg-win { transform: translate3d(-100%, 0, 0); }
.lfn-nlg-in { transform: translate3d(100%, 0, 0); }
.lfn-nlg-band::before, .lfn-nlg-lit, .lfn-nlg-glow { opacity: 0; }
.lfn-nlg-bow, .lfn-nlg-holly { opacity: 0; scale: .3; }
.lfn-nlg.is-in .lfn-nlg-win, .lfn-nlg.is-in .lfn-nlg-in { transform: none; transition: transform var(--nlg-d, .5s) linear var(--nlg-delay, 0s); }
.lfn-nlg.is-in .lfn-nlg-band.is-t .lfn-nlg-win, .lfn-nlg.is-in .lfn-nlg-band.is-t .lfn-nlg-in { transition-timing-function: cubic-bezier(.5, 0, .8, .8); }
.lfn-nlg.is-in .lfn-nlg-band.is-l .lfn-nlg-win, .lfn-nlg.is-in .lfn-nlg-band.is-l .lfn-nlg-in { transition-timing-function: cubic-bezier(.2, .2, .35, 1); }
.lfn-nlg.is-in .lfn-nlg-band::before { opacity: 1; transition: opacity .5s ease calc(var(--nlg-delay, 0s) + var(--nlg-d, .5s) * .5); }
.lfn-nlg.is-in .lfn-nlg-bow, .lfn-nlg.is-in .lfn-nlg-holly { opacity: 1; scale: 1; transition: opacity .2s ease var(--nlg-delay, 0s), scale .6s cubic-bezier(.34, 1.7, .64, 1) var(--nlg-delay, 0s); }
/* les ampoules s’allument à la fin du tour, toutes ensemble, puis chacune prend son rythme */
.lfn-nlg.is-in .lfn-nlg-lit { opacity: 1; transition: opacity .9s ease var(--nlg-gdelay, 0s); }
.lfn-nlg.is-in .lfn-nlg-glow { opacity: 1; transition: opacity 1.2s ease var(--nlg-gdelay, 0s); }
.lfn-nlg.is-static .lfn-nlg-win, .lfn-nlg.is-static .lfn-nlg-in, .lfn-nlg.is-static .lfn-nlg-band::before, .lfn-nlg.is-static .lfn-nlg-lit,
.lfn-nlg.is-static .lfn-nlg-bow, .lfn-nlg.is-static .lfn-nlg-holly, .lfn-nlg.is-static .lfn-nlg-glow { transition: none; }

/* ---------- ordinateur (≥ 1100 px) : lueur intérieure ---------- */
@media (min-width: 1100px) and (min-height: 501px) {
  .lfn-nlg-glow { display: block; }
}

/* ==========================================================================
   LA NEIGE QUI TOMBE (canvas plein écran, au-dessus du contenu, sous le bouton musique, les menus, tiroirs, cookies, modales)
   ========================================================================== */
.lfn-nlg-snow {
  position: fixed; left: 0; top: 0; z-index: 925; display: block; width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none !important; contain: strict; opacity: 0; transition: opacity .9s ease;
}
.lfn-nlg-snow.is-on { opacity: 1; }
.lfn-nlg-snow.is-out { opacity: 0; transition-duration: .45s; }

/* ==========================================================================
   LE BOUTON ❄ (bas à gauche, sur le coin de la guirlande) : arrête et remet la neige ET le scintillement (WCAG 2.2.2). Il monte
   au-dessus de la barre du pack (--nlg-lift) et du bandeau cookies quand il occupe ce coin (--nlg-clift) : la plus haute des deux,
   mesurées par le script ; toujours joignable pendant qu’on répond au bandeau (effacé seulement s’il tomberait sur un lien ou un
   bouton de la page, is-away plus bas).
   ========================================================================== */
.lfn-nlg-btn {
  --nlg-bsz: 36px; --nlg-bc: max(var(--nlg-g), calc(var(--nlg-bsz) / 2 + 3px));   /* taille, centre (depuis le coin de l’écran) */
  position: fixed; z-index: 930; box-sizing: border-box;
  left: calc(env(safe-area-inset-left, 0px) + var(--nlg-bc) - var(--nlg-bsz) / 2);
  bottom: calc(env(safe-area-inset-bottom, 0px) + max(var(--nlg-lift, 0px), var(--nlg-clift, 0px)) + var(--nlg-bc) - var(--nlg-bsz) / 2);
  width: var(--nlg-bsz); height: var(--nlg-bsz); margin: 0; padding: 0; border: 0; border-radius: 50%;
  display: block; font: inherit; color: #5b3f7a; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: scale(.55) rotate(-24deg);
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.34, 1.56, .64, 1), bottom .45s cubic-bezier(.16, 1, .3, 1);
}
.lfn-nlg-btn[hidden] { display: none !important; }
.lfn-nlg-btn.is-in { opacity: 1; transform: none; }
.lfn-nlg-btn.is-out { opacity: 0 !important; transition-duration: .4s; }
.lfn-nlg-btn-disc {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(91, 63, 122, .2), 0 2px 4px rgba(42, 33, 56, .16), 0 10px 20px -8px rgba(42, 33, 56, .55);
}
.lfn-nlg-btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lfn-nlg-btn .nlg-flake { transform-origin: 0 0; transition: transform .8s cubic-bezier(.34, 1.4, .64, 1), opacity .3s; }
.lfn-nlg-btn .nlg-dots { transition: opacity .3s; }
@media (hover: hover) { .lfn-nlg-btn:hover .nlg-flake { transform: rotate(30deg); } }
.lfn-nlg-btn:active .lfn-nlg-btn-disc { transform: scale(.94); }
/* neige arrêtée : le flocon pâlit, plus de flocons autour */
.lfn-nlg-btn.is-off { color: #9d8fb0; }
.lfn-nlg-btn.is-off .nlg-dots { opacity: 0; }
.lfn-nlg-btn:focus:not(:focus-visible) { outline: none; }
.lfn-nlg-btn:focus-visible { outline: 3px solid #5b3f7a; outline-offset: 0; }   /* collé au disque : le coin de l’écran ne le coupe pas */
/* étiquette, comme celle du grelot : le nom accessible (même texte, WCAG 2.5.3) puis l’état (« en marche » doré / « à l’arrêt ») ;
   au survol et au focus clavier ; survolable (elle fait partie du bouton, la marge de 8 px aussi) et refermée par Échap
   (WCAG 1.4.13). is-up : posée au-dessus du bouton (+ --nlg-tup), quand l’invitation du grelot occupe sa place à droite. */
.lfn-nlg-tip {
  position: absolute; left: 100%; top: 50%; padding-left: 8px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate3d(-6px, -50%, 0); transition: opacity .25s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.lfn-nlg-tip b {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 13px; border-radius: 999px; background: #2a2138; color: #fff;
  font: 700 13px/1 var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif); letter-spacing: -.01em;
  box-shadow: 0 0 0 1px rgba(255, 244, 226, .3), 0 12px 26px -12px rgba(26, 18, 38, .7);
}
.lfn-nlg-tip-t { padding-top: 1px; }
.lfn-nlg-tip-s {
  font: 700 10px/1 var(--font-body, system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
  color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .13); transition: background-color .3s, color .3s;
}
.lfn-nlg-btn:not(.is-off) .lfn-nlg-tip-s { color: #2a2138; background: #f3d27e; }
@media (hover: hover) { .lfn-nlg-btn:hover .lfn-nlg-tip { opacity: 1; transform: translate3d(0, -50%, 0); pointer-events: auto; } }
.lfn-nlg-btn:focus-visible .lfn-nlg-tip { opacity: 1; transform: translate3d(0, -50%, 0); }
.lfn-nlg-btn.is-up .lfn-nlg-tip { left: 0; top: auto; bottom: calc(100% + var(--nlg-tup, 0px)); padding: 0 0 8px; transform: translate3d(0, 6px, 0); }
@media (hover: hover) { .lfn-nlg-btn.is-up:hover .lfn-nlg-tip { transform: none; } }
.lfn-nlg-btn.is-up:focus-visible .lfn-nlg-tip { transform: none; }
.lfn-nlg-btn.no-tip .lfn-nlg-tip, .lfn-nlg-btn.no-room .lfn-nlg-tip { opacity: 0 !important; pointer-events: none !important; }
/* la pastille du film de l’accueil, ou un lien / un bouton de la page sous le bouton monté au-dessus du bandeau cookies (téléphones
   bas) → il s’efface et leur laisse ses touchers, le temps qu’on défile ou qu’on réponde au bandeau. Opacité seulement (jamais
   visibility) : il reste dans l’ordre de tabulation et lu par les lecteurs d’écran ; au focus, le script le fait revenir. */
.lfn-nlg-btn.is-away { opacity: 0 !important; pointer-events: none; transition: opacity .3s ease; }

/* ---------- téléphone (debout ou couché) : une guirlande fine, aiguilles moins nombreuses et plus épaisses, baies sans feuilles,
   ampoules un peu plus grosses et plus espacées, nœuds et houx en miniature ---------- */
@media (max-width: 640px), (max-height: 500px) {
  html { --nlg-g: clamp(8px, 2.67vw, 10px); }   /* 10 px à 375 : le texte commence à 15 px du bord */
  .lfn-nlg { --nlg-lk: 13.6; --nlg-bw: calc(var(--nlg-g) * 2.6); --nlg-hs: calc(var(--nlg-g) * 2); --nlg-rh: calc(var(--nlg-g) * .3); }
  .lfn-nlg-band { --nlg-up: var(--nlg-pine-s); --nlg-uh: var(--nlg-holly-s);
    --nlg-u0: var(--nlg-l0s); --nlg-u1: var(--nlg-l1s); --nlg-u2: var(--nlg-l2s); --nlg-u3: var(--nlg-l3s); --nlg-u4: var(--nlg-l4s); }
  .lfn-nlg-rib { --nlg-us: var(--nlg-snow-s, none);
    background-size: auto 100%, auto 100%, auto 100%, 4.4px 1px, 4.4px 1px, 100% var(--nlg-rh), 100% var(--nlg-rh), 100% var(--nlg-g); }
  .lfn-nlg-band::before { height: calc(var(--nlg-g) * .32 + 3px); clip-path: polygon(0 0, 100% 0, calc(100% - var(--nlg-g) * .32 - 3px) 100%, calc(var(--nlg-g) * .32 + 3px) 100%); }
  .lfn-nlg-btn { --nlg-bsz: 34px; }
}
/* téléphone et écran tactile : ampoules allumées, fixes (le script ne lance aucun tour de scintillement ; la neige y est à ≈ 30 im/s) */
@media (pointer: coarse), (max-width: 640px) {
  .lfn-nlg-lit .lfn-nlg-li { animation: none !important; opacity: 1; }
}
/* très petits téléphones (< 360 px) : si la page déborde en largeur (débordement du site, pas du cadre), la zone des éléments
   fixes s’agrandit au-delà de l’écran et la guirlande de droite / du bas en sortirait ; elle suit donc l’écran réel, le bouton ❄
   aussi. Sans débordement, 100vw × 100dvh = la même zone : aucun effet. */
@media (max-width: 359.98px) and (pointer: coarse) {
  .lfn-nlg { right: auto; bottom: auto; width: 100vw; height: 100vh; height: 100dvh; }
  .lfn-nlg-btn { bottom: auto; top: calc(100vh - env(safe-area-inset-bottom, 0px) - max(var(--nlg-lift, 0px), var(--nlg-clift, 0px)) - var(--nlg-bc) - var(--nlg-bsz) / 2);
    top: calc(100dvh - env(safe-area-inset-bottom, 0px) - max(var(--nlg-lift, 0px), var(--nlg-clift, 0px)) - var(--nlg-bc) - var(--nlg-bsz) / 2); }
}

/* ---------- mouvement réduit (préférence système ou classe html.lfn-rm du site) : la guirlande est là, immobile, ampoules
   allumées sans scintiller (le script ne fait pas tomber la neige : quelques flocons immobiles) ---------- */
@media (prefers-reduced-motion: reduce) {
  .lfn-nlg, .lfn-nlg-snow, .lfn-nlg-btn, .lfn-nlg-btn .nlg-flake, .lfn-nlg-tip { transition: none !important; }
  .lfn-nlg .lfn-nlg-win, .lfn-nlg .lfn-nlg-in { transform: none !important; transition: none !important; }
  .lfn-nlg .lfn-nlg-lit .lfn-nlg-li { animation: none !important; opacity: 1; }
  .lfn-nlg .lfn-nlg-band::before, .lfn-nlg .lfn-nlg-lit, .lfn-nlg .lfn-nlg-bow, .lfn-nlg .lfn-nlg-holly, .lfn-nlg .lfn-nlg-glow { opacity: 1 !important; scale: 1 !important; transition: none !important; }
  .lfn-nlg-btn .nlg-flake { transform: none !important; }
}
html.lfn-rm .lfn-nlg, html.lfn-rm .lfn-nlg-snow, html.lfn-rm .lfn-nlg-btn, html.lfn-rm .lfn-nlg-btn .nlg-flake, html.lfn-rm .lfn-nlg-tip { transition: none !important; }
html.lfn-rm .lfn-nlg .lfn-nlg-win, html.lfn-rm .lfn-nlg .lfn-nlg-in { transform: none !important; transition: none !important; }
html.lfn-rm .lfn-nlg .lfn-nlg-lit .lfn-nlg-li { animation: none !important; opacity: 1; }
html.lfn-rm .lfn-nlg .lfn-nlg-band::before, html.lfn-rm .lfn-nlg .lfn-nlg-lit, html.lfn-rm .lfn-nlg .lfn-nlg-bow, html.lfn-rm .lfn-nlg .lfn-nlg-holly,
html.lfn-rm .lfn-nlg .lfn-nlg-glow { opacity: 1 !important; scale: 1 !important; transition: none !important; }
html.lfn-rm .lfn-nlg-btn .nlg-flake { transform: none !important; }

/* ---------- impression et contraste forcé : ni guirlande, ni neige, ni bouton, ni marge ---------- */
@media print, (forced-colors: active) {
  html { --nlg-g: 0px; }
  .lfn-nlg, .lfn-nlg-snow, .lfn-nlg-btn { display: none !important; }
}