
/* ==========================================================================
   PARCOURS EN LIGNE (FollowForm) : portail des stagiaires, aperçu et studio.
   Les couleurs viennent du paramétrage (thème clair ou sombre) ; un parcours peut remplacer
   l'accent par sa propre couleur (LmsStyleVariables, FollowForm/include/lms.php).
   ========================================================================== */
:root {
	--lms-accent: #A85BA3;
	--lms-accent2: #5C3596;
	--lms-texte: #506167;
	--lms-carte: #F0F0F0;
	--lms-doux: #FEF7F1;
	--lms-bord: #86888C;
	--lms-alerte: #FF6A6A;
	--lms-jaune: #F2BC00;
	--lms-orange: #ED7D31;
	--lms-titre: #424345;
}
/* ========== Conteneur ========== */
.lms {
	--lms-taille: 1;
	--lms-rayon: 14px;
	--lms-ok: #2e7d32;
	--lms-ko: #c62828;
	--lms-attente: #b26a00;
	--lms-focus: #1a5fd0;
	position: absolute;
	inset: 0 0 0 0;
	overflow-y: auto;
	padding: 16px 24px 48px 8px;
	box-sizing: border-box;
	color: var(--lms-texte);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: calc(16px * var(--lms-taille));
	line-height: 1.5;
}
.lms *, .lms *::before, .lms *::after { box-sizing: border-box; }
/* Mobile et tablette : la page défile normalement sous l'en-tête du portail. */
.lms.lms-flux { position: static; overflow: visible; padding: 10px 12px 40px; }
.lms-interieur { max-width: 1100px; margin: 0 auto; }
.lms h1 { font-size: 1.7em; margin: .2em 0 .4em; color: var(--lms-titre); line-height: 1.25; }
.lms h2 { font-size: 1.3em; margin: .8em 0 .5em; color: var(--lms-titre); }
.lms h3 { font-size: 1.1em; margin: .6em 0 .3em; }
.lms p, .lms li, .lms label, .lms td, .lms th, .lms summary, .lms a, .lms button, .lms input, .lms select, .lms textarea { font-size: 1em; }
.lms a { color: var(--lms-accent); }
.lms :focus-visible { outline: 3px solid var(--lms-focus); outline-offset: 2px; border-radius: 4px; }
.lms-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lms-petit { font-size: .85em; opacity: .85; }
.lms-centre { text-align: center; }
.lms-grand-texte { font-size: 1.3em; font-weight: 600; margin: .2em 0 .6em; }
.lms-ico { width: 1.2em; height: 1.2em; vertical-align: -0.2em; flex-shrink: 0; }

/* ========== Barre d'accessibilité ========== */
.lms-barre { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.lms-outil, .lms-outil-mode select {
	min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 10px; cursor: pointer;
	border: 1px solid var(--lms-bord); background: var(--lms-carte); color: var(--lms-texte); font-weight: 700; font-size: 1em;
	display: inline-flex; align-items: center; justify-content: center;
}
.lms-outil[aria-pressed='true'] { background: var(--lms-accent); color: #fff; }
.lms-outil-mode select { font-weight: 400; }

/* ========== Cartes, en-têtes, fil d'Ariane ========== */
.lms-carte { background: var(--lms-carte); border: 1px solid var(--lms-bord); border-radius: var(--lms-rayon); padding: 18px 20px; margin: 0 0 16px; }
.lms-alerte { border-color: var(--lms-alerte); border-width: 2px; }
.lms-vide { text-align: center; }
.lms-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lms-fil { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; font-size: .95em; }
.lms-fil a { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; padding: 6px 4px; }
.lms-titre-section { margin-top: 1.2em; }
.lms-infos summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.lms-infos[open] summary { margin-bottom: .5em; }

/* ========== Gros boutons : pictogramme + texte ========== */
.lms-gros-boutons { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.lms-gros {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	min-height: 110px; padding: 14px 10px; border-radius: var(--lms-rayon); cursor: pointer; text-decoration: none !important;
	border: 2px solid var(--lms-accent); background: var(--lms-carte); color: var(--lms-texte) !important;
	font-size: 1.1em !important; font-weight: 700; text-align: center; transition: transform .15s, box-shadow .15s;
}
.lms-gros:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.lms-gros-principal { background: var(--lms-accent); color: #fff !important; }
.lms-gros-ico { width: 2.4em; height: 2.4em; }
.lms-gros-petit { min-height: 56px; flex-direction: row; font-size: 1em !important; padding: 8px 16px; }
.lms-gros-petit .lms-gros-ico { width: 1.5em; height: 1.5em; }
.lms-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.lms-actions .lms-gros { flex: 1 1 220px; }
.lms-actions-fin { justify-content: center; }
.lms-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 10px; cursor: pointer;
	border: 2px solid var(--lms-accent); background: var(--lms-accent); color: #fff !important; font-weight: 600; text-decoration: none !important; font-size: 1em;
}
.lms-btn-second { background: var(--lms-carte); color: var(--lms-texte) !important; }
.lms-btn-danger { background: var(--lms-ko); border-color: var(--lms-ko); }
.lms-btn[disabled] { opacity: .5; cursor: not-allowed; }
.lms-btn-lien { background: none; border: 0; color: var(--lms-accent); cursor: pointer; padding: 6px 0; min-height: 44px; display: inline-flex; gap: 6px; align-items: center; text-decoration: underline; font-size: 1em; }

/* ========== Progression ========== */
.lms-barre-prog { height: 14px; border-radius: 7px; background: var(--lms-doux); border: 1px solid var(--lms-bord); overflow: hidden; }
.lms-barre-prog span { display: block; height: 100%; background: var(--lms-accent); border-radius: 7px; }
.lms-progression-texte { margin: .4em 0 0; font-weight: 600; }
.lms-progression-compacte .lms-barre-prog { height: 10px; }
.lms-etoiles { display: flex; gap: 4px; flex-wrap: wrap; }
.lms-etoiles svg { width: 2em; height: 2em; }
.lms-etoile-pleine svg { fill: var(--lms-jaune); stroke: var(--lms-orange); }
.lms-etoile-vide svg { stroke: var(--lms-bord); }
.lms-bravo { color: var(--lms-ok); display: flex; gap: 10px; align-items: center; }
.lms-bravo-carte { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 1.15em; color: var(--lms-ok); border-color: var(--lms-ok); }

/* ========== Liste des parcours ========== */
.lms-grille-parcours { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.lms-carte-parcours {
	display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--lms-rayon); text-decoration: none !important;
	background: var(--lms-carte); border: 2px solid var(--lms-bord); color: var(--lms-texte) !important; min-height: 160px;
}
.lms-carte-parcours:hover { border-color: var(--lms-accent); }
.lms-carte-parcours img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; }
.lms-carte-parcours-picto svg { width: 3em; height: 3em; color: var(--lms-accent); }
.lms-carte-parcours-titre { font-weight: 700; font-size: 1.15em; }
.lms-reprise { border-width: 2px; border-color: var(--lms-accent); }

/* ========== Modules et tuiles d'activités ========== */
.lms-module h2 { border-bottom: 2px solid var(--lms-doux); padding-bottom: .3em; }
.lms-tuiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lms-tuile {
	position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px; border-radius: var(--lms-rayon);
	background: var(--lms-carte); border: 2px solid var(--lms-bord); color: var(--lms-texte) !important; text-decoration: none !important;
}
a.lms-tuile:hover { border-color: var(--lms-accent); transform: translateY(-2px); }
.lms-tuile-suivante { border-color: var(--lms-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lms-accent) 25%, transparent); }
.lms-tuile-faite { opacity: .85; }
.lms-tuile-verrou { opacity: .55; cursor: not-allowed; }
.lms-tuile-titre { font-weight: 700; }
.lms-tuile-infos { font-size: .85em; opacity: .85; }
.lms-vignette-img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; }
.lms-vignette-picto { background: var(--lms-doux); color: var(--lms-accent); }
.lms-vignette-picto svg { width: 36px; height: 36px; }
.lms-statut { display: inline-flex; align-items: center; gap: 5px; font-size: .85em; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--lms-doux); width: fit-content; }
.lms-statut svg { width: 1.1em; height: 1.1em; }
.lms-statut-ok { color: var(--lms-ok); }
.lms-statut-echec { color: var(--lms-ko); }
.lms-statut-attente { color: var(--lms-attente); }
.lms-statut-encours { color: var(--lms-accent); }
.lms-statut-verrou { color: var(--lms-texte); }

/* ========== Lecteur d'activité ========== */
.lms-activite-entete { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.lms-activite-entete > div { flex: 1 1 260px; }
.lms-activite-entete h1 { margin: 0; }
.lms-activite-entete p { margin: 0; }
.lms-activite-vignette { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; }
.lms-activite-vignette svg { width: 40px; height: 40px; }
.lms-consigne { background: var(--lms-doux); border-left: 6px solid var(--lms-accent); border-radius: var(--lms-rayon); padding: 14px 18px; margin: 0 0 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lms-consigne-texte { flex: 1 1 300px; font-size: 1.1em; }
.lms-contenu img { max-width: 100%; height: auto; border-radius: 8px; }
.lms-contenu table { border-collapse: collapse; }
.lms-contenu td, .lms-contenu th { border: 1px solid var(--lms-bord); padding: 6px 8px; }
.lms-video, .lms-audio { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.lms-audio { background: transparent; }
.lms-cadre-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; }
.lms-cadre-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lms-pdf { width: 100%; height: 75vh; border: 1px solid var(--lms-bord); border-radius: 12px; background: #fff; }
.lms-image { max-width: 100%; border-radius: 12px; }
.lms-chapitres ol { padding-left: 1.2em; }
.lms-nav-activites { display: grid; grid-template-columns: 1fr auto auto 1fr; gap: 10px; align-items: center; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--lms-bord); }
.lms-nav-activites > :last-child { justify-self: end; }
.lms-retour { margin: 12px 0; }
.lms-retour:empty { display: none; }
.lms-avis { text-align: center; margin: 16px 0; }
.lms-avis-etoiles { display: inline-flex; gap: 4px; }
.lms-avis-etoiles button { background: none; border: 0; cursor: pointer; min-width: 48px; min-height: 48px; color: var(--lms-bord); }
.lms-avis-etoiles button svg { width: 32px; height: 32px; }
.lms-avis-etoiles button[aria-checked='true'] svg, .lms-avis-etoiles button.lms-allume svg { fill: var(--lms-jaune); stroke: var(--lms-orange); }

/* ========== Cartes de mémorisation ========== */
.lms-flash { width: 100%; min-height: 220px; border-radius: var(--lms-rayon); border: 2px solid var(--lms-accent); background: var(--lms-carte); color: var(--lms-texte); font-size: 1.6em; font-weight: 700; cursor: pointer; padding: 20px; }
.lms-flash .lms-flash-verso { display: none; color: var(--lms-accent); }
.lms-flash.lms-retournee .lms-flash-recto { display: none; }
.lms-flash.lms-retournee .lms-flash-verso { display: inline; }

/* ========== Quiz ========== */
.lms-quiz-question { background: var(--lms-carte); border: 2px solid var(--lms-bord); border-radius: var(--lms-rayon); padding: 18px 20px; }
.lms-quiz-entete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lms-quiz-points { display: flex; gap: 6px; flex-wrap: wrap; }
.lms-quiz-points span { width: 14px; height: 14px; border-radius: 50%; background: var(--lms-doux); border: 1px solid var(--lms-bord); }
.lms-quiz-points span.lms-repondu { background: var(--lms-accent); }
.lms-quiz-points span.lms-courant { outline: 3px solid var(--lms-accent); outline-offset: 1px; }
.lms-chrono { font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.lms-chrono.lms-urgent { color: var(--lms-ko); }
.lms-enonce { font-size: 1.2em; font-weight: 600; margin: .2em 0 .8em; }
.lms-question-image { max-width: 100%; max-height: 260px; border-radius: 10px; display: block; margin: 0 auto 12px; }
.lms-question-audio { display: block; width: 100%; max-width: 420px; margin: 0 0 12px; }
.lms-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.lms-choix label {
	display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; border: 2px solid var(--lms-bord); border-radius: 12px; cursor: pointer; background: var(--lms-carte);
}
.lms-choix label:has(input:checked) { border-color: var(--lms-accent); background: var(--lms-doux); }
.lms-choix input { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--lms-accent); }
.lms-choix img { max-width: 100%; max-height: 140px; border-radius: 8px; }
.lms-choix-image label { flex-direction: column; text-align: center; }
.lms-trou { display: inline-block; min-width: 8em; max-width: 100%; padding: 6px 8px; margin: 2px 4px; border: 2px solid var(--lms-bord); border-radius: 8px; font-size: 1em; background: var(--lms-carte); color: var(--lms-texte); }
.lms-texte-trous { line-height: 2.4; font-size: 1.1em; }
.lms-assoc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.lms-assoc select, .lms select, .lms textarea, .lms input[type='text'], .lms input[type='number'] {
	min-height: 48px; padding: 8px 10px; border: 2px solid var(--lms-bord); border-radius: 10px; font-size: 1em; background: var(--lms-carte); color: var(--lms-texte); width: 100%; font-family: inherit;
}
.lms-ordre { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lms-ordre li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 2px solid var(--lms-bord); border-radius: 10px; background: var(--lms-carte); }
.lms-ordre li span { flex: 1; }
.lms-ordre button { min-width: 44px; min-height: 44px; border-radius: 8px; border: 1px solid var(--lms-bord); background: var(--lms-doux); cursor: pointer; color: var(--lms-texte); }
.lms-etoiles, .lms-note10 { display: flex; flex-wrap: wrap; gap: 6px; }
.lms-etoiles label { font-size: 2.6em; line-height: 1; cursor: pointer; color: var(--lms-bord); padding: 0 2px; border-radius: 8px; }
.lms-etoiles label.lms-allume { color: #f5a623; }
.lms-note10 label { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--lms-bord); border-radius: 10px; font-weight: 700; font-size: 1.1em; cursor: pointer; background: var(--lms-carte); }
.lms-note10 label.lms-allume { border-color: var(--lms-accent); background: var(--lms-accent); color: #fff; }
.lms-etoiles label:has(input:focus-visible), .lms-note10 label:has(input:focus-visible) { outline: 3px solid var(--lms-accent); outline-offset: 2px; }
.lms-vf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lms-vf label { justify-content: center; font-size: 1.2em; font-weight: 700; }
.lms-quiz-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.lms-resultat { text-align: center; }
.lms-resultat-score { font-size: 2.6em; font-weight: 800; margin: .1em 0; }
.lms-resultat-ok { color: var(--lms-ok); }
.lms-resultat-ko { color: var(--lms-ko); }
.lms-correction { text-align: left; margin-top: 12px; }
.lms-correction li { margin-bottom: 10px; }
.lms-juste { color: var(--lms-ok); font-weight: 600; }
.lms-faux { color: var(--lms-ko); font-weight: 600; }

/* ========== Dépôts, productions, grilles ========== */
.lms-depot-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px; border: 3px dashed var(--lms-accent); border-radius: var(--lms-rayon); cursor: pointer; text-align: center; font-weight: 700; }
.lms-depot-zone input { font-size: .9em; max-width: 100%; }
.lms-production { white-space: normal; background: var(--lms-doux); border-radius: 10px; padding: 10px 14px; margin: 6px 0; }
.lms-commentaire { border-left: 4px solid var(--lms-accent); margin: 8px 0; padding: 6px 12px; background: var(--lms-doux); border-radius: 0 10px 10px 0; }
.lms-commentaire .lms-commentaire-auteur { display: block; font-size: .85em; opacity: .8; margin-top: 4px; }
.lms-historique { list-style: none; padding: 0; }
.lms-historique li { padding: 10px 0; border-bottom: 1px solid var(--lms-doux); }
.lms-grille { width: 100%; border-collapse: collapse; }
.lms-grille th, .lms-grille td { border-bottom: 1px solid var(--lms-bord); padding: 10px 6px; text-align: center; }
.lms-grille th[scope='row'] { text-align: left; font-weight: 500; }
.lms-case { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.lms-case input { width: 24px; height: 24px; accent-color: var(--lms-accent); }
.lms-choix-aide { border: 0; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lms-choix-aide legend { font-weight: 700; margin-bottom: 8px; }
.lms-gros-choix { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border: 2px solid var(--lms-bord); border-radius: 12px; cursor: pointer; text-align: center; font-weight: 600; }
.lms-gros-choix:has(input:checked) { border-color: var(--lms-accent); background: var(--lms-doux); }
.lms-gros-choix input { position: absolute; opacity: 0; }

/* ========== Fenêtres (aide, tutoriel) ========== */
.lms-modale, .lms-tuto { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lms-modale[hidden], .lms-tuto[hidden] { display: none; }
.lms-modale-boite, .lms-tuto-boite { position: relative; background: var(--lms-carte); color: var(--lms-texte); border-radius: var(--lms-rayon); padding: 24px; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); font-size: calc(16px * var(--lms-taille, 1)); }
.lms-modale-boite h2 { display: flex; gap: 10px; align-items: center; margin-top: 0; }
.lms-modale-boite textarea { width: 100%; min-height: 100px; padding: 10px; border: 2px solid var(--lms-bord); border-radius: 10px; font: inherit; }
.lms-modale-fermer { position: absolute; top: 10px; right: 10px; min-width: 44px; min-height: 44px; border: 0; background: var(--lms-doux); border-radius: 50%; cursor: pointer; color: var(--lms-texte); }
.lms-tuto-boite { text-align: center; }
.lms-tuto-ico { width: 72px; height: 72px; color: var(--lms-accent); }
.lms-tuto-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.lms-tuto-points { display: inline-flex; gap: 6px; }
.lms-tuto-points i { width: 10px; height: 10px; border-radius: 50%; background: var(--lms-doux); border: 1px solid var(--lms-bord); }
.lms-tuto-points i.lms-actif { background: var(--lms-accent); }
.lms-retour-msg:empty { display: none; }
.lms-message-ok { color: var(--lms-ok); font-weight: 600; }
.lms-message-ko { color: var(--lms-ko); font-weight: 600; }

/* ========== Mode simplifié : moins d'informations, plus grand ========== */
.lms-mode-simplifie { font-size: calc(18px * var(--lms-taille)); }
.lms-mode-simplifie .lms-tuile-infos, .lms-mode-simplifie .lms-infos { display: none; }
.lms-mode-simplifie .lms-tuiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ========== Mode enfant : navigation visuelle, sans le menu ========== */
.lms-mode-enfant { font-size: calc(20px * var(--lms-taille)); }
body.lms-corps-enfant nav:has(#menu), body.lms-corps-enfant #reduit, body.lms-corps-enfant #menu { display: none !important; }
body.lms-corps-enfant #content { left: 0 !important; padding: 0 !important; }
.lms-mode-enfant .lms-gros { min-height: 140px; border-width: 3px; border-radius: 24px; }
.lms-mode-enfant .lms-gros-ico { width: 3.2em; height: 3.2em; }
.lms-mode-enfant .lms-tuiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.lms-mode-enfant .lms-tuile { align-items: center; text-align: center; border-width: 3px; border-radius: 24px; padding: 18px; }
.lms-mode-enfant .lms-vignette-img { width: 110px; height: 110px; border-radius: 20px; }
.lms-mode-enfant .lms-vignette-picto svg { width: 64px; height: 64px; }
.lms-mode-enfant .lms-tuile-infos, .lms-mode-enfant .lms-petit, .lms-mode-enfant .lms-fil a:not(:first-child) { display: none; }
.lms-mode-enfant .lms-choix label { min-height: 90px; font-size: 1.15em; border-width: 3px; border-radius: 18px; }
.lms-mode-enfant .lms-btn { min-height: 60px; border-radius: 16px; }
.lms-mode-enfant .lms-enonce { font-size: 1.35em; }

/* ========== Contraste renforcé ========== */
.lms-contraste, .lms-contraste .lms-carte, .lms-contraste .lms-tuile, .lms-contraste .lms-gros, .lms-contraste .lms-quiz-question, .lms-contraste .lms-choix label, .lms-contraste .lms-carte-parcours, .lms-contraste .lms-modale-boite, .lms-contraste .lms-tuto-boite, .lms-contraste .lms-flash {
	--lms-accent: #ffd400; --lms-texte: #ffffff; --lms-carte: #000000; --lms-doux: #1d1d1d; --lms-bord: #ffffff; --lms-titre: #ffffff; --lms-ok: #7CFC00; --lms-ko: #ff8a80; --lms-attente: #ffd180; --lms-focus: #00e5ff;
	background-color: #000; color: #fff;
}
.lms-contraste .lms-gros-principal, .lms-contraste .lms-btn { color: #000 !important; }
.lms-contraste .lms-btn-second { color: #fff !important; }
.lms-contraste a { color: #ffd400; }

/* ========== Studio, suivi, pilotage (FollowForm) ========== */
/* Placé dans le .bloc commun aux pages de l'application, qui le positionne et le fait défiler. */
.lms-studio { font-size: 14px; color: var(--lms-texte); }
.lms-studio .lms-carte { padding: 16px 18px; }
.lms-studio h2:not(.card-title) { font-size: 20px; margin: 4px 0 12px; color: var(--lms-titre); }
.lms-studio h3:not(.card-title) { font-size: 16px; margin: 6px 0 8px; }
.lms-studio table.lms-tableau { width: 100%; border-collapse: collapse; }
.lms-tableau th, .lms-tableau td { padding: 8px 10px; border-bottom: 1px solid var(--lms-doux); text-align: left; vertical-align: top; font-size: 13px; }
.lms-tableau th { font-weight: 700; background: var(--lms-doux); position: sticky; top: 0; }
.lms-tableau tr:hover td { background: color-mix(in srgb, var(--lms-doux) 50%, transparent); }
.lms-onglets { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--lms-doux); margin-bottom: 14px; }
.lms-onglets a { padding: 10px 14px; border-radius: 10px 10px 0 0; text-decoration: none; color: var(--lms-texte); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.lms-onglets a.lms-actif { background: var(--lms-accent); color: #fff; }
.lms-ligne { display: flex; gap: 12px; flex-wrap: wrap; }
.lms-ligne > * { flex: 1 1 220px; }
.lms-champ { margin-bottom: 12px; }
.lms-champ label, .lms-champ .lms-label { display: block; font-weight: 600; margin-bottom: 4px; }
.lms-champ .lms-aide-champ { font-size: 12px; opacity: .8; margin-top: 3px; }
.lms-studio .form-input, .lms-studio .form-select, .lms-studio .form-textarea { font-size: 14px; }
/* Cartes du socle (card, card-header, card-title) : le pictogramme du LMS est dessiné au trait,
   la règle .picto du socle le remplirait. */
.card > svg.picto.lms-picto { fill: none; stroke: var(--lms-accent); stroke-width: 1.5; }
details.card > summary.card-header { cursor: pointer; display: block; }
details.card:not([open]) > summary.card-header { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
fieldset.card { min-width: 0; }
/* Fenêtres du studio, déplacées sous <body> à l'ouverture (lms_studio.js) pour être centrées. */
body > .lms-modale { --lms-rayon: 14px; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; line-height: 1.5; }
body > .lms-modale h2 { font-size: 18px; color: var(--lms-titre); }
body > .lms-modale .form-input, body > .lms-modale .form-select, body > .lms-modale .form-textarea { font-size: 14px; width: 100%; }
.lms-module-studio { border: 1px solid var(--lms-bord); border-radius: 12px; margin-bottom: 14px; background: var(--lms-carte); }
.lms-module-studio > .lms-module-tete { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--lms-doux); border-radius: 12px 12px 0 0; flex-wrap: wrap; }
.lms-module-studio > .lms-module-tete h3 { flex: 1; margin: 0; }
.lms-liste-activites { list-style: none; margin: 0; padding: 6px; min-height: 30px; }
.lms-liste-activites li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: var(--lms-carte); }
.lms-liste-activites li + li { margin-top: 4px; }
.lms-liste-activites li:hover { border-color: var(--lms-bord); }
.lms-liste-activites li.lms-glisse { opacity: .4; }
.lms-liste-activites li.lms-cible { border-color: var(--lms-accent); border-style: dashed; }
.lms-poignee { cursor: grab; color: var(--lms-bord); display: inline-flex; }
.lms-act-titre { flex: 1; min-width: 160px; }
.lms-act-titre a { font-weight: 600; text-decoration: none; }
.lms-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--lms-doux); white-space: nowrap; }
.lms-badge-accent { background: var(--lms-accent); color: #fff; }
.lms-badge-ok { background: #e8f5e9; color: #1b5e20; }
.lms-badge-ko { background: #ffebee; color: #b71c1c; }
.lms-badge-attente { background: #fff3e0; color: #8a4b00; }
.lms-icone-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border-radius: 8px; border: 1px solid var(--lms-bord); background: var(--lms-carte); cursor: pointer; color: var(--lms-texte); text-decoration: none; }
.lms-icone-btn:hover { border-color: var(--lms-accent); color: var(--lms-accent); }
.lms-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.lms-type-choix { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 2px solid var(--lms-bord); border-radius: 12px; cursor: pointer; background: var(--lms-carte); text-align: left; color: var(--lms-texte); font-size: 13px; }
.lms-type-choix:hover, .lms-type-choix:focus-visible { border-color: var(--lms-accent); }
.lms-type-choix strong { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.lms-type-choix svg { width: 22px; height: 22px; color: var(--lms-accent); }
.lms-famille { font-weight: 700; margin: 12px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.lms-editeur-barre { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--lms-bord); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--lms-doux); }
.lms-editeur-barre button { min-width: 34px; min-height: 32px; border: 1px solid var(--lms-bord); background: var(--lms-carte); border-radius: 6px; cursor: pointer; color: var(--lms-texte); font-weight: 700; }
.lms-editeur { min-height: 220px; max-height: 60vh; overflow-y: auto; padding: 12px; border: 1px solid var(--lms-bord); border-radius: 0 0 10px 10px; background: var(--lms-carte); color: var(--lms-texte); font-size: 15px; line-height: 1.5; }
.lms-editeur:focus { outline: 2px solid var(--lms-accent); }
.lms-editeur img { max-width: 100%; }
.lms-question-studio { border: 1px solid var(--lms-bord); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--lms-carte); }
.lms-question-studio .lms-question-tete { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.lms-question-studio .lms-question-tete strong { flex: 1; }
.lms-ligne-choix { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.lms-ligne-choix input[type='text'] { flex: 1; }
.lms-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.lms-kpi { background: var(--lms-carte); border: 1px solid var(--lms-bord); border-radius: 12px; padding: 14px 16px; }
.lms-kpi span { display: block; font-size: 12px; opacity: .8; }
.lms-kpi strong { display: block; font-size: 24px; line-height: 1.2; color: var(--lms-titre); margin-top: 4px; }
.lms-kpi-alerte strong { color: var(--lms-ko); }
.lms-barres { display: flex; flex-direction: column; gap: 8px; }
.lms-barre-ligne { display: grid; grid-template-columns: minmax(120px, 240px) 1fr 60px; gap: 10px; align-items: center; font-size: 13px; }
.lms-barre-ligne .lms-barre-prog { height: 16px; }
.lms-alerte-ligne { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; margin: 2px 0; }
.lms-alerte-danger { color: var(--lms-ko); }
.lms-alerte-warning { color: var(--lms-attente); }
.lms-alerte-ligne svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.lms-journal { list-style: none; padding: 0; margin: 0; }
.lms-journal li { padding: 8px 0; border-bottom: 1px solid var(--lms-doux); font-size: 13px; }
.lms-journal li pre { white-space: pre-wrap; font-family: inherit; margin: 4px 0 0; }
.lms-flash-msg { padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-weight: 600; }
.lms-flash-ok { background: #e8f5e9; color: #1b5e20; }
.lms-flash-ko { background: #ffebee; color: #b71c1c; }
.lms-flash-info { background: var(--lms-doux); }
.lms-code-affiche { font-family: Consolas, monospace; font-size: 34px; letter-spacing: .25em; font-weight: 800; text-align: center; padding: 10px; border: 2px dashed var(--lms-accent); border-radius: 12px; }
.lms-qr { display: block; width: 220px; height: 220px; margin: 10px auto; background: #fff; padding: 8px; border-radius: 8px; }
.lms-qualiopi-critere, .lms-qualiopi-critere:hover { border-left: 6px solid var(--lms-bord); }
.lms-qualiopi-ok, .lms-qualiopi-ok:hover { border-left-color: var(--lms-ok); }
.lms-qualiopi-partiel, .lms-qualiopi-partiel:hover { border-left-color: var(--lms-attente); }
.lms-qualiopi-manque, .lms-qualiopi-manque:hover { border-left-color: var(--lms-ko); }
.lms-apercu-bandeau { background: var(--lms-jaune); color: #000; padding: 8px 14px; border-radius: 10px; margin-bottom: 10px; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.lms-apercu-bandeau a { color: #000; }
.lms-apercu-cadre { position: relative; min-height: 70vh; border: 2px dashed var(--lms-jaune); border-radius: 14px; }
/* Aperçu stagiaire : page opaque, comme le portail. Le .bloc translucide laisserait voir l'image de
   fond à travers les questions et les choix, blancs, qui paraîtraient gris. */
.bloc:has(.lms-apercu-cadre) { opacity: 1; filter: none; }
.lms-apercu-cadre .lms { position: relative; inset: auto; overflow: visible; }

/* ========== Petits écrans ========== */
@media (max-width: 760px) {
	.lms { padding: 10px 12px 40px; }
	.lms-gros-boutons { grid-template-columns: 1fr 1fr; }
	.lms-gros { min-height: 96px; }
	.lms-nav-activites { grid-template-columns: 1fr 1fr; }
	.lms-assoc { grid-template-columns: 1fr; }
	.lms-choix-aide { grid-template-columns: 1fr; }
	.lms-barre-ligne { grid-template-columns: 1fr 60px; }
	.lms-barre-ligne .lms-barre-prog { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
	.lms *, .lms *::before, .lms *::after { transition: none !important; animation: none !important; }
}
.lms-vignette-mini { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.lms-vignette-mini svg { width: 22px; height: 22px; }
/* En-tête du mode enfant : Accueil et Quitter, côte à côte, compacts. */
.lms-entete .lms-actions { margin: 0; }
.lms-entete .lms-actions .lms-gros { flex: 0 0 auto; }
.lms-mode-enfant .lms-gros-petit { min-height: 64px; border-radius: 18px; }
.lms-mode-enfant .lms-gros-petit .lms-gros-ico { width: 1.8em; height: 1.8em; }
.lms .lms-flash { font-size: 2em; }
.lms-mode-enfant .lms-flash { font-size: 2.6em; min-height: 260px; }
.lms-gros[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.lms-mode-enfant .lms-fil { display: none; }

/* ========== Priorité sur les règles générales ==========
   Plus haut, #content p et #content a sont fixés à 15 px et les liens colorés : dans le LMS, la
   taille suit le réglage A- / A+ du stagiaire, et les classes du LMS gardent la main. */
#content .lms :is(p, li, label, td, th, summary, a, button, input, select, textarea) { font-size: 1em; }
.lms .lms-petit, #content .lms .lms-petit { font-size: .85em; }
.lms .lms-grand-texte, #content .lms .lms-grand-texte { font-size: 1.3em; }
.lms .lms-enonce, #content .lms .lms-enonce { font-size: 1.2em; }
.lms-mode-enfant .lms-enonce, #content .lms-mode-enfant .lms-enonce { font-size: 1.35em; }
.lms .lms-resultat-score, #content .lms .lms-resultat-score { font-size: 2.6em; }
.lms .lms-texte-trous, #content .lms .lms-texte-trous { font-size: 1.1em; }
.lms .lms-vf label, #content .lms .lms-vf label { font-size: 1.2em; }
.lms-mode-enfant .lms-choix label, #content .lms-mode-enfant .lms-choix label { font-size: 1.15em; }
.lms .lms-etoiles label, #content .lms .lms-etoiles label { font-size: 2.6em; }
.lms .lms-note10 label, #content .lms .lms-note10 label { font-size: 1.1em; }
#content .lms .lms-fil a { font-size: .95em; }
#content .lms-onglets a { color: var(--lms-texte); font-size: 14px; }
#content .lms-onglets a.lms-actif { color: #fff; }
#content .lms-carte-parcours, #content .lms-tuile { font-size: 1em; }
