/* ====== Les 3 cubes du fond d'écran (repris de l'ancien index.css) ====== */
.cubes {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.5; /* cubes volontairement discrets (demande du 28/09/2026) */
}
.cube {
    position: absolute;
    width: var(--cube-w, 200px);
    height: calc(var(--cube-w, 200px) * 0.55);
    border: calc(var(--cube-w, 200px) * 0.035) double rgba(56, 106, 205, 0.9);
    border-radius: calc(var(--cube-w, 200px) * 0.1);
    box-shadow: -3px 4px 8px rgba(0, 0, 0, 0.7);
    animation: cube_pop_in 0.3s linear forwards;
}
/* Mêmes dégradés que l'original : couleur en bas à droite vers le blanc */
.cube--violet { background: radial-gradient(circle at bottom right, rgba(164, 91, 227, 0.5), #FFFFFF); }
.cube--orange { background: radial-gradient(circle at bottom right, rgba(255, 165, 81, 0.5), #FFFFFF); }
.cube--bleu   { background: radial-gradient(circle at bottom right, rgba(82, 123, 204, 0.5), #FFFFFF); }

.cubes--discret .cube { opacity: 0.55; box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.35); }

.cube.pop_out { animation: cube_pop_out 1s ease-out forwards; }

@keyframes cube_pop_in {
    0%   { transform: scale(0.4); }
    25%  { transform: scale(0.9); }
    50%  { transform: scale(0.8); }
    75%  { transform: scale(0.9); }
    100% { transform: scale(0.8); }
}
@keyframes cube_pop_out {
    0%   { transform: scale(0.8); }
    5%   { transform: scale(0.9); }
    15%  { transform: scale(0); }
    100% { transform: scale(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cube { animation: cube_fondu 0.4s ease-out forwards; transform: scale(0.8); }
    .cube.pop_out { animation: cube_fondu 0.4s ease-in reverse forwards; }
    @keyframes cube_fondu { from { opacity: 0; } to { opacity: 1; } }
}