/*
 * Les jetons de Tutor LMS, remappés sur la charte du site.
 *
 * Tutor 4.0 est un design system à variables : tutor-core.min.css en définit 167
 * et en consomme 243 par var(). Cent douze d'entre elles ne sont jamais définies
 * — la police de texte, 274 usages ; les onze échelons de marque, 139 usages —
 * et tombent sur un repli en dur. Les poser ici prend effet sans aucune lutte de
 * spécificité : :root et [data-tutor-theme=light] ciblent le même élément avec le
 * même poids, l'ordre de chargement tranche, et cette feuille arrive après.
 *
 * Aucune règle de sélecteur ici, aucun !important. Rien que des valeurs.
 *
 * Trois rampes chaudes, aucun gris : la charte n'a pas de neutre. Tout gris de
 * Tutor laissé tel quel serait ce qui trahit le plugin en premier. Chaque jeton
 * porte en commentaire son nombre d'usages relevé dans les feuilles de Tutor —
 * c'est l'ordre dans lequel on a travaillé, et celui dans lequel relire.
 *
 * Mesuré avant cette feuille : conformité chromatique médiane de 9,1 % sur
 * 46 relevés, 1 098 valeurs bleues. Voir audits/tutor/avant/.
 */

:root {

	/* ── Polices ──────────────────────────────────────────────────────────
	 * Le titre va sur Mulish, pas sur DM Serif Display : ce jeton sert du
	 * chrome d'interface en 500, 600 et 700, et la serif n'a qu'un poids 400.
	 * Le navigateur fabriquerait un faux gras. La serif revient par règle
	 * ciblée sur les vrais titres, en 400 — voir tutor-moderne.css.
	 */
	--tutor-font-family-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;  /* 274 */
	--tutor-font-family-heading: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;  /*  25 */

	/* ── La marque ────────────────────────────────────────────────────────
	 * Chez Tutor, brand-600 irrigue le lien, l'icône active, le filet actif,
	 * l'onglet — pas le bouton d'action, qui a ses propres jetons plus bas.
	 * Ce rôle, dans la charte, c'est la sauge. Le bouton, lui, est laiton.
	 *
	 * brand-450 n'a qu'un rôle : l'anneau de focus, 50 usages sur 50. Un
	 * anneau sauge sur un bouton sauge serait invisible ; la charte utilise
	 * laiton-700 pour cela. C'est le seul échelon qui sort de la rampe, et
	 * c'est voulu.
	 *
	 * Les trois échelons les plus sombres sont repliés sur sauge-900 :
	 * la charte s'arrête là, et on n'invente pas de couleur.
	 */
	--tutor-brand-100: var(--sauge-50);     /*   1 · fond très pâle */
	--tutor-brand-200: var(--sauge-100);    /*  10 · onglets, fonds doux */
	--tutor-brand-300: var(--sauge-200);    /*   7 · bordures secondaires */
	--tutor-brand-400: var(--sauge-400);    /*  10 · texte secondaire, désactivé */
	--tutor-brand-450: var(--laiton-700);   /*  50 · anneau de focus, uniquement */
	--tutor-brand-500: var(--sauge-600);    /*   9 · visuel */
	--tutor-brand-600: var(--sauge-800);    /*  18 · la marque */
	--tutor-brand-700: var(--sauge-900);    /*  11 · survol */
	--tutor-brand-800: var(--sauge-900);    /*   9 */
	--tutor-brand-900: var(--sauge-900);    /*   7 */
	--tutor-brand-950: var(--sauge-900);    /*   7 */

	/* ── Textes ───────────────────────────────────────────────────────────
	 * La rampe encre : brun désaturé, jamais noir.
	 */
	--tutor-text-primary:            var(--ink-900);    /* 276 */
	--tutor-text-secondary:          var(--ink-700);    /*  64 */
	--tutor-text-subdued:            var(--ink-500);    /*  88 */
	--tutor-text-disabled:           var(--ink-300);
	--tutor-text-light:              var(--paper-50);   /*   4 */
	--tutor-text-primary-inverse:    var(--paper-0);    /*  33 */
	--tutor-text-highlighted-hover:  var(--ink-700);
	--tutor-text-brand:              var(--sauge-800);
	--tutor-text-brand-hover:        var(--sauge-900);
	--tutor-text-brand-secondary:    var(--sauge-400);

	/* ── Surfaces ─────────────────────────────────────────────────────────
	 * L'étagement de la charte : la page est beige (paper-50), les cartes et
	 * les champs sont blancs dessus (paper-0). Inverser les deux aplatirait
	 * tout. Le survol est végétal, comme les lignes de .res-row.
	 */
	--tutor-surface-base:            var(--paper-50);   /*  43 · le fond de page */
	--tutor-surface-l1:              var(--paper-0);    /* 131 · cartes, champs */
	--tutor-surface-l1-hover:        var(--sauge-50);   /*  73 */
	--tutor-surface-l2:              var(--paper-100);  /*  18 */
	--tutor-surface-l2-hover:        var(--paper-300);  /*   4 */
	--tutor-surface-l3:              var(--paper-50);   /*   6 */
	--tutor-surface-sidebar-l1:      var(--paper-0);
	--tutor-surface-dark:            var(--sauge-900);  /*   8 */
	--tutor-surface-brand-primary:   var(--sauge-800);
	--tutor-surface-brand-primary-2: var(--sauge-900);
	--tutor-surface-brand-secondary: var(--sauge-200);
	--tutor-surface-brand-tertiary:  var(--sauge-50);
	--tutor-surface-brand-quaternary: var(--sauge-100);
	--tutor-surface-brand-dark:      var(--sauge-900);
	--tutor-surface-exception7:      var(--sauge-900);

	/* ── Bordures ─────────────────────────────────────────────────────────
	 * paper-200 est LE filet de la charte, 72 usages dans design.css.
	 * paper-300 est le filet fort : en-tête de tableau, survol de carte.
	 */
	--tutor-border-idle:             var(--paper-200);  /* 191 */
	--tutor-border-idle2:            var(--paper-200);  /*  20 */
	--tutor-border-hover:            var(--paper-300);  /*  11 */
	--tutor-border-tertiary:         var(--ink-300);
	--tutor-border-dark:             var(--ink-900);
	--tutor-border-inverse:          var(--paper-0);    /*   6 */
	--tutor-border-brand:            var(--sauge-800);
	--tutor-border-brand-secondary:  var(--sauge-200);
	--tutor-border-brand-tertiary:   var(--sauge-400);

	/* ── Icônes ───────────────────────────────────────────────────────── */
	--tutor-icon-idle:               var(--ink-700);    /*  38 */
	--tutor-icon-idle-inverse:       var(--paper-0);
	--tutor-icon-hover:              var(--ink-900);    /*   6 */
	--tutor-icon-secondary:          var(--ink-500);    /*  27 */
	--tutor-icon-subdued:            var(--ink-300);    /*  19 */
	--tutor-icon-disabled:           var(--paper-300);  /*   9 */
	--tutor-icon-brand:              var(--sauge-800);
	--tutor-icon-brand-hover:        var(--sauge-900);
	--tutor-icon-brand-secondary:    var(--sauge-200);

	/* ── Boutons ──────────────────────────────────────────────────────────
	 * Le primaire est laiton, comme .btn--primary. Son texte reste blanc chez
	 * Tutor (text-primary-inverse, partagé avec 33 autres usages sur fond
	 * sombre) : il est ramené à ink-900 par règle ciblée dans tutor-moderne.css.
	 *
	 * Les bordures de boutons passent par box-shadow chez Tutor. Le ghost
	 * reprend .btn--ghost : un filet sauge de 1px.
	 */
	--tutor-button-primary:                 var(--laiton-500);
	--tutor-button-primary-hover:           var(--laiton-600);
	--tutor-button-primary-focused:         var(--laiton-500);
	--tutor-button-primary-disabled:        var(--laiton-300);
	--tutor-button-primary-soft:            var(--laiton-50);
	--tutor-button-primary-soft-hover:      var(--laiton-100);
	--tutor-button-primary-soft-focused:    var(--laiton-50);
	--tutor-button-primary-border-shadow:   var(--shadow-cta);
	--tutor-button-secondary:               var(--paper-100);
	--tutor-button-secondary-hover:         var(--paper-200);
	--tutor-button-secondary-focused:       var(--paper-100);
	--tutor-button-secondary-border-shadow: 0 0 0 1px var(--paper-200);
	--tutor-button-outline-hover:           var(--sauge-50);
	--tutor-button-outline-inverse:         var(--paper-0);
	--tutor-button-outline-focused-inverse: var(--paper-0);
	--tutor-button-outline-border-shadow:   0 0 0 1px var(--sauge-800);
	--tutor-button-ghost-hover:             var(--sauge-50);
	--tutor-button-ghost-border-shadow:     none;
	--tutor-button-disabled:                var(--paper-100);
	--tutor-button-radius:                  var(--radius-md);     /* 6px */
	--tutor-button-font-weight:             600;                  /* .btn */

	/* ── Actions grises ─────────────────────────────────────────────────── */
	--tutor-actions-gray-empty:      var(--paper-50);
	--tutor-actions-gray-secondary:  var(--paper-100);
	--tutor-actions-gray-tertiary:   var(--paper-200);
	--tutor-actions-gray-quaternary: var(--paper-300);
	--tutor-actions-inverse:         var(--paper-0);
	--tutor-actions-brand-primary:   var(--sauge-800);
	--tutor-actions-brand-secondary: var(--sauge-200);
	--tutor-actions-brand-tertiary:  var(--sauge-100);

	/* ── Onglets ──────────────────────────────────────────────────────────
	 * Pilule, comme .cap-pill : le seul endroit où l'on force une forme
	 * différente du défaut de Tutor (8px). L'actif est sauge plein.
	 */
	--tutor-tab-sidebar-l2:          var(--paper-0);
	--tutor-tab-sidebar-l2-hover:    var(--sauge-50);
	--tutor-tab-sidebar-l2-active:   var(--sauge-100);
	--tutor-tab-sidebar-l4-hover:    var(--sauge-50);
	--tutor-tab-sidebar-l4-active:   var(--sauge-100);
	--tutor-tab-l3:                  var(--sauge-100);
	--tutor-tab-l3-hover:            var(--sauge-200);
	--tutor-tab-l3-active:           var(--sauge-100);
	--tutor-tab-l3-active-hover:     var(--sauge-100);
	--tutor-tab-radius:              var(--radius-pill);
	--tutor-tab-radius-sm:           var(--radius-pill);
	--tutor-tab-font-weight:         600;
	--tutor-tab-active-shadow:       none;

	/* ── Quiz ─────────────────────────────────────────────────────────── */
	--tutor-quiz-idle:               var(--paper-50);
	--tutor-quiz-hover:              var(--sauge-50);

	/* ── Champs ───────────────────────────────────────────────────────────
	 * .ct-input : fond blanc, filet paper-200, rayon 6px.
	 */
	--tutor-input-radius:            var(--radius-md);
	--tutor-input-border-color:      var(--paper-200);
	--tutor-input-border-shadow:     none;
	--tutor-input-font-weight:       400;

	/* ── Succès → sauge claire ────────────────────────────────────────────
	 * La marque vit en 800 ; le succès en 700, 300 et 50. Pas de confusion,
	 * et Tutor accompagne toujours d'une coche.
	 */
	--tutor-text-success:                 var(--sauge-800);
	--tutor-icon-success-primary:         var(--sauge-700);
	--tutor-icon-success-secondary:       var(--sauge-600);
	--tutor-button-success:               var(--sauge-700);
	--tutor-button-success-hover:         var(--sauge-800);
	--tutor-button-success-focused:       var(--sauge-700);
	--tutor-border-success:               var(--sauge-300);
	--tutor-border-success-secondary:     var(--sauge-800);
	--tutor-surface-success:              var(--sauge-50);
	--tutor-actions-success-primary:      var(--sauge-700);
	--tutor-actions-success-secondary:    var(--sauge-400);
	--tutor-actions-success-tertiary:     var(--sauge-50);
	--tutor-actions-success-exception:    var(--sauge-600);

	/* ── Erreur → le rouge de la charte, enfin employé ────────────────────
	 * --color-danger était déclaré et jamais utilisé. Épaulé par la terre
	 * pour les fonds et les accents.
	 */
	--tutor-text-critical:                var(--color-danger);
	--tutor-text-critical-hover:          var(--color-danger);
	--tutor-icon-critical:                var(--color-danger);
	--tutor-icon-critical-hover:          var(--color-danger);
	--tutor-button-destructive:           var(--color-danger);
	--tutor-button-destructive-hover:     var(--terre-700);
	--tutor-button-destructive-focused:   var(--color-danger);
	--tutor-button-destructive-soft:      var(--terre-100);
	--tutor-button-destructive-soft-hover: var(--terre-100);
	--tutor-button-destructive-soft-focused: var(--terre-100);
	--tutor-button-destructive-border-shadow: none;
	--tutor-border-error:                 var(--terre-700);
	--tutor-border-error-secondary:       var(--color-danger);
	--tutor-border-error-tertiary:        var(--terre-700);
	--tutor-surface-critical:             var(--terre-100);
	--tutor-actions-critical-primary:     var(--terre-700);
	--tutor-actions-critical-secondary:   var(--terre-100);

	/* ── Alerte → laiton ──────────────────────────────────────────────────
	 * La charte déclare --color-warning en terracotta, la même famille que
	 * l'erreur. Tutor affiche les deux côte à côte : elles deviendraient
	 * indiscernables. Le laiton est la famille ambrée de la charte ; la
	 * confusion avec le bouton est évitée par les échelons — l'alerte vit en
	 * 50, 100, 300, 800 et 900, le bouton en 500 plein.
	 */
	--tutor-text-warning:                 var(--laiton-900);
	--tutor-text-caution:                 var(--laiton-800);
	--tutor-icon-warning:                 var(--laiton-800);
	--tutor-icon-warning-secondary:       var(--laiton-500);
	--tutor-icon-caution:                 var(--laiton-500);
	--tutor-border-warning:               var(--laiton-300);
	--tutor-border-warning-secondary:     var(--laiton-800);
	--tutor-border-warning-tertiary:      var(--laiton-500);
	--tutor-surface-warning:              var(--laiton-50);
	--tutor-surface-warning-hover:        var(--laiton-100);
	--tutor-surface-warning-hover-2:      var(--laiton-100);
	--tutor-actions-warning-primary:      var(--laiton-500);
	--tutor-actions-warning-secondary:    var(--laiton-100);
	--tutor-actions-warning-tertiary:     var(--laiton-50);
	--tutor-actions-warning-exception:    var(--laiton-600);
	--tutor-actions-caution:              var(--laiton-500);
	--tutor-actions-caution-secondary:    var(--laiton-100);

	/* ── Les « exceptions » ───────────────────────────────────────────────
	 * Cyan, magenta, violet, lime, orange : Tutor s'en sert pour colorer les
	 * cartes de statistiques et quelques pastilles. Cinq couleurs hors charte
	 * visibles dès l'accueil du tableau de bord. Rapatriées sur les rampes.
	 */
	--tutor-text-exception1:              var(--sauge-600);   /* cyan */
	--tutor-icon-exception1:              var(--sauge-600);
	--tutor-text-exception2:              var(--terre-700);   /* magenta */
	--tutor-icon-exception2:              var(--terre-700);
	--tutor-surface-exception2-secondary: var(--terre-100);
	--tutor-surface-exception3-highlight: var(--sauge-300);   /* lime */
	--tutor-actions-exception3-highlight: var(--sauge-300);
	--tutor-text-exception4:              var(--laiton-500);  /* ambre */
	--tutor-icon-exception4:              var(--laiton-500);
	--tutor-text-exception5:              var(--laiton-800);  /* violet */
	--tutor-icon-exception5:              var(--laiton-800);
	--tutor-actions-exception5:           var(--laiton-800);
	--tutor-surface-exception6:           var(--laiton-50);
	--tutor-actions-exception6:           var(--laiton-50);
	--tutor-border-exception6:            var(--laiton-800);

	/* ── Illustrations ────────────────────────────────────────────────────
	 * Les états vides — « aucun cours terminé », « aucune annonce » — sont des
	 * SVG dans le HTML, dont les remplissages passent par ces jetons.
	 */
	--tutor-visual-gray-1:       var(--paper-0);
	--tutor-visual-gray-2:       var(--paper-200);
	--tutor-visual-gray-3:       var(--paper-300);
	--tutor-visual-gray-4:       var(--ink-900);
	--tutor-visual-brand-1:      var(--sauge-600);
	--tutor-visual-brand-2:      var(--sauge-400);
	--tutor-visual-brand-3:      var(--sauge-200);
	--tutor-visual-success-1:    var(--sauge-700);
	--tutor-visual-success-2:    var(--sauge-300);
	--tutor-visual-caution-1:    var(--laiton-500);
	--tutor-visual-caution-2:    var(--laiton-800);
	--tutor-visual-caution-3:    var(--laiton-900);
	--tutor-visual-critical-1:   var(--color-danger);
	--tutor-visual-critical-2:   var(--terre-100);
	--tutor-visual-orange-1:     var(--terre-700);
	--tutor-visual-exception-1:  var(--sauge-600);
	--tutor-visual-exception-2:  var(--terre-700);
	--tutor-visual-exception-3:  var(--laiton-800);

	/* ── Formes ───────────────────────────────────────────────────────────
	 * 6px est le rayon par défaut de la charte, 42 usages. 10px pour les
	 * grandes surfaces. La pilule est réservée aux onglets et badges.
	 */
	--tutor-popover-radius:          var(--radius-md);
	--tutor-popover-border:          1px solid var(--paper-200);
	--tutor-modal-radius:            var(--radius-lg);      /* 10px */
	--tutor-toast-radius:            var(--radius-md);

	/* ── Ombres ───────────────────────────────────────────────────────────
	 * Tutor en veut sept, teintées bleu froid rgba(16,24,40). La charte en a
	 * quatre, teintées chaud. On sature vers shadow-lg : une ombre chaude un
	 * peu présente reste dans la charte, une ombre bleue n'y est pas.
	 */
	--tutor-shadow-xs:               var(--shadow-xs);
	--tutor-shadow-sm:               var(--shadow-sm);
	--tutor-shadow-md:               var(--shadow-md);
	--tutor-shadow-lg:               var(--shadow-md);
	--tutor-shadow-xl:               var(--shadow-lg);
	--tutor-shadow-2xl:              var(--shadow-lg);
	--tutor-shadow-3xl:              var(--shadow-lg);
	--tutor-modal-shadow:            var(--shadow-lg);
	--tutor-popover-shadow:          var(--shadow-md);
	--tutor-toast-shadow:            var(--shadow-md);

	/* ── Notifications ────────────────────────────────────────────────── */
	--tutor-toast-default-background: var(--paper-0);
	--tutor-toast-default-border:     var(--paper-200);
	--tutor-toast-default-text:       var(--ink-900);
	--tutor-toast-success-background: var(--sauge-50);
	--tutor-toast-success-border:     var(--sauge-300);
	--tutor-toast-error-background:   var(--terre-100);
	--tutor-toast-error-border:       var(--terre-700);
	--tutor-toast-warning-background: var(--laiton-50);
	--tutor-toast-warning-border:     var(--laiton-500);
	--tutor-toast-info-icon:          var(--sauge-800);

	/* ── Téléversement ────────────────────────────────────────────────────
	 * Le cadre pointillé de la zone de dépôt est un SVG en data URI, bleu
	 * chez Tutor. Réémis à l'identique en sauge-500.
	 */
	--tutor-file-uploader-background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%238A9A72' stroke-width='2' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");

	/* ── Le moteur ancien ─────────────────────────────────────────────────
	 * tutor.min.css et tutor-front.min.css — l'archive et la fiche de cours —
	 * n'ont que treize variables. Même feuille, même palette.
	 *
	 * Les -rgb doivent être des triplets littéraux : le moteur ancien les
	 * injecte dans rgba(var(--x-rgb), .1), et une var() imbriquée n'y passe
	 * pas. Les oublier rendrait des fonds transparents.
	 */
	--tutor-color-primary:           var(--sauge-800);
	--tutor-color-primary-rgb:       71, 87, 52;
	--tutor-color-primary-hover:     var(--sauge-900);
	--tutor-color-primary-hover-rgb: 46, 58, 31;
	--tutor-body-color:              var(--ink-900);
	--tutor-body-color-rgb:          42, 38, 34;
	--tutor-border-color:            var(--paper-200);
	--tutor-border-color-rgb:        232, 220, 195;
	--tutor-color-gray:              var(--paper-300);
	--tutor-color-gray-rgb:          212, 196, 161;
	--tutor-color-gray-10:           var(--paper-100);
	--tutor-color-white:             var(--paper-0);
	--tutor-color-secondary:         var(--ink-700);
	--tutor-color-subdued:           var(--ink-500);
	--tutor-color-hints:             var(--ink-300);
	--tutor-color-muted:             var(--ink-500);
	--tutor-color-success:           var(--sauge-700);
	--tutor-color-success-rgb:       93, 111, 74;
	--tutor-color-warning:           var(--laiton-600);
	--tutor-color-warning-rgb:       193, 154, 71;
	--tutor-color-danger:            var(--color-danger);
	--tutor-color-danger-rgb:        168, 52, 30;
	--tutor-disabled-color:          var(--ink-300);
	--tutor-disabled-bg:             var(--paper-100);
	--tutor-table-border-radius:     var(--radius-md);
}

/*
 * Le lecteur vidéo des leçons a son propre jeu de jetons.
 */
.tutor-video-player,
.plyr {
	--plyr-color-main:            var(--laiton-500);
	--plyr-font-family:           var(--font-body);
	--plyr-control-radius:        var(--radius-md);
	--plyr-focus-visible-color:   var(--laiton-700);
}

/*
 * Le message d'une promotion qui n'a pas commencé, ou qui s'est refermée.
 *
 * Il prend la place des boutons « commencer / continuer » dans la boîte du cours.
 * Ton posé, pas d'alerte : la personne a payé, elle attend simplement son tour.
 */
.sensbio-promo {
	padding: clamp(18px, 2vw, 24px);
	background: var(--sauge-50, #f2f4ee);
	border: 1px solid var(--sauge-200, #d7ded0);
	border-radius: var(--radius-md, 8px);
	text-align: left;
}

.sensbio-promo__titre {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: var(--fs-md, 18px);
	color: var(--sauge-800);
}

.sensbio-promo__texte {
	margin: 0 0 14px;
	font-size: var(--fs-sm, 15px);
	line-height: 1.55;
	color: var(--ink-700);
}

.sensbio-promo p:last-child { margin: 0; }