/* e-Fluenceur — Styles spécifiques (bootstrap.css + css/common.css chargés avant) */

/* Surcharge couleur e-fluenceur (différente du vert e-cole commun) */
.header-icone { color: #1e8461 }
.footer-icone { color: #1e8461 }

/* Main */
main { max-width: 1100px }
main.pleine-largeur { max-width: 100% }

/* Ecrans (JS toggle) */
.ecran { display: flex; flex-direction: column; min-height: 0; flex: 1 }
.ecran-actif { visibility: visible; opacity: 1 }
.ecran-cache { display: none }

/* Consigne */
.consigne { margin: 0 0 12px 0; font-size: 1em; color: #555 }

/* Boutons custom */
.btn {
    padding: 10px 28px; font-size: 1.05em; font-weight: 600; color: #fff;
    border: none; border-radius: 6px; cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; color: #fff }
.btn-principal:disabled { background: #3498db }
.btn-vert:disabled { background: #25a277 }
.btn-rouge:disabled { background: #e74c3c }
.btn-secondaire:disabled { background: #7f8c8d }
.btn-violet:disabled { background: #8e44ad }
.btn-principal { background: #3498db }
.btn-principal:hover:not(:disabled) { background: #2980b9 }
.btn-vert { background: #25a277 }
.btn-vert:hover:not(:disabled) { background: #1f8a65 }
.btn-rouge { background: #e74c3c }
.btn-rouge:hover:not(:disabled) { background: #c0392b }
.btn-secondaire { background: #7f8c8d }
.btn-secondaire:hover:not(:disabled) { background: #636e72 }
.btn-violet { background: #8e44ad }
.btn-violet:hover:not(:disabled) { background: #732d91 }
.btn-sm { padding: 7px 18px; font-size: 0.85em }

/* Actions */
.actions {
    display: flex; gap: 10px; justify-content: center; align-items: center;
    margin-top: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.actions-secondaires { margin-top: 24px }
.actions-groupe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }

/* Infobox */
.infobox {
    display: flex; align-items: center; margin-top: auto; padding: 12px 16px;
    text-decoration: none; font-size: 0.95em; transition: all 0.2s;
    background: #e8f6ef; border: 1px solid #a8dfbf; border-radius: 6px; color: #1e8461;
}
.infobox:hover { background: #d4edda }
.infobox-icon {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; background: #25a277; color: #fff;
    border-radius: 50%; font-size: 1.1em; font-weight: 700; flex-shrink: 0;
}
.infobox-text { flex: 1; text-align: center; padding-right: 28px }

/* Export */
.cartes-export {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px; margin: 16px 0;
}
.carte-export { flex: 0 1 220px; }
.carte-export-texte { margin: 0; font-size: 0.85em; color: #555; text-align: center; line-height: 1.4; flex: 1 }

/* Ecran 1 — Saisie */
.champ-niveau label, .champ-texte-meta label { font-weight: 600; color: #555 }
.champ-niveau select {
    padding: 8px 12px; font-size: 1em; border: 2px solid #bdc3c7;
    border-radius: 4px; background: #fff; cursor: pointer;
}
.champ-niveau select:focus { outline: none; border-color: #3498db }
.champ-niveau input[type="text"] {
    padding: 8px 12px; font-size: 1em; border: 2px solid #bdc3c7;
    border-radius: 4px; background: #fff; width: 140px;
}
.champ-niveau input[type="text"]:focus { outline: none; border-color: #3498db }
.champ-texte-meta input[type="text"] {
    padding: 8px 12px; font-size: 1em; border: 2px solid #bdc3c7;
    border-radius: 4px; background: #fff; flex: 1; min-width: 0;
}
.champ-texte-meta input[type="text"]:focus { outline: none; border-color: #3498db }
#texte-input {
    width: 100%; min-height: 150px; padding: 14px; font-size: 1.1em;
    line-height: 1.6; border: 2px solid #bdc3c7; border-radius: 6px;
    resize: none; overflow-y: auto; font-family: inherit; background: #fff;
    max-height: 60vh;
}
#texte-input:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52,152,219,0.15) }

/* Ecran 2 — Lecture */
#ecran-lecture { overflow: hidden; margin-top: -8px }
#bandeau-sticky {
    flex-shrink: 0; background: #fff;
    margin-bottom: 12px;
}
.lecture-contenu { flex: 1; min-height: 0; overflow-y: auto }
#barre-outils {
    display: flex; align-items: center; gap: 16px; flex-shrink: 0;
    padding: 0; border-bottom: 2px solid #dce1e6; margin-bottom: 0;
}
#chronometre { font-size: 4em; font-weight: 700; font-variant-numeric: tabular-nums; color: #1e8461; min-width: 180px; display: flex; align-items: center; gap: 8px; align-self: center }
.chrono-icone { flex-shrink: 0; width: 1em; height: 1em }
#boutons-controle { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap }
#boutons-controle .btn { padding: 14px 32px; font-size: 1.15em }
#boutons-controle .option-auto { width: 100%; justify-content: center }
.champ-lecture { display: flex; align-items: center; gap: 6px; font-size: 0.85em; color: #555 }
.champ-lecture input, .champ-lecture select { padding: 4px 8px; font-size: 1em; border: 1px solid #bdc3c7; border-radius: 4px; width: 120px }
.champ-lecture input:focus, .champ-lecture select:focus { outline: none; border-color: #3498db }
.champ-lecture input:disabled, .champ-lecture select:disabled { opacity: 0.5; cursor: not-allowed; background: #f5f5f5 }
.option-auto { display: flex; align-items: center; gap: 6px; font-size: 0.85em; color: #555; cursor: pointer; user-select: none }
.option-auto input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer }
.option-auto input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5 }
.option-auto:has(input:disabled) { opacity: 0.5; cursor: not-allowed }
.option-taille { display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: #555 }
.option-taille input[type="range"] {
    width: 120px; height: 6px; border-radius: 3px;
    background: #dce1e6; outline: none; cursor: pointer; -webkit-appearance: none;
}
.option-taille input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #3498db; cursor: pointer }
.option-taille input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #3498db; cursor: pointer; border: none }
.option-taille input[type="range"]:disabled { opacity: 0.5; cursor: not-allowed }
.option-taille input[type="range"]:disabled::-webkit-slider-thumb { cursor: not-allowed }
.option-taille input[type="range"]:disabled::-moz-range-thumb { cursor: not-allowed }
.info-mots { margin: 0; font-size: 0.9em; color: #777; text-align: right }
.raccourcis-clavier { margin: 12px 0 0 0; font-size: 0.8em; color: #888; text-align: center }
.raccourcis-clavier kbd {
    display: inline-block; padding: 1px 6px; font-size: 0.95em; font-family: inherit; color: #333;
    background: #f0f0f0; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 0 #bbb;
}
#instruction-lecture {
    flex-shrink: 0; min-height: 1.4em; font-size: 1.15em; margin: 12px 0;
    padding: 14px 18px 14px 42px; border: 1px solid #a8cce8; border-left: 4px solid #3498db;
    background: #d4e6f6; border-radius: 4px; animation: consignePulse 2s ease-in-out 3; position: relative;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#boutons-suite { display: inline-flex; gap: 8px }
#instruction-lecture::before { content: attr(data-icone); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #3498db }
@keyframes consignePulse {
    0% { background: #d4e6f6 }
    50% { background: #a8cce8; box-shadow: 0 0 12px rgba(52,152,219,0.3) }
    100% { background: #d4e6f6 }
}
#zone-texte {
    padding: 16px; line-height: 2.1; font-size: 1.3em;
    background: #f5f7fa; border-radius: 6px; border: 1px solid #dce1e6; margin-top: 8px;
    --lh: 2.1em;
}
#zone-texte.police-opendys { font-family: 'OpenDyslexic', sans-serif; letter-spacing: 0.05em; word-spacing: 0.1em; line-height: 2.3; --lh: 2.3em }
#zone-texte.lignes-alternees {
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent var(--lh),
            rgba(0,0,0,0.07) var(--lh),
            rgba(0,0,0,0.07) calc(var(--lh) * 2)
        ) content-box,
        #f5f7fa;
    background-attachment: local;
}
#zone-texte.police-opendys .mot-erreur {
    text-decoration: none; background-color: #fdedec;
    background-image: linear-gradient(transparent 45%, #e74c3c 45%, #e74c3c 55%, transparent 55%);
}
#zone-texte.police-opendys .mot-erreur:hover {
    background-color: #f9d5d2;
    background-image: linear-gradient(transparent 45%, #e74c3c 45%, #e74c3c 55%, transparent 55%);
}

/* Mots (JS) */
.mot, .ponctuation {
    display: inline; cursor: default; padding: 2px 4px; border-radius: 3px;
    transition: background 0.15s, color 0.15s; user-select: none; -webkit-user-select: none;
}
.mot-lie { padding-right: 0 }
.mot.cliquable { cursor: pointer }
.mot.cliquable:hover { background: #eaf4fc }
.mot-erreur { color: #e74c3c; text-decoration: line-through; background: #fdedec }
.mot-erreur:hover { background-color: #f9d5d2 !important }
.mot-dernier { background: #a8cce8; color: #1a5276 }
.mot-apres-dernier { opacity: 0.35 }

/* Etat en cours : tout grisé sauf bandeau sticky et texte */
#ecran-lecture.lecture-en-cours .lecture-contenu > *:not(#zone-texte) { opacity: 0.3; pointer-events: none }
#ecran-lecture.lecture-en-cours .champs-eleve-lecture,
#ecran-lecture.lecture-en-cours .options-groupe { opacity: 0.3; pointer-events: none }

/* Etat arrêté : page grisée, consigne visible */
#ecran-lecture.lecture-arretee .lecture-contenu { opacity: 0.3; pointer-events: none }
#ecran-lecture.lecture-arretee #zone-texte { pointer-events: auto }
#ecran-lecture.lecture-arretee #barre-outils { opacity: 0.3; pointer-events: none }

/* Etat mot choisi : tout grisé sauf consigne, texte et boutons suite */
#ecran-lecture.lecture-mot-choisi .lecture-contenu > *:not(#zone-texte) { opacity: 0.3; pointer-events: none }
#ecran-lecture.lecture-mot-choisi #barre-outils { opacity: 0.3; pointer-events: none }

/* Ecran 3 — EMDF */
#ecran-emdf h2 { margin: 0 0 10px 0; font-size: 1.6em; color: #1e8461; text-align: center }
.consigne-emdf { text-align: center; color: #555; margin-bottom: 20px }
.emdf-item { background: #f5f7fa; border: 1px solid #dce1e6 }
.emdf-grille { display: grid; grid-template-columns: 1fr; gap: 16px }
.emdf-titre { font-size: 1.15em; font-weight: 700; color: #1e8461 }
.emdf-note { font-size: 1.4em; font-weight: 700; color: #3498db; min-width: 40px; text-align: center }
.emdf-description { font-size: 0.9em; color: #777; margin: 0 0 12px 0; line-height: 1.4 }
.btn-note {
    flex: 1; padding: 12px 8px; font-size: 1.1em; font-weight: 700;
    border: 2px solid #bdc3c7; border-radius: 6px; background: #fff; color: #555;
    cursor: pointer; transition: all 0.15s;
}
.btn-note[data-note="1"]:hover { border-color: #e67e22; background: #fef5ec }
.btn-note[data-note="2"]:hover { border-color: #f1c40f; background: #fef9e7 }
.btn-note[data-note="3"]:hover { border-color: #3498db; background: #eaf4fc }
.btn-note[data-note="4"]:hover { border-color: #25a277; background: #eafaf1 }
.btn-note[data-note="1"].active { border-color: #e67e22; background: #e67e22; color: #fff }
.btn-note[data-note="2"].active { border-color: #f1c40f; background: #f1c40f; color: #fff }
.btn-note[data-note="3"].active { border-color: #3498db; background: #3498db; color: #fff }
.btn-note[data-note="4"].active { border-color: #25a277; background: #25a277; color: #fff }
.emdf-legendes { margin-top: 10px; display: grid }
.emdf-legende {
    grid-row: 1; grid-column: 1;
    visibility: hidden; margin: 0; padding: 8px 12px; font-size: 0.85em;
    color: #555; line-height: 1.4; border-radius: 0 4px 4px 0;
}
.emdf-legende.visible { visibility: visible; z-index: 1 }
.emdf-boutons:has(.btn-note[data-note="1"]:hover) ~ .emdf-legendes .emdf-legende[data-note="1"],
.emdf-boutons:has(.btn-note[data-note="2"]:hover) ~ .emdf-legendes .emdf-legende[data-note="2"],
.emdf-boutons:has(.btn-note[data-note="3"]:hover) ~ .emdf-legendes .emdf-legende[data-note="3"],
.emdf-boutons:has(.btn-note[data-note="4"]:hover) ~ .emdf-legendes .emdf-legende[data-note="4"] {
    visibility: visible; z-index: 2;
}
.emdf-legende[data-note="1"] { background: #fef5ec; border-left: 3px solid #e67e22 }
.emdf-legende[data-note="2"] { background: #fef9e7; border-left: 3px solid #f1c40f }
.emdf-legende[data-note="3"] { background: #eaf4fc; border-left: 3px solid #3498db }
.emdf-legende[data-note="4"] { background: #eafaf1; border-left: 3px solid #25a277 }
.emdf-vitesse { background: #f8f9fa }
.emdf-vitesse .emdf-note { color: #25a277 }

/* Ecran 4 — Resultats */
#ecran-resultats h2 {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 20px 0; font-size: 1.6em; color: #1e8461; text-align: center;
}
#ecran-resultats h2::before, #ecran-resultats h2::after {
    content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, #1e8461);
}
#ecran-resultats h2::after { background: linear-gradient(90deg, #1e8461, transparent) }
.resultats-container {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px; margin-bottom: 20px;
}
.resultats-colonne h3 { margin: 0 0 12px 0; font-size: 0.95em; font-weight: 700; color: #1e8461 }
.resultat-ligne {
    display: flex; justify-content: space-between; padding: 12px 16px;
    font-size: 1.05em; border-bottom: 1px solid #ecf0f1;
}
.resultat-ligne:last-child { border-bottom: none }
.resultat-label { font-weight: 600; color: #555 }
.resultat-valeur { font-weight: 700; color: #1e8461 }
.resultat-mclm { font-size: 1.2em; background: #eaf7ef }
.resultat-mclm .resultat-valeur { color: #25a277 }
.resultat-seuil-inline { font-size: 0.7em; font-weight: 400; color: #999 }

.resultat-emdf-score { font-size: 1.2em; background: #eaf7ef }
.resultat-emdf-score .resultat-valeur { color: #3498db }

/* Barres EMDF */
.barre-label { width: 100px; font-size: 0.9em; font-weight: 600; color: #555 }
.barre-note { width: 30px; text-align: center; font-weight: 700; color: #1e8461 }
#graphique-emdf .progress { height: 24px }
#graphique-emdf .progress-bar { transition: width 0.4s ease }

/* Modale — styles spécifiques e-fluenceur */
.modale-eleve { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ecf0f1 }
.modale-eleve:last-child { border-bottom: none }
.modale-eleve-nom { font-weight: 700; color: #333; min-width: 100px }
.modale-eleve-scores { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9em }
.modale-score-mclm { font-weight: 700; color: #1e8461 }
.modale-score-emdf { font-weight: 600; font-size: 0.85em }
.modale-score-total { font-weight: 700; color: #3498db; font-size: 0.85em }
.modale-supprimer {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    border-radius: 4px; transition: background 0.2s, opacity 0.2s;
    color: #e74c3c; flex-shrink: 0; display: flex; align-items: center; opacity: 0.7;
}
.modale-supprimer:hover { background: #fdedec; opacity: 1 }
.modale-vide { text-align: center; color: #999; padding: 24px 0; font-style: italic }
.modale-actions-session { display: flex; justify-content: center; padding-top: 16px; border-top: 1px solid #ecf0f1; margin-top: 8px }

/* Boutons header (imprimante, plein écran, partage, élèves) */
.header-print {
    margin-left: auto;
    background: none; border: none; color: inherit;
    font-size: 1.3em; opacity: 0.6; cursor: pointer;
    transition: opacity 0.2s; display: flex; align-items: center;
}
.header-print:hover { opacity: 1 }
.header-share {
    margin-left: 12px;
    background: none; border: none; color: inherit;
    font-size: 1.3em; opacity: 0.6; cursor: pointer;
    transition: opacity 0.2s; display: flex; align-items: center;
}
.header-share:hover { opacity: 1 }
.header-fullscreen {
    margin-left: 12px;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s;
    background: none;
    border: none;
    color: inherit;
    display: flex;
    align-items: center;
}
.header-fullscreen:hover { opacity: 1 }
.header-settings { margin-left: 12px }

/* Modale Partage */
.partage-pills { --app-couleur: #25a277 }
#partage-qrcode canvas, #partage-qrcode-eleve canvas { border-radius: 8px; max-width: 350px; width: 100%; height: auto !important }

/* Modale PDF */
.pdf-controles label, .pdf-champs label { font-weight: 600; color: #555; white-space: nowrap }
.pdf-select {
    padding: 6px 10px; font-size: 0.95em; border: 2px solid #bdc3c7;
    border-radius: 4px; background: #fff; cursor: pointer;
}
.pdf-select:focus { outline: none; border-color: #3498db }
.btn-retours-ligne {
    padding: 5px 8px; border: 2px solid #bdc3c7; border-radius: 4px;
    background: #fff; cursor: pointer; color: #7f8c8d; line-height: 0;
    transition: all 0.2s;
}
.btn-retours-ligne:hover { border-color: #3498db; color: #3498db }
.btn-retours-ligne.active { border-color: #3498db; background: #3498db; color: #fff }
.pdf-input {
    padding: 6px 10px; font-size: 0.95em; border: 2px solid #bdc3c7;
    border-radius: 4px; background: #fff; flex: 1; min-width: 0;
}
.pdf-input:focus { outline: none; border-color: #3498db }
.pdf-preview-container {
    border: 1px solid #dce1e6; border-radius: 6px;
    background: #f5f7fa; overflow: hidden;
}
.pdf-preview { width: 100%; height: 500px; border: none; display: block }

/* Alertes Bootstrap */
#zone-alertes {
    position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
    z-index: 1000; width: auto; max-width: 90%;
}
#zone-alertes .alert {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-weight: 600; font-size: 0.95em;
    white-space: nowrap; padding: 12px 40px 12px 24px;
}

/* Responsive */
@media (max-width: 600px) {
    header { padding: 14px 16px }
    header h1 { font-size: 1.3em }
    main { padding: 16px }
    #barre-outils { flex-wrap: wrap; gap: 6px; justify-content: center }
    #chronometre { font-size: 2.2em; min-width: auto; justify-content: center }
    .chrono-icone { width: 0.9em; height: 0.9em }
    #boutons-controle { justify-content: center; order: 1 }
    #boutons-controle .btn { padding: 8px 16px; font-size: 0.9em }
    #boutons-controle .option-auto { font-size: 0.75em }
    .champs-eleve-lecture { flex-direction: row !important; align-items: center; order: 2; width: 100%; justify-content: center; flex-wrap: wrap }
    .champ-lecture input, .champ-lecture select { width: 80px; font-size: 0.85em; padding: 3px 6px }
    .champ-lecture label { font-size: 0.8em }
    .options-groupe { align-items: flex-start; order: 3; width: 100% }
    .option-pleine-largeur { display: none }
    .options-groupe .option-auto:first-child { display: none }
    .info-mots { display: none }
    .raccourcis-clavier { display: none }
    .option-police-mobile { display: flex !important; margin-top: 8px }
    #instruction-lecture { font-size: 0.85em; padding: 10px 14px 10px 36px }
    #instruction-lecture::before { left: 10px }
    #zone-texte { font-size: 1.1em; line-height: 1.9; padding: 12px; --lh: 1.9em }
    .btn { padding: 9px 18px; font-size: 0.95em }
    .emdf-grille { grid-template-columns: 1fr }
    .resultats-container { grid-template-columns: 1fr }
    .barre-label { width: 80px; font-size: 0.8em }
    .pdf-preview { height: 350px }
    .pdf-controles, .pdf-champs { flex-direction: column }
}

/* Impression */
@media print {
    header, footer, #zone-alertes, .actions, .actions-groupe,
    .cartes-export, .infobox, .raccourcis-clavier { display: none !important }
    body { font-size: 12pt; color: #000; background: #fff }
    main { max-width: 100%; padding: 0; margin: 0 }
    .ecran-cache { display: none !important }
    #ecran-resultats h2, .resultats-colonne h3, .resultat-valeur { color: #000 }
    .resultat-mclm { background: none; border: 2px solid #000 }
    .resultat-mclm .resultat-valeur { color: #000 }
    .progress-bar { background: #555 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .progress { border: 1px solid #ccc; -webkit-print-color-adjust: exact; print-color-adjust: exact }
}