/* NAW — micro-particules STRICTEMENT sur l'alpha du cadre illustré.
   Pour les avatars, le masque suit exactement l'agrandissement de 5 % du PNG.
   Pas de halo extérieur, aucun effet sans image de cadre, pas de Canvas animé.
*/
.naw-frame-fx-root { isolation: isolate; overflow: visible; }
.naw-frame-fx-root > .naw-frame-fx-layer {
    position: absolute !important;
    inset: 0;
    z-index: 3;
    display: block;
    overflow: hidden;
    pointer-events: none !important;
    user-select: none;
    opacity: 0;
    -webkit-mask-image: var(--naw-frame-mask);
    mask-image: var(--naw-frame-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-mode: alpha;
}
.naw-frame-fx-root > .naw-frame-fx-layer.is-ready {opacity: 1;}
/* Le cadre d'avatar PNG est en 110 % dans la mini-fiche et les réglages :
   le masque doit employer le MÊME repère, pas le médaillon de 100 %. */
.naw-portrait-common.has-portrait-frame > .naw-frame-fx-layer {
    top: calc(0% - var(--naw-avatar-frame-outset, 5%));
    left: calc(0% - var(--naw-avatar-frame-outset, 5%));
    width: calc(100% + var(--naw-avatar-frame-outset, 5%) + var(--naw-avatar-frame-outset, 5%));
    height: calc(100% + var(--naw-avatar-frame-outset, 5%) + var(--naw-avatar-frame-outset, 5%));
    right: auto;
    bottom: auto;
    z-index: 4;
}
/* Les cadres WebP de NAW sont RGBA ; leur alpha sert de masque exact. */
.naw-frame-fx-particle {
    position: absolute;
    left: var(--px);
    top: var(--py);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 var(--blur) 0 var(--color);
    opacity: 0;
    animation: var(--motion) var(--duration) ease-in-out var(--delay) infinite;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.naw-frame-fx-particle--energie {
    border-radius: 45%;
    rotate: var(--angle);
    background: linear-gradient(90deg, transparent, var(--color), #fff, var(--color), transparent);
}
.naw-frame-fx-particle--neige,
.naw-frame-fx-particle--givre {
    border-radius: 30%;
    box-shadow: 0 0 var(--blur) 0 var(--color);
}
@keyframes naw-frame-fx-float {
    0%,100% {opacity:0; transform:translate(-50%,-50%) translate(0,2px) scale(.5);}
    35% {opacity:.85;}
    70% {opacity:.70; transform:translate(-50%,-50%) translate(var(--dx),-2px) scale(1);}
}
@keyframes naw-frame-fx-sparkle {
    0%,100% {opacity:0; transform:translate(-50%,-50%) scale(.3);}
    48% {opacity:.92; transform:translate(-50%,-50%) scale(1.05);}
}
@keyframes naw-frame-fx-pulse {
    0%,100% {opacity:0; transform:translate(-50%,-50%) scale(.5);}
    44% {opacity:.84; transform:translate(-50%,-50%) scale(1.04);}
    70% {opacity:.42; transform:translate(-50%,-50%) translate(var(--dx),-1px) scale(.75);}
}
@keyframes naw-frame-fx-fall {
    0%,100% {opacity:0; transform:translate(-50%,-50%) translate(-1px,-3px) rotate(0);}
    30%,70% {opacity:.85;}
    100% {transform:translate(-50%,-50%) translate(var(--dx),3px) rotate(45deg);}
}
@keyframes naw-frame-fx-rise {
    0%,100% {opacity:0; transform:translate(-50%,-50%) translate(0,3px) scale(.5);}
    30% {opacity:.88;}
    75% {opacity:.64;}
    100% {transform:translate(-50%,-50%) translate(var(--dx),-3px) scale(.4);}
}
.naw-frame-fx-offscreen .naw-frame-fx-particle,
.naw-frame-fx-page-hidden .naw-frame-fx-particle {
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
    .naw-frame-fx-root > .naw-frame-fx-layer {display:none !important;}
    .naw-frame-fx-particle {animation:none !important;opacity:0 !important;}
}

/* Pilote administrateur : deux galeries sans débordement du panneau Apparence. */
.naw-frame-fx-settings {
    display: grid;
    gap: 16px;
    margin: 12px 0;
}
.naw-frame-fx-picker {min-width: 0;}
.naw-frame-fx-picker .naw-account-card__head {margin-bottom: 10px;}
.naw-frame-fx-current {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 5px 0 13px;
    padding: 10px 13px;
    border: 1px solid rgba(137, 100, 55, .36);
    border-radius: 8px;
    background: linear-gradient(140deg, #f4e8cc, #e5d3ab);
}
.naw-frame-fx-current__name {color: #4b361c; font-size: 13px; font-weight: 700;}
.naw-frame-fx-demo {
    position: relative;
    display: inline-block;
    flex: 0 0 152px;
    width: 152px;
    height: 152px;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(40, 26, 8, .2);
}
.naw-frame-fx-demo > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.naw-frame-fx-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 7px;
    max-height: 360px;
    padding: 8px 2px 8px 5px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.naw-frame-fx-choice {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    min-height: 84px;
    padding: 10px;
    border: 1px solid #b39b74;
    border-left: 4px solid var(--naw-frame-fx-color, #928166);
    border-radius: 7px;
    background: #f4ead4;
    color: #4b3520;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.naw-frame-fx-choice strong {font-size: 12px; line-height: 1.25;}
.naw-frame-fx-choice small {font-size: 10px; color: #70553c;}
.naw-frame-fx-choice > span {font-size: 11px; line-height: 1.3;}
.naw-frame-fx-choice:hover {background: #fff4db;}
.naw-frame-fx-choice.is-selected, .naw-frame-fx-choice[aria-pressed="true"] {
    background: #ece0bb;
    border-color: #82603b;
    box-shadow: inset 0 0 0 1px #d4ac70;
}
.naw-frame-fx-choice:focus-visible {outline: 2px solid #5b7e43; outline-offset: 2px;}
.naw-frame-fx-picker [data-naw-fx-feedback] {margin-top: 8px; min-height: 1em;}
.naw-frame-fx-picker [data-naw-fx-feedback].is-error {color: #8b3024;}
@media (max-width: 600px) {
    .naw-frame-fx-demo {flex-basis: 104px; width: 104px; height: 104px;}
    .naw-frame-fx-current {padding: 8px;}
    .naw-frame-fx-catalog {grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); max-height: 290px;}
    .naw-frame-fx-choice {min-height: 72px; padding: 7px;}
}


/* Aperçu fidèle : fond image en dessous, cadre WebP au-dessus, FX sur son alpha. */
.naw-frame-fx-demo { isolation:isolate; border-radius:0; background:transparent; box-shadow:none; }
.naw-frame-fx-demo > img.naw-frame-fx-demo__portrait,
.naw-frame-fx-demo > img.naw-frame-fx-demo__frame {
    position:absolute !important;
    inset:0;
    width:100% !important;
    height:100% !important;
    max-width:none;
    max-height:none;
    display:block;
    margin:0;
    border:0;
    pointer-events:none;
}
.naw-frame-fx-demo > img.naw-frame-fx-demo__portrait {
    z-index:1;
    object-fit:cover;
    border-radius:0;
    clip-path: circle(var(--naw-demo-radius, 40%) at calc(50% + var(--naw-demo-x, 0%)) calc(50% + var(--naw-demo-y, 0%)));
}
.naw-frame-fx-demo.is-custom-mask > img.naw-frame-fx-demo__portrait {
    clip-path: var(--naw-demo-clip, circle(40%));
}
.naw-frame-fx-demo > img.naw-frame-fx-demo__frame {
    z-index:2;
    border-radius:0 !important;
    object-fit:contain;
}
.naw-frame-fx-demo > .naw-frame-fx-layer {z-index:3;}

/* NAW FX V1.5 — structure prête pour les tracés, formations et balayages.
   Aucune nouvelle clé n'est publiée en phase 1.
   Ces éléments restent enfants du masque alpha du cadre, au-dessus des ornements
   et jamais sur le portrait central, y compris sur l'anneau standard d'avatar. */
.naw-frame-fx-v15-traces,
.naw-frame-fx-v15-sweep {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    pointer-events: none;
}
.naw-frame-fx-v15-trace {
    fill: none;
    stroke: var(--naw-v15-color, #c6edc6);
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-dasharray: 2 26;
    opacity: 0;
    animation: naw-frame-fx-v15-trace var(--naw-v15-duration, 6s) ease-in-out
        var(--naw-v15-delay, 0s) infinite;
}
.naw-frame-fx-v15-deposit {
    position: absolute;
    top: var(--naw-v15-y);
    left: var(--naw-v15-x);
    width: var(--naw-v15-size);
    height: var(--naw-v15-size);
    border-radius: 35%;
    background: var(--naw-v15-color, #c6edc6);
    box-shadow: 0 0 1.25px var(--naw-v15-color, #c6edc6);
    transform: translate(-50%, -50%) scale(.3);
    opacity: 0;
    pointer-events: none;
    animation: naw-frame-fx-v15-deposit var(--naw-v15-duration, 6s) ease-in-out
        var(--naw-v15-delay, 0s) infinite;
}
.naw-frame-fx-v15-sweep {
    background: linear-gradient(110deg, transparent 36%,
        var(--naw-v15-color, #c6edc6) 49%, transparent 56%);
    opacity: 0;
    transform: translateX(-100%);
    animation: naw-frame-fx-v15-sweep var(--naw-v15-duration, 9s) ease-in-out
        var(--naw-v15-delay, 0s) infinite;
}
@keyframes naw-frame-fx-v15-trace {
    0%, 100% {stroke-dashoffset: 32; opacity: 0;}
    24% {opacity: .55;}
    45% {stroke-dashoffset: 0; opacity: .78;}
    74% {opacity: 0;}
}
@keyframes naw-frame-fx-v15-deposit {
    0%, 100% {transform: translate(-50%,-50%) scale(.3); opacity: 0;}
    35%, 58% {transform: translate(-50%,-50%) scale(1); opacity: .75;}
    85% {opacity: 0;}
}
@keyframes naw-frame-fx-v15-sweep {
    0%, 14%, 90%, 100% {transform: translateX(-105%); opacity: 0;}
    31% {opacity: .22;}
    47% {transform: translateX(100%); opacity: .25;}
    58% {opacity: 0;}
}
.naw-frame-fx-offscreen .naw-frame-fx-v15-trace,
.naw-frame-fx-offscreen .naw-frame-fx-v15-deposit,
.naw-frame-fx-offscreen .naw-frame-fx-v15-sweep,
.naw-frame-fx-page-hidden .naw-frame-fx-v15-trace,
.naw-frame-fx-page-hidden .naw-frame-fx-v15-deposit,
.naw-frame-fx-page-hidden .naw-frame-fx-v15-sweep {
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
    .naw-frame-fx-v15-traces, .naw-frame-fx-v15-deposit,
    .naw-frame-fx-v15-sweep { display: none !important; }
}

/* Six signatures V1.5 — toutes strictement sous le masque alpha du cadre.
   Les petites amplitudes évitent de brouiller le portrait central. */
.naw-frame-fx-v15-trace--sap {
    stroke-width: 1.35;
    stroke-dasharray: 8 19;
    filter: drop-shadow(0 0 1.2px var(--naw-v15-color));
    animation-name: naw-frame-fx-v15-sap;
}
.naw-frame-fx-v15-trace--runes {
    stroke-width: 1.25;
    stroke-dasharray: 13 13;
    animation-name: naw-frame-fx-v15-rune;
}
.naw-frame-fx-v15-trace--lightning {
    stroke-width: 1.45;
    stroke-dasharray: 14 8;
    filter: drop-shadow(0 0 1.3px var(--naw-v15-color));
    animation-name: naw-frame-fx-v15-lightning;
}
.naw-frame-fx-v15-trace--silk {
    stroke-width: .75;
    stroke-dasharray: 13 22;
    stroke-opacity: .95;
    animation-name: naw-frame-fx-v15-silk;
}
.naw-frame-fx-v15-deposit--crystal {
    border-radius: 0;
    clip-path: polygon(50% 0, 89% 34%, 75% 92%, 48% 100%, 10% 61%, 22% 19%);
    background: linear-gradient(135deg, #f6ffff, var(--naw-v15-color), #77b7d3);
    box-shadow: none;
    animation-name: naw-frame-fx-v15-crystallize;
}
.naw-frame-fx-v15-deposit--honey {
    width: calc(var(--naw-v15-size) * .74);
    height: calc(var(--naw-v15-size) * 1.28);
    border-radius: 55% 55% 52% 52% / 70% 70% 40% 40%;
    background: linear-gradient(100deg, #ffe6a8, var(--naw-v15-color) 55%, #bf7924);
    box-shadow: 0 0 1px rgba(255, 219, 122, .5);
    animation-name: naw-frame-fx-v15-honey;
}
.naw-frame-fx-v15-sweep--honey {
    background: linear-gradient(108deg, transparent 46%, #ffe6aa 51%, transparent 56%);
    animation-duration: var(--naw-v15-duration, 10s);
}
@keyframes naw-frame-fx-v15-sap {
    0%, 100% {stroke-dashoffset: 25; opacity: 0;}
    18% {opacity: .15;}
    44% {stroke-dashoffset: 0; opacity: .78;}
    75% {opacity: .28;}
}
@keyframes naw-frame-fx-v15-rune {
    0%, 20%, 80%, 100% {opacity: 0;}
    32%, 58% {opacity: .86;}
    69% {opacity: .35;}
}
@keyframes naw-frame-fx-v15-lightning {
    0%, 15%, 18%, 45%, 48%, 100% {opacity: 0;}
    16%, 46% {opacity: .96;}
    17%, 47% {opacity: .25;}
}
@keyframes naw-frame-fx-v15-silk {
    0%, 100% {opacity: 0; stroke-dashoffset: 35;}
    33% {opacity: .48; stroke-dashoffset: 0;}
    62% {opacity: .78;}
    80% {opacity: .24;}
}
@keyframes naw-frame-fx-v15-crystallize {
    0%, 100% {transform: translate(-50%,-50%) scale(.1); opacity: 0;}
    30% {transform: translate(-50%,-50%) scale(.7); opacity: .45;}
    54%, 70% {transform: translate(-50%,-50%) scale(1); opacity: .85;}
    90% {opacity: 0;}
}
@keyframes naw-frame-fx-v15-honey {
    0%, 100% {transform: translate(-50%,-50%) translateY(-1px) scale(.6); opacity: 0;}
    22% {opacity: .72;}
    58% {transform: translate(-50%,-50%) translateY(1px) scale(1); opacity: .9;}
    84% {transform: translate(-50%,-50%) translateY(2px) scale(.82); opacity: 0;}
}

/* Phase 3 — six nouvelles identités. Styles strictement confinés au
   .naw-frame-fx-layer déjà masqué par l'alpha du cadre. */
.naw-frame-fx-v15-sweep--territory {
    background: conic-gradient(from 0deg, transparent 0deg 343deg,
        var(--naw-v15-color, #8cddc7) 353deg, transparent 360deg);
    animation-name: naw-frame-fx-v15-territory;
    transform-origin: center;
}
.naw-frame-fx-v15-sweep--heartbeat {
    background: radial-gradient(ellipse at center, transparent 33%,
        var(--naw-v15-color, #ee9da4) 78%, transparent 100%);
    animation-name: naw-frame-fx-v15-heartbeat;
    transform-origin: center;
}
.naw-frame-fx-v15-deposit--inner_fire {
    border-radius: 55% 55% 35% 35%;
    clip-path: polygon(50% 0%, 72% 40%, 86% 15%, 100% 85%,
        63% 100%, 27% 96%, 0 78%, 18% 38%, 34% 54%);
    background: linear-gradient(155deg, #fff1a6, var(--naw-v15-color), #cc432b);
    box-shadow: 0 0 1.4px var(--naw-v15-color);
    animation-name: naw-frame-fx-v15-inner-fire;
}
.naw-frame-fx-v15-sweep--prism {
    background: linear-gradient(108deg, transparent 39%,
        rgba(157, 223, 255, .15) 43%, rgba(255, 197, 236, .62) 47%,
        rgba(244, 253, 176, .72) 50%, rgba(173, 231, 255, .53) 53%,
        transparent 57%);
    animation-name: naw-frame-fx-v15-prism;
}
.naw-frame-fx-v15-deposit--dew {
    width: calc(var(--naw-v15-size) * .85);
    height: calc(var(--naw-v15-size) * 1.15);
    border: 1px solid rgba(235, 252, 255, .78);
    border-radius: 60% 60% 55% 55%;
    background: radial-gradient(circle at 28% 22%, #ffffff 0 10%,
        var(--naw-v15-color) 45%, rgba(85, 172, 221, .15) 95%);
    box-shadow: 0 0 1px rgba(159, 240, 255, .45);
    animation-name: naw-frame-fx-v15-dew;
}
.naw-frame-fx-v15-trace--corruption {
    stroke-width: 1.25;
    stroke-dasharray: 7 21;
    filter: drop-shadow(0 0 .8px var(--naw-v15-color));
    animation-name: naw-frame-fx-v15-corruption;
}
@keyframes naw-frame-fx-v15-territory {
    0%, 100% {transform: rotate(0deg); opacity: 0;}
    12% {opacity: .15;}
    34%, 70% {opacity: .55;}
    88% {transform: rotate(360deg); opacity: 0;}
}
@keyframes naw-frame-fx-v15-heartbeat {
    0%, 18%, 40%, 70%, 100% {transform: scale(1); opacity: .04;}
    25% {transform: scale(1.015); opacity: .35;}
    32% {transform: scale(1.006); opacity: .14;}
    48% {transform: scale(1.022); opacity: .48;}
    58% {transform: scale(1); opacity: .09;}
}
@keyframes naw-frame-fx-v15-inner-fire {
    0%, 100% {transform: translate(-50%, -50%) translateY(1px) scale(.5); opacity: 0;}
    21% {opacity: .36;}
    46% {transform: translate(-50%, -50%) translateY(-1px) scale(1); opacity: .75;}
    73% {opacity: .4;}
    88% {transform: translate(-50%, -50%) translateY(-2px) scale(.7); opacity: 0;}
}
@keyframes naw-frame-fx-v15-prism {
    0%, 9%, 88%, 100% {transform: translateX(-105%); opacity: 0;}
    25% {opacity: .22;}
    48% {transform: translateX(100%); opacity: .36;}
    60% {opacity: 0;}
}
@keyframes naw-frame-fx-v15-dew {
    0%, 100% {transform: translate(-50%, -50%) translateY(-1px) scale(.45); opacity: 0;}
    28% {opacity: .5;}
    57% {transform: translate(-50%, -50%) translateY(1.5px) scale(1); opacity: .9;}
    87% {transform: translate(-50%, -50%) translateY(2px) scale(.8); opacity: 0;}
}
@keyframes naw-frame-fx-v15-corruption {
    0%, 100% {stroke-dashoffset: 29; opacity: 0;}
    24% {opacity: .1;}
    42% {stroke-dashoffset: 0; opacity: .7;}
    56% {opacity: .87;}
    78% {opacity: .08;}
}

/* Navigation du catalogue admin à 42 effets : filtre local sans requête. */
.naw-frame-fx-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0 5px;
    color: #574028;
    font-size: 12px;
    font-weight: 600;
}
.naw-frame-fx-search input {
    flex: 1 1 190px;
    min-width: 0;
    max-width: 340px;
    padding: 6px 9px;
    border: 1px solid #ad9776;
    border-radius: 5px;
    background: #fbf3e4;
    color: #4b3520;
    font: inherit;
    font-weight: normal;
}
.naw-frame-fx-search input:focus-visible {
    outline: 2px solid #648943;
    outline-offset: 1px;
}
.naw-frame-fx-choice[hidden],
.naw-frame-fx-no-results[hidden] {display: none !important;}
.naw-frame-fx-no-results {
    padding: 8px 10px;
    font-size: 12px;
    color: #795c3e;
}

/* NAW FX V1.6 : six animations de matière, sans overflow hors de l'alpha.
   Toutes les marques sont des enfants directs du calque frame-fx masqué. */
.naw-frame-fx-v16-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.naw-frame-fx-v16-mark {
    fill: none;
    stroke: var(--naw-v16-color, #d5c9ac);
    stroke-width: 1.65;
    filter: drop-shadow(0 0 1px var(--naw-v16-color, #d5c9ac));
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 10 19;
    opacity: 0;
    animation: naw-frame-fx-v16-scar var(--naw-v16-duration, 9s) ease-in-out
        var(--naw-v16-delay, 0s) infinite;
}
.naw-frame-fx-v16-patch {
    position: absolute;
    z-index: 1;
    top: var(--naw-v16-y);
    left: var(--naw-v16-x);
    width: var(--naw-v16-size, 7px);
    height: var(--naw-v16-size, 7px);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    background: var(--naw-v16-color, #c4b9a4);
    filter: drop-shadow(0 0 1px var(--naw-v16-color, #c4b9a4));
    animation: naw-frame-fx-v16-molt var(--naw-v16-duration, 9s) ease-in-out
        var(--naw-v16-delay, 0s) infinite;
}
.naw-frame-fx-v16-patch--molt {
    border: 1px solid rgba(73, 55, 36, .35);
    clip-path: polygon(16% 0, 86% 9%, 100% 47%, 78% 98%, 19% 100%, 0 56%);
    background: linear-gradient(130deg, #e8dec9, var(--naw-v16-color), #8f8675);
}
.naw-frame-fx-v16-patch--molt::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 40%;
    width: 36%;
    height: 60%;
    border-left: 1px solid rgba(64, 44, 31, .8);
    transform: rotate(22deg);
}
.naw-frame-fx-v16-patch--moss {
    border-radius: 40%;
    background:
        radial-gradient(circle at 20% 38%, #d4f0a1 0 18%, transparent 23%),
        radial-gradient(circle at 70% 25%, #68a85f 0 24%, transparent 28%),
        radial-gradient(circle at 52% 73%, var(--naw-v16-color) 0 36%, transparent 41%);
    animation-name: naw-frame-fx-v16-moss;
}
.naw-frame-fx-v16-mark--scar {
    stroke: #d3947d;
    stroke-width: 1.65;
    animation-name: naw-frame-fx-v16-scar;
}
.naw-frame-fx-v16-mark--comb {
    stroke-width: 1.35;
    stroke-dasharray: 11 22;
    animation-name: naw-frame-fx-v16-comb;
}
.naw-frame-fx-v16-mark--gallery {
    stroke: #ae8960;
    stroke-width: 1.7;
    stroke-dasharray: 12 26;
    animation-name: naw-frame-fx-v16-gallery;
}
.naw-frame-fx-v16-mark--vibration {
    stroke-width: 1.2;
    stroke-dasharray: none;
    animation-name: naw-frame-fx-v16-vibration;
}
/* Particules de matière très lisibles sans animation permanente en JS.
   Les phases lumineuses occupent au moins la moitié de chaque cycle. */
@keyframes naw-frame-fx-v16-molt {
    0%, 100% {opacity:0; transform:translate(-50%, -50%) scale(.45);}
    15% {opacity:.68; transform:translate(-50%, -50%) scale(.85);}
    32%, 58% {opacity:1; transform:translate(-50%, -50%) rotate(5deg) scale(1);}
    76% {opacity:.78; transform:translate(-50%, -50%) rotate(-5deg) scale(.95);}
    90% {opacity:0; transform:translate(-50%, -50%) scale(.55);}
}
@keyframes naw-frame-fx-v16-moss {
    0%, 100% {opacity:0; transform:translate(-50%, -50%) scale(.35);}
    15% {opacity:.64; transform:translate(-50%, -50%) scale(.72);}
    38%, 70% {opacity:1; transform:translate(-50%, -50%) scale(1);}
    88% {opacity:.25;}
}
@keyframes naw-frame-fx-v16-scar {
    0%, 100% {opacity:0; stroke-dashoffset:24;}
    16% {opacity:.55;}
    36%, 70% {opacity:1; stroke-dashoffset:0;}
    88% {opacity:.18;}
}
@keyframes naw-frame-fx-v16-comb {
    0%, 100% {opacity:0; stroke-dashoffset:28;}
    16% {opacity:.58;}
    38%, 73% {opacity:1; stroke-dashoffset:0;}
    90% {opacity:.18;}
}
@keyframes naw-frame-fx-v16-gallery {
    0%, 100% {opacity:0; stroke-dashoffset:35;}
    17% {opacity:.6;}
    39%, 73% {opacity:1; stroke-dashoffset:0;}
    89% {opacity:.16;}
}
@keyframes naw-frame-fx-v16-vibration {
    0%, 100% {opacity:0; transform:translateY(0);}
    16% {opacity:.65; transform:translateY(0);}
    22% {opacity:1; transform:translateY(.8px);}
    26% {opacity:.85; transform:translateY(-.7px);}
    30% {opacity:1; transform:translateY(.5px);}
    36%, 68% {opacity:.86; transform:translateY(0);}
    83% {opacity:.32; transform:translateY(-.15px);}
}
.naw-frame-fx-offscreen .naw-frame-fx-v16-mark,
.naw-frame-fx-offscreen .naw-frame-fx-v16-patch,
.naw-frame-fx-page-hidden .naw-frame-fx-v16-mark,
.naw-frame-fx-page-hidden .naw-frame-fx-v16-patch {
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
    .naw-frame-fx-v16-shapes, .naw-frame-fx-v16-patch {
        display: none !important;
    }
}

/* V1.6.3 : reflet directionnel discret SOUS les matières guidées.
   Le parent possède déjà mask-image = alpha du cadre / anneau CSS.
   Aucun halo sur la photo ni autour du cadre, aucun DOM supplémentaire. */
.naw-frame-fx-layer.naw-frame-fx-v16-active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(112deg,
        transparent 31%,
        var(--naw-v16-accent, #d5c9ac) 46%,
        rgba(255, 255, 255, .85) 50%,
        var(--naw-v16-accent, #d5c9ac) 53%,
        transparent 68%);
    opacity: 0;
    transform: translateX(-105%);
    animation: naw-frame-fx-v16-sheen 8s ease-in-out infinite;
}
@keyframes naw-frame-fx-v16-sheen {
    0%, 9%, 89%, 100% {transform: translateX(-105%); opacity: 0;}
    22% {opacity: .16;}
    46% {transform: translateX(0); opacity: .29;}
    69% {transform: translateX(105%); opacity: .21;}
    82% {opacity: 0;}
}
.naw-frame-fx-offscreen .naw-frame-fx-v16-active::before,
.naw-frame-fx-page-hidden .naw-frame-fx-v16-active::before,
.naw-frame-fx-layer.naw-frame-fx-v16-active:is(.naw-frame-fx-offscreen,.naw-frame-fx-page-hidden)::before {
    animation-play-state: paused !important;
}
.naw-frame-fx-root.naw-frame-fx-offscreen > .naw-frame-fx-layer.naw-frame-fx-v16-active::before,
.naw-frame-fx-root.naw-frame-fx-page-hidden > .naw-frame-fx-layer.naw-frame-fx-v16-active::before {
    animation-play-state: paused !important;
}
@media (max-width: 600px) {
    .naw-frame-fx-demo {
        flex-basis: 134px;
        width: 134px;
        height: 134px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .naw-frame-fx-layer.naw-frame-fx-v16-active::before {
        display: none !important;
    }
}

/* =========================================================================
   NAW FX — direction artistique V1.7 : 12 signatures V1.5.
   Contraste, durée de présence et géométrie renforcés sans rupture du masque
   alpha ni nouvelle boucle JS. Inspiré du rythme arrivée / vie du profil.
   ========================================================================= */
.naw-frame-fx-v15-trace {
    stroke-width: 1.75;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 1.3px var(--naw-v15-color, #ffffff));
}
.naw-frame-fx-v15-trace--sap {
    stroke-width: 2;
    stroke-dasharray: 13 18;
    filter: drop-shadow(0 0 1.7px var(--naw-v15-color));
}
.naw-frame-fx-v15-trace--runes {
    stroke-width: 1.8;
    stroke-dasharray: 20 8;
    filter: drop-shadow(0 0 2px var(--naw-v15-color));
}
.naw-frame-fx-v15-trace--lightning {
    stroke-width: 2;
    stroke-dasharray: 19 8;
    filter: drop-shadow(0 0 2px var(--naw-v15-color));
}
.naw-frame-fx-v15-trace--silk {
    stroke-width: 1.3;
    stroke-dasharray: 20 20;
    filter: drop-shadow(0 0 1px #e7f9ff);
}
.naw-frame-fx-v15-trace--corruption {
    stroke-width: 1.9;
    stroke-dasharray: 12 23;
    filter: drop-shadow(0 0 2px var(--naw-v15-color));
}
.naw-frame-fx-v15-deposit {
    box-shadow: 0 0 1.8px var(--naw-v15-color), 0 0 3px var(--naw-v15-color);
}
.naw-frame-fx-v15-deposit--crystal {
    border: .5px solid rgba(255,255,255,.6);
    background:linear-gradient(145deg,#f8ffff 0 18%, var(--naw-v15-color) 38%, #569ab7 74%, #ffffff);
}
.naw-frame-fx-v15-deposit--honey {
    background:radial-gradient(circle at 34% 23%,#fff5db 0 17%,#ffc65c 29%,var(--naw-v15-color) 67%,#9c5c20);
}
.naw-frame-fx-v15-deposit--inner_fire {
    background:linear-gradient(155deg,#fff7ba,#ff9c4c 44%,#d94320);
    box-shadow:0 0 2px #ff913d,0 0 3px rgba(255,106,35,.75);
}
.naw-frame-fx-v15-deposit--dew {
    border-color:rgba(251,255,255,.95);
    background:radial-gradient(circle at 30% 25%,#fff 0 20%,var(--naw-v15-color) 52%,rgba(80,155,221,.28) 90%);
}
.naw-frame-fx-v15-sweep--territory {
    background:conic-gradient(from 0deg,transparent 0 337deg,
       rgba(255,255,255,.6) 343deg,var(--naw-v15-color) 350deg,transparent 360deg);
}
.naw-frame-fx-v15-sweep--heartbeat {
    background:radial-gradient(ellipse at center,transparent 25%,
       var(--naw-v15-color) 71%,rgba(255,255,255,.6) 89%,transparent 100%);
}
.naw-frame-fx-v15-sweep--prism {
    background:linear-gradient(108deg,transparent 37%,
      rgba(147,223,255,.4) 42%,rgba(255,197,238,.83) 47%,
      rgba(254,254,182,.85) 50%,rgba(169,238,255,.77) 53%,transparent 62%);
}
.naw-frame-fx-v15-sweep--honey {
    background:linear-gradient(108deg,transparent 40%,
      rgba(255,245,201,.5) 47%,#ffe8a9 51%,transparent 62%);
}
@keyframes naw-frame-fx-v15-sap {
    0%,100%{stroke-dashoffset:30;opacity:0;}
    17%{opacity:.45;} 33%,71%{stroke-dashoffset:0;opacity:.94;} 90%{opacity:.18;}
}
@keyframes naw-frame-fx-v15-rune {
    0%,100%{opacity:0;} 15%{opacity:.3;} 30%,70%{opacity:1;} 88%{opacity:.12;}
}
@keyframes naw-frame-fx-v15-lightning {
    0%,12%,45%,48%,100%{opacity:0;}
    14%,19%{opacity:1;} 16%{opacity:.3;} 46%,53%{opacity:.92;}
    65%{opacity:.24;}
}
@keyframes naw-frame-fx-v15-silk {
    0%,100%{stroke-dashoffset:34;opacity:0;}
    18%{opacity:.32;} 38%,76%{stroke-dashoffset:0;opacity:.94;}
    90%{opacity:.2;}
}
@keyframes naw-frame-fx-v15-corruption {
    0%,100%{stroke-dashoffset:30;opacity:0;}
    18%{opacity:.2;} 37%,76%{stroke-dashoffset:0;opacity:.87;}
    90%{opacity:.13;}
}
@keyframes naw-frame-fx-v15-crystallize {
    0%,100%{transform:translate(-50%,-50%) scale(.25);opacity:0;}
    16%{opacity:.47;} 36%,78%{transform:translate(-50%,-50%) scale(1);opacity:1;}
    91%{opacity:.13;}
}
@keyframes naw-frame-fx-v15-deposit {
    0%,100%{transform:translate(-50%,-50%) scale(.35);opacity:0;}
    15%{opacity:.52;} 32%,77%{transform:translate(-50%,-50%) scale(1);opacity:.94;}
    91%{opacity:.12;}
}
@keyframes naw-frame-fx-v15-honey {
    0%,100%{transform:translate(-50%,-50%) translateY(-1px) scale(.6);opacity:0;}
    17%{opacity:.6;} 42%,75%{opacity:1;}
    66%{transform:translate(-50%,-50%) translateY(2px) scale(1);}
    91%{opacity:.12;}
}
@keyframes naw-frame-fx-v15-inner-fire {
    0%,100%{transform:translate(-50%,-50%) translateY(1px) scale(.5);opacity:0;}
    19%{opacity:.56;} 39%,72%{transform:translate(-50%,-50%) translateY(-1px) scale(1.14);opacity:1;}
    91%{opacity:.13;}
}
@keyframes naw-frame-fx-v15-dew {
    0%,100%{transform:translate(-50%,-50%) translateY(-1px) scale(.4);opacity:0;}
    16%{opacity:.5;} 38%,76%{transform:translate(-50%,-50%) translateY(1px) scale(1);opacity:1;}
    91%{opacity:.12;}
}
@keyframes naw-frame-fx-v15-territory {
    0%,100%{transform:rotate(0);opacity:0;}
    14%{opacity:.25;} 30%,74%{opacity:.72;}
    85%{transform:rotate(360deg);opacity:.1;}
}
@keyframes naw-frame-fx-v15-heartbeat {
    0%,18%,40%,75%,100%{transform:scale(1);opacity:.08;}
    24%{transform:scale(1.016);opacity:.48;}
    31%{transform:scale(1.007);opacity:.19;}
    48%{transform:scale(1.024);opacity:.74;}
    58%{transform:scale(1.007);opacity:.24;}
}
@keyframes naw-frame-fx-v15-prism {
    0%,9%,90%,100%{transform:translateX(-105%);opacity:0;}
    22%{opacity:.3;} 46%{transform:translateX(100%);opacity:.66;}
    68%{opacity:.25;} 78%{opacity:0;}
}

/* FX de cadre V1.7 : ponctuation d'apparition inspirée du système de profil.
   Chaque rendu commence par un reflet de sa propre couleur, puis conserve
   sa chorégraphie passive. Le parent porte toujours son masque alpha réel. */
.naw-frame-fx-root > .naw-frame-fx-layer.is-ready::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 23%,
        rgba(255,255,255,.25) 37%,
        var(--naw-frame-arrival-color,#c6e6bc) 45%,
        rgba(255,255,255,.85) 50%,
        var(--naw-frame-arrival-color,#c6e6bc) 54%,
        transparent 68%);
    opacity: 0;
    transform: translateX(-105%);
    animation: naw-frame-fx-arrival 1.8s ease-out both;
}
@keyframes naw-frame-fx-arrival {
    0%,8% {transform:translateX(-105%);opacity:0;}
    24% {opacity:.18;}
    54% {transform:translateX(0);opacity:.47;}
    77% {transform:translateX(105%);opacity:.21;}
    100% {transform:translateX(105%);opacity:0;}
}
.naw-frame-fx-root.naw-frame-fx-offscreen > .naw-frame-fx-layer.is-ready::after,
.naw-frame-fx-page-hidden .naw-frame-fx-root > .naw-frame-fx-layer.is-ready::after {
    animation-play-state:paused !important;
}
/* Accents de matière V1.6 : dentelures minérales, relief de cire et fibres. */
.naw-frame-fx-v16-mark--scar {
    stroke:#f1ac8c;
    filter:drop-shadow(0 0 1.5px #df9672);
}
.naw-frame-fx-v16-mark--comb {
    fill:rgba(255,197,77,.19);
    stroke:#ffe0a4;
    filter:drop-shadow(0 0 1.35px #ffcb6a);
}
.naw-frame-fx-v16-mark--gallery {
    stroke:#e1c19a;
    filter:drop-shadow(0 0 1px #b58b65);
}
.naw-frame-fx-v16-mark--vibration {
    stroke:#edf6ff;
    filter:drop-shadow(0 0 1.2px #c9daff);
}
.naw-frame-fx-v16-patch--molt {
    box-shadow:inset 0 0 1px #f8eee0,0 0 2px rgba(196,185,164,.75);
}
.naw-frame-fx-v16-patch--moss {
    filter:drop-shadow(0 0 1.4px #8bc575);
}
@media (prefers-reduced-motion:reduce) {
    .naw-frame-fx-root > .naw-frame-fx-layer.is-ready::after {
        display:none !important;
        animation:none !important;
    }
}

/* V1.8 : lumière d'ambiance sculptée dans l'alpha du cadre. Reflet initial
   indépendant (::after) et aucun nœud / Canvas / timer supplémentaire. */
.naw-frame-fx-root > .naw-frame-fx-layer.is-ready.naw-frame-fx-atmosphere::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 19% 18%, var(--naw-frame-arrival-color) 0%, transparent 24%),
        radial-gradient(ellipse at 83% 78%, var(--naw-frame-arrival-color) 0%, transparent 23%),
        conic-gradient(from 12deg at 50% 50%,transparent 0deg 28deg,
            var(--naw-frame-arrival-color) 50deg,transparent 76deg 183deg,
            var(--naw-frame-arrival-color) 213deg,transparent 244deg 360deg);
    opacity: .22;
    transform: rotate(-4deg);
    animation: naw-frame-fx-atmosphere 9s ease-in-out infinite;
}
.naw-frame-fx-root > .naw-frame-fx-layer.is-ready.naw-frame-fx-atmosphere--legendary::before {
    animation-duration: 6.5s;
}
.naw-frame-fx-root > .naw-frame-fx-layer.is-ready.naw-frame-fx-atmosphere--traces::before {
    animation-duration: 11s;
}
.naw-frame-fx-root > .naw-frame-fx-layer.is-ready.naw-frame-fx-atmosphere--deposits::before {
    animation-duration: 7s;
}
.naw-frame-fx-root > .naw-frame-fx-layer.is-ready.naw-frame-fx-atmosphere--sweep::before {
    animation-duration: 13s;
}
@keyframes naw-frame-fx-atmosphere {
    0%,100% {opacity: .12; transform: rotate(-4deg);}
    42% {opacity: .38; transform: rotate(3deg);}
    67% {opacity: .24; transform: rotate(1deg);}
}
/* Gravures lumineuses, rosée nacrée et chaleur intérieure mieux lisibles. */
.naw-frame-fx-v15-trace--lightning,.naw-frame-fx-v15-trace--runes {
    filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1.7px var(--naw-v15-color));
}
.naw-frame-fx-v15-deposit--inner_fire {
    box-shadow: 0 0 2px #ffe5a7, 0 0 4px var(--naw-v15-color);
}
.naw-frame-fx-v15-deposit--dew {
    box-shadow: inset -1px -1px 1px rgba(48,112,168,.5), 0 0 2.5px #e4f9ff;
}
/* Les six matières gagnent du relief sans multiplier leurs SVG. */
.naw-frame-fx-v16-mark--scar {
    filter: drop-shadow(0 0 1px #fff0cf) drop-shadow(0 0 2px #d77a53);
}
.naw-frame-fx-v16-mark--comb {
    fill: rgba(255,211,111,.26);
    filter: drop-shadow(0 0 1px #fff5d7) drop-shadow(0 0 2px #e6a83c);
}
.naw-frame-fx-v16-mark--gallery {
    filter: drop-shadow(0 0 1px #fff1d6) drop-shadow(0 0 2px #ae8960);
}
.naw-frame-fx-v16-mark--vibration {
    filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2px #99b9fc);
}
.naw-frame-fx-v16-patch--molt {
    background: linear-gradient(135deg,#fff1d9 0%,var(--naw-v16-color) 36%,#796c60 73%,#eee2cc);
}
.naw-frame-fx-v16-patch--moss {
    filter: drop-shadow(0 0 1px #ecffc0) drop-shadow(0 0 2px #71b76a);
}
.naw-frame-fx-root.naw-frame-fx-offscreen > .naw-frame-fx-layer.naw-frame-fx-atmosphere::before,
.naw-frame-fx-page-hidden .naw-frame-fx-root > .naw-frame-fx-layer.naw-frame-fx-atmosphere::before {
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
    .naw-frame-fx-root > .naw-frame-fx-layer.naw-frame-fx-atmosphere::before {
        display: none !important;
    }
}