/* Le robot vivant (shortcode [optima_robot]). L'hôte est un DÉCOR : il ne prend aucun clic (les zones se
   testent sur la position du pointeur, écoutée sur la page, scripts robot-vivant.js). `.est-pret` vient à sa
   première image. Chargée sur toutes les pages, dans le <head> (optima-robot.php) : la place est tenue dès
   le premier affichage. */
.optima-robot {
    position: relative;
    width: 100%;
    height: var(--or-hauteur, 420px);
    pointer-events: none;
}
/* Le chargeur : une barre fine et le pourcentage, au centre de la place du robot, dans la police et la couleur
   du texte de la page (currentColor) : il ne prend aucun parti graphique. Effacé à la première image du robot. */
.optima-robot__charge {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
    transition: opacity 0.5s ease;
}
.optima-robot.est-pret .optima-robot__charge { opacity: 0; }
.optima-robot__barre {
    width: min(140px, 40%);
    height: 2px;
    border-radius: 1px;
    background: color-mix(in srgb, currentColor 18%, transparent);
    overflow: hidden;
}
.optima-robot__barre > span {
    display: block;
    width: 0;
    height: 100%;
    background: currentColor;
    transition: width 0.2s ease;
}
.optima-robot canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.optima-robot.est-pret canvas { opacity: 1; }

/* FLOTTANT : la mascotte posée dans le coin bas droit de la fenêtre, sur toutes les pages qui portent le
   shortcode (pied de page Elementor, par exemple). Le script la sort de son parent, rattachée à <body>. */
.optima-robot--flottant {
    position: fixed;
    right: 16px;
    bottom: 0;
    width: 200px;
    height: var(--or-hauteur, 260px);
    z-index: 9990;
}

/* Téléphone : rien (le script ne monte pas le robot sous 768 px sans data-mobile="oui"), ni la place. */
@media (max-width: 767px) {
    .optima-robot:not([data-mobile="oui"]) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .optima-robot canvas,
    .optima-robot__charge,
    .optima-robot__barre > span { transition: none; }
}