:root {
    --bleu: #2357c6;
    --bleu-fonce: #1a44a0;
    --bleu-pale: #eaf0fc;
    --or: #f5b700;
    --or-fonce: #d99a00;
    --or-pale: #fff6d6;
    --vert: #2e9e5b;
    --vert-fonce: #23824a;
    --vert-pale: #e7f6ed;
    --rouge: #e0464a;
    --rouge-fonce: #c23236;
    --rouge-pale: #fdeeee;
    --orange: #f07d2c;
    --encre: #1d2433;
    --texte: #3d4757;
    --gris: #6b7686;
    --gris-clair: #a9b2bf;
    --ligne: #e3e7ee;
    --fond: #f6f7fa;
    --blanc: #fff;
    --rayon: 16px;
    --ombre: 0 1px 2px rgba(29, 36, 51, .06), 0 4px 16px rgba(29, 36, 51, .05);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--texte);
    background: var(--fond);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[dir="rtl"] body { font-family: 'Cairo', 'Nunito', system-ui, sans-serif; }
[lang="en"], [lang="fr"] { font-family: 'Nunito', system-ui, sans-serif; }
[lang="ar"] { font-family: 'Cairo', system-ui, sans-serif; }

h1, h2, h3 { color: var(--encre); line-height: 1.2; margin: 0 0 .5em; font-weight: 800; }
p { margin: 0 0 1em; }
a { color: var(--bleu); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button { font-family: inherit; }
.icone { flex-shrink: 0; }
[hidden] { display: none !important; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: 14px;
    background: var(--bleu);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--bleu-fonce);
    transition: transform .08s, box-shadow .08s, background .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
}
[dir="rtl"] .btn { letter-spacing: 0; }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bleu-fonce); }
.btn:disabled, .btn[disabled] {
    background: #e5e8ee;
    color: var(--gris-clair);
    box-shadow: 0 4px 0 #d3d8e0;
    cursor: default;
    filter: none;
    transform: none;
}
.btn-contour { background: var(--blanc); color: var(--bleu); box-shadow: 0 0 0 2px var(--ligne) inset, 0 4px 0 var(--ligne); }
.btn-contour:active { box-shadow: 0 0 0 2px var(--ligne) inset, 0 1px 0 var(--ligne); }
.btn-gris { background: var(--blanc); color: var(--gris); box-shadow: 0 0 0 2px var(--ligne) inset, 0 4px 0 var(--ligne); }
.btn-gris:active { box-shadow: 0 0 0 2px var(--ligne) inset, 0 1px 0 var(--ligne); }
.btn-petit { padding: 8px 14px; font-size: 14px; border-radius: 12px; }
.btn-grand { padding: 15px 28px; font-size: 17px; }
.btn-bloc { display: flex; width: 100%; }

.barre {
    background: var(--blanc);
    border-bottom: 2px solid var(--ligne);
    position: sticky;
    top: 0;
    z-index: 20;
}
.barre-dedans {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 66px;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--bleu);
    font-family: 'Nunito', sans-serif;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -.02em;
    text-decoration: none !important;
}
.logo img { width: 38px; height: 38px; }
.logo-petit { font-size: 20px; }
.logo-petit img { width: 30px; height: 30px; }

.nav-principale { display: flex; gap: 4px; margin-inline-start: 12px; }
.nav-principale a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    color: var(--gris);
    font-weight: 800;
    text-decoration: none;
    border: 2px solid transparent;
}
.nav-principale a:hover { background: var(--fond); }
.nav-principale a.actif { color: var(--bleu); background: var(--bleu-pale); border-color: #c9d7f5; }

.barre-droite { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 900;
    font-size: 17px;
    padding: 4px 8px;
    border-radius: 10px;
}
.pastille-cours {
    min-width: 36px;
    justify-content: center;
    background: var(--bleu-pale);
    color: var(--bleu);
    border: 2px solid #c9d7f5;
    font-size: 14px;
}
.pastille-serie { color: var(--orange); }
.pastille-serie.eteinte { color: var(--gris-clair); }
.pastille-xp { color: var(--or-fonce); }

.choix-langue { position: relative; }
.choix-langue summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--gris);
    font-weight: 800;
    font-size: 15px;
    padding: 8px 10px;
    border-radius: 12px;
}
.choix-langue summary::-webkit-details-marker { display: none; }
.choix-langue summary:hover { background: var(--fond); }
.choix-langue-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 14px;
    padding: 6px;
    min-width: 160px;
    box-shadow: var(--ombre);
    z-index: 30;
}
.pied .choix-langue-menu { top: auto; bottom: calc(100% + 6px); }
.choix-langue-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--texte);
    text-decoration: none;
}
.choix-langue-menu a:hover { background: var(--fond); }
.choix-langue-menu a.actif { color: var(--bleu); background: var(--bleu-pale); }

main.contenu {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 16px 56px;
}

.alerte {
    padding: 12px 16px;
    border-radius: 12px;
    margin: 0 auto 16px;
    font-weight: 700;
    border: 2px solid transparent;
}
.alerte-erreur { background: var(--rouge-pale); color: var(--rouge-fonce); border-color: #f6caca; }
.alerte-succes { background: var(--vert-pale); color: var(--vert-fonce); border-color: #bfe5cc; }
.alerte-info { background: var(--bleu-pale); color: var(--bleu-fonce); border-color: #c9d7f5; }

.carte {
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 28px;
    margin-bottom: 20px;
}
.carte-etroite { max-width: 480px; margin-inline: auto; }
.carte-moyenne { max-width: 680px; margin-inline: auto; }
.centre { text-align: center; }
.titre-carte { font-size: 28px; text-align: center; margin-bottom: 20px; }
.intro { color: var(--gris); font-size: 17px; text-align: center; }
.petit { color: var(--gris); font-size: 15px; margin: 6px 0 0; }

.formulaire label {
    display: block;
    font-weight: 800;
    color: var(--encre);
    margin: 16px 0 6px;
    font-size: 15px;
}
.formulaire input, .formulaire select, #test input {
    width: 100%;
    padding: 13px 14px;
    font: inherit;
    font-size: 17px;
    color: var(--encre);
    background: var(--fond);
    border: 2px solid var(--ligne);
    border-radius: 12px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.formulaire input:focus, .formulaire select:focus, #test input:focus { border-color: var(--bleu); background: var(--blanc); }
#test input.invalide { border-color: var(--rouge); }
.formulaire fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.formulaire legend {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 18px;
    color: var(--encre);
    margin-bottom: 12px;
}
.num-etape {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bleu);
    color: #fff;
    font-size: 15px;
}
.formulaire .btn { margin-top: 18px; }
.aide { color: var(--gris); font-size: 14px; margin: 6px 0 0; }
.aide-droite { text-align: end; }
.sous-lien { text-align: center; margin: 20px 0 0; color: var(--gris); }

.choix-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choix-3 { grid-template-columns: repeat(3, 1fr); }
.choix-carte {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 12px 14px;
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 14px;
    box-shadow: 0 3px 0 var(--ligne);
    cursor: pointer;
    font-size: 16px !important;
    transition: border-color .15s, background .15s;
}
.choix-3 .choix-carte { justify-content: center; }
.choix-carte input { position: absolute; opacity: 0; pointer-events: none; }
.choix-carte:has(input:checked) { border-color: var(--bleu); background: var(--bleu-pale); box-shadow: 0 3px 0 #b7c9f0; color: var(--bleu); }
.choix-carte:has(input:focus-visible) { outline: 3px solid #9db6ea; outline-offset: 2px; }
.choix-carte small { display: block; color: var(--gris); font-weight: 700; font-size: 13px; }
.choix-carte.bientot { opacity: .55; cursor: not-allowed; }
.choix-carte.masque { display: none !important; }

.badge-cours {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}
.badge-en { background: var(--bleu); }
.badge-fr { background: #3a7bd5; background: linear-gradient(90deg, #2357c6 0 33%, #fff 33% 66%, var(--rouge) 66%); color: var(--encre); text-shadow: 0 0 3px #fff; }
.badge-ar { background: var(--vert); font-size: 20px; }

.bloc { padding: 40px 0; }
.bloc-gris { background: var(--blanc); border: 2px solid var(--ligne); border-radius: 24px; padding: 40px 28px; }
.bloc-titre { font-size: 28px; text-align: center; margin-bottom: 28px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.carte-competence {
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 22px;
}
.carte-competence h3 { font-size: 19px; margin: 14px 0 6px; }
.carte-competence p { color: var(--gris); font-size: 15px; margin: 0; }
.rond-icone {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--bleu-pale);
    color: var(--bleu);
    flex-shrink: 0;
}
.rond-icone.petit { width: 38px; height: 38px; border-radius: 12px; }
.rond-icone.grand { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 14px; display: grid; }
.rond-or { background: var(--or-pale); color: var(--or-fonce); }
.competence-ecoute .rond-icone { background: #e8f1fd; color: #2f6fd6; }
.competence-lecture .rond-icone { background: var(--vert-pale); color: var(--vert); }
.competence-parole .rond-icone { background: #fdeee4; color: var(--orange); }
.competence-ecriture .rond-icone { background: var(--or-pale); color: var(--or-fonce); }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.etapes li { text-align: center; }
.etapes h3 { font-size: 19px; margin: 12px 0 6px; }
.etapes p { color: var(--gris); font-size: 15px; margin: 0; }
.etape-num {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bleu);
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 4px 0 var(--bleu-fonce);
}

.bandeau-certif {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--or-pale);
    border: 2px solid #f3dc8d;
    border-radius: 22px;
    padding: 26px 28px;
}
.bandeau-certif h2 { font-size: 23px; margin-bottom: 4px; }
.bandeau-certif p { margin: 0; color: #6b5a26; }
.bandeau-certif .btn { margin-inline-start: auto; flex-shrink: 0; }
.bandeau-certif .rond-or { background: var(--blanc); width: 64px; height: 64px; }

.liste-cours { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.carte-cours {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 16px;
    padding: 14px 20px;
    min-width: 220px;
}
.carte-cours strong { color: var(--encre); font-size: 18px; }
.carte-cours small { margin-inline-start: auto; font-weight: 800; color: var(--vert); font-size: 13px; }
.carte-cours.bientot small { color: var(--gris); }
.carte-cours.bientot .badge-cours { filter: grayscale(.6); opacity: .7; }

.pied { background: var(--blanc); border-top: 2px solid var(--ligne); }
.pied-dedans {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pied-marque { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pied-marque p { margin: 0; color: var(--gris); font-size: 15px; }
.pied-liens { display: flex; align-items: center; gap: 16px; font-size: 15px; }
.pied-liens > a { color: var(--gris); }

.bienvenue-logo { display: block; margin: 0 auto 14px; }
.choix-depart { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.carte-choix {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 18px;
    border: 2px solid var(--ligne);
    border-radius: 18px;
    box-shadow: 0 4px 0 var(--ligne);
    color: var(--encre);
    text-decoration: none !important;
    transition: border-color .15s, background .15s, transform .08s;
}
.carte-choix:hover { border-color: #b7c9f0; background: var(--bleu-pale); }
.carte-choix:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ligne); }
.carte-choix strong { font-size: 18px; }
.carte-choix small { color: var(--gris); font-weight: 600; font-size: 14px; }

.tableau { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.cote { position: sticky; top: 92px; }
.carte-cote { padding: 20px; }
.carte-cote h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin-bottom: 12px; }
.carte-cote h3 .icone { color: var(--orange); }
.carte-test h3 .icone { color: var(--or-fonce); }
.carte-test .btn { margin-top: 14px; }
.jauge { height: 16px; background: var(--ligne); border-radius: 99px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--or); border-radius: 99px; min-width: 0; transition: width .4s; }
.semaine { display: flex; justify-content: space-between; gap: 6px; }
.jour { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.jour-barre { display: flex; align-items: flex-end; width: 100%; max-width: 26px; height: 54px; background: var(--fond); border-radius: 8px; overflow: hidden; }
.jour-barre span { display: block; width: 100%; background: var(--orange); border-radius: 8px; min-height: 0; }
.jour.actif .jour-barre span { min-height: 8px; }
.jour small { font-weight: 800; color: var(--gris); font-size: 13px; }
.niveau-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    background: var(--bleu);
    color: #fff;
    font-weight: 900;
    font-size: 15px;
}

.unite { margin-bottom: 36px; }
.unite-entete {
    border-radius: 18px;
    padding: 18px 22px;
    color: #fff;
    background: var(--bleu);
    box-shadow: 0 4px 0 var(--bleu-fonce);
    margin-bottom: 46px;
}
.unite-entete small { font-weight: 800; opacity: .85; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.unite-entete h2 { color: #fff; font-size: 23px; margin: 2px 0 4px; }
.unite-entete p { margin: 0; opacity: .9; font-size: 15px; }
.unite-1 .unite-entete { background: var(--vert); box-shadow: 0 4px 0 var(--vert-fonce); }
.unite-2 .unite-entete { background: #8a5cd0; box-shadow: 0 4px 0 #6d43b0; }
.unite-3 .unite-entete { background: var(--orange); box-shadow: 0 4px 0 #cf6519; }

.chemin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.noeud {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transform: translateX(calc(var(--decalage) * 46px));
    width: 160px;
}
[dir="rtl"] .noeud { transform: translateX(calc(var(--decalage) * -46px)); }
.noeud-rond {
    display: grid;
    place-items: center;
    width: 72px;
    height: 68px;
    border-radius: 50%;
    background: #e5e8ee;
    color: var(--gris-clair);
    box-shadow: 0 6px 0 #cfd5de;
    text-decoration: none !important;
    transition: transform .08s, box-shadow .08s, filter .15s;
}
a.noeud-rond:hover { filter: brightness(1.06); }
a.noeud-rond:active { transform: translateY(5px); box-shadow: 0 1px 0 #cfd5de; }
.noeud-ouverte .noeud-rond, .noeud-courante .noeud-rond { background: var(--bleu); color: #fff; box-shadow: 0 6px 0 var(--bleu-fonce); }
.noeud-faite .noeud-rond { background: var(--or); color: #fff; box-shadow: 0 6px 0 var(--or-fonce); }
.unite-1 .noeud-ouverte .noeud-rond, .unite-1 .noeud-courante .noeud-rond { background: var(--vert); box-shadow: 0 6px 0 var(--vert-fonce); }
.unite-2 .noeud-ouverte .noeud-rond, .unite-2 .noeud-courante .noeud-rond { background: #8a5cd0; box-shadow: 0 6px 0 #6d43b0; }
.unite-3 .noeud-ouverte .noeud-rond, .unite-3 .noeud-courante .noeud-rond { background: var(--orange); box-shadow: 0 6px 0 #cf6519; }
.noeud-courante .noeud-rond { outline: 6px solid rgba(35, 87, 198, .16); outline-offset: 4px; }
.noeud-titre { font-weight: 800; font-size: 14px; color: var(--encre); text-align: center; line-height: 1.25; }
.noeud-fermee .noeud-titre { color: var(--gris-clair); }
.bulle {
    position: absolute;
    bottom: calc(100% + 8px);
    background: var(--blanc);
    border: 2px solid var(--ligne);
    color: var(--bleu);
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 12px;
    white-space: nowrap;
    animation: flotte 1.6s ease-in-out infinite;
}
.bulle::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--blanc);
    border-right: 2px solid var(--ligne);
    border-bottom: 2px solid var(--ligne);
    transform: translate(-50%, -5px) rotate(45deg);
}
@keyframes flotte { 50% { transform: translateY(-5px); } }
.a-suivre { text-align: center; color: var(--gris); font-weight: 700; }

.page-pleine { background: var(--blanc); }
.lecteur { min-height: 100vh; display: flex; flex-direction: column; }
.lecteur-haut {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 22px 16px 10px;
}
.btn-icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--gris-clair);
    cursor: pointer;
}
.btn-icone:hover { background: var(--fond); color: var(--gris); }
.progression { flex: 1; height: 16px; background: var(--ligne); border-radius: 99px; overflow: hidden; }
.progression span { display: block; height: 100%; width: 0; background: var(--vert); border-radius: 99px; transition: width .45s cubic-bezier(.3, 1.3, .6, 1); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08); }
.lecteur-scene {
    flex: 1;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}
.entree { animation: entree .28s ease-out; }
@keyframes entree { from { opacity: 0; transform: translateY(10px); } }
.consigne { font-size: 26px; margin-bottom: 22px; }

.lecteur-bas { border-top: 2px solid var(--ligne); background: var(--blanc); transition: background .15s; position: sticky; bottom: 0; }
.lecteur-bas-dedans {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 112px;
}
.lecteur-boutons { display: flex; gap: 12px; margin-inline-start: auto; }
.lecteur-boutons .btn { min-width: 150px; }
.retour-texte { flex: 1; min-width: 0; }
.retour-texte p { margin: 4px 0 0; font-size: 17px; }
.retour-titre { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; }
.retour-titre svg { background: var(--blanc); border-radius: 50%; padding: 4px; width: 38px; height: 38px; }
.lecteur-bas.ok { background: var(--vert-pale); border-color: #bfe5cc; }
.lecteur-bas.ok .retour-texte, .lecteur-bas.ok .retour-titre { color: var(--vert-fonce); }
.lecteur-bas.ok #valider { background: var(--vert); box-shadow: 0 4px 0 var(--vert-fonce); }
.lecteur-bas.ko { background: var(--rouge-pale); border-color: #f6caca; }
.lecteur-bas.ko .retour-texte, .lecteur-bas.ko .retour-titre { color: var(--rouge-fonce); }
.lecteur-bas.ko #valider { background: var(--rouge); box-shadow: 0 4px 0 var(--rouge-fonce); }
.gras { font-weight: 900; }
.transcription { opacity: .85; font-style: italic; }

.cartes-mots { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.carte-mot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    text-align: start;
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--ligne);
    cursor: pointer;
    font: inherit;
    transition: border-color .15s, background .15s;
}
.carte-mot:hover { border-color: #b7c9f0; background: var(--bleu-pale); }
.carte-mot:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ligne); }
.carte-mot-son { color: var(--bleu); }
.carte-mot-son svg { width: 22px; height: 22px; }
.carte-mot-cible { font-size: 21px; font-weight: 900; color: var(--encre); }
.carte-mot-sens { color: var(--gris); font-weight: 700; }
.astuce {
    margin-top: 22px;
    background: var(--or-pale);
    border: 2px solid #f3dc8d;
    border-radius: 16px;
    padding: 16px 18px;
}
.astuce strong { display: flex; align-items: center; gap: 8px; color: #8a6a00; margin-bottom: 6px; }
.astuce p { margin: 0; color: #5f4f1d; }

.enonce {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 2px solid var(--ligne);
    border-radius: 18px;
}
.enonce-texte { font-size: 22px; font-weight: 800; color: var(--encre); }
.btn-son {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 14px;
    background: var(--bleu);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--bleu-fonce);
    flex-shrink: 0;
    transition: transform .08s, box-shadow .08s;
}
.btn-son:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bleu-fonce); }
.btn-son:disabled { background: #e5e8ee; color: var(--gris-clair); box-shadow: 0 4px 0 #d3d8e0; }
.btn-son.tres-grand { width: 108px; height: 108px; border-radius: 26px; box-shadow: 0 6px 0 var(--bleu-fonce); }
.btn-son.tres-grand svg { width: 52px; height: 52px; }
.btn-son.lent { width: 64px; height: 64px; border-radius: 18px; }
[dir="rtl"] .btn-son svg { transform: scaleX(-1); }
.zone-ecoute { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin: 10px 0 30px; }
.zone-ecoute.colonne { flex-direction: column; align-items: center; gap: 10px; }

.options { display: grid; gap: 12px; }
.options-grille { grid-template-columns: 1fr 1fr; }
.option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    text-align: start;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    color: var(--encre);
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--ligne);
    cursor: pointer;
    transition: border-color .12s, background .12s, transform .08s;
}
.option:hover { background: var(--fond); }
.option:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ligne); }
.option-touche {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--ligne);
    border-radius: 8px;
    font-size: 14px;
    color: var(--gris-clair);
    flex-shrink: 0;
}
.option.choisie { border-color: #8fb0ee; background: var(--bleu-pale); color: var(--bleu-fonce); box-shadow: 0 4px 0 #8fb0ee; }
.option.choisie .option-touche { border-color: #8fb0ee; color: var(--bleu); }
.option.juste { border-color: #8fd3a8; background: var(--vert-pale); color: var(--vert-fonce); box-shadow: 0 4px 0 #8fd3a8; }
.option.faux { border-color: #f1a5a7; background: var(--rouge-pale); color: var(--rouge-fonce); box-shadow: 0 4px 0 #f1a5a7; animation: secoue .3s; }
.option:disabled { cursor: default; }
@keyframes secoue { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.texte-lecture {
    background: var(--fond);
    border: 2px solid var(--ligne);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 18px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--encre);
}
.texte-lecture p:last-child { margin: 0; }
.question-lecture { font-weight: 900; font-size: 19px; color: var(--encre); }
.phrase-trous { font-size: 23px; font-weight: 800; color: var(--encre); margin-bottom: 18px; line-height: 1.7; }
.trou {
    display: inline-block;
    min-width: 90px;
    border-bottom: 3px solid var(--bleu);
    color: var(--bleu);
    text-align: center;
    padding: 0 6px;
    margin: 0 4px;
}
.traduction { color: var(--gris); font-weight: 700; margin-top: -8px; }

.ligne-reponse {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 64px;
    padding: 8px 0;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--ligne);
    background: repeating-linear-gradient(transparent 0 58px, var(--ligne) 58px 60px);
}
.banque { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tuile {
    padding: 10px 14px;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    color: var(--encre);
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--ligne);
    cursor: pointer;
}
.tuile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ligne); }
.tuile.fantome { background: var(--ligne); color: transparent; box-shadow: none; cursor: default; }

.champ-saisie {
    width: 100%;
    padding: 16px;
    font: inherit;
    font-size: 19px;
    color: var(--encre);
    background: var(--fond);
    border: 2px solid var(--ligne);
    border-radius: 16px;
    resize: none;
    outline: none;
}
.champ-saisie:focus { border-color: var(--bleu); background: var(--blanc); }

.zone-micro { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; text-align: center; }
.btn-micro {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border: 0;
    border-radius: 50%;
    background: var(--bleu);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 0 var(--bleu-fonce);
}
.btn-micro.actif { background: var(--rouge); box-shadow: 0 6px 0 var(--rouge-fonce), 0 0 0 0 rgba(224, 70, 74, .5); animation: pulse 1.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 6px 0 var(--rouge-fonce), 0 0 0 18px rgba(224, 70, 74, 0); } }
.etat-micro { color: var(--gris); font-weight: 700; margin: 0; min-height: 1.5em; }
.entendu { margin: 0; font-weight: 800; padding: 8px 14px; border-radius: 12px; }
.entendu:empty { display: none; }
.entendu.bien { background: var(--vert-pale); color: var(--vert-fonce); }
.entendu.moyen { background: var(--or-pale); color: #8a6a00; }
.phrase-orale { font-size: 24px; font-weight: 800; color: var(--encre); text-align: center; padding: 16px; border: 2px dashed var(--ligne); border-radius: 16px; }

.paires { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.colonne-paires { display: grid; gap: 12px; align-content: start; }
.colonne-paires .option { justify-content: center; text-align: center; }

.ecran-fin { text-align: center; padding-top: 30px; }
.fin-etoile { color: var(--or); animation: tourne .7s cubic-bezier(.3, 1.4, .6, 1); }
@keyframes tourne { from { transform: scale(.2) rotate(-90deg); opacity: 0; } }
.ecran-fin h1 { font-size: 32px; color: var(--or-fonce); margin: 10px 0 26px; }
.stats-fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
.stat {
    border: 2px solid var(--ligne);
    border-radius: 16px;
    overflow: hidden;
    background: var(--blanc);
    text-align: center;
}
.stat > span { display: block; padding: 6px 8px; font-weight: 900; font-size: 13px; text-transform: uppercase; color: #fff; background: var(--bleu); }
.stat strong { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; font-size: 24px; font-weight: 900; color: var(--encre); }
.stat-xp > span { background: var(--or); }
.stat-xp strong .icone { color: var(--or-fonce); }
.stat-precision > span { background: var(--vert); }
.stat-serie > span { background: var(--orange); }
.stat-serie strong .icone { color: var(--orange); }
.stats-fin .stat-xp { border-color: var(--or); }
.stats-fin .stat-precision { border-color: var(--vert); }
.stats-fin .stat-serie { border-color: var(--orange); }
.fin-boutons { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 0 auto; }

.parties-test { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.parties-test li { display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px solid var(--ligne); border-radius: 14px; }
.parties-test strong { color: var(--encre); font-size: 15px; line-height: 1.2; }
.parties-test small { margin-inline-start: auto; color: var(--gris); font-weight: 700; white-space: nowrap; }
#test-intro { text-align: center; }
#test-intro .aide, #test-intro label { text-align: start; }
#test-intro label { display: block; font-weight: 800; color: var(--encre); margin: 18px 0 6px; }
#test-intro .btn { margin-top: 20px; }
.test-entete { margin-bottom: 22px; }
.test-infos { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.etiquette {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 99px;
    background: var(--bleu-pale);
    color: var(--bleu);
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.test-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.test-actions.centre { justify-content: center; }
.intro-partie { text-align: center; padding: 20px 0; }
.intro-partie h2 { font-size: 28px; margin: 14px 0 10px; }
.intro-partie p { color: var(--gris); }
.roue { width: 54px; height: 54px; margin: 10px auto 16px; border: 6px solid var(--ligne); border-top-color: var(--bleu); border-radius: 50%; animation: roue .8s linear infinite; }
@keyframes roue { to { transform: rotate(360deg); } }

.resultat-test { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.grand-niveau {
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    margin: 16px auto 18px;
    border-radius: 50%;
    background: var(--bleu);
    color: #fff;
    font-size: 46px;
    font-weight: 900;
    box-shadow: 0 6px 0 var(--bleu-fonce), 0 0 0 10px var(--bleu-pale);
    animation: tourne .6s cubic-bezier(.3, 1.4, .6, 1);
}

.certificat-cadre { overflow-x: auto; padding-bottom: 6px; }
.certificat {
    width: 100%;
    max-width: 960px;
    min-width: 680px;
    margin: 0 auto;
    background: #fffdf7;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(29, 36, 51, .1);
    color: var(--encre);
}
.certificat-bord {
    border: 3px solid var(--bleu);
    outline: 1px solid var(--or);
    outline-offset: -10px;
    padding: 34px 50px 26px;
    text-align: center;
    background:
        radial-gradient(circle at 0 0, var(--or-pale) 0 70px, transparent 71px),
        radial-gradient(circle at 100% 100%, var(--bleu-pale) 0 90px, transparent 91px);
}
.certificat-haut { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.certificat-marque { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 26px; color: var(--bleu); }
.certificat-titre { font-size: 32px; margin: 0; letter-spacing: .01em; }
.certificat-soustitre { color: var(--gris); font-weight: 700; font-style: italic; margin: 2px 0 18px; }
.certificat-texte { margin: 0; color: var(--gris); font-size: 17px; }
.certificat-nom {
    font-size: 38px;
    font-weight: 900;
    color: var(--bleu-fonce);
    margin: 4px auto 8px;
    padding: 0 24px 4px;
    border-bottom: 2px solid var(--or);
    display: inline-block;
    min-width: 50%;
}
.certificat-niveau { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 6px; }
.certificat-niveau strong {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--bleu);
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    box-shadow: 0 0 0 5px var(--or-pale), 0 0 0 7px var(--or);
}
.certificat-niveau span { font-size: 24px; font-weight: 900; color: var(--encre); }
.certificat-desc { max-width: 620px; margin: 6px auto 18px; color: var(--texte); font-size: 15px; }
.certificat-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.certificat-scores > div { border: 1.5px solid var(--ligne); border-radius: 12px; padding: 10px 8px; background: var(--blanc); }
.certificat-scores span { display: block; font-size: 13px; font-weight: 800; color: var(--gris); }
.certificat-scores strong { display: block; font-size: 20px; font-weight: 900; color: var(--encre); margin: 2px 0 6px; }
.certificat-scores .non-evalue { font-size: 14px; color: var(--gris-clair); }
.mini-jauge { display: block !important; height: 6px; background: var(--ligne); border-radius: 99px; overflow: hidden; }
.mini-jauge span { display: block; height: 100%; background: var(--vert); }
.certificat-bas { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.certificat-bas small { display: block; color: var(--gris); font-weight: 700; font-size: 13px; }
.certificat-bas strong { font-size: 16px; }
.sceau {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: 3px double var(--or-fonce);
    color: var(--or-fonce);
    font-weight: 900;
    font-size: 12px;
    padding-top: 10px;
}
.sceau img { width: 40px; height: 40px; }
.certificat-note { margin: 18px 0 0; font-size: 11.5px; color: var(--gris); }
.actions-certif { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.profil { max-width: 720px; margin: 0 auto; }
.profil-haut { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.profil-haut h1 { margin: 0; font-size: 30px; }
.avatar-lettre {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--bleu-pale);
    border: 3px solid #c9d7f5;
    color: var(--bleu);
    font-size: 38px;
    font-weight: 900;
}
.stats-profil { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.stats-profil .stat > span { background: transparent; color: var(--gris); padding-top: 12px; }
.stats-profil .stat strong { padding-top: 4px; font-size: 22px; }
.titre-section { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.titre-section .icone { color: var(--bleu); }
.liste-certifs { list-style: none; padding: 0; margin: 0; }
.liste-certifs li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 2px solid var(--ligne); }
.liste-certifs li:first-child { border-top: 0; }
.liste-certifs a { margin-inline-start: auto; }
.profil .formulaire .btn { margin-top: 20px; }

@media (max-width: 900px) {
    .tableau { grid-template-columns: 1fr; }
    .cote { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .cote .carte { margin: 0; }
    .carte-test { grid-column: 1 / -1; }
    .grille-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .barre-dedans { gap: 10px; min-height: 58px; padding: 8px 12px; }
    .logo { font-size: 21px; }
    .logo img { width: 32px; height: 32px; }
    .nav-principale {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        justify-content: space-around;
        background: var(--blanc);
        border-top: 2px solid var(--ligne);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        z-index: 25;
    }
    .nav-principale a { flex-direction: column; gap: 2px; font-size: 12px; padding: 6px 10px; }
    body:has(.nav-principale) { padding-bottom: 72px; }
    .pastille-cours { display: none; }
    .bloc { padding: 26px 0; }
    .bloc-gris { padding: 28px 16px; }
    .bloc-titre { font-size: 23px; }
    .etapes { grid-template-columns: 1fr; }
    .bandeau-certif { flex-direction: column; text-align: center; padding: 22px 18px; }
    .bandeau-certif .btn { margin: 0; width: 100%; }
    .carte { padding: 22px 18px; }
    .choix-depart { grid-template-columns: 1fr; }
    .choix-3 { grid-template-columns: 1fr 1fr 1fr; }
    .titre-carte { font-size: 24px; }
    .noeud { transform: translateX(calc(var(--decalage) * 32px)); }
    [dir="rtl"] .noeud { transform: translateX(calc(var(--decalage) * -32px)); }
    .consigne { font-size: 22px; }
    .lecteur-scene { padding-top: 14px; }
    .lecteur-bas-dedans { flex-direction: column; align-items: stretch; min-height: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
    .lecteur-boutons { margin: 0; }
    .lecteur-boutons .btn { flex: 1; min-width: 0; }
    .options-grille { grid-template-columns: 1fr; }
    .stats-profil { grid-template-columns: 1fr 1fr; }
    .parties-test { grid-template-columns: 1fr; }
    .pied-dedans { flex-direction: column; text-align: center; }
    .pied-marque { justify-content: center; flex-direction: column; gap: 6px; }
    .grand-niveau { width: 100px; height: 100px; font-size: 38px; }
}

@media (max-width: 480px) {
    .grille-4 { grid-template-columns: 1fr; }
    .cote { grid-template-columns: 1fr; }
    .stats-fin { gap: 8px; }
    .stat strong { font-size: 20px; }
    .choix-langue summary span { display: none; }
}

@media print {
    @page { size: A4 landscape; margin: 8mm; }
    body { background: #fff; display: block; }
    .barre, .pied, .no-print, .actions-certif, .alerte { display: none !important; }
    main.contenu { padding: 0; max-width: none; }
    .certificat-cadre { overflow: visible; padding: 0; }
    .certificat { box-shadow: none; max-width: none; min-width: 0; padding: 0; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
    padding: 40px 0 48px;
}
.pilule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 99px;
    background: var(--or-pale);
    color: #8a6a00;
    font-weight: 800;
    font-size: 14px;
    border: 2px solid #f3dc8d;
    margin-bottom: 18px;
}
.hero h1 { font-size: clamp(36px, 5.2vw, 58px); letter-spacing: -.025em; line-height: 1.08; margin-bottom: 18px; }
[dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.3; }
.hero-sous { font-size: 19px; color: var(--gris); max-width: 540px; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-preuve { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.hero-preuve p { margin: 0; color: var(--gris); font-weight: 700; font-size: 15px; }
.pile-avatars { display: flex; }
.pile-avatars img { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--fond); margin-inline-start: -12px; background: #fff; }
.pile-avatars img:first-child { margin-inline-start: 0; }

.demo { position: relative; z-index: 0; }
.demo::before {
    content: "";
    position: absolute;
    inset: 30px -14px -14px 30px;
    border-radius: 28px;
    background: var(--bleu-pale);
    z-index: -1;
}
.demo-onglets { display: flex; gap: 8px; margin-bottom: 12px; }
.demo-onglets button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 2px solid var(--ligne);
    border-radius: 99px;
    background: var(--blanc);
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    color: var(--gris);
    cursor: pointer;
}
.demo-onglets button.actif { border-color: #9db6ea; color: var(--bleu); background: var(--bleu-pale); }
.demo-carte {
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(35, 87, 198, .1);
    overflow: hidden;
}
.demo-haut { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; }
.demo-haut .progression { height: 12px; }
.demo-essai { font-weight: 900; font-size: 12px; text-transform: uppercase; color: var(--or-fonce); letter-spacing: .04em; white-space: nowrap; }
.demo-scene { padding: 18px 20px 20px; min-height: 290px; }
.demo-consigne { font-weight: 900; font-size: 21px; color: var(--encre); margin: 0 0 14px; }
.demo-enonce { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; color: var(--encre); margin-bottom: 14px; }
.demo-enonce .btn-son { width: 50px; height: 50px; }
.demo-options { display: grid; gap: 9px; }
.demo-options .option { padding: 11px 14px; font-size: 17px; }
.demo-trad { color: var(--gris); font-weight: 700; margin: -4px 0 12px; }
.demo-scene .ligne-reponse { min-height: 56px; margin-bottom: 16px; background: none; }
.demo-scene .tuile { font-size: 16px; padding: 8px 12px; }
.demo-scene .zone-micro { margin-top: 4px; }
.btn-micro.petit { width: 72px; height: 72px; }
.demo-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 2px solid var(--ligne);
    min-height: 74px;
    transition: background .15s;
}
.demo-retour { margin: 0; font-weight: 900; font-size: 16px; }
.demo-bas.ok { background: var(--vert-pale); color: var(--vert-fonce); }
.demo-bas.ok .btn { background: var(--vert); box-shadow: 0 4px 0 var(--vert-fonce); }
.demo-bas.ko { background: var(--rouge-pale); color: var(--rouge-fonce); }
.demo-bas.ko .btn { background: var(--rouge); box-shadow: 0 4px 0 var(--rouge-fonce); }
.demo-fin { text-align: center; padding-top: 8px; }
.demo-fin h3 { font-size: 22px; margin: 6px 0; }
.demo-fin p { color: var(--gris); }
.demo-fin .fin-etoile { color: var(--or); }
.lien-bouton { display: block; margin: 14px auto 0; border: 0; background: none; color: var(--bleu); font: inherit; font-weight: 800; cursor: pointer; }
.lien-bouton:hover { text-decoration: underline; }

.bande-chiffres {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 22px;
    padding: 22px;
}
.bande-chiffres div { text-align: center; padding: 4px 8px; }
.bande-chiffres div + div { border-inline-start: 2px solid var(--ligne); }
.bande-chiffres strong { display: block; font-size: 28px; font-weight: 900; color: var(--bleu); line-height: 1.2; }
.bande-chiffres span { color: var(--gris); font-weight: 700; font-size: 14px; }
.bloc-sous { text-align: center; color: var(--gris); max-width: 620px; margin: -16px auto 28px; }

a.carte-competence { display: block; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
a.carte-competence:hover { transform: translateY(-4px); border-color: #c9d7f5; box-shadow: var(--ombre); }
.lien-fleche { display: inline-block; margin-top: 12px; color: var(--bleu); font-weight: 900; font-size: 15px; }
[dir="rtl"] .lien-fleche span, [dir="rtl"] .carte-cours .lien-fleche { display: inline-block; transform: scaleX(-1); }

.bloc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bloc-duo.inverse .duo-texte { order: 2; }
.duo-texte h2 { font-size: 32px; margin: 12px 0; }
.duo-texte p { color: var(--gris); font-size: 18px; }
.etiquette-or { background: var(--or-pale); color: #8a6a00; }
.liste-coches { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.liste-coches li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--encre); }
.liste-coches .icone { color: #fff; background: var(--vert); border-radius: 50%; padding: 3px; }

.telephone {
    justify-self: center;
    width: 270px;
    padding: 12px;
    background: var(--encre);
    border-radius: 40px;
    box-shadow: 0 24px 50px rgba(29, 36, 51, .22);
}
.telephone-ecran { background: var(--fond); border-radius: 30px; overflow: hidden; padding: 14px 14px 26px; min-height: 440px; }
.tel-barre { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 14px; margin-bottom: 14px; }
.tel-flamme { margin-inline-start: auto; color: var(--orange); display: flex; align-items: center; gap: 3px; }
.tel-xp { color: var(--or-fonce); display: flex; align-items: center; gap: 3px; }
.tel-unite { background: var(--vert); color: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 3px 0 var(--vert-fonce); margin-bottom: 26px; }
.tel-unite small { display: block; font-weight: 800; font-size: 11px; opacity: .85; text-transform: uppercase; }
.tel-unite strong { font-size: 16px; }
.tel-chemin { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tel-noeud {
    display: grid;
    place-items: center;
    width: 54px;
    height: 50px;
    border-radius: 50%;
    background: #e5e8ee;
    color: var(--gris-clair);
    box-shadow: 0 5px 0 #cfd5de;
    transform: translateX(calc(var(--d) * 30px));
}
.tel-noeud.fait { background: var(--or); color: #fff; box-shadow: 0 5px 0 var(--or-fonce); }
.tel-noeud.courant { background: var(--vert); color: #fff; box-shadow: 0 5px 0 var(--vert-fonce); outline: 5px solid rgba(46, 158, 91, .18); outline-offset: 3px; }

.mini-certif {
    justify-self: center;
    width: 100%;
    max-width: 440px;
    background: #fffdf7;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(29, 36, 51, .12);
    transform: rotate(-2deg);
}
[dir="rtl"] .mini-certif { transform: rotate(2deg); }
.mini-certif-bord { border: 2px solid var(--bleu); outline: 1px solid var(--or); outline-offset: -7px; padding: 22px 20px; text-align: center; }
.mini-certif-marque { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; color: var(--bleu); font-family: 'Nunito', sans-serif; }
.mini-certif-titre { font-weight: 900; color: var(--encre); margin: 8px 0 4px; }
.mini-certif-nom { font-size: 24px; font-weight: 900; color: var(--bleu-fonce); border-bottom: 2px solid var(--or); display: inline-block; padding: 0 16px; margin: 4px 0 12px; }
.mini-certif-niveau { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 900; color: var(--encre); }
.mini-certif-niveau span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--bleu); color: #fff; box-shadow: 0 0 0 4px var(--or-pale), 0 0 0 6px var(--or); }
.mini-certif-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.mini-certif-scores i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--vert) var(--v), var(--ligne) var(--v)); }

.vitrine-avatars { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 760px; margin: 0 auto; }
.vitrine-avatars a { display: block; border-radius: 50%; transition: transform .2s cubic-bezier(.3, 1.6, .6, 1); }
.vitrine-avatars a:hover { transform: translateY(-6px) scale(1.08) rotate(-4deg); }
.vitrine-avatars img { display: block; width: 76px; height: 76px; }

a.carte-cours { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.carte-cours:hover { border-color: #9db6ea; transform: translateY(-3px); }
.carte-cours > span:nth-child(2) { display: flex; flex-direction: column; }
.carte-cours > span:nth-child(2) small { margin: 0; color: var(--gris); font-weight: 700; font-size: 14px; }
.carte-cours .lien-fleche { margin: 0; margin-inline-start: auto; font-size: 20px; }
.badge-es { background: linear-gradient(180deg, #c8102e 0 25%, #f5b700 25% 75%, #c8102e 75%); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.badge-mini { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }

.faq { max-width: 720px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--blanc); border: 2px solid var(--ligne); border-radius: 16px; padding: 0 20px; }
.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 0;
    font-weight: 900;
    color: var(--encre);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--bleu); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--gris); margin: 0 0 16px; }

.bande-finale {
    text-align: center;
    background: var(--bleu);
    color: #fff;
    border-radius: 28px;
    padding: 44px 24px;
    margin: 24px 0 8px;
    box-shadow: 0 6px 0 var(--bleu-fonce);
}
.bande-finale img { margin-bottom: 8px; }
.bande-finale h2 { color: #fff; font-size: 32px; margin-bottom: 6px; }
.bande-finale p { opacity: .9; font-size: 18px; margin-bottom: 22px; }
.btn-blanc { background: #fff; color: var(--bleu); box-shadow: 0 4px 0 #c9d7f5; }
.btn-blanc:active { box-shadow: 0 1px 0 #c9d7f5; }

.avatar { border-radius: 50%; display: block; object-fit: cover; background: #fff; }
.avatar-barre { display: block; border-radius: 50%; border: 2px solid var(--ligne); transition: border-color .15s; }
.avatar-barre:hover { border-color: #9db6ea; }
.avatar-barre .avatar { width: 38px; height: 38px; }
.avatar-profil { position: relative; display: block; border-radius: 50%; flex-shrink: 0; }
.avatar-grand { width: 96px; height: 96px; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--ligne); }
.avatar-crayon {
    position: absolute;
    bottom: 0;
    inset-inline-end: -2px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bleu);
    color: #fff;
    border: 3px solid var(--fond);
}
.cours-actuel { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--encre); }
.grille-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 16px 0; }
.choix-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border: 2px solid var(--ligne);
    border-radius: 16px;
    background: var(--blanc);
    font: inherit;
    font-weight: 800;
    font-size: 13px;
    color: var(--gris);
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ligne);
    transition: border-color .15s, background .15s, transform .08s;
}
.choix-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.choix-avatar:hover { background: var(--fond); }
.choix-avatar:active { transform: translateY(2px); }
.choix-avatar.actif { border-color: var(--bleu); background: var(--bleu-pale); color: var(--bleu); box-shadow: 0 3px 0 #9db6ea; }
.zone-photo { display: flex; flex-wrap: wrap; gap: 10px; }
.zone-photo form { margin: 0; }
.zone-photo label.btn { margin: 0; cursor: pointer; }
.fichier-cache { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choix-avatars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.choix-avatar-mini { position: relative; display: block !important; margin: 0 !important; cursor: pointer; border-radius: 50%; }
.choix-avatar-mini input { position: absolute; opacity: 0; pointer-events: none; }
.choix-avatar-mini img { display: block; width: 100%; height: auto; border-radius: 50%; border: 3px solid transparent; transition: transform .15s, border-color .15s; }
.choix-avatar-mini:hover img { transform: scale(1.06); }
.choix-avatar-mini:has(input:checked) img { border-color: var(--bleu); transform: scale(1.08); box-shadow: 0 0 0 3px #c9d7f5; }
.choix-avatar-mini:has(input:focus-visible) img { outline: 3px solid #9db6ea; outline-offset: 2px; }

.etiquette-essai { background: var(--or-pale); color: #8a6a00; white-space: nowrap; }
.essai-fin { max-width: 460px; margin: 0 auto 26px; }
.essai-fin h2 { font-size: 22px; margin: 6px 0; }
.essai-fin p { color: var(--gris); }
.essai-precision { font-weight: 900; color: var(--vert-fonce) !important; }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 34px; padding-top: 16px; }
    .demo { max-width: 520px; width: 100%; margin: 0 auto; }
    .bloc-duo { grid-template-columns: 1fr; gap: 30px; }
    .bloc-duo.inverse .duo-texte { order: 0; }
    .bande-chiffres { grid-template-columns: 1fr 1fr; }
    .bande-chiffres div:nth-child(3) { border-inline-start: 0; }
}

@media (max-width: 760px) {
    .hero { text-align: center; }
    .hero-sous { margin-inline: auto; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero-preuve { justify-content: center; flex-direction: column; gap: 8px; }
    .demo { text-align: start; }
    .demo::before { inset: 24px -6px -8px 14px; }
    .demo-scene { min-height: 270px; }
    .duo-texte { text-align: center; }
    .liste-coches { justify-items: start; max-width: 360px; margin-inline: auto; }
    .duo-texte h2 { font-size: 26px; }
    .bande-chiffres strong { font-size: 23px; }
    .vitrine-avatars img { width: 62px; height: 62px; }
    .choix-avatars { grid-template-columns: repeat(4, 1fr); }
    .bande-finale h2 { font-size: 26px; }
    .lecteur-haut .etiquette-essai { display: none; }
    .profil-haut { align-items: center; }
    .avatar-grand { width: 80px; height: 80px; }
}

a.pastille-cours { text-decoration: none; gap: 2px; padding-inline-end: 4px; }
a.pastille-cours:hover { background: #dce6fb; }
.badge-de { background: linear-gradient(180deg, #1d2433 0 33%, #d63a3a 33% 66%, #f5b700 66%); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.badge-ru { background: linear-gradient(180deg, #fff 0 33%, #2357c6 33% 66%, #d63a3a 66%); color: var(--encre); text-shadow: 0 0 3px #fff; }
.badge-zh { background: #d63a3a; color: #f5b700; font-size: 20px; }
.badge-it { background: linear-gradient(90deg, #2e9e5b 0 33%, #fff 33% 66%, #d63a3a 66%); color: var(--encre); text-shadow: 0 0 3px #fff; }
.badge-pt { background: linear-gradient(90deg, #2e9e5b 0 40%, #d63a3a 40%); color: #fff; }
.badge-tr { background: #d63a3a; color: #fff; }
.badge-ja { background: #fff; color: #d63a3a; border: 2px solid var(--ligne); font-size: 20px; }

.page-langues { max-width: 860px; margin: 0 auto; }
.grille-langues { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 24px 0 36px; }
.carte-langue {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 20px;
    box-shadow: 0 4px 0 var(--ligne);
}
.carte-langue.actuelle { border-color: #9db6ea; box-shadow: 0 4px 0 #9db6ea; }
.carte-langue-haut { display: flex; align-items: center; gap: 12px; }
.carte-langue-haut .badge-cours { width: 48px; height: 48px; font-size: 17px; }
.carte-langue-haut h2 { font-size: 20px; margin: 0; }
.carte-langue-haut small { color: var(--gris); font-weight: 700; }
.carte-langue-haut .niveau-badge { margin-inline-start: auto; }
.jauge-verte span { background: var(--vert); }
.titre-bientot { justify-content: center; color: var(--gris); }
.titre-bientot .icone { display: none; }

.page-activites { max-width: 920px; margin: 0 auto; }
.activites-haut { text-align: center; margin-bottom: 22px; }
.activites-haut h1 { font-size: 30px; margin-bottom: 6px; }
.xp-gain { color: var(--or-fonce); font-weight: 900; }
.xp-gain.gros { font-size: 26px; margin: 6px 0 16px; }

.mot-jour { border-color: #f3dc8d; background: linear-gradient(180deg, var(--or-pale), var(--blanc) 120px); }
.mot-jour-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mot-jour-tete h2 { font-size: 21px; margin: 0; }
.mot-jour-tete small { color: var(--gris); font-weight: 700; }
.mot-jour-tete .rond-or { background: var(--blanc); }
.mot-jour-mot { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 18px; font-size: 34px; font-weight: 900; color: var(--encre); }
.mot-jour .options { grid-template-columns: repeat(3, 1fr); }
.mot-jour .option { justify-content: center; text-align: center; }
.mot-jour-retour { text-align: center; font-weight: 800; margin: 14px 0 0; min-height: 1.5em; }
.mot-jour.reussi .mot-jour-retour { color: var(--vert-fonce); }
.mot-jour.rate .mot-jour-retour { color: var(--gris); }

.titre-rubrique { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 30px 0 16px; }
.titre-rubrique h2 { display: flex; align-items: center; gap: 10px; font-size: 24px; margin: 0; }
.titre-rubrique h2 .icone { color: var(--bleu); }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres a {
    padding: 6px 14px;
    border-radius: 99px;
    border: 2px solid var(--ligne);
    background: var(--blanc);
    color: var(--gris);
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
}
.filtres a.actif { border-color: #9db6ea; background: var(--bleu-pale); color: var(--bleu); }

.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.carte-article {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    background: var(--blanc);
    border: 2px solid var(--ligne);
    border-radius: 18px;
    box-shadow: 0 4px 0 var(--ligne);
    color: inherit;
    text-decoration: none !important;
    transition: transform .12s, border-color .12s;
}
.carte-article:hover { transform: translateY(-3px); border-color: #c9d7f5; }
.carte-article h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 21px; line-height: 1.3; margin: 2px 0 0; }
[dir="rtl"] .carte-article h3:not([dir="ltr"]), .carte-article h3[dir="rtl"] { font-family: 'Cairo', sans-serif; }
.carte-article.a-la-une { grid-column: 1 / -1; padding: 24px 26px; border-color: #c9d7f5; background: linear-gradient(135deg, var(--bleu-pale), var(--blanc) 60%); }
.carte-article.a-la-une h3 { font-size: 28px; }
.carte-article.lu { opacity: .8; }
.article-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag-rubrique {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--bleu);
}
.rubrique-afrique { background: #c96f1e; }
.rubrique-monde { background: #2357c6; }
.rubrique-science { background: #6d43b0; }
.rubrique-sante { background: #d6455a; }
.rubrique-sport { background: #2e9e5b; }
.rubrique-culture { background: #b8456e; }
.rubrique-technologie { background: #1f7a8c; }
.rubrique-environnement { background: #3d8b37; }
.rubrique-economie { background: #8a6a00; }
.rubrique-education { background: #3a5ba0; }
.rubrique-histoire { background: #7a5230; }
.rubrique-voyage { background: #0e8f8f; }
.petit-badge { font-size: 12px; padding: 1px 8px; }
.article-lu { display: inline-flex; align-items: center; gap: 4px; color: var(--vert-fonce); font-weight: 800; font-size: 13px; }
.article-trad { color: var(--gris); font-weight: 700; margin: 0; font-size: 15px; }
.article-chapeau { color: var(--texte); margin: 4px 0 0; font-size: 17px; }
.article-pied { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; color: var(--gris); font-size: 14px; font-weight: 700; }

.article { max-width: 720px; margin: 0 auto; }
.lien-retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--gris); }
[dir="rtl"] .lien-retour .icone { transform: scaleX(-1); }
.article h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(28px, 4.5vw, 40px); line-height: 1.2; margin: 12px 0 6px; }
.article h1[dir="rtl"] { font-family: 'Cairo', sans-serif; }
.article .article-chapeau { font-size: 19px; font-weight: 700; color: var(--encre); border-inline-start: 4px solid var(--or); padding-inline-start: 14px; margin: 18px 0; }
.article-outils { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.article-outils .btn { text-transform: none; letter-spacing: 0; }
#tout-ecouter.actif { background: var(--rouge); box-shadow: 0 4px 0 var(--rouge-fonce); }
.article-corps { margin: 20px 0; }
.paragraphe { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 14px; transition: background .2s; }
.paragraphe.lu-maintenant { background: var(--or-pale); }
.btn-son.mini { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 3px 0 var(--bleu-fonce); }
.paragraphe-texte { font-size: 19px; line-height: 1.75; color: var(--encre); margin: 0; }
.paragraphe-trad { margin: 8px 0 0; color: var(--gris); font-size: 16px; border-inline-start: 3px solid var(--ligne); padding-inline-start: 10px; }
.mot-glose {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-bottom: 2px dotted var(--bleu);
    color: var(--bleu-fonce);
}
.mot-glose:hover { background: var(--bleu-pale); }
.bulle-glose {
    position: fixed;
    z-index: 50;
    padding: 10px 14px;
    background: var(--encre);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px;
    box-shadow: var(--ombre);
}
.glossaire { background: var(--blanc); border: 2px solid var(--ligne); border-radius: 18px; padding: 18px 20px; margin-bottom: 20px; }
.glossaire h2 { font-size: 19px; margin-bottom: 10px; }
.glossaire dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.glossaire dt { font-weight: 900; color: var(--encre); }
.glossaire dd { margin: 0; color: var(--gris); font-size: 15px; }
.quiz-article h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; }
.quiz-article h2 .icone { color: var(--bleu); }
.quiz-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.quiz-retour { margin: 0; font-weight: 800; }
.quiz-retour.ok { color: var(--vert-fonce); }
.quiz-retour.ko { color: var(--rouge-fonce); }
.quiz-fin { text-align: center; }
.quiz-fin .fin-etoile { color: var(--or); }

@media (max-width: 760px) {
    .mot-jour .options { grid-template-columns: 1fr; }
    .mot-jour-mot { font-size: 28px; }
    .carte-article.a-la-une h3 { font-size: 23px; }
    .paragraphe-texte { font-size: 18px; }
    .quiz-bas { flex-direction: column; align-items: stretch; }
    .nav-principale a { padding: 6px 4px; font-size: 11px; }
}