/* =====================================================================
   NOM DE LÉGENDE — « La Cérémonie du Nom » (18/10/2026). Module : /js/nom-legende.js.
   Style repris de la maquette validée (admin/_dev_alias_choix/maquette.html) :
   fond sombre violet, or de la fiche d'identité, parchemin, sceau de cire.
   Tout est préfixé nl- pour ne rien heurter dans perso.html.
   ===================================================================== */
.nl-encart { padding: 16px; border-radius: 16px; background: #121826; border: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; }
.nl-encart h2 { margin: 0 0 6px; font-size: 17px; color: #fff; }
.nl-encart p { margin: 6px 0; color: #c9d5e2; line-height: 1.45; }
.nl-actuel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: rgba(244,205,120,.07); border: 1px solid rgba(244,205,120,.35); }
.nl-actuel .nl-n { font-family: Georgia, "Times New Roman", serif; font-size: 20px; color: #ffe6aa; overflow-wrap: anywhere; min-width: 0; }
.nl-regle { font-size: 13px; color: #8aa0b3; }
.nl-bientot { font-size: 13px; color: #fde68a; }

.nl-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #e7edf4; font: 700 15px system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.nl-btn:disabled { opacity: .45; cursor: default; }
.nl-btn.nl-vert { background: linear-gradient(180deg,#16a34a,#166534); border: none; box-shadow: 0 4px 0 #0f3d22; color: #fff; }
.nl-btn.nl-or { background: linear-gradient(180deg,#f4cd78,#c98a2e); border: none; box-shadow: 0 4px 0 #6b4512; color: #2a1800; }

/* ── Fenêtre de la cérémonie ── */
.nl-voile { position: fixed; inset: 0; z-index: 1000; background: rgba(4,3,10,.8); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nl-cer { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; border-radius: 20px; padding: 18px 18px 20px; position: relative; color: #e7edf4; font: 16px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 50% 0, rgba(244,205,120,.14), transparent 55%), linear-gradient(180deg,#1f1830,#100c1a);
  box-shadow: inset 0 0 0 2px #96621f, inset 0 0 0 4px rgba(244,205,120,.55), 0 20px 60px rgba(0,0,0,.6); }
@media (max-width: 520px) { .nl-voile { padding: 0; } .nl-cer { max-height: 100vh; height: 100%; border-radius: 0; padding: 14px 16px 18px; } }
.nl-fermer { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); color: #fff; font-size: 18px; cursor: pointer; }
.nl-titre { text-align: center; margin: 2px 40px 10px; font-family: Georgia, serif; font-size: 22px; color: #ffe6aa; letter-spacing: .5px; }
.nl-etapes { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.nl-etapes span { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: #8aa0b3; border: 1px solid transparent; }
.nl-etapes span.on { color: #2a1800; background: #f4cd78; }
.nl-etapes span.fait { color: #ffe6aa; border-color: rgba(244,205,120,.4); }

.nl-parch { position: relative; margin: 4px auto 14px; max-width: 520px; padding: 18px 22px 20px; text-align: center; color: #3b2410; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 40%, #f3e3bf, #d9bf8a 120%); box-shadow: inset 0 0 26px rgba(120,80,30,.45), 0 6px 18px rgba(0,0,0,.45); }
.nl-parch::before, .nl-parch::after { content: ""; position: absolute; left: -8px; right: -8px; height: 14px; border-radius: 8px; background: linear-gradient(180deg,#c9a466,#8a6630); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.nl-parch::before { top: -7px; } .nl-parch::after { bottom: -7px; }
.nl-parch .nl-lead { font-size: 13px; font-style: italic; opacity: .8; }
.nl-parch .nl-nom { font-family: Georgia, "Times New Roman", serif; font-size: clamp(21px, 6vw, 30px); font-weight: 700; line-height: 1.2; margin: 6px 0 2px; overflow-wrap: anywhere; }
.nl-parch .nl-vide { opacity: .35; }
.nl-parch .nl-neuf { animation: nl-luire .7s ease-out; }
@keyframes nl-luire { from { color: #b4520f; text-shadow: 0 0 12px rgba(255,170,60,.9); } to { color: inherit; text-shadow: none; } }
.nl-parch .nl-detail { font-size: 12px; opacity: .75; }

.nl-consigne { text-align: center; margin: 4px 0 10px; color: #e9dcc0; }
.nl-consigne small { display: block; color: #8aa0b3; }
.nl-choix { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.nl-choix.nl-quatre { grid-template-columns: repeat(2,1fr); }
@media (max-width: 520px) { .nl-choix, .nl-choix.nl-quatre { grid-template-columns: 1fr; } }
.nl-carte { position: relative; min-height: 104px; border-radius: 16px; padding: 12px 10px; cursor: pointer; text-align: center; color: #e7edf4; font: inherit;
  border: 2px solid rgba(244,205,120,.25); background: linear-gradient(180deg,#221a35,#151022); display: grid; place-items: center; gap: 4px; transition: transform .15s, border-color .15s; }
.nl-carte:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(244,205,120,.6); }
.nl-carte:disabled { cursor: default; opacity: .5; }
.nl-carte.on { border-color: #f4cd78; box-shadow: 0 0 0 3px rgba(244,205,120,.25), 0 0 22px rgba(244,205,120,.25); }
.nl-carte .nl-ico { font-size: 30px; line-height: 1; }
.nl-carte .nl-mot { font-family: Georgia, serif; font-size: 19px; font-weight: 700; color: #ffe6aa; overflow-wrap: anywhere; }
.nl-carte .nl-type { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8aa0b3; }
.nl-carte.nl-tirage { animation: nl-tirer .45s ease-out both; }
.nl-carte.nl-tirage:nth-child(2) { animation-delay: .08s; } .nl-carte.nl-tirage:nth-child(3) { animation-delay: .16s; }
@keyframes nl-tirer { from { opacity: 0; transform: rotateY(80deg) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .nl-carte { min-height: 64px; grid-template-columns: 40px 1fr; text-align: left; justify-items: start; } .nl-carte .nl-ico { grid-row: span 2; } }

.nl-orn h3 { margin: 12px 0 6px; font-size: 14px; color: #8aa0b3; letter-spacing: .05em; text-transform: uppercase; }
.nl-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-puce { min-height: 42px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(244,205,120,.3); background: rgba(255,255,255,.04); color: #e7edf4; font: 700 14px system-ui, sans-serif; cursor: pointer; text-align: left; }
.nl-puce.on { background: #f4cd78; color: #2a1800; border-color: #f4cd78; }
.nl-puce.nl-verrou, .nl-puce:disabled { cursor: default; opacity: .55; border-style: dashed; }
.nl-puce small { display: block; font-weight: 600; font-size: 11px; opacity: .85; }
.nl-note { font-size: 13px; color: #8aa0b3; margin: 4px 0 0; }

.nl-pied { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.nl-pied .nl-relance { font-size: 13px; color: #8aa0b3; }
.nl-cout { margin: 10px auto 0; max-width: 520px; padding: 12px 14px; border-radius: 14px; background: rgba(105,224,255,.07); border: 1px solid rgba(105,224,255,.3); font-size: 14px; color: #cfeaf5; }
.nl-cout b { color: #fff; }
.nl-erreur { margin: 10px auto 0; max-width: 520px; padding: 10px 14px; border-radius: 12px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.5); color: #fecaca; font-size: 14px; text-align: center; }

.nl-sceau { width: 118px; height: 118px; margin: 4px auto 6px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.nl-sceau.nl-frappe { animation: nl-frappe .55s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes nl-frappe { 0% { transform: scale(2.4) rotate(-20deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.nl-verif { text-align: center; color: #ffe6aa; font-style: italic; margin: 18px 0; }
.nl-succes { text-align: center; }
.nl-succes p { color: #e9dcc0; }
.nl-succes .nl-final { font-family: Georgia, serif; font-size: 22px; color: #ffe6aa; margin: 4px 0 12px; overflow-wrap: anywhere; }
.nl-etincelles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.nl-etincelles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 8px #ffb84a; animation: nl-monter 1.6s ease-out forwards; }
@keyframes nl-monter { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-220px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nl-cer *, .nl-cer { animation: none !important; transition: none !important; } }