/* ══════════════════════════════════════════
     LE MANUEL — page guides redesign
  ══════════════════════════════════════════ */

  .manuel-section-head { margin-bottom: 48px; }
  .manuel-section-h {
    font-family: var(--font-title);
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: .9;
    margin: 8px 0 0;
    color: var(--ivoire);
    font-weight: 400;
  }
  .manuel-section-p {
    font-size: 15px;
    color: rgba(245,244,240,.5);
    line-height: 1.65;
    max-width: 500px;
    margin: 14px 0 0;
  }

  /* ── HERO ── */
  .manuel-hero {
    padding: 148px 0 88px;
    position: relative;
    overflow: hidden;
  }
  .manuel-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 88% 12%, rgba(177,255,117,.11) 0%, transparent 44%),
      radial-gradient(ellipse at 10% 78%, rgba(200,239,255,.08) 0%, transparent 38%);
    pointer-events: none;
  }
  .manuel-hero::after {
    content: 'MANUEL';
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-52%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(120px, 20vw, 300px);
    line-height: 1;
    letter-spacing: .04em;
    color: rgba(245,244,240,.025);
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
  }
  .manuel-hero-h {
    font-family: var(--font-title);
    font-size: clamp(72px, 11vw, 148px);
    line-height: .88;
    color: var(--ivoire);
    font-weight: 400;
    margin: 0 0 24px;
  }
  .manuel-hero-p {
    font-size: 16px;
    color: rgba(245,244,240,.52);
    line-height: 1.65;
    max-width: 520px;
    margin: 0 0 48px;
  }
  .manuel-hero-stats {
    display: flex;
    gap: 40px;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  .manuel-stat { display: flex; align-items: baseline; gap: 10px; }
  .manuel-stat-num {
    font-family: var(--font-title);
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    background: linear-gradient(135deg, var(--lime) 0%, #7EEAFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .manuel-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(245,244,240,.38);
    line-height: 1.45;
  }

  /* ── ARTICLES ÉPINGLÉS (ivory) ── */
  .manuel-pinned {
    background: var(--ivoire);
    padding: 80px 0;
  }
  .manuel-pinned .manuel-section-h { color: var(--noir); }
  .manuel-pinned-feature {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background:
      linear-gradient(90deg, rgba(5,5,3,.9) 0%, rgba(5,5,3,.72) 48%, rgba(5,5,3,.42) 100%),
      linear-gradient(180deg, rgba(5,5,3,.2), rgba(5,5,3,.82)),
      url("../assets/marque/neons-atelier.jpg") center 48% / cover,
      var(--noir);
    border-radius: 20px;
    padding: 48px 52px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    transition: transform .25s;
    border: 1px solid rgba(200,239,255,.12);
  }
  .manuel-pinned-feature:hover { transform: translateY(-3px); }
  .manuel-pf-bg {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-52%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(80px, 14vw, 180px);
    line-height: 1;
    color: rgba(200,239,255,.055);
    pointer-events: none;
    user-select: none;
  }
  .manuel-pf-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .manuel-pf-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(200,239,255,.55);
    border: 1px solid rgba(200,239,255,.18);
    padding: 4px 10px;
    border-radius: 100px;
  }
  .manuel-pf-h {
    font-family: var(--font-title);
    font-size: clamp(28px, 3.5vw, 52px);
    line-height: .95;
    color: var(--ivoire);
    font-weight: 400;
    margin: 0 0 14px;
    max-width: 600px;
    position: relative;
  }
  .manuel-pf-p {
    font-size: 14px;
    color: rgba(245,244,240,.48);
    line-height: 1.65;
    max-width: 480px;
    margin: 0 0 22px;
    position: relative;
  }
  .manuel-pf-cta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #C8EFFF;
    border-bottom: 1px solid rgba(200,239,255,.35);
    padding-bottom: 2px;
    align-self: flex-start;
    position: relative;
  }
  .manuel-pinned-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .manuel-pinned-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 22px;
    background: #0c0c0a;
    border: 1.5px solid color-mix(in srgb, var(--guide-c) 18%, transparent);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .22s, transform .22s;
  }
  .manuel-pinned-card:hover {
    border-color: color-mix(in srgb, var(--guide-c) 50%, transparent);
    transform: translateY(-4px);
  }
  .manuel-pinned-card h3 {
    font-family: var(--font-title);
    font-size: clamp(17px, 1.6vw, 23px);
    line-height: 1.05;
    color: var(--ivoire);
    font-weight: 400;
    margin: 0;
  }
  .manuel-pinned-card p {
    font-size: 12px;
    color: rgba(245,244,240,.4);
    line-height: 1.5;
    margin: 0;
    flex: 1;
  }
  .manuel-card-read {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--guide-c);
    margin-top: auto;
  }

  /* ── FINDER (dark) ── */
  .manuel-finder {
    padding: 96px 0;
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(5,5,3,.98) 0%, rgba(10,10,8,1) 100%);
  }
  .manuel-finder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 12% 8%, rgba(200,239,255,.08) 0%, transparent 38%),
      radial-gradient(ellipse at 88% 34%, rgba(177,255,117,.07) 0%, transparent 34%);
    pointer-events: none;
  }
  .manuel-finder .container {
    position: relative;
    z-index: 1;
  }
  .manuel-finder .manuel-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 42px;
    align-items: end;
    margin-bottom: 34px;
  }
  .manuel-finder .manuel-section-h {
    max-width: 560px;
  }
  .manuel-finder .manuel-section-p {
    margin: 0;
    color: rgba(245,244,240,.62);
  }
  .mf-panel {
    position: relative;
    padding: 28px;
    background:
      linear-gradient(135deg, rgba(200,239,255,.07), transparent 38%),
      radial-gradient(circle at 92% 18%, rgba(177,255,117,.08), transparent 32%),
      rgba(245,244,240,.055);
    border: 1px solid rgba(200,239,255,.15);
    border-radius: 8px !important;
    box-shadow:
      0 28px 80px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(245,244,240,.08);
    backdrop-filter: blur(18px);
  }
  .mf-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      linear-gradient(135deg, rgba(245,244,240,.08), transparent 34%),
      radial-gradient(circle at 95% 8%, rgba(177,255,117,.08), transparent 26%);
    pointer-events: none;
  }
  .mf-progress {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    max-width: none;
    position: relative;
    z-index: 1;
  }
  .mf-prog-step {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245,244,240,.2);
    white-space: nowrap;
    transition: color .3s;
  }
  .mf-prog-step.active { color: var(--lime); }
  .mf-prog-step.done { color: rgba(245,244,240,.45); }
  .mf-prog-line {
    flex: 1;
    height: 1px;
    background: rgba(245,244,240,.11);
    margin: 0 14px;
    transition: background .3s;
  }
  .mf-prog-line.done {
    background: rgba(177,255,117,.26);
  }
  .mf-helper-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 34px;
    position: relative;
    z-index: 1;
  }
  .mf-helper-note span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(200,239,255,.16);
    border-radius: 999px;
    color: rgba(245,244,240,.68);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(5,5,3,.32);
  }
  .mf-helper-note span:nth-child(1) { border-color: rgba(177,255,117,.2); color: rgba(177,255,117,.72); }
  .mf-helper-note span:nth-child(2) { border-color: rgba(200,239,255,.18); color: rgba(200,239,255,.7); }
  .mf-helper-note span:nth-child(3) { border-color: rgba(245,244,240,.16); color: rgba(245,244,240,.62); }
  .mf-stage {
    position: relative;
    z-index: 1;
    min-height: 280px;
  }
  .mf-question { display: none; }
  .mf-question.active {
    display: block;
    animation: mfFadeIn .3s ease;
  }
  @keyframes mfFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .mf-q-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245,244,240,.5);
    margin: 0 0 18px;
  }
  .mf-choices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .mf-choices--3 { grid-template-columns: repeat(3, 1fr); }
  .mf-choice {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    min-height: 184px;
    padding: 22px;
    background:
      radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--mf-c, var(--lime)) 8%, transparent), transparent 30%),
      linear-gradient(180deg, rgba(245,244,240,.092), rgba(245,244,240,.038));
    border: 1px solid color-mix(in srgb, var(--mf-c, var(--lime)) 16%, rgba(245,244,240,.12));
    border-radius: 8px !important;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
    overflow: hidden;
  }
  .mf-choice::before {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    height: 1px;
    background: var(--mf-c, var(--lime));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    opacity: .65;
  }
  .mf-choice::after {
    content: '';
    position: absolute;
    inset: auto 18px 18px auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mf-c, var(--lime)) 18%, transparent);
    filter: blur(12px);
    opacity: 0;
    transition: opacity .22s;
    pointer-events: none;
  }
  .mf-choice:hover,
  .mf-choice:focus-visible {
    background:
      radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--mf-c, var(--lime)) 16%, transparent), transparent 34%),
      linear-gradient(180deg, rgba(245,244,240,.14), rgba(245,244,240,.06));
    border-color: color-mix(in srgb, var(--mf-c, var(--lime)) 42%, rgba(245,244,240,.12));
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,.24);
  }
  .mf-choice:hover::before { transform: scaleX(1); }
  .mf-choice:hover::after { opacity: 1; }
  .mf-choice:hover strong,
  .mf-choice:focus-visible strong { color: var(--ivoire); }
  .mf-choice-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .mf-choice .mf-choice-num {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .18em;
    color: color-mix(in srgb, var(--mf-c, var(--lime)) 44%, rgba(245,244,240,.48));
  }
  .mf-choice-arrow {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--mf-c, var(--lime)) 16%, rgba(245,244,240,.12));
    border-radius: 50%;
    font-size: 14px;
    color: rgba(245,244,240,.34);
    transition: color .22s, transform .22s;
  }
  .mf-choice:hover .mf-choice-arrow {
    color: var(--mf-c, var(--lime));
    transform: translateX(3px) translateY(-3px);
  }
  .mf-choice strong {
    font-family: var(--font-title);
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1;
    color: var(--ivoire);
    font-weight: 400;
    display: block;
    transition: color .22s;
  }
  .mf-choice span {
    max-width: 230px;
    font-size: 12px;
    color: rgba(245,244,240,.52);
    line-height: 1.5;
    font-family: var(--font-body);
  }
  .mf-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .mf-result-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 22px;
    background: rgba(245,244,240,.04);
    border: 1px solid rgba(245,244,240,.09);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .22s, transform .22s;
  }
  .mf-result-card:hover { border-color: rgba(245,244,240,.22); transform: translateY(-3px); }
  .mf-result-card strong {
    font-family: var(--font-title);
    font-size: clamp(17px, 1.7vw, 22px);
    line-height: 1.05;
    color: var(--ivoire);
    font-weight: 400;
  }
  .mf-result-card p {
    font-size: 12px;
    color: rgba(245,244,240,.38);
    line-height: 1.5;
    margin: 0;
    flex: 1;
  }
  .mf-result-cta {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lime);
    margin-top: auto;
  }
  .mf-result-card--devis {
    border-color: rgba(177,255,117,.18) !important;
    background: rgba(177,255,117,.04) !important;
  }
  .mf-restart-row { margin-top: 28px; }
  .mf-restart {
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245,244,240,.3);
    cursor: pointer;
    padding: 0;
    transition: color .2s;
  }
  .mf-restart:hover { color: var(--ivoire); }

  /* ── CATÉGORIES (ivory) ── */
  .manuel-cats {
    background: var(--ivoire);
    padding: 80px 0;
  }
  .manuel-cats .manuel-section-h { color: var(--noir); }
  .manuel-cats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .manuel-cat {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 24px;
    background: var(--noir);
    border-radius: 14px;
    text-decoration: none;
    transition: transform .22s, box-shadow .22s;
    border: 1px solid rgba(0,0,0,.06);
  }
  .manuel-cat:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
  }
  .manuel-cat--woaw {
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d0d0b 0%, #111109 100%);
    border: 1px solid rgba(200,239,255,.08);
  }
  .manuel-cat--woaw > div {
    text-align: center;
  }
  .manuel-cat-letter {
    font-family: var(--font-title);
    font-size: 52px;
    line-height: 1;
    color: var(--mc);
    flex-shrink: 0;
    width: 54px;
  }
  .manuel-cat--woaw .manuel-cat-letter { font-size: 68px; width: 72px; }
  .manuel-cat-h {
    font-family: var(--font-title);
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1;
    color: var(--ivoire);
    font-weight: 400;
    margin: 0 0 8px;
  }
  .manuel-cat-p {
    font-size: 12px;
    color: rgba(245,244,240,.4);
    line-height: 1.5;
    margin: 0 0 10px;
  }
  .manuel-cat-count {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mc);
    opacity: .65;
  }

  /* ── LIBRARY ── */
  .manuel-library { background: var(--noir); padding: 80px 0; }

  /* Responsive */
  @media (max-width: 1024px) {
    .manuel-finder .manuel-section-head { grid-template-columns: 1fr; gap: 18px; }
    .mf-choices { grid-template-columns: repeat(2, 1fr); }
    .mf-choices--3 { grid-template-columns: repeat(3, 1fr); }
    .manuel-pinned-grid { grid-template-columns: repeat(2, 1fr); }
    .manuel-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .manuel-cat--woaw { grid-column: 1 / -1; }
    .mf-results-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 760px) {
    .manuel-hero {
      padding-top: 122px;
    }

    .manuel-hero > .container {
      width: calc(100% - 40px) !important;
      margin-inline: auto !important;
    }

    .manuel-hero-p {
      max-width: 320px;
      padding-right: 8px;
      font-size: 15px;
      overflow-wrap: anywhere;
    }

    .manuel-hero-stats { gap: 24px; }
    .manuel-finder { padding: 76px 0; }
    .mf-panel { padding: 18px; }
    .mf-choices, .mf-choices--3 { grid-template-columns: 1fr; }
    .mf-choice { min-height: 150px; }
    .mf-results-grid { grid-template-columns: 1fr; }
    .manuel-pinned-grid {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      margin-left: calc((100vw - 100%) / -2);
      margin-right: calc((100vw - 100%) / -2);
      padding: 0 calc((100vw - 100%) / 2) 12px;
      scrollbar-width: none;
    }
    .manuel-pinned-grid::-webkit-scrollbar { display: none; }
    .manuel-pinned-card {
      flex: 0 0 min(82vw, 330px);
      min-height: 184px;
      scroll-snap-align: start;
    }
    .manuel-cats {
      padding: 70px 0 76px;
      background: var(--ivoire);
      overflow: hidden;
    }

    .manuel-cats .manuel-section-head { margin-bottom: 30px; }

    .manuel-cats-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .manuel-cat,
    .manuel-cat--woaw,
    .manuel-cat:not(.manuel-cat--woaw):nth-child(n) {
      min-height: auto;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 16px;
      padding: 20px;
      border-radius: 8px;
      background: #0c0c0a;
      border: 1px solid rgba(5,5,3,.08);
      box-shadow: none;
      transform: none;
      overflow: hidden;
    }

    .manuel-cat:hover { transform: translateY(-2px); }

    .manuel-cat-letter,
    .manuel-cat--woaw .manuel-cat-letter {
      width: 48px;
      font-size: 48px;
      line-height: 1;
      opacity: 1;
      text-shadow: none;
    }

    .manuel-cat-h {
      font-size: 24px;
      margin-bottom: 8px;
    }

    .manuel-cat-p { color: rgba(245,244,240,.48); }

    .manuel-cat-count { opacity: .72; }
    .mf-progress { display: none; }
    .manuel-pinned-feature { padding: 32px 28px; }
  }

  /* Align article typography with the rest of WOAW.
     The condensed display face works for big uppercase blocks, but not for sentence titles. */
  .manuel-pf-h,
  .manuel-pinned-card h3,
  .mf-result-card strong,
  .guide-article-card h3,
  .guide-library-card h3 {
    font-family: var(--font-body) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: .98 !important;
  }

  .manuel-pf-h {
    max-width: 680px;
    font-size: clamp(31px, 3.4vw, 50px) !important;
  }

  .manuel-pinned-card h3,
  .mf-result-card strong {
    font-size: clamp(18px, 1.55vw, 23px) !important;
  }

  .guide-article-card h3,
  .guide-library-card h3 {
    font-size: clamp(20px, 2vw, 30px) !important;
  }