@charset "utf-8";

.template_color             { color: #0a1a34 ; }
.template_border_color      { border-color: #0a1a34 ; }
.template_backgroundcolor   { color: #0a1a34 ; }
.titre, .titre a            { color:#0a1a34; }

/* --- Fond général --- */
body {
  background: linear-gradient(
    135deg,
    rgba(31,163,138,0.25) 0%,
    rgba(246,166,35,0.25) 35%,
    rgba(58,98,168,0.20) 70%,
    rgba(75,46,131,0.20) 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 100vh;
}

/* --- COLONNES LATÉRALES (corde + halo + paillettes) --- */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: calc((100vw - 800px) / 2);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  background-repeat: no-repeat;

  background-image:
    /* CORDE (centrée, gris translucide) */
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.05)
    ),

    /* HALO rond fixe */
    radial-gradient(
      circle,
      rgba(255,255,255,0.40) 0%,
      rgba(255,255,255,0.20) 40%,
      rgba(255,255,255,0.05) 70%,
      transparent 100%
    ),

    /* PAILLETTES */
    radial-gradient(circle at 25% 6%, rgba(255,255,255,0.95) 0, transparent 8px),
    radial-gradient(circle at 70% 16%, rgba(255,255,255,0.9) 0, transparent 6px),
    radial-gradient(circle at 45% 30%, rgba(255,255,255,0.7) 0, transparent 7px),
    radial-gradient(circle at 15% 26%, rgba(255,255,255,0.5) 0, transparent 4.5px),
    radial-gradient(circle at 60% 42%, rgba(255,255,255,0.9) 0, transparent 5.5px),
    radial-gradient(circle at 35% 60%, rgba(255,255,255,0.85) 0, transparent 7px),
    radial-gradient(circle at 20% 29%, rgba(255,255,255,0.5) 0, transparent 4.5px),
    radial-gradient(circle at 45% 70%, rgba(255,255,255,0.9) 0, transparent 5.5px),
    radial-gradient(circle at 15% 60%, rgba(255,255,255,0.85) 0, transparent 7px),
    radial-gradient(circle at 65% 76%, rgba(255,255,255,0.5) 0, transparent 1.8px),
    radial-gradient(circle at 75% 90%, rgba(255,255,255,0.9) 0, transparent 3px),
    radial-gradient(circle at 40% 92%, rgba(255,255,255,0.4) 0, transparent 1.5px);

  background-size:
    3px 80px,      /* corde */
    180px 180px,   /* halo */
    auto, auto, auto, auto, auto, auto, auto, auto, auto;
}

/* COLONNE GAUCHE */
body::before {
  left: 0;
  opacity: 0.95;

  background-position:
    /* corde centrée au-dessus de la boule gauche */
    calc((100vw - 800px) / 4 - 80px + 60px) 0px,

    /* halo centré sous la boule gauche */
    calc((100vw - 800px) / 4 - 80px - 30px) 120px,

    /* paillettes */
    0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* COLONNE DROITE */
body::after {
  right: 0;
  opacity: 0.95;

  background-position:
    /* corde centrée sur boule droite */
    calc((100vw - 800px) / 4 - 80px + 95px) 0px,

    /* halo centré sous boule droite */
    calc((100vw - 800px) / 4 - 80px - 30px) 120px,

    /* paillettes */
    0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* --- BOULES À FACETTES --- */
html {
  position: relative;
}

html::before,
html::after {
  content: "";
  position: fixed;
  top: 90px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;

  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.45), transparent 60%),
    linear-gradient(90deg, rgba(255,255,255,0.9) 1px, rgba(255,255,255,0.38) 1px, rgba(255,255,255,0.35) 16px),
    linear-gradient(180deg, rgba(255,255,255,0.9) 1px, rgba(255,255,255,0.3) 1px, rgba(255,255,255,0.3) 16px);

  background-size: 100% 100%, 100% 100%, 16px 16px, 16px 16px;
  background-blend-mode: screen;

  box-shadow:
    0 0 15px rgba(255,255,255,0.9),
    0 0 45px rgba(255,255,255,0.6);

  animation:
    disco-spin 10s linear infinite,
    disco-sparkle 2.4s ease-in-out infinite alternate;
}

/* Position boule gauche */
html::before {
  left: calc((100vw - 800px) / 4 - 80px);
}

/* Position boule droite */
html::after {
  right: calc((100vw - 800px) / 4 - 80px);
}

/* --- Animations --- */
@keyframes disco-spin {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg) scale(1.02); }
  100% { transform: rotate(360deg); }
}

@keyframes disco-sparkle {
  0% { filter: brightness(0.95) contrast(1); }
  40% { filter: brightness(1.3) contrast(1.1); }
  70% { filter: brightness(1.05) contrast(0.95); }
  100% { filter: brightness(1.2) contrast(1.15); }
}

.menu_niveau_1_on 	{ background-color:#0a1a34; color:#FFF; }
.menu_niveau_1_on a { background-color:#0a1a34; color:#FFF; }
.titre 				{ text-transform: uppercase; } 
.formcontent .titre { text-transform: none; color:inherit; }
#template_header a	{ color:#0a1a34; }
#template_header	{ color:#0a1a34; }