html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    user-select: none;
}

#arrow {
    position: relative;
    top: -10px;
    left: 100%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid black;
}

#arrow2 {
    position: relative;
    top: -10px;
    left: 100%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid black;
}

#plan-container {
    position: relative;
    width: 90vw;
    height: calc(90vh - 96px);
    background-color: #f9f9f9;
    overflow: hidden;
    margin: auto;
}

#axe-x,
#axe-y {
    position: absolute;
    background: black;
}

.graduation {
    position: absolute;
    background: black;
    cursor: pointer;
}

.graduation-label {
    position: absolute;
    font-size: 12px;
}



#lettre_corr {
    position: absolute;
    color: green;
    z-index: 10;
}

#lettre {
    position: absolute;
    color: red;
    z-index: 10;
}


#guide-x,
#guide-y {
    position: absolute;
    /*background-color: gray;*/
    opacity: 0.5;
    pointer-events: none;
    z-index: 5;

}

#guide-x-corr,
#guide-y-corr {
    position: absolute;
    /* background-color: rgb(116, 237, 98);*/

    opacity: 0.5;
    pointer-events: none;
    z-index: 5;
}

#guide-x-corr {
    height: 1px;
    width: 100%;
    border-top: 2px dashed rgb(116, 237, 98);
}

#guide-y-corr {
    width: 1px;
    height: 100%;
    border-left: 2px dashed rgb(116, 237, 98);
}

#guide-x {
    height: 1px;
    width: 100%;
    border-top: 2px dashed gray;
}

#guide-y {
    width: 1px;
    height: 100%;
    border-left: 2px dashed gray;
}

body {
    text-align: center;
}

#mon_canvas {
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.fraction {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.2em 0.4ex;
    text-align: center;
}

.fraction>span {
    display: block;
    padding-top: 0.15em;
}

.fraction span.fdn {
    border-top: thin solid black;
}

.fraction span.bar {
    display: none;
}

.bouton {
    border: none;
    font-family: Arial;
    text-align: center;
    font-family: Arial;
    background-color: #8ab1d9;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    color: #444444;

    font: 150%/100% Arial, Helvetica, sans-serif;
    height: 48px;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;

    text-align: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    cursor: pointer;
    text-decoration: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.bouton:hover {
    text-decoration: none;
    background-color: #ffd34e;
}

.msg {
    border: none;
    font-family: Arial;
    text-align: center;
    font-family: Arial;
    background-color: #8ab1d9;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    color: #444444;

    font: 150%/100% Arial, Helvetica, sans-serif;
    height: 48px;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;

    text-align: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.consigne {
    border: none;
    font-family: Arial;
    text-align: center;
    font-family: Arial;
    background-color: #edffe7;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    color: #444444;

    font: 120%/100% Arial, Helvetica, sans-serif;
    padding: 10px;

    text-align: center;
    width: 100%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    position: relative;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    width: fit-content;
    margin: 10px auto;
}

.resultat {
    width: 500px;
    top: 100px;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    z-index: 50;
    border: none;
    font-family: Arial;
    text-align: center;
    font-family: Arial;
    background-color: #edffe7;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    color: #444444;

    font: 120%/100% Arial, Helvetica, sans-serif;
    height: auto;
    padding: 5px;

    text-align: center;

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
}

/* --- STYLES "CLIPPY" (FRAKTO) --- */

:root {
    --clippy-metal: #8e9eab;
    --clippy-metal-dark: #5a6a7a;
    --primary: #4361ee;
    --success: #2ec4b6;
    --warning: #f72585;
}

#frakto-wrapper {
    position: fixed;
    bottom: 20px;
    /* On définit la position par défaut via 'left' pour pouvoir l'animer */
    /* 100vw (largeur écran) - 180px (largeur perso + marge) */
    left: calc(100vw - 180px);
    width: 160px;
    height: 200px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3));
    /* On ajoute 'left' à la transition pour que ça glisse */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), left 0.8s ease-in-out;
    pointer-events: auto;
    /* Important pour capter la souris */
}

/* La classe qui force Frakto à aller à gauche */
#frakto-wrapper.force-left {
    left: 20px !important;
}

/* --- GESTION DE LA BULLE QUAND FRAKTO EST A GAUCHE --- */

/* Par défaut (droite), la bulle est à gauche du perso. 
   Quand Frakto passe à gauche (.force-left), la bulle doit passer à sa droite */
#frakto-wrapper.force-left .speech-bubble {
    right: auto;
    /* On annule l'alignement droit */
    left: 140px;
    /* On le pousse vers la droite du trombone */
}

/* On inverse aussi la petite flèche de la bulle */
#frakto-wrapper.force-left .speech-bubble::after {
    right: auto;
    left: -12px;
    /* La flèche passe à gauche de la bulle */
    border-width: 12px 12px 12px 0;
    /* On inverse le triangle */
    border-color: transparent #e0c060 transparent transparent;
}

/* Ajustement des couleurs de flèche pour les états succès/erreur en mode gauche */
#frakto-wrapper.force-left .bubble-success::after {
    border-color: transparent var(--success) transparent transparent;
}

#frakto-wrapper.force-left .bubble-error::after {
    border-color: transparent var(--warning) transparent transparent;
}

#speech-bubble {
    pointer-events: auto;
}

#frakto-svg {
    overflow: visible;
}

.wire-style {
    fill: none;
    stroke: url(#metalGrad);
    /* Le dégradé défini dans le HTML */
    stroke-width: 12;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eye-style {
    fill: white;
    stroke: black;
    stroke-width: 2;
}

.pupil-style {
    fill: black;
}

.eyebrow-style {
    fill: none;
    stroke: black;
    stroke-width: 5;
    stroke-linecap: round;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.floating {
    animation: float 4s ease-in-out infinite;
}

@keyframes jump {
    0% {
        transform: scale(1) translateY(0);
    }

    30% {
        transform: scale(1.1) translateY(-40px) rotate(-5deg);
    }

    50% {
        transform: scale(0.9) translateY(0);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.jumping {
    animation: jump 0.8s ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px) rotate(-8deg);
    }

    40% {
        transform: translateX(8px) rotate(8deg);
    }

    60% {
        transform: translateX(-4px) rotate(-4deg);
    }

    80% {
        transform: translateX(4px) rotate(4deg);
    }
}

.shaking {
    animation: shake 0.5s ease-in-out;
}

/* Bulle de dialogue style post-it jaune */
.speech-bubble {
    background: #fff9e6;
    border: 2px solid #e0c060;
    border-radius: 10px;
    padding: 15px;
    position: absolute;
    bottom: 170px;
    /* Position par rapport au trombone */
    right: 40px;
    width: 280px;
    /* Assez large pour les explications */
    text-align: left;
    font-size: 1rem;
    color: #333;
    visibility: visible;
    opacity: 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
    z-index: 1001;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -12px;
    right: 50px;
    border-width: 12px 12px 0;
    border-style: solid;
    border-color: #e0c060 transparent;
    display: block;
    width: 0;
}

/* États de la bulle */
.bubble-success {
    border-color: var(--success);
    background: #e0f2f1;
}

.bubble-success::after {
    border-color: var(--success) transparent;
}

.bubble-error {
    border-color: var(--warning);
    background: #fff0f5;
}

.bubble-error::after {
    border-color: var(--warning) transparent;
}