@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Deutschmaak V9 — Unified navigation + level-grid refinement */
:root{
  /* Same values as platform-theme.css. Repeated here on purpose: this file is the
     one every page loads, and it is what makes the navbar self-sufficient. A page
     that loads only deutchmaak-unified-nav.css used to render an unstyled bar,
     because the navbar primitives lived in platform-theme.css and nowhere else. */
  --dm-line:rgba(16,18,22,.10);
  --dm-ink:#101216;
  --dm-red:#e11d2e;
  --dm-gold:#c7a13a;
  --dm-ease:cubic-bezier(.22,1,.36,1);
  --dmnav-bg:rgba(246,247,249,.92);
  --dmnav-surface:rgba(255,255,255,.82);
  --dmnav-ink:#111318;
  --dmnav-muted:#68717b;
  --dmnav-line:rgba(16,18,22,.09);
  --dmnav-red:#e11d2e;
  --dmnav-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------------------------
   Navbar primitives — the base layer of the reference navigation.

   These declarations are copied verbatim from platform-theme.css, where they were
   originally defined. They are repeated here, not moved, because pages that adopt
   the unified navigation do not all load platform-theme.css, and without these the
   header collapsed: no position:fixed, no mobile panel, no wordmark accent.

   Nothing below is an override. Every declaration is either absent from
   deutchmaak-unified-nav.css or already forced with !important further down, so on
   a page that loads both files the cascade resolves to exactly the same values as
   before — this block only supplies what the forced rules depend on.
   --------------------------------------------------------------------------- */
.dm-shell{width:min(1320px,calc(100% - 56px));margin-inline:auto}
.dm-topbar{position:fixed;top:0;left:0;right:0;z-index:70;height:84px;background:rgba(246,247,249,.82);backdrop-filter:blur(24px) saturate(150%);border-bottom:1px solid transparent;transition:.35s var(--dm-ease)}
.dm-topbar.scrolled{background:rgba(246,247,249,.96);border-bottom-color:var(--dm-line);box-shadow:0 12px 35px rgba(17,19,24,.05)}
.dm-topbar-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.dm-brand{display:inline-flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-weight:700}
.dm-brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#fff;border:1px solid var(--dm-line);box-shadow:0 7px 18px rgba(15,23,42,.08);overflow:hidden}
.dm-brand-mark img{width:30px;height:30px;object-fit:contain}
.dm-brand-word{font-size:1.05rem;letter-spacing:-.035em}
.dm-brand-word span{color:var(--dm-red)}
.dm-brand-word i{display:inline-block;width:5px;height:5px;margin:0 0 2px 5px;border-radius:50%;background:var(--dm-gold)}
.dm-top-actions{display:flex;align-items:center;gap:8px}
.dm-circle-btn{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#585e67;transition:.25s var(--dm-ease)}
.dm-circle-btn:hover{background:#fff;box-shadow:0 7px 20px rgba(15,23,42,.07);transform:translateY(-1px)}
.dm-text-link{padding:11px 12px;color:#565b63;font-size:13px;font-weight:650}
.dm-header-cta,.dm-primary-action{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 18px;border-radius:15px;background:var(--dm-ink);color:#fff;font-size:13px;font-weight:800;box-shadow:0 14px 28px rgba(16,18,22,.16);transition:.32s var(--dm-ease)}
.dm-header-cta{padding:12px 15px}
.dm-header-cta:hover,.dm-primary-action:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(16,18,22,.20)}
.dm-menu-btn{display:none}
.dm-mobile-menu{border-top:1px solid var(--dm-line);background:rgba(246,247,249,.98);backdrop-filter:blur(18px)}
.dm-mobile-menu.hidden{display:none}
.dm-mobile-menu-inner{display:grid;gap:5px;padding:12px 0 18px}
.dm-mobile-menu a{padding:13px 14px;border-radius:13px;font-weight:700;color:#4e535a}
.dm-mobile-menu a.is-primary{background:var(--dm-ink);color:#fff}

/* Reserved height for the fixed bar.
   index.html has always reserved it with body.dm-home (84px, 72px under 520px, in
   platform-theme.css). Pages that adopt the navbar through includes/unified_nav.php
   carry dm-nav-fixed instead, with the same values and the 820px breakpoint where
   the bar itself drops to 72px. Without this reservation the first element of the
   page slides underneath the bar, which is what made NEW-BUG-026 invisible.

   !important is not decoration here. Several exercise pages set their own body
   padding with !important — telc-hoeren-quiz-mobile.css does
   `body[data-section^="Hören Teil"]{padding:28px 16px 48px !important}` — and
   without it the reservation loses and the title capsule lands under the bar.
   This is the same idiom as body.dm-home and body.global-nav-offset.

   [class] is there for the same reason: that other rule is
   `html.telc-hoeren-quiz-page body`, specificity (0,1,2), which outranks a plain
   `body.dm-nav-fixed` (0,1,1) even with both marked !important. The redundant
   attribute selector lifts this one to (0,2,1) so the reservation wins whatever
   the load order of the page stylesheets. */
body.dm-nav-fixed[class]{padding-top:84px!important}
@media (max-width:820px){body.dm-nav-fixed[class]{padding-top:72px!important}}

/* The reservation above already lifts the page clear of the fixed bar. The shared
   .sp-page shell repeats the same reservation a second time (84px, 72px under
   820px), and about.php / levels.php / the quiz catalogue raise it even further
   (104px, 100px, or a page rule marked !important). On those pages the first
   section therefore started ~one full navbar lower than intended. Keep only a
   small natural gap; the !important + [class] idiom is the same one used by the
   reservation itself, so it wins over every page-scoped variant regardless of the
   stylesheet load order. Pages whose body does not reserve the bar (chat, shop,
   order) keep the .sp-page padding untouched. */
body.dm-nav-fixed[class] .sp-page{padding-top:24px!important}

/* One visual language for every top navigation variant used by the project. */
.global-top-nav,
.dm-topbar,
.navbar.telc-navbar__inner,
.v6-nav{
  color:var(--dmnav-ink)!important;
  background:var(--dmnav-bg)!important;
  border-bottom:1px solid var(--dmnav-line)!important;
  box-shadow:0 12px 34px rgba(16,18,22,.055)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
}

.global-top-nav,
.dm-topbar{height:76px!important;min-height:76px!important;top:0!important}
.global-top-nav .global-nav-inner,
.dm-topbar .dm-topbar-inner{
  width:min(1320px,calc(100% - 40px))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding:0!important;
  gap:18px!important;
}
.global-top-nav .global-nav-inner{height:76px!important}
.dm-topbar .dm-topbar-inner{height:76px!important}

.global-nav-brand,
.dm-brand{
  display:inline-flex!important;align-items:center!important;gap:10px!important;
  flex:0 0 auto!important;text-decoration:none!important;
  transition:transform .28s var(--dmnav-ease),opacity .28s var(--dmnav-ease)!important;
}
.global-nav-brand:hover,.dm-brand:hover{transform:translateY(-1px)!important;opacity:.96}
.global-nav-brand .brand-logo-img,.dm-brand-mark img{width:40px!important;height:40px!important;object-fit:contain!important}
.global-nav-brand .brand-logo-img{border-radius:12px;background:#fff;box-shadow:0 7px 18px rgba(15,23,42,.07);padding:4px!important}
.global-nav-brand .brand-text{font-family:"Space Grotesk",system-ui,sans-serif!important;font-size:16px!important;font-weight:800!important;letter-spacing:-.04em!important;color:var(--dmnav-ink)!important}
.dm-brand-mark{width:40px!important;height:40px!important;border-radius:12px!important;box-shadow:0 7px 18px rgba(15,23,42,.07)!important}
.dm-brand-word{font-family:"Space Grotesk",system-ui,sans-serif!important;font-size:16px!important;font-weight:800!important;letter-spacing:-.04em!important}
/* L'ancre de marque doit hériter de l'encre, pas de la couleur de lien par défaut
   du navigateur (#0000ee) : sur les gabarits d'exercice sans reset `a`, le
   mot-symbole s'affichait en bleu au lieu de l'encre DeutschMaak. */
.dm-brand{color:var(--dmnav-ink)!important}
html.dark .dm-brand{color:#fff!important}

/* Reference typography (identical to index.html). The navigation must not inherit
   the page body font: the home page sets Manrope, while legacy exercise pages set
   DM Sans, so the same bar rendered with two different typefaces. The wordmark is
   already forced to Space Grotesk above; force the Manrope UI face here. */
.global-nav-links a,
.dm-main-nav a,
.dm-text-link,
.dm-header-cta,
.dm-mobile-menu a{
  font-family:"Manrope","Space Grotesk","Segoe UI",Arial,sans-serif!important;
}

.global-nav-links,
.dm-main-nav{
  display:flex!important;align-items:center!important;gap:3px!important;
  margin-inline:auto!important;min-width:0!important;
}
.global-nav-links a,
.dm-main-nav a{
  position:relative!important;display:inline-flex!important;align-items:center!important;gap:7px!important;
  min-height:40px!important;padding:9px 12px!important;border-radius:12px!important;
  color:#606872!important;background:transparent!important;border:1px solid transparent!important;
  font-size:11px!important;font-weight:760!important;letter-spacing:-.01em!important;
  text-decoration:none!important;white-space:nowrap!important;
  transition:background .22s var(--dmnav-ease),color .22s var(--dmnav-ease),border-color .22s var(--dmnav-ease),transform .22s var(--dmnav-ease),box-shadow .22s var(--dmnav-ease)!important;
}
.global-nav-links a::after,
.dm-main-nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:99px;
  background:var(--dmnav-red);transform:scaleX(0);transform-origin:center;transition:transform .22s var(--dmnav-ease);
}
.global-nav-links a:hover,
.dm-main-nav a:hover{background:rgba(255,255,255,.86)!important;color:var(--dmnav-ink)!important;transform:translateY(-1px)!important;box-shadow:0 8px 20px rgba(16,18,22,.05)!important}
.global-nav-links a:hover::after,
.dm-main-nav a:hover::after{transform:scaleX(1)}
.global-nav-links a.active,
.dm-main-nav a.active{background:rgba(225,29,46,.07)!important;color:#b31321!important;border-color:rgba(225,29,46,.10)!important}
.global-nav-links a.active::after,
.dm-main-nav a.active::after{transform:scaleX(1)}
.global-nav-links a.nav-login,
.global-nav-links a.nav-register{min-height:38px!important}
.global-nav-links a.nav-login{border-color:var(--dmnav-line)!important;background:rgba(255,255,255,.72)!important;color:var(--dmnav-ink)!important}
.global-nav-links a.nav-register{background:var(--dmnav-ink)!important;color:#fff!important;box-shadow:0 10px 24px rgba(16,18,22,.13)!important}
.global-nav-links a.nav-register:hover{background:#191c22!important;color:#fff!important;box-shadow:0 15px 28px rgba(16,18,22,.17)!important}

.global-nav-right,.dm-top-actions{display:flex!important;align-items:center!important;gap:7px!important;flex:0 0 auto!important}
.global-nav-actions{display:flex!important;align-items:center!important;gap:6px!important}
.global-nav-actions .telc-lang-mount,.dm-top-actions .telc-lang-mount{flex:0 0 auto!important}
.global-top-nav .global-nav-toggle,
.dm-menu-btn{display:none!important}
.global-top-nav .global-nav-toggle{border:1px solid var(--dmnav-line)!important;background:rgba(255,255,255,.82)!important;border-radius:12px!important;color:var(--dmnav-ink)!important}
.dm-top-actions .dm-circle-btn{width:39px!important;height:39px!important;border-radius:12px!important}
.dm-text-link{min-height:39px;display:inline-flex;align-items:center;padding:0 11px!important;border-radius:12px!important;font-size:11px!important;font-weight:780!important;transition:.22s var(--dmnav-ease)!important}
.dm-text-link:hover{background:rgba(255,255,255,.82)!important;transform:translateY(-1px)!important}
.dm-header-cta{min-height:39px!important;padding:0 14px!important;border-radius:12px!important;font-size:11px!important;box-shadow:0 10px 24px rgba(16,18,22,.13)!important;transition:.25s var(--dmnav-ease)!important}
.dm-header-cta:hover{transform:translateY(-2px)!important}

/* Visible Admin Dashboard shortcut for authenticated administrators.  The JS
   only creates it after api/session-state.php confirms the Admin session. */
.dm-admin-access{min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border-radius:12px;background:linear-gradient(135deg,#c7a13a,#a98320);color:#fff!important;font-size:11px;font-weight:850;text-decoration:none;box-shadow:0 9px 22px rgba(199,161,58,.22);transition:.24s var(--dmnav-ease)}
.dm-admin-access:hover{transform:translateY(-2px);filter:brightness(.98);box-shadow:0 14px 28px rgba(199,161,58,.28)}
.dm-admin-access .dm-nav-icon{width:14px;height:14px;flex:0 0 14px}
.dm-admin-mobile-link{background:rgba(199,161,58,.12)!important;color:#8a6815!important;border:1px solid rgba(199,161,58,.22)}
html.dark .dm-admin-mobile-link{background:rgba(199,161,58,.14)!important;color:#e7c96c!important;border-color:rgba(199,161,58,.28)}

/* Dashboard navigation: same DNA, richer application controls. */
.navbar.telc-navbar__inner{
  top:0!important;height:76px!important;min-height:76px!important;padding:0 20px!important;
}
.navbar.telc-navbar__inner .navbar-brand,
.navbar.telc-navbar__inner .telc-navbar__brand{min-width:170px!important}
.navbar.telc-navbar__inner .brand-logo-img{width:40px!important;height:40px!important;border-radius:12px!important;background:#fff;padding:4px!important;box-shadow:0 7px 18px rgba(15,23,42,.07)}
.navbar.telc-navbar__inner .brand-level{font-family:"Space Grotesk",sans-serif!important;font-size:12px!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--dmnav-ink)!important}
.navbar.telc-navbar__inner .telc-navbar__controls{gap:5px!important}
.navbar.telc-navbar__inner .telc-nav-link,
.navbar.telc-navbar__inner .telc-home-btn{
  min-height:38px!important;padding:8px 10px!important;border-radius:11px!important;
  border:1px solid transparent!important;background:transparent!important;color:#66707a!important;
  font-size:10px!important;font-weight:760!important;box-shadow:none!important;transition:.22s var(--dmnav-ease)!important;
}
.navbar.telc-navbar__inner .telc-nav-link:hover,
.navbar.telc-navbar__inner .telc-home-btn:hover{background:#fff!important;color:var(--dmnav-ink)!important;transform:translateY(-1px)!important;box-shadow:0 8px 20px rgba(16,18,22,.05)!important}

/* Authenticated V6 app shell — same visual language, mobile-first. */
.v6-nav{height:72px!important;position:sticky!important;top:0!important;z-index:1000!important}
.v6-nav .v6-navin{width:min(1320px,calc(100% - 32px))!important;margin-inline:auto!important;height:100%!important}
.v6-brand{font-family:"Space Grotesk",sans-serif!important;font-weight:800!important;letter-spacing:-.04em!important;color:var(--dmnav-ink)!important}
.v6-mark{background:var(--dmnav-ink)!important;color:#fff!important;border-radius:11px!important}
.v6-links a{transition:.22s var(--dmnav-ease)!important;border-radius:11px!important}
.v6-links a:hover{transform:translateY(-1px)!important;background:#fff!important;box-shadow:0 8px 18px rgba(16,18,22,.06)!important}

/* Dark mode */
html.dark .global-top-nav,html.dark .dm-topbar,html.dark .navbar.telc-navbar__inner,html.dark .v6-nav{background:rgba(16,19,24,.90)!important;border-bottom-color:rgba(255,255,255,.08)!important;box-shadow:0 12px 34px rgba(0,0,0,.22)!important;color:#fff!important}
html.dark .global-top-nav .global-nav-brand .brand-text,html.dark .dm-brand-word,html.dark .navbar.telc-navbar__inner .brand-level,html.dark .v6-brand{color:#fff!important}
html.dark .global-nav-links a,html.dark .dm-main-nav a{color:#aeb7c1!important}
html.dark .global-nav-links a:hover,html.dark .dm-main-nav a:hover{background:#1a1f25!important;color:#fff!important}
html.dark .global-nav-links a.active,html.dark .dm-main-nav a.active{background:rgba(225,29,46,.14)!important;color:#ff6e78!important}
html.dark .global-nav-links a.nav-login{background:#171b20!important;color:#fff!important;border-color:rgba(255,255,255,.08)!important}
html.dark .global-nav-links a.nav-register{background:#fff!important;color:#111318!important}
html.dark .dm-text-link:hover,html.dark .dm-circle-btn:hover{background:#1b2027!important;color:#fff!important}

/* Public level roadmap: more breathable, less repetitive and easier to scan. */
.level-roadmap-section,.sp-section.level-roadmap-section{scroll-margin-top:90px}
.sp-level-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
.sp-level-card{
  min-height:350px!important;padding:27px!important;border-radius:30px!important;
  display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  isolation:isolate!important;
}
.sp-level-number{font-size:9px!important;letter-spacing:.11em!important}
.sp-level-number span:last-child{color:#9aa2ab!important}
.sp-level-code{font-size:clamp(5.1rem,6.3vw,6.7rem)!important;line-height:.82!important;margin-top:30px!important;letter-spacing:-.10em!important;opacity:.92!important;position:relative!important;z-index:2!important}
.sp-level-card::before{width:148px!important;height:148px!important;right:-38px!important;top:73px!important;opacity:.75!important}
.sp-level-card::after{width:74px!important;height:74px!important;right:30px!important;top:112px!important;opacity:.7!important}
.sp-level-content{position:static!important;margin-top:auto!important;z-index:3!important;padding-top:22px!important}
.sp-level-content h3{font-size:1.55rem!important;margin-bottom:8px!important}
.sp-level-content p{font-size:11px!important;line-height:1.7!important;max-width:330px!important}
.sp-level-arrow{margin-top:16px!important;font-size:10px!important;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);width:max-content;max-width:100%}
.sp-level-card:hover .sp-level-arrow i{transform:translateX(4px)!important;transition:transform .25s var(--dmnav-ease)!important}
.sp-level-card:hover::before{animation-duration:5s!important}
.sp-level-card:nth-child(1),.sp-level-card:nth-child(2){background:linear-gradient(145deg,#181b20,#0f1217)!important}
.sp-level-card:nth-child(3),.sp-level-card:nth-child(4){background:linear-gradient(145deg,#171b20,#0d1115)!important}
.sp-level-card:nth-child(5),.sp-level-card:nth-child(6){background:linear-gradient(145deg,#15191e,#0b0e12)!important}

@media (max-width:1160px){
  .global-top-nav .global-nav-inner,.dm-topbar .dm-topbar-inner{width:min(100% - 28px,1320px)!important}
  .global-nav-links a,.dm-main-nav a{padding-inline:9px!important;font-size:10px!important}
  .global-nav-brand .brand-text{display:none!important}
  .dm-main-nav{margin-left:8px!important}
  .dm-top-actions .dm-text-link{padding-inline:8px!important}
}
@media (max-width:900px){
  .sp-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .global-top-nav .global-nav-links{gap:2px!important}
  .global-nav-links a,.dm-main-nav a{padding-inline:8px!important}
}
@media (max-width:820px){
  .global-top-nav,.dm-topbar{height:72px!important;min-height:72px!important}
  .global-top-nav .global-nav-inner,.dm-topbar .dm-topbar-inner{height:72px!important;width:min(100% - 24px,1320px)!important}
  body.global-nav-offset,body.telc-dashboard-page{padding-top:72px!important}
  .global-top-nav .global-nav-links{display:none!important;position:absolute!important;top:72px!important;left:12px!important;right:12px!important;flex-direction:column!important;align-items:stretch!important;padding:10px!important;border:1px solid var(--dmnav-line)!important;border-radius:18px!important;background:rgba(251,250,247,.98)!important;box-shadow:0 26px 60px rgba(16,18,22,.15)!important;backdrop-filter:blur(20px)!important}
  .global-top-nav .global-nav-links.open{display:flex!important}
  .global-top-nav .global-nav-links a{min-height:44px!important;width:100%!important;justify-content:flex-start!important;font-size:12px!important}
  .global-top-nav .global-nav-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;cursor:pointer}
  .global-top-nav .global-nav-right{margin-left:auto!important}
  .global-top-nav .global-nav-actions{display:flex!important}
  .dm-main-nav{display:none!important}
  .dm-top-actions .dm-menu-btn{display:grid!important}
  .dm-mobile-menu{position:absolute!important;top:72px!important;left:0!important;right:0!important;z-index:9998!important;border-top:1px solid var(--dmnav-line)!important;box-shadow:0 28px 60px rgba(16,18,22,.12)!important}
  .dm-mobile-menu-inner{width:min(100% - 24px,1320px)!important}
  .sp-page{padding-top:72px!important}
  .sp-level-grid{grid-template-columns:1fr!important;gap:16px!important}
  .sp-level-card{min-height:320px!important}
}
@media (prefers-reduced-motion:reduce){
  .global-nav-brand,.dm-brand,.global-nav-links a,.dm-main-nav a,.sp-level-card,.sp-level-card::before{transition:none!important;animation:none!important}
}

.sp-level-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;position:relative;z-index:4}
.sp-level-skills span{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.045);color:#b8c0c9;font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.sp-level-card:hover .sp-level-skills span{border-color:rgba(225,29,46,.24);background:rgba(225,29,46,.06);color:#fff;transition:.25s var(--dmnav-ease)}
html.dark .sp-level-skills span{color:#aeb7c1}

/* Admin sidebar: same interaction quality, without changing the information architecture. */
.dm-side .nav a{
  position:relative!important;
  border-radius:12px!important;
  transition:background .22s var(--dmnav-ease),color .22s var(--dmnav-ease),transform .22s var(--dmnav-ease),box-shadow .22s var(--dmnav-ease)!important;
}
.dm-side .nav a:hover{transform:translateX(3px)!important;box-shadow:0 10px 22px rgba(0,0,0,.12)!important}
.dm-side .nav a.active{box-shadow:0 12px 26px rgba(225,29,46,.14)!important}

/* Slightly better breathe in the public roadmap section. */
.level-roadmap-section .sp-section-head{margin-bottom:42px!important}
.level-roadmap-section .sp-section-head p{max-width:520px!important}
@media(max-width:680px){
  .level-roadmap-section .sp-section-head{margin-bottom:26px!important}
  .sp-level-code{font-size:5.6rem!important;margin-top:26px!important}
  .sp-level-card{padding:23px!important;border-radius:26px!important}
}

/* Brand action tokens apply consistently across public and authenticated navs. */
.dm-header-cta,.dm-primary-action:not(.light){background:var(--dm-red)!important;box-shadow:0 12px 26px rgba(225,29,46,.18)!important}
.dm-header-cta:hover,.dm-primary-action:not(.light):hover{background:var(--dm-red-dark)!important;box-shadow:0 18px 34px rgba(225,29,46,.22)!important}
.global-nav-links a.nav-register,nav.fixed a[href="register.php"]{background:var(--dmnav-red)!important;color:#fff!important;box-shadow:0 10px 24px rgba(225,29,46,.16)!important}
.global-nav-links a.nav-register:hover,nav.fixed a[href="register.php"]:hover{background:#b31321!important;color:#fff!important}
html.dark .global-nav-links a.nav-register,html.dark nav.fixed a[href="register.php"]{background:#e11d2e!important;color:#fff!important}
.global-top-nav .global-nav-links{background:rgba(246,247,249,.98)!important}
html.dark .global-top-nav .global-nav-links{background:rgba(16,19,24,.98)!important}
@media(max-width:820px){.global-top-nav .global-nav-links a{min-height:48px!important}}

/* Floating site navigation refinement. The same shell is used by both the
   canonical public header and the legacy public header patched by the nav JS. */
.dm-topbar,
.global-top-nav {
  position: fixed !important;
  z-index: 10000 !important;
  top: 8px !important;
  right: auto !important;
  left: 50% !important;
  width: min(1420px, calc(100% - 36px)) !important;
  height: 68px !important;
  min-height: 68px !important;
  border: 1px solid rgba(16, 18, 22, .09) !important;
  border-radius: 20px !important;
  background: rgba(250, 250, 249, .91) !important;
  box-shadow: 0 14px 38px rgba(16, 18, 22, .09), 0 2px 8px rgba(16, 18, 22, .035) !important;
  transform: translateX(-50%) !important;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}
.dm-topbar.scrolled,
.global-top-nav.scrolled {
  border-color: rgba(16, 18, 22, .12) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 18px 44px rgba(16, 18, 22, .12), 0 3px 10px rgba(16, 18, 22, .04) !important;
}
.dm-topbar .dm-topbar-inner,
.global-top-nav .global-nav-inner {
  width: min(1320px, calc(100% - 40px)) !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 15px !important;
}
.dm-topbar .dm-main-nav,
.global-top-nav .global-nav-links { gap: 2px !important; }
.dm-main-nav a,
.global-nav-links a {
  min-height: 40px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
}
.dm-main-nav a i,
.global-nav-links a i { font-size: 11px; opacity: .82; }
.dm-main-nav a.active,
.global-nav-links a.active {
  background: rgba(225, 29, 46, .075) !important;
  color: #ad1522 !important;
  border-color: rgba(225, 29, 46, .12) !important;
}
.dm-main-nav a.active::after,
.global-nav-links a.active::after { transform: scaleX(.48); }
.dm-topbar .dm-brand,
.global-top-nav .global-nav-brand { gap: 9px !important; }
.dm-topbar .dm-brand-mark,
.global-top-nav .brand-logo-img {
  border: 1px solid rgba(16, 18, 22, .07) !important;
  box-shadow: 0 5px 14px rgba(16, 18, 22, .07) !important;
}
.dm-topbar .dm-brand-word { font-size: 15px !important; }
.dm-top-actions { gap: 10px !important; }
.global-top-nav .global-nav-right { gap: 5px !important; }
.dm-top-actions .dm-circle-btn,
.global-top-nav .global-nav-toggle {
  width: 39px !important;
  height: 39px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #59616a !important;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease !important;
}
.dm-top-actions .dm-circle-btn:hover,
.global-top-nav .global-nav-toggle:hover {
  border-color: rgba(16, 18, 22, .07) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: var(--dmnav-ink) !important;
  transform: translateY(-1px) !important;
}
.dm-top-actions .dm-text-link { padding-inline: 9px !important; }
.dm-top-actions .dm-header-cta {
  min-height: 39px !important;
  padding-inline: 14px !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
}
.dm-top-actions .telc-lang-trigger,
.global-nav-actions .telc-lang-trigger {
  min-height: 38px !important;
  gap: 7px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(16, 18, 22, .09) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .58) !important;
  box-shadow: none !important;
  color: #4e5660 !important;
  font-size: 10px !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.telc-lang-mount--navbar .telc-flag-badge,
.dm-top-actions .telc-lang-trigger > .telc-flag-badge,
.global-nav-actions .telc-lang-trigger > .telc-flag-badge { display: none !important; }
.dm-top-actions .telc-lang-trigger:hover,
.dm-top-actions .telc-lang-trigger:focus-visible,
.global-nav-actions .telc-lang-trigger:hover,
.global-nav-actions .telc-lang-trigger:focus-visible,
.dm-top-actions .telc-lang-trigger[aria-expanded="true"],
.global-nav-actions .telc-lang-trigger[aria-expanded="true"] {
  border-color: rgba(225, 29, 46, .24) !important;
  background: #fff !important;
  box-shadow: 0 5px 15px rgba(16, 18, 22, .07) !important;
  transform: translateY(-1px);
}
.dm-top-actions .telc-lang-chevron,
.global-nav-actions .telc-lang-chevron { color: var(--dmnav-red) !important; }
.dm-top-actions .telc-lang-menu,
.global-nav-actions .telc-lang-menu {
  border-color: rgba(16, 18, 22, .09) !important;
  border-radius: 17px !important;
  box-shadow: 0 20px 48px rgba(16, 18, 22, .16) !important;
}
.dm-top-actions .telc-lang-option:hover,
.dm-top-actions .telc-lang-option:focus-visible,
.global-nav-actions .telc-lang-option:hover,
.global-nav-actions .telc-lang-option:focus-visible {
  border-color: rgba(225, 29, 46, .18) !important;
  background: rgba(225, 29, 46, .055) !important;
  box-shadow: none !important;
  transform: none !important;
}
.dm-topbar a:focus-visible,
.dm-topbar button:focus-visible,
.global-top-nav a:focus-visible,
.global-top-nav button:focus-visible {
  outline: 3px solid rgba(225, 29, 46, .4) !important;
  outline-offset: 3px !important;
}

html.dark .dm-topbar,
html.dark .global-top-nav {
  border-color: rgba(255, 255, 255, .09) !important;
  background: rgba(19, 22, 27, .91) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28) !important;
}
html.dark .dm-topbar.scrolled,
html.dark .global-top-nav.scrolled {
  border-color: rgba(255, 255, 255, .11) !important;
  background: rgba(16, 19, 24, .97) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .36) !important;
}
html.dark .dm-topbar .dm-brand-mark,
html.dark .global-top-nav .brand-logo-img { border-color: rgba(255, 255, 255, .08) !important; }
html.dark .dm-main-nav a.active,
html.dark .global-nav-links a.active { color: #ff7b83 !important; }
html.dark .dm-top-actions .dm-circle-btn,
html.dark .global-top-nav .global-nav-toggle { color: #c1c8d0 !important; }
html.dark .dm-top-actions .dm-circle-btn:hover,
html.dark .global-top-nav .global-nav-toggle:hover { background: #20252c !important; color: #fff !important; }
html.dark .dm-top-actions .telc-lang-trigger,
html.dark .global-nav-actions .telc-lang-trigger {
  border-color: rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: #d4d9df !important;
}
html.dark .dm-top-actions .telc-lang-menu,
html.dark .global-nav-actions .telc-lang-menu { border-color: rgba(255, 255, 255, .1) !important; }

@media (max-width: 960px) {
  .dm-topbar,
  .global-top-nav {
    top: 8px !important;
    width: calc(100% - 24px) !important;
    height: 64px !important;
    min-height: 64px !important;
    border-radius: 18px !important;
  }
  .dm-topbar .dm-topbar-inner,
  .global-top-nav .global-nav-inner {
    width: calc(100% - 24px) !important;
    height: 64px !important;
    gap: 10px !important;
  }
  .dm-topbar .dm-brand-word { display: none !important; }
  .dm-topbar .dm-main-nav,
  .global-top-nav .global-nav-links { display: none !important; }
  .dm-topbar .dm-top-actions .dm-text-link,
  .dm-topbar .dm-top-actions .dm-header-cta,
  .dm-topbar .dm-top-actions .dm-admin-access { display: none !important; }
  .dm-topbar .dm-top-actions .dm-menu-btn,
  .global-top-nav .global-nav-toggle { display: grid !important; place-items: center !important; }
  .global-top-nav .global-nav-toggle { display: inline-flex !important; }
  .global-top-nav .global-nav-links,
  .dm-topbar .dm-mobile-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 9998 !important;
    border: 1px solid rgba(16, 18, 22, .09) !important;
    border-radius: 19px !important;
    background: rgba(250, 250, 249, .98) !important;
    box-shadow: 0 24px 55px rgba(16, 18, 22, .16) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  }
  .global-top-nav .global-nav-links.open { display: flex !important; }
  .global-top-nav .global-nav-links a,
  .dm-topbar .dm-mobile-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 46px !important;
    padding: 11px 13px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
  }
  .dm-topbar .dm-mobile-menu-inner {
    width: 100% !important;
    max-height: min(70vh, 520px) !important;
    gap: 4px !important;
    overflow-y: auto !important;
    padding: 10px !important;
  }
  .dm-topbar .dm-mobile-menu a.active,
  .global-top-nav .global-nav-links a.active {
    border-color: rgba(225, 29, 46, .12) !important;
    background: rgba(225, 29, 46, .07) !important;
    color: #ad1522 !important;
  }
  .dm-topbar .dm-mobile-menu a.is-primary,
  .global-top-nav .global-nav-links a.nav-register {
    justify-content: center !important;
    margin-top: 3px !important;
    background: var(--dmnav-red) !important;
    color: #fff !important;
  }
  html.dark .global-top-nav .global-nav-links,
  html.dark .dm-topbar .dm-mobile-menu {
    border-color: rgba(255, 255, 255, .1) !important;
    background: rgba(18, 21, 26, .98) !important;
  }
  html.dark .dm-topbar .dm-mobile-menu a,
  html.dark .global-top-nav .global-nav-links a { color: #c6cdd5 !important; }
  html.dark .dm-topbar .dm-mobile-menu a.active,
  html.dark .global-top-nav .global-nav-links a.active { color: #ff7b83 !important; }
  html.dark .dm-topbar .dm-mobile-menu a.is-primary,
  html.dark .global-top-nav .global-nav-links a.nav-register { color: #fff !important; }
}

@media (max-width: 520px) {
  .dm-topbar,
  .global-top-nav { width: calc(100% - 16px) !important; }
  .dm-topbar .dm-topbar-inner,
  .global-top-nav .global-nav-inner { width: calc(100% - 18px) !important; }
  .dm-top-actions,
  .global-top-nav .global-nav-right { gap: 3px !important; }
  .dm-top-actions .dm-circle-btn,
  .global-top-nav .global-nav-toggle { width: 37px !important; height: 37px !important; }
  .dm-top-actions .telc-lang-trigger,
  .global-nav-actions .telc-lang-trigger { min-height: 36px !important; padding-inline: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-topbar,
  .global-top-nav,
  .dm-topbar a,
  .dm-topbar button,
  .global-top-nav a,
  .global-top-nav button { transition: none !important; }
}

/* Navbar icon family: crisp outline symbols, sized by their control. */
.dm-topbar .dm-nav-icon,
.global-top-nav .dm-nav-icon {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
  color: currentColor !important;
  opacity: .88;
}
.dm-topbar .dm-main-nav .dm-nav-icon,
.global-top-nav .global-nav-links .dm-nav-icon { width: 13px !important; height: 13px !important; }
.dm-topbar .dm-mobile-menu .dm-nav-icon,
.global-top-nav .global-nav-links.open .dm-nav-icon { width: 16px !important; height: 16px !important; }
.dm-topbar .dm-top-actions .dm-circle-btn .dm-nav-icon,
.global-top-nav .global-nav-toggle .dm-nav-icon { width: 17px !important; height: 17px !important; }
.dm-topbar .dm-header-cta .dm-nav-icon { width: 14px !important; height: 14px !important; }
.dm-topbar .telc-lang-trigger .telc-lang-chevron.dm-nav-icon,
.global-top-nav .telc-lang-trigger .telc-lang-chevron.dm-nav-icon { width: 11px !important; height: 11px !important; }
.dm-topbar .dm-nav-icon--arrow-up-right-from-square { margin-left: 2px; }

/* Compact language control modeled on the translation icon + locale code. */
.dm-topbar .telc-lang-selector--navbar .telc-lang-trigger--navbar,
.global-top-nav .telc-lang-selector--navbar .telc-lang-trigger--navbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 62px !important;
  min-height: 40px !important;
  padding: 4px 7px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1d3557 !important;
  font-size: 17px !important;
  transform: none !important;
  transition: background .18s ease, color .18s ease !important;
}
.dm-topbar .telc-lang-trigger--navbar:hover,
.dm-topbar .telc-lang-trigger--navbar:focus-visible,
.dm-topbar .telc-lang-trigger--navbar[aria-expanded="true"],
.global-top-nav .telc-lang-trigger--navbar:hover,
.global-top-nav .telc-lang-trigger--navbar:focus-visible,
.global-top-nav .telc-lang-trigger--navbar[aria-expanded="true"] {
  border: 0 !important;
  background: rgba(29, 53, 87, .055) !important;
  box-shadow: none !important;
  color: #142d4f !important;
  transform: none !important;
}
.telc-lang-selector--navbar .telc-lang-translate-icon {
  display: block;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}
.telc-lang-selector--navbar .telc-lang-label {
  max-width: none !important;
  overflow: visible !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  text-transform: uppercase;
}
.telc-lang-selector--navbar .telc-lang-chevron { display: none !important; }
html.dark .telc-lang-selector--navbar .telc-lang-trigger--navbar { color: #e4eaf2 !important; }
html.dark .telc-lang-selector--navbar .telc-lang-trigger--navbar:hover,
html.dark .telc-lang-selector--navbar .telc-lang-trigger--navbar:focus-visible,
html.dark .telc-lang-selector--navbar .telc-lang-trigger--navbar[aria-expanded="true"] {
  background: rgba(255, 255, 255, .075) !important;
  color: #fff !important;
}

/* Theme toggle icon — the circle button always shows EXACTLY ONE icon: the sun
   in light mode and the moon in dark mode. html.dark is set by the theme boot
   in <head> before the first paint, so the icon is correct from the very first
   frame (no JS, no flash, no reload). The classes survive the Font Awesome →
   inline-SVG conversion performed by deutchmaak-unified-nav.js, so they also
   drive the converted icons on pages where that script runs.
   The !important guards are mandatory: the base .dm-nav-icon rule above forces
   display:inline-block !important on every converted icon, which would
   otherwise reveal sun AND moon at the same time. */
.dm-circle-btn .dm-theme-sun { display: inline-block !important; }
.dm-circle-btn .dm-theme-moon { display: none !important; }
html.dark .dm-circle-btn .dm-theme-sun { display: none !important; }
html.dark .dm-circle-btn .dm-theme-moon { display: inline-block !important; }

/* ============================================================
   Theme Toggle button — canonical look (shared control).
   index.html and every page using the unified navbar (learning,
   speaking, exam, exam-run, ai-tutor, …) style THIS component
   through the rules below — one source, identical everywhere:
     LIGHT : clean light/white surface + yellow sun  → ☀️
     DARK  : dark navbar surface       + yellow moon → 🌙
   The button NEVER keeps a white surface in dark mode.
   The theme ENGINE is untouched (telc-theme-toggle.js, html.dark,
   localStorage key "theme"): this block only styles the control.
   Both the Font Awesome <i> form and the SVG form produced by
   deutchmaak-unified-nav.js carry .dm-theme-sun / .dm-theme-moon,
   so the selectors hit either. Yellow follows currentColor of the
   icon (stroke=currentColor, fill=none), no white/black override.
   ============================================================ */
.dm-top-actions .dm-circle-btn {
  background: rgba(255, 255, 255, .85) !important;
  border-color: rgba(16, 18, 22, .1) !important;
  box-shadow: 0 2px 10px rgba(16, 18, 22, .05) !important;
}
.dm-top-actions .dm-circle-btn:hover {
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(16, 18, 22, .08) !important;
}
html.dark .dm-top-actions .dm-circle-btn {
  background: #1d2229 !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
}
html.dark .dm-top-actions .dm-circle-btn:hover {
  background: #262c36 !important;
}
/* Sun / Moon icon visibility upgrade — the SAME rule covers both the Font
   Awesome <i> form and the SVG form produced by deutchmaak-unified-nav.js
   (svg keeps .dm-theme-sun/.dm-theme-moon and uses stroke="currentColor",
   fill="none" attributes). CSS fill on the svg element overrides its
   fill="none" attribute and is inherited by the sun <circle>/rays and the
   moon crescent, turning the glyphs into SOLID bright gold icons. opacity:1
   removes the generic navbar fade (was .88); the tight drop-shadow adds the
   subtle outline that keeps the yellow crisp on the light button. Same
   treatment for sun and moon → identical visual weight, size, alignment. */
.dm-top-actions .dm-circle-btn .dm-theme-sun,
.dm-top-actions .dm-circle-btn .dm-theme-moon {
  color: #FFD700 !important;                                       /* bright gold */
  fill: currentColor !important;                                   /* solid fill (sun disc + crescent) */
  opacity: 1 !important;                                           /* fully vivid */
  filter: drop-shadow(0 0 1px rgba(120, 80, 0, .45)) !important;  /* subtle amber outline */
}
html.dark .dm-top-actions .dm-circle-btn .dm-theme-sun,
html.dark .dm-top-actions .dm-circle-btn .dm-theme-moon {
  color: #FFD700 !important;
  fill: currentColor !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35)) !important;     /* crisp edge on the dark surface */
}

/* ===========================================================================
   2026-10-08 — ADMIN NAVBAR STRUCTURE FIX (surgical, CSS-only).

   Problem: the right-hand cluster (lang selector · theme toggle · Mon espace ·
   Déconnexion · Dashboard Admin) was compressed by a 5px gap, and the main nav
   used margin-inline:auto centering that left the top-actions no reserved
   space — on narrower desktops the two groups collided.

   This block restructures the SAME markup into two stable logical groups
   without touching the legacy .global-top-nav bar or any control's design:

     LEFT  : .dm-brand + .dm-main-nav   (logo + site links)
     RIGHT : .dm-top-actions            (lang · theme · Mon espace ·
                                         Déconnexion · Dashboard Admin)

   The right-group gap is definitive at 10px in the cascade above; this block
   only wires the container, the flexible left member, the anchored right
   member, and the tablet fold (the project's own #mobile-menu mechanism).
   =========================================================================== */

/* 1 — One stable container: children flow left→right (brand, links, actions). */
.dm-topbar .dm-topbar-inner {
  justify-content: flex-start !important;   /* replaces space-between so brand+links form the left group */
}

/* 2 — Left group: the nav is the flexible member (nowrap links, min-width:0),
      so it absorbs the free space and never eats into the right group. */
.dm-topbar .dm-main-nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-inline: 0 !important;              /* replaces the margin-inline:auto centering */
  justify-content: flex-start !important;
}

/* 3 — Right group: fixed footprint, anchored to the far right of the bar. */
.dm-topbar .dm-top-actions {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* 4 — Narrow laptops / tablets: the main nav folds into the EXISTING
      #mobile-menu (same rule as the ≤960px block already uses for phones), so
      the bar cannot overflow; lang · theme · account · admin controls remain
      visible and separated at these widths and only fold at ≤960px as before. */
@media (max-width: 1279px) {
  .dm-topbar .dm-main-nav { display: none !important; }
  .dm-topbar .dm-top-actions .dm-menu-btn { display: grid !important; place-items: center !important; }
}

/* 5 — 1280–1399px desktops: the widest admin state (8 links + 5 controls) still
      fits with a marginal link-padding compaction; ≥1400px uses the base size. */
@media (min-width: 1280px) and (max-width: 1399px) {
  .dm-topbar .dm-main-nav a { padding-inline: 8px !important; }
}

/* ===========================================================================
   2026-10-12 — ARABDICT FLOATING DICTIONARY

   The button and its window are built by deutchmaak-unified-nav.js. The styles
   live here (reusing the shared tokens --dm-ink / --dm-red / --dm-ease) so the
   component ships with the always-loaded navbar stylesheet, in light and dark
   themes alike, with no extra request and no per-page work.
   =========================================================================== */

/* — Floating action button (bottom-right, chat-bubble style) — */
.dm-dict-fab{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10040;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16,18,22,.10);
  border-radius: 18px;
  background: #ffffff;
  color: var(--dm-ink);
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(16,18,22,.20);
  transition: transform .28s var(--dm-ease), background-color .28s var(--dm-ease),
              color .24s var(--dm-ease), border-color .24s var(--dm-ease),
              box-shadow .28s var(--dm-ease);
}
.dm-dict-fab .dm-nav-icon{ width: 24px !important; height: 24px !important; display: block; }
/* The icon is the dictionary PNG (transparent background). It carries the
   rotation, so the button's own hover/active transform is never touched. */
.dm-dict-fab .dm-dict-fab-img{
  width: 34px !important;
  height: 34px !important;
  display: block;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: dm-dict-spin 6s var(--dm-ease) infinite;
}
/* One full turn in the first 10% (0.6 s of 6 s), then ~5 s completely still,
   then again — never a continuous spin. */
@keyframes dm-dict-spin{
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
.dm-dict-fab:hover{
  background: var(--dm-ink);
  border-color: var(--dm-ink);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(16,18,22,.28);
}
.dm-dict-fab:active{ transform: translateY(-1px) scale(.96); }
/* Brief "checking the subscription" state while api/dictionary-access.php answers. */
.dm-dict-fab.is-busy{ cursor: progress; opacity: .78; }
.dm-dict-fab:focus-visible{ outline: 3px solid rgba(225,29,46,.45); outline-offset: 3px; }
html.dark .dm-dict-fab{
  background: #151a21;
  color: #f3f4f6;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
html.dark .dm-dict-fab:hover{
  background: var(--dm-red);
  border-color: var(--dm-red);
  color: #ffffff;
}
/* Clear the legacy bottom-right launcher (indexb1/indexb2) when it is present. */
body.dm-dict-raised .dm-dict-fab{ bottom: 74px; }

/* — Modal window — */
.dm-dict-dialog{
  display: flex;
  flex-direction: column;
  width: min(1120px, 96vw);
  height: min(840px, 88vh);
  overflow: hidden;
  border: 1px solid rgba(16,18,22,.12);
  border-radius: 20px;
  background: #ffffff;
  color: var(--dm-ink);
  box-shadow: 0 34px 90px rgba(0,0,0,.45);
  transform: translateY(16px) scale(.985);
}
html.dark .dm-dict-dialog{
  background: #0f141a;
  color: #f3f4f6;
  border-color: rgba(255,255,255,.12);
}
.dm-dict-overlay{
  position: fixed;
  inset: 0;
  z-index: 100900;
  /* Toggled between none and flex. display flips instantly (unlike a
     transitioned visibility), so the window and its controls are focusable the
     instant it opens; the fade is done with keyframes below. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9,11,14,.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
}
.dm-dict-overlay.is-open,
.dm-dict-overlay.is-closing{ display: flex; }
.dm-dict-overlay.is-open{
  opacity: 1;
  animation: dm-dict-overlay-in .22s ease both;
}
.dm-dict-overlay.is-closing{
  opacity: 0;
  pointer-events: none;
  animation: dm-dict-overlay-out .2s ease both;
}
@keyframes dm-dict-overlay-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes dm-dict-overlay-out{ from{ opacity: 1; } to{ opacity: 0; } }
@keyframes dm-dict-dialog-in{ from{ transform: translateY(16px) scale(.985); } to{ transform: none; } }
.dm-dict-overlay.is-open .dm-dict-dialog{ transform: none; animation: dm-dict-dialog-in .28s var(--dm-ease) both; }

.dm-dict-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(16,18,22,.08);
  background: rgba(246,247,249,.92);
}
html.dark .dm-dict-head{ background: #151a21; border-bottom-color: rgba(255,255,255,.08); }
.dm-dict-title{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font: 800 15px/1.2 "Space Grotesk", Inter, system-ui, sans-serif;
  letter-spacing: -.01em;
}
.dm-dict-title .dm-nav-icon{ width: 18px !important; height: 18px !important; display: block; color: var(--dm-red); flex: none; }
.dm-dict-title .dm-dict-title-img{ width: 20px !important; height: 20px !important; display: block; object-fit: contain; flex: none; }
.dm-dict-title span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-dict-actions{ display: flex; align-items: center; gap: 8px; flex: none; }
.dm-dict-close{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--dm-red);
  color: #ffffff;
  cursor: pointer;
  transition: background-color .22s var(--dm-ease), transform .22s var(--dm-ease);
}
.dm-dict-close .dm-nav-icon{ width: 18px !important; height: 18px !important; display: block; }
.dm-dict-close:hover{ background: #b31321; transform: rotate(90deg); }
.dm-dict-close:focus-visible{ outline: 3px solid rgba(225,29,46,.45); outline-offset: 2px; }

.dm-dict-body{ position: relative; flex: 1 1 auto; min-height: 0; background: #ffffff; }
html.dark .dm-dict-body{ background: #0b0f14; }
.dm-dict-frame{ display: block; width: 100%; height: 100%; border: 0; }
.dm-dict-note{
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid rgba(16,18,22,.08);
  background: #f6f7f9;
  color: #68717b;
  font-size: 11px;
  line-height: 1.5;
}
html.dark .dm-dict-note{ background: #151a21; border-top-color: rgba(255,255,255,.08); color: #93a0ae; }

/* The page behind the open window must not scroll underneath it. */
body.dm-dict-lock{ overflow: hidden; }

/* — "Subscription required" popup ------------------------------------------
   Same overlay shell and open/close animation as the dictionary window, only
   the card is smaller and holds the exact message + an animated packs CTA. */
.dm-dict-gate-dialog{ width: min(520px, 92vw); height: auto; }
.dm-dict-gate-body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 22px 24px;
}
.dm-dict-gate-msg{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--dm-ink);
}
html.dark .dm-dict-gate-msg{ color: #e7eaee; }
.dm-dict-gate-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;   /* centre le bouton horizontalement dans la popup */
  gap: 9px;
  padding: 12px 22px;
  border-radius: 13px;
  background: var(--dm-red);
  color: #ffffff;
  font: 800 14px/1 "Space Grotesk", Inter, system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(225,29,46,.32);
  animation: dm-dict-cta-pulse 1.9s var(--dm-ease) infinite;
}
.dm-dict-gate-cta .dm-nav-icon{ width: 17px !important; height: 17px !important; display: block; }
.dm-dict-gate-cta:hover{ background: #c8111f; box-shadow: 0 16px 30px rgba(225,29,46,.4); }
.dm-dict-gate-cta:focus-visible{ outline: 3px solid rgba(225,29,46,.45); outline-offset: 3px; }
@keyframes dm-dict-cta-pulse{
  0%, 100%{ transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* Phones: full-screen window; the button clears the fixed bottom bars
   (.v6-bottom, .dm-mobile-learn-nav) and the legacy launcher. */
@media (max-width: 640px){
  .dm-dict-overlay{ padding: 0; }
  .dm-dict-dialog{ width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .dm-dict-fab{ right: 14px; bottom: 84px; }
  body.dm-dict-raised .dm-dict-fab{ bottom: 120px; }
  /* The gate stays a card on phones — never a full-screen dictionary window. */
  .dm-dict-gate-dialog{ width: calc(100vw - 28px); height: auto; border: 1px solid rgba(16,18,22,.12); border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce){
  .dm-dict-overlay,
  .dm-dict-fab,
  .dm-dict-dialog,
  .dm-dict-close{ transition: none !important; }
  .dm-dict-overlay.is-open,
  .dm-dict-overlay.is-closing,
  .dm-dict-overlay.is-open .dm-dict-dialog{ animation: none !important; }
  .dm-dict-fab .dm-dict-fab-img{ animation: none !important; }
  .dm-dict-gate-cta{ animation: none !important; transition: none !important; }
}