/* CSS — réglages principaux (modifie les variables pour adapter rapidement) */
.wood-sep {
--height: 30px;            /* hauteur visuelle (changeable) */
--gold: #ffd97a;          /* doré principal */
--sheen-opacity: 0.45;
--shadow: 0 6px 18px #6E4A4A;

width: 100%;
max-width: 100%;
height: var(--height);
position: relative;
overflow: hidden;
display: block;
box-shadow: var(--shadow);
margin: 1.6rem 0;
background: transparent;
}



/* SVG responsive dans le container */
.wood-svg {
width: 100%;
height: 100%;
display: block;
transform: translateZ(0); /* invite au rendu GPU pour fluidité */
}

/* STYLE des nervures : départ très discret, puis animation "run" dorée */
.vein {
stroke: rgba(255,215,0,0.05); /* quasi invisible par défaut */
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke 160ms linear;
}

/* petites veines plus fines */
.vein.small { stroke-width: 1.6; }

/* animation : un courant doré qui parcourt la veine, puis reste en halo discret */
@keyframes veinRun {
0% {
stroke-dashoffset: 1000;
stroke: rgba(255,215,0,0.04);
opacity: 0.9;
filter: blur(0px);
}
30% {
stroke-dashoffset: 420;
stroke: var(--gold);
opacity: 1;
filter: blur(0.6px);
}
60% {
stroke-dashoffset: 200;
stroke: #ffe5a8;
opacity: 1;
filter: blur(1.6px);
}
100% {
stroke-dashoffset: -900;
stroke: rgba(255,215,0,0.12);
opacity: 0.85;
filter: blur(2px);
}
}

/* appliquer l'animation avec offsets pour paraître organique */
.veins .v1 { animation: veinRun 6.4s linear infinite; animation-delay: 0.0s; }
.veins .v2 { animation: veinRun 5.6s linear infinite; animation-delay: 0.9s; }
.veins .v3 { animation: veinRun 7.2s linear infinite; animation-delay: 1.6s; }
.veins .small { animation: veinRun 4.8s linear infinite; animation-delay: 2.2s; }

/* la lueur du shear est contrôlée via l'opacité : plus discret en prod */
.sheen { mix-blend-mode: overlay; opacity: var(--sheen-opacity); }

/* préférences d'accessibilité (réduire les mouvements) */
@media (prefers-reduced-motion: reduce) {
.vein, .veins .v1, .veins .v2, .veins .v3, .veins .small {
animation: none !important;
stroke: rgba(255,215,0,0.08) !important;
stroke-dashoffset: 0 !important;
opacity: 0.9 !important;
}
.sheen { display: none !important; }
}

/* petits ajustements responsive */
@media (max-width: 480px) {
.wood-sep { --height: 40px; --radius: 6px; margin: 1rem 0; }
.wood-topbar { height: 5px; }
}