:root {
  --pm-bg: #f8fafc;
  --pm-surface: #ffffff;
  --pm-soft: #f1f5f9;
  --pm-border: #e2e8f0;
  --pm-border-strong: #cbd5e1;
  --pm-ink: #0f172a;
  --pm-muted: #64748b;
  --pm-primary: #1e3a8a;
  --pm-primary-hover: #172f70;
  --pm-primary-soft: #eff6ff;
  --pm-accent: #f59e0b;
  --pm-accent-soft: #fffbeb;
  --pm-terracotta: #c2410c;
  --pm-green: #047857;
  --pm-green-soft: #ecfdf5;
  --pm-violet: #6d28d9;
  --pm-violet-soft: #f5f3ff;
  --pm-rose: #be123c;
  --pm-rose-soft: #fff1f2;
  --pm-radius-sm: 10px;
  --pm-radius: 16px;
  --pm-radius-lg: 22px;
  --pm-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 6px 18px rgb(15 23 42 / .04);
  --pm-shadow-hover: 0 16px 38px rgb(15 23 42 / .09);
  --pm-content: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.pm-app {
  margin: 0;
  display: block;
  min-width: 320px;
  background: var(--pm-bg);
  color: var(--pm-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.pm-app a { color: inherit; text-decoration: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pm-icon {
  width: 20px; height: 20px; display: block; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.pm-icon--lg { width: 25px; height: 25px; }
.pm-skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 14px; border-radius: 8px;
  background: var(--pm-ink); color: #fff;
  transform: translateY(-160%);
}
.pm-skip:focus { transform: none; }
.pm-app :focus-visible { outline: 3px solid rgb(245 158 11 / .55); outline-offset: 3px; }

.pm-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgb(226 232 240 / .9);
  background: rgb(255 255 255 / .94);
  backdrop-filter: blur(14px);
}
.pm-header__inner {
  width: min(calc(100% - 40px), 1440px);
  min-height: 72px; margin: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 22px;
}
.pm-brand { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.pm-brand__mark {
  width: 39px; height: 39px; display: grid; place-items: center;
  border-radius: 12px; background: var(--pm-ink); color: var(--pm-accent);
  box-shadow: 0 8px 20px rgb(15 23 42 / .14);
}
.pm-brand__name { font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.pm-brand__name span { color: var(--pm-terracotta); }
.pm-header .pm-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  margin: 0;
}
.pm-nav__link {
  min-height: 40px; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px; border-radius: 9px; color: #475569;
  font-size: 13px; font-weight: 650; line-height: 1.15; white-space: nowrap;
  transition: color .16s, background .16s;
}
.pm-nav__link:hover { color: var(--pm-ink); background: var(--pm-soft); }
.pm-nav__link[aria-current="page"] { color: var(--pm-primary); background: var(--pm-primary-soft); }
.pm-nav__link .pm-icon { width: 17px; height: 17px; }
.pm-nav__link:not(:has(.pm-icon))::before {
  content: "";
  width: 17px; height: 17px; flex: 0 0 17px;
  background: currentColor;
  -webkit-mask: var(--pm-nav-icon) center / contain no-repeat;
  mask: var(--pm-nav-icon) center / contain no-repeat;
}
.pm-nav__link[href="/"] { --pm-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='m3 11 9-8 9 8v9h-6v-7H9v7H3Z'/%3E%3C/svg%3E"); }
.pm-nav__link[href="problemo-formation.html"] { --pm-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2ZM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7Z'/%3E%3C/svg%3E"); }
.pm-nav__link[href="problemo-structures.html"] { --pm-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z'/%3E%3C/svg%3E"); }
.pm-nav__link[href="problemo-banque-cycle-2-3.html"] { --pm-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M3 4h18v16H3zM7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E"); }
.pm-nav__link[href="problemo-analyseur-v2.html"] { --pm-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='m20 20-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
.pm-nav__link[href="problemo-generateur.html"] { --pm-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.pm-nav__link[href="problemo-laboratoire-sander.html"] { --pm-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M9 3h6M10 3v6l-5 9a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-9V3M8 15h8'/%3E%3C/svg%3E"); }
.pm-nav__link[href="problemater.html"] { --pm-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M8 13c-2 1-3 3-3 6h14c0-3-1-5-3-6'/%3E%3C/svg%3E"); }
.pm-nav__link[href="problemo-contact.html"] { --pm-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='20' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.pm-nav--special { justify-content: flex-end; gap: 6px; }
.pm-nav--special .pm-nav__link {
  border: 1px solid var(--pm-border); background: var(--pm-surface);
  font-size: 12.5px; font-weight: 700;
}
.pm-pill {
  display: inline-flex; align-items: center; padding: 3px 7px;
  border-radius: 999px; background: var(--pm-violet-soft);
  color: var(--pm-violet); font-size: 10px; font-weight: 800;
}
.pm-pill--cycle { background: var(--pm-green-soft); color: var(--pm-green); }
.pm-menu { display: none; position: relative; justify-self: end; }
.pm-menu summary {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--pm-border); border-radius: 10px;
  background: var(--pm-surface); cursor: pointer; list-style: none;
}
.pm-menu summary::-webkit-details-marker { display: none; }
.pm-menu__panel {
  position: absolute; top: 52px; right: 0;
  width: min(350px, calc(100vw - 32px)); max-height: calc(100vh - 90px);
  overflow: auto; padding: 10px;
  border: 1px solid var(--pm-border); border-radius: 14px;
  background: var(--pm-surface); box-shadow: var(--pm-shadow-hover);
}
.pm-header .pm-menu__panel { display: block; }
.pm-menu__panel .pm-nav__link { width: 100%; padding: 11px 12px; font-size: 14px; }
.pm-menu__panel .pm-pill { margin-left: auto; }

.pm-main { width: min(calc(100% - 40px), var(--pm-content)); margin: auto; padding: 48px 0 72px; }
.pm-pagehead { max-width: 820px; margin-bottom: 28px; }
.pm-eyebrow {
  margin: 0 0 8px; color: var(--pm-primary);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.pm-pagehead h1 {
  margin: 0; color: var(--pm-ink);
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.045em;
}
.pm-pagehead p { margin: 14px 0 0; color: var(--pm-muted); font-size: 17px; }
.pm-card {
  border: 1px solid var(--pm-border); border-radius: var(--pm-radius);
  background: var(--pm-surface); box-shadow: var(--pm-shadow);
}
.pm-button {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 15px; border: 1px solid var(--pm-primary); border-radius: var(--pm-radius-sm);
  background: var(--pm-primary); color: #fff; font: inherit; font-size: 13.5px; font-weight: 750;
  cursor: pointer; transition: background .16s, transform .16s, box-shadow .16s;
}
.pm-button:hover { background: var(--pm-primary-hover); transform: translateY(-1px); box-shadow: var(--pm-shadow); }
.pm-button--secondary { border-color: var(--pm-border); background: var(--pm-surface); color: var(--pm-ink); }
.pm-button--secondary:hover { border-color: var(--pm-border-strong); background: var(--pm-soft); }
.pm-field {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--pm-border-strong); border-radius: var(--pm-radius-sm);
  background: var(--pm-surface); color: var(--pm-ink); font: inherit;
}
.pm-field:hover { border-color: #94a3b8; }
.pm-field:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgb(59 130 246 / .12); outline: 0; }

@media (max-width: 1240px) {
  .pm-header__inner > .pm-nav { display: none; }
  .pm-menu { display: block; }
}
@media (max-width: 560px) {
  .pm-header__inner, .pm-main { width: min(calc(100% - 28px), var(--pm-content)); }
  .pm-header__inner { min-height: 64px; }
  .pm-brand__mark { width: 36px; height: 36px; }
  .pm-main { padding: 34px 0 52px; }
  .pm-pagehead p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}