/* =============================================================================
   SHADOW ACADEMY - Styles de l'application
   Consomme les tokens de shadowforge.css, n'en redefinit aucun.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: var(--sf-font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .marque {
    font-family: var(--sf-font);
    letter-spacing: -.01em;
}

/* Accessibilite : la cible du focus doit toujours rester visible au clavier. */
:focus-visible {
    outline: 2px solid var(--sf-cyan);
    outline-offset: 3px;
    border-radius: var(--sf-r-sm);
}

.lien-evitement {
    position: absolute;
    left: -9999px;
    background: var(--sf-violet);
    color: #fff;
    padding: var(--sf-gap-sm) var(--sf-gap-lg);
    border-radius: var(--sf-r-sm);
    z-index: 100;
}
.lien-evitement:focus { left: var(--sf-gap); top: var(--sf-gap); }

.conteneur { width: min(100% - 2.5rem, 1140px); margin-inline: auto; }

a { color: var(--sf-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- En-tete ---------- */
.entete {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--sf-line-soft);
    background: color-mix(in srgb, var(--sf-void) 88%, transparent);
    backdrop-filter: blur(8px);
}
.entete__interieur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-gap-lg);
    min-height: 68px;
    flex-wrap: wrap;
}
.marque { font-weight: 700; font-size: 1.25rem; color: var(--sf-text); }
.marque:hover { text-decoration: none; }
.marque__academy { color: var(--sf-violet-bright); }

.nav-principale { display: flex; align-items: center; gap: var(--sf-gap-lg); }
.nav-principale a { color: var(--sf-text-dim); }
.nav-principale a:hover { color: var(--sf-text); text-decoration: none; }

/* ---------- Boutons ---------- */
.bouton {
    display: inline-block;
    padding: .6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--sf-r);
    font-family: var(--sf-font);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform var(--sf-fast) var(--sf-ease),
                box-shadow var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease);
}
.bouton:hover { text-decoration: none; transform: translateY(-1px); }

.bouton--principal {
    background: linear-gradient(135deg, var(--sf-violet), var(--sf-violet-bright));
    color: #fff;
}
.bouton--principal:hover { box-shadow: var(--sf-glow); }

.bouton--discret {
    background: var(--sf-violet-soft);
    border-color: var(--sf-line);
    color: var(--sf-text-dim);
}
.bouton--discret:hover { border-color: var(--sf-violet); color: var(--sf-text); }

/* ---------- Alertes ---------- */
.alerte {
    margin: var(--sf-gap) 0;
    padding: var(--sf-gap-sm) var(--sf-gap);
    border-radius: var(--sf-r);
    border-left: 3px solid var(--sf-line);
    background: var(--sf-surface);
}
.alerte--succes { border-left-color: var(--sf-ok); }
.alerte--erreur { border-left-color: var(--sf-danger); }
.alerte--info   { border-left-color: var(--sf-cyan); }

/* ---------- Heros ---------- */
.heros { padding: 5rem 0 3.5rem; }
.heros__surtitre {
    margin: 0 0 var(--sf-gap-sm);
    font-family: var(--sf-font);
    color: var(--sf-violet-bright);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .82rem;
}
.heros__titre {
    margin: 0 0 var(--sf-gap-lg);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -.03em;
}
.heros__texte { max-width: 62ch; color: var(--sf-text-dim); font-size: 1.05rem; }
.heros__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-gap-sm);
    margin: 2rem 0 var(--sf-gap);
}
.heros__promesse { color: var(--sf-text-faint); font-size: .9rem; }

/* ---------- Principes ---------- */
.principes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sf-gap-lg);
    padding-bottom: 4rem;
}
.principe {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-lg);
    padding: var(--sf-gap-lg);
    transition: border-color var(--sf-fast) var(--sf-ease);
}
.principe:hover { border-color: var(--sf-line); }
.principe h2 { margin: 0 0 var(--sf-gap-xs); font-size: 1.15rem; color: var(--sf-text); }
.principe p  { margin: 0; color: var(--sf-text-dim); font-size: .95rem; }

/* ---------- Page d'erreur ---------- */
.section-erreur { padding: 6rem 0; text-align: center; }
.section-erreur__code {
    margin: 0;
    font-family: var(--sf-font-mono);
    font-size: 4rem;
    line-height: 1;
    color: var(--sf-violet);
    text-shadow: var(--sf-glow);
}
.section-erreur__message {
    max-width: 55ch;
    margin: var(--sf-gap) auto var(--sf-gap-lg);
    color: var(--sf-text-dim);
}

/* ---------- Pied ---------- */
.pied {
    border-top: 1px solid var(--sf-line-soft);
    padding: 2.5rem 0;
    color: var(--sf-text-faint);
    font-size: .9rem;
}
.pied__promesse { color: var(--sf-text-dim); }

/* Respecte le reglage systeme de reduction des animations. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =============================================================================
   PARCOURS : catalogue, sommaire, lecon
   ========================================================================== */

.fil-ariane {
    margin: 0 0 var(--sf-gap-sm);
    color: var(--sf-text-faint);
    font-size: .88rem;
}
.fil-ariane a { color: var(--sf-text-dim); }

.badge-version {
    display: inline-block;
    padding: .15em .5em;
    border-radius: var(--sf-r-sm);
    background: var(--sf-violet-soft);
    color: var(--sf-violet-bright);
    font-family: var(--sf-font-mono);
    font-size: .5em;
    vertical-align: middle;
}

/* ---------- Catalogue ---------- */
.section-catalogue { padding: 3.5rem 0; }
.section-catalogue__intro {
    max-width: 60ch;
    margin-bottom: 2.5rem;
    color: var(--sf-text-dim);
}

.grille-langues {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sf-gap-lg);
}

.carte-langue {
    position: relative;
    display: block;
    padding: var(--sf-gap-lg);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-lg);
    background: var(--sf-surface);
    color: inherit;
    overflow: hidden;
    transition: border-color var(--sf-fast) var(--sf-ease),
                transform var(--sf-fast) var(--sf-ease);
}
.carte-langue:hover {
    border-color: var(--sf-line);
    transform: translateY(-2px);
    text-decoration: none;
}
/* Liseré de la couleur officielle du langage. */
.carte-langue__pastille {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--teinte, var(--sf-violet));
}
.carte-langue__titre {
    margin: 0 0 var(--sf-gap-xs);
    font-size: 1.4rem;
    display: flex;
    align-items: baseline;
    gap: var(--sf-gap-xs);
}
.carte-langue__version {
    font-family: var(--sf-font-mono);
    font-size: .8rem;
    color: var(--sf-text-faint);
}
.carte-langue__description {
    margin: 0 0 var(--sf-gap);
    color: var(--sf-text-dim);
    font-size: .95rem;
}
.carte-langue__chiffres {
    margin: 0;
    color: var(--sf-text-faint);
    font-size: .85rem;
}

/* ---------- Sommaire d un langage ---------- */
.entete-langue { padding: 3rem 0 1.5rem; }
.entete-langue h1 { margin: 0 0 var(--sf-gap-sm); font-size: clamp(2rem, 4vw, 2.8rem); }
.entete-langue__description { max-width: 65ch; color: var(--sf-text-dim); }
.entete-langue__chiffres { color: var(--sf-text-faint); font-size: .9rem; }

.sommaire { padding-bottom: 4rem; display: grid; gap: var(--sf-gap-lg); }

.chapitre {
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-lg);
    background: var(--sf-surface);
    overflow: hidden;
}
.chapitre__entete {
    display: flex;
    gap: var(--sf-gap);
    align-items: flex-start;
    padding: var(--sf-gap-lg);
    border-bottom: 1px solid var(--sf-line-soft);
}
.chapitre__numero {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sf-violet-soft);
    color: var(--sf-violet-bright);
    font-family: var(--sf-font);
    font-weight: 700;
}
.chapitre__titre { margin: 0 0 .2rem; font-size: 1.2rem; }
.chapitre__description { margin: 0; color: var(--sf-text-dim); font-size: .92rem; }

.liste-lecons { margin: 0; padding: 0; list-style: none; }
.lecon-item + .lecon-item { border-top: 1px solid var(--sf-line-soft); }
.lecon-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-gap);
    padding: .85rem var(--sf-gap-lg);
    color: var(--sf-text);
}
.lecon-item a:hover { background: var(--sf-surface-2); text-decoration: none; }
.lecon-item__exercices {
    flex: 0 0 auto;
    color: var(--sf-text-faint);
    font-size: .82rem;
}

/* ---------- Page de lecon ---------- */
.page-lecon { padding: 2.5rem 0 4rem; max-width: 860px; }
.page-lecon h1 { margin: 0 0 2rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* Contenu issu du Markdown : styles portes par les balises generees. */
.contenu-lecon { font-size: 1.03rem; line-height: 1.75; }
.contenu-lecon > * + * { margin-top: 1.2em; }
.contenu-lecon h2 { margin-top: 2.4em; font-size: 1.5rem; }
.contenu-lecon h3 {
    margin-top: 2em;
    font-size: 1.15rem;
    color: var(--sf-violet-bright);
}
.contenu-lecon p { color: var(--sf-text-dim); }
.contenu-lecon strong { color: var(--sf-text); }
.contenu-lecon ul, .contenu-lecon ol { padding-left: 1.4em; color: var(--sf-text-dim); }
.contenu-lecon li + li { margin-top: .4em; }

/* Code en ligne */
.contenu-lecon code {
    padding: .12em .4em;
    border-radius: var(--sf-r-sm);
    background: var(--sf-surface-2);
    color: var(--sf-cyan);
    font-family: var(--sf-font-mono);
    font-size: .9em;
}

/* Blocs de code : defilement horizontal a l interieur du bloc, jamais de la page */
.contenu-lecon pre {
    margin: 1.5em 0;
    padding: var(--sf-gap);
    border: 1px solid var(--sf-line-soft);
    border-left: 3px solid var(--sf-violet);
    border-radius: var(--sf-r);
    background: var(--sf-void);
    overflow-x: auto;
}
.contenu-lecon pre code {
    padding: 0;
    background: none;
    color: var(--sf-text);
    font-size: .88rem;
    line-height: 1.6;
}

.contenu-lecon table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}
.contenu-lecon th, .contenu-lecon td {
    padding: .5em .7em;
    border: 1px solid var(--sf-line-soft);
    text-align: left;
}
.contenu-lecon th { background: var(--sf-surface-2); }

/* ---------- Exercices rattaches a la lecon ---------- */
.bloc-exercices {
    margin-top: 3.5rem;
    padding: var(--sf-gap-lg);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r-lg);
    background: var(--sf-surface);
}
.bloc-exercices h2 { margin: 0 0 var(--sf-gap-xs); font-size: 1.25rem; }
.bloc-exercices__consigne { margin: 0 0 var(--sf-gap); color: var(--sf-text-dim); font-size: .93rem; }

.liste-exercices { margin: 0; padding: 0; list-style: none; }
.exercice-item {
    display: flex;
    align-items: center;
    gap: var(--sf-gap-sm);
    padding: .7rem 0;
}
.exercice-item + .exercice-item { border-top: 1px solid var(--sf-line-soft); }
.exercice-item--verrouille { opacity: .55; }
.exercice-item__cadenas { flex: 0 0 auto; font-size: .9rem; }
.exercice-item__titre { flex: 1 1 auto; }
.exercice-item__xp {
    flex: 0 0 auto;
    color: var(--sf-text-faint);
    font-family: var(--sf-font-mono);
    font-size: .8rem;
}

.exercice-item__difficulte {
    flex: 0 0 auto;
    padding: .12em .55em;
    border-radius: var(--sf-r-sm);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.badge-facile    { background: rgba(45, 212, 167, .15); color: var(--sf-ok); }
.badge-moyen     { background: rgba(245, 165, 36, .15); color: var(--sf-warn); }
.badge-difficile { background: rgba(255, 77, 109, .15); color: var(--sf-danger); }

/* ---------- Navigation entre lecons ---------- */
.navigation-lecon {
    display: flex;
    justify-content: space-between;
    gap: var(--sf-gap);
    margin-top: 3rem;
}
.navigation-lecon__lien {
    flex: 0 1 48%;
    padding: var(--sf-gap);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-r);
    background: var(--sf-surface);
    color: var(--sf-text);
    transition: border-color var(--sf-fast) var(--sf-ease);
}
.navigation-lecon__lien:hover { border-color: var(--sf-violet); text-decoration: none; }
.navigation-lecon__lien--suivant { text-align: right; }
.navigation-lecon__sens {
    display: block;
    color: var(--sf-text-faint);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.navigation-lecon__titre { display: block; margin-top: .2rem; font-weight: 600; }

@media (max-width: 640px) {
    .navigation-lecon { flex-direction: column; }
    .navigation-lecon__lien { flex: 1 1 auto; text-align: left; }
}

/* =============================================================================
   FORMULAIRES ET PAGES DE COMPTE
   ========================================================================== */

.page-auth {
    max-width: 420px;
    padding: 4rem 0;
}
.page-auth h1 { margin: 0 0 var(--sf-gap-sm); font-size: 1.9rem; }
.page-auth__intro { margin: 0 0 2rem; color: var(--sf-text-dim); font-size: .95rem; }
.page-auth__bascule {
    margin-top: 2rem;
    color: var(--sf-text-faint);
    font-size: .9rem;
    text-align: center;
}

.formulaire { display: grid; gap: var(--sf-gap-lg); }

.champ { display: grid; gap: .4rem; }
.champ label {
    font-family: var(--sf-font);
    font-weight: 600;
    font-size: .95rem;
}
.champ input {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r);
    background: var(--sf-void);
    color: var(--sf-text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--sf-fast) var(--sf-ease);
}
.champ input:focus { border-color: var(--sf-violet); }
/* Le contour de focus reste visible : il ne remplace pas la bordure, il s ajoute. */
.champ input:focus-visible { outline: 2px solid var(--sf-cyan); outline-offset: 2px; }

.champ__aide { margin: 0; color: var(--sf-text-faint); font-size: .84rem; line-height: 1.5; }
.champ__erreur { margin: 0; color: var(--sf-danger); font-size: .86rem; }
.champ--erreur input { border-color: var(--sf-danger); }

.bouton--large { width: 100%; padding: .8rem 1.2rem; font-size: 1rem; }

/* Deconnexion : un formulaire POST deguise en lien de navigation. */
.forme-deconnexion { display: inline; margin: 0; }
.lien-bouton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--sf-text-dim);
    font: inherit;
    cursor: pointer;
}
.lien-bouton:hover { color: var(--sf-text); text-decoration: underline; }

/* ---------- Connexion externe ---------- */
.oauth { display: grid; gap: var(--sf-gap-sm); margin-bottom: var(--sf-gap-lg); }

.oauth__bouton {
    display: block;
    padding: .7rem 1rem;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r);
    background: var(--sf-surface-2);
    color: var(--sf-text);
    font-family: var(--sf-font);
    font-weight: 600;
    text-align: center;
    transition: border-color var(--sf-fast) var(--sf-ease),
                background var(--sf-fast) var(--sf-ease);
}
.oauth__bouton:hover {
    border-color: var(--sf-violet);
    background: var(--sf-violet-soft);
    text-decoration: none;
}

/* Separateur « ou » : un trait de part et d autre du mot. */
.oauth__separateur {
    display: flex;
    align-items: center;
    gap: var(--sf-gap);
    margin: 0 0 var(--sf-gap-lg);
    color: var(--sf-text-faint);
    font-size: .85rem;
}
.oauth__separateur::before,
.oauth__separateur::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--sf-line-soft);
}