/* WebTV-Learning — feuille de style des briques publiques.
 *
 * Toutes les règles sont cantonnées au conteneur « .wtl » : l'extension s'installe dans
 * le thème de quelqu'un d'autre et ne doit rien déborder. Les variables sont posées sur
 * ce même conteneur, jamais sur :root : un thème peut les redéfinir sans toucher ici.
 */
.wtl{--fond:#F4F5F4;--carte:#FFFFFF;--encre:#1E2322;--encre-2:#5B6461;--encre-3:#8B9390;
  --filet:#DCE0DE;--scene:#171B1A;--scene-2:#232928;--scene-encre:#E8ECEA;--scene-encre-2:#A2ACA8;
  --accent:#2F6B5F;--accent-2:#E3EEEA;--rayon:8px;
  --police:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --echelle:1;   /* réglable depuis l'onglet Apparence : toutes les tailles de texte la suivent */
  --espace:24px;        /* entre les briques */
  --gouttiere:20px;     /* marges intérieures */
  --programme-largeur:320px;
  --programme-hauteur:720px;
  --vignette:96px;
  --carte-fond:var(--carte);   /* les cartes du catalogue et les vignettes : réglables à part */
  --carte-encre:var(--encre);
  --carte-titre:1;
  --carte-rayon:var(--rayon);
  --carte-encre-2:var(--encre-2);
  --carte-pastille:var(--accent);
  --carte-pastille-fond:var(--accent-2);
  --carte-casse:none;
  --carte-graisse:700;
  --carte-interligne:1.3;
  --carte-lignes:2;              /* lignes réservées au titre des cartes, coupé au-delà */
  --carte-image-ratio:16/9;      /* « auto » : le format de l'image elle-même */
  --carte-image-flex:0 0 auto;   /* 1 1 auto avec le format auto : l'image absorbe la différence */
  --carte-image-ajust:cover;     /* contain : l'image entière, avec des marges */
  --filtre-fond:var(--carte);    /* les boutons de filtre du catalogue : réglables à part */
  --filtre-encre:var(--encre-2);
  --filtre-bord:var(--filet);
  --filtre-actif-fond:var(--accent-2);
  --filtre-actif-encre:var(--accent);
  --filtre-rayon:999px;          /* pilule ; sinon l'arrondi des angles, ou 0 */
  --filtre-taille:1;
  --filtre-espace:8px;           /* entre les boutons */
  --filtre-hauteur:6px;          /* marge intérieure verticale */
  --filtre-graisse:600;
  --filtre-casse:none;
  --filtre-bord-epaisseur:2px;
  --filtre-colonne:240px;        /* la colonne à gauche */
  --filtre-titre:var(--encre-3); /* titres de groupe de la colonne */
  --filtre-titre-taille:1;
  --filtre-titre-graisse:600;
  --filtre-titre-casse:uppercase;
  --filtre-titre-lettres:1px;
  --filtre-titre-marge:4px;
  --pages-alignement:center;     /* les pages du catalogue : flex-start, center, flex-end */
  --repere-fond:var(--carte);   /* le cartouche des repères : réglable à part */
  --repere-libelle:var(--encre-3);
  --repere-valeur:var(--encre);
  --repere-bord:var(--filet);
  --repere-separateur:1px;
  --repere-rayon:var(--rayon);
  --prog-fond:var(--fond);      /* la colonne des leçons : réglable à part */
  --prog-encre:var(--encre);
  --prog-encre-2:var(--encre-3);
  --prog-actif-fond:var(--carte);
  --prog-actif-filet:var(--accent);
  --prog-section:var(--encre-2);
  --prog-separateur:0px;
  --prog-titre:1;                /* facteur de taille des titres de leçon */
  --prog-graisse:600;
  --prog-interligne:1.3;
  --prog-casse:none;
  --prog-lignes:2;
  --prog-section-taille:1;
  --panier-bouton-fond:var(--carte);   /* le panier : réglable à part */
  --panier-bouton-encre:var(--encre);
  --panier-pastille:var(--accent);
  --panier-pastille-encre:#fff;
  --panier-ajout-fond:var(--accent-2); /* transparent : contour seul */
  --panier-ajout-encre:var(--accent);
  --panier-ajout-bord:var(--accent);
  --panier-remise:var(--accent);
  --panier-total:var(--encre);
  --panier-vignette:96px;
  --autres-fond:var(--fond);     /* la brique des autres cours : réglable à part */
  --autres-titre:var(--encre);
  --autres-titre-taille:1;
  --autres-vignette:180px;       /* largeur minimale d'une vignette */
  --autres-lignes:2;
  font-family:var(--police);font-size:calc(15px * var(--echelle));line-height:1.5;color:var(--encre);
  -webkit-font-smoothing:antialiased;margin:0;max-width:none;width:100%}
.wtl *{box-sizing:border-box}
.wtl button{font:inherit;color:inherit}
.wtl :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wtl-note{padding:10px 14px;border-left:4px solid #B4572E;background:#F8E9E1;color:#5B2F17;border-radius:4px}

/* ---- Le cours ---- */
/* Le lecteur et le programme se partagent la brique. Pas de seuil d'écran fixe : le programme
   reste à côté tant que le lecteur garde au moins une fois et demie sa largeur, sinon il passe
   dessous, seul sur sa ligne (iPad portrait avec une colonne de 400 px : mesuré le 15/09).
   « À gauche » retourne simplement le sens de la ligne ; dessous, le programme prend tout. */
.wtl-cours{display:flex;flex-wrap:wrap;background:var(--fond);border-radius:var(--rayon);overflow:hidden;margin:var(--espace) 0}
.wtl-cours .scene{flex:999 1 calc(max(var(--programme-largeur), 240px) * 1.5)}
/* Jamais moins de 240 px : une largeur en % sans plancher ne ferait jamais passer le programme
   dessous (30 % + 45 % tiennent toujours), et une colonne de 100 px n'est pas lisible. */
.wtl-cours .programme{flex:1 1 max(var(--programme-largeur), 240px)}
/* Rétrécir (1) ne joue que seul sur sa ligne, sur un téléphone plus étroit que la colonne :
   le passage à la ligne se décide sur les largeurs demandées, avant tout rétrécissement. */
.wtl-cours.programme-gauche{flex-direction:row-reverse}
.wtl-cours.programme-dessous .programme{flex-basis:100%}

.wtl-cours .scene{background:var(--scene);color:var(--scene-encre);min-width:0}
.wtl-cours .lecteur{position:relative;width:100%;padding-top:56.25%;background:#000}
.wtl-cours .quiz-invite{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0;padding:10px calc(var(--gouttiere) * .8);background:var(--accent-2);color:var(--accent);font-size:calc(13px * var(--echelle));font-weight:600}
.wtl-cours .quiz-invite[hidden]{display:none}
/* ---- Le sommaire : la seule structure indexable d'une page de cours ---- */
.wtl-sommaire{margin:var(--espace) 0}
.wtl-sommaire .sommaire-titre{margin:0 0 calc(var(--gouttiere) * .6);font-size:calc(20px * var(--echelle));font-weight:700;color:var(--encre)}
.wtl-sommaire .sommaire-lecons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--gouttiere) * .5)}
.wtl-sommaire .sommaire-chapitre{margin:calc(var(--gouttiere) * .5) 0 0;font-size:calc(12px * var(--echelle));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.wtl-sommaire .sommaire-lecon{margin:0;padding:0}
.wtl-sommaire .sommaire-lien{display:inline-flex;align-items:center;gap:10px;color:var(--accent);text-decoration:none;font-weight:600}
.wtl-sommaire .sommaire-lien:hover .sommaire-nom{text-decoration:underline}
.wtl-sommaire .sommaire-vignette{width:var(--vignette);height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--rayon) * .5);background:var(--scene-2);flex:none}
.wtl-sommaire .sommaire-duree{margin-left:8px;font-size:calc(12px * var(--echelle));color:var(--encre-3);white-space:nowrap}
.wtl-sommaire .sommaire-resume{margin:2px 0 0;font-size:calc(14px * var(--echelle));color:var(--encre-2)}
/* En cartes : chaque leçon dans son cadre. Les mêmes repères que les cartes du catalogue
   — fond, arrondi, encre —, pour que le réglage « Cartes et vignettes » de l'onglet
   Apparence les habille elles aussi. Et le FILET, sans lequel une carte blanche sur une
   page blanche ne se voit pas : c'est ce qui manquait au premier jet. */
.wtl-sommaire.cartes .sommaire-lecons{display:grid;grid-template-columns:repeat(var(--wtl-colonnes,3),minmax(0,1fr));gap:var(--gouttiere)}
@media (max-width:900px){.wtl-sommaire.cartes .sommaire-lecons{grid-template-columns:repeat(min(var(--wtl-colonnes,3),2),minmax(0,1fr))}}
@media (max-width:560px){.wtl-sommaire.cartes .sommaire-lecons{grid-template-columns:minmax(0,1fr)}}
.wtl-sommaire.cartes .sommaire-chapitre{grid-column:1/-1}
.wtl-sommaire.cartes .sommaire-lecon{display:flex;flex-direction:column;background:var(--carte-fond);border:1px solid var(--filet);
  border-radius:var(--carte-rayon);padding:calc(var(--gouttiere) * .7);color:var(--carte-encre)}
.wtl-sommaire.cartes .sommaire-lien{display:block}
.wtl-sommaire.cartes .sommaire-duree{margin:4px 0 0;display:block}
.wtl-sommaire.cartes .sommaire-resume{color:var(--carte-encre-2)}
.wtl-sommaire.cartes .sommaire-vignette{width:100%;margin-bottom:8px}
.wtl-sommaire .sommaire-action{margin:10px 0 0}
/* La couleur est redite ici : « .wtl button{color:inherit} » l'emporte sur « .wtl-bouton »,
   et tous les autres boutons de la gamme sont des liens. Celui-ci est un vrai bouton. */
.wtl-cours .quiz-invite .wtl-bouton{padding:6px 14px;font-size:calc(13px * var(--echelle));white-space:nowrap;background:var(--accent);border-color:var(--accent);color:#fff}
.wtl-cours .lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wtl-cours .lecteur[hidden]{display:none}
.wtl-cours .lecteur .attente{position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,#1a1f1e 50%,#000 100%)}
.wtl-cours .lecteur .erreur{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--scene-encre-2);padding:24px;text-align:center}
.wtl-cours .verrou{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:var(--gouttiere);text-align:center;background:var(--scene-2);color:var(--scene-encre)}
.wtl-cours .verrou[hidden]{display:none}
.wtl-cours .verrou .cadenas{font-size:calc(34px * var(--echelle))}
.wtl-cours .verrou-texte{max-width:34em;color:var(--scene-encre-2)}
/* Une leçon verrouillée s'efface un peu, mais reste lisible : sa couleur vient du PROGRAMME
   (dont le fond se règle à part), pas du texte général — gris foncé sur un programme bleu
   nuit, les titres disparaissaient (capture de Laurent, 17/09/2026). */
.wtl-cours .lecon.verrouillee .titre{color:var(--prog-encre);opacity:.6}   /* la couleur des titres du programme, atténuée : lisible quel que soit le fond choisi */
.wtl-cours .lecon .cadenas{font-size:calc(11px * var(--echelle))}
.wtl-cours .pastille.libre{color:var(--accent);background:var(--accent-2)}
.wtl-cours .en-cours{padding:calc(var(--gouttiere) * .9) var(--gouttiere) var(--gouttiere)}
.wtl-cours .sur-titre{display:block;font-size:calc(11px * var(--echelle));letter-spacing:.12em;text-transform:uppercase;color:var(--scene-encre-2)}
.wtl-cours .titre-lecon{margin:4px 0 8px;font-size:calc(20px * var(--echelle));line-height:1.25;font-weight:700;color:var(--scene-encre);overflow-wrap:anywhere}
.wtl-cours .description{color:var(--scene-encre-2);font-size:calc(14px * var(--echelle))}
/* ---- Les quiz, sous le lecteur ---- */
.wtl-cours .quiz{margin-top:var(--gouttiere)}
.wtl-cours .quiz[hidden]{display:none}
.wtl-cours .quiz-bloc{background:var(--scene-2);border-radius:var(--rayon);padding:calc(var(--gouttiere) * .9) var(--gouttiere);margin-bottom:var(--gouttiere);color:var(--scene-encre)}
.wtl-cours .quiz-titre{margin:0 0 4px;font-size:calc(17px * var(--echelle));font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wtl-cours .quiz-note{margin:0 0 8px;font-size:calc(13px * var(--echelle));color:var(--scene-encre-2)}
.wtl-cours .quiz-q{border:0;margin:0;padding:calc(var(--gouttiere) * .6) 0 0;border-top:1px solid rgba(255,255,255,.08)}
.wtl-cours .quiz-q legend{font-weight:600;font-size:calc(15px * var(--echelle));padding:0;margin-bottom:6px;float:left;width:100%}
.wtl-cours .quiz-multi{display:block;font-weight:400;font-size:calc(12px * var(--echelle));color:var(--scene-encre-2)}
.wtl-cours .quiz-choix{display:flex;align-items:flex-start;gap:10px;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:calc(14px * var(--echelle));clear:both}
.wtl-cours .quiz-choix:hover{background:rgba(255,255,255,.06)}
.wtl-cours .quiz-choix input{margin:3px 0 0;accent-color:var(--accent)}
.wtl-cours .corrige .quiz-choix{cursor:default}
.wtl-cours .corrige .quiz-choix.bonne{background:rgba(63,185,120,.18);box-shadow:inset 3px 0 0 #3FB978}
.wtl-cours .corrige .quiz-choix.fausse{background:rgba(217,58,43,.18);box-shadow:inset 3px 0 0 #D93A2B;text-decoration:line-through}
.wtl-cours .corrige .quiz-q.partiel legend{color:#F0C36B}
.wtl-cours .quiz-verdict{margin-left:10px;font-weight:700;color:#3FB978}
.wtl-cours .quiz-q.faux .quiz-verdict{color:#F0A08C}
.wtl-cours .quiz-q.partiel .quiz-verdict{color:#F0C36B}
.wtl-cours .quiz-note.progres{color:var(--scene-encre);font-weight:600}
.wtl-cours .quiz-note.attente{padding:10px 12px;border-radius:6px;background:rgba(255,255,255,.06)}
.wtl-cours .quiz-explication{margin:6px 0 0 10px;font-size:calc(13px * var(--echelle));color:var(--scene-encre-2);border-left:2px solid var(--accent);padding-left:10px}
.wtl-cours .quiz-pied{margin-top:calc(var(--gouttiere) * .7);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wtl-cours .quiz-pied .quiz-note{margin:0}
.wtl-cours .quiz-message{margin:0;font-size:calc(13px * var(--echelle));color:#F0A08C}
.wtl-cours .quiz-score{margin:0;font-size:calc(15px * var(--echelle));flex:1 1 100%}
.wtl-cours .quiz-score.reussi strong{color:#3FB978}
.wtl-cours .quiz-score:not(.reussi) strong{color:#F0A08C}
.wtl-cours .quiz-bloc .pastille.reussi{color:#fff;background:#3FB978}
.wtl-cours .wtl-bouton.secondaire{background:transparent;border:1.5px solid var(--scene-encre-2);color:var(--scene-encre)}
.wtl-cours .lecon .pastille.quiz.reussi{color:var(--carte-pastille);background:var(--carte-pastille-fond)}
.wtl-cours .lecons li.fin .lecon{border-top:1px solid var(--filet);margin-top:6px}
.wtl-cours .lecons li.fin .rang{color:var(--prog-actif-filet)}
.wtl-cours .description p{margin:0 0 .6em}
.wtl-cours .description p:last-child{margin-bottom:0}

.wtl-cours .programme{display:flex;flex-direction:column;min-width:0;max-height:none;background:var(--prog-fond);color:var(--prog-encre);
  /* Un filet sur chaque bord : ceux qui touchent le bord de la brique sont rognés par son
     overflow, seul le filet entre lecteur et programme reste, où qu'il soit. */
  box-shadow:-1px 0 0 var(--filet),1px 0 0 var(--filet),0 -1px 0 var(--filet)}
@media (min-width:901px){.wtl-cours .programme{max-height:min(80vh,var(--programme-hauteur))}}
.wtl-cours .programme-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:calc(var(--gouttiere) * .7) calc(var(--gouttiere) * .8) calc(var(--gouttiere) * .5);border-bottom:1px solid var(--filet)}
.wtl-cours .programme-titre{font-weight:700;font-size:calc(14px * var(--echelle) * var(--prog-section-taille));letter-spacing:.04em;text-transform:uppercase;color:var(--prog-section)}
.wtl-cours .compteur{font-size:calc(13px * var(--echelle));color:var(--prog-encre-2);white-space:nowrap}
.wtl-cours .lecons{list-style:none;margin:0;padding:6px 0;overflow:auto;flex:1}
.wtl-cours .lecons li{margin:0;padding:0}
.wtl-cours .lecons li.chapitre{padding:calc(var(--gouttiere) * .7) calc(var(--gouttiere) * .8) 6px;font-size:calc(12px * var(--echelle) * var(--prog-section-taille));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--prog-section)}
.wtl-cours .lecons li + li .lecon{border-top:var(--prog-separateur) solid var(--filet)}
.wtl-cours .lecons li.chapitre + li .lecon{border-top:0}
.wtl-cours .pastille{font-weight:600;color:var(--encre-2);background:var(--filet);border-radius:999px;padding:1px 8px;font-size:calc(11px * var(--echelle))}
.wtl-cours .lecon.presentation .rang{color:var(--accent)}
.wtl-cours .lecon{display:grid;grid-template-columns:auto var(--vignette) minmax(0,1fr);align-items:center;gap:12px;
  width:100%;text-align:left;padding:8px calc(var(--gouttiere) * .8);border:0;background:transparent;cursor:pointer;
  border-left:3px solid transparent}
.wtl-cours .lecon:hover{background:var(--prog-actif-fond)}
.wtl-cours .lecon[aria-current="true"]{background:var(--prog-actif-fond);border-left-color:var(--prog-actif-filet)}
.wtl-cours .lecon .rang{width:1.6em;text-align:right;font-variant-numeric:tabular-nums;color:var(--prog-encre-2);font-size:calc(13px * var(--echelle))}
/* Ce que le programme ne montre pas (classes « sans-… » posées par le PHP). */
.wtl-cours.sans-numeros .lecon .rang{display:none}
.wtl-cours.sans-numeros .lecon{grid-template-columns:var(--vignette) minmax(0,1fr)}
.wtl-cours.sans-vignettes .lecon .vignette{display:none}
.wtl-cours.sans-vignettes .lecon{grid-template-columns:auto minmax(0,1fr)}
.wtl-cours.sans-numeros.sans-vignettes .lecon{grid-template-columns:minmax(0,1fr)}
.wtl-cours.sans-durees .lecon .duree{display:none}
.wtl-cours.sans-pastilles .lecon .pastille,.wtl-cours.sans-pastilles .lecon .vu{display:none}
.wtl-cours.sans-sections .lecons li.chapitre{display:none}
.wtl-cours.sans-progression .lecon .progression{display:none}
.wtl-cours .lecon .vignette{position:relative;display:block;aspect-ratio:16/9;background:var(--scene-2);
  border-radius:4px;overflow:hidden}
.wtl-cours .lecon .vignette img{display:block;width:100%;height:100%;object-fit:cover}
.wtl-cours .progression{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.35)}
.wtl-cours .progression i{display:block;height:100%;background:var(--accent)}
.wtl-cours .lecon .texte{display:flex;flex-direction:column;gap:2px;min-width:0}
.wtl-cours .lecon .titre{font-weight:var(--prog-graisse);font-size:calc(14px * var(--echelle) * var(--prog-titre));line-height:var(--prog-interligne);text-transform:var(--prog-casse);color:var(--prog-encre);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:var(--prog-lignes);-webkit-box-orient:vertical;overflow:hidden}
.wtl-cours .lecon .meta{font-size:calc(12px * var(--echelle));color:var(--prog-encre-2);display:flex;gap:8px;align-items:center}
.wtl-cours .vu{font-weight:600;color:var(--accent);background:var(--accent-2);border-radius:999px;padding:1px 8px;font-size:calc(11px * var(--echelle))}

/* ---- Invitation à se connecter, sous le programme ---- */
.wtl-cours .invitation{margin:0;padding:12px calc(var(--gouttiere) * .8);border-top:1px solid var(--filet);font-size:calc(13px * var(--echelle))}
.wtl-cours .invitation a{color:var(--accent);text-decoration:none;font-weight:600}

/* ---- Compte : formulaires et espace ---- */
.wtl-compte{margin:var(--espace) 0}
.wtl-compte .deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.wtl-formulaire{background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);padding:var(--gouttiere) calc(var(--gouttiere) * 1.1)}
.wtl-formulaire h3{margin:0 0 12px;font-size:calc(18px * var(--echelle))}
.wtl-formulaire .champ{margin:0 0 12px}
.wtl-formulaire .champ label{display:block;font-size:calc(13px * var(--echelle));font-weight:600;color:var(--encre-2)}
.wtl-formulaire input[type="text"],.wtl-formulaire input[type="email"],.wtl-formulaire input[type="password"]{
  display:block;width:100%;margin-top:4px;padding:9px 11px;font:inherit;border:1px solid var(--filet);border-radius:6px;background:#fff;color:var(--encre)}
.wtl-formulaire .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wtl-formulaire .consentement label{display:flex;gap:10px;align-items:flex-start;font-weight:400;line-height:1.4}
.wtl-formulaire .consentement input{margin-top:3px;flex:none;accent-color:var(--accent)}
.wtl-formulaire .oubli{margin-left:14px;font-size:calc(13px * var(--echelle));color:var(--encre-2)}
.wtl-bouton{font:inherit;font-weight:600;font-size:calc(14px * var(--echelle));padding:9px 18px;border-radius:999px;border:1.5px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
.wtl-bouton.secondaire{background:var(--accent-2);color:var(--accent)}
.wtl-bouton.discret{background:transparent;border-color:var(--filet);color:var(--encre-2);font-size:calc(13px * var(--echelle));padding:6px 14px}
.wtl-message{padding:10px 14px;border-radius:6px;background:var(--accent-2);color:var(--accent);font-weight:600;margin:0 0 16px}
.wtl-message.erreur{background:#F8E9E1;color:#8A3A16}
.wtl-espace .entete{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.wtl-espace .bonjour{font-size:calc(20px * var(--echelle));font-weight:700}
.wtl-espace h3{font-size:calc(16px * var(--echelle));margin:22px 0 10px}
.wtl-espace .vide{color:var(--encre-2)}
.wtl-espace .mes-cours{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wtl-espace .mes-cours a{display:grid;gap:6px;padding:calc(var(--gouttiere) * .7) calc(var(--gouttiere) * .8);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);text-decoration:none;color:inherit}
.wtl-espace .mes-cours .titre{font-weight:700}
.wtl-espace .mes-cours .barre{display:block;height:6px;border-radius:3px;background:var(--filet);overflow:hidden}
.wtl-espace .mes-cours .barre i{display:block;height:100%;background:var(--accent)}
.wtl-espace .mes-cours .detail{font-size:calc(13px * var(--echelle));color:var(--encre-3)}
.wtl-espace .description{font-size:calc(12px * var(--echelle));color:var(--encre-3);margin:0 0 10px}

/* ---- L'achat ---- */
.wtl-achat{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;margin:var(--espace) 0;padding:calc(var(--gouttiere) * .8) var(--gouttiere);
  background:var(--carte);border:1px solid var(--filet);border-left:4px solid var(--accent);border-radius:var(--rayon)}
.wtl-achat .prix{font-size:calc(24px * var(--echelle));font-weight:700}
.wtl-achat .detail{flex:1 1 220px;font-size:calc(14px * var(--echelle));color:var(--encre-2)}
.wtl-achat .wtl-bouton{text-decoration:none;white-space:nowrap}
.wtl-achat .boutons{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.wtl-achat .paliers{flex:1 0 100%;font-size:calc(13px * var(--echelle));color:var(--accent);font-weight:600}
.wtl-achat.etat-acquis{border-left-color:var(--accent)}
.wtl-achat.etat-acquis .prix{font-size:calc(18px * var(--echelle));color:var(--accent)}
.wtl-espace .mes-cours .pastille{margin-left:8px;font-size:calc(11px * var(--echelle));font-weight:600;color:var(--accent);background:var(--accent-2);border-radius:999px;padding:1px 8px;vertical-align:middle}
.wtl-catalogue .meta .prix{font-weight:700;color:var(--carte-encre)}
/* Un cours remisé : le prix normal barré, le prix demandé, la remise en pastille. */
.wtl .prix-barre{text-decoration:line-through;opacity:.65;font-weight:400;margin-right:4px}
.wtl .remise-pastille{display:inline-block;font-size:.8em;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--carte-pastille-fond);color:var(--carte-pastille);margin-left:4px;vertical-align:middle}
.wtl-catalogue .badge s{font-weight:400;opacity:.7;margin-left:4px}
.wtl-catalogue .meta .prix.gratuit{color:var(--carte-pastille)}

/* ---- Autres cours ---- */
.wtl-autres-cours{margin:var(--espace) 0;padding:var(--gouttiere);background:var(--autres-fond);border-radius:var(--rayon)}
.wtl-autres-cours .titre-section{margin:0 0 12px;font-size:calc(16px * var(--echelle) * var(--autres-titre-taille));font-weight:700;color:var(--autres-titre)}
.wtl-autres-cours .vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--autres-vignette)),1fr));gap:16px}
.wtl-autres-cours .vignette-cours{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--carte-encre);
  background:var(--carte-fond);border-radius:var(--carte-rayon);overflow:hidden;padding-bottom:10px}
.wtl-autres-cours .vignette-cours > .titre,.wtl-autres-cours .vignette-cours > .meta{padding:0 10px}
.wtl-autres-cours .image{position:relative;display:block;aspect-ratio:var(--carte-image-ratio);background:var(--carte-fond);overflow:hidden;flex:var(--carte-image-flex,0 0 auto);min-height:0}
.wtl-autres-cours .image img{display:block;width:100%;height:100%;object-fit:var(--carte-image-ajust)}
.wtl-autres-cours .progression{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.35)}
.wtl-autres-cours .progression i{display:block;height:100%;background:var(--accent)}
.wtl-autres-cours .titre{font-weight:var(--carte-graisse);font-size:calc(14px * var(--echelle) * var(--carte-titre));line-height:var(--carte-interligne);text-transform:var(--carte-casse);
  min-height:calc(var(--autres-lignes) * var(--carte-interligne) * 1em);display:-webkit-box;-webkit-line-clamp:var(--autres-lignes);-webkit-box-orient:vertical;overflow:hidden}
.wtl-autres-cours .meta{font-size:calc(12px * var(--echelle));color:var(--carte-encre-2)}
.wtl-autres-cours .vignette-cours:hover .titre{color:var(--carte-pastille)}

/* ---- Une sélection de cours, titrée ---- */
.wtl-selection{margin:0}
.wtl-selection .titre-section{margin:0 0 calc(var(--espace) * .5);font-size:calc(20px * var(--echelle));font-weight:700;color:var(--encre)}
/* Une sélection posée dans une mise en page : pas de marges de catalogue, elle s'aligne sur
   ce qui l'entoure ; à moins de 560 px, deux colonnes au plus. */
.wtl-catalogue.selection{margin:0}
@media (max-width:900px){.wtl-catalogue.selection{grid-template-columns:repeat(min(var(--wtl-colonnes,3),2),minmax(0,1fr))}}
@media (max-width:560px){.wtl-catalogue.selection{grid-template-columns:minmax(0,1fr)}}

/* ---- Les repères ---- */
.wtl-reperes dl{display:flex;flex-wrap:wrap;gap:0;margin:var(--espace) 0;padding:0;border:1px solid var(--repere-bord);border-radius:var(--repere-rayon);background:var(--repere-fond);color:var(--repere-valeur);overflow:hidden}
.wtl-reperes .repere{flex:1 1 140px;margin:0;padding:calc(var(--gouttiere) * .6) calc(var(--gouttiere) * .8);border-right:var(--repere-separateur) solid var(--repere-bord);min-width:0}
.wtl-reperes .repere:last-child{border-right:0}
/* En colonne (classe posée d'après le réglage) : les cases empilées, filet horizontal. */
.wtl-reperes.colonne dl{flex-direction:column;flex-wrap:nowrap}
.wtl-reperes.colonne .repere{flex:0 0 auto;border-right:0;border-bottom:var(--repere-separateur) solid var(--repere-bord)}
.wtl-reperes.colonne .repere:last-child{border-bottom:0}
.wtl-reperes dt{font-size:calc(11px * var(--echelle));letter-spacing:.08em;text-transform:uppercase;color:var(--repere-libelle);margin:0 0 2px}
.wtl-reperes dd{margin:0;font-weight:600;font-size:calc(15px * var(--echelle));color:var(--repere-valeur);overflow-wrap:anywhere}

/* ---- Le formateur ---- */
.wtl-formateur{display:flex;gap:18px;align-items:flex-start;margin:var(--espace) 0;padding:calc(var(--gouttiere) * .9) var(--gouttiere);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon)}
.wtl-formateur .photo{width:72px;height:72px;border-radius:50%;flex:none;object-fit:cover}
.wtl-formateur .texte{display:flex;flex-direction:column;gap:4px;min-width:0}
.wtl-formateur .etiquette{font-size:calc(11px * var(--echelle));letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.wtl-formateur .nom{font-weight:700;font-size:calc(17px * var(--echelle))}
.wtl-formateur .bio{margin:4px 0 0;font-size:calc(14px * var(--echelle));color:var(--encre-2)}
.wtl-formateur .lien{margin-top:6px;font-size:calc(13px * var(--echelle));font-weight:600;color:var(--accent);text-decoration:none}

/* ---- Les filtres du catalogue ---- */
/* Trois groupes possibles : catégories, gratuits ou payants, recherche ; ils se suivent et
   passent à la ligne quand la place manque. L'aspect vient des variables --filtre-*. */
.wtl-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:var(--filtre-espace) calc(var(--filtre-espace) + 10px);margin:var(--espace) 0 0}
.wtl-filtres .groupe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--filtre-espace)}
/* Le champ suit les boutons et prend la place qui reste, jusqu'à 360 px ; quand il passe à la
   ligne, il part de la gauche comme eux. Même fond, texte et forme que les boutons. */
.wtl-filtres .groupe-recherche{flex:1 1 220px;max-width:360px}
.wtl-filtres .filtre{font:inherit;font-size:calc(13px * var(--echelle) * var(--filtre-taille));font-weight:var(--filtre-graisse);text-transform:var(--filtre-casse);padding:var(--filtre-hauteur) calc(var(--filtre-hauteur) * 2.3);border-radius:var(--filtre-rayon);cursor:pointer;
  border:var(--filtre-bord-epaisseur) solid var(--filtre-bord);background:var(--filtre-fond);color:var(--filtre-encre);line-height:1.3}
.wtl-filtres .filtre:hover{border-color:var(--filtre-actif-encre)}
.wtl-filtres .filtre.actif{border-color:var(--filtre-actif-encre);background:var(--filtre-actif-fond);color:var(--filtre-actif-encre)}
.wtl-filtres .recherche{font:inherit;font-size:calc(13px * var(--echelle) * var(--filtre-taille));font-weight:var(--filtre-graisse);padding:var(--filtre-hauteur) calc(var(--filtre-hauteur) * 2.3);border-radius:var(--filtre-rayon);
  border:var(--filtre-bord-epaisseur) solid var(--filtre-bord);background:var(--filtre-fond);color:var(--filtre-encre);width:100%;line-height:1.3;margin:0;-webkit-appearance:none;appearance:none}
.wtl-filtres .recherche::placeholder{color:var(--filtre-encre);opacity:.7}
.wtl-filtres .recherche:focus{border-color:var(--filtre-actif-encre);background:var(--filtre-actif-fond);color:var(--filtre-actif-encre);outline:none}
.wtl-filtres .recherche:focus::placeholder{color:var(--filtre-actif-encre)}
.wtl-filtres .tri{font:inherit;font-size:calc(13px * var(--echelle) * var(--filtre-taille));font-weight:var(--filtre-graisse);text-transform:var(--filtre-casse);padding:var(--filtre-hauteur) 32px var(--filtre-hauteur) calc(var(--filtre-hauteur) * 2.3);border-radius:var(--filtre-rayon);cursor:pointer;
  border:var(--filtre-bord-epaisseur) solid var(--filtre-bord);background:var(--filtre-fond);color:var(--filtre-encre);line-height:1.3;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.wtl-filtres .compte{font-size:calc(13px * var(--echelle));color:var(--encre-3);white-space:nowrap}
/* Les filtres en colonne, à gauche du catalogue : groupes titrés, boutons empilés, nombre
   de cours par catégorie. Sur petit écran, la colonne repasse au-dessus. */
.wtl-catalogue-ensemble{display:grid;grid-template-columns:var(--filtre-colonne) minmax(0,1fr);gap:var(--espace);align-items:start}
.wtl-catalogue-ensemble > .wtl-catalogue{margin-top:var(--espace)}
/* Chaque bloc à sa place, sans rangement automatique : les filtres occupent la première
   colonne sur toute la hauteur ; pages du haut, grille et pages du bas s'empilent dans la
   seconde. Sinon, une navigation au-dessus prenait la case à droite des filtres et poussait
   la grille sous les filtres (capture de Laurent, 16/09). */
.wtl-catalogue-ensemble > .wtl-filtres.colonne{grid-column:1;grid-row:1 / span 3}
.wtl-catalogue-ensemble > .wtl-catalogue,.wtl-catalogue-ensemble > .wtl-pages{grid-column:2}
.wtl-catalogue-ensemble > .wtl-pages.haut{margin-top:var(--espace);margin-bottom:0}
.wtl-catalogue-ensemble > .wtl-pages.haut:not([hidden]) + .wtl-catalogue{margin-top:8px}
@media (max-width:900px){
  .wtl-catalogue-ensemble > .wtl-filtres.colonne{grid-column:1;grid-row:auto}
  .wtl-catalogue-ensemble > .wtl-catalogue,.wtl-catalogue-ensemble > .wtl-pages{grid-column:1}
}
.wtl-filtres.colonne{flex-direction:column;align-items:stretch;gap:calc(var(--espace) * .8);position:sticky;top:16px;margin-top:var(--espace);min-width:0}
.wtl-filtres.colonne .groupe{flex-direction:column;align-items:stretch;gap:calc(var(--filtre-espace) / 2);min-width:0}
/* Une colonne étroite : les boutons se replient sur deux lignes au lieu de déborder sous la grille. */
.wtl-filtres.colonne .groupe{width:100%}
.wtl-filtres.colonne .filtre,.wtl-filtres.colonne .recherche,.wtl-filtres.colonne .tri{width:100%;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
.wtl-filtres.colonne .groupe-recherche{flex:0 0 auto;max-width:none}
.wtl-filtres.colonne .groupe-titre{font-size:calc(11px * var(--echelle) * var(--filtre-titre-taille));font-weight:var(--filtre-titre-graisse);letter-spacing:var(--filtre-titre-lettres);text-transform:var(--filtre-titre-casse);color:var(--filtre-titre);margin:0 0 var(--filtre-titre-marge);padding-left:2px}
.wtl-filtres.colonne .filtre{text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:calc(var(--filtre-rayon) / 3 + 4px)}
.wtl-filtres.colonne .filtre .nombre{font-weight:400;font-size:.85em;opacity:.7;font-variant-numeric:tabular-nums}
.wtl-filtres.colonne .groupe-compte{order:99;justify-content:flex-start}
@media (max-width:900px){
  .wtl-catalogue-ensemble{grid-template-columns:minmax(0,1fr)}
  .wtl-filtres.colonne{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px}
  .wtl-filtres.colonne .groupe{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--filtre-espace)}
  .wtl-filtres.colonne .groupe-titre{width:100%;margin:0}
  .wtl-filtres.colonne .groupe-recherche{flex:1 1 220px;max-width:360px}
}
/* Les pages du catalogue : mêmes boutons que les filtres, alignement réglable. */
.wtl-pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:var(--pages-alignement);gap:var(--filtre-espace);margin:var(--espace) 0 0}
.wtl-pages.haut{margin-bottom:calc(var(--espace) * -1 + 8px);display:var(--pages-haut,none)}
.wtl-pages.haut[hidden]{display:none}
.wtl-pages[hidden]{display:none}
.wtl-pages .filtre{font:inherit;font-size:calc(13px * var(--echelle) * var(--filtre-taille));font-weight:var(--filtre-graisse);padding:var(--filtre-hauteur) calc(var(--filtre-hauteur) * 2.3);border-radius:var(--filtre-rayon);cursor:pointer;
  border:var(--filtre-bord-epaisseur) solid var(--filtre-bord);background:var(--filtre-fond);color:var(--filtre-encre);line-height:1.3;min-width:2.4em}
.wtl-pages .filtre:hover{border-color:var(--filtre-actif-encre)}
.wtl-pages .filtre.actif{border-color:var(--filtre-actif-encre);background:var(--filtre-actif-fond);color:var(--filtre-actif-encre)}
.wtl-pages .filtre:disabled{opacity:.4;cursor:default}
.wtl-pages .points{color:var(--encre-3);padding:0 4px}
.wtl-catalogue .vide{grid-column:1 / -1;margin:0;padding:calc(var(--gouttiere) * 1.5) 0;text-align:center;color:var(--encre-3);font-size:calc(14px * var(--echelle))}
.wtl-catalogue .vide .tout-catalogue{margin:10px 0 0}
.wtl-catalogue .vide[hidden]{display:none}
.wtl-catalogue .vide .tout-catalogue{display:inline-block;margin-left:10px;font:inherit;font-size:calc(13px * var(--echelle) * var(--filtre-taille));font-weight:600;padding:6px 14px;border-radius:var(--filtre-rayon);cursor:pointer;
  border:1.5px solid var(--filtre-actif-encre);background:var(--filtre-actif-fond);color:var(--filtre-actif-encre)}
.wtl-catalogue .carte[hidden]{display:none}
/* Sans image, rien ne justifie des hauteurs différentes : les cartes d'une ligne s'alignent,
   et le texte respire un peu plus (capture de Laurent, 15/09). */
.wtl-catalogue.sans-image .corps{padding:var(--gouttiere);gap:8px}
/* Bande au survol seulement : elle se pose sur le bas de l'image, un peu translucide, et
   monte en fondu. Sans survol possible (écran tactile), elle reste sous l'image. */
.wtl-catalogue.bande-survol .carte{position:relative}
.wtl-catalogue.bande-survol .corps{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--carte-fond) 88%,transparent);
  opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.wtl-catalogue.bande-survol .carte:hover .corps,.wtl-catalogue.bande-survol .carte:focus-visible .corps{opacity:1;transform:none}
@media (hover:none){.wtl-catalogue.bande-survol .corps{position:static;opacity:1;transform:none;background:none;pointer-events:auto}}

/* ---- Le catalogue ---- */
.wtl-catalogue{display:grid;grid-template-columns:repeat(var(--wtl-colonnes,3),minmax(0,1fr));gap:var(--espace);margin:var(--espace) 0}
@media (max-width:900px){.wtl-catalogue{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wtl-catalogue{grid-template-columns:minmax(0,1fr)}}
/* En rangées : une par catégorie, titrée, qui défile de côté ; autant de cartes visibles
   que de colonnes, la suivante dépasse un peu pour dire qu'il y en a d'autres. */
.wtl-catalogue.rangees{display:block}
.wtl-catalogue .rangee{margin:0 0 calc(var(--espace) * 1.25)}
.wtl-catalogue .rangee[hidden]{display:none}
.wtl-catalogue .rangee-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 calc(var(--espace) * .5)}
.wtl-catalogue .rangee-titre{margin:0;font-size:calc(20px * var(--echelle));font-weight:700;color:var(--encre)}
/* Les flèches d'une rangée, montrées par le script seulement quand elle déborde. */
.wtl-catalogue .rangee-nav{display:flex;gap:6px}
.wtl-catalogue .rangee-nav[hidden]{display:none}
.wtl-catalogue .rangee-nav button{font:inherit;font-size:calc(18px * var(--echelle));line-height:1;width:calc(32px * var(--echelle));height:calc(32px * var(--echelle));padding:0 0 3px;cursor:pointer;
  border:1.5px solid var(--filtre-bord);border-radius:var(--filtre-rayon);background:var(--filtre-fond);color:var(--filtre-encre)}
.wtl-catalogue .rangee-nav button:hover{border-color:var(--filtre-actif-encre);background:var(--filtre-actif-fond);color:var(--filtre-actif-encre)}
.wtl-catalogue .rangee-nav button:disabled{opacity:.35;cursor:default}
/* Les cartes d'une rangée ont la largeur des colonnes de la mosaïque ; la suite se devine
   à la barre de défilement et aux flèches. */
.wtl-catalogue .defile{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--espace) * (var(--wtl-colonnes,3) - 1)) / var(--wtl-colonnes,3));
  gap:var(--espace);overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.wtl-catalogue .defile .carte{scroll-snap-align:start}
/* Un filtre actif en rangées : les résultats se regroupent en une seule grille, sans titres
   de catégorie ni flèches — le bouton choisi dit déjà où l'on est. */
.wtl-catalogue.rangees.compacte{display:grid;grid-template-columns:repeat(var(--wtl-colonnes,3),minmax(0,1fr));gap:var(--espace)}
.wtl-catalogue.rangees.compacte .rangee,.wtl-catalogue.rangees.compacte .defile{display:contents}
/* « display » posé ici l'emporte sur le « display:none » que le navigateur donne à
   l'attribut « hidden » : sans cette ligne, une rangée masquée laisse voir ses cartes. */
.wtl-catalogue.rangees.compacte .rangee[hidden],.wtl-catalogue.rangees.compacte .defile[hidden]{display:none}
/* Le conseil d'un quiz libre quand il propose deux chemins : deux boutons, le second
   en contour — sauf « au même niveau », où le script ne pose pas la classe « secondaire ». */
.ql-chemins{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.ql-chemins .wtl-bouton{flex:0 1 auto}
.ql-chemins .wtl-bouton.secondaire{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px currentColor}
.wtl-catalogue.rangees.compacte .rangee-tete{display:none}
.wtl-catalogue.rangees.compacte .vide{grid-column:1 / -1}
@media (max-width:900px){.wtl-catalogue.rangees.compacte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wtl-catalogue.rangees.compacte{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.wtl-catalogue .defile{grid-auto-columns:calc((100% - var(--espace)) / 2)}}
@media (max-width:560px){.wtl-catalogue .defile{grid-auto-columns:100%}}
.wtl-catalogue .carte{display:flex;flex-direction:column;background:var(--carte-fond);border:1px solid var(--filet);
  border-radius:var(--carte-rayon);overflow:hidden;text-decoration:none;color:var(--carte-encre);transition:transform .15s,box-shadow .15s}
.wtl-catalogue .carte:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
/* Les cartes d'une ligne ont la même hauteur (la grille les étire). Images au format de
   chacune : la case de l'image grandit avec la carte (--carte-image-flex) et l'image la
   remplit, rognée d'un peu si elle est moins haute que sa voisine ; la bande de texte, elle,
   garde la hauteur de son contenu, avec deux lignes réservées au titre. */
.wtl-catalogue .vignette{display:block;position:relative;aspect-ratio:var(--carte-image-ratio);background:var(--carte-fond);flex:var(--carte-image-flex,0 0 auto);min-height:0;overflow:hidden}
/* L'étiquette « Gratuit » ou le prix, posée sur l'image : visible même quand la bande
   n'apparaît qu'au survol. Couleurs des pastilles de la carte. */
.wtl-catalogue .badge{position:absolute;top:10px;right:10px;font-size:calc(12px * var(--echelle));font-weight:700;line-height:1;padding:6px 10px;border-radius:999px;
  background:var(--carte-pastille-fond);color:var(--carte-pastille);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.wtl-catalogue .vignette img{display:block;width:100%;height:100%;object-fit:var(--carte-image-ajust)}
.wtl-catalogue .corps{display:flex;flex-direction:column;gap:6px;padding:calc(var(--gouttiere) * .7) calc(var(--gouttiere) * .8) calc(var(--gouttiere) * .8)}
.wtl-catalogue .titre{font-weight:var(--carte-graisse);font-size:calc(16px * var(--echelle) * var(--carte-titre));line-height:var(--carte-interligne);text-transform:var(--carte-casse);
  min-height:calc(var(--carte-lignes) * var(--carte-interligne) * 1em);display:-webkit-box;-webkit-line-clamp:var(--carte-lignes);-webkit-box-orient:vertical;overflow:hidden}
.wtl-catalogue .niveau{font-size:calc(11px * var(--echelle));font-weight:600;color:var(--carte-pastille);background:var(--carte-pastille-fond);border-radius:999px;padding:1px 8px}
.wtl-catalogue .resume{font-size:calc(13px * var(--echelle));color:var(--carte-encre-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* La ligne du bas ne se replie jamais : une carte étroite coupe le détail par des points de
   suspension plutôt que de grandir (rangées, capture de Laurent, 15/09). */
.wtl-catalogue .meta{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;font-size:calc(12px * var(--echelle));color:var(--carte-encre-2);margin-top:auto;padding-top:4px;white-space:nowrap;min-width:0}
.wtl-catalogue .meta .prix,.wtl-catalogue .meta .niveau{flex:0 0 auto}
.wtl-catalogue .meta .detail{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---- Le panier ---- */
.wtl .wtl-panier-ajout{background:var(--panier-ajout-fond);color:var(--panier-ajout-encre);border-color:var(--panier-ajout-bord)}
.wtl .wtl-panier-ajout.dedans{background:var(--accent);border-color:var(--accent);color:#fff}
.wtl .wtl-panier-voir{font-size:calc(13px * var(--echelle));color:var(--accent);font-weight:600;white-space:nowrap}
.wtl .wtl-panier-voir[hidden]{display:none}
.wtl-cours .verrou .panier{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.wtl-cours .verrou .wtl-panier-ajout{background:transparent;border-color:var(--scene-encre-2);color:var(--scene-encre)}   /* sur la scène sombre, toujours en contour */
.wtl-cours .verrou .wtl-panier-ajout.dedans{background:var(--accent);border-color:var(--accent);color:#fff}
.wtl-cours .verrou .wtl-panier-voir{color:var(--scene-encre)}
/* Le lien d'en-tête : un libellé et le nombre de cours, caché à zéro. */
.wtl-panier-bouton{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--filet);border-radius:999px;background:var(--panier-bouton-fond);color:var(--panier-bouton-encre);
  font:600 calc(14px * var(--echelle))/1.3 var(--police);text-decoration:none}
.wtl-panier-bouton .compte{min-width:1.6em;padding:1px 7px;border-radius:999px;background:var(--panier-pastille);color:var(--panier-pastille-encre);font-size:calc(11px * var(--echelle));text-align:center}
.wtl-panier-bouton .compte[data-n="0"]{display:none}
/* La page du panier. */
.wtl-panier{margin:var(--espace) 0;font-family:var(--police);color:var(--encre)}
.wtl-panier .panier-titre{margin:0 0 16px}
.wtl-panier .lignes{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.wtl-panier .ligne{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--filet)}
.wtl-panier .vignette{flex:0 0 var(--panier-vignette);aspect-ratio:16/9;border-radius:calc(var(--rayon) * .6);overflow:hidden;background:var(--scene-2)}
.wtl-panier .vignette img{display:block;width:100%;height:100%;object-fit:cover}
.wtl-panier .corps{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:4px}
.wtl-panier .titre{font-weight:700;color:inherit;text-decoration:none}
.wtl-panier .detail{font-size:calc(13px * var(--echelle));color:var(--encre-2)}
.wtl-panier .prix{font-weight:700;white-space:nowrap}
/* Transparent : lisible sur un thème clair comme sur un thème sombre (la croix suit l'encre). */
.wtl-panier .retirer{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--encre-3);background:transparent;color:var(--encre-2);font:20px/1 var(--police);cursor:pointer;padding:0}
.wtl-panier .retirer:hover{color:#8A3A16;border-color:currentColor}
.wtl-panier .totaux{margin:16px 0 0;margin-left:auto;max-width:360px}
.wtl-panier .ligne-total{display:flex;justify-content:space-between;gap:24px;padding:6px 0;font-size:calc(15px * var(--echelle))}
.wtl-panier .ligne-total.remise{color:var(--panier-remise);font-weight:600}
.wtl-panier .ligne-total.total{color:var(--panier-total);font-size:calc(20px * var(--echelle));font-weight:700;border-top:1px solid var(--filet);margin-top:6px;padding-top:12px}
.wtl-panier .invitation{margin:8px 0 0;font-size:calc(13px * var(--echelle));color:var(--panier-remise);font-weight:600;text-align:right}
.wtl-panier .actions{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;justify-content:flex-end;margin-top:20px}
.wtl-panier .actions form{margin:0}
.wtl-panier .actions .continuer{margin-right:auto;text-decoration:none}   /* à gauche, le paiement reste à droite */
.wtl-panier .actions .detail{flex:1 0 100%;text-align:right}
.wtl-panier .vide{font-size:calc(16px * var(--echelle));color:var(--encre-2)}
.wtl-panier .vide a{color:var(--accent);font-weight:600}
@media (max-width:560px){
  .wtl-panier .ligne{flex-wrap:wrap}
  .wtl-panier .vignette{flex-basis:min(80px,var(--panier-vignette))}
  .wtl-panier .totaux{max-width:none}
}

/* Mon compte : le lien vers la facture d'un cours acheté. */
.wtl-espace .mes-cours .facture{display:inline-block;margin:6px 0 0;font-size:calc(13px * var(--echelle));font-weight:600;color:var(--accent)}

/* ---- Mon compte : les volets, le profil, les achats ---- */
.wtl-espace .volets{display:flex;flex-wrap:wrap;gap:4px 6px;margin:14px 0 4px;border-bottom:1px solid var(--filet)}
.wtl-espace .volets a{padding:8px 14px;border-radius:var(--rayon) var(--rayon) 0 0;font-size:calc(14px * var(--echelle));font-weight:600;color:var(--encre-2);text-decoration:none;border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
.wtl-espace .volets a:hover{color:var(--encre)}
.wtl-espace .volets a.actif{color:var(--accent);background:var(--carte);border-color:var(--filet)}
.wtl-espace:not(.en-volets) .volets{display:none}   /* sans script : pas d'onglets, les sections se suivent */
.wtl-espace.en-volets [data-wtl-panneau] > h3:first-child{position:absolute;left:-9999px}   /* l'onglet dit déjà le titre */
.wtl-espace [data-wtl-panneau][hidden]{display:none}
.wtl-espace.en-volets [data-wtl-panneau]{padding-top:18px}
.wtl-formulaire h4{margin:18px 0 6px;font-size:calc(15px * var(--echelle))}
.wtl-formulaire .description{font-size:calc(13px * var(--echelle));color:var(--encre-2);margin:0 0 12px}
.wtl-formulaire select{display:block;width:100%;margin-top:4px;padding:9px 11px;font:inherit;border:1px solid var(--filet);border-radius:6px;background:#fff;color:var(--encre)}   /* comme les champs de texte */
.wtl-formulaire .deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.wtl-formulaire .deux-champs.etroit-large{grid-template-columns:minmax(110px,1fr) 2.2fr}
.wtl-espace .wtl-formulaire + .wtl-formulaire{margin-top:16px}
.wtl-espace .mes-achats{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wtl-espace .achat{padding:calc(var(--gouttiere) * .7) calc(var(--gouttiere) * .8);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);color:var(--encre)}
.wtl-espace .achat.rembourse{opacity:.7}
.wtl-espace .achat-tete{display:flex;justify-content:space-between;gap:16px;font-weight:700}
.wtl-espace .achat-tete .date{color:var(--encre-2);font-weight:600;font-size:calc(14px * var(--echelle))}
.wtl-espace .achat-cours{margin:8px 0;padding:0 0 0 18px;font-size:calc(15px * var(--echelle))}
.wtl-espace .achat-cours a{color:inherit}
.wtl-espace .achat-pied{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:calc(13px * var(--echelle));color:var(--encre-3)}
.wtl-espace .achat-pied .documents{margin-left:auto;display:flex;gap:16px}
.wtl-espace .achat-pied .documents a{font-weight:600;color:var(--accent)}
.wtl-espace .achat-pied .pastille.rembourse{color:#8A3A16;background:#F8E9E1;border-radius:999px;padding:1px 8px;font-weight:600}
.wtl-panier .ligne-total.taxe{font-size:calc(13px * var(--echelle));color:var(--encre-2);padding-top:0}
@media (max-width:560px){ .wtl-formulaire .deux-champs,.wtl-formulaire .deux-champs.etroit-large{grid-template-columns:1fr} }

/* Un cours que l'élève a déjà : la marque sur l'image, à gauche, et à la place du prix. */
.wtl-catalogue .badge.acquis{right:auto;left:10px;background:var(--accent);color:#fff}
.wtl-catalogue .meta .prix.acquis{color:var(--carte-pastille);font-weight:700}

/* Le bouton du compte, pour un en-tête : jumeau de celui du panier, mêmes couleurs. */
.wtl-compte-bouton{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--filet);border-radius:999px;background:var(--panier-bouton-fond);color:var(--panier-bouton-encre);
  font:600 calc(14px * var(--echelle))/1.3 var(--police);text-decoration:none;white-space:nowrap}
.wtl-compte-bouton .pastille{width:8px;height:8px;border-radius:50%;background:var(--panier-pastille)}   /* le petit point : « vous êtes connecté » */
.wtl-compte-sortie{font:600 calc(13px * var(--echelle))/1.3 var(--police);color:var(--encre-2);margin-left:6px;white-space:nowrap}

/* ---- Les packs ---- */
.wtl-packs{margin:var(--espace) 0}
.wtl-packs-titre,.wtl-pack-titre{margin:0 0 14px;font-family:var(--police);color:inherit;font-size:calc(20px * var(--echelle))}   /* posés sur le fond du thème, pas sur une brique : ils en prennent la couleur */
.wtl-pack-titre{margin-top:var(--espace)}
.wtl-packs .wtl-catalogue{margin:0}
.wtl-catalogue .badge.pack{right:auto;left:10px;background:var(--carte-encre);color:var(--carte-fond)}   /* à l'inverse de la carte : on le repère d'un coup d'œil */
.wtl-catalogue .carte-pack.acquis .badge.pack{background:var(--accent);color:#fff}
.wtl-pack-page{margin:var(--espace) 0}
.wtl-pack-page .wtl-achat{margin-top:0}
/* L'encart sous le panneau d'achat d'un cours : « Ce cours fait partie du pack… ». */
.wtl-pack-encart{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:calc(var(--espace) * -.5) 0 var(--espace);padding:12px var(--gouttiere);
  background:var(--accent-2);color:var(--accent);border-radius:var(--rayon);font:600 calc(14px * var(--echelle))/1.4 var(--police);text-decoration:none}
.wtl-pack-encart .etiquette{flex:none;padding:2px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:calc(12px * var(--echelle));text-transform:uppercase;letter-spacing:.04em}
.wtl-pack-encart .phrase{flex:1 1 260px;color:var(--encre)}
.wtl-pack-encart .voir{flex:none;white-space:nowrap}
.wtl-panier .ligne-pack .detail{color:var(--panier-remise);font-weight:600}
.wtl-espace .achat-cours .du-pack{font-size:calc(12px * var(--echelle));color:var(--encre-3)}

/* ---- L'abonnement : l'offre et ses boutons, ou l'état de l'abonné ---- */
.wtl-abonnement{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin:var(--espace) 0;padding:calc(var(--gouttiere) * .8) var(--gouttiere);background:var(--carte);border:1px solid var(--filet);border-left:4px solid var(--accent);border-radius:var(--rayon)}
.wtl-abonnement .abo-etat{flex:1 1 280px;display:flex;flex-direction:column;gap:4px}
.wtl-abonnement .abo-nom{font-weight:700;font-size:calc(18px * var(--echelle));color:var(--encre)}
.wtl-abonnement .abo-detail{color:var(--encre-2)}
.wtl-abonnement .abo-detail.discret{font-size:calc(13px * var(--echelle));opacity:.85}
.wtl-abonnement .abo-detail.alerte{color:#b32d2e;font-weight:600}
.wtl-abonnement .abo-formules{display:flex;gap:10px;flex-wrap:wrap}
.wtl-abonnement .abo-detail.info{margin-top:4px;padding:8px 12px;border-radius:calc(var(--rayon) * .6);background:var(--accent-2);color:var(--encre)}
.wtl-achat .garder{flex:1 0 100%;font-size:calc(13px * var(--echelle));color:var(--encre-2);text-decoration:underline;text-underline-offset:3px}
.wtl-achat .garder:hover{color:var(--accent)}

/* ---- Quiz : les leçons à revoir ---- */
.wtl .quiz-revoir{margin:12px 0;padding:12px 16px;border-left:4px solid var(--accent);border-radius:calc(var(--rayon) * .6);background:var(--accent-2);color:var(--encre)}
.wtl .quiz-revoir-titre{margin:0 0 6px;font-weight:700}
.wtl .quiz-revoir ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.wtl .quiz-revoir-lecon{padding:0;border:0;background:none;font:inherit;color:var(--accent);text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- Le quiz libre, posé par la brique [wtl_quiz] ---- */
.wtl-quiz-libre{margin:var(--espace) 0;padding:calc(var(--gouttiere) * 1.1) calc(var(--gouttiere) * 1.2);background:var(--carte);border:1px solid var(--filet);border-top:4px solid var(--accent);border-radius:var(--rayon);color:var(--encre)}
.wtl-quiz-libre [hidden]{display:none !important}
.wtl-quiz-libre .ql-titre{margin:0 0 8px;font-size:calc(22px * var(--echelle));line-height:1.25;color:inherit}
.wtl-quiz-libre .ql-intro{margin:0 0 10px;color:var(--encre-2)}
.wtl-quiz-libre .ql-note{color:var(--encre-2);font-size:calc(14px * var(--echelle))}
/* Le pied — « Voir les réponses », « Recommencer », « Retour » — est de l'intendance, pas
   une offre. Il se détache du conseil par un filet, et ses boutons quittent le vert : sinon
   quatre pastilles de même forme se suivent et le lecteur ne sait plus laquelle compte. */
/* Le quiz qui oriente : pas de score, un parcours. La leçon conseillée se distingue par un
   filet d'accent et un fond doux — elle est en tête, elle n'est pas seule. Les autres
   restent entières et cliquables : on recommande un ordre, on ne verrouille rien. */
.wtl-quiz-libre .ql-conseil{margin:0 0 14px;font-size:calc(16px * var(--echelle))}
.wtl-quiz-libre .ql-conseil-quoi{color:var(--encre-2)}
.wtl-quiz-libre .ql-parcours{list-style:none;margin:0;padding:0;counter-reset:none}
/* Fond posé explicitement sur les deux états : sans cela, une ligne non conseillée laisse
   voir ce que le thème du site a mis derrière, et se retrouve plus marquée que la ligne
   conseillée — exactement l'inverse de l'intention. */
.wtl-quiz-libre .ql-parcours > li{border:1px solid var(--filet);border-radius:var(--rayon);
  padding:10px 12px;background:var(--carte)}
.wtl-quiz-libre .ql-parcours > li + li{margin-top:8px}
.wtl-quiz-libre .ql-parcours > li.vise{border-color:var(--accent);background:var(--accent-2);
  box-shadow:inset 3px 0 0 var(--accent)}
.wtl-quiz-libre .ql-parcours > li.cliquable{cursor:pointer}
/* Une cible tactile confortable : 44 px est le minimum recommandé, et le titre d'une leçon
   tient souvent sur une seule ligne de texte, bien plus courte que ça. */
.wtl-quiz-libre .ql-parcours-titre a{display:inline-block;min-height:28px;padding:4px 0}
.wtl-quiz-libre .ql-parcours-combien{color:var(--accent);font-size:calc(12px * var(--echelle));
  border:1px solid var(--accent);border-radius:999px;padding:0 7px}
.wtl-quiz-libre .ql-parcours-titre{margin:0;display:flex;align-items:baseline;flex-wrap:wrap}
.wtl-quiz-libre .ql-parcours-titre > * + *{margin-left:8px}
.wtl-quiz-libre .ql-parcours-rang{color:var(--encre-2);font-variant-numeric:tabular-nums;
  font-size:calc(13px * var(--echelle))}
.wtl-quiz-libre .ql-parcours-duree{color:var(--encre-2);font-size:calc(13px * var(--echelle));
  margin-left:auto}
.wtl-quiz-libre .ql-parcours-resume{margin:4px 0 0;color:var(--encre-2);
  font-size:calc(14px * var(--echelle))}
.wtl-quiz-libre .ql-parcours-pied{margin:14px 0 0}
.wtl-quiz-libre .ql-pied{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--filet)}
.wtl-quiz-libre .ql-pied .wtl-bouton{padding:7px 14px;font-size:calc(13px * var(--echelle));font-weight:500;
  background:transparent;color:var(--encre-2);box-shadow:inset 0 0 0 1px var(--filet)}
.wtl-quiz-libre .ql-pied .wtl-bouton:hover{color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre-2)}
.wtl-quiz-libre .ql-barre{height:6px;border-radius:999px;background:var(--filet);overflow:hidden;margin:6px 0 10px}
.wtl-quiz-libre .ql-barre > span{display:block;height:100%;background:var(--accent);transition:width .25s}
.wtl-quiz-libre .ql-rang{margin:0 0 4px;font-size:calc(13px * var(--echelle));text-transform:uppercase;letter-spacing:.06em;color:var(--encre-2)}
.wtl-quiz-libre .ql-q{border:0;margin:0;padding:12px 0 4px;min-width:0}
.wtl-quiz-libre .ql-q + .ql-q{border-top:1px solid var(--filet);margin-top:8px}
.wtl-quiz-libre .ql-q legend{float:left;width:100%;padding:0;margin:0 0 8px;font-weight:700;font-size:calc(17px * var(--echelle));line-height:1.35;color:inherit}
.wtl-quiz-libre .ql-multi{display:block;font-weight:400;font-size:calc(13px * var(--echelle));color:var(--encre-2)}
.wtl-quiz-libre .ql-choix{clear:both;display:flex;align-items:flex-start;gap:10px;margin:6px 0;padding:10px 12px;border:1px solid var(--filet);border-radius:calc(var(--rayon) * .6);cursor:pointer}
.wtl-quiz-libre .ql-choix:hover{border-color:var(--accent)}
.wtl-quiz-libre .ql-choix input{margin:3px 0 0;accent-color:var(--accent)}
.wtl-quiz-libre .ql-message{min-height:1.4em;margin:8px 0 0;color:#b32d2e;font-size:calc(14px * var(--echelle))}
.wtl-quiz-libre .corrige .ql-choix{cursor:default}
.wtl-quiz-libre .corrige .ql-choix:hover{border-color:var(--filet)}
.wtl-quiz-libre .corrige .ql-choix.bonne{background:rgba(63,185,120,.14);border-color:#3FB978}
.wtl-quiz-libre .corrige .ql-choix.fausse{background:rgba(217,58,43,.10);border-color:#D93A2B;text-decoration:line-through}
.wtl-quiz-libre .ql-verdict{margin-left:8px;font-weight:700}
.wtl-quiz-libre .ql-q.ok .ql-verdict{color:#2a8f5a}
.wtl-quiz-libre .ql-q.faux .ql-verdict{color:#c0392b}
.wtl-quiz-libre .ql-q.partiel .ql-verdict{color:#b7791f}
.wtl-quiz-libre .ql-explication{clear:both;margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--accent);background:var(--accent-2);font-size:calc(14px * var(--echelle))}
.wtl-quiz-libre .ql-form.corrige{margin-top:20px;padding-top:12px;border-top:1px solid var(--filet)}
.wtl-quiz-libre .ql-score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 12px}
.wtl-quiz-libre .ql-score strong{font-size:calc(44px * var(--echelle));line-height:1;color:var(--accent)}
.wtl-quiz-libre .ql-score span{color:var(--encre-2)}
.wtl-quiz-libre .ql-palier{margin:0 0 6px;padding:12px 16px;border-radius:calc(var(--rayon) * .6);background:var(--accent-2)}
.wtl-quiz-libre .ql-palier p{margin:0 0 6px}
.wtl-quiz-libre .ql-palier p:last-child{margin:0}
.wtl-quiz-libre .ql-palier-titre{font-weight:700;font-size:calc(17px * var(--echelle))}
.wtl-quiz-libre .ql-sous-titre{margin:20px 0 8px;font-size:calc(13px * var(--echelle));text-transform:uppercase;letter-spacing:.06em;color:var(--encre-2)}
/* Le conseil est le point de l'écran : un filet d'accent le désigne, sans ajouter un second
   cadre coloré qui concurrencerait le message. */
.wtl-quiz-libre .ql-conseil{margin:22px 0 0;padding-left:14px;border-left:3px solid var(--accent)}
.wtl-quiz-libre .ql-conseil .ql-sous-titre{margin-top:0}
.wtl-quiz-libre .ql-themes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wtl-quiz-libre .ql-themes li{display:grid;grid-template-columns:minmax(90px,1.2fr) 2fr 48px minmax(80px,auto);align-items:center;gap:10px;font-size:calc(14px * var(--echelle))}
/* Le nombre de questions, sous le nom du thème : il relativise un 0 % obtenu sur une
   seule question tirée au sort. */
.wtl-quiz-libre .ql-theme-nom{display:block}
.wtl-quiz-libre .ql-theme-compte{display:block;color:var(--encre-3);font-size:calc(12px * var(--echelle))}
.wtl-quiz-libre .ql-theme-barre{height:8px;border-radius:999px;background:var(--filet);overflow:hidden}
.wtl-quiz-libre .ql-theme-barre > span{display:block;height:100%;background:var(--accent)}
.wtl-quiz-libre .ql-themes li.faible .ql-theme-barre > span{background:#D9822B}
.wtl-quiz-libre .ql-theme-score{text-align:right;font-weight:700}
.wtl-quiz-libre .ql-theme-avis{color:var(--encre-2);font-size:calc(13px * var(--echelle))}
.wtl-quiz-libre .ql-themes li.faible .ql-theme-avis{color:#b7611a;font-weight:600}
.wtl-quiz-libre .ql-cible{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px;border:1px solid var(--filet);border-radius:var(--rayon);text-decoration:none;color:inherit}
.wtl-quiz-libre .ql-cible:hover{border-color:var(--accent)}
.wtl-quiz-libre .ql-cible img{width:150px;max-width:40%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--rayon) * .6)}
.wtl-quiz-libre .ql-cible-texte{flex:1 1 200px;display:flex;flex-direction:column;gap:2px}
.wtl-quiz-libre .ql-cible-genre{font-size:calc(12px * var(--echelle));text-transform:uppercase;letter-spacing:.06em;color:var(--encre-2)}
.wtl-quiz-libre .ql-cible-titre{font-weight:700;font-size:calc(17px * var(--echelle))}
.wtl-quiz-libre .ql-contact{margin:20px 0 0;padding:14px 16px;border:1px dashed var(--filet);border-radius:var(--rayon)}
.wtl-quiz-libre .ql-contact-titre{margin:0 0 8px;font-weight:700}
.wtl-quiz-libre .ql-contact-champs{display:flex;gap:10px;flex-wrap:wrap}
.wtl-quiz-libre .ql-champ{flex:1 1 200px;padding:9px 12px;border:1px solid var(--filet);border-radius:calc(var(--rayon) * .6);font:inherit;background:var(--fond);color:var(--encre)}
.wtl-quiz-libre .ql-accord{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:calc(13px * var(--echelle));color:var(--encre-2)}
@media (max-width:560px){ .wtl-quiz-libre .ql-themes li{grid-template-columns:1fr 48px;} .wtl-quiz-libre .ql-theme-barre{grid-column:1 / -1;order:3} .wtl-quiz-libre .ql-theme-avis{display:none} }

/* ---- Quiz d'un cours : une question à la fois ---- */
.wtl-cours .quiz-form [hidden]{display:none !important}
.wtl-cours .quiz-barre{height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:4px 0 10px}
.wtl-cours .quiz-barre > span{display:block;height:100%;background:var(--accent);transition:width .25s}
.wtl-cours .quiz-rang{margin:0 0 2px;font-size:calc(12px * var(--echelle));text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.wtl-cours .quiz-form.pas-a-pas .quiz-pied{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wtl-cours .quiz-q.vue .quiz-choix{cursor:default}
.wtl-cours .quiz-q.vue .quiz-choix.bonne{background:rgba(63,185,120,.18);box-shadow:inset 3px 0 0 #3FB978}
.wtl-cours .quiz-q.vue .quiz-choix.fausse{background:rgba(217,58,43,.18);box-shadow:inset 3px 0 0 #D93A2B;text-decoration:line-through}

/* ---------------------------------------------------------------- Mes groupes (0.22.0)
   L'encadrement voit ses groupes et la fiche de chaque élève ; l'élève, son groupe et ses
   liens. Même vocabulaire visuel que le reste de Mon compte : cartes, filets, accent. */
.wtl-espace [data-wtl-panneau="groupes"] h4{font-size:calc(17px * var(--echelle));margin:18px 0 8px}
.wtl-espace [data-wtl-panneau="groupes"] h5{font-size:calc(15px * var(--echelle));margin:20px 0 8px}
.wtl-espace [data-wtl-panneau="groupes"] h6{font-size:calc(13px * var(--echelle));text-transform:uppercase;letter-spacing:.04em;color:var(--encre-2);margin:18px 0 6px}
.wtl-espace .fil{margin:10px 0 0;font-size:calc(13px * var(--echelle))}
.wtl-espace .fil a{color:var(--accent);text-decoration:none;font-weight:600}
.wtl-espace .wtl-groupes-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wtl-espace .wtl-groupes-liste a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(var(--gouttiere) * .6) calc(var(--gouttiere) * .8);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);text-decoration:none;color:inherit}
.wtl-espace .wtl-groupes-liste .nom{font-weight:700}
.wtl-espace .wtl-groupes-liste .detail{font-size:calc(13px * var(--echelle));color:var(--encre-3)}
.wtl-espace .wtl-groupe-carte{padding:calc(var(--gouttiere) * .6) calc(var(--gouttiere) * .8);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);margin-bottom:8px}
.wtl-espace .wtl-groupe-carte .nom{font-weight:700;margin:0 0 6px}
.wtl-espace .wtl-groupes-eleve{margin-top:18px}
/* Un tableau large défile de côté sur un téléphone au lieu de déborder de la page. */
.wtl-espace .wtl-tableau{overflow-x:auto;margin:0 0 8px}
.wtl-espace .wtl-tableau table{width:100%;border-collapse:collapse;font-size:calc(13px * var(--echelle))}
.wtl-espace .wtl-tableau th{text-align:left;font-weight:600;color:var(--encre-2);border-bottom:1px solid var(--filet);padding:6px 8px;white-space:nowrap}
.wtl-espace .wtl-tableau td{border-bottom:1px solid var(--filet);padding:6px 8px;vertical-align:top}
.wtl-espace .wtl-tableau a{color:var(--accent);text-decoration:none}
/* Ce qui n'a pas été ouvert se lit d'abord : c'est ce qu'un tuteur cherche. */
.wtl-espace .wtl-lecons-fiche tr.etat-non td{color:var(--encre-3)}
.wtl-espace .wtl-lecons-fiche tr.etat-vue td:nth-child(3){color:var(--accent);font-weight:600}
.wtl-espace .wtl-fiche-cours{margin:14px 0 26px;padding:calc(var(--gouttiere) * .8);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon)}
.wtl-espace .wtl-fiche-cours h5{margin-top:0}
.wtl-espace .wtl-reperes-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px;margin:0}
.wtl-espace .wtl-reperes-fiche div{background:var(--fond);border-radius:var(--rayon);padding:8px 10px}
.wtl-espace .wtl-reperes-fiche dt{font-size:calc(11px * var(--echelle));text-transform:uppercase;letter-spacing:.04em;color:var(--encre-3);margin:0 0 2px}
.wtl-espace .wtl-reperes-fiche dd{margin:0;font-weight:600}
.wtl-espace .wtl-a-travailler{margin-top:14px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-2);border-radius:0 var(--rayon) var(--rayon) 0}
.wtl-espace .wtl-a-travailler h6{margin-top:0;color:var(--encre)}
.wtl-espace .wtl-a-travailler p{margin:4px 0}
.wtl-espace .wtl-liens{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.wtl-espace .wtl-liens li{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.wtl-espace .wtl-liens a{color:var(--accent);font-weight:600}
.wtl-espace .wtl-liens .pour{font-size:calc(11px * var(--echelle));color:var(--encre-3);background:var(--fond);border-radius:999px;padding:1px 8px}
.wtl-espace .wtl-liens form.retirer{display:inline;margin:0}
.wtl-espace .wtl-groupe-lien{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px 12px;align-items:end;margin-top:8px}
/* Une liste déroulante prend la largeur de sa plus longue option : sans ces deux règles, un titre
   de cours à rallonge élargissait sa colonne et poussait le bouton à la ligne (capture de Laurent,
   21/09/2026). min-width:0 laisse la case de grille rétrécir ; width:100% y tient le champ. */
.wtl-espace .wtl-groupe-lien .champ,.wtl-espace .wtl-groupe-lien label{min-width:0}
.wtl-espace .wtl-groupe-lien input,.wtl-espace .wtl-groupe-lien select{width:100%;max-width:100%;box-sizing:border-box}
.wtl-espace .wtl-groupe-lien .champ{margin:0}
.wtl-espace .wtl-groupe-lien label{display:grid;gap:4px;font-size:calc(13px * var(--echelle));font-weight:600}
.wtl-espace .wtl-groupe-lien .description{grid-column:1/-1}
/* Une date et des horaires ne se coupent pas : « 05:31 – 05:56 » sur deux lignes ne se lit plus. */
.wtl-espace .wtl-seances td:nth-child(1),.wtl-espace .wtl-seances td:nth-child(2),.wtl-espace .wtl-seances td:nth-child(3){white-space:nowrap}
/* La formation à laquelle un lien est rattaché (0.22.3). */
.wtl-espace .wtl-liens .cours{font-size:calc(11px * var(--echelle));color:var(--accent);background:var(--accent-2);border-radius:999px;padding:1px 8px}

/* Évaluations d'entrée et de sortie (0.23.0) */
.wtl-eval-encart{box-sizing:border-box;max-width:100%;margin:0 0 calc(var(--gouttiere) * .8);padding:calc(var(--gouttiere) * .6) calc(var(--gouttiere) * .8);background:var(--accent-2);border-left:4px solid var(--accent);border-radius:var(--rayon)}
.wtl-eval-encart .wtl-eval-ligne{margin:0;font-size:calc(14px * var(--echelle));color:var(--encre)}
.wtl-eval-encart .wtl-eval-ligne + .wtl-eval-ligne{margin-top:8px}
.wtl-eval-ligne .wtl-bouton{display:inline-block;margin:6px 0 2px 6px;vertical-align:middle}
.wtl-espace .wtl-eval-bloc{margin:4px 0 12px;padding:8px 10px;background:var(--fond);border-radius:var(--rayon)}
.wtl-espace .wtl-eval-bloc .sous-titre{margin:0 0 4px;font-size:calc(11px * var(--echelle));text-transform:uppercase;letter-spacing:.04em;color:var(--encre-3)}
.wtl-espace .wtl-eval-ligne{margin:4px 0;font-size:calc(13px * var(--echelle))}
.wtl-espace .wtl-eval-ligne .formation{font-weight:600}
.wtl-espace .wtl-eval-ligne.attente,.wtl-espace .wtl-eval-ligne.fait{color:var(--encre-2)}
.wtl-espace .wtl-eval-ligne.a-faire,.wtl-espace .wtl-eval-ligne.pret{color:var(--encre)}
.wtl-espace .wtl-eval-details{margin:10px 0 18px}
.wtl-espace .wtl-eval-details summary{cursor:pointer;color:var(--accent);font-weight:600}
.wtl-espace .wtl-eval-reglages select,.wtl-espace .wtl-eval-reglages input{max-width:100%}
.wtl-espace .wtl-eval-reglages input[type=number]{width:5em}
.wtl-espace .wtl-eval-dispenses{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:4px 12px}
.wtl-espace .wtl-eval-fiche{margin:12px 0}
.wtl-espace .wtl-eval-fiche .wtl-tableau{margin-top:10px}
.wtl-espace .wtl-eval-gestes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wtl-espace .wtl-eval-gestes form{margin:0}
.wtl-quiz-libre .ql-comparaison{font-weight:700;color:var(--accent);margin:0 0 10px}
.wtl-quiz-libre .ql-theme-avant{grid-column:2 / -1;margin-top:-6px;color:var(--encre-3);font-size:calc(12px * var(--echelle))}
.wtl-quiz-libre .ql-enregistre{margin:0 0 8px}
.wtl-quiz-libre .ql-confirmer{margin:12px 0}
.wtl-eval-encart.discret{background:transparent;border-left-width:2px;border-radius:0;padding:2px 0 2px 12px}
.wtl-eval-encart.discret .wtl-eval-ligne{color:var(--encre-2);font-size:calc(13px * var(--echelle))}

/* Questionnaire d'appréciation (0.25.0) */
.wtl-appreciation{box-sizing:border-box;max-width:100%;padding:calc(var(--gouttiere) * .8);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon)}
.wtl-appreciation h3{margin:0 0 8px}
.wtl-appreciation .ap-intro{margin:0 0 6px;color:var(--encre)}
.wtl-appreciation .ap-note{margin:0 0 14px;color:var(--encre-2);font-size:calc(13px * var(--echelle))}
.wtl-appreciation .ap-q{border:0;border-top:1px solid var(--filet);margin:0;padding:12px 0}
.wtl-appreciation .ap-q legend{font-weight:600;padding:0;margin-bottom:8px}
.wtl-appreciation .ap-q label{display:inline-flex;align-items:center;margin:0 14px 6px 0;cursor:pointer}
.wtl-appreciation .ap-q label input{margin-right:6px}
.wtl-appreciation .ap-q label.ap-choix{display:flex}
.wtl-appreciation .ap-echelle{display:flex;flex-wrap:wrap;align-items:center}
.wtl-appreciation .ap-echelle .borne{color:var(--encre-2);font-size:calc(12px * var(--echelle));margin:0 10px 6px 0}
.wtl-appreciation .ap-echelle .borne:last-child{margin-left:0}
.wtl-appreciation textarea{box-sizing:border-box;width:100%;font:inherit;padding:8px;border:1px solid var(--filet);border-radius:calc(var(--rayon) * .5)}
.wtl-espace .wtl-ap-synthese{margin:0 0 10px;padding:8px 12px;background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon)}
.wtl-espace .wtl-ap-synthese summary{cursor:pointer}
.wtl-espace .ap-resultat{margin:10px 0}
.wtl-espace .ap-question{font-weight:600;margin:0 0 4px}
.wtl-espace .ap-moyenne{margin:0 0 4px;color:var(--accent);font-weight:700}
.wtl-espace .ap-barres{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.wtl-espace .ap-barres li{display:grid;grid-template-columns:minmax(40px,auto) 1fr 80px;gap:8px;align-items:center;font-size:calc(13px * var(--echelle))}
.wtl-espace .ap-barres .barre{height:8px;border-radius:999px;background:var(--filet);overflow:hidden}
.wtl-espace .ap-barres .barre > span{display:block;height:100%;background:var(--accent)}
.wtl-espace .ap-barres .nombre{text-align:right;color:var(--encre-2)}
.wtl-espace .ap-textes{margin:0;padding-left:18px;font-size:calc(13px * var(--echelle))}
.wtl-espace .ap-textes li{margin-bottom:4px}
.wtl-espace .wtl-ap-fiche{margin:6px 0 10px;font-size:calc(13px * var(--echelle))}
/* Réglages des évaluations dans Mon compte : un bloc par formation (0.25.1) */
.wtl-espace .wtl-eval-reglages .wtl-eval-formation{border:1px solid var(--filet);border-radius:var(--rayon);padding:6px 12px 10px;margin:0 0 10px;min-width:0}
.wtl-espace .wtl-eval-reglages .wtl-eval-formation legend{font-weight:600;padding:0 4px}
.wtl-espace .wtl-eval-reglages .champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px 12px}
.wtl-espace .wtl-eval-reglages .champ{display:flex;flex-direction:column;min-width:0}
.wtl-espace .wtl-eval-reglages .champ .libelle{font-size:calc(12px * var(--echelle));color:var(--encre-2);margin-bottom:3px}
.wtl-espace .wtl-eval-reglages .champ select,.wtl-espace .wtl-eval-reglages .champ input[type=date]{width:100%;max-width:100%;box-sizing:border-box}
.wtl-espace .wtl-eval-reglages .seuil{white-space:nowrap}
.wtl-espace .wtl-eval-reglages .seuil input{width:5em}

/* Les appareils connectés (0.26.0) */
.wtl-espace .wtl-appareils{margin-top:18px;padding-top:14px;border-top:1px solid var(--filet)}
.wtl-espace .wtl-appareils h4{margin:0 0 6px}
.wtl-espace .wtl-liste-appareils{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px}
.wtl-espace .wtl-liste-appareils li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:calc(13px * var(--echelle));color:var(--encre-2)}
.wtl-espace .wtl-liste-appareils .ici{font-size:calc(11px * var(--echelle));color:var(--accent);background:var(--accent-2);border-radius:999px;padding:1px 8px}
.wtl-espace .wtl-liste-appareils .appareil{font-weight:600;color:var(--encre)}
.wtl-espace .mes-cours .releve{margin:4px 0 0}
.wtl-espace .mes-cours .releve a{font-size:calc(13px * var(--echelle));color:var(--encre-2);text-decoration:underline}
.wtl-espace .mes-cours .releve a:hover{color:var(--accent)}
/* Le signal de décrochage (0.28.0) */
.wtl-espace .wtl-decroche{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:calc(11px * var(--echelle));background:#F8E9E1;color:#8A3A16;white-space:nowrap}
.wtl-espace .wtl-decroche-jamais{background:#FDF3D7;color:#7A5B12}
.wtl-espace .wtl-decroche-ligne{margin:6px 0 0}

/* L'achat groupé, offre « centre » (0.29.0) */
.wtl-places-achat{box-sizing:border-box;max-width:100%;margin:0 0 calc(var(--gouttiere) * .8);padding:calc(var(--gouttiere) * .6) calc(var(--gouttiere) * .8);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon)}
.wtl-places-achat .titre{margin:0 0 4px;font-weight:700}
.wtl-places-achat .detail{margin:0 0 8px;color:var(--encre-2);font-size:calc(14px * var(--echelle))}
.wtl-places-achat form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wtl-places-achat label{display:flex;align-items:center;gap:6px;font-size:calc(14px * var(--echelle))}
.wtl-places-achat input[type=number]{width:5.5em;font:inherit;padding:6px 8px;border:1px solid var(--filet);border-radius:calc(var(--rayon) * .5)}
.wtl-places-achat .description{margin:8px 0 0;color:var(--encre-3);font-size:calc(12px * var(--echelle))}
.wtl-espace .wtl-lot{margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--filet)}
.wtl-espace .wtl-lot h4{margin:0 0 4px}
.wtl-espace .wtl-lot .compteur{margin:0 0 10px;color:var(--encre-2)}
.wtl-espace .wtl-donner-places textarea{box-sizing:border-box;width:100%;font:inherit;padding:8px;border:1px solid var(--filet);border-radius:calc(var(--rayon) * .5)}
.wtl-espace .wtl-regle-places{color:#8A3A16}
.wtl-espace .wtl-places form{margin:0}

/* « À relancer » : les décrocheurs d'un groupe, sortis du tableau (0.32.0) */
.wtl-espace .wtl-relancer{margin:14px 0;padding:calc(var(--gouttiere) * .7);background:var(--carte);border-left:4px solid #C4703B;border-radius:var(--rayon)}
.wtl-espace .wtl-relancer h5{margin:0 0 8px}
.wtl-espace .wtl-relancer ul{margin:0;padding:0;list-style:none}
.wtl-espace .wtl-relancer li{padding:4px 0;border-bottom:1px solid var(--filet)}
.wtl-espace .wtl-relancer li:last-child{border-bottom:0}
.wtl-espace .wtl-relancer .ecrire{margin-left:8px;font-size:calc(12px * var(--echelle))}
.wtl-espace .wtl-relancer .description{margin:8px 0 0}

/* « Mes tests » dans l'espace de l'élève : la même carte que « Mes cours », mais le lien
   n'enveloppe pas la ligne — un test se reprend, il ne se reprend pas par mégarde. */
.wtl-espace .mes-tests{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wtl-espace .mes-tests li{display:grid;gap:6px;justify-items:start;padding:calc(var(--gouttiere) * .7) calc(var(--gouttiere) * .8);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon)}
.wtl-espace .mes-tests .titre{font-weight:700}
.wtl-espace .mes-tests .detail{font-size:calc(13px * var(--echelle));color:var(--encre-3)}
.wtl-espace .mes-tests .wtl-bouton{margin-top:2px}

/* « Nos tests » : la liste publique des quiz libres. Grille simple — ce ne sont pas des
   cartes de cours, il n'y a ni image ni prix, et une colonne en moins vaut mieux qu'un vide. */
.wtl-tests .wtl-tests-titre{margin:0 0 var(--gouttiere)}
.wtl-tests .tests-grille{display:grid;grid-template-columns:repeat(var(--wtl-colonnes,2),minmax(0,1fr));gap:var(--gouttiere)}
.wtl-tests .carte{display:grid;gap:8px;justify-items:start;align-content:start;padding:var(--gouttiere);background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon)}
.wtl-tests .carte .vignette{display:block;width:100%;line-height:0}
/* « contain » et une hauteur fixe : les logos des logiciels n'ont ni le même format ni le
   même fond, et un « cover » les rognerait en plein milieu. */
.wtl-tests .carte .vignette img{width:100%;height:120px;object-fit:contain;object-position:left center}
.wtl-tests .carte .titre{margin:0;font-size:calc(17px * var(--echelle))}
.wtl-tests .carte .texte{margin:0;color:var(--encre-2)}
.wtl-tests .carte .detail{margin:0;font-size:calc(13px * var(--echelle));color:var(--encre-3)}
@media (max-width:600px){.wtl-tests .tests-grille{grid-template-columns:1fr}}
.wtl-tests .wtl-avis{margin:var(--gouttiere) 0 0;padding:12px 14px;border-left:3px solid var(--accent);background:var(--carte);color:var(--encre-2);font-size:calc(14px * var(--echelle))}
/* Le bilan par niveau reprend la grille des thèmes, avec un filet au-dessus : c'est une
   seconde lecture du même passage, pas une liste de plus. */
.wtl-quiz-libre .ql-niveaux{margin-top:4px}

/* Le profil d'un passage, dans l'espace de l'élève : même lecture que sur l'écran de
   résultat, en plus sobre — c'est un rappel, pas la remise du score. */
.wtl-espace .ql-profil-titre{margin:10px 0 4px;font-size:calc(12px * var(--echelle));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--encre-3)}
.wtl-espace .ql-profil{list-style:none;margin:0;padding:0;display:grid;gap:5px;width:100%}
.wtl-espace .ql-profil li{display:grid;grid-template-columns:minmax(90px,1.1fr) 2fr 44px minmax(74px,auto);align-items:center;gap:8px;font-size:calc(13px * var(--echelle))}
.wtl-espace .ql-profil .barre{height:6px;border-radius:3px;background:var(--filet);overflow:hidden}
.wtl-espace .ql-profil .barre i{display:block;height:100%;background:var(--accent)}
.wtl-espace .ql-profil li.faible .barre i{background:#D9822B}
.wtl-espace .ql-profil .chiffre{text-align:right;font-weight:700}
.wtl-espace .ql-profil .avis{color:var(--encre-3);font-size:calc(12px * var(--echelle))}
.wtl-espace .ql-profil li.faible .avis{color:#b7611a;font-weight:600}
.wtl-espace .ql-profil-suite{margin:0;color:var(--encre-2);font-size:calc(13px * var(--echelle))}
@media (max-width:560px){ .wtl-espace .ql-profil li{grid-template-columns:1fr 44px} .wtl-espace .ql-profil .barre,.wtl-espace .ql-profil .avis{display:none} }