body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f5f5f5;
    color: #333;
}
.page {
    display: none;
    padding: 20px;
    max-width: 600px;
    margin: auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.active { display: block; }
h1, h2 { text-align: center; }
.answers { margin-top: 10px; }
.noteCorrection{
    color: black;
    font-style: italic;
}
.noteCorrection{display:none}
.noteCorrection.visible{
    display:block;
    min-height: 25px;
}
.annotationAutre.masque{display:none;}
.question{
    display: flex;
    align-items: center;
}
.answer>.note{
    padding-top:10px;
}
.answer {
    justify-content: left;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin: 8px 0;
    transition: background 0.2s, font-weight 0.2s;
}
.answer input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.3);
}
.answer.selected {
    font-weight: bold;
    background: #e8f0ff;
}
.answer.correct {
    background: #c8f7c5;
    border-color: #28a745;
    color: #155724;
}
.answer.wrong {
    background: #f7c5c5;
    border-color: #dc3545;
    color: #721c24;
}
.mark {
    font-size: 20px;
    margin-left: 10px;
    background:unset !important;
}
.correction{
    display:none
}
.correction.active{
    display:inline;
    margin-left:30px;

    /*width: 20px;
/*height: 20px;
/*appearance: none;      /* retire le style par défaut */
/*border: 2px solid red; /* bordure rouge */
/*border-radius: 4px;    /* coins arrondis, optionnel */
/*background-color: white;
/*cursor: pointer;
/*vertical-align: middle;*/
}
checkbox:checked.correction{
    appearance: unset;
    border: 2px solid green;
}
.buttons {
    text-align: center;
    margin-top: 20px;
}
button, a.button {
    padding: 10px 15px;
    margin: 5px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    text-wrap: nowrap;
}
img{
    max-width:min(95vw, 95%);
    max-height:50vh;
    width:auto;
}
button.primary,a.button.primary { background: #007bff; color: white; }
button.secondary,a.button.secondary{ background: #6c757d; color: white; }
button.success,a.button.success { background: #28a745; color: white; }
button:disabled, a.button:disabled { background: #ccc; cursor: not-allowed; }

button.result_juste, a.button.result_juste{ background-color: green; color:white;}
button.result_partiel, a.button.result_partiel{background-color: orange;color:white;}
button.result_faux, a.button.result_faux{background-color: red;color:white;}
button.result_NR, a.button.result_NR{background-color: black;color:white;}
button.result_annule, a.button.result_annule{background-color: grey;color:white;}

.tagtoadd span.select2 {
  width: 100% !important;
}

.answer div.question .choix p:nth-of-type(1), .noteCorrection .annotation .text p:nth-of-type(1){
    display:inline;
}

.annotation .auteur{
    font-weight: bold;
}
.annotation{
    /*width:75%;*/
}

/** Gestion de l'affichage du formulaire signaler */
/* Le parent doit être le point de référence */
.question, .noteCorrection{
    position: relative;
}

/* Le drapeau est déjà en haut à droite normalement */
.question-flag-trigger, .annoter-trigger {
    position: absolute;
    top: 5px;
    right: 5px;

    font-size: 1.2em;
    z-index: 10;
    filter: grayscale(1); /* Par défaut un peu gris */
    transition: transform 0.2s, filter 0.2s;
}
.blocQuestion{
    position:relative;
}

.question-flag-trigger:hover, .annoter-trigger:hover{
    transform: scale(1.2);
    filter: grayscale(0); /* Rouge vif au survol */
}
.signalement-existant{
    filter: grayscale(0) !important;
}

/* Le bloc en surimpression */
.trigger-content {
    display: none; /* Masqué par défaut */
    position: absolute;
    top: 30px;    /* Ajuste selon la hauteur de ton drapeau pour qu'il soit juste dessous */
    right: 0;     /* Aligné à droite du bloc .question */
    width: 250px; /* Largeur de la bulle */
    z-index: 1000; /* Passe par-dessus tout le reste */
    
    /* Style pour l'effet "bulle" */
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 15px;
    border-radius: 4px;

    clear: both;
    width: 100%;
    box-sizing: border-box;

    color:black;
}

/* Optionnel : une petite flèche vers le haut */
.question-flag-content::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 10px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ccc;
}

ul.liste_signalement li{
    list-style-type:"🚩";
    padding-left: 10px; /* Un peu d'espace entre le drapeau et le texte */
}

ul.liste_signalement li::marker {
    font-size: 0.8em;
}

.question-flag-content li form div, .question-flag-content li form div button, .question-flag-content li form{
    display:inline;
}

.question-flag-content li form div button{
    padding: 0 !important;
}


/** 
 * Modification d'affichage du formulaire ANNOTER 
 */
.annoter.trigger-content .editer-groupe{
    display: grid;
    /* Colonne 1 : prend tout l'espace (1fr) | Colonne 2 : s'adapte au contenu (auto) */
    grid-template-columns: 1fr auto;
    /* On définit un espacement entre les colonnes et les lignes */
    gap: 10px 30px;
    align-items: start;
}

.annoter.trigger-content .saisie_textarea{
    width:75%; /* réduction du textarea à 75% de la largeur*/
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
}

.annoter.trigger-content  .saisie_case {
    grid-column: 2;
    /* On réutilise ta configuration Flexbox pour mettre la case avant le label */
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    white-space: nowrap; /* Empêche le texte "public" de passer à la ligne */
    margin:0;
}
.annoter.trigger-content  .editer-groupe .saisie_case:nth-of-type(2) {
    align-self: end;
}
.annoter.trigger-content  .editer-groupe .saisie_case:nth-of-type(3) {
    align-self: start;
}


/* gestion case à cocher et son label => 1 seule ligne et label avant */
.annoter.trigger-content .editer.saisie_case .choix {
    display: inline-flex;
    padding: 0;
    margin: 0;
}
.annoter.trigger-content .editer.saisie_case .editer-label{
    display: inline-block;
    margin-bottom: 0; /* Enlever la marge du bas habituelle */
    cursor: pointer;
}
.annoter.trigger-content .editer.saisie_case {
    display: flex;
    /* row-reverse inverse l'ordre d'affichage : 
       le 2ème élément (div.choix) passe à gauche, 
       le 1er élément (label) passe à droite */
    flex-direction: row-reverse;
    /* Aligne le tout à gauche de la page */
    justify-content: flex-end;
    /* Aligne verticalement la case et le texte */
    align-items: center;
    gap: 8px; /* Espace entre la case et le texte */
    margin: 0;
}

/* Mise en évidence pour la recherche */
.evidence{
    background-color:yellow;
}