/*
 * assets/eleve.css
 * Styles interface eleve — compatible theme Astra
 *
 * Principe de compatibilite Astra :
 * - On ne redefinit pas body, h1-h3, a, ni les couleurs globales
 * - On ne touche pas au layout Astra (header, footer, sidebar)
 * - Tout est scope sous .gs-* pour eviter les conflits
 * - On utilise les variables CSS Astra quand disponibles
 */

/* ============================================
   VARIABLES LOCALES
   Utilisees partout dans ce fichier
   Compatible avec les variables Astra si definies
   ============================================ */

.gs-espace-eleve,
.gs-connexion-eleve,
.gs-cours-eleve-liste,
.gs-contenu-chapitre,
.gs-quiz-passage,
.gs-quiz-feedback {
    --gs-bleu        : #2c5282;
    --gs-bleu-clair  : #4299e1;
    --gs-vert        : #276749;
    --gs-vert-clair  : #48bb78;
    --gs-rouge       : #9b2c2c;
    --gs-rouge-clair : #fc8181;
    --gs-jaune       : #744210;
    --gs-jaune-fond  : #fef3c7;
    --gs-gris        : #4a5568;
    --gs-gris-clair  : #e2e8f0;
    --gs-gris-fond   : #f7fafc;
    --gs-blanc       : #ffffff;
    --gs-rayon       : 10px;
    --gs-ombre       : 0 2px 8px rgba(0,0,0,0.08);
    --gs-transition  : 0.2s ease;
}

/* ============================================
   FORMULAIRE DE CONNEXION
   ============================================ */

.gs-connexion-eleve {
    max-width: 440px;
    margin: 40px auto;
    padding: 0 16px;
}

.gs-connexion-eleve__carte {
    background: var(--gs-blanc);
    border-radius: var(--gs-rayon);
    box-shadow: var(--gs-ombre);
    padding: 40px 32px;
    border: 1px solid var(--gs-gris-clair);
}

.gs-connexion-eleve__titre {
    margin: 0 0 8px;
    color: var(--gs-bleu);
    font-size: 1.5rem;
    text-align: center;
}

.gs-connexion-eleve__info {
    color: var(--gs-gris);
    font-size: 0.95rem;
    text-align: center;
    margin: 0 0 28px;
}

.gs-form-champ {
    margin-bottom: 20px;
}

.gs-form-champ label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--gs-gris);
    font-size: 0.9rem;
}

.gs-form-champ input,
.gs-form-champ select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--gs-gris-clair);
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color var(--gs-transition);
    background: var(--gs-blanc);
}

.gs-form-champ input:focus,
.gs-form-champ select:focus {
    outline: none;
    border-color: var(--gs-bleu-clair);
    box-shadow: 0 0 0 3px rgba(66,153,225,0.15);
}

.gs-form-champ small {
    display: block;
    color: var(--gs-gris);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* Message connexion (erreur / succes) */
.gs-message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.gs-message--erreur {
    background: #fff5f5;
    color: var(--gs-rouge);
    border: 1px solid var(--gs-rouge-clair);
}

.gs-message--succes {
    background: #f0fff4;
    color: var(--gs-vert);
    border: 1px solid var(--gs-vert-clair);
}

.gs-deja-connecte {
    text-align: center;
    padding: 24px;
    background: var(--gs-gris-fond);
    border-radius: var(--gs-rayon);
    border: 1px solid var(--gs-gris-clair);
}

/* ============================================
   BOUTONS
   Scope strict sous .gs-* : ne pollue pas Astra
   ============================================ */

.gs-btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--gs-transition),
                transform var(--gs-transition);
    box-sizing: border-box;
}

.gs-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.gs-btn-connexion {
    width: 100%;
    background: var(--gs-bleu);
    color: var(--gs-blanc);
    padding: 14px;
    font-size: 1rem;
}

.gs-btn-connexion:hover {
    background: var(--gs-bleu-clair);
    color: var(--gs-blanc);
}

.gs-btn-secondaire {
    background: var(--gs-gris-fond);
    color: var(--gs-gris);
    border: 1px solid var(--gs-gris-clair);
}

.gs-btn-secondaire:hover {
    background: var(--gs-gris-clair);
    color: var(--gs-gris);
}

.gs-btn-mini {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.gs-btn-quiz-demarrer {
    background: var(--gs-vert);
    color: var(--gs-blanc);
}

.gs-btn-quiz-demarrer:hover {
    background: var(--gs-vert-clair);
    color: var(--gs-blanc);
}

.gs-btn-valider {
    background: var(--gs-vert);
    color: var(--gs-blanc);
    padding: 12px 28px;
}

.gs-btn-valider:hover {
    background: var(--gs-vert-clair);
    color: var(--gs-blanc);
}

/* ============================================
   ESPACE ELEVE — STRUCTURE PRINCIPALE
   ============================================ */

.gs-espace-eleve {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px;
}

.gs-espace-eleve__entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--gs-gris-clair);
}

.gs-espace-eleve__bonjour {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gs-bleu);
}

/* Conseil -->
/* ============================================
   CONSEIL DU JOUR
   ============================================ */

.gs-conseil {
    padding: 16px 20px;
    border-radius: var(--gs-rayon);
    margin-bottom: 24px;
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 5px solid transparent;
}

.gs-conseil--hausse {
    background: #f0fff4;
    border-color: var(--gs-vert-clair);
    color: var(--gs-vert);
}

.gs-conseil--stable {
    background: #fffbeb;
    border-color: #f6ad55;
    color: var(--gs-jaune);
}

.gs-conseil--baisse {
    background: #fff5f5;
    border-color: var(--gs-rouge-clair);
    color: var(--gs-rouge);
}

.gs-conseil--insuffisant {
    background: var(--gs-gris-fond);
    border-color: var(--gs-gris-clair);
    color: var(--gs-gris);
}

/* ============================================
   ONGLETS (partages prof et eleve)
   ============================================ */

.gs-onglets {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--gs-gris-clair);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.gs-onglet {
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gs-gris);
    cursor: pointer;
    transition: color var(--gs-transition),
                border-color var(--gs-transition);
}

.gs-onglet:hover {
    color: var(--gs-bleu);
}

.gs-onglet--actif {
    color: var(--gs-bleu);
    border-bottom-color: var(--gs-bleu);
}

.gs-onglet-contenu {
    display: none;
}

.gs-onglet-contenu--actif {
    display: block;
}

/* ============================================
   CEINTURES — VUE ELEVE
   ============================================ */

.gs-ceintures-eleve__intro {
    color: var(--gs-gris);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.gs-ceintures-liste {
    display: grid;
    gap: 10px;
}

.gs-ceinture-bloc {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: var(--gs-rayon);
    border: 1px solid var(--gs-gris-clair);
    background: var(--gs-blanc);
    transition: box-shadow var(--gs-transition);
}

.gs-ceinture-bloc:hover {
    box-shadow: var(--gs-ombre);
}

.gs-ceinture-bloc--validee {
    border-color: var(--gs-vert-clair);
    background: #f0fff4;
}

.gs-ceinture-bloc--vide {
    opacity: 0.6;
}

.gs-ceinture-bloc__couleur {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(0,0,0,0.1);
}

.gs-ceinture-bloc__info {
    flex: 1;
}

.gs-ceinture-bloc__nom {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gs-gris);
    margin-bottom: 2px;
}

.gs-ceinture-bloc__statut {
    font-size: 0.82rem;
}

.gs-ceinture-bloc__statut--ok {
    color: var(--gs-vert);
    font-weight: 600;
}

.gs-ceinture-bloc__statut--non {
    color: var(--gs-gris);
}

.gs-ceinture-bloc__icone {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gs-vert);
    flex-shrink: 0;
}

.gs-ceinture-bloc--vide .gs-ceinture-bloc__icone {
    color: var(--gs-gris-clair);
}

/* ============================================
   QUIZ — VUE ELEVE
   ============================================ */

.gs-quiz-section {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--gs-blanc);
    border-radius: var(--gs-rayon);
    border: 1px solid var(--gs-gris-clair);
    box-shadow: var(--gs-ombre);
}

.gs-quiz-section__titre {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gs-bleu);
    margin: 0 0 6px;
}

.gs-quiz-section__info {
    color: var(--gs-gris);
    font-size: 0.88rem;
    margin: 0 0 18px;
}

.gs-quiz-liste {
    display: grid;
    gap: 12px;
}

.gs-quiz-carte {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--gs-gris-clair);
    border-radius: var(--gs-rayon);
    background: var(--gs-gris-fond);
}

.gs-quiz-carte__titre {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gs-gris);
}

.gs-quiz-carte__chapitre {
    font-size: 0.82rem;
    color: var(--gs-gris);
    opacity: 0.7;
}

.gs-quiz-libre-form {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.gs-quiz-libre-form select {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    border: 2px solid var(--gs-gris-clair);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--gs-blanc);
}

.gs-info--attente {
    background: var(--gs-jaune-fond);
    color: var(--gs-jaune);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #f6ad55;
    font-size: 0.9rem;
}

/* ============================================
   PASSAGE DU QUIZ
   ============================================ */

.gs-quiz-passage {
    max-width: 640px;
    margin: 0 auto;
}

.gs-quiz-progression {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    font-size: 0.88rem;
    color: var(--gs-gris);
}

.gs-quiz-barre {
    flex: 1;
    height: 6px;
    background: var(--gs-gris-clair);
    border-radius: 3px;
    overflow: hidden;
}

.gs-quiz-barre__fill {
    height: 100%;
    background: var(--gs-bleu);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.gs-question__texte {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gs-gris);
    margin-bottom: 20px;
    line-height: 1.5;
}

.gs-reponse-choix {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 2px solid var(--gs-gris-clair);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--gs-transition),
                background var(--gs-transition);
    background: var(--gs-blanc);
}

.gs-reponse-choix:hover {
    border-color: var(--gs-bleu-clair);
    background: #ebf8ff;
}

.gs-reponse-choix input {
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--gs-bleu);
}

.gs-reponse-choix span {
    font-size: 0.95rem;
    color: var(--gs-gris);
    line-height: 1.4;
}

/* Reponse cochee : mise en evidence */
.gs-reponse-choix:has(input:checked) {
    border-color: var(--gs-bleu);
    background: #ebf8ff;
}

/* Classement drag and drop */
.gs-reponse-classement__info,
.gs-reponse-correspondance__info {
    font-size: 0.85rem;
    color: var(--gs-gris);
    margin-bottom: 12px;
    font-style: italic;
}

.gs-classement-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: var(--gs-blanc);
    border: 2px solid var(--gs-gris-clair);
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    transition: box-shadow var(--gs-transition);
}

.gs-classement-item:active {
    cursor: grabbing;
}

.gs-classement-item--drag-over {
    border-color: var(--gs-bleu);
    box-shadow: 0 0 0 3px rgba(66,153,225,0.2);
}

.gs-classement-item__poignee {
    color: var(--gs-gris-clair);
    font-size: 1rem;
    letter-spacing: -2px;
}

/* Correspondance */
.gs-correspondance-table {
    display: grid;
    gap: 8px;
}

.gs-correspondance-ligne {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}

.gs-correspondance-gauche {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gs-gris);
    padding: 8px 12px;
    background: var(--gs-gris-fond);
    border-radius: 6px;
    border: 1px solid var(--gs-gris-clair);
    text-align: right;
}

.gs-correspondance-fleche {
    color: var(--gs-gris);
    font-weight: 700;
    text-align: center;
}

.gs-correspondance-select {
    padding: 8px 10px;
    border: 2px solid var(--gs-gris-clair);
    border-radius: 6px;
    font-size: 0.88rem;
    background: var(--gs-blanc);
    width: 100%;
}

.gs-correspondance-select:focus {
    outline: none;
    border-color: var(--gs-bleu-clair);
}

/* Navigation quiz */
.gs-quiz-nav {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--gs-gris-clair);
}

/* ============================================
   FEEDBACK APRES QUIZ
   ============================================ */

.gs-quiz-feedback__message {
    padding: 18px 22px;
    border-radius: var(--gs-rayon);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.gs-quiz-feedback__message--excellent,
.gs-quiz-feedback__message--valide {
    background: #f0fff4;
    color: var(--gs-vert);
    border: 2px solid var(--gs-vert-clair);
}

.gs-quiz-feedback__message--insuffisant,
.gs-quiz-feedback__message--echec {
    background: var(--gs-jaune-fond);
    color: var(--gs-jaune);
    border: 2px solid #f6ad55;
}

/* Ceinture validee */
.gs-quiz-feedback__ceinture {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #f0fff4;
    border: 2px solid var(--gs-vert-clair);
    border-radius: var(--gs-rayon);
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--gs-vert);
}

.gs-quiz-feedback__ceinture-couleur {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid rgba(0,0,0,0.15);
}

/* Detail par question */
.gs-quiz-feedback__detail h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gs-gris);
    margin: 0 0 14px;
}

.gs-feedback-question {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.gs-feedback-question--ok {
    background: #f0fff4;
    border-color: var(--gs-vert-clair);
}

.gs-feedback-question--ko {
    background: #fff5f5;
    border-color: var(--gs-rouge-clair);
}

.gs-feedback-question__statut {
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    padding-top: 1px;
}

.gs-feedback-question--ok .gs-feedback-question__statut {
    color: var(--gs-vert);
}

.gs-feedback-question--ko .gs-feedback-question__statut {
    color: var(--gs-rouge);
}

.gs-feedback-question__texte {
    flex: 1;
    font-size: 0.9rem;
    color: var(--gs-gris);
    line-height: 1.4;
}

.gs-feedback-question__explication {
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--gs-gris);
    font-style: italic;
    padding: 8px 10px;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
}

.gs-quiz-feedback__actions {
    margin-top: 24px;
    text-align: center;
}

/* ============================================
   COURS — VUE ELEVE
   ============================================ */

.gs-cours-eleve-liste {
    max-width: 860px;
    margin: 0 auto;
}

.gs-cours-eleve-liste__titre {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gs-bleu);
    margin: 0 0 20px;
}

.gs-chapitres-grille {
    display: grid;
    gap: 12px;
}

.gs-chapitre-carte {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--gs-gris-clair);
    border-radius: var(--gs-rayon);
    background: var(--gs-blanc);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow var(--gs-transition),
                transform var(--gs-transition);
}

.gs-chapitre-carte:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

.gs-chapitre-carte__bande {
    width: 6px;
    flex-shrink: 0;
}

.gs-chapitre-carte__corps {
    flex: 1;
    padding: 14px 18px;
}

.gs-chapitre-carte__titre {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gs-gris);
    margin-bottom: 4px;
}

.gs-chapitre-carte__desc {
    font-size: 0.83rem;
    color: var(--gs-gris);
    opacity: 0.7;
    line-height: 1.4;
}

.gs-chapitre-carte__fleche {
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    color: var(--gs-gris-clair);
}

/* Contenu chapitre */
.gs-fil-ariane {
    font-size: 0.85rem;
    color: var(--gs-gris);
    margin-bottom: 20px;
}

.gs-fil-ariane a {
    color: var(--gs-bleu-clair);
    text-decoration: none;
}

.gs-fil-ariane a:hover {
    text-decoration: underline;
}

.gs-contenu-chapitre__entete {
    padding: 16px 20px;
    background: var(--gs-gris-fond);
    border-radius: 8px;
    margin-bottom: 24px;
}

.gs-contenu-chapitre__entete h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--gs-bleu);
}

.gs-contenu-chapitre__corps {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gs-gris);
}

.gs-contenu-chapitre__nav {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--gs-gris-clair);
}

/* ============================================
   MESSAGES ET ETATS
   ============================================ */

.gs-info {
    padding: 14px 18px;
    background: var(--gs-gris-fond);
    border: 1px solid var(--gs-gris-clair);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--gs-gris);
}

.gs-erreur {
    padding: 14px 18px;
    background: #fff5f5;
    border: 1px solid var(--gs-rouge-clair);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--gs-rouge);
}

/* ============================================
   RESPONSIVE — MOBILE FIRST
   Les eleves sont souvent sur telephone
   ============================================ */

@media (max-width: 600px) {

    .gs-connexion-eleve__carte {
        padding: 28px 20px;
    }

    .gs-espace-eleve__entete {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .gs-onglet {
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .gs-ceinture-bloc {
        gap: 10px;
        padding: 12px 14px;
    }

    .gs-quiz-carte {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .gs-quiz-libre-form {
        flex-direction: column;
    }

    .gs-quiz-libre-form select {
        width: 100%;
    }

    .gs-correspondance-ligne {
        grid-template-columns: 1fr;
    }

    .gs-correspondance-fleche {
        transform: rotate(90deg);
        text-align: left;
    }

    .gs-quiz-nav {
        flex-direction: column;
    }

    .gs-btn {
        width: 100%;
        text-align: center;
    }

    .gs-feedback-question {
        flex-direction: column;
        gap: 6px;
    }

    .gs-chapitres-grille {
        gap: 8px;
    }

}

@media (min-width: 601px) and (max-width: 860px) {

    .gs-quiz-nav {
        flex-wrap: wrap;
    }

    .gs-chapitres-grille {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (min-width: 861px) {

    .gs-chapitres-grille {
        grid-template-columns: repeat(2, 1fr);
    }

}