/* ------------------------------------------------------------------
   Thème harmonisé avec le site de l'École Saint-Vincent (Loos) :
   fond blanc épuré, texte sombre, accent turquoise (repris du logo
   "ESV") et touche orange corail, titres en police serif élégante,
   reste du texte en police sans-serif ronde et lisible.
   (Base commune avec le Défi des tables de multiplication.)
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --couleur-primaire:        #1f9d96; /* turquoise du logo ESV */
    --couleur-primaire-fonce:  #167a75;
    --couleur-accent:          #e8792b; /* orange corail */
    --couleur-accent-fonce:    #cf6a1f;
    --couleur-texte:           #2b2b2b;
    --couleur-texte-clair:     #6b6b6b;
    --couleur-fond:            #ffffff;
    --couleur-fond-douce:      #f4faf9; /* fond légèrement teinté turquoise */
    --couleur-succes:          #4caf50;
    --couleur-erreur:          #e53935;
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', 'Trebuchet MS', Arial, sans-serif;
    background: var(--couleur-fond);
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    color: var(--couleur-texte);
}

.top-nav {
    background: var(--couleur-fond);
    border-bottom: 3px solid var(--couleur-primaire);
    padding: 14px 24px;
    text-align: right;
}

.top-nav a {
    color: var(--couleur-primaire);
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
    padding: 8px 16px;
    border-radius: 20px;
    border: 2px solid var(--couleur-primaire);
    margin-left: 8px;
    transition: 0.2s;
    display: inline-block;
}

.top-nav a:hover {
    background: var(--couleur-primaire);
    color: #fff;
}

.container {
    max-width: 700px;
    width: 100%;
    margin: 30px auto;
    background: var(--couleur-fond);
    padding: 30px 35px;
    border-radius: 18px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    overflow: hidden;
}

.ecole-tag {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--couleur-accent);
    margin: 0 0 6px 0;
}

h1 {
    font-family: 'Playfair Display', Georgia, serif;
    text-align: center;
    color: var(--couleur-texte);
    font-size: 2.1em;
    margin-top: 0;
    font-weight: 700;
}

h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--couleur-primaire);
}

h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--couleur-primaire-fonce);
    margin-top: 0;
}

.subtitle {
    text-align: center;
    color: var(--couleur-texte-clair);
    margin-bottom: 25px;
}

.btn {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    color: #fff;
    background: var(--couleur-primaire);
    border: none;
    padding: 14px 34px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.2s;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
}

.btn:hover {
    background: var(--couleur-primaire-fonce);
}

.btn-orange {
    background: var(--couleur-accent);
}

.btn-orange:hover {
    background: var(--couleur-accent-fonce);
}

.btn.small {
    padding: 7px 16px;
    font-size: 0.85em;
}

.btn.danger {
    background: var(--couleur-erreur);
}

.btn.danger:hover {
    background: #c62828;
}

.question-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--couleur-fond-douce);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 12px;
    font-size: 1.1em;
}

.question-item span.enonce {
    font-weight: 600;
    color: var(--couleur-texte);
}

.question-item input[type=text],
.question-item input[type=number] {
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    padding: 8px;
    border: 2px solid var(--couleur-primaire);
    border-radius: 8px;
    color: var(--couleur-texte);
}

.actions {
    text-align: center;
    margin-top: 25px;
}

.actions .btn {
    margin: 0 6px;
}

.error-msg {
    color: var(--couleur-erreur);
    text-align: center;
    font-weight: 600;
}

.succes-msg {
    color: var(--couleur-succes);
    text-align: center;
    font-weight: 600;
}

.form-start {
    text-align: center;
}

.form-start input[type=password],
.form-start input[type=text] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
    text-align: center;
    padding: 10px;
    width: 200px;
    max-width: 100%;
    border: 3px solid var(--couleur-primaire);
    border-radius: 10px;
    margin-bottom: 16px;
    color: var(--couleur-texte);
}

/* ------------------------------------------------------------------
   Spécifique au Pendu des mots
   ------------------------------------------------------------------ */

/* Onglets de classe (CP, CE1, CE2, CM1, CM2) */
.classe-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.classe-tab {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    background: #fff;
    color: var(--couleur-primaire);
    border: 2px solid var(--couleur-primaire);
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s;
}

.classe-tab:hover {
    background: var(--couleur-fond-douce);
}

.classe-tab.active {
    background: var(--couleur-primaire);
    color: #fff;
}

/* Sélecteur de liste (pastilles numérotées) */
.liste-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.liste-picker .label {
    font-weight: 600;
    color: var(--couleur-texte);
}

.liste-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.liste-badge {
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    border: 2px solid var(--couleur-primaire);
    background: #fff;
    color: var(--couleur-primaire-fonce);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: 0.2s;
}

.liste-badge:hover:not(:disabled) {
    background: var(--couleur-fond-douce);
}

.liste-badge.active {
    background: var(--couleur-accent);
    border-color: var(--couleur-accent);
    color: #fff;
}

.liste-badge:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.liste-empty {
    color: var(--couleur-texte-clair);
    font-style: italic;
    text-align: center;
}

/* Zone de jeu */
.jeu-zone { display: none; }
.jeu-zone.visible { display: block; }

.jeu-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

@media (max-width: 600px) {
    .jeu-layout { grid-template-columns: 1fr; }
    .potence-wrap, .epouvantail-wrap { margin: 0 auto 10px; max-width: 180px; }
}

.potence-wrap svg,
.epouvantail-wrap svg {
    width: 100%;
    max-width: 200px;
    display: block;
    margin: 0 auto;
}

.potence-wrap line,
.potence-wrap circle {
    stroke: var(--couleur-texte-clair);
    stroke-width: 5;
    stroke-linecap: round;
    fill: none;
}

.potence-wrap .figure-part {
    stroke: var(--couleur-erreur);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.potence-wrap .figure-part.show {
    opacity: 1;
}

/* Épouvantail : couleurs naturelles définies directement dans le SVG,
   on ne fait ici qu'apparaître/disparaître chaque partie en fondu */
.epouvantail-wrap .figure-part {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.epouvantail-wrap .figure-part.show {
    opacity: 1;
}

.mot-zone {
    text-align: center;
    min-width: 0;
}

.mot-affiche {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 2.4rem);
    color: var(--couleur-texte);
    letter-spacing: 8px;
    margin: 6px 0 18px;
    min-height: 46px;
    word-break: break-word;
}

.mot-affiche .lettre-trouvee {
    color: var(--couleur-succes);
}

.statut-msg {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.25em;
    min-height: 30px;
    margin-bottom: 8px;
}

.statut-msg.gagne { color: var(--couleur-succes); }
.statut-msg.perdu { color: var(--couleur-erreur); }

.compteur-erreurs {
    color: var(--couleur-texte-clair);
    font-weight: 600;
    margin-bottom: 16px;
}

.compteur-erreurs b { color: var(--couleur-erreur); }

/* Clavier de lettres */
.clavier {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 8px;
    max-width: 540px;
    width: 100%;
    min-width: 0;
    margin: 0 auto 10px;
}

.clavier.secondaire {
    max-width: 400px;
    opacity: 0.9;
}

.touche {
    appearance: none;
    border: 2px solid var(--couleur-primaire);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.95em;
    aspect-ratio: 1;
    border-radius: 8px;
    background: #fff;
    color: var(--couleur-primaire-fonce);
    transition: 0.15s ease;
}

.touche:hover:not(:disabled) {
    background: var(--couleur-fond-douce);
}

.touche:disabled {
    cursor: default;
}

.touche.correcte {
    background: #e8f7e8 !important;
    border-color: var(--couleur-succes);
    color: var(--couleur-succes);
    opacity: 1;
}

.touche.fausse {
    background: #fdeaea !important;
    border-color: var(--couleur-erreur);
    color: var(--couleur-erreur);
    opacity: 1;
}

/* ---------- Page paramètres ---------- */
.admin-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
}

@media (max-width: 640px) {
    .admin-grid { grid-template-columns: 1fr; }
}

.panel {
    background: var(--couleur-fond-douce);
    border-radius: 12px;
    padding: 18px;
    border: 1px solid #e5efee;
}

.form-row { margin-bottom: 14px; }

.form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.9em;
    color: var(--couleur-texte);
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    border: 2px solid var(--couleur-primaire);
    font-family: 'Poppins', sans-serif;
    font-size: 0.95em;
    color: var(--couleur-texte);
}

.liste-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: #fff;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    color: var(--couleur-texte);
}

.liste-item:hover { background: #eef8f6; }

.liste-item.active {
    border-color: var(--couleur-primaire);
    background: #eaf7f5;
}

.mots-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.mots-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}

.mots-table td:last-child {
    text-align: right;
    width: 60px;
}

.footer-note {
    color: var(--couleur-texte-clair);
    font-size: 0.8em;
    text-align: center;
    margin-top: 10px;
}

/* Sélecteur de thème visuel (Épouvantail / Pendu) */
.theme-choix {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid #e0dccb;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: 0.15s ease;
}

.theme-option:hover {
    border-color: var(--couleur-primaire);
}

.theme-option.selected {
    border-color: var(--couleur-primaire);
    background: var(--couleur-fond-douce);
}

.theme-option input[type="radio"] {
    width: auto;
    accent-color: var(--couleur-primaire);
}

.theme-emoji {
    font-size: 1.6em;
    line-height: 1;
}

.theme-option small {
    color: var(--couleur-texte-clair);
}

/* Formulaire de création d'un nouveau thème dans la page paramètres */
.nouvelle-classe-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.nouvelle-classe-form input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid var(--couleur-primaire);
    font-family: 'Poppins', sans-serif;
}

/* Page Révision : grille des mots de la liste sélectionnée */
.revision-zone {
    text-align: left;
    margin-top: 10px;
}

.revision-zone h3 {
    text-align: center;
    margin-bottom: 16px;
}

.mots-revision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.mot-revision-item {
    background: var(--couleur-fond-douce);
    border: 2px solid var(--couleur-primaire);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.1em;
    color: var(--couleur-texte);
}

/* ------------------------------------------------------------------
   Spécifique à l'exercice "Règle les aiguilles"
   ------------------------------------------------------------------ */

/* Sélecteur de niveau (même logique visuelle que .classe-tab) */
.niveau-picker {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.niveau-tab {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    background: #fff;
    color: var(--couleur-primaire);
    border: 2px solid var(--couleur-primaire);
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s;
    display: inline-block;
}

.niveau-tab:hover {
    background: var(--couleur-fond-douce);
}

.niveau-tab.active {
    background: var(--couleur-primaire);
    color: #fff;
}

/* Cartes exercices (même esprit que .liste-badge / .theme-option) */
.exercice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 8px 0 6px;
}

.exercice-card {
    background: var(--couleur-fond-douce);
    border: 2px solid #e0dccb;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--couleur-texte);
    transition: 0.15s ease;
}

.exercice-card:hover {
    border-color: var(--couleur-primaire);
}

.exercice-icone {
    font-size: 2.1em;
    margin-bottom: 6px;
}

.exercice-nom {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
    margin-bottom: 4px;
}

.exercice-desc {
    font-size: 0.82em;
    color: var(--couleur-texte-clair);
}

.astuce-choix {
    text-align: center;
    color: var(--couleur-texte-clair);
    font-size: 0.85em;
    transition: color 0.2s;
}

.astuce-choix.alerte {
    color: var(--couleur-erreur);
    font-weight: 600;
}

/* Zone de jeu de l'horloge */
.horloge-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.horloge-wrap { flex: 0 0 300px; text-align: center; }

.horloge-consigne { flex: 1 1 260px; min-width: 240px; text-align: center; }

.heure-cible {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.2em;
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
    background: var(--couleur-fond-douce);
    border-radius: 14px;
    padding: 12px 20px;
    display: inline-block;
    margin: 10px 0;
    letter-spacing: 1px;
}

.horloge-svg { touch-action: none; user-select: none; max-width: 280px; width: 100%; }
.horloge-cercle { fill: #ffffff; stroke: var(--couleur-primaire); stroke-width: 6; }
.horloge-chiffre { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 700; fill: var(--couleur-texte); text-anchor: middle; dominant-baseline: middle; }
.horloge-graduation { stroke: #cfe4e2; stroke-width: 2; }
.horloge-centre { fill: var(--couleur-accent); }

.aiguille { stroke-linecap: round; cursor: grab; }
.aiguille:active { cursor: grabbing; }
.aiguille-heure { stroke: var(--couleur-texte); stroke-width: 12; }
.aiguille-minute { stroke: var(--couleur-primaire); stroke-width: 7; }
.zone-prise { fill: transparent; cursor: grab; }

.score-line {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 14px;
    font-size: 0.9em;
}

.score-line span {
    background: var(--couleur-fond-douce);
    border-radius: 10px;
    padding: 6px 14px;
}

.retour-feedback {
    min-height: 28px;
    margin-top: 12px;
    font-weight: 700;
}

.retour-feedback.ok { color: var(--couleur-succes); }
.retour-feedback.ko { color: var(--couleur-erreur); }

/* Tableau des résultats (page enseignant) */
.resultats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9em;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.resultats-table th,
.resultats-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.resultats-table th {
    background: var(--couleur-fond-douce);
    color: var(--couleur-primaire-fonce);
}

.resultats-table .ok-cell { color: var(--couleur-succes); font-weight: 700; }
.resultats-table .ko-cell { color: var(--couleur-erreur); font-weight: 700; }

.filtres-niveau { margin: 10px 0; text-align: center; }
.filtres-niveau a { margin: 0 6px; }

/* ------------------------------------------------------------------
   Spécifique à l'exercice "Lis l'heure"
   ------------------------------------------------------------------ */
.periode-badge {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--couleur-accent-fonce);
    background: #fff3e8;
    border: 2px solid var(--couleur-accent);
    border-radius: 20px;
    padding: 6px 16px;
    display: inline-block;
    margin-bottom: 10px;
}

.reponse-heure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0;
}

.reponse-heure select {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    padding: 8px 10px;
    border-radius: 10px;
    border: 2px solid var(--couleur-primaire);
    color: var(--couleur-primaire-fonce);
    background: #fff;
}

.reponse-heure .separateur-h {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.4em;
    color: var(--couleur-texte);
}

/* ------------------------------------------------------------------
   Adaptation mobile
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
    .top-nav { text-align: center; padding: 12px 10px; }
    .top-nav a { font-size: 0.9em; padding: 8px 12px; margin: 4px; }

    .container {
        margin: 0;
        padding: 20px 16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    h1 { font-size: 1.5em; }
    h2 { font-size: 1.2em; }
    .subtitle { font-size: 0.9em; }

    .btn { width: 100%; padding: 14px 20px; font-size: 1.05em; }
    .actions { display: flex; flex-direction: column; gap: 10px; }
    .actions .btn { margin: 0; width: 100%; }

    .classe-tab { font-size: 0.85em; padding: 7px 14px; }
    .clavier { max-width: 100%; }
    .touche { font-size: 16px; } /* évite le zoom automatique sur iOS */
}