/* =========================================================================
   Isabelle Beaugrand — Repaint du plugin OcoBoard Courses
   (vente, catalogue, lecteur, /mon-espace/, paywall)

   Le plugin (templates/assets/course-front.css) expose un jeu de custom
   properties neutres sur `.oco-courses` — `--oco-cream`, `--oco-ink`,
   `--oco-green`, `--oco-line`, `--oco-card`, `--oco-radius`, etc. — pensées
   pour être totalement repeintes par le thème hôte (cf. commentaire en tête
   de ce fichier côté plugin). Ce fichier ne touche JAMAIS au DOM du lecteur
   React : uniquement des overrides de tokens + quelques règles de mise en
   page pures sur les classes déjà rendues par les templates PHP du plugin.

   Mapping retenu (primitives assets/css/system.css). Historique : l'espace
   formation était bâti sur l'univers OLIVE (--green/--green-deep), choix
   assumé pour le distinguer du site vitrine (terracotta). Décision client
   (juillet 2026) : basculer l'espace formation sur la TERRACOTTA, déjà
   couleur principale du site vitrine — les alias `--oco-green`/`--oco-line`
   sont CONSERVÉS (les templates PHP du plugin les consomment tels quels)
   mais repointés vers les tokens terracotta ci-dessous :
     --oco-cream       -> --cream        (#fdf9f2, fond principal)
     --oco-cream-soft   -> --card          (#f6f1ea, panneau encastré : rail/aside)
     --oco-card         -> --cream-soft    (#fefdfb, carte élevée : catalogue/reprendre)
     --oco-ink / -70/-50 -> --ink / --ink-70 / --ink-50
     --oco-green        -> --terracotta      (#a8582e)
     --oco-green-deep   -> --terracotta-deep (#8a4824)
     --oco-line / -soft  -> --line-terra / --line-terra-soft
     --oco-radius        -> 0 (coins droits, comme le reste du thème)
     police héritée      -> var(--font) (pile Optima)

   Chargé APRÈS `oco-courses-front` (et `oco-courses-front-player` quand
   présent) via les `deps` de wp_enqueue_style dans functions.php.
   ========================================================================= */

/* ------------------------------------------------------- Tokens & base */
.oco-courses {
  --oco-cream: var(--cream);
  --oco-cream-soft: var(--card);
  --oco-ink: var(--ink);
  --oco-ink-70: var(--ink-70);
  --oco-ink-50: var(--ink-50);
  --oco-green: var(--terracotta);
  --oco-green-deep: var(--terracotta-deep);
  /* Suivent `--line-terra`, redéfini plus bas dans ce même scope. */
  --oco-line: var(--line-terra);
  --oco-line-soft: var(--line-terra-soft);
  --oco-card: var(--cream-soft);
  --oco-radius: 0;

  font-family: var(--font);
}

/* ------------------------------------------------------- Pont "Espace Formation"
   Les templates `<theme>/oco-courses/{account,partials,player}/*.php`
   reproduisent la STRUCTURE (classes) de `formation.css` du prototype
   validé (~/oco-proto/Espace Formation.html), pas seulement ses couleurs.
   Ce bloc ponte les noms de variables attendus par ces classes vers les
   tokens réels du thème (`--ink`/`--terracotta`/`--cream`/... déjà globaux,
   voir assets/css/system.css) — tout est scopé sous `.oco-courses` pour
   zéro fuite hors de l'espace formation. `--ink`/`--ink-70`/`--ink-50`/
   `--terracotta`/`--terracotta-deep`/`--cream`/`--card`/`--line-terra`/`--font`
   sont DÉJÀ des tokens globaux du thème (rien à ponter) — seuls les noms
   propres au prototype sont ajoutés ici. */
.oco-courses {
  --accent: var(--terracotta);
  --feature-bg: var(--terracotta-deep);
  --paper: var(--cream);
  --white: var(--cream-soft);
  --cream-bg: var(--card);
  --accent-15: rgba(168, 88, 46, 0.15);
  /* Traits volontairement PLUS DISCRETS que sur le site public. `--line-terra`
     est redéfini ICI (et non dans system.css) parce que les ~25 règles de ce
     fichier l'utilisent en direct : le redéfinir dans ce scope les adoucit
     toutes d'un coup, sans toucher une seule déclaration ni le site public.
     Motif : dans l'espace formation les bordures sont omniprésentes (cartes de
     leçon, sommaire, ressources, encadrés) et à 0.35 l'écran se lit comme une
     grille marron ; à 0.18 la structure reste lisible sans que le trait
     devienne l'élément dominant. */
  --line-terra: rgba(168, 88, 46, 0.18);
  --line-terra-soft: rgba(168, 88, 46, 0.10);
  --accent-35: var(--line-terra);
  --accent-soft: rgba(168, 88, 46, 0.10);
  --radius-round: 999px;
  --font-display: var(--font);
  --font-body: var(--font);
  --shadow-card: 0 14px 40px rgba(62, 58, 54, 0.1);
  --shadow-soft: 0 8px 24px rgba(62, 58, 54, 0.08);
  --page-bg: var(--cream);
}

/* Focus visible homogène avec le reste du thème (jamais d'outline:none nu). */
.oco-courses :where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--oco-green);
  outline-offset: 3px;
}

/* Barre de progression : coins droits (le plugin la rend en pilule 999px). */
.oco-progressbar,
.oco-progressbar > i {
  border-radius: 0;
}

/* Citations (the_content() de la page de vente, corps de leçon en noscript) :
   filet terracotta à gauche, italique — même traitement que .pullquote du thème. */
.oco-courses blockquote {
  border-left: 2px solid var(--oco-line);
  padding: var(--s-2, 8px) 0 var(--s-2, 8px) var(--s-5, 20px);
  margin: var(--s-6, 24px) 0;
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-lead, 20px);
  line-height: 1.25;
  color: var(--oco-ink);
}

/* ------------------------------------------------------------- Boutons
   La couleur du libellé du bouton principal n'est PAS ici : en (0,1,0) elle
   était battue sans bruit par le reset `.oco-courses a { color: inherit }`
   du plugin (0,2,0), ce qui donnait de l'encre sur de la terre cuite —
   2,2:1. Elle est posée plus bas, avec les autres rattrapages de liens. */
.oco-btn:not([disabled]):not(.oco-btn--disabled):hover {
  transform: translateY(-2px);
}
.oco-btn--primary:hover {
  box-shadow: 0 12px 28px -16px rgba(62, 58, 54, 0.45);
}

/* ------------------------------------------- Vente (single + catalogue) */
.oco-sales-hero {
  position: relative;
  isolation: isolate;
  /* L'anneau décoratif ci-dessous déborde de 80px à droite (`right: -80px`).
     Sans clipping il élargit le document entier : la page entière se
     décalait horizontalement de 80px, sur les trois formations. */
  overflow: hidden;
  padding-top: var(--s-16, 64px);
}
/* La largeur du hero est désormais portée par `.oco-sales-hero__grid` (860px
   en colonne simple, 1180px avec la colonne média). On neutralise donc celle
   posée par le plugin sur le conteneur, sinon le hero à deux colonnes reste
   coincé à 860px. */
.oco-courses .oco-sales-hero {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  /* 24px seulement côté plugin : la première section de couleur du corps
     démarrait presque au contact du hero. */
  padding-bottom: var(--s-18, 72px);
}
.oco-courses .oco-sales-hero--media {
  padding-top: var(--s-20, 80px);
}
/* Anneaux concentriques discrets, mêmes SVG que le reste du thème,
   teintés via `mask` (le fill interne du SVG est ignoré, seule la forme
   compte) — technique CSS pure, aucune modification du DOM du plugin. */
.oco-sales-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60px;
  right: -80px;
  width: 420px;
  height: 420px;
  pointer-events: none;
  background-color: var(--oco-line-soft);
  -webkit-mask: url("../icons/circles-axis.svg") no-repeat center / contain;
  mask: url("../icons/circles-axis.svg") no-repeat center / contain;
}
/* Hero à deux colonnes quand la formation a une image d'avant-lecture ET un
   extrait gratuit (`--media`). Sans ça la grille reste à une colonne et le
   hero est identique à ce qu'il était : la largeur elle-même est portée par
   le modificateur, pour qu'une formation sans média ne se retrouve pas avec
   une colonne de texte de 1180px de large. */
.oco-sales-hero__grid {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 24px;
}
.oco-sales-hero--media .oco-sales-hero__grid {
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .oco-sales-hero--media .oco-sales-hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 64px;
  }
}
.oco-sales-hero__title {
  font-size: var(--fs-h2-lg, clamp(34px, 4.4vw, 48px));
  line-height: var(--lh-head, 1.1);
  letter-spacing: var(--ls-tight, -0.04em);
  color: var(--oco-ink);
}
/* Rythme vertical du hero : titre, résumé et prix se touchaient (aucune marge
   côté plugin), ce qui se voit surtout en mobile où le titre passe sur deux
   lignes. */
.oco-courses .oco-sales-hero__title { margin-bottom: var(--s-4, 16px); }
.oco-courses .oco-sales-hero__text > p { margin-bottom: var(--s-6, 24px); }

/* ---- Colonne média : vignette + pastille de lecture ---- */
.oco-courses a.oco-sales-media {
  display: block;
  color: inherit;
}
.oco-sales-media__frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--oco-cream-soft);
  aspect-ratio: 16 / 9;
}
.oco-sales-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow, .5s) var(--ease, cubic-bezier(.2,.7,.3,1));
}
.oco-sales-media:hover .oco-sales-media__img {
  transform: scale(1.03);
}
/* Pastille de lecture : disque terre cuite + triangle en `clip-path`, aucune
   image ni police d'icônes à charger. */
.oco-sales-media__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--oco-green);
  box-shadow: 0 10px 30px -12px rgba(62, 58, 54, 0.55);
  transition: transform var(--t-fast, .2s) var(--ease, ease), background var(--t-fast, .2s) var(--ease, ease);
}
.oco-sales-media__play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 24px;
  /* décalage optique : un triangle centré géométriquement paraît trop à gauche */
  transform: translateX(3px);
  background: var(--oco-cream);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.oco-sales-media:hover .oco-sales-media__play {
  background: var(--oco-green-deep);
  transform: scale(1.06);
}
.oco-sales-media__label {
  display: block;
  margin-top: 16px;
  font-size: 16px;
  color: var(--oco-ink);
}
.oco-sales-media__label strong {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  color: var(--oco-green-deep);
}
.oco-sales-media__meta {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--oco-ink-50);
}
@media (prefers-reduced-motion: reduce) {
  .oco-sales-media__img,
  .oco-sales-media__play {
    transition: none;
  }
  .oco-sales-media:hover .oco-sales-media__img,
  .oco-sales-media:hover .oco-sales-media__play {
    transform: none;
  }
}
.oco-sales-hero p {
  font-size: var(--fs-lead, 20px);
  line-height: var(--lh-body, 1.5);
  color: var(--oco-ink-70);
  max-width: 62ch;
}
.oco-sales-price {
  color: var(--oco-green-deep);
}

/* Faits sous le prix (durée, leçons, documents, durée d'accès), rendus par
   `partials/sales-facts.php`. Liste sémantique — c'est bien une énumération
   — remise à plat en ligne, séparateurs en `::before` pour ne pas dépendre
   de caractères tapés dans le PHP.

   En colonne sous 620px : un séparateur en `::before` se retrouve en tête
   de ligne dès que la liste passe à la ligne (« · 6 documents… »). Aucune
   règle CSS ne détecte un retour à la ligne, donc on change de mise en
   forme plutôt que de bricoler le cas limite. */
.oco-sales-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--oco-ink-70);
}
@media (min-width: 620px) {
  .oco-sales-facts {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 0;
  }
  .oco-sales-facts li + li::before {
    content: "·";
    margin: 0 12px;
    color: var(--oco-line);
  }
}

/* ---------------------------------------------------------------------------
   Couleur des liens — rattrapage du reset du plugin.

   `course-front.css` pose `.oco-courses a { color: inherit; text-decoration:
   none }`. Spécificité (0,2,0) : il battait TOUTES les règles de couleur
   écrites ici en (0,1,0), y compris celle du bouton principal du plugin
   lui-même. Résultat mesuré sur la page de vente : texte encre #3e3a36 sur
   terre cuite #a8582e, soit un contraste de 2,2:1 — sous le minimum WCAG AA
   (4,5:1). Le lien « voir un extrait » et le lien vers les CGV, eux,
   devenaient indistinguables du texte courant : ni couleur, ni soulignement.

   Tout ce bloc est donc écrit en (0,3,x) pour passer devant, sans toucher au
   reset lui-même — il reste utile partout ailleurs (le rail, les cartes et
   les lignes de leçon sont des liens dont TOUTE la surface est cliquable, et
   qui ne doivent surtout pas être colorés).
   --------------------------------------------------------------------------- */
.oco-courses a.oco-btn.oco-btn--primary {
  color: var(--oco-cream);
}

/* Aperçu gratuit : action secondaire sous le bouton principal. Volontairement
   un lien souligné et non un second bouton — deux boutons côte à côte se
   disputent la hiérarchie et diluent l'inscription. */
.oco-courses a.oco-sales-preview {
  display: inline-block;
  margin-top: 16px;
  font-size: 16px;
  color: var(--oco-green-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.oco-courses a.oco-sales-preview:hover {
  text-decoration-thickness: 2px;
}

/* Liens dans le corps rédactionnel de la page de vente (réponses de FAQ,
   paragraphes des sections). Sans ça le lien vers les CGV est du texte noir
   non souligné : rien ne dit que c'est cliquable, alors que c'est justement
   la page qu'on doit pouvoir atteindre avant d'acheter. */
.oco-courses .oco-sales-body p a,
.oco-courses .oco-sales-body .faq-a__inner a {
  color: var(--oco-green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Corps de la page de vente. Les blocs de section du thème
   (`<section class="theme …">`) gèrent leur propre `.container` et doivent
   rester pleine largeur ; tout le reste — paragraphes nus d'une formation
   pas encore mise en page — est ramené à la colonne de lecture, sinon il
   irait de bord à bord. */
.oco-courses .oco-sales-body > *:not(.theme) {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 24px;
}
.oco-courses .oco-sales-body > .theme {
  /* Annule le `margin-block-start` injecté par WP entre blocs de premier
     niveau : chaque section porte déjà son propre `padding: 80px 0`. */
  margin-block: 0;
}

/* Le rail du curriculum est partagé avec le lecteur de leçon, où il est une
   colonne latérale collante (`position: sticky` + `max-height: 100vh`).
   Sur la page de vente c'est un bloc autonome en pleine page : collant, il
   se décalait de 24px et venait recouvrir le bouton d'inscription juste en
   dessous, et sa hauteur était plafonnée à la fenêtre avec un ascenseur
   interne. Le sélecteur enfant direct ne vise QUE la page de vente — dans
   `player/focus.php` le rail est imbriqué plus profond. Classe doublée :
   `.oco-courses .lrail` (espace formation, plus bas dans ce fichier) a la
   même spécificité et gagnerait à égalité en étant déclarée après. */
.oco-courses > .lrail.lrail {
  position: static;
  max-height: none;
  overflow: visible;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Rappel d'achat après le programme détaillé. Même gouttière que le hero
   et le rail (860px), pour que les trois blocs de « mobilier » de la page
   s'alignent — seules les sections du thème sont pleine largeur. */
.oco-sales-close {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--s-10, 40px) 24px var(--s-16, 64px);
  text-align: center;
}
.oco-sales-close__note {
  max-width: 62ch;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--oco-ink-50);
}

/* Encart de retour de paiement — sert aussi bien au « paiement reçu » qu'à
   l'état « inscriptions bientôt ouvertes » quand aucune passerelle n'est
   branchée. Le plugin définit le balisage mais aucun style. */
.oco-checkout-return {
  margin-top: 20px;
  padding: 24px;
  background: var(--oco-cream-soft);
  border-left: 3px solid var(--oco-green);
  border-radius: var(--oco-radius, 0);
  max-width: 62ch;
}
.oco-checkout-return__title {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--oco-ink);
}
.oco-checkout-return p {
  margin: 0 0 12px;
  color: var(--oco-ink-70);
}
.oco-checkout-return .oco-btn {
  margin-top: 4px;
}
/* Rappel réservé à l'administratrice : nettement en retrait du message client. */
.oco-checkout-return__admin {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--oco-line);
  font-size: var(--fs-small, 14px);
  font-style: italic;
  color: var(--oco-ink-50);
}

.oco-catalog-card {
  transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease);
}
.oco-catalog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(62, 58, 54, 0.45);
}
.oco-catalog-card__title {
  color: var(--oco-ink);
}

/* ------------------------------------------------------ Rail / curriculum */
.oco-module.is-open > .oco-module__head {
  background: rgba(168, 88, 46, 0.06);
}
.oco-lesson.is-active {
  font-weight: 600;
}

/* --------------------------------------------------- Corps de leçon (SEO
   the_content() + noscript) : rythme typographique aligné sur system.css. */
.oco-lesson-body h2 {
  font-size: var(--fs-h3, clamp(24px, 2.4vw, 28px));
  line-height: var(--lh-tight, 1.05);
  letter-spacing: var(--ls-snug, -0.03em);
  color: var(--oco-ink);
  margin: var(--s-8, 32px) 0 var(--s-3, 12px);
}
.oco-lesson-body ul,
.oco-lesson-body ol {
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 8px);
}

/* ------------------------------------------------------------ Locked states */
.oco-locked__title {
  color: var(--oco-ink);
}

/* --------------------------------------------------------- Compte / dashboard */
.oco-account__nav a.is-active {
  font-weight: 600;
}

/* Carte « Reprendre » — seul élément au-dessus de la ligne de flottaison du
   dashboard (cf. commentaire du template) : fond terracotta profond, anneaux
   décoratifs, boutons/texte crème. Couvre aussi les états « Bienvenue » et
   « Aucune formation » (même classe côté template — cohérent en tant que
   carte d'action principale dans les trois cas). */
.oco-resume-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--oco-green-deep);
  border: none;
  padding: var(--s-8, 32px);
  gap: var(--s-3, 12px);
}
.oco-resume-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  pointer-events: none;
  background-color: rgba(253, 249, 242, 0.14);
  -webkit-mask: url("../icons/circles-axis.svg") no-repeat center / contain;
  mask: url("../icons/circles-axis.svg") no-repeat center / contain;
}
.oco-resume-card .oco-badge-private {
  align-self: flex-start;
  color: var(--oco-cream);
  /* .4 (héritage olive) tombait sous 3:1 sur le terracotta profond, plus
     foncé que l'ancien --green-deep : remonté à .55 (contraste ~3.2:1,
     seuil non-text WCAG 1.4.11) pour que le contour de la pastille reste
     perceptible. */
  border-color: rgba(253, 249, 242, 0.55);
}
.oco-resume-card .oco-lesson-head__title {
  color: var(--oco-cream);
  font-size: var(--fs-h3, clamp(24px, 2.4vw, 28px));
}
.oco-resume-card > p {
  color: rgba(253, 249, 242, 0.78);
  font-style: italic;
}
.oco-resume-card .oco-progressbar {
  background: rgba(253, 249, 242, 0.2);
}
.oco-resume-card .oco-progressbar > i {
  background: var(--oco-cream);
}
/* Bouton inversé sur la carte de reprise (fond terre cuite → bouton crème).
   Sélecteur porté en (0,4,0) : il doit rester devant le rattrapage de
   couleur des liens plus bas dans ce fichier (`.oco-courses a.oco-btn
   .oco-btn--primary`, (0,3,0)), sinon le libellé repasserait en crème sur
   fond crème — invisible. */
.oco-courses .oco-resume-card a.oco-btn.oco-btn--primary {
  background: var(--oco-cream);
  color: var(--oco-green-deep);
}
.oco-courses .oco-resume-card a.oco-btn.oco-btn--primary:hover {
  background: #ffffff;
}

/* =========================================================================
   Îlot lecteur React (`.oco-courses-player`, build/front/index.css)
   Jeu de tokens shadcn/Tailwind v4 indépendant (oklch), pontage vers les
   mêmes primitives que ci-dessus. `color-mix(in oklch, var(--primary) …)`
   (waveform) accepte n'importe quelle notation de couleur en entrée — le
   remap fonctionne tel quel, aucune limite CSS rencontrée sur le lecteur.
   ========================================================================= */
.oco-courses-player {
  --radius: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --background: var(--cream);
  --foreground: var(--ink);
  --card: var(--cream-soft);
  --card-foreground: var(--ink);
  --border: var(--line-terra);
  --input: var(--line-terra);
  --muted: var(--card);
  --muted-foreground: var(--ink-70);
  --primary: var(--terracotta);
  --primary-foreground: var(--cream);
  --secondary: var(--card);
  --secondary-foreground: var(--terracotta-deep);
  --accent: var(--card);
  --accent-foreground: var(--terracotta-deep);
  --ring: var(--terracotta);
}
/* PAS de bordure sur `.oco-video`.
   Le filet terre cuite d'origine donnait de la tenue à un `<video>` nu posé
   sur du crème. Le lecteur est désormais un cadre arrondi rempli d'encre :
   ce filet d'un pixel se lit comme une bordure parasite autour de l'image,
   et c'est lui qui faisait paraître le conteneur 2px plus large que le
   lecteur (560 contre 558). Ne pas le remettre. */

/* ---------------------------------------------- Boutons shadcn (cadres noirs)
   `front/index.css` du plugin N'IMPORTE PAS le preflight Tailwind (choix
   assumé côté plugin pour ne pas fuiter un reset global dans le thème hôte).
   Conséquence concrète, indépendante du repaint --border/--input ci-dessus :
   - variante "outline" (bouton ×1 du lecteur, "Terminé" une fois complété) :
     en mode clair sa classe est juste `border` (LARGEUR seule, sans utilitaire
     de couleur — le `border-input` shadcn n'est appliqué qu'en `dark:`) ;
     la couleur retombe donc sur `currentColor`, c'est-à-dire le texte
     (`--foreground`/encre) → cadre visiblement sombre, quelle que soit la
     valeur de `--border`/`--input` repeinte plus haut.
   - variantes "ghost"/"default" (⏪15s, ⏩30s, grand bouton play/pause,
     "Marquer comme terminé") : AUCUNE classe de bordure, donc c'est le
     cadre UA natif du navigateur (gris foncé/quasi noir) qui s'affiche,
     puisqu'aucun preflight n'est venu le mettre à zéro.
   Fix : neutraliser le cadre natif sur tous les boutons du composant
   (`data-slot="button"`, exposé par `<Button>`), puis ne réintroduire un
   filet fin que pour `data-variant="outline"`, dans les tons terracotta —
   jamais `border: none` en dur sur `.oco-audio__btn`/`.oco-mark-complete`
   spécifiquement : la règle générique couvre tout bouton shadcn présent ou
   futur dans cet îlot sans avoir à lister chaque composant. */
.oco-courses-player [data-slot="button"] {
  border-style: solid;
  border-width: 0;
  border-color: transparent;
}
.oco-courses-player [data-slot="button"][data-variant="outline"] {
  border-width: 1px;
  border-color: var(--line-terra);
}
.oco-courses-player [data-slot="button"][data-variant="outline"]:hover {
  border-color: var(--terracotta);
}

/* Sonner (notifications « leçon terminée », etc.) est portalé sur <body>,
   hors de `.oco-courses-player` — pont de tokens direct, seul point du
   lecteur qui ne peut pas être atteint par un simple scope `.oco-courses`. */
[data-sonner-toaster] {
  --normal-bg: var(--cream-soft);
  --normal-text: var(--ink);
  --normal-border: var(--line-terra);
  --border-radius: 0px;
}

/* =========================================================================
   Espace Formation — structure du prototype validé
   (~/oco-proto/Espace Formation.html, assets/formation.css porté ci-dessous)

   Porté quasi tel quel depuis le prototype, avec :
   - variante B "parcours" (barre haute `.ptop`, timeline `.tl`) : HORS
     SCOPE, non reprise (le thème n'a que la variante A "sidebar"). Le
     mobile (`.mtop`/`.mtabs`) et la barre de lecture persistante
     (`.playbar`) SONT repris (cf. rapport de livraison) ;
   - tout scopé sous `.oco-courses` (jamais de sélecteur nu `.side`/`.phead`
     hors de ce wrapper) ;
   - NOTE IMPORTANTE : à l'intérieur de `.oco-courses-player` (îlot React du
     lecteur, bloc shadcn ci-dessus), `--accent` est déjà redéfini par ce
     bloc pour l'usage Tailwind interne (`--accent: var(--card)`) — les
     règles ci-dessous qui doivent s'appliquer DANS cet îlot utilisent donc
     `var(--terracotta)`/`var(--terracotta-deep)` directement, jamais `var(--accent)`/
     `var(--feature-bg)`, pour ne pas hériter la mauvaise valeur.
   ========================================================================= */

/* ---------- Eyebrow / petits libellés ---------- */
.oco-courses .f-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.oco-courses .f-meta { font-size: 14px; color: var(--ink-50); letter-spacing: -.01em; }
.oco-courses .f-meta--it { font-style: italic; }

/* ---------- Structure générale : SideNav + colonne principale ---------- */
.oco-espace { display: flex; flex-direction: row; min-height: 100vh; background: var(--page-bg); }
.oco-espace .main { flex: 1; min-width: 0; }
.oco-espace .wrap-f { width: 100%; max-width: 980px; margin: 0; padding: 0 56px 80px; }
/* La leçon est CENTRÉE dans la zone principale (contenu plus centré), pas
   collée à gauche sous le fil d'Ariane. */
.oco-espace .wrap-f.lesson { max-width: 1080px; margin: 0 auto; }
@media (max-width: 1100px) { .oco-espace .wrap-f { padding: 0 36px 60px; } }
@media (max-width: 720px) { .oco-espace .wrap-f { padding: 0 22px 48px; } }

.oco-courses .side {
  display: flex; flex-direction: column; gap: 0; width: 264px; flex: none; min-height: 100vh;
  position: sticky; top: 0; align-self: flex-start; background: var(--cream-bg);
  border-right: 1px solid var(--accent-35); padding: 36px 0 28px; max-height: 100vh; overflow-y: auto;
}
@media (max-width: 880px) {
  .oco-espace { flex-direction: column; }
  /* Sous 880px la sidebar disparaît complètement — remplacée par `.mtop`
     (barre haute) + `.mtabs` (onglets bas), ci-dessous. */
  .oco-courses .side { display: none; }
}
.oco-courses .side__brand { padding: 0 30px 30px; display: flex; flex-direction: column; gap: 6px; }
.oco-courses .side__name { font-family: var(--font-display); font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
.oco-courses .side__sub { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.oco-courses .side__group { padding: 18px 18px 6px; }
.oco-courses .side__label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50);
  padding: 0 12px 10px; font-weight: 700;
}
.oco-courses .side__item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  font-size: 15.5px; letter-spacing: -.01em; color: var(--ink-70); padding: 11px 12px;
  border-left: 2px solid transparent; transition: background .15s ease, color .15s ease; text-decoration: none;
}
.oco-courses .side__item svg { width: 18px; height: 18px; color: var(--accent); flex: none; opacity: .85; }
.oco-courses .side__item:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.oco-courses .side__item.is-on { background: var(--white); color: var(--ink); border-left: 2px solid var(--accent); }
.oco-courses .side__item .side__pct { margin-left: auto; font-size: 12px; color: var(--ink-50); font-style: italic; white-space: nowrap; flex: none; }
.oco-courses .side__foot {
  margin-top: auto; padding: 24px 30px 0; border-top: 1px solid var(--accent-35);
  display: flex; flex-direction: column; gap: 10px;
}
.oco-courses .side__avatar { display: flex; align-items: center; gap: 12px; }
.oco-courses .side__avatar-dot {
  width: 34px; height: 34px; border-radius: var(--radius-round); background: var(--accent-15);
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--accent); font-weight: 700;
}
.oco-courses .side__avatar small { display: block; font-size: 12px; color: var(--ink-50); font-style: italic; white-space: nowrap; }

/* ---------- Mobile (<880px) : barre haute + onglets bas, remplace la sidebar ---------- */
.oco-courses { --mtabs-h: 64px; }
.oco-courses .mtop { display: none; }
.oco-courses .mtabs { display: none; }
@media (max-width: 880px) {
  .oco-courses .mtop {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 40; height: 60px; padding: 0 22px;
    background: color-mix(in srgb, var(--page-bg) 90%, transparent);
    backdrop-filter: blur(14px); border-bottom: 1px solid var(--accent-35);
  }
  .oco-courses .mtop .side__name { font-size: 18px; }
  .oco-courses .mtop .side__avatar-dot { width: 30px; height: 30px; font-size: 13px; }
  .oco-courses .mtabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--mtabs-h, 64px);
    background: var(--cream-bg); border-top: 1px solid var(--accent-35);
  }
  .oco-espace .main { padding-bottom: 86px; }
}
.oco-courses .mtabs__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; cursor: pointer; font-family: var(--font-body); text-decoration: none;
  font-size: 10.5px; letter-spacing: 0; color: var(--ink-50); padding: 0 2px; border-top: 2px solid transparent;
  /* 5 colonnes : le libellé ne doit jamais passer sur deux lignes ni déborder. */
  min-width: 0; text-align: center;
}
.oco-courses .mtabs__item span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oco-courses .mtabs__item svg { width: 20px; height: 20px; color: currentColor; }
.oco-courses .mtabs__item.is-on { color: var(--accent); border-top: 2px solid var(--accent); }

/* ---------- En-têtes de page ---------- */
.oco-courses .phead { padding: 64px 0 18px; display: flex; flex-direction: column; gap: 14px; }
.oco-courses .phead h1 {
  font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 42px); font-weight: 400;
  line-height: 1.06; letter-spacing: -.03em; color: var(--ink); margin: 0;
}
.oco-courses .phead p { font-size: 17px; line-height: 1.55; color: var(--ink-70); margin: 0; max-width: 60ch; }
.oco-courses .phead p em { font-style: italic; }
@media (max-width: 720px) { .oco-courses .phead { padding: 40px 0 12px; } }

/* `.phead` "Mes échanges" — le seul `.phead` du thème avec une action à
   droite (bouton "Écrire un message"), d'où le passage en ligne au lieu de
   la colonne par défaut. Scopé à `.oco-messages-toolbar` pour ne jamais
   affecter les autres `.phead` (accueil de formation, etc.). */
.oco-courses .phead.oco-messages-toolbar { flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.oco-courses .phead.oco-messages-toolbar > .btn { flex: none; margin-top: 6px; }

.oco-courses .crumb {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; color: var(--ink-50); padding: 0; margin-bottom: 4px;
  transition: color .15s ease; text-decoration: none;
}
.oco-courses .crumb svg { width: 15px; height: 15px; color: var(--accent); }
.oco-courses .crumb:hover { color: var(--accent); }
/* Le crumb-bar est déjà dans `.wrap-f.lesson` (padding gauche partagé avec la
   grille → aligné sur le titre) ; petit espace sous le crumb pour le coller
   au kicker/titre. */
.oco-courses .oco-crumb-bar { padding-top: 0; margin-bottom: 16px; }

/* ---------- Barre de progression fine (cartes/dlist) ---------- */
.oco-courses .pbar { height: 3px; background: var(--accent-15); position: relative; overflow: hidden; }
.oco-courses .pbar__fill { position: absolute; inset: 0; right: auto; background: var(--accent); transition: width .5s ease; }
/* Bloc barre + légende sous le `.phead` de l'accueil de formation
   (`single-course.php`) — largeur contrainte, comme dans la maquette. */
.oco-courses .phead__progress { max-width: 420px; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* ---------- Carte "Reprendre" ---------- */
.oco-courses .resume {
  background: var(--feature-bg); color: var(--paper); padding: 34px 38px; position: relative;
  overflow: hidden; display: flex; align-items: center; gap: 30px; margin-top: 30px; cursor: pointer;
  border: none; width: 100%; text-align: left; font-family: var(--font-body); text-decoration: none;
  transition: filter .2s ease;
}
.oco-courses .resume:hover { filter: brightness(1.05); }
.oco-courses .resume__rings {
  position: absolute; right: -70px; top: 50%; transform: translateY(-50%);
  width: 300px; height: 300px; pointer-events: none; opacity: .35;
  background-color: rgba(253, 249, 242, .5);
  -webkit-mask: url('../icons/circles-axis.svg') no-repeat center / contain;
  mask: url('../icons/circles-axis.svg') no-repeat center / contain;
}
.oco-courses .resume__body { display: flex; flex-direction: column; gap: 9px; position: relative; flex: 1; min-width: 0; }
/* Kicker/meta en crème translucide sur --feature-bg (terracotta profond,
   plus sombre que l'ancien --green-deep) : opacités remontées à .82/.78
   pour repasser au-dessus de 4.5:1 (mesuré ~5.0 / ~4.7) — .65/.7 tombaient
   à ~3.8/4.1, sous le seuil AA pour du texte de cette taille. */
.oco-courses .resume__kicker { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(253, 249, 242, .82); }
.oco-courses .resume__title { font-family: var(--font-display); font-size: 25px; letter-spacing: -.02em; line-height: 1.1; }
.oco-courses .resume__meta { font-size: 14px; font-style: italic; color: rgba(253, 249, 242, .78); }
.oco-courses .resume__play {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: var(--radius-round);
  background: rgba(253, 249, 242, .14);
  /* .4 (héritage olive) sous 3:1 sur le terracotta profond -> .55 pour que
     le contour du halo reste visible autour de l'icône (déjà en pleine
     opacité, donc lisible en soi, mais le halo participe à l'affordance
     "bouton"). */
  border: 1px solid rgba(253, 249, 242, .55);
  display: flex; align-items: center; justify-content: center;
}
.oco-courses .resume__play svg { width: 22px; height: 22px; color: var(--paper); margin-left: 3px; }
@media (max-width: 640px) { .oco-courses .resume { padding: 26px 24px; gap: 18px; } .oco-courses .resume__title { font-size: 20px; } }

/* ---------- Grille "Mes formations" ---------- */
.oco-courses .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
@media (max-width: 860px) { .oco-courses .fgrid { grid-template-columns: 1fr; } }
.oco-courses .fcard {
  background: var(--white); border: 1px solid var(--accent-35); box-shadow: var(--shadow-card);
  padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; text-align: left;
  font-family: var(--font-body); transition: transform .25s ease, box-shadow .25s ease; position: relative;
  overflow: hidden; text-decoration: none;
}
.oco-courses .fcard:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(62, 58, 54, .1); }
.oco-courses .fcard__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.oco-courses .fcard__title { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.oco-courses .fcard__desc { font-size: 15px; line-height: 1.55; color: var(--ink-70); }
.oco-courses .fcard__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.oco-courses .fcard__stats { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.oco-courses .fcard__pct { font-size: 13px; font-style: italic; color: var(--ink-50); }
.oco-courses .fcard__go { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); margin-top: 6px; text-decoration: none; }
.oco-courses .fcard__go svg { width: 16px; height: 16px; color: var(--accent); transition: transform .2s ease; }
.oco-courses .fcard:hover .fcard__go svg { transform: translateX(4px); }
/* `.fcard` a deux destinations distinctes (titre/carte -> accueil de la
   formation, `.fcard__go` -> leçon en cours/checkout) : plus un `<a>` unique
   (imbrication de liens invalide), un "stretched link" transparent sous le
   CTA (voir `account/dashboard.php`). */
.oco-courses .fcard__link { position: absolute; inset: 0; z-index: 0; }
.oco-courses .fcard__go { position: relative; z-index: 1; }

/* ---------- Sections titrées ---------- */
.oco-courses .hsec { padding: 46px 0 0; }
.oco-courses .hsec__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  border-bottom: 1px solid var(--accent-35); padding-bottom: 12px;
}
.oco-courses .hsec__title { font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; color: var(--ink); flex: none; white-space: nowrap; }

/* ---------- Ressources / notes en liste ---------- */
.oco-courses .rlist { display: flex; flex-direction: column; margin-top: 8px; }
.oco-courses .rrow {
  display: flex; align-items: center; gap: 18px; padding: 17px 4px; border-bottom: 1px solid var(--accent-15);
  background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; width: 100%;
  text-align: left; font-family: var(--font-body); transition: background .15s ease; text-decoration: none;
}
.oco-courses .rrow:hover { background: rgba(255, 255, 255, .55); }
.oco-courses .rrow__kind {
  flex: none; width: 46px; height: 46px; background: var(--accent-15); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.oco-courses .rrow__kind svg { width: 20px; height: 20px; }
.oco-courses .rrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oco-courses .rrow__title { font-size: 16px; color: var(--ink); letter-spacing: -.01em; }
.oco-courses .rrow__meta { font-size: 13px; font-style: italic; color: var(--ink-50); }
.oco-courses .rrow__note { font-size: 14px; line-height: 1.5; color: var(--ink-70); white-space: normal; }
/* Colonne de droite optionnelle d'une `.rrow` (montant + statut de
   l'historique d'achats sur `/mon-espace/compte/`) — `.rrow__body` garde
   `flex:1`, cette colonne reste à sa largeur naturelle, alignée à droite. */
.oco-courses .rrow__aside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 15px; color: var(--ink); text-align: right; }

/* ---------- Mon compte : panneau d'infos + actions ---------- */
.oco-courses .oco-account-card { margin-top: 30px; border: 1px solid var(--line-terra); background: var(--card); }
.oco-courses .oco-account-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 22px; border-bottom: 1px solid var(--line-terra-soft, var(--line-terra)); }
.oco-courses .oco-account-row:last-child { border-bottom: none; }
.oco-courses .oco-account-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); flex: none; }
/* Formulaires « Modifier mes informations / mot de passe / e-mail » —
   réutilise `.oco-auth__form`/`.oco-auth__group`/`.field` du parcours de
   connexion (mêmes tokens, même look) ; cette classe ne fait qu'ajouter
   l'espacement de section et plafonner la largeur (les champs texte n'ont
   pas besoin de courir sur les ~900px de `.wrap-f`). */
.oco-courses .oco-account-form { margin-top: 20px; max-width: 440px; }
.oco-courses .oco-account-value { font-size: 16px; color: var(--ink); text-align: right; }
.oco-courses .oco-account-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- Liste des leçons d'une formation ---------- */
.oco-courses .dlist { display: flex; flex-direction: column; margin-top: 22px; border-top: 1px solid var(--accent-35); }
.oco-courses .drow {
  display: flex; align-items: center; gap: 20px; padding: 20px 8px; border-bottom: 1px solid var(--accent-15);
  background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; width: 100%;
  text-align: left; font-family: var(--font-body); transition: background .15s ease; text-decoration: none;
}
.oco-courses .drow:hover { background: rgba(255, 255, 255, .55); }
.oco-courses .drow.is-locked { cursor: default; opacity: .55; }
.oco-courses .drow.is-locked:hover { background: none; }
.oco-courses .drow__num {
  flex: none; width: 42px; height: 42px; border-radius: var(--radius-round);
  border: 1px solid var(--accent-35); color: var(--accent); display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-size: 16px;
}
.oco-courses .drow.is-done .drow__num { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.oco-courses .drow.is-current .drow__num { background: var(--accent-15); border-color: var(--accent); }
.oco-courses .drow__num svg { width: 16px; height: 16px; }
.oco-courses .drow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oco-courses .drow__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-50); }
.oco-courses .drow.is-current .drow__kicker { color: var(--accent); }
.oco-courses .drow__title { font-family: var(--font-display); font-size: 19px; letter-spacing: -.015em; color: var(--ink); }
.oco-courses .drow__state { flex: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-style: italic; color: var(--ink-50); }
.oco-courses .drow__state svg { width: 16px; height: 16px; color: var(--accent); }
.oco-courses .drow.is-locked .drow__state svg { color: var(--ink-50); }

/* ---------- Page de leçon : grille lecteur + rail ---------- */
.oco-courses .lesson { padding-top: 24px; padding-bottom: 90px; }
.oco-courses .lesson__grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 54px; margin-top: 0; align-items: start; }
@media (max-width: 980px) { .oco-courses .lesson__grid { grid-template-columns: 1fr; gap: 40px; } }
.oco-courses .lbody { display: flex; flex-direction: column; gap: 0; max-width: 640px; }

/* En-tête de leçon (`partials/lesson-player-mount.php`, NON surchargé —
   restylé ici pour prendre l'allure `.phead`/`.lesson__kicker`). */
.oco-courses .lbody .oco-lesson-head { display: flex; flex-direction: column; gap: 10px; padding: 0 0 18px; }
.oco-courses .lbody .oco-lesson-head__crumb { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.oco-courses .lbody .oco-lesson-head__title {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); font-weight: 400;
  line-height: 1.08; letter-spacing: -.03em; color: var(--ink); margin: 0;
}
.oco-courses .lbody .oco-lesson-head__meta { font-size: 14px; color: var(--ink-50); font-style: italic; }

/* Pied de leçon (prev/next) — allure `.lnav`. */
.oco-courses .lbody .oco-lesson-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 46px;
  border-top: 1px solid var(--accent-35); padding-top: 26px; flex-wrap: wrap;
}
.oco-courses .lbody .oco-lesson-nav { font-size: 15px; color: var(--ink); text-decoration: none; transition: color .15s ease; }
.oco-courses .lbody .oco-lesson-nav:hover { color: var(--accent); }

/* Corps de leçon éditorial (transcription/pratique via `LessonTabs`, ou
   `the_content()` d'une leçon "article"). */
/* Titres de section : grands, avec effet de PROXIMITÉ — gros espace AVANT
   (sépare deux sections), petit espace APRÈS (le titre reste collé à son
   paragraphe). */
.oco-courses .oco-lesson-body h2 {
  font-family: var(--font-display); font-size: 27px; font-weight: 400; letter-spacing: -.02em;
  color: var(--ink); margin: 54px 0 12px; line-height: 1.15;
}
/* WordPress pose `margin-block-start: 24px` sur tout enfant d'un groupe
   `is-layout-flow` (règle `:where()` de son support de mise en page, injectée
   dans la page — donc invisible dans une page d'aperçu statique). Dans le
   corps de leçon, c'est notre feuille qui décide de l'espacement : on annule,
   AVANT nos propres règles pour ne pas les écraser. */
.oco-courses .oco-lesson-body .is-layout-flow > *,
.oco-courses .oco-lesson-body .wp-block-group > * { margin-block-start: 0; }

/* Le filet de séparation est porté par le titre de section. Il doit se lire
   comme un séparateur NEUTRE : autant d'air au-dessus qu'en dessous.
   `.oco-lesson-body` étant un conteneur flex avec `gap: 16px` (CSS du plugin),
   l'écart réel au-dessus du filet vaut gap + margin-top — d'où 24 px de marge
   pour 40 px effectifs, à égalité avec les 40 px de padding sous le filet. */
.oco-courses .oco-lesson-body h3 {
  font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -.02em;
  color: var(--ink); margin: 24px 0 12px; line-height: 1.15;
  padding-top: 40px; border-top: 1px solid var(--line-terra);
}
.oco-courses .oco-lesson-body h2:first-child,
.oco-courses .oco-lesson-body h3:first-child { margin-top: 0; }
.oco-courses .oco-lesson-body h3:first-child { border-top: 0; padding-top: 0; }
/* Sous-titre : légende d'une section, intitulé d'un encadré ou d'une colonne. */
.oco-courses .oco-lesson-body h4 {
  font-family: var(--font-display); font-size: 20px; font-weight: 400; letter-spacing: -.015em;
  color: var(--ink); margin: 32px 0 8px; line-height: 1.25;
}
/* LOI DE PROXIMITÉ — le premier élément d'une section se colle à son titre.
   Encadrés et grilles portent leur propre marge haute, qui sinon rouvrait
   l'écart et rendait indécidable à quelle section appartient un bloc. */
.oco-courses .oco-lesson-body h2 + *,
.oco-courses .oco-lesson-body h3 + *,
.oco-courses .oco-lesson-body h4 + * { margin-top: 0; }
.oco-courses .oco-lesson-body p { font-size: 17px; line-height: 1.7; color: var(--ink-70); margin: 0 0 14px; }
/* Le thème reset les listes (list-style:none) globalement — on les restaure
   explicitement dans le corps de leçon, sinon les puces disparaissent. */
/* display:block est REQUIS : un conteneur `display:flex` (hérité du plugin)
   blockifie les <li> et supprime leurs puces. */
.oco-courses .oco-lesson-body ul, .oco-courses .oco-lesson-body ol { display: block; margin: 0 0 16px; padding-left: 1.4em; color: var(--ink-70); font-size: 16.5px; line-height: 1.6; }
.oco-courses .oco-lesson-body ul { list-style: disc outside; }
.oco-courses .oco-lesson-body ol { list-style: decimal outside; }
.oco-courses .oco-lesson-body li { margin: 0 0 8px; display: list-item; }
/* var(--terracotta) et NON var(--accent) : dans le scope `.oco-courses-player`
   (bloc shadcn), --accent est redéfini en clair → le marqueur devenait
   quasi-blanc, invisible sur le crème. C'était ça, la puce « manquante ». */
.oco-courses .oco-lesson-body li::marker { color: var(--terracotta); }
.oco-courses .oco-lesson-body blockquote {
  border-left: 2px solid var(--accent-35); padding: 6px 0 6px 22px; margin: 26px 0;
  font-size: 19px; line-height: 1.5; font-style: italic; color: var(--ink);
}

/* Audio/vidéo pas encore uploadé par la créatrice : note DISCRÈTE en ligne,
   jamais un état vide plein écran — le corps éditorial reste le vrai contenu. */
.oco-courses .oco-media-pending {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 13px 16px;
  font-size: 13.5px; font-style: italic; color: var(--ink-50);
  background: color-mix(in srgb, var(--terracotta) 8%, transparent); border-left: 2px solid var(--terracotta);
}
.oco-courses .oco-media-pending__icon { width: 15px; height: 15px; color: var(--terracotta); flex: none; }

/* Transcription repliable — discrète, ne concurrence pas le corps de séance. */
.oco-courses .oco-transcript { margin-top: 30px; border-top: 1px solid var(--line-terra); padding-top: 18px; }
.oco-courses .oco-transcript__toggle {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-style: italic; color: var(--ink-50); transition: color .15s ease;
}
.oco-courses .oco-transcript__toggle::-webkit-details-marker { display: none; }
.oco-courses .oco-transcript__toggle::before { content: "+"; color: var(--terracotta); font-style: normal; font-size: 15px; }
.oco-courses .oco-transcript[open] .oco-transcript__toggle::before { content: "–"; }
.oco-courses .oco-transcript__toggle:hover { color: var(--terracotta); }
.oco-courses .oco-transcript__body {
  margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-70); white-space: pre-line;
}

/* Bloc « Quiz » — auto-évaluation (`src/front/components/QuizPlayer.tsx`).
   Le registre reste doux (pas de note en gros, pas de pourcentage, l'accent
   sur l'explication) MAIS le verdict doit se lire d'un coup d'œil : une
   première version tout en terracotta ne distinguait pas assez juste de
   faux. D'où deux couleurs sémantiques dédiées ci-dessous, désaturées pour
   rester dans le registre chaud du site plutôt que le vert/rouge d'interface.
   `--green` global (#818b69) est trop clair sur crème pour porter un verdict :
   ces tokens sont plus soutenus, testés lisibles sur `--cream-soft`.
   Le code couleur n'est JAMAIS seul : chaque état porte aussi une icône
   (rendue par le composant) et un glyphe ✓/✕ en CSS, pour rester lisible en
   vision daltonienne. */
.oco-courses {
  --quiz-ok:      #5c7a4a;
  --quiz-ok-line: rgba(92, 122, 74, 0.55);
  --quiz-ok-bg:   rgba(92, 122, 74, 0.09);
  --quiz-ko:      #b0413a;
  --quiz-ko-line: rgba(176, 65, 58, 0.50);
  --quiz-ko-bg:   rgba(176, 65, 58, 0.08);
}
.oco-courses .oco-quiz { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line-terra); }
.oco-courses .oco-quiz__title { font-family: var(--font); font-size: 20px; font-weight: 400; letter-spacing: -.015em; color: var(--ink); margin: 0 0 6px; }
.oco-courses .oco-quiz__empty { font-size: 15px; font-style: italic; color: var(--ink-50); margin: 0; }
/* Espacement de proximité : l'intitulé colle à ses réponses, les questions
   respirent entre elles. */
.oco-courses .oco-quiz__questions { display: flex; flex-direction: column; gap: 38px; margin-top: 26px; }
.oco-courses .oco-quiz__question { display: flex; flex-direction: column; gap: 12px; }
.oco-courses .oco-quiz__prompt { display: flex; gap: 10px; font-size: 16.5px; line-height: 1.5; color: var(--ink); margin: 0; }
.oco-courses .oco-quiz__prompt-index { flex: none; color: var(--terracotta); font-style: italic; }
.oco-courses .oco-quiz__choices { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.oco-courses .oco-quiz__choice {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
  background: var(--cream-soft); border: 1px solid var(--line-terra);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.oco-courses .oco-quiz__choice:hover { border-color: var(--terracotta); }
.oco-courses .oco-quiz__choice.is-selected { border-color: var(--terracotta); background: var(--cream-bg); }
/* Après correction. `.is-correct` = c'était LA bonne réponse (qu'elle ait été
   cochée ou non) ; `.is-incorrect` = l'apprenante l'a cochée et c'était faux.
   Un choix ni bon ni coché reste neutre : on éclaire le chemin, on ne
   surligne pas tout l'écran. */
.oco-courses .oco-quiz__choice.is-correct,
.oco-courses .oco-quiz__choice.is-incorrect { position: relative; padding-right: 40px; }
.oco-courses .oco-quiz__choice.is-correct::after,
.oco-courses .oco-quiz__choice.is-incorrect::after {
  position: absolute; right: 14px; top: 11px; font-size: 15px; line-height: 1;
}
.oco-courses .oco-quiz__choice.is-correct {
  border-color: var(--quiz-ok-line); background: var(--quiz-ok-bg);
  box-shadow: inset 3px 0 0 var(--quiz-ok);
}
.oco-courses .oco-quiz__choice.is-correct::after { content: "\2713"; color: var(--quiz-ok); }
.oco-courses .oco-quiz__choice.is-correct .oco-quiz__choice-label { color: var(--ink); }
.oco-courses .oco-quiz__choice.is-incorrect {
  border-color: var(--quiz-ko-line); background: var(--quiz-ko-bg);
  box-shadow: inset 3px 0 0 var(--quiz-ko);
}
.oco-courses .oco-quiz__choice.is-incorrect::after { content: "\2715"; color: var(--quiz-ko); }
.oco-courses .oco-quiz__choice.is-incorrect .oco-quiz__choice-label { color: var(--ink); }
/* Une fois corrigé, plus rien n'est cliquable : le survol ne doit plus
   suggérer le contraire. */
.oco-courses .oco-quiz__choice.is-correct:hover,
.oco-courses .oco-quiz__choice.is-incorrect:hover { border-color: inherit; }
.oco-courses .oco-quiz__choice.is-correct:hover { border-color: var(--quiz-ok-line); }
.oco-courses .oco-quiz__choice.is-incorrect:hover { border-color: var(--quiz-ko-line); }
.oco-courses .oco-quiz__choice-input { margin: 3px 0 0; accent-color: var(--terracotta); flex: none; }
.oco-courses .oco-quiz__choice-label { font-size: 15.5px; line-height: 1.5; color: var(--ink-70); }
.oco-courses .oco-quiz__feedback {
  display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 0; padding: 12px 14px;
  border-left: 3px solid var(--line-terra);
  font-size: 15px; line-height: 1.6; color: var(--ink-70); font-style: italic;
}
.oco-courses .oco-quiz__feedback--correct { border-left-color: var(--quiz-ok); background: var(--quiz-ok-bg); }
.oco-courses .oco-quiz__feedback--incorrect { border-left-color: var(--quiz-ko); background: var(--quiz-ko-bg); }
.oco-courses .oco-quiz__feedback-icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.oco-courses .oco-quiz__feedback--correct .oco-quiz__feedback-icon { color: var(--quiz-ok); }
.oco-courses .oco-quiz__feedback--incorrect .oco-quiz__feedback-icon { color: var(--quiz-ko); }
.oco-courses .oco-quiz__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-terra); }
.oco-courses .oco-quiz__score { font-size: 15.5px; color: var(--ink-70); font-style: italic; }

/* Verdict de la tentative (réussi / à retenter / verrouillé). Volontairement
   PLUS calme que la correction question par question : celle-ci porte déjà
   le vert et le rouge, un second niveau d'alerte au-dessus ne ferait que
   crier. Le ton `locked` n'est ni vert ni rouge — attendre n'est pas
   échouer, c'est une information. */
.oco-courses .oco-quiz__attempt { display: flex; flex-direction: column; gap: 4px; margin-top: 26px; padding: 14px 16px; border-left: 3px solid var(--line-terra); background: var(--cream-soft); }
.oco-courses .oco-quiz__attempt--success { border-left-color: var(--quiz-ok); background: var(--quiz-ok-bg); }
.oco-courses .oco-quiz__attempt--info { border-left-color: var(--terracotta); background: var(--cream-bg); }
.oco-courses .oco-quiz__attempt--locked { border-left-color: var(--ink-50); background: var(--cream-bg); }
.oco-courses .oco-quiz__outcome { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; color: var(--ink); }
.oco-courses .oco-quiz__attempt--success .oco-quiz__outcome { color: var(--quiz-ok); }
.oco-courses .oco-quiz__outcome-icon { width: 15px; height: 15px; flex: none; }
.oco-courses .oco-quiz__locked-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; font-style: italic; color: var(--ink-50); }
.oco-courses .oco-quiz__error { margin: 12px 0 0; font-size: 14px; font-style: italic; color: var(--terracotta-deep); }

/* Bloc « Ressources à télécharger » — documents joints à la leçon
   (`src/front/components/LessonResources.tsx`). Chaque lien pointe une URL
   signée et expirante, jamais un fichier public : visuellement c'est une
   simple liste, mais chaque clic repasse par le contrôle d'accès serveur.
   Même sobriété que « Mes notes » juste en dessous, et mêmes tokens
   var(--terracotta)/var(--line-terra) — immunisés au shadowing de --accent
   dans le scope shadcn `.oco-courses-player`. */
.oco-courses .oco-resources { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line-terra); }
.oco-courses .oco-resources__title { font-family: var(--font); font-size: 20px; font-weight: 400; letter-spacing: -.015em; color: var(--ink); margin: 0 0 14px; }
.oco-courses .oco-resources__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.oco-courses .oco-resources__item { margin: 0; }
.oco-courses .oco-resources__link {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--cream-soft); border: 1px solid var(--line-terra);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.oco-courses .oco-resources__link:hover { border-color: var(--terracotta); background: var(--cream-bg); }
.oco-courses .oco-resources__icon { width: 18px; height: 18px; flex: none; color: var(--terracotta); }
/* `min-width: 0` : sans lui, un nom de fichier long refuse de se tronquer
   et pousse la pastille de téléchargement hors de la carte. */
.oco-courses .oco-resources__name { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oco-courses .oco-resources__meta { flex: none; font-size: 12.5px; font-style: italic; color: var(--ink-50); }
.oco-courses .oco-resources__download-icon { width: 16px; height: 16px; flex: none; color: var(--ink-50); transition: color .15s ease; }
.oco-courses .oco-resources__link:hover .oco-resources__download-icon { color: var(--terracotta); }
@media (max-width: 560px) {
  /* Le poids/format passe sous le nom plutôt que de l'écraser. */
  .oco-courses .oco-resources__link { flex-wrap: wrap; }
  .oco-courses .oco-resources__name { flex: 1 1 100%; order: 1; white-space: normal; }
  .oco-courses .oco-resources__icon { order: 0; }
  .oco-courses .oco-resources__meta { order: 2; }
  .oco-courses .oco-resources__download-icon { order: 3; margin-left: auto; }
}

/* Bloc « Mes notes » — champ texte autosauvegardé (remplace les onglets
   Transcription/Comment pratiquer). var(--terracotta) partout : immunisé au
   shadowing de --accent dans le scope shadcn `.oco-courses-player`. */
.oco-courses .oco-notes { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line-terra); }
.oco-courses .oco-notes__title { font-family: var(--font); font-size: 20px; font-weight: 400; letter-spacing: -.015em; color: var(--ink); margin: 0 0 14px; }
.oco-courses .oco-notes__field {
  width: 100%; min-height: 140px; resize: vertical; box-sizing: border-box;
  background: var(--cream-soft); border: 1px solid var(--line-terra);
  padding: 16px; font-family: var(--font); font-size: 15.5px; line-height: 1.6; color: var(--ink);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.oco-courses .oco-notes__field:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 15%, transparent); }
.oco-courses .oco-notes__field::placeholder { font-style: italic; color: var(--ink-50); }
.oco-courses .oco-notes__hint { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 12.5px; font-style: italic; color: var(--ink-50); }
.oco-courses .oco-notes__hint-icon { width: 13px; height: 13px; color: var(--terracotta); flex: none; }

/* ---------- Rail des leçons (colonne fixe, toujours visible) ---------- */
/* Sommaire du cours : collant pendant qu'on fait défiler la leçon. */
.oco-courses .lrail { display: flex; flex-direction: column; gap: 30px; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; }
@media (max-width: 980px) { .oco-courses .lrail { position: static; max-height: none; overflow: visible; } }
.oco-courses .lrail__box { border: 1px solid var(--accent-35); background: var(--cream-bg); padding: 24px; }
.oco-courses .lrail__box h3 { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.oco-courses .lrail__box .lrail__meta { font-size: 12.5px; font-style: italic; color: var(--ink-50); margin: 0 0 14px; }
.oco-courses .lrail__days { display: flex; flex-direction: column; }
.oco-courses .lrail__day {
  display: flex; align-items: center; gap: 12px; padding: 9px 6px; background: none; border: none;
  cursor: pointer; font-family: var(--font-body); font-size: 14px; color: var(--ink-70); text-align: left;
  transition: background .15s ease; text-decoration: none;
}
.oco-courses .lrail__day:hover { background: rgba(255, 255, 255, .7); }
.oco-courses .lrail__day.is-on { background: var(--white); color: var(--ink); }
.oco-courses .lrail__day.is-locked { opacity: .5; cursor: default; }
.oco-courses .lrail__day.is-locked:hover { background: none; }
.oco-courses .lrail__day svg { flex: none; width: 15px; height: 15px; color: var(--accent); }
.oco-courses .lrail__day .lrail__n { flex: none; width: 22px; font-family: var(--font-display); color: var(--accent); font-size: 14px; }
.oco-courses .lrail__day .lrail__d { margin-left: auto; font-size: 12px; font-style: italic; color: var(--ink-50); }

/* ---------- Bouton texte + flèche (kit.css .btn--link) ---------- */
.oco-courses .btn--link {
  background: none; border: none; padding: 0; color: var(--ink); font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-body);
  text-decoration: none;
}
.oco-courses .btn--link svg { width: 16px; height: 16px; color: var(--accent); transition: transform .2s ease; }
.oco-courses .btn--link:hover { color: var(--accent); }
.oco-courses .btn--link:hover svg { transform: translateX(4px); }

/* =========================================================================
   Upsell (`single-course.php`, accueil de formation) — bloc terracotta pleine
   largeur, rendu UNIQUEMENT quand `_oco_upsell_title` est renseigné (aucune
   donnée aujourd'hui côté Isabelle, cf. rapport de livraison). `--feature-bg`/
   `--paper` sont déjà pontés au niveau `.oco-courses` (tokens ci-dessus,
   pas de shadowing ici : ce bloc n'est jamais dans `.oco-courses-player`).
   Anneaux décoratifs : même technique `mask` que `.oco-resume-card::before`.
   ========================================================================= */
.oco-courses .upsell {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--feature-bg); color: var(--paper);
  padding: 56px 54px; margin: 60px 0 20px;
}
.oco-courses .upsell__rings {
  position: absolute; z-index: -1; right: -90px; bottom: -110px; width: 340px; height: 340px;
  pointer-events: none; background-color: rgba(253, 249, 242, .16);
  -webkit-mask: url("../icons/circles-axis.svg") no-repeat center / contain;
  mask: url("../icons/circles-axis.svg") no-repeat center / contain;
}
.oco-courses .upsell__in { position: relative; max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
/* .75 était juste à la limite (~4.5:1) sur le terracotta profond ; .82
   redonne de la marge pour ce libellé petit/gras/majuscule. */
.oco-courses .upsell .f-eyebrow { color: rgba(253, 249, 242, .82); }
.oco-courses .upsell h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 32px); font-weight: 400;
  letter-spacing: -.025em; line-height: 1.1; margin: 0; color: var(--paper);
}
.oco-courses .upsell p { font-size: 16px; line-height: 1.65; color: rgba(253, 249, 242, .88); margin: 0; }
.oco-courses .upsell__ctas { margin-top: 6px; }
@media (max-width: 640px) { .oco-courses .upsell { padding: 38px 24px; margin: 44px 0 10px; } }

/* =========================================================================
   Lecteur audio (`.oco-audio`, îlot React `src/front/AudioPlayer.tsx`) —
   restylé vers l'allure `.player` du prototype (gros bouton rond terracotta,
   barre linéaire, rangée d'outils). Approximation assumée : la forme
   d'onde réelle (waveform cliquable synchronisée à `<audio>`) est
   CONSERVÉE (fonctionnalité utile, contrairement au décor statique du
   prototype) plutôt que remplacée par une barre plate — cf. rapport de
   livraison pour le détail de ce qui est fidèle vs approximé.
   `--accent`/`--feature-bg` sont shadowés ici (bloc shadcn ci-dessus
   redéfinit `--accent`) : on utilise `var(--terracotta)`/`var(--terracotta-deep)`.
   ========================================================================= */
.oco-courses-player .oco-audio {
  flex-direction: row;
  align-items: center;
  gap: 26px;
  background: var(--cream-bg);
  border: 1px solid var(--line-terra);
  padding: 30px 34px;
}
@media (max-width: 640px) {
  .oco-courses-player .oco-audio { flex-direction: column; align-items: stretch; padding: 22px; gap: 16px; }
}
.oco-courses-player .oco-audio__btn {
  width: 62px;
  height: 62px;
  border-radius: var(--radius-round) !important;
  background: var(--terracotta);
  color: var(--paper);
  flex: none;
}
.oco-courses-player .oco-audio__btn:hover { background: var(--terracotta-deep); }
.oco-courses-player .oco-audio__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.oco-courses-player .oco-wave { height: 30px; gap: 1px; }
.oco-courses-player .oco-wave__bar { background: rgba(168, 88, 46, .2); }
.oco-courses-player .oco-wave__bar.is-played { background: var(--terracotta); }
.oco-courses-player .oco-audio__time-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.oco-courses-player .oco-audio__tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.oco-courses-player .oco-audio__tools button { color: var(--ink-50); }
.oco-courses-player .oco-audio__tools button:hover { color: var(--terracotta); }

/* Notes de leçon (onglet "Mes notes" — shadcn Textarea, LessonTabs.tsx) —
   même traitement que `.notes textarea` du prototype. */
.oco-courses-player .oco-tabs-wrap textarea {
  border-radius: 0 !important;
  border-color: var(--line-terra) !important;
  font-family: var(--font) !important;
}
.oco-courses-player .oco-tabs-wrap textarea:focus-visible { border-color: var(--terracotta) !important; }
.oco-courses-player .oco-tabs-wrap textarea::placeholder { font-style: italic; }

/* =========================================================================
   Barre de lecture persistante (`.playbar`) — îlot JS natif autonome
   (`assets/js/playbar.js`), injecté en fin de `.oco-courses` sur CHAQUE
   écran de l'espace formation (pas seulement la leçon). Depuis
   `assets/js/espace-nav.js` (navigation douce), les clics internes ne
   rechargent plus le document : l'`<audio>` réel d'une leçon en cours de
   lecture est rapatrié (même nœud, pas de re-création) hors de
   `.oco-espace` avant chaque swap — la lecture ne s'interrompt jamais entre
   deux écrans. En dehors d'une leçon, l'ÉTAT (piste, position, en pause)
   reste restauré depuis `localStorage` comme avant.
   ========================================================================= */
/* Conteneur du <audio> rapatrié (voir PlayBarController.relocatePersistentAudio
   dans playbar.js) : invisible mais toujours "connecté" au document — PAS
   `display:none` (certains navigateurs peuvent y associer des heuristiques
   de pause sur les médias), une simple mise hors-écran suffit et n'affecte
   jamais la lecture audio. */
.oco-persisted-audio-holder {
  position: fixed; width: 1px; height: 1px; overflow: hidden;
  left: -9999px; top: -9999px; pointer-events: none;
}
/* La barre démarre APRÈS la sidebar (264px) : elle ne doit jamais la recouvrir
   ni masquer le bloc avatar en pied de colonne. Sous 880px la sidebar
   disparaît, la barre reprend toute la largeur (voir media query plus bas). */
.oco-courses .playbar {
  position: fixed; left: 264px; right: 0; bottom: 0; z-index: 60;
  background: var(--feature-bg); color: var(--paper); display: none;
  align-items: center; gap: 20px; padding: 12px 26px 14px;
  box-shadow: 0 -8px 32px rgba(62, 58, 54, .12);
}
/* Vignette PiP (`playbar.js`, `PlayBarController.videoThumb`) : domicile par
   défaut de l'unique <video> de la session. Masquée par défaut (JS bascule
   `display` selon l'état : aucune piste vidéo, ou piste vidéo actuellement
   empruntée par le lecteur de la page de leçon — voir
   `updateVideoThumbVisibility()`). Format paysage compact, cohérent avec la
   hauteur de la barre (le bouton rond fait déjà 44px). Coins droits, comme
   partout ailleurs dans ce thème. */
.oco-courses .playbar__video {
  flex: none; width: 72px; height: 40px; overflow: hidden;
  background: #000; border: 1px solid rgba(253, 249, 242, .25); display: none;
}
/* Élément <video> unique (`playbar.js`) : remplit son conteneur qu'il soit
   rapatrié dans le lecteur de la page de leçon (`.oco-video`, style du
   plugin — `plugin-courses/src/front/index.css`) ou dans la vignette
   ci-dessus — seul le conteneur décide de la taille, cet élément se
   contente de le remplir. */
.oco-courses .oco-video-fill { display: block; width: 100%; height: 100%; object-fit: cover; }
.oco-courses .playbar__btn {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-round);
  background: var(--paper); border: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: transform .1s ease, filter .15s ease;
}
.oco-courses .playbar__btn:hover { filter: brightness(.96); }
.oco-courses .playbar__btn:active { transform: scale(.96); }
.oco-courses .playbar__btn svg { width: 16px; height: 16px; color: var(--ink); }
.oco-courses .playbar__info {
  flex: none; max-width: 320px; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  background: none; border: none; cursor: pointer; font-family: var(--font-body); text-align: left;
  color: var(--paper); padding: 0; text-decoration: none;
}
/* Idem resume__kicker : .6 tombait à ~3.5:1 sur --feature-bg (terracotta
   profond) — remonté à .82 (~5:1). */
.oco-courses .playbar__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(253, 249, 242, .82); }
.oco-courses .playbar__title {
  display: block; font-family: var(--font-display); font-size: 16.5px; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oco-courses .playbar__info:hover .playbar__title { text-decoration: underline; text-decoration-color: rgba(253, 249, 242, .45); text-underline-offset: 4px; }
.oco-courses .playbar__seek { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
/* .65 tombait à ~3.8:1 sur --feature-bg (terracotta profond) — remonté à
   .78 (~4.7:1). */
.oco-courses .playbar__time { flex: none; font-size: 12px; color: rgba(253, 249, 242, .78); font-variant-numeric: tabular-nums; }
.oco-courses .playbar__bar { flex: 1; height: 4px; background: rgba(253, 249, 242, .22); cursor: pointer; position: relative; }
.oco-courses .playbar__fill { position: absolute; inset: 0; right: auto; background: var(--paper); }
/* Au survol le remplissage doit s'ACCENTUER, pas disparaître : la règle du
   prototype le passait en `--accent` (olive à l'origine, terracotta
   aujourd'hui), soit exactement la couleur de fond de la barre ici — il
   s'effaçait. On reste dans les clairs, quelle que soit la teinte de fond. */
.oco-courses .playbar__bar:hover .playbar__fill { background: #fff; }
.oco-courses .playbar__close { flex: none; background: none; border: none; cursor: pointer; color: rgba(253, 249, 242, .55); padding: 8px; display: flex; transition: color .15s ease; }
.oco-courses .playbar__close svg { width: 17px; height: 17px; }
.oco-courses .playbar__close:hover { color: var(--paper); }

/* La barre ne doit jamais recouvrir la fin du contenu (poussée par `body.has-playbar`, ajoutée en JS). */
body.has-playbar .oco-espace .main { padding-bottom: 96px; }

@media (max-width: 880px) {
  /* Sidebar masquée en mobile → la barre reprend toute la largeur. */
  .oco-courses .playbar { left: 0; gap: 14px; padding: 10px 18px 12px; bottom: var(--mtabs-h, 64px); }
  .oco-courses .playbar__seek { display: none; }
  .oco-courses .playbar__info { flex: 1; max-width: none; }
  /* Vignette réduite : laisse la place au titre tronqué + à la croix sur un écran étroit. */
  .oco-courses .playbar__video { width: 56px; height: 32px; }
  /* Barre au-dessus des onglets bas + espace de contenu combiné (mtabs + playbar). */
  body.has-playbar .oco-espace .main { padding-bottom: 160px; }
}

/* =========================================================================
   Parcours de connexion (connexion / mot de passe oublié / définir un mot
   de passe) — `oco-courses/auth/*.php`, remplace wp-login.php.

   Indépendant du plugin (pas de wrapper `.oco-courses`, pas de dépendance
   au pontage `--accent`/`--oco-*` ci-dessus) : uniquement les tokens GLOBAUX
   du thème (`assets/css/system.css`, toujours chargés) — `--terracotta`,
   `--cream`, `--ink`, `--font`, `--line-terra`. Boutons/champs = classes
   globales déjà existantes (`.btn.btn--terracotta`, `.field`), pas de
   réinvention. Enqueue de ce fichier sur ces 3 pages : voir functions.php
   (`ib_auth_is_auth_surface()`, gate ajoutée au hook `isabelle-oco-courses`).
   ========================================================================= */
.oco-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6, 24px);
  font-family: var(--font);
}
.oco-auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--cream-soft);
  border: 1px solid var(--line-terra);
  padding: var(--s-10, 40px) var(--s-8, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 8px);
}
.oco-auth__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--s-4, 16px);
}
.oco-auth__brand-name {
  font-family: var(--font-display, var(--font));
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.oco-auth__brand-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.oco-auth__title {
  font-size: var(--fs-h3, clamp(24px, 2.4vw, 28px));
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.oco-auth__lead {
  font-size: var(--fs-body, 16px);
  line-height: 1.5;
  color: var(--ink-70);
  margin: 0 0 var(--s-2, 8px);
}
.oco-auth__notice {
  font-size: 14px;
  line-height: 1.5;
  padding: var(--s-3, 12px) var(--s-4, 16px);
  border: 1px solid;
  margin: 0 0 var(--s-2, 8px);
}
.oco-auth__notice--error {
  color: var(--terracotta-deep);
  background: var(--terracotta-tint, rgba(168, 88, 46, 0.1));
  border-color: var(--line-terra);
}
.oco-auth__notice--success {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line-terra);
}
.oco-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4, 16px);
  margin-top: var(--s-2, 8px);
}
.oco-auth__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.oco-auth__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-70);
}
/* `.field` (system.css) a un focus olive par défaut — repeint en terracotta ici. */
.oco-auth .field:focus-visible {
  outline-color: var(--terracotta);
  border-color: var(--terracotta);
}
.oco-auth__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-70);
  cursor: pointer;
}
.oco-auth__remember input {
  accent-color: var(--terracotta);
}
.oco-auth__foot {
  margin-top: var(--s-4, 16px);
  text-align: center;
  font-size: 14px;
}
.oco-auth__foot a {
  color: var(--terracotta-deep);
  text-decoration: underline;
  text-decoration-color: var(--line-terra);
  text-underline-offset: 3px;
}
.oco-auth__foot a:hover {
  color: var(--terracotta);
}

/* =========================================================================
   « Mes échanges » (/mon-espace/messages/) — conversations privées
   apprenante ↔ Isabelle. Habille les classes neutres rendues par
   `templates/account/messages.php` du plugin (liste + fil + réponse).
   ========================================================================= */

/* ---------- Liste des conversations ---------- */
.oco-courses .oco-messages-list { display: flex; flex-direction: column; margin-top: 26px; border-top: 1px solid var(--line-terra); }
.oco-courses .oco-messages-list__row {
  display: flex; align-items: baseline; gap: 18px; padding: 18px 6px;
  border-bottom: 1px solid var(--line-terra-soft); text-decoration: none;
  transition: background .15s ease;
}
.oco-courses .oco-messages-list__row:hover { background: rgba(255, 255, 255, .55); }
.oco-courses .oco-messages-list__preview { flex: 1; min-width: 0; font-size: 15.5px; color: var(--ink-70); }
.oco-courses .oco-messages-list__date { flex: none; font-size: 12.5px; font-style: italic; color: var(--ink-50); }

/* Réponse d'Isabelle pas encore lue — la seule information vraiment utile
   dans cette liste, donc le seul élément coloré. */
.oco-courses .oco-badge-unread {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream); background: var(--terracotta); padding: 3px 8px;
}

/* ---------- Fil de discussion ---------- */
.oco-courses .oco-thread { margin-top: 26px; }
.oco-courses .oco-thread__title { font-family: var(--font); font-size: 22px; font-weight: 400; color: var(--ink); margin: 0 0 6px; }
.oco-courses .oco-thread__lesson-link { font-size: 14px; font-style: italic; color: var(--terracotta-deep); }
.oco-courses .oco-thread__messages { display: flex; flex-direction: column; gap: 18px; margin: 26px 0; }

.oco-courses .oco-message__author { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 5px; }
.oco-courses .oco-message__body { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0; white-space: pre-line; }
.oco-courses .oco-message__date { display: block; margin-top: 6px; font-size: 12px; font-style: italic; color: var(--ink-50); }

/* Isabelle à gauche sur fond crème, l'apprenante avec un filet terracotta :
   on distingue les deux voix sans recourir à des bulles façon messagerie
   instantanée, qui jureraient avec le reste de l'espace. */
.oco-courses .oco-message--creator { background: var(--card); padding: 16px 18px; border-left: 2px solid var(--terracotta); }
.oco-courses .oco-message--learner { padding: 16px 18px 16px 20px; border-left: 2px solid var(--line-terra); }

/* ---------- Formulaire de réponse ---------- */
.oco-courses .oco-thread-form { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-terra); }
.oco-courses .oco-thread-form__textarea {
  width: 100%; min-height: 130px; resize: vertical; box-sizing: border-box;
  background: var(--cream-soft); border: 1px solid var(--line-terra); padding: 16px;
  font-family: var(--font); font-size: 15.5px; line-height: 1.6; color: var(--ink);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.oco-courses .oco-thread-form__textarea:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(168, 88, 46, .15); }
.oco-courses .oco-thread-form__textarea::placeholder { font-style: italic; color: var(--ink-50); }

/* ---------- Rattachement optionnel (formulaire "Écrire un message") ---------- */
.oco-courses .oco-compose__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.oco-courses .oco-compose__label { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-50); }
.oco-courses .oco-compose__target { max-width: 420px; }

/* ---------- Message flash (après envoi) ---------- */
.oco-courses .oco-flash {
  margin-top: 20px; padding: 13px 16px; font-size: 14px; font-style: italic; color: var(--ink-70);
  background: rgba(168, 88, 46, .08); border-left: 2px solid var(--terracotta);
}

/* ==========================================================================
   Corps de leçon — mise en page éditoriale.
   Le contenu vient des documents d'Isabelle : chapô, points clés, phrase à
   retenir, ressource à télécharger. Sans ces règles, tout s'affiche en texte
   courant indifférencié.
   ========================================================================== */

/* Chapô : le texte d'accroche de la leçon, plus grand que le corps. */
.oco-courses .oco-lesson-body .lesson-lead {
  font-size: var(--fs-lead, 20px);
  line-height: 1.55;
  color: var(--oco-ink, #3e3a36);
  margin-bottom: var(--s-6, 24px);
}

/* Dans une colonne, l'intitulé doit démarrer au ras du haut de la cellule —
   sinon les deux listes en vis-à-vis ne s'alignent plus. */
.oco-courses .oco-lesson-body .lesson-duo__col h4 { margin-top: 0; }

/* Points clés : puce ronde dessinée plutôt que la puce système. */
.oco-courses .oco-lesson-body ul.lesson-points { list-style: none !important; padding-left: 0; gap: var(--s-3, 12px); }
.oco-courses .oco-lesson-body ul.lesson-points > li::marker { content: ""; }
.oco-courses .oco-lesson-body .lesson-points li {
  position: relative;
  padding-left: 26px;
  line-height: 1.55;
}
.oco-courses .oco-lesson-body .lesson-points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oco-green, #a8582e);
  opacity: 0.55;
}

/* Encadré : mention de public (PPC), consigne, ressource. Ni filet ni fond —
   c'est du texte courant, structuré par son intitulé. Un fond en fait une
   carte, ce que le document ne fait pas et qui hache la lecture. */
.oco-courses .oco-lesson-body .lesson-note {
  background: none;
  border: 0;
  padding: 0;
  /* `.oco-lesson-body` est un conteneur flex avec `gap` (CSS du plugin) : les
     marges ne fusionnent pas et s'ajouteraient au gap. C'est l'intitulé qui
     porte l'espacement. */
  margin: 0;
}
.oco-courses .oco-lesson-body .lesson-note p { margin: 0; font-size: 16px; line-height: 1.5; }
/* Un encadré peut porter plusieurs paragraphes (les explications rédigées des
   documents) : sans cette règle ils se collent, hérité du cas à un seul texte. */
.oco-courses .oco-lesson-body .lesson-note p + p,
.oco-courses .oco-lesson-body .lesson-note p + ul,
.oco-courses .oco-lesson-body .lesson-note ul + p { margin-top: var(--s-3, 12px); }

/* Phrase à retenir : l'idée que le participant doit garder de la leçon.
   Reprend l'habillage de `.oco-media-pending` (fond terracotta à 8 %, filet
   gauche) — c'est le même registre : une voix qui s'adresse au participant. */
.oco-courses .oco-lesson-body .lesson-key {
  margin: var(--s-8, 32px) 0;
  padding: var(--s-6, 24px) var(--s-8, 32px);
  background: color-mix(in srgb, var(--oco-green, #a8582e) 8%, transparent);
  border: 0;
  border-left: 2px solid var(--oco-green, #a8582e);
}
.oco-courses .oco-lesson-body .lesson-key p {
  margin: 0;
  font-size: var(--fs-lead, 20px);
  font-style: italic;
  line-height: 1.5;
  color: var(--oco-ink, #3e3a36);
}
.oco-courses .oco-lesson-body .lesson-key p::before { content: "« "; }
.oco-courses .oco-lesson-body .lesson-key p::after  { content: " »"; }

/* Étapes numérotées : les 5 règles d'or, les phases d'un cycle, un protocole.
   Le numéro est dessiné en accent — la puce système ne se met pas en valeur. */
.oco-courses .oco-lesson-body ol.lesson-steps {
  list-style: none !important;
  padding-left: 0;
  counter-reset: etape;
}
.oco-courses .oco-lesson-body ol.lesson-steps > li::marker { content: ""; }
.oco-courses .oco-lesson-body .lesson-steps li {
  position: relative;
  counter-increment: etape;
  padding-left: 44px;
  margin-bottom: var(--s-4, 16px);
  line-height: 1.55;
}
.oco-courses .oco-lesson-body .lesson-steps li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--oco-green, #a8582e);
  border: 1px solid var(--oco-green, #a8582e);
  border-radius: 50%;
  opacity: 0.75;
}

/* Tableau comparatif du document (sommeil profond / paradoxal, mélatonine /
   cortisol) : deux colonnes côte à côte, empilées sur petit écran. Ni fond ni
   filet : ce sont deux listes en vis-à-vis, pas des cartes.

   L'alignement en haut est posé sur les COLONNES (`align-self`), pas seulement
   sur la grille : WordPress ajoute ses propres classes de layout au rendu
   (`is-layout-flow`, et selon la version `is-layout-flex`, qui centre
   verticalement par défaut). Un `align-items` sur le parent se fait alors
   écraser sans bruit et les deux listes se décalent — c'est ce qui arrivait. */
.oco-courses .oco-lesson-body .lesson-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  align-content: start;
  gap: var(--s-5, 20px) var(--s-8, 32px);
  /* Même raison que `.lesson-note` : le conteneur flex du plugin ajoute déjà
     son `gap` entre blocs, une marge s'y additionnerait. */
  margin: 0;
}
.oco-courses .oco-lesson-body .lesson-duo__col {
  align-self: start;
  padding: 0;
  background: none;
  border: 0;
}
.oco-courses .oco-lesson-body .lesson-duo__col .lesson-points li { padding-left: 22px; }
.oco-courses .oco-lesson-body .lesson-duo__col .lesson-points li::before { width: 6px; height: 6px; }

/* Questions d'un cahier : ce sont des invitations à écrire, pas des faits —
   le trait vertical rappelle la marge d'un carnet. */
.oco-courses .oco-lesson-body ul.lesson-questions { list-style: none !important; padding-left: 0; }
.oco-courses .oco-lesson-body ul.lesson-questions > li::marker { content: ""; }
.oco-courses .oco-lesson-body .lesson-questions li {
  padding: var(--s-2, 8px) 0 var(--s-2, 8px) var(--s-4, 16px);
  border-left: 1px solid var(--oco-line-soft, rgba(129, 139, 105, 0.12));
  margin-bottom: var(--s-3, 12px);
  font-style: italic;
  color: var(--oco-ink-70, #6b6560);
}

/* « À faire cette semaine » : une consigne d'action, pas de la lecture. */
.oco-courses .oco-lesson-body ul.lesson-todo { list-style: none !important; padding-left: 0; }
.oco-courses .oco-lesson-body ul.lesson-todo > li::marker { content: ""; }
.oco-courses .oco-lesson-body .lesson-todo li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--s-2, 8px);
}
.oco-courses .oco-lesson-body .lesson-todo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--oco-ink, #3e3a36);
  opacity: 0.45;
}

/* Le message essentiel du document : même fond que la citation, mais c'est un
   énoncé, pas une parole rapportée — donc ni guillemets, ni italique, ni le
   filet coloré réservé à la citation. */
.oco-courses .oco-lesson-body .lesson-key--bloc {
  padding: var(--s-5, 20px) var(--s-6, 24px);
  border-left: 0;
}
.oco-courses .oco-lesson-body .lesson-key--bloc p {
  font-style: normal;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: var(--s-3, 12px);
}
.oco-courses .oco-lesson-body .lesson-key--bloc p:last-child { margin-bottom: 0; }
.oco-courses .oco-lesson-body .lesson-key--bloc p::before,
.oco-courses .oco-lesson-body .lesson-key--bloc p::after { content: none; }

/* L'air au-dessus du filet valait gap + margin-top + la marge basse du bloc
   précédent — variable selon qu'une section finissait par un paragraphe (14),
   une liste (16) ou une citation (32). Le filet se retrouvait donc décentré,
   toujours plus près de la section suivante. On neutralise cette marge basse
   juste avant un titre de section : l'écart devient constant des deux côtés. */
/* La classe répétée n'est pas une coquille : `:has(+ h3)` ne pèse qu'un
   élément, ce qui laissait cette règle en (0,2,2) — derrière les marges des
   paragraphes, listes et citations, toutes en (0,3,0). Un cran de spécificité
   suffit, plutôt qu'un `!important` qui fermerait toute reprise ultérieure. */
.oco-courses .oco-lesson-body.oco-lesson-body > *:not(hr):has(+ h3),
.oco-courses .oco-lesson-body.oco-lesson-body > *:has(+ .wp-block-separator) { margin-bottom: 0; }

/* Un trait horizontal explicite (fin de semaine, dans les cahiers) sépare déjà
   les deux sections : le titre qui le suit ne doit pas ajouter son propre
   filet, sinon deux lignes se superposent et l'écart redevient asymétrique. */
.oco-courses .oco-lesson-body .wp-block-separator + h3 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* --- Sous-sections (h4) ------------------------------------------------
   Même problème que les filets de section : l'écart avant une sous-section
   valait gap + margin-top + la marge basse du bloc précédent, soit 32 px après
   une liste et jusqu'à 84 après un paragraphe. On neutralise cette marge et on
   pose un écart unique de 56 px (40 + le gap du conteneur flex) — franc, mais
   nettement en deçà des 80 px qui séparent deux sections h3. */
.oco-courses .oco-lesson-body.oco-lesson-body > *:has(+ h4),
.oco-courses .oco-lesson-body.oco-lesson-body > *:has(+ .lesson-note),
.oco-courses .oco-lesson-body.oco-lesson-body > *:has(+ .lesson-key) { margin-bottom: 0; }

.oco-courses .oco-lesson-body > h4,
.oco-courses .oco-lesson-body > .lesson-note,
.oco-courses .oco-lesson-body > .lesson-key { margin-top: var(--s-10, 40px); }

/* L'intitulé qui ouvre un encadré ne redouble pas cet écart : c'est le bloc
   qui le porte. Idem pour le dernier élément : sa marge basse s'ajouterait à
   l'écart du bloc suivant et le ferait dépasser celui d'une section entière. */
.oco-courses .oco-lesson-body .lesson-note > h4:first-child,
.oco-courses .oco-lesson-body .lesson-key > h4:first-child { margin-top: 0; }
.oco-courses .oco-lesson-body .lesson-note > :last-child,
.oco-courses .oco-lesson-body .lesson-key > :last-child,
.oco-courses .oco-lesson-body .lesson-duo__col > :last-child { margin-bottom: 0; }

/* Rappel de la loi de proximité APRÈS les règles ci-dessus : un bloc qui ouvre
   une section reste collé à son titre. La classe est répétée pour repasser
   devant les marges qu'on vient de poser. */
.oco-courses .oco-lesson-body.oco-lesson-body > h2 + *,
.oco-courses .oco-lesson-body.oco-lesson-body > h3 + *,
.oco-courses .oco-lesson-body.oco-lesson-body > h4 + * { margin-top: 0; }

.oco-courses .oco-lesson-body .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--oco-line, rgba(129, 139, 105, 0.22));
  margin: var(--s-10, 40px) 0;
}

@media (max-width: 620px) {
  .oco-courses .oco-lesson-body .lesson-lead { font-size: 18px; }
  .oco-courses .oco-lesson-body .lesson-note { padding: var(--s-3, 12px) var(--s-4, 16px); }
  .oco-courses .oco-lesson-body .lesson-key  { padding: var(--s-4, 16px); }
  .oco-courses .oco-lesson-body .lesson-key p { font-size: 18px; }
  .oco-courses .oco-lesson-body .lesson-duo { grid-template-columns: 1fr; gap: var(--s-4, 16px); }
  .oco-courses .oco-lesson-body .lesson-steps li { padding-left: 38px; }
  .oco-courses .oco-lesson-body .lesson-steps li::before { width: 24px; height: 24px; font-size: 13px; }
}