/* ============================================
   FRANCAIS.CSS - Styles spécifiques aux exercices de Français
   Thème bleu : --couleur-primaire: #1a365d
   Contient les styles pour les 25 types d'exercices de français
   (texte à trous, copie seyes, nuage de mots, conjugaison, etc.)
   ============================================ */

/* Surcharge des couleurs pour la vue Français (thème bleu) */
#francais-view {
    --couleur-primaire: #1a365d;
    --couleur-secondaire: #1e40af;
}

/* Zone de texte source (textarea pour le texte de référence) */
.zone-texte-container {
    margin-bottom: 1.5rem;
}

.zone-texte-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--couleur-primaire);
    font-size: 0.95rem;
}

.zone-texte {
    width: 100%;
    min-height: 150px;
    padding: 1rem;
    border: 2px solid var(--couleur-bordure);
    border-radius: 8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--couleur-texte);
    background: var(--couleur-papier);
    resize: vertical;
    transition: var(--transition);
}

.zone-texte:focus {
    outline: none;
    border-color: var(--couleur-secondaire);
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
}

.zone-texte::placeholder {
    color: var(--couleur-texte-clair);
    font-style: italic;
}

/* Toggle afficher/masquer le texte source */
.toggle-texte-source {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.toggle-texte-source input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--couleur-primaire);
}

.toggle-label {
    color: var(--couleur-texte-clair);
    font-weight: 500;
}

/* Texte source affiché sur la feuille */
.texte-source-feuille {
    line-height: 2;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--couleur-bordure);
}

.texte-source-feuille:empty {
    display: none;
}

/* Options d'affichage par exercice */
.options-exercice {
    background: white;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    border: 1px solid var(--couleur-bordure);
}

.options-exercice label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--couleur-primaire);
    margin-bottom: 0.4rem;
}

.options-exercice .option-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.options-exercice select {
    flex: 1;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.options-exercice input[type="number"] {
    width: 72px;
    min-width: 72px;
    padding: 0.4rem 0.3rem;
    font-size: 0.85rem;
    text-align: center;
}

.unite-px {
    font-size: 0.8rem;
    color: var(--couleur-texte-clair);
}

/* Zone de texte cliquable pour texte à trous */
.texte-cliquable {
    line-height: 2;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
    border: 1px solid var(--couleur-bordure);
}

.texte-cliquable .mot {
    display: inline;
    cursor: pointer;
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
    transition: var(--transition);
}

.texte-cliquable .mot:hover {
    background: var(--couleur-secondaire);
    color: white;
}

.texte-cliquable .mot.masque {
    background: var(--couleur-accent);
    color: white;
    text-decoration: line-through;
}

.config-info {
    font-size: 0.8rem;
    color: var(--couleur-texte-clair);
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: rgba(26, 54, 93, 0.05);
    border-radius: 4px;
    border-left: 3px solid var(--couleur-primaire);
}

.mots-masques-liste {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--couleur-bordure);
}

.mots-masques-titre {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--couleur-primaire);
    margin-bottom: 0.5rem;
}

.mots-masques-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mot-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--couleur-accent);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

.mot-tag:hover {
    background: #9b2c2c;
}

.mot-tag::after {
    content: '×';
    font-weight: bold;
}

/* Zone d'aperçu (feuille blanche) - ratio 2/3 */
.zone-apercu {
    flex: 2;
    background: var(--couleur-fond);
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
}

.feuille-wrapper {
    transform-origin: top center;
    transition: transform 0.3s ease;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.feuille {
    background: var(--couleur-papier);
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    padding: 20mm;
    box-shadow: var(--ombre-douce);
    border-radius: 4px;
    position: relative;
    box-sizing: border-box;
}

.feuille::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-primaire), var(--couleur-accent));
    border-radius: 4px 4px 0 0;
}

/* Header de la feuille avec Nom/Date (comme Maths) */
.feuille-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--couleur-primaire);
}

.feuille-titre-principal {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--couleur-primaire);
    margin-bottom: 0.3rem;
}

.feuille-info {
    text-align: right;
    font-size: 0.95rem;
    line-height: 1.6;
}

.feuille-info strong {
    color: var(--couleur-primaire);
    font-weight: 600;
}

.feuille-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    color: var(--couleur-texte-clair);
    text-align: center;
}

.feuille-vide-icone {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.feuille-vide h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--couleur-primaire);
    opacity: 0.7;
}

.feuille-vide p {
    font-size: 0.95rem;
    max-width: 280px;
}

/* Conteneur des exercices */
.exercices-container {
    display: none;
}

.exercices-container.visible {
    display: block;
}

/* Style d'un exercice sur la feuille */
.exercice-feuille {
    /* Aération (v0.14.1) : 0.3rem était trop serré pour une feuille remplie au crayon —
       l'enfant devait pouvoir repérer d'un coup d'œil où un exercice se termine. */
    margin-bottom: 0.9rem;
    padding-top: 0.35rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.exercice-feuille:last-child {
    border-bottom: none;
}

.exercice-feuille:last-child {
    margin-bottom: 0;
}

.exercice-feuille-titre {
    /* Une seule famille de police pour tout le document (v0.14.1) : le serif isolé
       du titre jurait avec le sans-serif des consignes et du reste de la feuille. */
    font-family: inherit;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--couleur-primaire);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.exercice-numero {
    background: var(--couleur-primaire);
    color: white;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    flex-shrink: 0;
}

.exercice-icone {
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Label catégorie (Grammaire, Vocabulaire...) petit, gris, à droite du titre */
.exercice-type-label {
    font-size: 0.7em;
    font-weight: 400;
    color: #888;
    white-space: nowrap;
    margin-left: auto;
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}

.exercice-feuille-contenu {
    line-height: 1.6;
}

/* Style pour l'exercice de copie avec lignes Seyes */
.ligne-copie {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
}

.ligne-copie-mot {
    min-width: 100px;
    padding-right: 0.5rem;
    display: flex;
    align-items: flex-end;
    height: 3em;
    padding-bottom: calc(1em + 2px);
}

.mot-dans-seyes {
    font-weight: 600;
    line-height: 1;
}

.ligne-copie-seyes {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.seyes-zone {
    width: 100%;
    height: 2em;
    position: relative;
    background: 
        linear-gradient(to bottom, 
            transparent 0%, 
            #a0b8d8 0%, 
            #a0b8d8 3%, 
            transparent 3%, 
            transparent 24%, 
            #a0b8d8 24%, 
            #a0b8d8 27%, 
            transparent 27%, 
            transparent 49%, 
            #a0b8d8 49%, 
            #a0b8d8 52%, 
            transparent 52%, 
            transparent 73%, 
            #8b44ac 73%, 
            #8b44ac 77%, 
            transparent 77%, 
            transparent 98%, 
            #a0b8d8 98%, 
            #a0b8d8 100%
        );
    background-size: 100% 100%;
    border-left: 2px solid #c0392b;
    padding-left: 3px;
}

.seyes-zone-boucles {
    width: 100%;
    height: 1em;
    position: relative;
    background: 
        linear-gradient(to bottom, 
            transparent 0%, 
            transparent 47%, 
            #a0b8d8 47%, 
            #a0b8d8 53%, 
            transparent 53%, 
            transparent 100%
        );
    background-size: 100% 100%;
    border-left: 2px solid #c0392b;
    padding-left: 3px;
}

/* Style pour le nuage de mots */
.mots-a-trouver {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--couleur-bordure);
}

.mot-a-trouver {
    font-weight: 600;
    color: var(--couleur-primaire);
}

.mot-a-trouver:not(:last-child)::after {
    content: ' - ';
    color: var(--couleur-texte-clair);
}

.nuage-mots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--couleur-fond);
    border-radius: 8px;
    border: 1px dashed var(--couleur-bordure);
    max-width: 100%;
    justify-content: center;
}

.nuage-mot {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    background: white;
    border: 1px solid var(--couleur-bordure);
    text-align: center;
    white-space: nowrap;
}


.chasse-nature {
    margin-bottom: 1.5rem;
}

.chasse-nature-titre {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--couleur-primaire);
}

.chasse-nature-lignes {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.chasse-nature-ligne {
    border-bottom: 2px solid var(--couleur-texte);
    height: 2em;
}

/* Style pour l'exercice chasse aux fonctions */
.fonctions-mots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.fonction-mot {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    background: white;
    border: 2px solid var(--couleur-bordure);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.fonction-mot:hover {
    border-color: var(--couleur-secondaire);
    background: var(--couleur-fond);
}

.fonction-mot.active {
    background: var(--couleur-accent);
    border-color: var(--couleur-accent);
    color: white;
}

/* Style pour l'export PDF */
@media print {
    .feuille {
        box-shadow: none;
        margin: 0;
        padding: 15mm;
        width: 210mm !important;
    }
    
    /* Masquer l'indicateur de pages à l'impression */
    #nb-pages-indicator-fr {
        display: none !important;
    }
    
    .exercice-feuille {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    .reconnaissance-grille,
    .nuage-mots,
}

.exercice-feuille {
    page-break-inside: avoid;
    break-inside: avoid;
}

.exercice-feuille-contenu {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Style pour les étiquettes à découper */

.etiquette {
    padding: 0.5rem 0.8rem;
    border: 2px dashed var(--couleur-texte);
    border-radius: 4px;
    background: white;
    display: inline-block;
}

/* Style pour l'exercice reconnaissance */
.reconnaissance-type {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.reconnaissance-type label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-weight: 500;
}

.reconnaissance-inputs {
    display: flex;
    gap: 0.5rem;
}

.input-reconnaissance {
    width: 80px;
    padding: 0.5rem;
    border: 2px solid var(--couleur-bordure);
    border-radius: 6px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    text-transform: lowercase;
}

.input-reconnaissance:focus {
    outline: none;
    border-color: var(--couleur-primaire);
}

.reconnaissance-cibles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--couleur-bordure);
}

.reconnaissance-cible {
    padding: 0.4rem 0.8rem;
    background: var(--couleur-primaire);
    color: white;
    border-radius: 4px;
    font-weight: 600;
}

.reconnaissance-grille {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    max-width: 100%;
    justify-content: center;
}

.reconnaissance-case {
    min-width: 2.5em;
    height: 2.5em;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    background: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Style pour l'exercice syllabes */
.syllabes-inputs {
    display: flex;
    gap: 0.5rem;
}

.input-syllabe {
    width: 80px;
    padding: 0.5rem;
    border: 2px solid var(--couleur-bordure);
    border-radius: 6px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}

.input-syllabe:focus {
    outline: none;
    border-color: var(--couleur-primaire);
}

.syllabes-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.syllabe-case {
    min-width: 3em;
    padding: 0.5rem 1rem;
    border: 2px solid var(--couleur-texte);
    border-radius: 6px;
    background: white;
    text-align: center;
    font-weight: 600;
}

.syllabes-lignes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.syllabe-ligne {
    border-bottom: 2px solid var(--couleur-bordure);
    height: 2em;
    position: relative;
}

/* Style pour l'exercice mots mêlés */
.motsmeles-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.motsmeles-mots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.motsmeles-mot {
    padding: 0.3rem 0.6rem;
    background: var(--couleur-primaire);
    color: white;
    border-radius: 4px;
    font-weight: 600;
}

.motsmeles-grille {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.2rem;
    justify-content: center;
}

.motsmeles-case {
    width: 2.5em;
    height: 2.5em;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    text-transform: uppercase;
}

/* Style pour l'exercice dictionnaire */
.dictionnaire-mot-container {
    margin-bottom: 1.5rem;
}

.dictionnaire-mot {
    font-weight: 600;
    font-size: 1.2em;
    margin-bottom: 0.5rem;
    color: var(--couleur-primaire);
    /* Interlignage cursive (v0.11.23) : évite que les jambages descendants ne débordent. */
    line-height: 1.9;
}

.dictionnaire-lignes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dictionnaire-ligne {
    border-bottom: 2px solid var(--couleur-texte);
    height: 1.5em;
}

/* Style pour l'exercice vocabulaire */
.vocabulaire-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.vocabulaire-type {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    background: white;
    border: 2px solid var(--couleur-bordure);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.vocabulaire-type:hover {
    border-color: var(--couleur-secondaire);
    background: var(--couleur-fond);
}

.vocabulaire-type.active {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: white;
}

.vocabulaire-mot-container {
    margin-bottom: 1.5rem;
}

.vocabulaire-mot {
    font-weight: 600;
    font-size: 1.2em;
    margin-bottom: 0.5rem;
    color: var(--couleur-primaire);
    /* Interlignage cursive (v0.11.23) : évite que les jambages descendants ne débordent. */
    line-height: 1.9;
}

.vocabulaire-lignes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vocabulaire-ligne {
    border-bottom: 2px solid var(--couleur-texte);
    height: 1.5em;
}

/* Style pour l'exercice compter les syllabes */
.comptersyllabes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.comptersyllabes-mot-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--couleur-fond);
    border-radius: 8px;
    width: calc(33.333% - 0.67rem);
    box-sizing: border-box;
}

.comptersyllabes-mot {
    font-size: 1.2em;
    font-weight: 600;
    flex: 1;
    /* Interlignage cursive (v0.11.23) : évite que les jambages descendants ne débordent. */
    line-height: 1.9;
}

.comptersyllabes-case {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--couleur-texte);
    border-radius: 4px;
    flex-shrink: 0;
}

/* Style pour l'exercice localiser un son */
.localiserson-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.localiserson-mot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--couleur-fond);
    border-radius: 8px;
    width: calc(33.333% - 0.67rem);
    box-sizing: border-box;
}

.localiserson-mot {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 0.5rem;
    /* Interlignage large (v0.11.23) : en police cursive scolaire, les jambages descendants
       (f, z, g, j…) débordaient sous le mot et recouvraient les cases numérotées en dessous. */
    line-height: 1.9;
}

.localiserson-cases {
    display: flex;
    gap: 0.3rem;
}

.localiserson-case {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--couleur-texte);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    color: var(--couleur-texte-clair);
}

.localiserson-consigne {
    font-size: 0.85em;
    color: var(--couleur-primaire);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Style pour les inputs de séries (Intrus, Accords, Transformer, Ponctuation) */
.intrus-series,
.accords-phrases,
.transformer-phrases,
.ponctuation-phrases {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.intrus-serie-input input,
.accord-phrase-input input,
.transformer-phrase-input input,
.ponctuation-phrase-input input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    font-size: 0.9rem;
}

.intrus-serie-input input:focus,
.accord-phrase-input input:focus,
.transformer-phrase-input input:focus,
.ponctuation-phrase-input input:focus {
    outline: none;
    border-color: var(--couleur-primaire);
}

/* Style pour l'exercice Intrus sur la feuille */
.intrus-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.intrus-serie {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--couleur-fond);
    border-radius: 8px;
}

.intrus-mots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 1;
}

.intrus-mot {
    padding: 0.4rem 0.8rem;
    background: white;
    border: 2px solid var(--couleur-bordure);
    border-radius: 6px;
}

.intrus-reponse {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.intrus-reponse-label {
    font-size: 0.85em;
    color: var(--couleur-texte-clair);
}

.intrus-ligne {
    width: 100px;
    border-bottom: 2px solid var(--couleur-texte);
    height: 1.5em;
}

/* Style pour l'exercice Accords sur la feuille */
.accords-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.accord-phrase-container {
    padding: 0.75rem 1rem;
    background: var(--couleur-fond);
    border-radius: 8px;
}

.accord-consigne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.accord-phrase-texte {
    flex: 1;
}

.accord-adjectif {
    font-weight: 600;
    color: var(--couleur-primaire);
    white-space: nowrap;
}

.accord-ligne {
    border-bottom: 2px solid var(--couleur-texte);
    height: 2em;
    margin-top: 0.5rem;
}

/* Style pour l'exercice Transformer sur la feuille */
.transformer-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transformer-phrase-container {
    padding: 0.75rem 1rem;
    background: var(--couleur-fond);
    border-radius: 8px;
}

.transformer-original {
    margin-bottom: 0.5rem;
}

.transformer-reponse {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.transformer-fleche {
    color: var(--couleur-primaire);
    font-weight: 600;
}

.transformer-ligne {
    border-bottom: 2px solid var(--couleur-texte);
    height: 1.5em;
    flex: 1;
}

/* Style pour l'exercice Ponctuation sur la feuille */
.ponctuation-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ponctuation-phrase-container {
    padding: 0.75rem 1rem;
    background: var(--couleur-fond);
    border-radius: 8px;
    line-height: 2;
}

/* Style pour l'exercice Production d'écrit */
.production-phrases {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.production-phrase-input input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    font-size: 0.9rem;
}

.production-phrase-input input:focus {
    outline: none;
    border-color: var(--couleur-primaire);
}

.production-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.production-item {
    padding: 0.75rem 1rem;
    background: var(--couleur-fond);
    border-radius: 8px;
}

.production-debut {
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.production-lignes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.production-ligne {
    border-bottom: 2px solid var(--couleur-texte);
    height: 1.8em;
}

/* Style pour l'exercice Dictée préparée */
.dictee-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.dictee-mot-container {
    padding: 0.5rem 1rem;
    background: var(--couleur-fond);
    border: 2px solid var(--couleur-bordure);
    border-radius: 8px;
    text-align: center;
}

.dictee-mot {
    font-weight: 600;
    color: var(--couleur-primaire);
    font-size: 1.1em;
}

/* Style pour l'exercice Illustre le texte */
.illustration-container {
    width: 100%;
}

.illustration-cadre {
    width: 100%;
    border: 3px solid var(--couleur-texte);
    border-radius: 8px;
    background: white;
    box-sizing: border-box;
}

/* Toggle pour afficher/masquer le texte source */
.toggle-texte-source {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.toggle-texte-source input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--couleur-primaire);
}

.toggle-label {
    color: var(--couleur-texte-clair);
    font-weight: 500;
}

/* Style pour l'exercice Mélange la phrase */
.melange-mots-supplementaires {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.melange-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.melange-phrase {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.melange-mot {
    padding: 0.5rem 1rem;
    background: var(--couleur-fond);
    border: 2px solid var(--couleur-bordure);
    border-radius: 8px;
    font-weight: 500;
}

.melange-recopie {
    margin-top: 1rem;
}

.melange-recopie-titre {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--couleur-primaire);
}

.melange-lignes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.melange-ligne {
    border-bottom: 2px solid var(--couleur-texte);
    height: 1.8em;
}

/* Style pour le drag & drop des exercices */
.exercice-feuille {
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s;
}

.exercice-feuille:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.exercice-feuille.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.exercice-feuille.drag-over {
    border-top: 3px solid var(--couleur-primaire);
    margin-top: -3px;
}

.exercice-feuille-titre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.drag-handle {
    cursor: grab;
    color: var(--couleur-texte-clair);
    font-size: 1.2rem;
    padding: 0 0.25rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.exercice-feuille:hover .drag-handle {
    opacity: 1;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Style pour les boutons de niveau */
.niveau-btn {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    background: white;
    border: 2px solid var(--couleur-bordure);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
    font-size: 0.9rem;
}

.niveau-btn:hover {
    border-color: var(--couleur-secondaire);
    background: var(--couleur-fond);
}

.niveau-btn.active {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: white;
}

/* Style pour l'affichage des niveaux sur la feuille */
.titre-feuille-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.titre-feuille {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.titre-feuille-ligne {
    border-bottom: 3px solid var(--couleur-primaire);
    margin-bottom: 1rem;
}

/* Compteur de pages */
/* Menu des catégories */
.categories-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.categorie-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.6rem;
    background: white;
    border: 2px solid var(--couleur-bordure);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    flex: 1;
    min-width: 60px;
}

.categorie-btn:hover {
    border-color: var(--couleur-secondaire);
    background: var(--couleur-fond);
}

.categorie-btn.active {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: white;
}

.categorie-icon {
    font-size: 1.2rem;
}

.categorie-nom {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
}

/* Cacher les exercices par défaut et afficher selon catégorie */
/* Visibilité des exercices français : cachés par défaut, affichés par catégorie via JS */
#francais-view .exercice-item {
    display: none;
    margin-bottom: 0.5rem;
}

/* Exercice visible quand sa catégorie est sélectionnée */
#francais-view .exercice-item.visible {
    display: block;
}

/* Compact : cacher la description pour aligner avec les maths */
#francais-view .exercice-info p {
    display: none;
}

#francais-view .exercice-header {
    padding: 0.7rem 1rem;
}

.niveaux-feuille {
    display: flex;
    gap: 0.5rem;
}

.niveau-tag {
    padding: 0.3rem 0.6rem;
    color: white;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
}

.niveau-tag.cp { background: #e74c3c; }
.niveau-tag.ce1 { background: #f39c12; }
.niveau-tag.ce2 { background: #27ae60; }
.niveau-tag.cm1 { background: #3498db; }
.niveau-tag.cm2 { background: #9b59b6; }

/* Style des trous */
.trou {
    display: inline-block;
    background: #1a202c;
    color: white;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    margin: 0 0.1em;
    font-size: 0.7em;
    vertical-align: middle;
    font-weight: 600;
}

/* Zone des lignes de réponse pour les mots */
.trous-reponses {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--couleur-bordure);
}

.trou-reponse-ligne {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.trou-reponse-label {
    font-weight: 600;
    min-width: 60px;
    color: var(--couleur-primaire);
}

.trou-reponse-input {
    flex: 1;
    border-bottom: 2px solid var(--couleur-texte);
    height: 1.8em;
}

/* Responsive pour petits écrans */
@media (max-width: 1023px) {
    header {
        padding: 1rem 1.5rem;
    }

    header h1 {
        font-size: 1.4rem;
    }

    .panneau-config {
        padding: 1rem;
    }

    .zone-apercu {
        padding: 0.5rem;
    }

    .feuille {
        padding: 1.5rem;
        min-height: auto;
    }
}

/* Scrollbar personnalisée */
.panneau-config::-webkit-scrollbar {
    width: 6px;
}

.panneau-config::-webkit-scrollbar-track {
    background: var(--couleur-fond);
}

.panneau-config::-webkit-scrollbar-thumb {
    background: var(--couleur-bordure);
    border-radius: 3px;
}

.panneau-config::-webkit-scrollbar-thumb:hover {
    background: var(--couleur-texte-clair);
}
/* ===== EXERCICE FLUENCE ===== */

/* ===== CLASSES GRAMMATICALES ===== */
.classesgram-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0.5cm;
    padding: 0.3cm 0.5cm;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
}
.classesgram-legende-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85em;
    font-weight: 600;
}
.classesgram-legende-trait {
    display: inline-block;
    width: 2em;
    height: 0;
}
.classesgram-texte {
    line-height: 2.5;
    text-align: justify;
}
@media print {
    .classesgram-legende { border: 1px solid #999; background: #f5f5f5; }
}

/* ===== COPIE DIFFÉRÉE (bande à découper) ===== */
.copie-bande-decouper {
    margin-top: 1cm;
    border-top: 2px dashed #999;
    padding-top: 0.4cm;
}
.copie-bande-ciseaux {
    color: #999;
    font-size: 0.8em;
    margin-bottom: 0.3cm;
    letter-spacing: 0.1em;
}
.copie-bande-mots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5cm 1cm;
    font-size: 1.1em;
}
.copie-bande-mot {
    white-space: nowrap;
}

/* ===== BANQUE DE MOTS POUR TROUS ===== */
.trous-banque {
    margin-top: 0.6cm;
    padding: 0.4cm 0.5cm;
    border: 1.5px dashed #999;
    border-radius: 6px;
    background: #fafafa;
    font-size: 0.9em;
    line-height: 1.8;
}
.trous-banque-mot {
    font-style: italic;
}

/* ===== EXERCICE MOTS CROISÉS ===== */

/* Ligne mot/définition dans le panneau de config */
.motscrois-mot-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.4rem;
}
.motscrois-mot-input {
    flex: 0.4;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.motscrois-def-input {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Grille sur la feuille */
.motscrois-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.motscrois-grille {
    max-width: 100%;
    height: auto;
}
.motscrois-definitions {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85em;
    width: 100%;
    margin-top: 0.3cm;
}
.motscrois-col {
    flex: 1;
}
.motscrois-col strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9em;
}
.motscrois-def {
    margin-bottom: 0.2rem;
    line-height: 1.4;
}
.motscrois-num {
    font-weight: 700;
    color: var(--couleur-primaire, #6366f1);
    margin-right: 0.2em;
}

/* ===== EXERCICE ANAGRAMMES ===== */

.anagrammes-liste {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.anagramme-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.anagramme-num {
    font-weight: 600;
    min-width: 1.5em;
    font-family: Arial, sans-serif;
}
.anagramme-lettres {
    display: flex;
    gap: 3px;
}
.anagramme-lettre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border: 2px solid var(--couleur-primaire, #6366f1);
    border-radius: 4px;
    font-weight: 700;
    font-size: 1em;
    background: #f0f0ff;
    font-family: Arial, sans-serif;
}
.anagramme-fleche {
    font-size: 1.2em;
    color: #999;
    margin: 0 0.2em;
}
.anagramme-reponse {
    display: flex;
    align-items: center;
    gap: 2px;
}
.anagramme-indice {
    font-weight: 700;
    font-size: 1em;
    color: var(--couleur-primaire, #6366f1);
}
.anagramme-tiret {
    display: inline-block;
    width: 1.2em;
    text-align: center;
    border-bottom: 2px solid #333;
    margin: 0 1px;
    font-weight: 600;
    color: transparent;
}
@media print {
    .anagramme-lettre {
        border: 1.5px solid #333;
        background: #f5f5f5;
    }
}

/* ===== EXERCICE LECTURE COMPRÉHENSION ===== */

/* Ligne d'affirmation dans le panneau de config */
.comprehension-affirmation-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.4rem;
}
.comprehension-input {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    font-size: 0.85rem;
}
.comprehension-vf {
    width: 70px;
    padding: 0.4rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    font-size: 0.82rem;
}
.btn-suppr-affirmation {
    background: none;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    color: var(--couleur-texte-clair);
    font-size: 0.85rem;
}
.btn-suppr-affirmation:hover {
    background: #fee;
    color: #c00;
    border-color: #fcc;
}

/* Affirmations sur la feuille d'exercice */
.comprehension-affirmations {
    margin-top: 0.5rem;
}
.comprehension-ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    line-height: 1.5;
}
.comprehension-num {
    font-weight: 600;
    min-width: 1.5em;
    font-family: Arial, sans-serif;
}
.comprehension-texte {
    flex: 1;
}
.comprehension-cases {
    display: flex;
    gap: 0.8rem;
    flex-shrink: 0;
}
.comprehension-case {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 600;
}
.comprehension-carre {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid #333;
    border-radius: 2px;
}

/* ===== EXERCICE DICTÉE À TROUS ===== */

/* Texte de la dictée à trous */
.dictee-trous-texte {
    line-height: 2.2;
    text-align: justify;
}
.dictee-trou {
    display: inline-block;
    border-bottom: 2px solid #333;
    min-width: 3em;
    text-align: center;
    font-weight: 600;
    color: var(--couleur-primaire);
    letter-spacing: 0.15em;
    padding: 0 0.2em;
}
@media print {
    .dictee-trou {
        border-bottom: 1.5px solid #000;
        color: #333;
    }
}

/* Toggles (checkboxes) dans le panneau de config */
.fluence-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.fluence-toggles label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.fluence-toggles input[type="checkbox"] {
    accent-color: var(--couleur-primaire);
    width: 16px;
    height: 16px;
}

/* Boutons d'action (compléter / vider) */
.fluence-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.btn-fluence-action {
    flex: 1;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--couleur-primaire);
    border-radius: 6px;
    background: var(--couleur-primaire);
    color: white;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: var(--transition);
}
.btn-fluence-action:hover {
    opacity: 0.85;
}
.btn-fluence-action.btn-secondary {
    background: white;
    color: var(--couleur-texte);
    border-color: var(--couleur-bordure);
}
.btn-fluence-action.btn-secondary:hover {
    background: var(--couleur-fond);
}

/* Grille de fluence sur la feuille d'exercice */
.fluence-grille {
    display: grid;
    gap: 0;
    width: 100%;
    border-collapse: collapse;
}

/* Chaque cellule de la grille */
.fluence-cell {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border: 1px solid #d0d0d0;
    min-height: 1.8em;
    gap: 0.3rem;
}

/* Numéro du mot dans la cellule */
.fluence-num {
    font-size: 0.6em;
    color: #999;
    min-width: 1.6em;
    text-align: right;
    flex-shrink: 0;
    font-family: Arial, sans-serif;
}

/* Le mot lui-même */
.fluence-mot {
    flex: 1;
}

/* Impression : bordures nettes */
@media print {
    .fluence-cell {
        border: 1px solid #888;
        padding: 0.25rem 0.4rem;
    }
    .fluence-num {
        color: #666;
    }
}
    </style>