/*
 * Ce que les jetons n'atteignent pas — tableau de bord, inscriptions, leçons.
 *
 * Les feuilles modernes de Tutor sont variabilisées presque partout. Presque :
 * une poignée de valeurs sont écrites en dur, et chacune des règles ci-dessous
 * en corrige une, relevée par l'audit (audits/tutor/lot1/). Rien ici n'est
 * écrit par principe.
 *
 * Aucun !important. La spécificité est remontée côté design : body.tutor-lms
 * est posé par Tutor sur toutes les pages — les pages d'inscription n'ont pas
 * tutor-frontend — et comme chaque règle vise une classe .tutor-*, rien ne fuit
 * hors du plugin.
 */

/* ── Le bouton primaire : texte lisible sur laiton ─────────────────────────
 * Tutor peint son étiquette en text-primary-inverse, blanc, partagé avec
 * trente-trois autres usages sur fond sombre — impossible de remapper le jeton.
 * Blanc sur laiton-500 ne se lit pas. .btn--primary dit ink-900.
 */
body.tutor-lms .tutor-btn.tutor-btn-primary,
body.tutor-lms .tutor-btn.tutor-btn-primary:link,
body.tutor-lms .tutor-btn.tutor-btn-primary:visited,
body.tutor-lms .tutor-btn.tutor-btn-primary:hover,
body.tutor-lms .tutor-btn.tutor-btn-primary:focus,
body.tutor-lms .tutor-btn.tutor-btn-primary svg {
	color: var(--ink-900);
}

/* ── Les vrais titres en serif ─────────────────────────────────────────────
 * Le jeton de titre sert du chrome en 600 et 700 : il reste sur Mulish. Les
 * titres éditoriaux, eux, reprennent DM Serif Display — en 400, son seul poids,
 * comme le fait le thème.
 */
body.tutor-lms .tutor-h1,
body.tutor-lms .tutor-h2,
body.tutor-lms .tutor-h3,
body.tutor-lms .tutor-lesson-content :is(h1, h2, h3),
body.tutor-lms .tutor-lesson-wrapper :is(h1, h2, h3) {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--tracking-display);
	color: var(--sauge-800);
}

/* ── Rayons écrits en dur ──────────────────────────────────────────────────
 * Tutor n'a pas de jeton de rayon global : 8px et 12px sont posés en dur sur
 * ses conteneurs. La charte dit 6px par défaut, 10px pour les grandes surfaces.
 */
body.tutor-lms div.tutor-card,
body.tutor-lms .tutor-login-wrap,
body.tutor-lms .tutor-template-segment,
body.tutor-lms .tutor-learning-sidebar-curriculum,
body.tutor-lms .tutor-learning-sidebar-pages,
body.tutor-lms .tutor-lesson-content-tab,
body.tutor-lms .tutor-attachment-card,
body.tutor-lms .tutor-account-cover-photo,
body.tutor-lms .tutor-tabs-nav,
body.tutor-lms .tutor-card-rounded-2xl,
body.tutor-lms .tutor-progress-card-thumbnail,
body.tutor-lms .tutor-profile-card-header,
body.tutor-lms .tutor-course-thumb,
body.tutor-lms .tutor-course-info-table,
body.tutor-lms .tutor-course-announcements,
body.tutor-lms .tutor-billing-body {
	border-radius: var(--radius-md);
}
/* Les grandes cartes : celles d'un cours suivi, du profil, des statistiques. */
body.tutor-lms .tutor-stat-card,
body.tutor-lms .tutor-tour-images,
body.tutor-lms .tutor-progress-card,
body.tutor-lms .tutor-profile-card,
body.tutor-lms .tutor-dashboard-courses-card,
body.tutor-lms .tutor-dashboard-courses-tab,
body.tutor-lms .tutor-dashboard-page-card,
body.tutor-lms .tutor-dashboard-page-card-header,
body.tutor-lms .tutor-dashboard-page-card-body,
body.tutor-lms .tutor-quiz-attempts,
body.tutor-lms .tutor-tabs-content,
body.tutor-lms .tutor-billing-tabs,
body.tutor-lms .tutor-billing-tabs-content {
	border-radius: var(--radius-lg);
}
/* Sous 576 px, la leçon repose ses onglets à 12px avec trois classes. */
body.tutor-lms .tutor-lesson-content .tutor-lesson-content-tab .tutor-tabs-nav {
	border-radius: var(--radius-md);
}
body.tutor-lms .tutor-lesson-content .tutor-lesson-content-tab .tutor-tabs-content {
	border-radius: var(--radius-lg);
}

/* ── La barre de progression ───────────────────────────────────────────────
 * Une ombre intérieure noire, en dur, sur chaque carte de cours suivi.
 */
body.tutor-lms .tutor-progress-bar {
	box-shadow: var(--shadow-inner);
}

/* ── Les listes déroulantes ────────────────────────────────────────────────
 * Texte noir pur, en dur. La charte n'a pas de noir.
 */
body.tutor-lms .tutor-select-trigger,
body.tutor-lms .tutor-select-value,
body.tutor-lms .tutor-select-actions,
body.tutor-lms .tutor-select-option {
	color: var(--ink-900);
}

/* ── Les cartes de statistiques du tableau de bord ─────────────────────────
 * Quatre couleurs en dur — cyan, ambre, violet, magenta — sur les quatre
 * premiers pavés que voit un élève en arrivant. Les plus visibles de tous.
 */
body.tutor-lms .tutor-stat-card-active .tutor-stat-card-icon,
body.tutor-lms .tutor-stat-card-active .tutor-stat-card-value {
	color: var(--sauge-700);
}
body.tutor-lms .tutor-stat-card-progress .tutor-stat-card-icon,
body.tutor-lms .tutor-stat-card-progress .tutor-stat-card-value {
	color: var(--laiton-800);
}
body.tutor-lms .tutor-stat-card-qa .tutor-stat-card-icon,
body.tutor-lms .tutor-stat-card-qa .tutor-stat-card-value {
	color: var(--terre-700);
}

/* ── Ombres écrites en dur ─────────────────────────────────────────────────
 * Une ombre intérieure noire sur les champs de la fenêtre de connexion, et
 * une ombre bleue sur son cadre. La charte : shadow-inner et shadow-md.
 */
body.tutor-lms .tutor-login-wrap.tutor-card,
body.tutor-lms .tutor-template-segment.tutor-card {
	box-shadow: var(--shadow-md);
}
body.tutor-lms .tutor-form-control,
body.tutor-lms .tutor-form-select,
body.tutor-lms .tutor-form-check-input {
	box-shadow: none;
}

/* ── Le voile des fenêtres ─────────────────────────────────────────────────
 * Noir à 60 % chez Tutor. Encre à 60 % ici : même densité, teinte de la charte.
 */
body.tutor-lms .tutor-modal-overlay,
body.tutor-lms .tutor-modal-backdrop,
body.tutor-lms .tutor-modal::before,
body.tutor-lms .tutor-backdrop {
	background-color: rgba(42, 38, 34, 0.6);
}

/* ── Anneaux de progression ────────────────────────────────────────────────
 * Le SVG de progression est rempli de noir et tracé en cyan, en dur.
 */
body.tutor-lms .tutor-statics-progress,
body.tutor-lms .tutor-progress-circle {
	fill: var(--ink-900);
}
body.tutor-lms .tutor-statics-progress path,
body.tutor-lms .tutor-progress-circle circle {
	stroke: var(--sauge-700);
}

/* ── Focus visible partout ─────────────────────────────────────────────────
 * Le jeton brand-450 couvre l'anneau de focus de Tutor. Cette règle couvre
 * ce qui n'en a pas : la charte n'avait aucun :focus-visible global, Tutor
 * est très interactif au clavier.
 */
body.tutor-lms [class*="tutor-"]:focus-visible {
	outline: 2px solid var(--laiton-700);
	outline-offset: 3px;
}

/* ── Le sélecteur clair/sombre ─────────────────────────────────────────────
 * Le thème est verrouillé en clair côté serveur (inc/tutor.php). Un sélecteur
 * qui ne fait rien tromperait l'élève : on retire sa ligne des paramètres.
 * Les autres réglages — contraste, vision, mouvement, taille — restent.
 * Le champ est un composant Alpine, sans attribut name : on le retrouve par
 * sa liaison.
 */
body.tutor-lms .tutor-preferences-setting-item:has([x-bind="register('theme')"]) {
	display: none;
}

/* ── Le formulaire d'inscription élève ─────────────────────────────────────
 * Tutor l'empile sur une colonne étroite, collée au header et au footer, et
 * sans rien du vocabulaire du formulaire de contact. On lui rend ce vocabulaire
 * — conteneur qui respire, labels mono en capitales, champs à bordure fine —
 * et une grille à deux colonnes pour les paires naturelles : prénom et nom,
 * mot de passe et confirmation. Nom d'utilisateur, e-mail et bouton gardent
 * toute la largeur. Les champs sont visés par leur attribut name, pas par
 * leur rang : l'ordre du gabarit peut changer, pas ses noms. Le bouton, lui,
 * vit dans un div sans classe : on le reconnaît à ce qu'il contient.
 */
/* La page (bin/install-page-inscription.php) ne porte que cela : fil
   d'Ariane, un titre, une ligne, le formulaire. Pas de hero, pas de panneau
   de réassurance — c'est une tâche de quarante secondes, pas une page de
   présentation, et la critique (.impeccable/critique/) l'a mesuré : le décor
   pesait trois fois le formulaire et repoussait le bouton hors écran. La
   section se centre sur la mesure du gabarit Tutor (520px, en style inline
   sur la carte). */
body.tutor-lms .se-inscription {
	max-width: 560px;
	margin: 0 auto;
	padding: clamp(8px, 2vw, 24px) 20px clamp(56px, 8vw, 112px);
	text-align: center;
}
body.tutor-lms .se-inscription > .se-inscription__title {
	margin: 0 0 14px;
}
body.tutor-lms .se-inscription > .se-inscription__lede {
	margin: 0 auto 30px;
	max-width: 40ch;
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: 1.55;
	color: var(--ink-700);
	text-wrap: pretty;
}
/* La carte Tutor porte le cadre : fond, bordure fine, respiration. */
body.tutor-lms .se-inscription #tutor-registration-wrap.tutor-card {
	padding: clamp(28px, 4vw, 44px) clamp(24px, 3.4vw, 40px);
	text-align: left;
	background: var(--paper-50);
	border: 1px solid var(--paper-200);
	border-radius: var(--radius-lg);
	box-shadow: none;
}
body.tutor-lms #tutor-registration-form.tutor-p-8 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 0;
}
body.tutor-lms #tutor-registration-form > .tutor-form-group,
body.tutor-lms #tutor-registration-form > .tutor-form-row {
	margin: 0;
}
body.tutor-lms #tutor-registration-form > .tutor-form-group:has(input[name="user_login"]),
body.tutor-lms #tutor-registration-form > .tutor-form-group:has(input[name="email"]),
body.tutor-lms #tutor-registration-form > .tutor-form-row,
body.tutor-lms #tutor-registration-form > div:has(> .tutor-btn-primary) {
	grid-column: 1 / -1;
}
body.tutor-lms #tutor-registration-form .tutor-form-col-12 {
	padding: 0;
}
body.tutor-lms #tutor-registration-form .tutor-input-field.tutor-mb-8,
body.tutor-lms #tutor-registration-form .tutor-form-row.tutor-mb-8 {
	margin-bottom: 0;
}

body.tutor-lms #tutor-registration-form label.tutor-block {
	display: block;
	margin: 0 0 7px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-500);
}

body.tutor-lms #tutor-registration-form .tutor-form-control.tutor-input {
	width: 100%;
	min-height: 0;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	color: var(--ink-900);
	background: var(--paper-0);
	border: 1px solid var(--paper-200);
	border-radius: var(--radius-md);
	box-shadow: none;
	transition: border-color var(--duration-base) var(--ease-out),
	            box-shadow var(--duration-base) var(--ease-out);
}
/* Le gabarit met le même texte en label et en placeholder ; l'un des deux
   suffit, et c'est le label qui reste lisible une fois le champ rempli. */
body.tutor-lms #tutor-registration-form .tutor-form-control.tutor-input::placeholder {
	color: transparent;
}
body.tutor-lms #tutor-registration-form .tutor-form-control.tutor-input:focus {
	outline: none;
	border-color: var(--sauge-500);
	box-shadow: 0 0 0 3px rgba(138, 154, 114, 0.18);
}

body.tutor-lms #tutor-registration-form .tutor-btn.tutor-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 8px;
	padding: 16px 28px;
	border: 0;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--laiton-500);
	color: var(--ink-900);
	box-shadow: var(--shadow-cta);
	transition: background var(--duration-base) var(--ease-out);
}
body.tutor-lms #tutor-registration-form .tutor-btn.tutor-btn-primary:hover {
	background: var(--laiton-600);
}

/* Le rappel « Déjà un compte ? » sous le bouton — traduit dans inc/tutor.php. */
body.tutor-lms #tutor-registration-form .tutor-flex.tutor-mt-8 {
	margin-top: 20px;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	color: var(--ink-500);
}
body.tutor-lms #tutor-registration-form .tutor-flex.tutor-mt-8 a {
	color: var(--sauge-800);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Sous 640 px, les paires s'empilent. */
@media (max-width: 640px) {
	body.tutor-lms #tutor-registration-form.tutor-p-8 {
		grid-template-columns: 1fr;
	}
	body.tutor-lms #tutor-registration-form > .tutor-form-group {
		grid-column: 1 / -1;
	}
}

/* ── Le pied de page, sur la page d'inscription ────────────────────────────
 * La newsletter y proposait un second « S'inscrire », juste sous le premier,
 * pour autre chose. Sur cette page seulement (classe posée par inc/tutor.php),
 * le pied de page s'en passe.
 */
body.tutor-lms.sensbio-inscription .site-footer__lettre {
	display: none;
}

/* ── Le titre de la fenêtre de connexion ───────────────────────────────────
 * « Connexion » (languages/tutor-fr_FR.po), centré au-dessus du formulaire
 * comme le titre de la page d'inscription. Deux jeux de classes selon que
 * Tutor sert son gabarit moderne ou l'ancien : on vise le conteneur.
 */
body.tutor-lms .tutor-login-form-wrapper > .tutor-h3,
body.tutor-lms .tutor-login-form-wrapper > .tutor-fs-4 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--sauge-800);
	text-align: center;
}