/* =====================================================================
   MASCOTTE "L'IA" — robot animé blanc/bleu, cohérent avec l'identité
   ===================================================================== */

.ia-mascotte-zone {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1.5rem;
    position: relative;
}

.ia-mascotte-conteneur {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, left 0.3s ease, bottom 0.3s ease;
    animation: ia-mascotte-flotter 3.2s ease-in-out infinite;
}

@keyframes ia-mascotte-flotter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.ia-mascotte-svg { width: 150px; height: 160px; display: block; }

.ia-mascotte-oeil {
    animation: ia-mascotte-clignement 5s infinite;
    transform-origin: center;
}
.ia-mascotte-oeil-droit { animation-delay: 0.05s; }

@keyframes ia-mascotte-clignement {
    0%, 90%, 100% { transform: scaleY(1); }
    93% { transform: scaleY(0.12); }
    96% { transform: scaleY(1); }
}

.ia-mascotte-bouche {
    transform-origin: center;
    transition: transform 0.06s linear;
}

/* --- Bulle de dialogue : par défaut EN DESSOUS du robot (évite le
   débordement en haut d'écran quand le robot est en haut de page) --- */
.ia-mascotte-bulle {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    width: 260px;
    max-width: 78vw;
    background: var(--ia-surface);
    border: 1px solid var(--ia-bordure);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
}
.ia-mascotte-bulle::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: var(--ia-surface);
}
.ia-mascotte-bulle.ia-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.ia-mascotte-texte { font-size: 13px; margin: 0 0 12px; line-height: 1.5; }

.ia-mascotte-boutons { display: flex; flex-direction: column; gap: 6px; }
.ia-mascotte-boutons a {
    display: block;
    text-align: center;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    background: var(--ia-bleu-clair);
    color: var(--ia-bleu-fonce);
    font-weight: 500;
}
.ia-mascotte-boutons a:hover { background: var(--ia-bleu); color: #fff; }

.ia-mascotte-mute {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ia-surface);
    border: 1px solid var(--ia-bordure);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    z-index: 5;
}

/* --- Mode flottant (réduit au défilement) : robot en bas d'écran,
   donc la bulle s'ouvre ici AU-DESSUS pour rester visible --- */
.ia-mascotte-conteneur.ia-mascotte-mini {
    position: fixed;
    bottom: 16px;
    right: 16px;
    left: auto;
    transform: scale(0.55);
    transform-origin: bottom right;
    z-index: 40;
}
.ia-mascotte-conteneur.ia-mascotte-mini .ia-mascotte-bulle {
    top: auto;
    bottom: calc(100% + 8px);
    left: auto;
    right: 0;
    transform: translateX(0) scale(0.85);
}
.ia-mascotte-conteneur.ia-mascotte-mini .ia-mascotte-bulle.ia-visible {
    transform: translateX(0) scale(1);
}
.ia-mascotte-conteneur.ia-mascotte-mini .ia-mascotte-bulle::after {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: var(--ia-surface);
    left: auto;
    right: 14px;
    transform: none;
}

@media (max-width: 480px) {
    .ia-mascotte-svg { width: 120px; height: 128px; }
    .ia-mascotte-bulle { width: 220px; }
}