.symbol{
    display:inline-block;
}
.symbol.verb,
.symbol.adverb{
    display: block;
    width: 300px;
    height: fit-content;
    border-radius: 3px;
    padding:0;
    border: solid 2px black;
    border:none;
}
.symbol.verb svg,
.symbol.adverb svg{
    overflow: visible;
}
.symbol.adverb{
    transform: translate(-50px);
}
.verb-adverb{
    --tv:200px;
    --speed:3s;
}

/* animation normale du verb */
.verb-adverb:has(.symbol.verb:hover) .symbol.verb svg{
    animation: slide-in var(--speed) linear infinite alternate;
}

/* l’adverb modifie le comportement */
.verb-adverb:has(.symbol.adverb:hover){
    --tv:100px;
    --speed:1s;
}

/* quand on hover l’adverb → le verb bouge */
.verb-adverb:has(.symbol.adverb:hover) .symbol.verb svg{
    animation: slide-in var(--speed) linear infinite alternate;
}

/* animation de l’adverb */
.symbol.verb:hover svg{
    --tv:200px;
    animation: slide-in 2s linear infinite alternate;
}

@keyframes slide-in {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--tv)); }
}

.verb-adverb {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  --tv: 200px;   /* déplacement normal du verb */
}

/* Verbe normal (hover verb) */
.verb-adverb:has(.symbol.verb:hover) .symbol.verb svg {
  animation: slide-verb-normal 3s ease-in-out infinite alternate;
}

/* Adverb hover → verb change de comportement */
.verb-adverb:has(.symbol.adverb:hover) .symbol.verb svg {
  animation: slide-verb-adverb 1s ease-in-out infinite alternate;
}

/* Animation de l’adverb */
.symbol.adverb:hover svg {
  animation: slide-adverb 2s ease-in-out infinite alternate;
}

/* Keyframes */
@keyframes slide-verb-normal {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(50%); }
  50%  { transform: translateX(100%); }
  75%  { transform: translateX(50%); }
  100% { transform: translateX(0); }
}

@keyframes slide-verb-adverb {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(80%); }
  60%  { transform: translateX(100%); }
  80%  { transform: translateX(80%); }
  100% { transform: translateX(0); }
}

@keyframes slide-adverb {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(50%); }
  50%  { transform: translateX(100%); }
  75%  { transform: translateX(50%); }
  100% { transform: translateX(0); }
}
.symbol.symbol.interjection svg,
.symbol.preposition svg path,
.symbol.conjonction svg rect,
.symbol.verb svg circle,
.symbol.adverb svg circle {
  filter: drop-shadow(15px 30px 20px rgba(0,0,0,0.3));
}
.symbol.noun{
    position: relative;
    display: inline-block;
}

/* nuage de poussière */
.symbol.noun::after{
    content:"";
    position:absolute;
    bottom:-8px;
    left:50%;
    width:20px;
    height:10px;
    background:rgba(120,120,120,0.5);
    border-radius:50%;
    filter: blur(4px);
    transform: translateX(-50%) scale(0);
    opacity:0;
}
/* particules */
.symbol.noun::before{
    content:"";
    position:absolute;
    bottom:-6px;
    left:50%;
    width:6px;
    height:6px;
    background:rgba(140,140,140,0.7);
    border-radius:50%;
    filter: blur(2px);
    transform: translateX(-50%) scale(0);
    opacity:0;
}
/* animation au hover */
.symbol.noun:hover::after{
    animation:poussiere 0.7s ease-out;
}
.symbol.noun:hover::before{
    animation:particules 0.7s ease-out;
}
@keyframes poussiere{
    0%{
        transform:translateX(-50%) scale(0);
        opacity:0;
    }
    30%{
        transform:translateX(-50%) scale(1.8);
        opacity:0.7;
    }
    100%{
        transform:translateX(-50%) scale(3);
        opacity:0;
    }
}
@keyframes particules{
    0%{
        transform:translateX(-50%) scale(0);
        opacity:0;
    }
    40%{
        transform:translateX(-120%) translateY(-4px) scale(1.5);
        opacity:0.8;
    }
    100%{
        transform:translateX(-200%) translateY(-10px) scale(1);
        opacity:0;
    }
}
.symbol.noun:hover svg,
.symbol.noun-proper:hover svg{
    animation:impact 0.25s ease;
}

@keyframes impact{
    0%{transform:translateY(0);}
    40%{transform:translateY(5px);}
    70%{transform:translateY(-1px);}
    100%{transform:translateY(0);}
}
.symbol.noun-proper{
    position:relative;
}

/* faisceau lumineux */
.symbol.noun-proper::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:40%;
    width:20px;
    height:120px;

    background:linear-gradient(
        to right,
        rgba(255,215,0,0.6),
        rgba(255,215,0,0.2),
        transparent
    );

    transform:translateX(-50%) scaleY(0);
    transform-origin:bottom;

    filter:blur(6px);
    opacity:0;
}

.symbol.noun-proper:hover::before{
    animation:lumiere 0.2s ease-out;
}

@keyframes lumiere{
    0%{
        transform:translateX(-50%) scaleY(0);
        opacity:0;
    }
    40%{
        transform:translateX(-50%) scaleY(1);
        opacity:1;
    }
    100%{
        transform:translateX(-50%) scaleY(1.2);
        opacity:0;
    }
}

.symbol.preposition svg{
    transform-origin: 50% 50%;
    overflow: visible;
}

.symbol.preposition:hover svg{
    animation: lune-balance 1.2s ease-in-out infinite;
}

@keyframes lune-balance{
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-12deg); } /* vers le word de gauche */
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(12deg); }  /* vers le word de droite */
    100% { transform: rotate(0deg); }
}
.symbol.interjection svg{
    transform-origin: 50% 100%;
}

.symbol.interjection:hover svg{
    animation: rebond 0.6s ease infinite;
}

@keyframes rebond{
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-15px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}
.symbol.conjonction{
    position: relative;
    overflow: visible;
}

.symbol.conjonction svg{
    left: 0;
    overflow: visible;

}

.symbol.conjonction:hover svg{
    animation: liaison 1.5s ease-in-out infinite alternate;
}

@keyframes liaison{
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}
.verb-adverb,
.derive-noun{
    display:flex;
    align-items:flex-end;
    gap:10px;
}


.symbol.adjective svg{
    transition: transform 0.4s ease;
    transform-origin: 50% 100%;
}
.symbol.adjectif:hover svg{
    transform: translate(-45px,-33px) scale(1.1) rotate(-60deg);
}
@keyframes rebond{
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-15px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.symbol.determinant svg{
    transform: translateX(-70px);
    transition: transform 0.4s ease;
}

.symbol.determinant:hover svg{
    transform: translateX(0px);
}


.symbol.pronoun svg{
    opacity:0.8;
    transition: opacity 0.4s ease;
}

.symbol.pronoun svg{
    transition: transform 0.4s ease;
}

.symbol.pronoun:hover svg{
    opacity:1;
}

.symbol.pronoun:hover svg{
    transform: translateX(-100px);
}

/* zone symbols */
.symbols{
    display:flex;
    justify-content:center;   /* centrage horizontal */
    flex-wrap:wrap;           /* passe à la ligne si besoin */
    gap:14px;
    margin-bottom:25px;
}

/* taille des svg */
svg.montessori{
    width:100px;
    height:100px;
}

/* boutons symbols */
.function-btn,
.symbol-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:70px;
    height:70px;

    background:white;
    border:3px solid #222;
    border-radius:18px;

    cursor:pointer;

    box-shadow:
        0 6px 0 #222,        /* relief BD */
        0 8px 12px rgba(0,0,0,0.25);

    transition:
        transform 0.15s,
        box-shadow 0.15s,
        background 0.2s;
}
.function-btn{
    width: fit-content;
    min-width: 70px;
    font-weight:bold;
    font-size: medium;
    margin:0px;
     padding:5px;
    
}

/* hover : bouton vivant */
.function-btn:hover,
.symbol-btn:hover{
    transform:translateY(-2px);
    background-color: rgba(255,255,255,0.5);
    box-shadow:
        0 8px 0 #222,
        0 10px 14px rgba(0,0,0,0.25);
}

/* clic */
.function-btn:active,
.symbol-btn:active{
    transform:translateY(4px);
    box-shadow:
        0 2px 0 #222,
        0 3px 6px rgba(0,0,0,0.2);
}

/* bouton sélectionné */
.function-btn.selected,
.symbol-btn.selected{
    background:#ffffff;
    border-color:#9c9c9c;

    transform:translateY(4px);
    box-shadow:
        0 2px 0 #767676,
        inset 0 3px 6px rgba(0,0,0,0.25);
}

/* taille des symbols dans les boutons */
.symbol-btn svg{
    width:50px;
    height:50px;
    display:block;
    pointer-events:none; /* évite que le svg bloque le clic */
}

/* phrases */
.line{
display:flex;
gap:0px;
margin: auto;
width: fit-content;
margin-bottom:18px;
flex-wrap:wrap;

}

/* bloc word */
.wordbloc{
display:flex;
flex-direction:column;
align-items:center;
min-width:33px;

width: fit-content;
}

/* zone symbol au-dessus du word */
.zoneSymbol{
height:35px;
width: 100%;
background-color: ivory;
display:flex;
align-items:center;
justify-content:center;
}

/* taille symbol au-dessus du word */
.zoneSymbol svg{
width:28px;
height:28px;
display:block;
}

/* word */
.wordbloc .word{
cursor:pointer;
padding:2px 3px;
width: fit-content;
}
/* correction */

.corrMot{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    margin-right:10px;
}
.corrSW{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    
    margin-right:0px; 
    padding: 0;
}
.corrSym{
    height: 28px;
}
.corrSym svg{
    width:28px;
    height:28px;
    display:block;
}