/* Page-only refinements for the CEFR roadmap. Shared public styles remain intact. */
.dm-levels-page{
  --levels-accent:var(--sp-red);
}
.dm-levels-page .sp-page{padding-top:84px;padding-bottom:72px}
/* Hero top gap: keep the eyebrow ("PARCOURS CECR · A1 À C2") close under the
   fixed navbar. Columns now start at the top instead of being centred against
   the taller orbit, which used to push the title ~55px lower on desktop wide
   screens while the 38px top padding added a further gap. */
.dm-levels-page .sp-hero{
  min-height:0;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:clamp(26px,5vw,72px);align-items:start;padding:26px 0 54px;
}
.dm-levels-page .sp-eyebrow{display:inline-flex;align-items:center;gap:9px}
.dm-levels-page .sp-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sp-red);box-shadow:0 0 0 6px rgba(225,29,46,.09)}
.dm-levels-page .sp-hero h1{font-size:clamp(3.5rem,6.3vw,6.5rem);line-height:.94;letter-spacing:-.075em;margin:20px 0 22px}
.dm-levels-page .sp-hero .sp-lead{max-width:630px;font-size:clamp(15px,1.35vw,18px);line-height:1.7}
.dm-levels-page .sp-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}
.dm-levels-page .sp-actions .sp-btn{min-height:50px;margin:0;padding:0 19px}
.dm-levels-page .sp-hero-orbit{min-height:420px;perspective:1100px}
.dm-levels-page .sp-orbit-core{width:min(390px,86%);border-radius:34px;padding:20px;box-shadow:0 30px 85px rgba(16,18,22,.13)}
.dm-levels-page .sp-core-main{gap:12px;margin-top:20px}
.dm-levels-page .sp-core-meta{font-size:12px}
.dm-levels-page .sp-core-path{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:2px 0 4px}
.dm-levels-page .sp-core-path a{
  min-height:34px;display:grid;place-items:center;border:1px solid rgba(16,18,22,.08);
  border-radius:11px;background:rgba(255,255,255,.72);color:var(--sp-ink);
  font-size:10px;font-weight:900;letter-spacing:-.02em;text-decoration:none;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.dm-levels-page .sp-core-path a:hover{background:var(--sp-red);border-color:var(--sp-red);color:#fff;transform:translateY(-2px)}
.dm-levels-page .sp-core-path a:focus-visible{outline:3px solid rgba(225,29,46,.36);outline-offset:2px}
.dm-levels-page .sp-core-grid{gap:7px}
.dm-levels-page .sp-core-grid div{padding:11px 12px}
.dm-levels-page .sp-core-grid small{font-size:9px}
.dm-levels-page .sp-core-grid strong{font-size:.95rem}
.dm-levels-page .sp-core-foot{font-size:8px;letter-spacing:.08em}
.dm-levels-page .sp-section{padding-block:72px}
.dm-levels-page .level-roadmap-section{padding-top:38px}
.dm-levels-page .level-roadmap-section .sp-section-head{margin-bottom:32px!important}
.dm-levels-page .level-roadmap-section .sp-section-head p{max-width:520px!important}
.dm-levels-page .sp-section-kicker{color:#737b85}
.dm-levels-page .sp-level-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.dm-levels-page .sp-level-card{
  --level-accent:#f13c4d;--level-accent-rgb:225,29,46;
  color:#fff; /* Card interior sits on the dark roadmap card in BOTH themes
                (deutchmaak-unified-nav.css !important backgrounds), so the
                inherited baseline text must be white, like html.dark already did. */
  min-height:370px!important;padding:27px!important;border-radius:28px!important;
  border-top:2px solid rgba(var(--level-accent-rgb),.72)!important;
  box-shadow:0 22px 58px rgba(16,18,22,.13);transform-style:preserve-3d;
  scroll-margin-top:100px;
  transition:box-shadow .35s cubic-bezier(.22,1,.36,1),border-color .25s ease;
}
.dm-levels-page .sp-level-card--beginner{--level-accent:#f13c4d;--level-accent-rgb:225,29,46;background:linear-gradient(160deg,#ffffff 0%,#f5eef0 100%)}
.dm-levels-page .sp-level-card--intermediate{--level-accent:#d6b65f;--level-accent-rgb:199,161,59;background:linear-gradient(160deg,#ffffff 0%,#f4f0e6 100%)}
.dm-levels-page .sp-level-card--advanced{--level-accent:#62b891;--level-accent-rgb:74,166,126;background:linear-gradient(160deg,#ffffff 0%,#ecf3ef 100%)}
html.dark .dm-levels-page .sp-level-card--beginner{background:linear-gradient(145deg,#1b191f,#101216)}
html.dark .dm-levels-page .sp-level-card--intermediate{background:linear-gradient(145deg,#191b20,#101419)}
html.dark .dm-levels-page .sp-level-card--advanced{background:linear-gradient(145deg,#171c1d,#0e1315)}
.dm-levels-page .sp-level-card::before{border-color:rgba(var(--level-accent-rgb),.34)!important;box-shadow:0 0 0 24px rgba(var(--level-accent-rgb),.035),0 0 0 48px rgba(var(--level-accent-rgb),.02)!important}
.dm-levels-page .sp-level-card::after{background:radial-gradient(circle,rgba(var(--level-accent-rgb),.26),transparent 72%)!important}
.dm-levels-page .sp-level-number{font-size:9px!important;letter-spacing:.12em!important}
/* "ÉTAPE 01 / 06" — same light grey as the dark theme (cards are dark in both). */
.dm-levels-page .sp-level-number span:first-child{color:#bbc1c7}
.dm-levels-page .sp-level-band{padding:7px 9px;border:1px solid rgba(var(--level-accent-rgb),.2);border-radius:999px;background:rgba(var(--level-accent-rgb),.1);color:var(--level-accent)!important;letter-spacing:.08em}
.dm-levels-page .sp-level-code{font-size:clamp(5.2rem,6.2vw,6.7rem)!important;line-height:.84!important;margin-top:28px!important;letter-spacing:-.1em!important;color:#fff}
.dm-levels-page .sp-level-skills{gap:6px;margin:17px 0 0;padding:0}
.dm-levels-page .sp-level-skills li{display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.045);color:#d0d4d9;font-size:9px;font-weight:750;letter-spacing:.01em;list-style:none}
.dm-levels-page .sp-level-content{padding-top:20px!important}
.dm-levels-page .sp-level-german-term{display:inline-flex;align-items:center;gap:5px;margin-bottom:7px;color:var(--level-accent);font-size:10px;font-weight:800;letter-spacing:.025em}
.dm-levels-page .sp-level-german-term span{color:#858e98;font-size:8px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
/* B1/B2 free-courses label — same badge & float as index.html's
   .free-courses-label (visual reference), reused verbatim: red pill,
   white 10px/900 text, .14em tracking, dmFreeCoursesFloat 1.7s infinite.
   Only emitted for levels b1 and b2 in levels.php. */
.dm-levels-page .free-courses-label{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;
  padding:6px 12px;border-radius:999px;background:var(--dm-red);color:#fff;
  font-size:10px;font-weight:900;letter-spacing:.14em;line-height:1;
  box-shadow:0 10px 24px rgba(225,29,46,.30);
  animation:dmFreeCoursesFloat 1.7s ease-in-out infinite;
}
@keyframes dmFreeCoursesFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.dm-levels-page .sp-level-content h3{font-size:1.48rem!important;letter-spacing:-.045em!important;margin-bottom:8px!important}
.dm-levels-page .sp-level-content p{font-size:12px!important;line-height:1.65!important;color:#a4acb5}
.dm-levels-page .sp-level-arrow{display:flex;justify-content:space-between;width:100%;max-width:none;margin-top:18px!important;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);font-size:11px!important;color:#fff}
.dm-levels-page .sp-level-arrow i{color:var(--level-accent);transition:transform .2s ease}
.dm-levels-page .sp-level-card:hover{box-shadow:0 32px 70px rgba(16,18,22,.2),0 0 0 1px rgba(var(--level-accent-rgb),.18)}
.dm-levels-page .sp-level-card:hover .sp-level-arrow i{transform:translateX(4px)}
.dm-levels-page .sp-level-card:focus-visible{outline:3px solid var(--level-accent);outline-offset:4px}
.dm-levels-page .sp-method-section .sp-values{gap:14px}
.dm-levels-page .sp-method-section .sp-value{min-height:205px;padding:24px}
.dm-levels-page .sp-method-section .sp-value h3{font-size:1.08rem}
.dm-levels-page .sp-method-section .sp-value p{font-size:12px;line-height:1.7}
.dm-levels-page .sp-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;margin-top:48px;padding:clamp(32px,5vw,58px);border:1px solid rgba(255,255,255,.07)}
.dm-levels-page .sp-cta-kicker{position:relative;z-index:1;display:block;margin-bottom:15px;color:#aeb5bd;font-size:9px;font-weight:900;letter-spacing:.14em}
.dm-levels-page .sp-cta h2{max-width:680px;font-size:clamp(2.5rem,4.5vw,4.2rem)}
.dm-levels-page .sp-cta p{max-width:620px;font-size:14px}
.dm-levels-page .sp-cta .sp-btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:0 20px;white-space:nowrap}
.dm-levels-page .sp-cta .sp-btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
.dm-levels-page .sp-footer{margin-top:64px}
html.dark .dm-levels-page .sp-orbit-core{background:linear-gradient(160deg,rgba(23,27,34,.9),rgba(13,16,21,.94));border-color:rgba(255,255,255,.08);box-shadow:0 30px 85px rgba(0,0,0,.5)}
html.dark .dm-levels-page .sp-orbit-ring{border-color:rgba(255,255,255,.12)}
html.dark .dm-levels-page .sp-core-grid div{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08)}
html.dark .dm-levels-page .sp-core-progress{background:rgba(255,255,255,.12)}
html.dark .dm-levels-page .sp-core-head,html.dark .dm-levels-page .sp-core-foot,html.dark .dm-levels-page .sp-core-meta{color:#98a1aa}
html.dark .dm-levels-page .sp-core-path a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:#e6e9ec}
html.dark .dm-levels-page .sp-core-path a:hover{background:var(--sp-red);border-color:var(--sp-red);color:#fff}

@media(max-width:1100px){
  .dm-levels-page .sp-hero{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:26px}
  .dm-levels-page .sp-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dm-levels-page .sp-level-code{font-size:6.3rem!important}
}
@media(max-width:820px){
  .dm-levels-page .sp-hero{grid-template-columns:1fr;gap:8px;padding-top:18px}
  .dm-levels-page .sp-hero-copy{order:0}
  .dm-levels-page .sp-hero-orbit{order:1;min-height:380px}
  .dm-levels-page .sp-hero h1{font-size:clamp(3.6rem,10vw,6rem)}
  .dm-levels-page .sp-hero-orbit{width:min(100%,600px);margin-inline:auto}
  .dm-levels-page .sp-method-section .sp-values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-levels-page .sp-cta{grid-template-columns:1fr;gap:22px}
  .dm-levels-page .sp-cta .sp-btn{justify-self:start}
}
@media(max-width:680px){
  .dm-levels-page .sp-page{padding-top:72px!important;padding-bottom:52px}
  .dm-levels-page .sp-shell{width:min(100% - 32px,1240px)}
  .dm-levels-page .sp-hero{padding:12px 0 30px}
  .dm-levels-page .sp-hero h1{font-size:clamp(3.1rem,14.4vw,5rem);line-height:.96;margin:17px 0}
  .dm-levels-page .sp-hero .sp-lead{font-size:15px}
  .dm-levels-page .sp-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .dm-levels-page .sp-actions .sp-btn{width:100%}
  .dm-levels-page .sp-hero-orbit{min-height:330px;margin-top:8px}
  .dm-levels-page .sp-orbit-core{width:min(370px,88%);padding:17px;border-radius:28px}
  .dm-levels-page .sp-core-score{font-size:4rem}
  .dm-levels-page .sp-core-grid div{padding:10px}
  .dm-levels-page .sp-core-foot{font-size:7px}
  .dm-levels-page .sp-chip{font-size:8px;padding:8px 9px}
  .dm-levels-page .sp-chip.gold{left:0}
  .dm-levels-page .sp-section{padding-block:54px}
  .dm-levels-page .level-roadmap-section{padding-top:24px}
  .dm-levels-page .sp-level-grid{grid-template-columns:1fr!important;gap:14px!important}
  .dm-levels-page .sp-level-card{min-height:350px!important;padding:23px!important;border-radius:25px!important}
  .dm-levels-page .sp-level-code{font-size:5.8rem!important;margin-top:24px!important}
  .dm-levels-page .sp-level-skills li{font-size:8px;padding-inline:8px}
  .dm-levels-page .sp-level-content h3{font-size:1.38rem!important}
  .dm-levels-page .free-courses-label{font-size:9px;letter-spacing:.1em;padding:5px 10px}
  .dm-levels-page .sp-method-section .sp-values{grid-template-columns:1fr}
  .dm-levels-page .sp-method-section .sp-value{min-height:0}
  .dm-levels-page .sp-cta{margin-top:24px;padding:31px 24px;border-radius:25px}
  .dm-levels-page .sp-cta h2{font-size:clamp(2.3rem,10vw,3.3rem)}
  .dm-levels-page .sp-cta .sp-btn{width:100%}
  .dm-levels-page .sp-footer{margin-top:44px}
}
@media(hover:none){
  .dm-levels-page .sp-level-card:hover{transform:none;box-shadow:0 22px 58px rgba(16,18,22,.13)}
  .dm-levels-page .sp-core-path a:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .dm-levels-page .sp-orbit-ring,.dm-levels-page .sp-level-card::before{animation:none!important}
  .dm-levels-page .free-courses-label{animation:none!important;box-shadow:none}
  .dm-levels-page .sp-level-card,.dm-levels-page .sp-level-arrow i,.dm-levels-page .sp-core-path a{transition:none!important}
}