/* SpeakPro Classic — trois cartes de niveaux (Débutant | Intermédiaire | Avancé), 06/11/2026.
   Statuts calculés par le serveur (get-classic-content → sections[].level). */
.cl-levels{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:0 0 22px; padding:0; list-style:none; }
.cl-levels > li{ display:flex; min-width:0; }
.cl-card{ position:relative; width:100%; display:flex; flex-direction:column; gap:10px; min-width:0; background:#fff; border:1.5px solid var(--ap-line, #E5DBCF);
  border-radius:18px; padding:18px 16px 16px; text-align:left; font:inherit; color:var(--ap-ink, #1E2430); cursor:pointer;
  transition:border-color .2s, transform .2s, box-shadow .2s; }
.cl-card:hover{ border-color:var(--ap-copper, #A9552F); box-shadow:0 10px 26px rgba(30,36,48,.08); transform:translateY(-2px); }
.cl-card:focus-visible{ outline:3px solid var(--ap-copper, #A9552F); outline-offset:3px; }
.cl-card.is-locked{ background:#F7F3EE; }
.cl-card.is-locked:hover{ transform:none; box-shadow:none; }
.cl-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.cl-name{ margin:0; font-family:var(--display-serif, Georgia, serif); font-weight:500; font-size:21px; line-height:1.15; letter-spacing:-.01em; }
.cl-cefr{ flex:none; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--ap-mute, #6B707A); }
.cl-chip{ align-self:flex-start; justify-self:start; font-family:var(--sans, 'Inter', system-ui, sans-serif); letter-spacing:0; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; line-height:1; padding:7px 10px; border-radius:999px; }
.cl-chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.cl-chip[data-s="accessible"]{ background:#E6F3EA; color:#1F6B3A; }
.cl-chip[data-s="partially_free"]{ background:#FBEFE6; color:#8E4626; }
.cl-chip[data-s="subscription_required"]{ background:#EEF0F6; color:#3B4A6B; }
.cl-chip[data-s="prerequisite_locked"]{ background:#ECE8E2; color:#5C564D; }
.cl-detail{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ap-ink-2, #4A505B); }
.cl-prog{ display:block; margin-top:auto; }
.cl-prog-l{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ap-mute, #6B707A); margin-bottom:6px; }
.cl-bar{ display:block; height:5px; border-radius:4px; background:var(--ap-line-2, #EFE7DC); overflow:hidden; }
.cl-bar i{ display:block; height:100%; background:var(--ap-copper, #A9552F); border-radius:4px; }
.cl-go{ font-size:13.5px; font-weight:700; color:var(--ap-copper, #A9552F); }
.cl-card.is-locked .cl-go{ color:var(--ap-mute, #6B707A); }

/* Vue d'un niveau */
.cl-back{ display:inline-flex; align-items:center; gap:6px; min-height:40px; margin:0 0 12px; padding:0 4px; border:0; background:none; font:inherit; font-size:14px; font-weight:700; color:var(--ap-copper, #A9552F); cursor:pointer; }
.cl-back:focus-visible{ outline:3px solid var(--ap-copper, #A9552F); outline-offset:2px; border-radius:8px; }
.cl-note{ margin:-4px 0 14px; padding:12px 14px; border-radius:12px; background:#F7F3EE; font-size:13.5px; line-height:1.5; color:var(--ap-ink-2, #4A505B); }
.cl-note a{ color:var(--ap-copper, #A9552F); font-weight:700; }
.cx-pill.is-free{ background:#FBEFE6; color:#8E4626; }

/* Mobile : trois cartes compactes, une par ligne, sans allonger la page. */
@media (max-width:760px){
  .cl-levels{ grid-template-columns:1fr; gap:10px; }
  .cl-card{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"top go" "chip chip" "prog prog"; gap:8px 10px; padding:14px 14px 12px; }
  .cl-top{ grid-area:top; } .cl-chip{ grid-area:chip; } .cl-prog{ grid-area:prog; } .cl-go{ grid-area:go; align-self:center; }
  .cl-detail{ display:none; }
  .cl-name{ font-size:19px; }
  .cl-go{ font-size:13px; }
  .cl-go .cl-go-t{ display:none; }
  .cl-card:hover{ transform:none; }
}
@media (prefers-reduced-motion:reduce){ .cl-card{ transition:none; } .cl-card:hover{ transform:none; } }