/* Campus TSE — design sobre, qualité perçue : fond neutre, typo système, un seul accent (vert TSE). */

:root {
  /* charte tutosurexcel.com : gris perle, vert nuit, jaune */
  --fond-clair: #EFF1F3;
  --bg: var(--fond-clair);
  --card: #FFFFFF;
  --ink: #1D241F;
  --muted: #5C6A60;
  --green: #1D6B45;
  --green-deep: #14532D;
  --vert-nuit: #003223;           /* encre "vert nuit" : s'inverse en mode sombre */
  --vert-nuit-surface: #003223;   /* surfaces vert nuit (ruban, héros) : identiques dans les deux thèmes */
  --jaune: #FEC700;
  --survol: rgba(0, 50, 35, .05);
  --controle-survol: #DEDEE3;
  --surface-2: #FAFAFC;
  --green-tint: #EAF3EE;
  --hairline: rgba(0, 50, 35, 0.10);
  --gris-controle: #ECE7DA;
  --red: #C0392B;
  --red-tint: #FBEDEB;
  --ombre: 0 1px 2px rgba(0, 50, 35, .04), 0 8px 24px -16px rgba(0, 50, 35, .14);
  --radius: 16px;
  --topbar-h: 66px;
}

/* ---------------------------------------------------------------- Parcours apprenant 2026 */

.derniere-session {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px;
  margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: 14px;
  background: color-mix(in srgb, var(--card) 78%, var(--green-tint)); color: var(--muted); font-size: .8rem;
}
.derniere-session-icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-tint); color: var(--green); font-size: 1.15rem; }
.derniere-session b { display: block; color: var(--ink); font-size: .86rem; }
.derniere-session p { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.derniere-session > span:last-child { white-space: nowrap; }

.objectif-compact { display: flex; align-items: center; gap: 10px; min-width: min(360px, 55%); }
.objectif-compact > div { flex: 1; }
.objectif-compact b { display: block; margin-bottom: 7px; font-size: .76rem; }
.objectif-compact .jauge { height: 7px; }

.competence-carte, .fiche-recap { display: flex; align-items: center; gap: 13px; padding: 16px; }
.competence-carte div, .fiche-recap div { min-width: 0; flex: 1; }
.competence-carte b, .competence-carte small, .fiche-recap b, .fiche-recap small { display: block; }
.competence-carte b, .fiche-recap b { font-size: .86rem; line-height: 1.35; }
.competence-carte small, .fiche-recap small { margin-top: 4px; color: var(--muted); font-size: .69rem; }
.fiche-recap.verrouillee { opacity: .65; }

.rappels-page { max-width: 900px; margin: 0 auto; }
.rappel-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.rappel-question { margin: 0; padding: 20px; border: 1px solid var(--hairline); }
.rappel-question-entete { display: flex; flex-direction: column; width: 100%; padding: 0 0 14px; }
.rappel-question-entete small { color: var(--green); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; overflow-wrap: anywhere; }
.rappel-question-entete b { margin-top: 7px; color: var(--vert-nuit); font-size: 1.05rem; line-height: 1.4; overflow-wrap: anywhere; }
.rappel-question label { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding: 13px 14px; border: 1px solid var(--hairline); border-radius: 11px; background: var(--surface-2); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.rappel-question label:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.rappel-question input { accent-color: var(--green); }
.rappel-bilan, .rappel-vide { display: flex; align-items: center; gap: 20px; margin: 24px 0; padding: 26px; }
.rappel-bilan-icone, .rappel-vide > span { display: grid; place-items: center; flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%; background: var(--green-tint); color: var(--green); font-size: 1.8rem; font-weight: 900; }
.rappel-bilan h2, .rappel-vide h2 { margin-bottom: 5px; color: var(--vert-nuit); }
.rappel-bilan p, .rappel-vide p { color: var(--muted); }
.rappel-corrections { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.rappel-corrections article { padding: 18px; border-left: 4px solid var(--green); }
.rappel-corrections article.fausse { border-left-color: var(--jaune); }
.rappel-corrections article > span { color: var(--green); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.rappel-corrections h2 { margin: 5px 0; font-size: 1rem; }
.rappel-corrections p { margin: 8px 0; color: var(--muted); line-height: 1.5; }

.quiz-correction-aide { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.quiz-explication { margin-top: 10px; padding: 13px; border-radius: 10px; background: var(--green-tint); color: var(--ink); font-size: .82rem; line-height: 1.5; }
.quiz-explication p { margin-bottom: 9px; }

.verifier-defi { margin-top: 20px; padding: 20px; border-color: color-mix(in srgb, var(--jaune) 45%, transparent); }
.verifier-defi h2 { margin: 5px 0; color: var(--vert-nuit); font-size: 1.1rem; }
.verifier-defi p { color: var(--muted); }
.verifier-defi form { display: flex; gap: 8px; margin-top: 14px; }
.verifier-defi input { flex: 1; min-width: 0; }
.defi-resultat { margin-top: 12px; padding: 12px; border-radius: 9px; font-size: .82rem; }
.defi-resultat.reussi { background: var(--green-tint); color: var(--green-deep); }
.defi-resultat.arevoir { background: color-mix(in srgb, var(--jaune) 12%, var(--card)); color: var(--ink); }

.communaute-lecon { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.communaute-lecon h2 { margin-top: 4px; color: var(--vert-nuit); font-size: 1.05rem; }
.communaute-lecon-liste { display: flex; flex-direction: column; gap: 8px; }
.communaute-lecon-liste button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; padding: 12px; border: 1px solid var(--hairline); border-radius: 11px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.communaute-lecon-liste button span { color: var(--green); font-size: .68rem; font-weight: 800; }
.communaute-lecon-liste button small { color: var(--muted); font-size: .68rem; }
.communaute-filtre-formation select { min-width: 190px; min-height: 42px; }
.thread-contexte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.thread-contexte span, .question-contexte { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: var(--green-tint); color: var(--green-deep); font-size: .68rem; font-weight: 700; }
.questions-similaires { margin: -3px 0 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--jaune) 40%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--jaune) 8%, var(--card)); }
.questions-similaires > b { display: block; margin-bottom: 7px; color: var(--vert-nuit); font-size: .78rem; }
.questions-similaires button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--hairline); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.questions-similaires button span { color: var(--green); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.defi-semaine p { margin: 7px 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.defi-semaine a { font-size: .78rem; font-weight: 800; }
.defi-admin { padding: 14px; }
.defi-admin summary { color: var(--vert-nuit); font-size: .78rem; font-weight: 800; cursor: pointer; }
.defi-admin form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.defi-admin textarea { min-height: 92px; resize: vertical; }

.annexe-fiche { border-color: color-mix(in srgb, var(--jaune) 48%, var(--hairline)); background: color-mix(in srgb, var(--jaune) 8%, var(--card)); }
.annexe-fiche .annexe-icone { background: color-mix(in srgb, var(--jaune) 22%, var(--card)); }
.quiz-fiche-recap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 24px 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--jaune) 42%, var(--hairline)); border-radius: 12px; background: color-mix(in srgb, var(--jaune) 7%, var(--card)); }
.quiz-fiche-recap > span { font-size: 1.35rem; }
.quiz-fiche-recap b, .quiz-fiche-recap small { display: block; }
.quiz-fiche-recap b { color: var(--vert-nuit); font-size: .78rem; }
.quiz-fiche-recap small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.formation-releve { display: inline-block; margin-top: 12px; color: var(--green); font-size: .76rem; font-weight: 800; }
.fin-chemin-chiffres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.fin-chemin-chiffres span { padding: 8px 11px; border-radius: 999px; background: var(--green-tint); color: var(--muted); font-size: .7rem; }
.fin-chemin-chiffres b { color: var(--green-deep); }
.derniere-session small { display: block; margin-top: 5px; color: var(--muted); font-size: .7rem; line-height: 1.45; }

.bilan-maitrise { padding: 24px; }
.bilan-maitrise-liste > div { display: grid; grid-template-columns: 105px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid var(--hairline); }
.bilan-maitrise-list p b, .bilan-maitrise-liste small { display: block; }
.bilan-maitrise-liste p b { font-size: .88rem; }
.bilan-maitrise-liste small { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.bilan-statut { display: inline-flex; justify-content: center; padding: 5px 8px; border-radius: 999px; background: var(--green-tint); color: var(--green); font-size: .68rem; font-weight: 800; }
.bilan-statut.a-consolider { background: color-mix(in srgb, var(--jaune) 15%, var(--card)); color: #725800; }
.bilan-maitrise footer { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: .7rem; }
.bilan-maitrise footer i { height: 2px; background: linear-gradient(90deg, var(--green), var(--jaune)); }
.certificat-visibilite { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; padding: 16px 18px; cursor: pointer; }
.certificat-visibilite b, .certificat-visibilite small { display: block; }
.certificat-visibilite small { margin-top: 4px; color: var(--muted); font-size: .72rem; }
.certificat-visibilite input { width: 20px; height: 20px; accent-color: var(--green); }
.toast.jalon { border-color: color-mix(in srgb, var(--jaune) 55%, transparent); background: color-mix(in srgb, var(--jaune) 9%, var(--card)); }

@media (max-width: 780px) {
  .objectif-compact { min-width: 0; width: 100%; }
  .progression-outil .btn { grid-column: 2; justify-self: start; }
  .quiz-fiche-recap { grid-template-columns: auto minmax(0, 1fr); margin-inline: 14px; }
  .quiz-fiche-recap .btn { grid-column: 2; justify-self: start; }
  .derniere-session { grid-template-columns: auto minmax(0, 1fr); }
  .derniere-session > span:last-child { grid-column: 2; }
  .bilan-maitrise-liste > div { grid-template-columns: 90px minmax(0, 1fr); }
  .bilan-maitrise-liste > div > strong { grid-column: 2; }
  .bilan-maitrise footer { grid-template-columns: 1fr auto; }
  .bilan-maitrise footer i { display: none; }
  .verifier-defi form { flex-direction: column; }
}

/* ---------------------------------------------------------------- Espace Entreprise */

.nav-entreprise, .nav-entree-entreprise, .entreprise-parametres, .entreprise-retour { display: none !important; }
body.session-admin:not(.vue-entreprise) .nav-entree-entreprise { display: flex !important; }
body.vue-entreprise .nav-campus { display: none !important; }
body.vue-entreprise .nav-entreprise { display: flex !important; }
body.vue-entreprise .entreprise-parametres { display: flex !important; }
body.vue-entreprise.session-admin .entreprise-retour { display: flex !important; }
body.vue-entreprise .theme-laterale,
body.vue-entreprise .coach-bulle { display: none !important; }
body.tosa-en-cours .coach-bulle { display: none !important; }

.entreprise-parametres, .entreprise-retour {
  align-items: center; gap: 7px; padding: 9px 8px; border-top: 1px solid rgba(246, 243, 235, .1);
  color: rgba(246, 243, 235, .7); font-size: .78rem; text-decoration: none;
}
.entreprise-parametres:hover, .entreprise-retour:hover { color: #fff; background: rgba(246, 243, 235, .06); text-decoration: none; }

body.vue-entreprise .vue { width: min(1480px, calc(100% - 48px)); margin-top: 32px; }
.entreprise-page { display: flex; flex-direction: column; gap: 22px; }
.entreprise-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; }
.entreprise-entete h1 { color: var(--vert-nuit); font-size: clamp(1.65rem, 2.5vw, 2.35rem); line-height: 1.1; margin: 3px 0 8px; }
.entreprise-entete > div:first-child > p:last-child { color: var(--muted); font-size: .98rem; }
.entreprise-sur-titre { color: var(--green); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.entreprise-commandes { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.entreprise-selecteur { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .68rem; font-weight: 700; }
.entreprise-selecteur select { min-height: 40px; background: var(--card); color: var(--ink); border: 1px solid var(--hairline); border-radius: 10px; padding: 0 34px 0 11px; }
.entreprise-export { min-height: 40px; display: inline-flex; align-items: center; }
.entreprise-gestion { min-height: 40px; display: inline-flex; align-items: center; }
.entreprise-apercu { padding: 11px 14px; border: 1px solid rgba(254, 199, 0, .5); border-radius: 11px; background: #FFF8D8; color: #5C4B00; font-size: .84rem; }

.entreprise-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.entreprise-kpis article, .entreprise-carte {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--ombre);
}
.entreprise-kpis article { display: flex; align-items: flex-start; gap: 14px; min-height: 132px; padding: 20px; }
.entreprise-kpi-icone, .entreprise-contact-icone {
  flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: #E3F4EA; color: var(--green); font-size: 1.15rem; font-weight: 800;
}
.entreprise-kpis strong { display: block; color: var(--ink); font-size: clamp(1.55rem, 2vw, 2.15rem); line-height: 1; font-variant-numeric: tabular-nums; }
.entreprise-kpis h2 { margin-top: 6px; color: var(--ink); font-size: .9rem; font-weight: 720; }
.entreprise-kpis p { margin-top: 9px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.entreprise-variation { color: var(--green); font-weight: 800; }
.entreprise-variation.baisse { color: #A35B20; }

.entreprise-carte { padding: 20px; min-width: 0; }
.entreprise-carte-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; }
.entreprise-carte-entete h2, .entreprise-carte > h2 { color: var(--vert-nuit); font-size: 1.05rem; }
.entreprise-carte-entete p, .entreprise-carte > p { color: var(--muted); font-size: .78rem; line-height: 1.45; margin-top: 4px; }
.entreprise-grille-haute { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .85fr); gap: 16px; }
.entreprise-grille-basse { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .7fr); gap: 16px; }
.entreprise-legende { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; font-size: .72rem; }
.entreprise-legende i { width: 20px; border-top: 3px solid var(--green); }
.entreprise-courbe { width: 100%; height: auto; overflow: visible; }
.entreprise-grille { stroke: var(--hairline); stroke-width: 1; }
.entreprise-axe { fill: var(--muted); font-size: 10px; }
.entreprise-ligne { stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.entreprise-point { fill: var(--card); stroke: var(--green); stroke-width: 3; }
.entreprise-valeur { fill: var(--ink); font-size: 10px; font-weight: 750; }

.entreprise-actions { display: flex; flex-direction: column; }
.entreprise-action { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.entreprise-action > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-tint); color: var(--green); }
.entreprise-action.urgente > span { background: #FFF2BF; color: #806200; }
.entreprise-action b { display: block; font-size: .82rem; line-height: 1.3; }
.entreprise-action small { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; }

.entreprise-tableau { min-width: 840px; }
.entreprise-tableau th { font-size: .65rem; }
.entreprise-tableau td { vertical-align: middle; font-size: .78rem; }
.entreprise-identite { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.entreprise-identite .avatar-initiales { flex: 0 0 34px; width: 34px; height: 34px; font-size: .72rem; }
.entreprise-identite small { display: block; color: var(--muted); font-size: .66rem; margin-top: 2px; }
.entreprise-progression { display: flex; align-items: center; gap: 9px; min-width: 135px; }
.entreprise-progression > span, .entreprise-competence > span, .entreprise-competence > div > span, .entreprise-parcours-jauge > span:last-child {
  position: relative; display: block; height: 6px; flex: 1; border-radius: 20px; overflow: hidden; background: var(--surface-2);
}
.entreprise-progression i, .entreprise-competence i, .entreprise-parcours-jauge i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.entreprise-statut { display: inline-flex; padding: 5px 9px; border-radius: 999px; white-space: nowrap; font-size: .68rem; font-weight: 750; }
.entreprise-statut.excellent, .entreprise-statut.bonne_voie { color: #17613E; background: #E3F4EA; }
.entreprise-statut.a_suivre { color: #785B00; background: #FFF3C9; }
.entreprise-statut.a_relancer { color: #96392F; background: #FBE7E4; }
.entreprise-voir-tout { display: block; margin-top: 14px; text-align: center; font-size: .78rem; font-weight: 700; }
.entreprise-vide { color: var(--muted); text-align: center; padding: 30px 12px; font-size: .84rem; }

.entreprise-competences { display: flex; flex-direction: column; }
.entreprise-competence { display: flex; flex-direction: column; gap: 7px; margin: 9px 0 15px; }
.entreprise-competence > div { display: flex; justify-content: space-between; gap: 12px; font-size: .76rem; }
.entreprise-competence > div span { color: var(--muted); font-variant-numeric: tabular-nums; }
.entreprise-contact { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid rgba(254, 199, 0, .35); border-radius: 16px; background: #FFFDF6; }
.entreprise-contact > div { flex: 1; }
.entreprise-contact h2 { color: #003223; font-size: 1rem; }
.entreprise-contact p { color: #5C6A60; font-size: .78rem; margin-top: 4px; }

.entreprise-demarrage { display: flex; align-items: center; gap: 18px; border: 1px dashed rgba(29, 107, 69, .35); border-radius: 16px; padding: 22px; background: var(--green-tint); }
.entreprise-demarrage > span { font-size: 1.8rem; color: var(--green); }
.entreprise-demarrage > div { flex: 1; }
.entreprise-demarrage h2 { color: var(--vert-nuit); font-size: 1rem; }
.entreprise-demarrage p { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.entreprise-outils { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.entreprise-outils .recherche { flex: 1; max-width: 420px; }
.entreprise-outils select { min-height: 42px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-2); color: var(--ink); padding: 0 32px 0 10px; }

.entreprise-parcours-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.entreprise-parcours-carte { display: flex; flex-direction: column; gap: 20px; }
.entreprise-parcours-entete { display: flex; align-items: flex-start; gap: 12px; }
.entreprise-parcours-entete > span { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: var(--green-tint); color: var(--green); }
.entreprise-parcours-entete h2 { color: var(--vert-nuit); font-size: .95rem; line-height: 1.3; }
.entreprise-parcours-entete p { color: var(--muted); font-size: .74rem; margin-top: 3px; }
.entreprise-parcours-jauge > span:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: .76rem; color: var(--muted); }
.entreprise-parcours-carte dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.entreprise-parcours-carte dl div { padding-top: 12px; border-top: 1px solid var(--hairline); }
.entreprise-parcours-carte dt { color: var(--muted); font-size: .63rem; line-height: 1.3; }
.entreprise-parcours-carte dd { margin-top: 4px; font-weight: 750; font-size: .85rem; }

.entreprise-grille-competences, .entreprise-rapports-grille, .entreprise-parametres-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 16px; }
.entreprise-competence.grande { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 11px 0; margin: 0; border-top: 1px solid var(--hairline); }
.entreprise-competence-rang { color: rgba(29, 107, 69, .5); font-weight: 800; font-size: .72rem; }
.entreprise-competence.grande > div > div { display: flex; justify-content: space-between; font-size: .82rem; }
.entreprise-competence.grande small { display: block; margin-top: 6px; color: var(--muted); font-size: .68rem; }
.entreprise-methode, .entreprise-confidentialite { align-self: start; border-top: 4px solid var(--green); }
.entreprise-methode > span, .entreprise-confidentialite > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%; background: var(--green-tint); color: var(--green); }
.entreprise-methode p + p, .entreprise-confidentialite p + p { margin-top: 12px; }
.entreprise-rapport-principal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.entreprise-rapport-principal h2 { margin: 3px 0 8px; }
.entreprise-rapport-principal ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; margin: 14px 0 0 18px; color: var(--muted); font-size: .75rem; }
.entreprise-rapport-icone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--green-tint); color: var(--green); font-size: 1.4rem; }
.entreprise-details { margin-top: 18px; }
.entreprise-details div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid var(--hairline); font-size: .8rem; }
.entreprise-details dt { color: var(--muted); }
.entreprise-details dd { font-weight: 700; }
.entreprise-deconnexion-mobile { display: none !important; margin-top: 16px; }
.entreprise-creer-responsable { display: grid; grid-template-columns: minmax(240px, .65fr) 1.35fr; gap: 24px; align-items: end; }
.entreprise-creer-responsable .ligne-champs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

[data-theme="sombre"] .entreprise-apercu { background: #3D371D; color: #FFE98A; }
[data-theme="sombre"] .entreprise-contact { background: #20231C; }
[data-theme="sombre"] .entreprise-contact h2 { color: #F6F3EB; }
[data-theme="sombre"] .entreprise-contact p { color: #A9B5AC; }
[data-theme="sombre"] .entreprise-kpi-icone { background: rgba(82, 174, 124, .15); }
[data-theme="sombre"] .entreprise-statut.excellent, [data-theme="sombre"] .entreprise-statut.bonne_voie { background: rgba(55, 148, 98, .2); color: #90DBB0; }
[data-theme="sombre"] .entreprise-statut.a_suivre { background: rgba(254, 199, 0, .14); color: #FFE37A; }
[data-theme="sombre"] .entreprise-statut.a_relancer { background: rgba(192, 57, 43, .18); color: #FFAAA2; }

@media (max-width: 1180px) {
  .entreprise-kpis { grid-template-columns: repeat(2, 1fr); }
  .entreprise-grille-haute, .entreprise-grille-basse { grid-template-columns: 1fr; }
  .entreprise-parcours-grille { grid-template-columns: repeat(2, 1fr); }
  .entreprise-creer-responsable { grid-template-columns: 1fr; }
  .entreprise-creer-responsable .ligne-champs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  body.vue-entreprise .vue { width: calc(100% - 24px); margin: 22px auto 90px; }
  body.vue-entreprise .nav-mobile { grid-template-columns: repeat(5, 1fr); }
  body.vue-entreprise .topbar-droite .entreprise-parametres,
  body.vue-entreprise .topbar-droite .entreprise-retour { display: none !important; }
  .entreprise-entete { align-items: flex-start; flex-direction: column; }
  .entreprise-commandes { width: 100%; justify-content: flex-start; }
  .entreprise-selecteur { flex: 1; min-width: 150px; }
  .entreprise-selecteur select { width: 100%; }
  .entreprise-gestion, .entreprise-export { flex: 1 1 calc(50% - 5px); justify-content: center; text-align: center; }
  .entreprise-contact { align-items: flex-start; flex-wrap: wrap; }
  .entreprise-contact .btn { width: 100%; text-align: center; }
  .entreprise-grille-competences, .entreprise-rapports-grille, .entreprise-parametres-grille { grid-template-columns: 1fr; }
  .entreprise-rapport-principal { grid-template-columns: auto 1fr; }
  .entreprise-rapport-principal .btn { grid-column: 1 / -1; text-align: center; }
  .entreprise-deconnexion-mobile { display: inline-flex !important; }
}

@media (max-width: 620px) {
  .entreprise-page { gap: 14px; }
  .entreprise-kpis { grid-template-columns: 1fr; gap: 10px; }
  .entreprise-kpis article { min-height: 0; padding: 16px; }
  .entreprise-carte { padding: 16px; }
  .entreprise-parcours-grille { grid-template-columns: 1fr; }
  .entreprise-outils { flex-direction: column; }
  .entreprise-outils .recherche { max-width: none; }
  .entreprise-demarrage { align-items: flex-start; flex-wrap: wrap; }
  .entreprise-demarrage .btn { width: 100%; text-align: center; }
  .entreprise-carte-entete { flex-direction: column; }
  .entreprise-rapport-principal { display: flex; flex-direction: column; align-items: flex-start; }
  .entreprise-rapport-principal ul { grid-template-columns: 1fr; }
  .entreprise-creer-responsable .ligne-champs { grid-template-columns: 1fr; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 0.95rem; }

h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- Topbar */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--vert-nuit-surface);
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  padding: 9px 16px;
}
.topbar-pill {
  display: flex; align-items: center; gap: 24px;
  max-width: 1360px; margin: 0 auto;
  background: var(--bg); border-radius: 980px;
  padding: 7px 12px 7px 22px;
  box-shadow: 0 6px 22px rgba(0, 20, 12, .25);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--vert-nuit); }
.brand:hover { text-decoration: none; }
.brand-logo { height: 30px; display: block; }
.brand-campus {
  font-weight: 700; font-size: .98rem; color: var(--vert-nuit);
  padding-left: 12px; border-left: 1px solid var(--hairline);
}

.nav { display: flex; gap: 2px; }
.nav a {
  color: var(--muted); padding: 7px 14px; border-radius: 980px;
  font-weight: 600; font-size: .92rem;
}
.nav a:hover { color: var(--vert-nuit); text-decoration: none; }
.nav a.actif { color: #F6F3EB; background: var(--vert-nuit-surface); }

.topbar-droite { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.chip-apprenant {
  display: flex; align-items: center; gap: 8px;
  background: var(--gris-controle);
  padding: 6px 14px; border-radius: 980px; font-size: .85rem; color: var(--ink);
}
.chip-apprenant .xp { font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.chip-apprenant .sep { color: var(--muted); opacity: .5; }

/* éléments réservés à la disposition latérale, neutres en ruban */
.nav a { display: inline-flex; align-items: center; gap: 10px; }
.nav-ico { display: none; flex: 0 0 auto; }
.nav-groupe { display: none; }
.chip-avatar { display: none; }
.chip-apprenant .chip-texte, .chip-apprenant .chip-detail { display: flex; align-items: center; gap: 8px; }
.brand-blanc { display: none; }
.brand-texte { display: contents; }
.brand-sous { display: none; }
.deco-laterale { display: none; }
.theme-laterale { display: none; }

.switch-admin { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); cursor: pointer; }
.switch-admin input { accent-color: var(--green); width: 15px; height: 15px; }

/* ---------------------------------------------------------------- Layout */

.vue { flex: 1; width: min(1140px, 100% - 48px); margin: 40px auto 72px; }

.pied {
  padding: 20px 28px; border-top: 1px solid var(--hairline);
  color: var(--muted); font-size: .78rem; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
}
.pied nav { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pied a { color: var(--muted); }

.titre-page { font-size: 2rem; font-weight: 700; margin-bottom: 6px; color: var(--vert-nuit); }
.entete-section h2, .prog-niveau-nom, .lecon-titre { color: var(--vert-nuit); }
.sous-titre { color: var(--muted); margin-bottom: 28px; max-width: 62ch; font-size: 1.02rem; line-height: 1.5; }

.etiquette {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600; margin-bottom: 8px; display: block;
}

/* ---------------------------------------------------------------- Cartes */

.carte {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--ombre); padding: 22px;
}

.grille-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.stat {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--ombre);
}
.stat .valeur { font-size: 1.7rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat .valeur small { font-size: .95rem; color: var(--muted); font-weight: 500; }
.stat .legende { color: var(--muted); font-size: .82rem; margin-top: 5px; }

.barre-niveau { height: 6px; background: var(--gris-controle); border-radius: 980px; margin-top: 12px; overflow: hidden; }
.barre-niveau > div { height: 100%; background: var(--green); border-radius: 980px; transition: width .5s ease; }
#vue h1[tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- Coach */

/* Coach : bulle flottante en bas à droite, repliable */
.coach-bulle { position: fixed; bottom: 22px; right: 22px; z-index: 80; }
.coach-bouton {
  width: 50px; height: 50px; border-radius: 50%; border: 0;
  background: var(--green); color: #fff; font-size: 1.35rem;
  display: grid; place-items: center; position: relative;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  transition: transform .12s ease;
}
.coach-bouton:hover { transform: scale(1.06); }
.coach-point {
  position: absolute; top: 1px; right: 1px; width: 11px; height: 11px;
  border-radius: 50%; background: #FF3B30; border: 2px solid #fff;
}
.coach-fenetre {
  width: min(340px, calc(100vw - 44px));
  background: var(--card); border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .3);
  padding: 16px 18px;
  animation: coach-in .25s ease-out;
}
@keyframes coach-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.coach-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.coach-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.coach-fermer { border: 0; background: none; color: var(--muted); font-size: .95rem; padding: 2px 7px; border-radius: 6px; cursor: pointer; }
.coach-fermer:hover { background: var(--gris-controle); color: var(--ink); }
.coach-texte { font-size: .95rem; line-height: 1.55; margin-bottom: 12px; }
.coach-refresh {
  background: var(--gris-controle); color: var(--ink); border: 0;
  border-radius: 980px; padding: 7px 14px; font-size: .8rem; font-weight: 500;
  white-space: nowrap;
}
.coach-refresh:hover { background: var(--controle-survol); }

/* ---------------------------------------------------------------- Accueil : bandeau reprendre + stats */

.bandeau-haut { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; margin-bottom: 36px; }
.bandeau-haut.seul { grid-template-columns: 1fr; }
.reprendre { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--ink); }
.reprendre { position: relative; border: 2px solid var(--green); }
.reprendre::after {
  content: ''; position: absolute; width: 8px; height: 8px; right: -5px; bottom: -5px;
  background: var(--green); border: 2px solid var(--bg); border-radius: 2px;
}
.reprendre:hover { text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 14px 32px -16px rgba(0,0,0,.16); }
.reprendre-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--green); font-weight: 600; margin-bottom: 6px; }
.reprendre-titre { font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.reprendre-formation { color: var(--muted); font-size: .85rem; margin-top: 3px; }
.reprendre .btn { flex: 0 0 auto; }

/* Bloc "objectif de la semaine" : où j'en suis, ce qu'il reste, ce qui m'attend */
.bloc-objectif { display: flex; flex-direction: column; gap: 7px; color: var(--ink); }
.bloc-objectif:hover { text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 14px 32px -16px rgba(0,0,0,.16); }
.objectif-entete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.objectif-niveau { font-size: .68rem; font-weight: 700; letter-spacing: .09em; color: var(--muted); }
.pastille-xp {
  background: var(--jaune); color: var(--vert-nuit-surface); font-weight: 700; font-size: .78rem;
  padding: 3px 11px; border-radius: 980px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.objectif-titre { font-weight: 700; font-size: 1.05rem; color: var(--vert-nuit); }
.objectif-chiffres { display: flex; justify-content: space-between; align-items: baseline; }
.objectif-chiffres b { font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.objectif-chiffres span { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.jauge { position: relative; height: 10px; border-radius: 980px; background: var(--gris-controle); overflow: hidden; }
.jauge-plein {
  height: 100%; border-radius: 980px;
  background: linear-gradient(90deg, var(--green), #2E9A64);
  transform-origin: left; animation: jauge-remplir .9s cubic-bezier(.22, 1, .36, 1);
  transition: width .6s ease;
}
.jauge-repere { position: absolute; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .85); }
@keyframes jauge-remplir { from { transform: scaleX(0); } }
.objectif-serie { font-size: .85rem; font-weight: 600; }
.objectif-serie .flamme { display: inline-block; }
.flamme.rebond { animation: flamme-rebond .5s ease; }
@keyframes flamme-rebond { 35% { transform: translateY(-5px) scale(1.2); } 70% { transform: translateY(0) scale(.98); } }
.objectif-reste { font-size: .88rem; font-weight: 600; color: var(--ink); }
.objectif-recompense { font-size: .8rem; color: var(--muted); }
.objectif-recompense b { color: #A87900; }
.bloc-objectif.celebre { animation: celebre .8s ease; }
@keyframes celebre { 0% { box-shadow: 0 0 0 0 rgba(254, 199, 0, .55); } 100% { box-shadow: 0 0 0 26px rgba(254, 199, 0, 0); } }
.strip-lien { color: var(--green); font-weight: 600; font-size: .85rem; margin-top: 2px; }

/* ---------------------------------------------------------------- Formations : lignes horizontales (vignette à gauche) */

.liste-cours { display: flex; flex-direction: column; gap: 16px; }
.ligne-cours {
  display: flex; gap: 24px; padding: 18px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--ombre);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ligne-cours:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 14px 32px -16px rgba(0,0,0,.16); }
.cours-visuel {
  flex: 0 0 230px; aspect-ratio: 16 / 10; border-radius: 12px;
  background: var(--green-tint); display: grid; place-items: center; overflow: hidden;
}
.cours-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cours-visuel-fallback { font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 2rem; color: var(--green); }
.cours-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.cours-infos h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--green-deep); }
.cours-infos p { color: var(--ink); font-size: .92rem; line-height: 1.55; }
.cours-progress-ligne {
  display: flex; align-items: center; gap: 14px; margin-top: 2px;
  font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.cours-progress-ligne > span { white-space: nowrap; }
.cours-progress-ligne .barre-niveau { flex: 1; margin-top: 0; }
.cours-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; }
.tag-niveau {
  align-self: flex-start; font-size: .68rem; font-weight: 600; padding: 3px 10px; border-radius: 980px;
  background: var(--green-tint); color: var(--green); text-transform: uppercase; letter-spacing: .04em;
}
.badge-brouillon {
  font-size: .72rem; padding: 3px 10px; border-radius: 980px;
  background: var(--gris-controle); color: var(--muted); font-weight: 500;
  vertical-align: middle;
}

/* ---------------------------------------------------------------- Aperçu formation (catalogue) */

.apercu-carte {
  background: var(--card); border-radius: 20px; width: min(560px, 92vw);
  overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .4); text-align: left;
  max-height: 90vh; overflow-y: auto; position: relative;
}
.apercu-fermer { z-index: 2; }
.apercu-visuel { aspect-ratio: 21 / 9; overflow: hidden; }
.apercu-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apercu-corps { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.apercu-corps h2 { font-size: 1.4rem; font-weight: 700; }
.apercu-corps p { color: var(--ink); font-size: .95rem; line-height: 1.6; }
.apercu-note { color: var(--muted) !important; font-size: .85rem !important; }
.apercu-actions { display: flex; gap: 10px; margin-top: 8px; }
.apercu-badge-verrouille { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed rgba(29,107,69,.32); border-radius: 12px; background: var(--green-tint); }
.apercu-badge-verrouille > span { font-size: 1.4rem; filter: grayscale(1); }
.apercu-badge-verrouille div { display: grid; gap: 2px; }
.apercu-badge-verrouille small { color: var(--muted); font-size: .72rem; }

/* Découverte : une boussole de compétences plutôt qu'un rayon de produits. */
.espace-competences { padding-top: 8px; }
.boussole-competences { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.5fr); gap: 22px; align-items: center; padding: 20px 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: #F0EBDD; }
.boussole-competences > div:first-child { display: grid; gap: 5px; }
.boussole-competences span { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.objectifs-offres { display: flex; flex-wrap: wrap; gap: 8px; }
.objectif-offre { border: 1px solid rgba(0,50,35,.15); border-radius: 980px; padding: 8px 12px; background: var(--card); color: var(--ink); font-size: .8rem; font-weight: 650; }
.objectif-offre:hover, .objectif-offre.actif { border-color: var(--green); background: var(--green); color: #fff; }
.offre-recommandee { display: grid; grid-template-columns: 270px minmax(0, 1fr); margin-top: 14px; border: 1px solid rgba(29,107,69,.25); border-radius: 18px; background: var(--card); overflow: hidden; box-shadow: var(--ombre); }
.barre-formule { grid-column: 1 / -1; min-height: 42px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; border-bottom: 1px solid var(--hairline); background: #F7F8F6; font-size: .8rem; }
.barre-formule > span { height: 100%; display: grid; place-items: center; border-right: 1px solid var(--hairline); font-family: Georgia, serif; font-style: italic; color: var(--green); font-weight: 800; }
.barre-formule code { padding: 0 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-formule b { height: 100%; display: flex; align-items: center; padding: 0 15px; border-left: 1px solid var(--hairline); color: var(--green-deep); }
.offre-visuel { min-height: 210px; position: relative; overflow: hidden; background: var(--green-tint); }
.offre-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge-verrouille { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 980px; background: rgba(255,255,255,.93); color: var(--vert-nuit-surface); font-size: .72rem; font-weight: 700; box-shadow: 0 5px 18px rgba(0,0,0,.16); }
.badge-verrouille b { filter: grayscale(1); }
.offre-copie { padding: 24px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.offre-copie h3 { color: var(--vert-nuit); font-size: 1.45rem; }
.offre-copie > p { color: var(--muted); line-height: 1.6; max-width: 65ch; }
.raison-offre { padding: 9px 11px; border-radius: 10px; background: var(--green-tint); color: var(--green-deep); font-size: .8rem; line-height: 1.45; }
.offre-copie .cours-actions { justify-content: flex-start; }
.btn-discret { border-color: transparent; background: transparent; color: var(--muted); }
.boussole-vide { display: flex; align-items: center; gap: 16px; padding: 24px; margin-top: 14px; border: 1px dashed rgba(0,50,35,.25); border-radius: var(--radius); background: rgba(255,255,255,.45); }
.cellule-vide { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 2px solid var(--green); color: var(--green); background: #fff; font-weight: 800; }
.boussole-vide p { color: var(--muted); margin-top: 4px; font-size: .84rem; }
.catalogue-secondaire { margin-top: 16px; }
.catalogue-secondaire summary { cursor: pointer; color: var(--green); font-weight: 700; font-size: .85rem; }
.catalogue-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; margin-top: 12px; }
.catalogue-compact button { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 12px; text-align: left; border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); color: var(--ink); }
.catalogue-compact button > span { filter: grayscale(1); font-size: 1.25rem; }
.catalogue-compact button div { display: grid; gap: 2px; }
.catalogue-compact small { color: var(--muted); }
.catalogue-compact i { color: var(--green); font-style: normal; }

/* ---------------------------------------------------------------- Page formation */

/* Vue formation : disposition pleine largeur, sidebar collée au bord gauche (façon Thinkific) */
body.pleine-largeur .vue { width: 100%; margin: 0; }
body.pleine-largeur #contenu-item { padding: 40px 48px 90px; min-width: 0; }

.page-formation { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 0; align-items: stretch; }
.page-formation.sans-sommaire { grid-template-columns: minmax(0, 1fr); }
.page-formation.sans-sommaire .sommaire { display: none; }

.sommaire {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--hairline);
  padding: 0;
}
/* l'en-tête (retour, titre, progression) reste figé au-dessus des modules qui défilent,
   souligné d'une fine barre grisée */
.sommaire-entete {
  flex: none; position: relative; z-index: 1;
  padding: 24px 20px 16px; background: var(--card);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 10px 16px -14px rgba(0, 50, 35, .35);
}
.sommaire-defilant { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 20px 48px; }

.sommaire-outils { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.masquer-sommaire {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--hairline);
  background: var(--card); color: var(--muted); font-size: 1rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.masquer-sommaire:hover { background: var(--gris-controle); color: var(--ink); }
.ouvrir-sommaire {
  position: fixed; left: 14px; top: calc(var(--topbar-h) + 14px); z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 980px;
  padding: 9px 16px; font-size: .88rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--ombre); cursor: pointer;
}
.ouvrir-sommaire:hover { background: var(--gris-controle); }
.ouvrir-sommaire[hidden] { display: none; }
.sommaire-defilant::-webkit-scrollbar { width: 6px; }
.sommaire-defilant::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .12); border-radius: 99px; }
.sommaire-defilant::-webkit-scrollbar-track { background: transparent; }

.retour { display: inline-block; font-size: .9rem; }
.sommaire-titre { font-weight: 700; font-size: 1.18rem; margin-bottom: 14px; }

.progression-carte {
  background: var(--card); border: 1px solid rgba(29, 107, 69, .35);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 18px;
}
.progression-label { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; font-weight: 600; color: var(--green); }
.progression-label span:last-child { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.progression-carte .barre-niveau { margin-top: 8px; }

.sommaire .module { margin-bottom: 4px; }
.module-entete {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; user-select: none;
}
.module-entete:hover { background: var(--survol); }
.module-nom { flex: 1; font-size: 1rem; color: var(--ink); font-weight: 650; line-height: 1.35; letter-spacing: -.01em; }
.module.actuel .module-nom { color: var(--green); }
.module-compte { flex: 0 0 auto; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.module-compte.complet { color: var(--green); font-weight: 600; }
.chevron {
  flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 4px 0 0;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
.module.replie .chevron { transform: rotate(-45deg); margin-top: 0; }
.module.replie .module-corps { display: none; }
.module-corps { padding-bottom: 6px; }
.sommaire ul { list-style: none; }
.sommaire li a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px; color: var(--ink); font-size: .98rem;
  line-height: 1.4; border: 1px solid transparent;
}
.sommaire li a:hover { background: var(--survol); text-decoration: none; }
.sommaire li a.actif { background: var(--green-tint); border-color: rgba(29, 107, 69, .3); font-weight: 600; }
.sommaire li a.fait { color: var(--muted); }
.sommaire li a.fait.actif { color: var(--ink); }
.pastille {
  flex: 0 0 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  font-size: .75rem;
  background: var(--card); border: 1px solid var(--hairline); color: var(--muted);
}
.pastille.fait { background: var(--green); border-color: var(--green); color: #fff; }

.lecteur { border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: var(--ombre); }
.lecteur iframe, .lecteur video { width: 100%; height: 100%; border: 0; display: block; }
/* habillage des sous-titres natifs (piste VTT) : fond vert nuit translucide, texte crème.
   Note : sur iOS/Safari, les réglages d'accessibilité de l'utilisateur peuvent primer. */
.lecteur video::cue {
  background: rgba(0, 20, 12, .78);
  color: #F6F3EB;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  line-height: 1.35;
}

.lecon-titre { text-align: center; font-size: 2.05rem; font-weight: 700; margin: 6px 0 10px; }
.lecon-meta { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 24px; }
/* ---------------------------------------------------------------- Descriptions de leçon enrichies */

.item-description { color: var(--ink); line-height: 1.72; margin: 24px 0; font-size: 1.02rem; }
.item-description > p { margin: 0 0 14px; }
.item-description > p:last-child { margin-bottom: 0; }

/* phrase d'accroche */
.desc-chapeau {
  font-size: 1.09rem; line-height: 1.65; color: var(--ink);
  border-left: 3px solid var(--jaune); padding: 2px 0 2px 16px; margin-bottom: 22px !important;
}

/* titre de section : pastille emoji + numéro + intitulé */
.desc-section {
  display: flex; align-items: center; gap: 11px;
  margin: 28px 0 13px; font-size: 1.03rem; font-weight: 700;
  color: var(--vert-nuit); letter-spacing: -0.01em;
}
.desc-section:first-child { margin-top: 0; }
.desc-ico {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--green-tint); font-size: .98rem; line-height: 1;
}
.desc-num {
  display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px;
  background: var(--vert-nuit-surface); color: #F6F3EB;
  font-size: .74rem; font-weight: 800; vertical-align: 2px;
}

/* puces */
.desc-puces { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.desc-puces li { position: relative; padding-left: 27px; }
.desc-puces li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-tint); color: var(--green-deep);
  display: grid; place-items: center; font-size: .7rem; font-weight: 800;
  margin-top: 3px;
}

/* encart astuce / bonnes pratiques */
.desc-astuce {
  display: block; background: #FFF9E3; border-left: 3px solid var(--jaune);
  border-radius: 0 12px 12px 0; padding: 13px 17px; margin: 18px 0;
  font-size: .97rem;
}
.desc-astuce-t {
  display: block; margin-bottom: 3px; color: #7A5C00;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* encart défi */
.desc-defi {
  background: var(--green-tint); border-radius: 14px; padding: 15px 19px; margin: 22px 0;
}
.desc-defi-t { display: block; color: var(--green-deep); margin-bottom: 8px; font-size: 1rem; }
.desc-defi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.desc-defi li { position: relative; padding-left: 22px; font-size: .97rem; }
.desc-defi li::before {
  content: '→'; position: absolute; left: 0; color: var(--green); font-weight: 700;
}

/* éléments en ligne : raccourcis, fonctions, chemins, termes */
.item-description kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84em;
  background: var(--card); border: 1px solid var(--hairline); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
.item-description code.fn {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .87em; font-weight: 600;
  background: var(--green-tint); color: var(--green-deep); padding: 1px 6px; border-radius: 6px;
}
.desc-fleche { color: var(--muted); font-weight: 700; padding: 0 1px; }
.desc-terme { font-style: normal; font-weight: 600; color: var(--vert-nuit); }
.item-description strong { font-weight: 700; color: var(--vert-nuit); }

/* contenu de leçon centré ; annexes en pleine largeur sous la description */
.lecon-layout { display: flex; justify-content: center; }
.lecon-corps { flex: 0 1 760px; min-width: 0; }
.annexes {
  margin-top: 26px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--ombre);
}
/* bulle de rappel : voyante mais compacte, clic = descend à l'encart */
.bulle-annexes {
  position: fixed; top: calc(var(--topbar-h) + 14px); right: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--jaune); color: #003223; border: 0; border-radius: 980px;
  padding: 9px 16px; font-size: .85rem; font-weight: 700; font-family: inherit;
  box-shadow: 0 8px 22px rgba(0, 20, 12, .25); cursor: pointer;
  animation: bulle-pop .35s ease;
}
.bulle-annexes:hover { transform: translateY(-1px); }
@keyframes bulle-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bulle-annexes { animation: none; } }
.annexes-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.annexe { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; color: var(--ink); font-size: .85rem; }
.annexe:hover { background: var(--survol); text-decoration: none; }
.annexe-icone { font-size: 1.1rem; }
.annexe-nom { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.annexe-nom small { color: var(--muted); font-variant-numeric: tabular-nums; }
.annexes-vide { color: var(--muted); font-size: .8rem; }
.annexes-ajout { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.annexes-ajout input[type="file"] { font-size: .75rem; }
.annexe-retirer { margin: 0 0 8px 30px; align-self: flex-start; }

.type-tag {
  font-size: .72rem; padding: 4px 11px; border-radius: 980px;
  background: var(--green-tint); color: var(--green); font-weight: 600; white-space: nowrap;
}

/* ---------------------------------------------------------------- Boutons */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: var(--gris-controle); color: var(--ink);
  padding: 10px 20px; border-radius: 980px; font-weight: 600; font-size: .92rem;
  transition: background .12s ease;
}
.btn:hover { background: var(--controle-survol); }
.btn-plein { background: var(--green); color: #fff; }
.btn-plein:hover { background: var(--green-deep); }
.btn-jaune { background: var(--jaune); color: var(--vert-nuit-surface); }
.btn-jaune:hover { background: #EDBA00; }
.btn-petit { padding: 6px 14px; font-size: .8rem; }
.btn-danger { color: var(--red); background: var(--red-tint); }
.btn-danger:hover { background: #F5DDD9; }
.btn[disabled] { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- Quiz */

.quiz-experience {
  --quiz-accent: var(--jaune);
  margin: 8px 0 30px; border: 1px solid rgba(0, 50, 35, .13); border-radius: 24px;
  scroll-margin-top: 20px;
  overflow: hidden; background: var(--card); box-shadow: 0 24px 70px -42px rgba(0, 50, 35, .48);
}
.quiz-cockpit {
  padding: 22px 26px 20px; color: #fff; background: var(--vert-nuit-surface);
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 28px 28px;
}
.quiz-cockpit-ligne, .quiz-ruban-entete { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.quiz-cockpit-ligne > div { display: grid; gap: 3px; }
.quiz-sur-titre { color: var(--green); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.quiz-cockpit .quiz-sur-titre { color: #9BE67E; }
.quiz-cockpit-ligne strong { font-size: 1.08rem; letter-spacing: -.015em; }
.quiz-meilleur { padding: 6px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 980px; color: rgba(255,255,255,.72); font-size: .75rem; white-space: nowrap; }
.quiz-meilleur b { color: #fff; font-variant-numeric: tabular-nums; }
.quiz-ruban-entete { margin-top: 21px; color: rgba(255,255,255,.58); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.quiz-ruban-entete b { color: #fff; font-variant-numeric: tabular-nums; }
.quiz-ruban { display: grid; grid-template-columns: repeat(auto-fit, minmax(18px, 1fr)); gap: 5px; margin-top: 8px; }
.quiz-ruban i { height: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; background: rgba(255,255,255,.08); }
.quiz-ruban i.fait { background: #6CCB8D; border-color: #6CCB8D; }
.quiz-ruban i.actif { background: var(--quiz-accent); border-color: var(--quiz-accent); box-shadow: 0 0 0 3px rgba(254,199,0,.16); }
.quiz-etape { padding: clamp(24px, 5vw, 42px); }
.quiz-question-entete { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 13px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.quiz-numero {
  display: inline-grid; place-items: center; min-width: 42px; padding: 6px 9px; border-radius: 8px;
  background: var(--green-tint); color: var(--green-deep); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .04em;
}
.quiz-etape h2 { color: var(--vert-nuit); font-size: clamp(1.28rem, 2.5vw, 1.7rem); line-height: 1.3; max-width: 31ch; margin-bottom: 27px; outline: none; }
.quiz-choix { display: grid; gap: 11px; border: 0; }
.quiz-option {
  position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 26px; gap: 13px; align-items: center;
  min-height: 60px; padding: 10px 15px 10px 11px; border: 2px solid var(--hairline); border-radius: 15px;
  cursor: pointer; background: var(--surface-2); font-size: .95rem; line-height: 1.4;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.quiz-option:hover { transform: translateY(-1px); border-color: rgba(29,107,69,.45); background: var(--card); box-shadow: var(--ombre); }
.quiz-option:focus-within { outline: 3px solid rgba(29,107,69,.22); outline-offset: 2px; }
.quiz-option input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-option-lettre {
  display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--card); color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 800;
}
.quiz-option-texte { color: var(--ink); font-weight: 600; }
.quiz-option-coche { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--green); color: #fff; font-size: .75rem; font-weight: 900; opacity: 0; transform: scale(.6); transition: opacity .14s ease, transform .14s ease; }
.quiz-option.selectionnee { border-color: var(--green); background: var(--green-tint); box-shadow: 0 10px 30px -22px rgba(29,107,69,.75); }
.quiz-option.selectionnee .quiz-option-lettre { background: var(--green); border-color: var(--green); color: #fff; }
.quiz-option.selectionnee .quiz-option-coche { opacity: 1; transform: scale(1); }
.quiz-reponse-statut { min-height: 22px; margin: 13px 2px 2px; color: var(--muted); font-size: .78rem; font-weight: 650; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.quiz-reponse-statut.visible { color: var(--green); opacity: 1; transform: none; }
.quiz-reponse-statut span { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 5px; border-radius: 50%; background: var(--green); color: #fff; font-size: .65rem; }
.quiz-navigation { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; margin-top: 25px; padding-top: 21px; border-top: 1px solid var(--hairline); }
.quiz-suivant { min-width: 185px; justify-content: center; padding: 12px 20px; }
.quiz-retour { justify-self: start; color: var(--muted); background: transparent; padding-left: 0; }

/* Le score est le seul moment spectaculaire : une jauge nette, puis la correction reste calme. */
.quiz-resultats { --score-color: var(--green); }
.quiz-resultats.parfait { --score-color: var(--jaune); }
.quiz-resultats.arevoir { --score-color: var(--red); }
.quiz-resultat-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 30px; align-items: center; padding: clamp(28px, 5vw, 46px); background: var(--vert-nuit-surface); color: #fff; }
.quiz-score { display: grid; place-items: center; width: 138px; height: 138px; border-radius: 50%; background: conic-gradient(var(--score-color) var(--quiz-score), rgba(255,255,255,.13) 0); box-shadow: 0 0 0 8px rgba(255,255,255,.05); }
.quiz-score > div { display: flex; align-items: baseline; justify-content: center; width: 108px; height: 108px; border-radius: 50%; background: var(--vert-nuit-surface); }
.quiz-score strong { align-self: center; font-size: 3.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.quiz-score span { align-self: center; margin: 20px 0 0 5px; color: rgba(255,255,255,.58); font-weight: 700; }
.quiz-resultat-copie { display: grid; justify-items: start; }
.quiz-resultat-statut { padding: 5px 10px; border-radius: 980px; background: var(--score-color); color: var(--vert-nuit-surface); font-size: .7rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.quiz-resultats.arevoir .quiz-resultat-statut { color: #fff; }
.quiz-resultat-copie h2 { margin: 11px 0 7px; color: #fff; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.08; }
.quiz-resultat-copie > p { max-width: 55ch; color: rgba(255,255,255,.72); line-height: 1.55; }
.quiz-gain { margin-top: 15px; padding: 8px 11px; border: 1px solid rgba(254,199,0,.28); border-radius: 10px; background: rgba(254,199,0,.1); color: #FDE58B; font-size: .82rem; }
.quiz-gain.neutre { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); color: rgba(255,255,255,.68); }
.quiz-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--hairline); }
.quiz-stats > span { display: grid; gap: 4px; padding: 17px 20px; border-right: 1px solid var(--hairline); }
.quiz-stats > span:last-child { border-right: 0; }
.quiz-stats small { color: var(--muted); font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.quiz-stats b { color: var(--vert-nuit); font-size: .92rem; font-variant-numeric: tabular-nums; }
.quiz-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 19px 22px; }
.quiz-correction { margin-top: 30px; }
.quiz-correction-entete { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 14px; }
.quiz-correction-entete h2 { color: var(--vert-nuit); margin-top: 4px; font-size: 1.35rem; }
.quiz-correction-entete > span { color: var(--muted); font-size: .78rem; }
.quiz-correction-liste { display: grid; gap: 14px; }
.quiz-correction-question { padding: 20px; border: 1px solid var(--hairline); border-left: 4px solid var(--green); border-radius: 15px; background: var(--card); box-shadow: var(--ombre); }
.quiz-correction-question.fausse { border-left-color: var(--red); }
.quiz-correction-question-entete { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 8px; }
.quiz-correction-question-entete span { color: var(--green); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 800; font-size: .78rem; }
.quiz-correction-question-entete b { color: var(--green); font-size: .76rem; }
.quiz-correction-question.fausse .quiz-correction-question-entete b { color: var(--red); }
.quiz-correction-question h3 { color: var(--ink); font-size: 1rem; line-height: 1.4; margin-bottom: 13px; }
.quiz-correction-options { display: grid; gap: 7px; }
.quiz-option.correction { min-height: 45px; grid-template-columns: 30px minmax(0, 1fr) auto; padding: 7px 10px; border-width: 1px; border-radius: 11px; cursor: default; background: var(--surface-2); }
.quiz-option.correction:hover { transform: none; box-shadow: none; }
.quiz-option.correction .quiz-option-lettre { width: 27px; height: 27px; border-radius: 7px; font-size: .72rem; }
.quiz-option.correction .quiz-option-texte { font-size: .85rem; font-weight: 500; }
.quiz-option.correction small { color: var(--muted); font-size: .68rem; font-weight: 750; }
.quiz-option.correction.bonne { background: var(--green-tint); border-color: var(--green); }
.quiz-option.correction.bonne .quiz-option-lettre { background: var(--green); border-color: var(--green); color: #fff; }
.quiz-option.correction.mauvaise { background: var(--red-tint); border-color: var(--red); }
.quiz-option.correction.mauvaise .quiz-option-lettre { background: var(--red); border-color: var(--red); color: #fff; }
.quiz-vide { color: var(--muted); }

@media (max-width: 700px) {
  .quiz-experience { scroll-margin-top: 126px; }
  .quiz-cockpit { padding: 19px 18px 17px; }
  .quiz-cockpit-ligne { align-items: start; }
  .quiz-meilleur { white-space: normal; text-align: right; }
  .quiz-etape { padding: 23px 17px 18px; }
  .quiz-option { grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 10px; min-height: 58px; padding: 9px 11px 9px 9px; }
  .quiz-option-lettre { width: 34px; height: 34px; }
  .quiz-navigation { grid-template-columns: 1fr; }
  .quiz-navigation > span:empty { display: none; }
  .quiz-retour { grid-row: 2; justify-self: center; padding: 8px 12px; }
  .quiz-suivant { width: 100%; }
  .quiz-resultat-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; }
  .quiz-resultat-copie { justify-items: center; }
  .quiz-stats { grid-template-columns: 1fr 1fr; }
  .quiz-stats > span { border-bottom: 1px solid var(--hairline); }
  .quiz-stats > span:nth-child(2) { border-right: 0; }
  .quiz-stats > span:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .quiz-actions { flex-direction: column-reverse; }
  .quiz-actions .btn { justify-content: center; width: 100%; }
  .quiz-correction-entete { align-items: start; flex-direction: column; gap: 6px; }
  .quiz-option.correction { grid-template-columns: 28px minmax(0, 1fr); }
  .quiz-option.correction small { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-option, .quiz-option-coche, .quiz-reponse-statut { transition: none; }
  .quiz-option:hover { transform: none; }
}

/* ---------------------------------------------------------------- Fichier */

.carte-fichier { display: flex; align-items: center; gap: 18px; }
.fichier-icone {
  flex: 0 0 50px; height: 50px; border-radius: 12px; background: var(--green-tint);
  display: grid; place-items: center; font-size: 1.4rem;
}
.fichier-meta { flex: 1; }
.fichier-meta .nom { font-weight: 600; }
.fichier-meta .taille { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Badges & classement */

/* Progression : tableau de bord gamifié */
.prog-niveau-nom { font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; }
.prog-niveau-texte p { font-size: .95rem; line-height: 1.5; }
.prog-note { color: var(--muted); font-size: .88rem; margin-top: 8px; line-height: 1.5; }

.echelle { display: flex; align-items: flex-start; overflow-x: auto; padding: 24px 20px; }
.palier { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 92px; text-align: center; }
.palier-avatar .avatar-svg { width: 100%; height: auto; display: block; }
.palier:not(.atteint) .palier-avatar { filter: grayscale(1); opacity: .32; }
.palier.actuel .palier-avatar { filter: none; opacity: 1; }

.avatar-bloc { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.avatar-nom { font-size: .82rem; font-weight: 650; color: var(--vert-nuit); text-align: center; }
.palier.actuel .palier-nom { color: var(--green); }

.prog-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 36px; }
.serie-valeur { font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; }
.serie-jours { display: flex; gap: 8px; margin-bottom: 4px; }
.serie-jour {
  width: 34px; height: 34px; border-radius: 50%; background: var(--gris-controle);
  display: grid; place-items: center; font-size: .75rem; color: var(--muted); font-weight: 600;
}
.serie-jour.actif { background: var(--green); color: #fff; }
.classement-optout { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .85rem; color: var(--muted); cursor: pointer; }
.classement-optout input { width: auto; accent-color: var(--green); }
.tableau-simple { box-shadow: none; border: 0; }
.tableau-simple td { padding: 8px 10px; }

.medaille.obtenu { filter: none; opacity: 1; }
.famille-progres .barre-niveau { flex: 1; margin-top: 0; }
.famille-progres.complet { color: var(--green); font-weight: 600; }

.tableau {
  width: 100%; border-collapse: collapse; background: var(--card);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre); border: 1px solid var(--hairline);
}
.tableau th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600; padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}
.tableau td { padding: 13px 16px; border-bottom: 1px solid rgba(0,0,0,.05); font-size: .92rem; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .mono { font-variant-numeric: tabular-nums; }
.rang { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Communauté */

.thread { margin-bottom: 14px; }
.thread-titre { font-size: 1.12rem; font-weight: 600; }
.thread-meta { color: var(--muted); font-size: .8rem; margin: 4px 0 10px; }
.thread-message { line-height: 1.6; color: #3A3A3C; white-space: pre-line; }
.reponse {
  margin-top: 12px; padding: 12px 16px; border-left: 3px solid var(--green);
  background: var(--bg); border-radius: 0 10px 10px 0;
}
.reponse .auteur { font-weight: 600; font-size: .85rem; }
.reponse .quand { color: var(--muted); font-size: .75rem; margin-left: 8px; }
.reponse p { margin-top: 4px; font-size: .92rem; line-height: 1.55; white-space: pre-line; }
.form-reponse { display: grid; gap: 8px; margin-top: 18px; }

/* ---------------------------------------------------------------- Formulaires */

.champ { margin-bottom: 14px; }
.champ label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
input[type="text"], input[type="url"], input[type="number"], textarea, select {
  width: 100%; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--card); color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(29, 107, 69, .35); border-color: var(--green); }
textarea { min-height: 90px; resize: vertical; }

.panneau-admin {
  border: 1px solid var(--hairline); background: var(--surface-2); border-radius: var(--radius);
  padding: 18px; margin: 18px 0;
}
.panneau-admin h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600; margin-bottom: 12px;
}
.ligne-champs { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ligne-champs .champ { flex: 1; min-width: 160px; margin-bottom: 0; }

.q-bloc { border: 1px solid var(--hairline); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--card); }
.q-bloc .ligne-option { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.q-bloc .ligne-option input[type="radio"] { accent-color: var(--green); }

/* ---------------------------------------------------------------- Pièces jointes, assistant, CPF, fiche */

.pj-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pj-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 980px; background: var(--gris-controle);
  color: var(--ink); font-size: .82rem; font-weight: 500;
}
.pj-chip:hover { background: var(--controle-survol); text-decoration: none; }
.btn-pj { cursor: pointer; }
.pj-compte { font-variant-numeric: tabular-nums; }
.assistant-bloc { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.assistant-bloc input { width: 100%; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 10px; font-size: .88rem; }
.assistant-reponse { margin-top: 10px; font-size: .9rem; line-height: 1.5; }
.assistant-reponse a { display: block; margin-top: 4px; font-weight: 600; }

.bandeau-annonce {
  display: flex; align-items: center; gap: 14px;
  background: var(--red); color: #fff;
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px;
  box-shadow: var(--ombre);
}
.annonce-icone { font-size: 1.25rem; }
.annonce-texte { flex: 1; font-weight: 600; font-size: .95rem; line-height: 1.45; }
.annonce-fermer {
  background: none; border: 0; color: rgba(255, 255, 255, .7);
  font-size: 1rem; cursor: pointer; padding: 4px 9px; border-radius: 6px;
}
.annonce-fermer:hover { color: #fff; background: rgba(255, 255, 255, .15); }

.bandeau-achat {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 16px; border: 1px solid rgba(254, 199, 0, .55);
  border-radius: var(--radius); background: #FFFCED; color: var(--vert-nuit-surface); box-shadow: var(--ombre);
}
.bandeau-achat-icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--jaune); font-size: 1.35rem; }
.bandeau-achat p { color: var(--muted); font-size: .84rem; margin-top: 3px; }
.bandeau-achat strong { color: var(--green); }
.bandeau-achat button { border: 0; background: transparent; color: var(--muted); padding: 7px; font-size: 1rem; }

.cpf-bandeau {
  background: var(--green-tint); border: 1px solid rgba(29, 107, 69, .3);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; font-size: .95rem;
}
.cpf-bandeau.urgent { background: var(--red-tint); border-color: rgba(192, 57, 43, .3); }
.cpf-tag { font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 980px; background: var(--green-tint); color: var(--green); white-space: nowrap; }
.cpf-tag.urgent { background: var(--red-tint); color: var(--red); }
.cpf-lien { font-weight: 700; white-space: nowrap; }
.cpf-ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); font-size: .88rem;
}
.cpf-ligne:last-of-type { border-bottom: 0; }
.fiche-separateur { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.champ-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
.acces-formations label span { display: grid; gap: 2px; }
.acces-formations small { color: var(--green); font-size: .72rem; font-weight: 650; }
.option-achat { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--ink); font-size: .82rem; font-weight: 650; line-height: 1.4; }
.option-achat input { margin-top: 2px; accent-color: var(--green); }

.relances { margin-bottom: 28px; }
.relance-ligne {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); font-size: .9rem;
}
.relance-ligne:last-child { border-bottom: 0; }
.relance-note { color: var(--muted); font-size: .8rem; }

.fiche-prog { margin-bottom: 12px; }
.fiche-prog-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; margin-bottom: 8px; }
.fiche-prog-ligne span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fiche-com { margin-bottom: 10px; font-size: .9rem; }
.fiche-com p { color: var(--muted); margin-top: 6px; white-space: pre-line; }
.fiche-com .quand, .fiche-note-pied .quand { color: var(--muted); font-size: .78rem; margin-top: 6px; }
.fiche-note { margin-bottom: 10px; background: var(--surface-2); }
.fiche-note p { white-space: pre-line; }
.fiche-note-pied { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }

/* ---------------------------------------------------------------- Toasts & modale */

.toasts { position: fixed; top: calc(var(--topbar-h) + 18px); right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 100; pointer-events: none; }
.toast {
  background: rgba(29, 29, 31, .92); backdrop-filter: blur(10px);
  color: #fff; padding: 13px 18px; border-radius: 14px;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .4); font-size: .92rem;
  display: flex; align-items: center; gap: 10px; max-width: 340px;
  animation: toast-in .3s ease-out;
}
.toast a, .toast button { pointer-events: auto; }
.toast.xp { background: rgba(20, 83, 45, .94); }
.toast .gros { font-size: 1.3rem; }
@keyframes toast-in { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }

.voile {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .4); backdrop-filter: blur(8px);
  display: grid; place-items: center; z-index: 90;
}
.voile[hidden] { display: none; }
.modale {
  background: var(--card); border-radius: 20px; padding: 36px; width: min(420px, 90vw);
  text-align: center; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .4);
}
.modale-logo { height: 42px; margin: 0 auto 16px; display: block; }
.connexion-erreur { color: var(--red); font-size: .85rem; margin: 0; }
.btn-sortir {
  border: 1px solid var(--hairline); background: var(--card); color: var(--muted);
  border-radius: 980px; padding: 6px 14px; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.btn-sortir:hover { color: var(--ink); background: var(--gris-controle); }
.btn-sortir[hidden], .switch-admin[hidden] { display: none; }
.code-genere {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--green-tint); border: 1px solid rgba(29, 107, 69, .3);
  font-size: .9rem; line-height: 1.5;
}
.code-genere b { font-size: 1.15rem; letter-spacing: .06em; color: var(--vert-nuit); }
.code-genere small { color: var(--muted); }
.modale h2 { font-size: 1.45rem; font-weight: 700; margin-bottom: 8px; }
.modale p { color: var(--muted); font-size: .93rem; margin-bottom: 20px; line-height: 1.5; }
.modale form { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------- Sections & divers */

.section { margin-bottom: 44px; }
.entete-section { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.entete-section h2 { font-size: 1.35rem; font-weight: 700; }

.vide {
  border: 1px dashed rgba(0, 0, 0, .15); border-radius: var(--radius); padding: 32px; text-align: center;
  color: var(--muted); font-size: .92rem;
}

.deux-colonnes { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }

/* ---------------------------------------------------------------- Compte, support et cadre de confiance */

.connexion-aide { border-top: 1px solid var(--hairline); margin-top: 18px; padding-top: 15px; display: grid; gap: 8px; font-size: .8rem; }
.connexion-aide > a { font-weight: 650; }
.connexion-aide span, .connexion-aide span a { color: var(--muted); }

/* Connexion : bascule mot de passe / code de transition / mot de passe oublié */
.connexion-liens { display: grid; gap: 7px; justify-items: center; margin-top: 16px; }
.lien-connexion {
  border: 0; background: transparent; padding: 2px 4px; cursor: pointer;
  color: var(--green); font: inherit; font-size: .84rem; font-weight: 650;
}
.lien-connexion:hover { color: var(--green-deep); text-decoration: underline; }
.lien-connexion.discret { color: var(--muted); font-weight: 500; font-size: .78rem; }
.lien-connexion.discret:hover { color: var(--ink); }
.connexion-info {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: var(--green-tint); color: var(--green-deep); font-size: .84rem; line-height: 1.45; text-align: left;
}

/* Écrans mot de passe : lien de réinitialisation et sécurisation obligatoire du compte */
.page-mot-de-passe { display: grid; place-items: center; min-height: 62vh; padding: 20px 0; }
.carte-mot-de-passe { width: min(460px, 100%); padding: clamp(26px, 4vw, 38px); text-align: left; }
.carte-mot-de-passe .modale-logo { margin: 0 0 18px; }
.carte-mot-de-passe h1 { color: var(--vert-nuit); font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.02em; margin: 10px 0 10px; }
.intro-mot-de-passe { color: var(--muted); font-size: .93rem; line-height: 1.6; margin-bottom: 22px; }
.carte-mot-de-passe form { display: flex; flex-direction: column; gap: 12px; }
.carte-mot-de-passe .champ { margin-bottom: 0; }
.mot-de-passe-regle { margin: -2px 0 0; color: var(--muted); font-size: .78rem; }
.mot-de-passe-aide { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: .8rem; }
/* tant que le mot de passe n'est pas posé, rien d'autre n'est atteignable */
.mot-de-passe-obligatoire .nav,
.mot-de-passe-obligatoire .nav-mobile,
.mot-de-passe-obligatoire .topbar-droite,
.mot-de-passe-obligatoire .coach-bulle { display: none; }
.vue-publique .nav, .vue-publique .nav-mobile, .vue-publique .topbar-droite { display: none; }
.page-information { width: min(820px, 100%); margin: 0 auto; }
.page-information > h1 { color: var(--vert-nuit); font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.04em; margin: 8px 0 14px; }
.intro-information { color: var(--muted); font-size: 1.08rem; line-height: 1.65; max-width: 68ch; margin-bottom: 28px; }
.grille-support { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.canal-support { display: flex; align-items: flex-start; gap: 16px; color: var(--ink); }
.canal-support:hover { text-decoration: none; border-color: rgba(29, 107, 69, .32); }
.canal-support > span { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--vert-nuit); background: var(--green-tint); font-size: 1.2rem; }
.canal-support b { color: var(--vert-nuit); }
.canal-support p { color: var(--muted); line-height: 1.5; font-size: .88rem; margin-top: 5px; }
.aide-diagnostic { margin-top: 18px; }
.aide-diagnostic h2, .texte-juridique h2 { color: var(--vert-nuit); font-size: 1.16rem; margin-bottom: 10px; }
.aide-diagnostic ol { padding-left: 22px; line-height: 1.8; margin: 10px 0; }
.aide-diagnostic p { color: var(--muted); font-size: .88rem; }
.liens-information { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.texte-juridique { display: grid; gap: 10px; line-height: 1.7; }
.texte-juridique h2:not(:first-child) { margin-top: 20px; }
.texte-juridique p { color: #435047; }
.texte-juridique dl { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hairline); border-radius: 13px; overflow: hidden; }
.texte-juridique dl div { padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.texte-juridique dl div:nth-child(odd) { border-right: 1px solid var(--hairline); }
.texte-juridique dt { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.texte-juridique dd { margin-top: 3px; font-weight: 600; }
.note-validation { margin-top: 16px; padding: 14px 16px; border-radius: 13px; border: 1px solid rgba(202, 149, 0, .3); background: #FFF8DF; color: #665018; font-size: .84rem; line-height: 1.55; }

.compte-grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 38px; }
.compte-identite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.compte-identite > .btn { grid-column: 2; justify-self: start; }
.compte-identite h2 { color: var(--vert-nuit); }
.compte-identite p { color: var(--muted); margin-top: 3px; }
.compte-identite small { display: block; color: var(--muted); margin-top: 5px; }
.compte-avatar { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--vert-nuit-surface); color: var(--jaune); font-weight: 800; font-size: 1.25rem; }
.compte-resume { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 8px; }
.compte-resume > div { min-width: 0; text-align: center; padding: 8px; }
.compte-resume > div + div { border-left: 1px solid var(--hairline); }
.compte-resume b { display: block; color: var(--vert-nuit); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.compte-resume span { display: block; color: var(--muted); font-size: .75rem; margin-top: 4px; }
.compte-section { margin-bottom: 36px; }
.compte-formations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.compte-formation { display: flex; flex-direction: column; }
.compte-formation h3 { color: var(--vert-nuit); margin: 9px 0 5px; }
.compte-formation p, .certificat-attente { color: var(--muted); font-size: .85rem; }
.compte-formation .cours-actions { margin-top: auto; padding-top: 18px; }
.certificat-attente { align-self: center; }
.compte-achats > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.compte-achats > div > span { font-size: 1.25rem; }
.compte-achats p { display: flex; flex-direction: column; }
.compte-achats small { color: var(--muted); margin-top: 3px; }
.compte-achats strong { color: var(--green); }
.compte-achats > .prog-note { margin-top: 14px; line-height: 1.5; }
.compte-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compte-preferences form { display: grid; gap: 13px; }
.compte-preferences label { display: flex; align-items: flex-start; gap: 11px; padding: 11px; border-radius: 12px; background: #FAFAF7; border: 1px solid var(--hairline); }
.compte-preferences input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--green); }
.compte-preferences label span { display: flex; flex-direction: column; gap: 3px; }
.compte-preferences label small { color: var(--muted); line-height: 1.4; }
.compte-aide > p { color: var(--muted); line-height: 1.55; }
.compte-liens { display: grid; margin-top: 14px; border-top: 1px solid var(--hairline); }
.compte-liens a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--hairline); font-weight: 650; }
.compte-liens a span { color: var(--muted); font-size: .78rem; font-weight: 500; }
.suppression-compte { margin-top: 16px; }
.suppression-compte summary { cursor: pointer; color: var(--muted); font-size: .84rem; }
.suppression-compte p { color: var(--muted); font-size: .83rem; line-height: 1.55; margin: 10px 0; }

.etat-erreur { width: min(620px, 100%); margin: 70px auto; padding: 40px; border: 1px solid var(--hairline); border-radius: 20px; background: var(--card); text-align: center; box-shadow: var(--ombre); }
.etat-erreur > span { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px; background: var(--green-tint); color: var(--green); font-size: 1.5rem; }
.etat-erreur h1 { color: var(--vert-nuit); font-size: 1.55rem; }
.etat-erreur p { color: var(--muted); line-height: 1.55; margin: 9px 0 20px; }
.etat-erreur .cours-actions { justify-content: center; }

/* ---------------------------------------------------------------- Fin de parcours */

.fin-formation { width: min(100%, 1030px); margin: 0 auto; display: grid; gap: 22px; }
.fin-formation-hero { padding: clamp(32px, 6vw, 68px); border-radius: 24px; color: #fff; text-align: center; background: var(--vert-nuit-surface); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 34px 34px; }
.fin-formation-hero .etiquette { color: rgba(255,255,255,.7); }
.fin-formation-hero h1 { max-width: 790px; margin: 9px auto 14px; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -.045em; }
.fin-formation-hero > p { max-width: 650px; margin: 0 auto; color: rgba(255,255,255,.78); line-height: 1.65; }
.fin-formation-hero > small { display: block; max-width: 620px; margin: 16px auto 0; color: rgba(255,255,255,.58); line-height: 1.45; }
.fin-coches { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 20px; background: var(--jaune); color: var(--vert-nuit-surface); font-size: 1.8rem; font-weight: 900; transform: rotate(-3deg); }
.fin-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.btn-inverse { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; }
.btn-inverse:hover { background: rgba(255,255,255,.16); }
.fin-acquis { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: center; }
.fin-acquis > div:first-child { display: flex; align-items: center; gap: 16px; }
.fin-acquis h2 { color: var(--vert-nuit); }
.fin-acquis p { color: var(--muted); margin-top: 4px; }
.badge-fin { display: grid; place-items: center; flex: 0 0 auto; width: 68px; height: 68px; border-radius: 21px; background: #FFF4BF; font-size: 2rem; }
.fin-modules { display: grid; gap: 7px; }
.fin-modules > b { margin-bottom: 3px; }
.fin-modules span { display: flex; gap: 8px; color: var(--muted); font-size: .86rem; }
.fin-modules i { color: var(--green); font-style: normal; font-weight: 800; }
.fin-satisfaction { display: flex; align-items: center; justify-content: space-between; gap: 28px; background: #FFFCF1; border-color: rgba(202,149,0,.22); }
.fin-satisfaction h2 { color: var(--vert-nuit); font-size: 1.3rem; margin-bottom: 5px; }
.fin-satisfaction p { color: var(--muted); line-height: 1.5; }
.satisfaction-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.satisfaction-merci { flex: 0 0 auto; color: var(--green); font-weight: 700; }
.satisfaction-commentaire { width: min(440px, 100%); }
.satisfaction-commentaire textarea { width: 100%; min-height: 92px; margin-top: 10px; }
.fin-suite { margin-top: 22px; padding-top: 32px; border-top: 1px solid var(--hairline); }
.fin-suite > div:first-child { max-width: 660px; margin-bottom: 18px; }
.fin-suite h2 { color: var(--vert-nuit); font-size: 1.65rem; }
.fin-suite > div:first-child p { color: var(--muted); margin-top: 7px; line-height: 1.5; }

@media (max-width: 900px) {
  .grille-stats { grid-template-columns: repeat(2, 1fr); }
  .bandeau-haut { grid-template-columns: 1fr; }
  .prog-hero, .prog-duo { grid-template-columns: 1fr; }
  .page-formation { grid-template-columns: 1fr; }
  .sommaire { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--hairline); }
  body.pleine-largeur #contenu-item { padding: 24px 18px 60px; }
  .bulle-annexes { right: 12px; font-size: .78rem; padding: 8px 13px; }
  .ligne-cours { flex-direction: column; gap: 14px; }
  .cours-visuel { flex: none; width: 100%; max-height: 200px; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .nav { display: none; }
}

/* ---------------------------------------------------------------- Finition V2 : accessibilité, motivation et responsive */

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nav-mobile, .ouvrir-sommaire-mobile { display: none; }
:where(a, button, input, textarea, select):focus-visible { outline: 3px solid rgba(254, 199, 0, .8); outline-offset: 3px; }
.module-entete:focus-visible { outline: 3px solid rgba(254, 199, 0, .8); outline-offset: -2px; border-radius: 8px; }
input[type="email"], input[type="search"], input[type="date"], input[type="password"] {
  width: 100%; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--card); color: var(--ink);
}
.connexion-champ { text-align: left; margin-bottom: 0; }
.connexion-champ input { margin-top: 0; }
.titre-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.titre-actions .titre-page { margin-bottom: 0; }
/* barre de fin de leçon : précédent à gauche, validation au centre, suivant à droite */
.navigation-lecon {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  margin: 42px auto 0; max-width: 1030px;
}
.nav-lecon-gauche { justify-self: start; }
.nav-lecon-centre { justify-self: center; }
.nav-lecon-droite { justify-self: end; }
.navigation-lecon .btn { white-space: nowrap; }
.valider-lecon {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.02rem; font-weight: 700; padding: 13px 26px;
}
.valider-lecon:disabled { opacity: .85; cursor: default; }
.coche-carre {
  display: grid; place-items: center; width: 17px; height: 17px;
  border: 2px solid currentColor; border-radius: 4px;
  font-size: .72rem; line-height: 1; flex: none;
}
.note-validation-auto { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 10px; }
.actions-quiz { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.toast-action { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Fiche d'entrée : une vue claire du parcours avant d'ouvrir la première vidéo. */
.formation-intro { width: min(100%, 1030px); margin: 0 auto; }
.formation-intro-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; align-items: center;
  padding: clamp(28px, 5vw, 58px); color: #fff; border-radius: 24px;
  background: var(--vert-nuit);
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px; overflow: hidden;
}
.formation-intro-copie .etiquette { color: #9BE67E; }
.formation-intro h1 { font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.02; letter-spacing: -.045em; max-width: 14ch; }
.formation-intro-copie > p { max-width: 63ch; color: rgba(255,255,255,.76); line-height: 1.65; margin: 18px 0 22px; }
.formation-chiffres { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 24px; }
.formation-chiffres span { border: 1px solid rgba(255,255,255,.16); border-radius: 980px; padding: 7px 12px; color: rgba(255,255,255,.72); font-size: .8rem; }
.formation-chiffres b { color: #fff; }
.btn-grand { padding: 12px 18px; }
.formation-intro-badge { text-align: center; display: grid; justify-items: center; gap: 7px; padding: 26px 18px; border: 1px solid rgba(254,199,0,.34); background: rgba(254,199,0,.08); border-radius: 20px; }
.formation-intro-badge > span { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--jaune); color: var(--vert-nuit); font-size: 2.5rem; box-shadow: 0 0 0 9px rgba(254,199,0,.1); }
.formation-intro-badge small { color: rgba(255,255,255,.6); line-height: 1.4; }
.formation-avancement { margin: 18px 0 36px; padding: 0 5px; }
.formation-avancement > div:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.formation-avancement span { color: var(--muted); font-size: .82rem; }
.formation-programme ol { list-style: none; display: grid; gap: 9px; }
.formation-programme li { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); }
.module-numero { font-family: Georgia, serif; font-style: italic; font-size: 1.2rem; color: var(--green); }
.formation-programme li div { display: grid; gap: 4px; }
.formation-programme small { color: var(--muted); }
.module-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green-tint); color: var(--green); font-weight: 800; }
.validation-fichier { color: var(--muted); font-size: .8rem; }
.resume-lecon { margin-top: 18px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.resume-lecon summary { cursor: pointer; color: var(--green); font-weight: 700; }
.resume-lecon .item-description { margin-top: 14px; }
.validation-fichier { margin-top: 13px; font-weight: 650; }

.onglets { display: inline-flex; padding: 3px; margin-bottom: 12px; background: var(--gris-controle); border-radius: 980px; }
.onglet { border: 0; background: transparent; padding: 7px 13px; border-radius: 980px; color: var(--muted); font-weight: 650; }
.onglet.actif { background: var(--card); color: var(--vert-nuit); box-shadow: 0 1px 5px rgba(0, 50, 35, .12); }
.joker-ligne { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.joker-ligne > div { display: flex; flex-direction: column; gap: 3px; }
.joker-ligne span { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.badge-formation.obtenu { opacity: 1; border-color: rgba(254, 199, 0, .65); background: #FFFCF0; }
.badge-formation.obtenu .badge-formation-emoji { background: var(--jaune); filter: none; }
.parcours-progression-carte .btn { justify-self: start; }
.classement-moi { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; padding: 10px 12px; border: 1px dashed rgba(29,107,69,.35); border-radius: 10px; color: var(--green-deep); font-size: .85rem; }

/* Communauté : l'état d'aide est le signal visuel principal. */
.communaute-titre-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.communaute-titre-actions .titre-page { margin-bottom: 0; }
.communaute-outils { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.filtres { display: flex; gap: 7px; flex-wrap: wrap; }
.filtre { border: 1px solid var(--hairline); background: var(--card); color: var(--muted); padding: 8px 14px; border-radius: 980px; font-weight: 650; }
.filtre.actif { background: var(--vert-nuit); border-color: var(--vert-nuit); color: #fff; }
.recherche { display: flex; align-items: center; gap: 8px; min-width: min(350px, 100%); padding: 0 12px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); color: var(--muted); }
.recherche input { border: 0; outline: 0; padding-left: 0; background: transparent; }
.communaute-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .75fr); align-items: start; gap: 22px; }
.communaute-cote { display: grid; gap: 14px; position: sticky; top: 88px; }
.appel-question { padding: 26px; }
.appel-question h2 { color: var(--vert-nuit); font-size: 1.35rem; margin: 12px 0 8px; }
.appel-question p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.appel-question ul { margin: 16px 0 18px 19px; color: var(--ink); font-size: .88rem; line-height: 1.8; }
.appel-icone { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--jaune); color: var(--vert-nuit); font-weight: 800; font-size: 1.25rem; }
.preuve-reponse { display: block; color: var(--green); font-size: .78rem; font-weight: 650; margin-top: 12px; }
.defi-semaine { background: #F2EBDD; border: 1px solid rgba(112, 83, 31, .12); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.defi-semaine b { color: var(--vert-nuit); line-height: 1.4; }
.defi-semaine button { text-align: left; border: 0; background: none; color: var(--green); font-weight: 700; padding: 4px 0; }
.thread-carte { margin-bottom: 14px; padding: 20px; transition: border-color .15s ease; }
.thread-carte.deplie { border-color: rgba(29, 107, 69, .35); }
.thread-resume { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.avatar-initiales { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--green-tint); color: var(--green-deep); font-weight: 750; font-size: .82rem; }
.avatar-initiales.petit { width: 32px; height: 32px; font-size: .7rem; flex: 0 0 32px; }
.avatar-initiales.equipe { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px rgba(29, 107, 69, .28); }
.thread-principal h2 { color: var(--vert-nuit); font-size: 1.08rem; line-height: 1.35; margin: 7px 0 5px; }
.thread-principal > p { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.statut-thread { display: inline-flex; width: fit-content; border-radius: 980px; padding: 4px 9px; font-size: .69rem; font-weight: 750; }
.statut-thread.attente { background: #FFF4C7; color: #795E00; }
.statut-thread.resolu { background: var(--green-tint); color: var(--green-deep); }
.statut-thread.encours { background: #EAF2F7; color: #315D72; }
.thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: .76rem; margin-top: 10px; }
.thread-auteur { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thread-resume-actions { display: flex; align-items: center; align-self: center; gap: 7px; }
.thread-action { align-self: center; white-space: nowrap; }
.thread-carte.deplie .question-apercu { display: none; }
.thread-detail { margin: 14px 0 0 56px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.thread-question { margin-bottom: 10px; }
.question-detail-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px;
  color: var(--muted); font-size: .67rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em;
}
.thread-question .message-affiche > p { margin: 5px 0 0; font-size: .94rem; line-height: 1.6; white-space: pre-line; }
.reponses-liste { display: grid; gap: 7px; margin-top: 10px; }
.reponse {
  margin-top: 0; padding: 13px 14px; border-left: 3px solid var(--hairline);
  background: transparent; border-radius: 0 10px 10px 0;
}
.reponse.officielle { background: rgba(254, 199, 0, .07); border-left: 3px solid #D7A900; }
.reponse.moderation { background: rgba(54, 117, 138, .055); border-left-color: #36758A; }
.reponse-entete { display: flex; gap: 9px; align-items: center; min-height: 32px; }
.reponse-identite { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.reponse .quand { margin-left: 0; white-space: nowrap; }
.reponse .message-affiche > p { margin: 7px 0 0; font-size: .9rem; line-height: 1.55; white-space: pre-line; }
.badge-officiel { background: var(--jaune); color: var(--vert-nuit); border-radius: 980px; padding: 3px 8px; font-size: .67rem; font-weight: 750; }
.badge-role { display: inline-flex; align-items: center; width: fit-content; border-radius: 980px; padding: 3px 8px; font-size: .67rem; font-weight: 780; line-height: 1.25; white-space: nowrap; vertical-align: middle; }
.badge-role-formateur { background: var(--jaune); color: #003223; }
.badge-role-moderateur { background: #E6F0F4; color: #245E70; border: 1px solid rgba(36, 94, 112, .16); }
.badge-role-admin { background: var(--vert); color: #fff; }
.reponse-actions { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.reaction, .resoudre { border: 0; background: none; color: var(--muted); font-size: .78rem; font-weight: 650; padding: 5px 7px; border-radius: 7px; }
.reaction:hover, .reaction.actif { background: var(--green-tint); color: var(--green-deep); }
.resoudre { color: var(--green); margin-top: 10px; padding-left: 0; }
.menu-message { position: relative; margin-left: auto; }
.menu-message summary {
  display: grid; place-items: center; width: 32px; height: 28px; border-radius: 8px; cursor: pointer;
  color: var(--muted); font-size: .72rem; line-height: 1; letter-spacing: 1px; list-style: none;
}
.menu-message summary::-webkit-details-marker { display: none; }
.menu-message summary:hover, .menu-message[open] summary { color: var(--ink); background: var(--gris-controle); }
.menu-message summary:focus-visible { outline: 2px solid rgba(29, 107, 69, .45); outline-offset: 2px; }
.menu-message-popover {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 8; width: 142px; padding: 5px;
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--card); box-shadow: 0 10px 30px rgba(0, 50, 35, .16);
}
.menu-message-popover button {
  display: block; width: 100%; border: 0; border-radius: 7px; padding: 8px 9px; background: none;
  color: var(--ink); text-align: left; font-size: .78rem; font-weight: 650;
}
.menu-message-popover button:hover { background: var(--gris-controle); }
.menu-message-popover button.danger { color: var(--red); }
.menu-message-popover button.danger:hover { background: var(--red-tint); }
.form-reponse > label, .edition-message > label { color: var(--vert-nuit); font-size: .82rem; font-weight: 750; }
.form-reponse textarea, .edition-message textarea {
  width: 100%; min-height: 96px; max-height: 320px; padding: 12px 14px; line-height: 1.55;
  resize: vertical; overflow-y: auto; background: var(--card);
}
.form-reponse-pied, .edition-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-reponse-pied > span, .edition-actions > span { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.form-reponse-pied > div, .edition-actions { display: flex; align-items: center; gap: 8px; }
.edition-message { display: grid; gap: 8px; margin-top: 10px; }
.edition-actions { justify-content: flex-end; }
.edition-actions > span { margin-right: auto; }
.message-actions { display: flex; gap: 4px; margin-top: 9px; }
.message-actions button, .action-message {
  border: 0; background: none; color: var(--muted); padding: 4px 6px; border-radius: 7px;
  font-size: .75rem; font-weight: 650;
}
.message-actions button:hover, .action-message:hover { background: var(--gris-controle); color: var(--ink); }
.action-message { margin-left: auto; }
.action-message + .action-message { margin-left: 0; }
.message-actions .danger, .action-message.danger { color: var(--red); }
.message-actions .danger:hover, .action-message.danger:hover { background: var(--red-tint); color: var(--red); }
.aide-role { display: block; margin-top: 7px; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.question-voile { z-index: 130; }
.question-modale { width: min(590px, calc(100vw - 28px)); max-height: 90vh; overflow-y: auto; text-align: left; position: relative; }
.question-modale h2 { margin-bottom: 18px; }
.question-modale p { margin-bottom: 0; }
.modale-fermer { position: absolute; right: 16px; top: 14px; border: 0; background: var(--gris-controle); width: 32px; height: 32px; border-radius: 50%; }

/* Suivi formateur et dossier de preuves */
.suivi-outils { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 20px 0 12px; }
.suivi-outils select { min-width: 180px; }
.tableau-defile { overflow-x: auto; border-radius: var(--radius); }
.tableau td small { display: block; color: var(--muted); font-size: .74rem; margin-top: 3px; white-space: nowrap; }
.table-vide { text-align: center; color: var(--muted); padding: 26px !important; }
.etat-suivi { display: inline-flex; padding: 4px 9px; border-radius: 980px; font-size: .72rem; font-weight: 700; white-space: nowrap; background: var(--gris-controle); color: var(--muted); }
.etat-suivi.en_cours { background: var(--green-tint); color: var(--green-deep); }
.etat-suivi.termine { background: var(--green); color: #fff; }
.etat-suivi.bloque, .etat-suivi.en_retard { background: var(--red-tint); color: var(--red); }
.etat-suivi.inactif, .etat-suivi.jamais_actif, .etat-suivi.non_demarre { background: #FFF4C7; color: #795E00; }
.relance-motifs { color: var(--muted); flex: 1; }
.acces-formations { display: grid; gap: 8px; margin-bottom: 14px; }
.acces-formations label { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; line-height: 1.4; }
.acces-formations input { margin-top: 2px; accent-color: var(--green); }
.historique-relance { color: var(--muted); font-size: .78rem; padding: 5px 0; }
.suivi-offres { margin-bottom: 22px; }
.suivi-offres-tunnel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 12px; background: var(--green-tint); }
.suivi-offres-tunnel span { display: flex; align-items: baseline; gap: 5px; color: var(--green-deep); font-size: .82rem; }
.suivi-offres-tunnel b { font-size: 1.25rem; }
.suivi-offres-tunnel i { color: var(--green); font-style: normal; }
.suivi-mesure-note { margin: 9px 2px 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.suivi-offres-produits { display: grid; gap: 7px; margin-top: 12px; }
.suivi-offres-produits > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--hairline); font-size: .82rem; }
.suivi-offres-produits span { color: var(--muted); }
.chronologie { padding: 18px 20px; }
.evenement { display: grid; grid-template-columns: 12px 1fr; gap: 10px; padding: 0 0 17px; position: relative; }
.evenement:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; background: var(--hairline); }
.evenement-point { width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: var(--green); z-index: 1; }
.evenement b { font-size: .86rem; text-transform: capitalize; }
.evenement p, .evenement time { color: var(--muted); font-size: .76rem; line-height: 1.4; }

/* Confettis sobres, uniquement lors d'une validation. */
.confettis { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; display: none; }
.confettis.actif { display: block; }
.confettis i { position: absolute; left: var(--x); top: -20px; width: 9px; height: 15px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); animation: confetti-chute 1.55s var(--d) cubic-bezier(.18,.72,.35,1) forwards; }
@keyframes confetti-chute { to { transform: translate3d(-28px, 105vh, 0) rotate(720deg); opacity: .2; } }

@media (max-width: 900px) {
  body { padding-bottom: 68px; overflow-x: hidden; }
  .vue { width: calc(100% - 28px); margin: 26px auto 52px; }
  .topbar { padding: 7px 9px; }
  .topbar-pill { min-width: 0; gap: 8px; padding: 6px 8px 6px 13px; }
  .brand { min-width: 0; gap: 7px; }
  .brand-logo { width: 112px; height: auto; }
  .brand-campus { display: none; }
  .topbar-droite { min-width: 0; gap: 7px; }
  .chip-apprenant { padding: 6px 9px; gap: 5px; min-width: 0; }
  .chip-apprenant .chip-niveau, .chip-apprenant .chip-serie, .chip-apprenant .sep { display: none; }
  .chip-apprenant .chip-nom { max-width: 68px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .switch-admin span { display: none; }
  .btn-sortir { padding: 6px 9px; font-size: 0; }
  .btn-sortir::after { content: '↪'; font-size: 1rem; }
  .nav-mobile { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 70; background: rgba(0, 50, 35, .96); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 6px; box-shadow: 0 14px 38px rgba(0, 32, 20, .34); backdrop-filter: blur(12px); }
  body.session-admin .nav-mobile { grid-template-columns: repeat(6, 1fr); }
  body.vue-entreprise.session-admin .nav-mobile { grid-template-columns: repeat(5, 1fr); }
  .nav-mobile a { color: rgba(255,255,255,.68); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 45px; border-radius: 13px; font-size: .64rem; font-weight: 650; }
  .nav-mobile a > span:first-child { font-size: 1.03rem; }
  .nav-mobile a:hover { text-decoration: none; }
  .nav-mobile a.actif { background: var(--bg); color: var(--vert-nuit); }
  .pied { padding: 20px 18px 94px; gap: 12px; }
  .pied nav { gap: 11px; }
  .titre-page { font-size: 1.65rem; }
  .sous-titre { font-size: .95rem; margin-bottom: 22px; }
  .grille-stats { gap: 9px; }
  .stat { padding: 14px; }
  .stat .valeur { font-size: 1.35rem; }
  .communaute-outils, .suivi-outils, .titre-actions, .communaute-titre-actions { align-items: stretch; flex-direction: column; }
  .recherche { width: 100%; min-width: 0; }
  .communaute-layout { grid-template-columns: minmax(0, 1fr); }
  .communaute-layout > *, #liste-threads, .thread-carte { min-width: 0; }
  .communaute-cote { position: static; }
  .appel-question { padding: 20px; }
  .thread-resume { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; }
  .thread-resume-actions { grid-column: 2; justify-self: start; flex-wrap: wrap; }
  .thread-detail { margin-left: 0; }
  .form-reponse-pied { align-items: flex-start; flex-direction: column; }
  .form-reponse-pied > div { width: 100%; justify-content: flex-end; }
  .edition-actions { flex-wrap: wrap; }
  .tableau { min-width: 760px; }
  .tableau-simple { min-width: 0; }
  .fiche-prog-ligne { align-items: flex-start; flex-direction: column; gap: 4px; }
  .fiche-prog-ligne span { white-space: normal; }
  .navigation-lecon { grid-template-columns: 1fr; }
  .nav-lecon-centre { order: -1; }
  .nav-lecon-gauche { order: 1; }
  .nav-lecon-gauche, .nav-lecon-centre, .nav-lecon-droite { justify-self: stretch; }
  .nav-lecon-gauche .btn, .nav-lecon-centre .btn, .nav-lecon-droite .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .lecon-titre { font-size: 1.55rem; }
  .carte-fichier { align-items: stretch; flex-direction: column; }
  .toasts { left: 14px; right: 14px; top: calc(var(--topbar-h) + 10px); bottom: auto; }
  body.pleine-largeur .toasts { top: calc(var(--topbar-h) + 62px); }
  .toast { max-width: none; }
  .coach-bulle { bottom: 82px; right: 14px; }
  .formation-intro-hero { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
  .formation-intro-badge { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .formation-intro-badge > span { grid-row: span 2; width: 58px; height: 58px; font-size: 1.75rem; }
  .boussole-competences, .offre-recommandee { grid-template-columns: 1fr; }
  .barre-formule { grid-template-columns: 40px minmax(0, 1fr); }
  .barre-formule b { grid-column: 1 / -1; min-height: 38px; border-left: 0; border-top: 1px solid var(--hairline); }
  .offre-visuel { min-height: 185px; }
  .offre-copie { padding: 21px 18px; }
  .compte-grille, .compte-deux-colonnes, .compte-formations, .fin-acquis { grid-template-columns: 1fr; }
  .compte-identite { grid-template-columns: auto minmax(0, 1fr); }
  .compte-resume { min-height: 116px; }
  .grille-support { grid-template-columns: 1fr; }
  .texte-juridique dl { grid-template-columns: 1fr; }
  .texte-juridique dl div:nth-child(odd) { border-right: 0; }
  .fin-satisfaction { align-items: stretch; flex-direction: column; }
  .satisfaction-actions { flex-wrap: wrap; }
  .fin-formation-hero { padding: 38px 20px; }

  body.pleine-largeur { padding-bottom: 68px; }
  body.pleine-largeur #contenu-item { padding: 70px 16px 46px; }
  .page-formation, .page-formation.sans-sommaire { display: block; }
  .page-formation .sommaire, .page-formation.sans-sommaire .sommaire {
    display: block; position: fixed; inset: 0 auto 0 0; width: min(360px, 88vw); height: 100dvh;
    z-index: 120; border: 0; border-right: 1px solid var(--hairline); box-shadow: 18px 0 48px rgba(0, 30, 18, .22);
    transform: translateX(-105%); transition: transform .22s ease; padding-top: 22px;
  }
  body.sommaire-mobile-ouvert .sommaire { transform: translateX(0); }
  body.sommaire-mobile-ouvert::after { content: ''; position: fixed; inset: 0; z-index: 110; background: rgba(0, 20, 12, .35); }
  .ouvrir-sommaire-mobile { display: inline-flex; top: calc(var(--topbar-h) + 10px); left: 12px; }
  .ouvrir-sommaire-desktop { display: none !important; }
  .masquer-sommaire { font-size: 0; }
  .masquer-sommaire::after { content: '✕'; font-size: .9rem; }
  input, textarea, select { font-size: 16px; }
}

@media (max-width: 520px) {
  .brand-logo { width: 100px; }
  .chip-apprenant .chip-nom { display: none; }
  .chip-apprenant { background: transparent; padding: 4px; }
  .topbar-droite { gap: 4px; }
  .grille-stats { grid-template-columns: 1fr 1fr; }
  .bandeau-annonce { align-items: flex-start; flex-wrap: wrap; }
  .cpf-bandeau { font-size: .86rem; }
  .modale { padding: 25px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .confettis { display: none !important; }
}

/* ---------------------------------------------------------------- Recherche globale */

.recherche-globale {
  display: flex; align-items: center; gap: 8px; flex: 0 1 230px;
  background: var(--gris-controle); border-radius: 980px; padding: 7px 14px;
  color: var(--muted);
}
.recherche-globale input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font-size: .88rem; color: var(--ink); }
.recherche-globale input:focus { outline: none; }
.recherche-globale:focus-within { outline: 2px solid rgba(29, 107, 69, .35); }
.recherche-page { display: flex; gap: 10px; margin-bottom: 24px; max-width: 640px; }
.recherche-page input { flex: 1; }
.resultats-recherche { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
.resultat-recherche { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; color: var(--ink); }
.resultat-recherche:hover { text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 14px 32px -16px rgba(0,0,0,.2); }
.resultat-corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resultat-chemin { color: var(--muted); font-size: .8rem; }
.resultat-corps p { color: var(--muted); font-size: .85rem; line-height: 1.45; }

/* ---------------------------------------------------------------- Pastille notifications communauté */

.nav a, .nav-mobile a { position: relative; }
.pastille-notif {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 980px; background: var(--red); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center;
}
.nav-mobile a .pastille-notif { top: 4px; right: 16%; }

/* ---------------------------------------------------------------- Coaching individuel + vidéo bienvenue */

.coaching-carte { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.coaching-icone { font-size: 1.7rem; }
.coaching-copie { flex: 1; min-width: 240px; }
.coaching-copie p { color: var(--muted); font-size: .92rem; line-height: 1.5; margin-top: 4px; }
.video-bienvenue { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.video-bienvenue-icone {
  flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--green-tint); color: var(--green); font-size: 1.1rem;
}
.video-bienvenue > div { flex: 1; min-width: 220px; }
.video-bienvenue p { color: var(--muted); font-size: .88rem; margin-top: 2px; }

/* ---------------------------------------------------------------- Tour d'onboarding */

.tour-modale { text-align: center; }
.tour-icone { font-size: 2.2rem; margin-bottom: 10px; }
.tour-modale p { color: var(--ink); line-height: 1.6; }
.tour-code { text-align: left; margin-top: 14px; }
.tour-points { display: flex; justify-content: center; gap: 7px; margin: 18px 0 14px; }
.tour-points span { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-controle); }
.tour-points span.actif { background: var(--green); }
.tour-actions { display: flex; justify-content: center; gap: 10px; }

/* ---------------------------------------------------------------- Bascule de thème */

.btn-theme {
  border: 0; background: var(--gris-controle); border-radius: 980px;
  width: 34px; height: 34px; font-size: .95rem; cursor: pointer; display: grid; place-items: center;
}
.btn-theme:hover { background: var(--controle-survol); }

/* ---------------------------------------------------------------- Mode sombre */

[data-theme="sombre"] {
  --bg: #101A14;
  --card: #182620;
  --ink: #ECEBE0;
  --muted: #9FB0A5;
  --vert-nuit: #DFF3E7;
  --green: #4FB57E;
  --green-deep: #6BCB94;
  --green-tint: #1E3529;
  --hairline: rgba(255, 255, 255, .11);
  --gris-controle: #243329;
  --controle-survol: #2E4237;
  --surface-2: #141F19;
  --survol: rgba(255, 255, 255, .06);
  --red-tint: #3B221D;
  --ombre: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -16px rgba(0, 0, 0, .55);
}
[data-theme="sombre"] .topbar-pill { background: #14211A; box-shadow: 0 6px 22px rgba(0, 0, 0, .5); }
.logo-nuit { display: none; }
[data-theme="sombre"] .logo-jour { display: none; }
[data-theme="sombre"] .logo-nuit { display: block; }
[data-theme="sombre"] .brand-campus { color: var(--ink); border-left-color: var(--hairline); }
[data-theme="sombre"] .nav a.actif { background: var(--green-tint); color: var(--ink); }
/* encart astuce : le jaune très clair devient un ambre sombre lisible */
[data-theme="sombre"] .desc-astuce { background: rgba(254, 199, 0, .10); }
[data-theme="sombre"] .desc-astuce-t { color: var(--jaune); }
[data-theme="sombre"] .desc-section { color: var(--ink); }
[data-theme="sombre"] .desc-terme, [data-theme="sombre"] .item-description strong { color: var(--ink); }
[data-theme="sombre"] .voile { background: rgba(0, 0, 0, .6); }
[data-theme="sombre"] .cours-visuel img { filter: brightness(.9); }
[data-theme="sombre"] .pastille.fait { background: var(--green); border-color: var(--green); color: #06231A; }
[data-theme="sombre"] .reponse { background: transparent; }
[data-theme="sombre"] .reponse.officielle { background: rgba(254, 199, 0, .07); }
[data-theme="sombre"] .reponse.moderation { background: rgba(78, 149, 170, .07); }
[data-theme="sombre"] .badge-role-moderateur { background: #1D3942; color: #A9DBE8; }
[data-theme="sombre"] .badge-role-admin { background: var(--jaune); color: #16251f; }

/* ---------------------------------------------------------------- Atelier Outils */

.outils-page { display: flex; flex-direction: column; gap: 24px; }
.outils-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
  align-items: center; gap: clamp(24px, 5vw, 64px); min-height: 280px; padding: clamp(28px, 5vw, 54px);
  border-radius: 24px; color: #fff; background:
    radial-gradient(circle at 92% 18%, rgba(254,199,0,.19), transparent 30%),
    linear-gradient(135deg, #003223, #00583D);
  box-shadow: 0 22px 54px -34px rgba(0,50,35,.8);
}
.outils-hero::after {
  content: ''; position: absolute; right: -70px; bottom: -100px; width: 280px; height: 280px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 50%;
}
.outils-hero h1 { max-width: 700px; margin: 7px 0 12px; color: #fff; font-size: clamp(2rem, 4.2vw, 3.45rem); line-height: 1.02; letter-spacing: -.045em; }
.outils-hero p { max-width: 650px; color: rgba(255,255,255,.75); font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.6; }
.outils-hero .etiquette { color: var(--jaune); }
.outils-formule {
  position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr) 42px; align-items: center;
  min-height: 58px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.1); box-shadow: 0 18px 38px rgba(0,20,12,.24); backdrop-filter: blur(12px);
}
.outils-formule span { display: grid; place-items: center; align-self: stretch; border-right: 1px solid rgba(255,255,255,.2); color: var(--jaune); font-size: 1.1rem; font-style: italic; font-weight: 800; }
.outils-formule code { padding: 0 16px; color: #fff; font: 650 .88rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: normal; }
.outils-formule b { display: grid; place-items: center; align-self: stretch; background: var(--jaune); color: #003223; }
.outils-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.outil-carte { display: flex; flex-direction: column; min-height: 310px; padding: 24px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.outil-carte:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--green) 35%, var(--hairline)); box-shadow: 0 20px 42px -28px rgba(0,50,35,.42); }
.outil-carte-signature { border-top: 4px solid var(--jaune); padding-top: 21px; }
.outil-icone {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 14px;
  background: var(--green-tint); color: var(--green-deep); font-size: .92rem; font-weight: 900; letter-spacing: -.04em;
}
.outil-carte-signature .outil-icone { background: var(--jaune); color: #003223; font-size: 1.35rem; }
.outil-copie { flex: 1; }
.outil-copie h2 { margin: 6px 0 9px; color: var(--vert-nuit); font-size: 1.25rem; }
.outil-copie p { color: var(--muted); font-size: .88rem; line-height: 1.55; }
.outil-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.outil-pied > span { max-width: 55%; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.outils-note { display: flex; align-items: center; gap: 15px; padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 16px; background: color-mix(in srgb, var(--green-tint) 48%, var(--card)); }
.outils-note > span { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--card); color: var(--green); font-weight: 900; }
.outils-note b { color: var(--vert-nuit); font-size: .88rem; }
.outils-note p { margin-top: 2px; color: var(--muted); font-size: .76rem; }

.outils-retour { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; }
.outils-retour a { color: var(--green); font-weight: 800; }
.outils-retour strong { color: var(--ink); }
.outil-natif-entete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; }
.outil-natif-entete h1 { max-width: 800px; margin: 4px 0 7px; color: var(--vert-nuit); font-size: clamp(1.8rem, 3.8vw, 2.75rem); line-height: 1.05; letter-spacing: -.035em; }
.outil-natif-entete p { max-width: 760px; color: var(--muted); line-height: 1.55; }
.outil-source { color: var(--muted); font-size: .68rem; line-height: 1.5; text-align: center; }

/* Traducteur : la barre de formule devient l’interaction signature. */
.traducteur-compteur { display: flex; flex-direction: column; align-items: flex-end; padding: 13px 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); }
.traducteur-compteur strong { color: var(--green); font-size: 1.8rem; line-height: 1; }
.traducteur-compteur span { margin-top: 4px; color: var(--muted); font-size: .65rem; }
.traducteur-recherche {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 58px; overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--green) 50%, var(--hairline)); border-radius: 14px;
  background: var(--card); box-shadow: 0 14px 34px -30px rgba(0,50,35,.75);
}
.traducteur-recherche > span { display: grid; place-items: center; border-right: 1px solid var(--hairline); color: var(--green); font-style: italic; font-weight: 900; }
.traducteur-recherche input { min-width: 0; padding: 0 17px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 750 .95rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.traducteur-recherche kbd { align-self: center; margin-right: 12px; padding: 7px 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface-2); color: var(--muted); font: 750 .62rem ui-monospace, monospace; }
.traducteur-categories { display: flex; flex-wrap: wrap; gap: 7px; }
.traducteur-categories button { padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; font: inherit; font-size: .68rem; font-weight: 750; }
.traducteur-categories button:hover, .traducteur-categories button.actif { border-color: var(--green); background: var(--green-tint); color: var(--green-deep); }
.traducteur-liste { display: grid; gap: 14px; }
.traducteur-groupe { overflow: hidden; border: 1px solid var(--hairline); border-radius: 16px; background: var(--card); box-shadow: var(--ombre); }
.traducteur-groupe h2 { padding: 13px 17px; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--green-tint) 44%, var(--card)); color: var(--green-deep); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.traducteur-ligne { display: grid; grid-template-columns: minmax(150px, 1fr) 28px minmax(150px, 1fr) minmax(100px, .7fr); align-items: center; gap: 8px; min-height: 57px; padding: 8px 14px; border-top: 1px solid var(--hairline); }
.traducteur-ligne:first-child { border-top: 0; }
.traducteur-ligne > span { color: var(--green); text-align: center; }
.traducteur-ligne em { color: var(--muted); font-size: .66rem; font-style: normal; line-height: 1.3; }
.traducteur-code { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: copy; text-align: left; }
.traducteur-code:hover { background: var(--green-tint); color: var(--green-deep); }
.traducteur-code small { display: grid; place-items: center; width: 28px; height: 24px; border: 1px solid var(--hairline); border-radius: 6px; color: var(--muted); font-size: .55rem; font-weight: 850; }
.traducteur-code code { overflow: hidden; font: 750 .78rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; }
.traducteur-vide { padding: 44px 20px; border: 1px dashed var(--hairline); border-radius: 16px; color: var(--muted); text-align: center; }
.traducteur-vide b { display: block; color: var(--vert-nuit); }
.traducteur-vide p { margin-top: 4px; font-size: .76rem; }

/* Générateur : sélecteurs sobres, résultat concret et défi facultatif. */
.generateur-fichier { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); }
.generateur-fichier span, .generateur-fichier b { padding: 6px 8px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font: 800 .62rem ui-monospace, monospace; }
.generateur-fichier b { background: var(--jaune); color: #003223; }
.generateur-fichier i { color: var(--green); font-style: normal; }
.exo-etape { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding-top: 8px; }
.exo-numero { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #003223; color: var(--jaune); font-size: .78rem; font-weight: 900; }
.exo-etape-contenu h2 { margin: 4px 0 14px; color: var(--vert-nuit); font-size: 1rem; }
.exo-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.exo-grille-scenarios { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.exo-choix { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 2px 8px; min-height: 74px; padding: 10px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; text-align: left; }
.exo-choix > span { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); font-size: .95rem; }
.exo-choix b { font-size: .74rem; line-height: 1.2; }
.exo-choix small { color: var(--muted); font-size: .58rem; line-height: 1.2; }
.exo-choix:hover, .exo-choix.actif { border-color: var(--green); background: var(--green-tint); }
.exo-choix.actif { box-shadow: inset 0 0 0 1px var(--green); }
.exo-choix.actif > span { background: var(--green); }
.exo-difficultes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--hairline); border-radius: 13px; background: var(--card); }
.exo-difficultes button { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border: 0; border-left: 1px solid var(--hairline); background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.exo-difficultes button:first-child { border-left: 0; }
.exo-difficultes button small { color: var(--muted); font-size: .62rem; }
.exo-difficultes button.actif { background: var(--green-tint); box-shadow: inset 0 -3px 0 var(--green); color: var(--green-deep); }
.exo-lancement { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(280px, 1fr); align-items: center; gap: 12px; padding: 19px; border-radius: 16px; background: #003223; }
.exo-lancement > p { grid-column: 1 / -1; color: rgba(255,255,255,.58); font-size: .63rem; text-align: center; }
.exo-defi { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 52px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; text-align: left; }
.exo-defi > span { font-size: 1.1rem; }
.exo-defi b, .exo-defi small { display: block; }
.exo-defi b { font-size: .72rem; }
.exo-defi small { margin-top: 2px; color: rgba(255,255,255,.6); font-size: .58rem; }
.exo-defi i { padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: .55rem; font-style: normal; font-weight: 800; }
.exo-defi.actif { border-color: var(--jaune); background: rgba(254,199,0,.1); }
.exo-defi.actif i { background: var(--jaune); color: #003223; }
.exo-generer { min-height: 52px; justify-content: center; }
.exo-chrono { position: sticky; top: 12px; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--jaune) 60%, var(--hairline)); border-radius: 14px; background: var(--card); box-shadow: 0 14px 32px -22px rgba(0,0,0,.45); }
.exo-chrono > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.exo-chrono > div:first-child b { color: var(--vert-nuit); font-size: .78rem; }
.exo-chrono time { color: var(--green); font: 900 1.25rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.exo-chrono > div:last-child { display: flex; gap: 7px; }
.exo-resultat { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr); gap: 20px; padding: 22px; border-top: 4px solid var(--green); }
.exo-resultat h2 { margin: 4px 0 10px; color: var(--vert-nuit); font-size: 1.15rem; }
.exo-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.exo-tags span { padding: 5px 8px; border-radius: 999px; background: var(--green-tint); color: var(--green-deep); font-size: .6rem; font-weight: 800; }
.exo-resultat details { border: 1px solid var(--hairline); border-radius: 11px; background: var(--surface-2); }
.exo-resultat summary { padding: 11px 13px; color: var(--green-deep); cursor: pointer; font-size: .72rem; font-weight: 800; }
.exo-resultat pre { max-height: 270px; overflow: auto; padding: 0 13px 13px; color: var(--ink); font: .7rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.exo-resultat > p { grid-column: 1 / -1; color: var(--muted); font-size: .68rem; }
.exo-resultat code { padding: 2px 5px; border-radius: 5px; background: var(--surface-2); color: var(--green-deep); }

/* Préparation Tosa : volontairement adulte, chronométrée et sans imitation de marque. */
.tosa-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px;
  padding: clamp(28px, 5vw, 48px); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--hairline));
  border-radius: 22px; background:
    linear-gradient(120deg, color-mix(in srgb, var(--green-tint) 72%, var(--card)), var(--card));
}
.tosa-hero h1 { max-width: 760px; margin: 5px 0 10px; color: var(--vert-nuit); font-size: clamp(2rem, 4.5vw, 3.35rem); line-height: 1.03; letter-spacing: -.045em; }
.tosa-hero p { max-width: 740px; color: var(--muted); line-height: 1.6; }
.tosa-repere { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 154px; height: 154px; border: 10px solid var(--green-tint); border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); text-align: center; }
.tosa-repere strong { color: var(--green); font-size: 2.15rem; line-height: 1; }
.tosa-repere span { max-width: 95px; margin-top: 6px; color: var(--muted); font-size: .64rem; line-height: 1.3; }
.tosa-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tosa-mode { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; min-height: 180px; padding: 24px; }
.tosa-mode > .btn { grid-column: 2; justify-self: start; }
.tosa-mode-principal { color: #fff; border-color: transparent; background: #003223; }
.tosa-mode-principal h2 { color: #fff !important; }
.tosa-mode-principal p { color: rgba(255,255,255,.68) !important; }
.tosa-mode-principal .etiquette { color: var(--jaune); }
.tosa-mode-num { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 17px; background: var(--green-tint); color: var(--green); font-size: 1.55rem; font-weight: 900; }
.tosa-mode-principal .tosa-mode-num { background: var(--jaune); color: #003223; }
.tosa-mode h2 { margin: 4px 0; color: var(--vert-nuit); font-size: 1.25rem; }
.tosa-mode p { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.tosa-domaines-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tosa-domaine {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 17px;
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; box-shadow: var(--ombre); transition: border-color .15s ease, transform .15s ease;
}
.tosa-domaine:hover { transform: translateY(-2px); border-color: var(--green); }
.tosa-domaine > span { color: var(--green); font: 800 .68rem ui-monospace, monospace; }
.tosa-domaine b, .tosa-domaine small { display: block; }
.tosa-domaine b { color: var(--vert-nuit); font-size: .88rem; }
.tosa-domaine small { margin-top: 4px; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.tosa-domaine i { color: var(--green); font-style: normal; font-size: 1.1rem; }
.tosa-historique-liste { overflow: hidden; border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); }
.tosa-historique-liste > div { display: grid; grid-template-columns: minmax(0, 1fr) 100px 80px 90px; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--hairline); }
.tosa-historique-liste > div:first-child { border-top: 0; }
.tosa-historique-mode { color: var(--ink); font-size: .78rem; font-weight: 700; }
.tosa-historique-liste b { color: var(--green); font-size: .88rem; }
.tosa-historique-liste > div > span:not(.tosa-historique-mode), .tosa-historique-liste small { color: var(--muted); font-size: .7rem; }
.tosa-legal { max-width: 900px; margin-inline: auto; color: var(--muted); font-size: .66rem; line-height: 1.5; text-align: center; }

.tosa-session-page { max-width: 980px; margin-inline: auto; }
.tosa-session-entete { display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px; align-items: center; gap: 20px; }
.tosa-session-entete > a { color: var(--green); font-size: .78rem; font-weight: 800; }
.tosa-session-entete > div { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; gap: 12px; color: var(--muted); font-size: .7rem; }
.tosa-session-entete > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tosa-progression { height: 7px; overflow: hidden; border-radius: 999px; background: var(--gris-controle); }
.tosa-progression i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #5EBD7D); transition: width .2s ease; }
.tosa-chrono, .tosa-sans-chrono { justify-self: end; color: var(--green); font: 850 1.05rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.tosa-chrono.urgent { color: var(--red); }
.tosa-sans-chrono { font-family: inherit; font-size: .72rem; }
.tosa-question { padding: clamp(24px, 5vw, 48px); }
.tosa-question-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--green); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tosa-question-meta span:last-child { color: var(--muted); }
.tosa-question h1 { max-width: 850px; margin: 17px 0 28px; color: var(--vert-nuit); font-size: clamp(1.35rem, 2.8vw, 2.05rem); line-height: 1.3; letter-spacing: -.02em; }
.tosa-excel { margin: -4px 0 22px; overflow: hidden; border: 1px solid #B8C2BC; border-radius: 12px; background: #fff; color: #202620; box-shadow: 0 14px 34px -27px rgba(0,40,20,.65); }
.tosa-excel-titre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 35px; padding: 0 11px; background: #107C41; color: #fff; font-size: .65rem; }
.tosa-excel-titre span { font-size: 1rem; }
.tosa-excel-titre i { opacity: .72; font-style: normal; }
.tosa-excel-onglets { display: flex; gap: 2px; overflow-x: auto; padding: 0 7px; border-bottom: 1px solid #D8DEDA; background: #F7F8F7; }
.tosa-excel-onglets span { flex: 0 0 auto; padding: 8px 9px 6px; border-bottom: 3px solid transparent; color: #526057; font-size: .59rem; font-weight: 700; }
.tosa-excel-onglets span.actif { border-color: #107C41; color: #107C41; }
.tosa-excel-ruban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 74px; border-bottom: 1px solid #D8DEDA; background: #F8FAF8; }
.tosa-excel-ruban button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 8px 5px; border: 0; border-left: 1px solid #E0E5E1; background: transparent; color: #27322B; font: inherit; }
.tosa-excel-ruban button:first-child { border-left: 0; }
.tosa-excel-ruban button:not(:disabled) { cursor: pointer; }
.tosa-excel-ruban button:not(:disabled):hover, .tosa-excel-ruban button.selectionnee { background: #DDF1E6; box-shadow: inset 0 -3px 0 #107C41; }
.tosa-excel-ruban button > span { color: #107C41; font-size: 1.05rem; font-weight: 800; }
.tosa-excel-ruban button b { overflow: hidden; max-width: 100%; font-size: .58rem; line-height: 1.2; text-align: center; text-overflow: ellipsis; }
.tosa-excel-formule { display: grid; grid-template-columns: 54px 28px minmax(0, 1fr); align-items: center; min-height: 32px; border-bottom: 1px solid #CCD4CF; color: #3C493F; font-size: .6rem; }
.tosa-excel-formule b { align-self: stretch; display: grid; place-items: center; border-right: 1px solid #CCD4CF; background: #F4F6F4; }
.tosa-excel-formule span { color: #107C41; font-style: italic; font-weight: 900; text-align: center; }
.tosa-excel-formule code { overflow: hidden; padding: 0 8px; color: #1F2922; font: 700 .62rem ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.tosa-excel-grille { display: grid; grid-template-columns: 36px repeat(var(--cols), minmax(82px, 1fr)); overflow-x: auto; min-width: max-content; background: #fff; }
.tosa-excel-grille > * { min-height: 31px; padding: 7px 8px; border-right: 1px solid #DDE3DF; border-bottom: 1px solid #DDE3DF; font-size: .59rem; font-style: normal; }
.tosa-excel-grille > b, .tosa-excel-grille > em, .tosa-excel-grille > i { display: grid; place-items: center; background: #F1F4F2; color: #647168; font-weight: 700; text-align: center; }
.tosa-excel-grille > span.actif { position: relative; background: #F4FFF8; box-shadow: inset 0 0 0 2px #107C41; }
.tosa-excel-consigne { padding: 9px 12px; border-top: 1px solid #D8DEDA; background: #F2F8F4; color: #107C41; font-size: .62rem; font-weight: 800; text-align: center; }
.tosa-reponse-interactive { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 11px; background: var(--surface-2); color: var(--muted); font-size: .7rem; }
.tosa-reponse-interactive b { color: var(--green-deep); }
.tosa-reponse-interactive button { border: 0; background: transparent; color: var(--green); cursor: pointer; font: inherit; font-size: .68rem; font-weight: 800; }
.tosa-options { display: flex; flex-direction: column; gap: 10px; }
.tosa-options button {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 28px; align-items: center; gap: 15px; width: 100%;
  min-height: 64px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 13px;
  background: var(--surface-2); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.tosa-options button:hover { border-color: color-mix(in srgb, var(--green) 50%, var(--hairline)); transform: translateX(2px); }
.tosa-options button.selectionnee { border-color: var(--green); background: var(--green-tint); box-shadow: inset 4px 0 0 var(--green); }
.tosa-options button > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--card); color: var(--muted); font-weight: 850; }
.tosa-options button.selectionnee > span { border-color: var(--green); background: var(--green); color: #fff; }
.tosa-options button b { font-size: .88rem; line-height: 1.4; }
.tosa-options button i { color: var(--green); font-style: normal; font-weight: 900; }
.tosa-navigation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; }
.tosa-navigation > span { color: var(--muted); font-size: .7rem; text-align: center; }

.tosa-resultat-page { max-width: 980px; margin-inline: auto; }
.tosa-resultat-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 52px);
  padding: clamp(28px, 5vw, 48px); border-radius: 22px; background: #003223; color: #fff;
}
.tosa-indice { display: grid; grid-template-columns: auto auto; align-items: end; justify-content: center; width: 170px; height: 170px; padding-top: 43px; border: 10px solid rgba(255,255,255,.12); border-radius: 50%; }
.tosa-indice strong { color: var(--jaune); font-size: 3rem; line-height: .9; }
.tosa-indice > span { color: rgba(255,255,255,.66); font-size: .8rem; }
.tosa-indice small { grid-column: 1 / -1; color: rgba(255,255,255,.62); font-size: .62rem; text-align: center; }
.tosa-resultat-hero h1 { margin: 5px 0 8px; color: #fff; font-size: clamp(1.65rem, 3.5vw, 2.65rem); }
.tosa-resultat-hero p { color: rgba(255,255,255,.72); line-height: 1.55; }
.tosa-resultat-hero .etiquette { color: var(--jaune); }
.tosa-xp { display: inline-block; margin-top: 14px; padding: 7px 11px; border-radius: 999px; background: rgba(254,199,0,.14); color: var(--jaune); font-size: .7rem; }
.tosa-bilan-domaines { display: flex; flex-direction: column; gap: 13px; padding: 26px; }
.tosa-bilan-domaines h2 { margin: 3px 0 7px; color: var(--vert-nuit); font-size: 1.2rem; }
.tosa-barre { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(180px, 1fr) 52px; align-items: center; gap: 12px; }
.tosa-barre > span { color: var(--ink); font-size: .78rem; font-weight: 700; }
.tosa-barre > div { height: 9px; overflow: hidden; border-radius: 999px; background: var(--gris-controle); }
.tosa-barre i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.tosa-barre b { color: var(--green); font-size: .75rem; text-align: right; }
.tosa-bilan-domaines > p { margin-top: 5px; padding-top: 14px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: .78rem; }
.tosa-corrections > div:last-child { display: flex; flex-direction: column; gap: 9px; }
.tosa-correction { overflow: hidden; padding: 0; border-left: 4px solid var(--green); }
.tosa-correction.fausse { border-left-color: var(--red); }
.tosa-correction summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px 18px; cursor: pointer; list-style: none; }
.tosa-correction summary::-webkit-details-marker { display: none; }
.tosa-correction summary > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-tint); color: var(--green); font-weight: 900; }
.tosa-correction.fausse summary > span { background: var(--red-tint); color: var(--red); }
.tosa-correction summary small, .tosa-correction summary b { display: block; }
.tosa-correction summary small { color: var(--muted); font-size: .65rem; }
.tosa-correction summary b { margin-top: 3px; color: var(--ink); font-size: .8rem; line-height: 1.4; }
.tosa-correction summary > i { color: var(--green); font-size: .68rem; font-style: normal; font-weight: 800; }
.tosa-correction.fausse summary > i { color: var(--red); }
.tosa-correction > div { padding: 0 18px 18px 61px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.tosa-correction > div p { margin-top: 6px; }
.tosa-correction > div strong { color: var(--ink); }
.tosa-resultat-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

[data-theme="sombre"] .outil-carte-signature { border-top-color: var(--jaune); }
[data-theme="sombre"] .tosa-mode-principal, [data-theme="sombre"] .tosa-resultat-hero { background: #062E22; }
[data-theme="sombre"] .tosa-options button.selectionnee { background: var(--green-tint); }

@media (max-width: 900px) {
  .outils-hero { grid-template-columns: 1fr; min-height: 0; padding: 30px 24px; }
  .outils-formule { max-width: 570px; }
  .outils-grille { grid-template-columns: 1fr; }
  .outil-carte { min-height: 0; }
  .outil-natif-entete { grid-template-columns: 1fr; align-items: start; }
  .traducteur-compteur { align-items: flex-start; }
  .traducteur-ligne { grid-template-columns: minmax(130px, 1fr) 24px minmax(130px, 1fr); }
  .traducteur-ligne em { grid-column: 1 / -1; }
  .exo-grille, .exo-grille-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exo-lancement, .exo-resultat { grid-template-columns: 1fr; }
  .exo-resultat > p { grid-column: 1; }
  .tosa-hero { grid-template-columns: 1fr; }
  .tosa-repere { width: 126px; height: 126px; border-width: 8px; }
  .tosa-modes, .tosa-domaines-grille { grid-template-columns: 1fr; }
  .tosa-session-entete { grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; }
  .tosa-session-entete > div { grid-template-columns: minmax(80px, 1fr) auto; gap: 8px; }
  .tosa-session-entete > div > span { grid-column: 1 / -1; }
  .tosa-navigation { grid-template-columns: 1fr 1fr; }
  .tosa-navigation > span { grid-column: 1 / -1; grid-row: 1; }
  .tosa-resultat-hero { grid-template-columns: 1fr; }
  .tosa-indice { width: 140px; height: 140px; padding-top: 34px; }
  .tosa-indice strong { font-size: 2.5rem; }
  .tosa-historique-liste > div { grid-template-columns: minmax(0, 1fr) auto auto; }
  .tosa-historique-liste small { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .outil-pied { align-items: stretch; flex-direction: column; }
  .outil-pied > span { max-width: none; }
  .outil-pied .btn { justify-content: center; }
  .outils-note { align-items: flex-start; }
  .traducteur-recherche { grid-template-columns: 42px minmax(0, 1fr); }
  .traducteur-recherche kbd { display: none; }
  .traducteur-ligne { grid-template-columns: 1fr; gap: 3px; padding: 11px; }
  .traducteur-ligne > span { display: none; }
  .traducteur-code { grid-template-columns: 28px minmax(0, 1fr); }
  .exo-etape { grid-template-columns: 1fr; }
  .exo-numero { width: 28px; height: 28px; }
  .exo-difficultes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exo-difficultes button:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); }
  .exo-difficultes button:nth-child(4) { border-top: 1px solid var(--hairline); }
  .exo-lancement { padding: 14px; }
  .exo-chrono { position: static; grid-template-columns: 1fr auto; }
  .exo-chrono > div:last-child { grid-column: 1 / -1; }
  .tosa-mode { grid-template-columns: 1fr; }
  .tosa-mode > .btn { grid-column: 1; }
  .tosa-session-entete { grid-template-columns: 1fr auto; }
  .tosa-session-entete > a { grid-column: 1; }
  .tosa-session-entete > div { grid-column: 1 / -1; grid-row: 2; }
  .tosa-chrono, .tosa-sans-chrono { grid-column: 2; grid-row: 1; }
  .tosa-question { padding: 22px 16px; }
  .tosa-question-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .tosa-excel-ruban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tosa-excel-ruban button:nth-child(3), .tosa-excel-ruban button:nth-child(4) { border-top: 1px solid #E0E5E1; }
  .tosa-reponse-interactive { align-items: flex-start; flex-direction: column; }
  .tosa-options button { grid-template-columns: auto minmax(0, 1fr); }
  .tosa-options button i { display: none; }
  .tosa-navigation { grid-template-columns: 1fr; }
  .tosa-navigation > span { grid-column: 1; }
  .tosa-navigation .btn { justify-content: center; }
  .tosa-barre { grid-template-columns: 1fr auto; }
  .tosa-barre > div { grid-column: 1 / -1; grid-row: 2; }
  .tosa-barre b { grid-column: 2; grid-row: 1; }
  .tosa-correction summary { grid-template-columns: auto minmax(0, 1fr); }
  .tosa-correction summary > i { grid-column: 2; }
  .tosa-correction > div { padding-left: 18px; }
}

/* ---------------------------------------------------------------- Chip "Mon compte" (ruban simplifié) */

a.chip-apprenant { text-decoration: none; cursor: pointer; }
a.chip-apprenant:hover { background: var(--controle-survol); text-decoration: none; }
a.chip-apprenant.actif { outline: 2px solid rgba(29, 107, 69, .35); }

/* ---------------------------------------------------------------- Choix de thème (Mon compte) */

.choix-theme { display: flex; gap: 10px; flex-wrap: wrap; }
.choix-theme .btn.actif { background: var(--green-tint); outline: 2px solid rgba(29, 107, 69, .4); }
.compte-apparence-mobile { display: none; }
@media (max-width: 900px) { .compte-apparence-mobile { display: block; } }

/* ---------------------------------------------------------------- Aperçu du certificat */

.certificat-apercu .certificat-cadre {
  position: relative; text-align: center;
  background: #FFFDF6; color: #1D241F;
  border: 3px double #003223; border-radius: 4px;
  margin: 22px 22px 0; padding: 26px 20px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  overflow: hidden;
}
.certificat-apercu .certificat-cadre img { height: 30px; margin-bottom: 6px; }
.certificat-titre { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: #007F3B; font-weight: 700; }
.certificat-nom { font-size: 1.5rem; color: #003223; }
.certificat-apercu .certificat-cadre p { font-size: .82rem; color: #5C6A60; }
.certificat-formation { font-size: 1.05rem; color: #003223; }
.certificat-apercu .certificat-cadre small { font-size: .7rem; color: #8B968E; margin-top: 6px; }
.certificat-filigrane {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 3rem; font-weight: 800; letter-spacing: .2em;
  color: rgba(0, 50, 35, .10); transform: rotate(-18deg); pointer-events: none;
}

/* ---------------------------------------------------------------- Message épinglé (communauté) */

.badge-epingle {
  display: inline-block; align-self: flex-start;
  font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 980px;
  background: #FFF4C7; color: #795E00; margin-bottom: 4px;
}
.thread-carte.epinglee { border-color: rgba(254, 199, 0, .55); }

/* ---------------------------------------------------------------- Les mondes à débloquer */

.mondes .entete-section { align-items: baseline; }
.mondes-liste { display: flex; flex-direction: column; gap: 12px; }
.monde-ligne {
  display: flex; align-items: center; gap: 16px; width: 100%;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 16px;
  padding: 14px 18px 14px 14px; text-align: left; color: var(--ink); cursor: pointer;
  box-shadow: var(--ombre); font: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.monde-ligne:hover { transform: translateY(-2px); text-decoration: none; }
.monde-numero {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.monde-ligne.verrouille .monde-numero { background: var(--gris-controle); font-size: .78rem; }
.monde-visuel {
  flex: 0 0 150px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: var(--green-tint); display: grid; place-items: center;
}
.monde-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.monde-ligne.verrouille .monde-visuel img { filter: grayscale(1) brightness(.94); opacity: .85; }
.monde-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.monde-infos b { font-size: .95rem; line-height: 1.3; }
.monde-infos small { color: var(--muted); font-size: .78rem; }
.monde-infos .barre-niveau { max-width: 340px; }
.monde-action { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 700px) {
  .monde-ligne { flex-wrap: wrap; padding: 12px; }
  .monde-visuel { flex: 0 0 104px; }
  .monde-infos { flex: 1 1 120px; }
  .monde-action { width: 100%; text-align: center; }
  /* Le rappel reste visible à l'entrée de la leçon, puis défile avec elle : il ne masque
     plus le résumé ni les annexes pendant la lecture sur petit écran. */
  body.pleine-largeur #contenu-item { position: relative; }
  .bulle-annexes { position: absolute; top: 14px; right: 12px; }
}

/* ---------------------------------------------------------------- Mode focus formation (desktop) */

/* Sur une formation, zéro distraction : la navigation générale (ruban ou barre latérale)
   disparaît ; on ne revient à l'accueil que par « Retour à l'accueil » en haut du sommaire. */
@media (min-width: 901px) {
  body.pleine-largeur { --topbar-h: 0px; }
  body.pleine-largeur .topbar { display: none; }
  [data-disposition="laterale"] body.pleine-largeur { padding-left: 0; }
}

/* ---------------------------------------------------------------- Disposition barre latérale (desktop) */

/* Style bump-i transposé dans la charte TSE : carte sombre flottante vert nuit avec la
   trame de grille du ruban, item actif en pastille jaune, carte compte en bas.
   Les textes posés sur le vert nuit utilisent des crèmes littéraux (constants entre thèmes). */
@media (min-width: 901px) {
  [data-disposition="laterale"] { --topbar-h: 0px; }
  [data-disposition="laterale"] body { padding-left: 280px; }
  [data-disposition="laterale"] .topbar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 280px; height: 100vh;
    padding: 14px; background: transparent; background-image: none;
  }
  [data-disposition="laterale"] .topbar-pill {
    flex-direction: column; align-items: stretch; gap: 0;
    height: 100%; max-width: none; margin: 0;
    background: var(--vert-nuit-surface);
    background-image:
      linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 34px 34px;
    border-radius: 20px; box-shadow: 0 14px 40px rgba(0, 20, 12, .28);
    padding: 18px 14px 14px;
    overflow-y: auto;
  }
  /* marque : « Campus » en première ligne, logo TutoSurExcel tout blanc centré dessous */
  [data-disposition="laterale"] .brand {
    flex-direction: column; align-items: center; gap: 10px;
    padding: 4px 4px 16px; border-bottom: 1px solid rgba(246, 243, 235, .12);
  }
  [data-disposition="laterale"] .brand-logo { display: none; }
  [data-disposition="laterale"] .brand-blanc { display: block; height: 36px; }
  [data-disposition="laterale"] .brand-campus {
    order: -1; padding: 0; border-left: 0;
    font-size: 1.02rem; color: #F6F3EB; letter-spacing: .01em;
  }
  [data-disposition="laterale"] .brand-sous { display: none; }
  /* navigation : items clairs sur vert nuit, actif en jaune signature */
  /* une fine ligne de séparation sous chaque élément, comme sous la marque */
  [data-disposition="laterale"] .nav { flex-direction: column; gap: 4px; }
  [data-disposition="laterale"] .nav a { box-shadow: 0 5px 0 -4px rgba(246, 243, 235, .11); }
  [data-disposition="laterale"] .nav-groupe {
    display: block; margin: 20px 10px 7px;
    font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: rgba(246, 243, 235, .42);
  }
  [data-disposition="laterale"] .nav-groupe-admin { display: none; }
  [data-disposition="laterale"] body.session-admin .nav-groupe-admin { display: block; }
  [data-disposition="laterale"] .nav-ico { display: block; width: 17px; height: 17px; opacity: .7; transition: opacity .15s ease; }
  [data-disposition="laterale"] .nav a {
    display: flex; padding: 9px 11px; border-radius: 11px;
    font-size: .875rem; font-weight: 500; gap: 10px;
    color: rgba(246, 243, 235, .78);
    transition: background-color .15s ease, color .15s ease;
  }
  [data-disposition="laterale"] .nav a:hover { background: rgba(246, 243, 235, .08); color: #F6F3EB; }
  [data-disposition="laterale"] .nav a:hover .nav-ico { opacity: 1; }
  [data-disposition="laterale"] .nav a.actif { background: var(--jaune); color: #003223; font-weight: 700; }
  [data-disposition="laterale"] .nav a.actif .nav-ico { opacity: 1; }
  [data-disposition="laterale"] .nav a .pastille-notif { position: static; margin-left: auto; transform: none; }
  /* carte compte : panneau incrusté avec avatar jaune, XP et déconnexion, comme bump-i.
     Marges négatives : la carte déborde du padding de la pilule pour prendre presque toute la largeur. */
  [data-disposition="laterale"] .topbar-droite {
    display: block; margin: auto -7px 0;
    background: rgba(246, 243, 235, .07); border: 1px solid rgba(246, 243, 235, .12);
    border-radius: 14px; padding: 7px;
  }
  [data-disposition="laterale"] .chip-apprenant {
    width: 100%; background: none; padding: 9px 8px; border-radius: 10px; gap: 11px;
    transition: background-color .15s ease;
  }
  [data-disposition="laterale"] .chip-apprenant:hover { background: rgba(246, 243, 235, .08); }
  [data-disposition="laterale"] .chip-apprenant::after {
    content: "›"; margin-left: auto; color: rgba(246, 243, 235, .5);
    font-size: 1.05rem; line-height: 1;
  }
  [data-disposition="laterale"] .chip-avatar {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--jaune); color: #003223; font-weight: 700; font-size: .82rem;
  }
  [data-disposition="laterale"] .chip-texte { flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; }
  [data-disposition="laterale"] .chip-nom { font-size: .84rem; color: #F6F3EB; }
  [data-disposition="laterale"] .sep-nom { display: none; }
  [data-disposition="laterale"] .chip-detail { font-size: .72rem; color: rgba(246, 243, 235, .6); gap: 5px; }
  [data-disposition="laterale"] .chip-detail .xp { color: var(--jaune); }
  [data-disposition="laterale"] body.session-active .theme-laterale {
    display: flex; align-items: center; gap: 9px; width: 100%;
    margin-top: 2px; padding: 10px 8px; border: 0; border-top: 1px solid rgba(246, 243, 235, .1);
    background: none; color: rgba(246, 243, 235, .78); border-radius: 0;
    font: inherit; font-size: .8rem; text-align: left; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  [data-disposition="laterale"] body.session-active .theme-laterale:hover { background: rgba(246, 243, 235, .06); color: #F6F3EB; }
  [data-disposition="laterale"] .theme-laterale-libelle { flex: 1; }
  [data-disposition="laterale"] .theme-laterale-piste {
    position: relative; width: 34px; height: 19px; flex: 0 0 auto;
    border: 1px solid rgba(246, 243, 235, .24); border-radius: 980px;
    background: rgba(246, 243, 235, .1); transition: background-color .15s ease, border-color .15s ease;
  }
  [data-disposition="laterale"] .theme-laterale-piste span {
    position: absolute; top: 3px; left: 3px; width: 11px; height: 11px;
    border-radius: 50%; background: rgba(246, 243, 235, .78); transition: transform .18s ease, background-color .18s ease;
  }
  [data-disposition="laterale"] .theme-laterale.actif .theme-laterale-piste { background: var(--jaune); border-color: var(--jaune); }
  [data-disposition="laterale"] .theme-laterale.actif .theme-laterale-piste span { transform: translateX(15px); background: #003223; }
  [data-disposition="laterale"] .theme-laterale:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }
  [data-disposition="laterale"] body.session-active .deco-laterale {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin-top: 2px; padding: 8px; border: 0; border-top: 1px solid rgba(246, 243, 235, .1);
    background: none; border-radius: 0 0 10px 10px;
    font-size: .78rem; color: rgba(246, 243, 235, .6);
    transition: background-color .15s ease, color .15s ease;
  }
  [data-disposition="laterale"] body.session-active .deco-laterale:hover { background: rgba(246, 243, 235, .06); color: #F6F3EB; }
}

/* ---- Paliers d'accès : modules verrouillés + encart upsell ---- */
.encart-upsell {
  margin: 14px 12px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(247, 200, 67, 0.14), rgba(0, 50, 35, 0.05));
  border: 1px solid rgba(247, 200, 67, 0.55);
}
.encart-upsell-titre { font-weight: 700; margin-bottom: 6px; }
.encart-upsell p { font-size: 0.86rem; opacity: 0.85; margin: 0 0 10px; }
.encart-upsell .btn { width: 100%; text-align: center; }
.encart-upsell-prix { font-weight: 700; }
.module.verrouille-palier .module-entete { opacity: 0.75; }
.module-cadenas { margin-left: auto; font-size: 0.85rem; }
.lecon-verrouillee {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; font-size: 0.86rem; opacity: 0.55; cursor: default;
}
.lecon-verrouillee .pastille { filter: grayscale(1); }
.lecon-verrou-panneau { max-width: 560px; margin: 60px auto; }
.lecon-verrou-panneau .encart-upsell { margin: 0; padding: 24px; }
.module-chemin-verrouille { opacity: 0.6; }
.module-chemin-verrouille .module-cadenas { margin-left: auto; }

/* ---------------------------------------------------------------- Lot UI 24/07 : encadré cellule, accueil, chemin, tour, certificat */

/* Encadré « cellule Excel » : bordure sélection + poignée de recopie en bas à droite.
   Signature visuelle du Campus, réutilisable sur toute carte de contenu. */
.encadre-cellule {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--vert-nuit);
  border-radius: 8px;
}
.encadre-cellule::after {
  content: '';
  position: absolute; right: -6px; bottom: -6px;
  width: 10px; height: 10px;
  background: var(--vert-nuit);
  border: 2px solid var(--bg);
  border-radius: 2px;
}
[data-theme="sombre"] .encadre-cellule { border-color: var(--green); }
[data-theme="sombre"] .encadre-cellule::after { background: var(--green); }

.resume-lecon.encadre-cellule { border-top: 1.5px solid var(--vert-nuit); padding: 16px 20px; margin-top: 22px; }
[data-theme="sombre"] .resume-lecon.encadre-cellule { border-top-color: var(--green); }
.item-description.encadre-cellule { padding: 16px 20px; }

/* Accueil : formations en premier, conseils compactés à droite */
.accueil-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.accueil-principal { min-width: 0; }
.accueil-principal .section:first-child { margin-top: 0; }
/* la colonne descend de la hauteur du titre « Mes formations » (25px) + sa marge (14px)
   pour que le haut de l'encart tombe pile sur le haut de la première carte de formation */
.accueil-cote { display: grid; gap: 14px; position: sticky; top: calc(var(--topbar-h) + 16px); margin-top: 40px; }
@media (max-width: 1020px) {
  .accueil-grille { grid-template-columns: 1fr; }
  .accueil-cote { position: static; margin-top: 0; }
}

/* colonne de droite : une seule action, reprendre où on s'est arrêté */
.carte-reprise { padding: 20px; }
.carte-reprise h2 { margin: 6px 0 8px; font-size: 1.12rem; line-height: 1.3; }
.reprise-contexte { color: var(--muted); font-size: .82rem; line-height: 1.55; margin-bottom: 16px; }
.reprise-contexte b { color: var(--ink); }
.carte-reprise > .btn { width: 100%; justify-content: center; }
.carte-reprise footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.accueil-cote .derniere-session, .accueil-cote .video-bienvenue { margin: 0; }

/* Le chemin devant toi : modules dépliables sur leurs leçons */
.formation-programme li { display: block; padding: 0; }
.chemin-module summary {
  display: grid; grid-template-columns: 44px 1fr auto auto; gap: 14px; align-items: center;
  padding: 16px 18px; cursor: pointer; list-style: none;
}
.chemin-module summary::-webkit-details-marker { display: none; }
.chemin-module summary > div { display: grid; gap: 4px; }
.chemin-chevron { color: var(--muted); font-size: .8rem; transition: transform .18s ease; }
.chemin-module[open] .chemin-chevron { transform: rotate(180deg); }
.chemin-lecons { list-style: none; display: grid; gap: 2px; padding: 0 18px 14px 58px; }
.formation-programme .chemin-lecons li { border: 0; border-radius: 0; background: transparent; padding: 0; display: block; }
.chemin-lecons li a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .86rem;
}
.chemin-lecons li a:hover { background: var(--survol); }
.chemin-lecons li.faite a { color: var(--muted); }
.chemin-etat { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green-tint); color: var(--green); font-size: .7rem; flex: none; }
.chemin-lecons li.faite .chemin-etat { background: var(--green); color: #fff; }
.lecon-verrouillee-chemin { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: .86rem; color: var(--muted); }

/* Tour d'onboarding illustré */
.tour-image {
  width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 14px; margin-bottom: 14px; background: #F6F3EB;
}

/* Aperçu certificat : compétences attestées */
.certificat-competences { width: 100%; margin-top: 8px; text-align: left; }
.certificat-competences > span { display: block; text-align: center; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #8B968E; font-weight: 700; margin-bottom: 8px; }
.certificat-competences ul { list-style: none; display: grid; gap: 6px; margin: 0 auto; max-width: 420px; padding: 0; }
.certificat-competences li { position: relative; padding-left: 18px; font-size: .8rem; line-height: 1.45; color: #1D241F; }
.certificat-competences li::before { content: ''; position: absolute; left: 2px; top: .42em; width: 7px; height: 7px; background: #003223; border-radius: 1px; }
.certificat-apercu .certificat-cadre.encadre-cellule { border: 1.5px solid #003223; }

/* Compte : changement de mot de passe */
.form-mot-de-passe { display: grid; gap: 10px; }
.form-mot-de-passe .btn { justify-self: start; }

/* ---------------------------------------------------------------- Accueil : en-tête de bienvenue */

.accueil-bienvenue {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  /* l'accueil respire avant le contenu : un filet discret sépare la salutation du parcours */
  padding-bottom: 26px; margin-bottom: 32px; border-bottom: 1px solid var(--hairline);
}
.bienvenue-identite { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bienvenue-avatar {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px;
  border-radius: 50%; background: var(--jaune); color: var(--vert-nuit);
  font-size: 1.4rem; font-weight: 800;
}
.accueil-bienvenue h1 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; color: var(--vert-nuit); }
[data-theme="sombre"] .accueil-bienvenue h1 { color: var(--ink); }
.accueil-bienvenue p { margin-top: 4px; color: var(--muted); font-size: .86rem; }

.bienvenue-cles { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.cle-stat {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--card);
  color: var(--ink); text-decoration: none;
}
.cle-icone { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--green-tint); font-size: .95rem; }
.cle-stat b { display: block; font-size: 1.15rem; line-height: 1.1; color: var(--vert-nuit); font-variant-numeric: tabular-nums; }
[data-theme="sombre"] .cle-stat b { color: var(--ink); }
.cle-stat small { color: var(--muted); font-size: .72rem; }
.cle-action { border-color: color-mix(in srgb, var(--green) 34%, transparent); }
.cle-action:hover { background: var(--green-tint); }
.cle-action .cle-icone { background: var(--green); color: #fff; }

@media (max-width: 720px) {
  .accueil-bienvenue { gap: 16px; padding-bottom: 20px; margin-bottom: 24px; }
  .bienvenue-avatar { width: 44px; height: 44px; font-size: 1.2rem; }
  .bienvenue-cles { width: 100%; gap: 8px; }
  /* trois tuiles de même largeur, contenu centré : les libellés longs tiennent sans casser la grille */
  .cle-stat { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 6px; padding: 12px 8px; text-align: center; }
  .cle-icone { width: 26px; height: 26px; font-size: .85rem; }
  .cle-stat b { font-size: 1.05rem; }
  .cle-stat small { font-size: .68rem; line-height: 1.25; }
}

/* ---------------------------------------------------------------- Progression 2026 : niveau, badges, compétences */

.prog-niveau { padding: clamp(18px, 2.6vw, 26px); }
.prog-niveau-haut { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; }
.prog-niveau-haut .prog-niveau-texte { flex: 1 1 240px; min-width: 0; }
.prog-niveau-nom { font-size: 1.25rem; font-weight: 700; color: var(--vert-nuit); margin-bottom: 10px; }
[data-theme="sombre"] .prog-niveau-nom { color: var(--ink); }
.prog-niveau-texte .barre-niveau { margin-bottom: 10px; }
.prog-niveau-texte p { color: var(--muted); font-size: .86rem; }
.prog-niveau-texte b { color: var(--ink); }

.mini-palier.atteint { opacity: .7; filter: none; }
.mini-palier.actuel { opacity: 1; filter: none; transform: scale(1.25); }


.badge-case.obtenu { opacity: 1; }
.badge-case.obtenu .badge-rond { background: color-mix(in srgb, var(--jaune) 26%, var(--card)); }
/* un titre de formation long ne doit pas déformer la grille : deux lignes puis coupure */

.competences-carte { padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 24px); }
.competence-ligne { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.competence-ligne:first-child { border-top: 0; padding-top: 0; }
.competence-ligne > span {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: var(--green-tint); color: var(--green); font-size: .72rem; font-weight: 800;
}
.competence-ligne p { font-size: .9rem; line-height: 1.45; }
.competence-ligne small { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; }
.competences-reste > summary { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--hairline); cursor: pointer; color: var(--green); font-weight: 650; font-size: .85rem; }
.competences-reste[open] > summary { margin-bottom: 4px; }

.prog-releve { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px clamp(16px, 2.4vw, 24px); }
.prog-releve b { display: block; margin-bottom: 3px; }
.prog-releve .prog-note { max-width: 52ch; }
.prog-releve-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prog-releve-actions select { max-width: 260px; }

@media (max-width: 720px) {
  .prog-niveau-haut { justify-content: center; text-align: center; }
  .prog-releve-actions { width: 100%; }
  .prog-releve-actions select { flex: 1; max-width: none; }
}

.formation-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.formation-liens .formation-releve { margin-top: 0; }


/* ------------------------------------------------- Progression : échelle des niveaux + badges par catégorie */
.gagner-liste { list-style: none; }
.gagner-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); font-size: .92rem; }
.gagner-liste li:last-child { border-bottom: 0; }
.gagner-liste b { color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }

.echelle { display: flex; align-items: flex-start; overflow-x: auto; padding: 24px 20px; }
.palier { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 92px; text-align: center; }
.palier-avatar { width: 50px; }
.palier-avatar .avatar-svg { width: 100%; height: auto; display: block; }
.palier:not(.atteint) .palier-avatar { filter: grayscale(1); opacity: .32; }
.palier.actuel .palier-avatar { filter: none; opacity: 1; }

.avatar-bloc { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.avatar-nom { font-size: .82rem; font-weight: 650; color: var(--vert-nuit); text-align: center; }
.palier.actuel .palier-nom { color: var(--green); }
.palier-nom { font-size: .82rem; font-weight: 650; line-height: 1.25; }
.palier-seuil { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.palier-lien { flex: 1 1 24px; height: 2px; background: var(--gris-controle); margin-top: 12px; min-width: 14px; }

.familles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.famille-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.famille-emoji { font-size: 1.5rem; }
.famille-titre { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.famille-titre span { color: var(--muted); font-size: .8rem; }
.famille-medailles { display: flex; gap: 6px; font-size: 1.25rem; }
.medaille { filter: grayscale(1); opacity: .35; cursor: default; }
.medaille.obtenu { filter: none; opacity: 1; }
.famille-progres { display: flex; align-items: center; gap: 12px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.famille-progres .barre-niveau { flex: 1; margin-top: 0; }
.famille-progres.complet { color: var(--green); font-weight: 600; }

.badges-formations { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.badge-formation { display: flex; gap: 14px; align-items: center; opacity: .58; box-shadow: none; }
.badge-formation.obtenu { opacity: 1; border-color: rgba(254, 199, 0, .65); background: #FFFCF0; }
.badge-formation-emoji { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 50px; border-radius: 50%; font-size: 1.55rem; background: var(--gris-controle); filter: grayscale(1); }
.badge-formation.obtenu .badge-formation-emoji { background: var(--jaune); filter: none; }

.prog-sous-titre {
  margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--hairline);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.prog-sous-titre-section { border-top: 0; padding-top: 0; margin: 26px 0 12px; }
.prog-niveau .echelle { padding: 4px 0 0; }
.gagner-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 28px; }
.gagner-colonnes li { border-bottom: 1px solid var(--hairline); }
@media (max-width: 720px) { .gagner-colonnes { grid-template-columns: 1fr; } }