@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=stardom@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

:root {
  --font-body: "Stardom";
  --font-display: "Dancing Script";
  --font-table: "Archivo Black";
}

html,
body {
  font-family: var(--font-body), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.font-dancing {
  font-family: var(--font-display), cursive;
}

.font-stardom {
  font-family: var(--font-body), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.font-archivo {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* Style du cadre de tableau personnalisé */
.cadre-or {
    border: 48px solid;
    border-image-source: url('/img/textures/cadreOr.png');
    border-image-slice: 88 97 91 91;
    border-image-repeat: round;
    background-clip: padding-box;


}

.cadre-bois {
    border: 30px solid ;
    border-image-source: url('/img/textures/cadre-bois.jpg');
    border-image-slice: 74 75 72 73;
    border-image-repeat: stretch;
}




.gradient-border  {
  position: relative;
  padding: 10px;
  inset: 0;
  pointer-events: none;
  /* 2 coins en blanc: haut-gauche + bas-droite */
  background:
    linear-gradient(#fff, #fff) left top / 10px 50px no-repeat,
    linear-gradient(#fff, #fff) left top / 50px 10px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 10px 50px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 50px 10px no-repeat;
}


/* Animation des paillettes */
@keyframes scintillement {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px) scale(1.2); /* Monte légèrement */
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(0.5); /* Disparaît en montant */
    }
}

.paillette {
    position: absolute;
    background-color: gold; /* Couleur de la paillette */
    border-radius: 50%;
    pointer-events: none; /* Pour ne pas gêner les clics sur le site */
    box-shadow: 0 0 10px gold; /* Effet de brillance */
    animation: scintillement linear infinite;
}