/* WPMalter — Bibliothèque gratuite page.
   Library-specific section styles. Built on the design tokens
   (../../colors_and_type.css) + shared kit styles (styles.css).
   Reuses .section, .section-head, .pill, .btn, .cta-final, .hero-halo … */

/* ============================================================================
   HERO (no CTA button — CTAs live in the resource cards below)
   ============================================================================ */
.lib-hero { position:relative; overflow:hidden; padding-top:72px; padding-bottom:8px; }
.lib-hero .hero-halo::before { width:680px; height:680px; top:-320px; opacity:.8; }
.lib-hero-inner { position:relative; z-index:1; text-align:center; max-width:820px; margin:0 auto; }
.lib-hero .eyebrow { display:block; margin-bottom:18px; }
.lib-hero h1 { font-family:var(--wpm-font-display); font-weight:700; font-size:clamp(34px,5.2vw,60px); line-height:1.05; letter-spacing:-0.04em; margin:0 auto 22px; max-width:760px; }
.lib-hero .lede { font-size:clamp(16px,1.9vw,19px); line-height:1.7; color:var(--wpm-text-secondary); max-width:660px; margin:0 auto; }

/* compact proof band — [wpm_preuve_compacte] */
.proof-band { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 18px; margin-top:34px; }
.proof-band .stat { font-family:var(--wpm-font-display); font-weight:600; font-size:15px; letter-spacing:-0.01em; color:var(--wpm-text-primary); white-space:nowrap; }
.proof-band .stat b { color:var(--wpm-brand-text); font-weight:700; }
.proof-band .sep { width:4px; height:4px; border-radius:50%; background:var(--wpm-border-strong); flex-shrink:0; }

/* ============================================================================
   FEATURED LEAD MAGNET — « À la une » (one big card, violet glow)
   ============================================================================ */
.featured-wrap { padding-top:var(--wpm-space-9); }
.featured-head { display:flex; align-items:center; gap:10px; max-width:var(--wpm-container); margin:0 auto 22px; padding:0 24px; }
.featured-head .wpm-overline { color:var(--wpm-brand-text); }
.featured-head .rule { flex:1; height:1px; background:var(--wpm-border); }

.featured-lm { position:relative; display:grid; grid-template-columns:1.25fr 0.75fr; gap:40px; align-items:center;
  border-radius:var(--wpm-radius-lg); border:1px solid var(--wpm-brand); background:var(--wpm-surface-1);
  box-shadow:var(--wpm-glow-brand); padding:44px; overflow:hidden; }
.featured-lm::before { content:""; position:absolute; width:520px; height:520px; right:-160px; top:-220px; border-radius:50%;
  background:radial-gradient(circle, rgba(83,58,253,0.30), transparent 62%); filter:blur(90px); pointer-events:none; }
.featured-body { position:relative; z-index:1; }
.featured-body .badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.featured-lm h2 { font-family:var(--wpm-font-display); font-weight:700; font-size:clamp(26px,3vw,36px); line-height:1.12; letter-spacing:-0.03em; margin:0 0 14px; max-width:18ch; }
.featured-format { display:inline-flex; align-items:center; gap:8px; font-family:var(--wpm-font-mono); font-size:13px; color:var(--wpm-text-secondary); margin-bottom:16px; }
.featured-format .dot { width:3px; height:3px; border-radius:50%; background:var(--wpm-border-strong); }
.featured-lm p { font-size:16px; line-height:1.7; color:var(--wpm-text-secondary); margin:0 0 26px; max-width:52ch; }

/* prompt-snippet cover (illustrates the product, on-brand code aesthetic) */
.featured-cover { position:relative; z-index:1; }
.prompt-card { background:var(--wpm-code-bg); border:1px solid var(--wpm-border); border-radius:var(--wpm-radius-md); padding:18px; box-shadow:var(--wpm-shadow-lg); }
.prompt-card .pc-top { display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.prompt-card .pc-top .d { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.prompt-card .pc-top .lbl { margin-left:auto; font-family:var(--wpm-font-mono); font-size:11px; color:rgba(230,237,246,.55); }
.prompt-line { font-family:var(--wpm-font-mono); font-size:12.5px; line-height:1.7; color:#c7d2e0; }
.prompt-line .pr { color:var(--wpm-brand-300); }
.prompt-line + .prompt-line { margin-top:8px; }
.prompt-count { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--wpm-font-mono); font-size:12px; color:var(--wpm-brand-300); }

/* cover image reelle (a la une) */
.featured-cover-img { display:block; width:100%; height:auto; border-radius:var(--wpm-radius-md);
  border:1px solid var(--wpm-border); box-shadow:var(--wpm-shadow-lg); }

/* ============================================================================
   RESOURCE GRID — sections « Pour ton site » / « Pour ton activité »
   ============================================================================ */
.lib-section-head { max-width:720px; margin:0 auto 48px; text-align:center; }
.lib-section-head .eyebrow { display:block; margin-bottom:14px; }
.lib-section-head h2 { font-family:var(--wpm-font-display); font-size:clamp(26px,3.4vw,38px); line-height:1.18; letter-spacing:-0.025em; margin:0 0 14px; }
.lib-section-head .sub { font-size:17px; line-height:1.6; color:var(--wpm-text-secondary); }

.lib-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.lib-grid.cols-1 { grid-template-columns:minmax(0,460px); justify-content:center; }
.lib-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; margin-inline:auto; }
.lib-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lib-grid.cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; margin-inline:auto; }
.lib-card { display:flex; flex-direction:column; padding:26px 24px; border-radius:var(--wpm-radius-lg);
  background:var(--wpm-surface-1); border:1px solid var(--wpm-border); transition:var(--wpm-transition); }
.lib-card:hover { transform:var(--wpm-lift); box-shadow:var(--wpm-shadow-lg); border-color:var(--wpm-border-strong); }
.lib-ico { width:46px; height:46px; border-radius:var(--wpm-radius-sm); background:var(--wpm-brand-surface);
  color:var(--wpm-brand-text); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.lib-ico svg { width:22px; height:22px; }
/* cover image en tete de carte (remplace l'icone) */
.lib-card-has-cover { padding-top:0; overflow:hidden; }
.lib-cover { display:block; margin:0 -24px 18px; aspect-ratio:16/10; overflow:hidden; background:var(--wpm-surface-2);
  border-bottom:1px solid var(--wpm-border); }
.lib-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--wpm-dur) var(--wpm-ease); }
.lib-card-has-cover:hover .lib-cover img { transform:scale(1.04); }
.lib-format { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-family:var(--wpm-font-mono);
  font-size:11.5px; color:var(--wpm-text-muted); background:var(--wpm-surface-2); border:1px solid var(--wpm-border-subtle);
  padding:4px 9px; border-radius:var(--wpm-radius-pill); margin-bottom:14px; }
.lib-card h3 { font-family:var(--wpm-font-display); font-size:18px; line-height:1.25; letter-spacing:-0.015em; margin:0 0 9px; color:var(--wpm-text-primary); }
.lib-card p { font-size:13.5px; line-height:1.6; color:var(--wpm-text-secondary); margin:0 0 20px; flex:1; }
.lib-cta { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--wpm-brand-text);
  transition:gap var(--wpm-dur-fast) var(--wpm-ease), color var(--wpm-dur-fast) var(--wpm-ease); }
.lib-cta svg { width:15px; height:15px; }
.lib-card:hover .lib-cta { gap:9px; color:var(--wpm-link-hover); }

/* interactive resource (quiz, calculators…) */
.lib-card-interactive { position:relative; border-color:color-mix(in srgb, var(--wpm-accent-warm) 42%, var(--wpm-border)); }
.lib-card-interactive:hover { border-color:var(--wpm-accent-warm); }
.lib-card-interactive .lib-ico { background:var(--wpm-accent-bg); color:var(--wpm-accent-text); }
.lib-card-interactive .lib-cta { color:var(--wpm-accent-text); }
.lib-tag-interactive { position:absolute; top:22px; right:22px; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--wpm-font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--wpm-accent-text);
  background:var(--wpm-accent-bg); border:1px solid color-mix(in srgb, var(--wpm-accent-warm) 38%, transparent);
  padding:4px 9px; border-radius:var(--wpm-radius-pill); }

/* ============================================================================
   BRIDGE — « Si la biblio gratuite ne suffit pas »
   ============================================================================ */
.bridge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.bridge-card { position:relative; display:flex; flex-direction:column; padding:30px; border-radius:var(--wpm-radius-lg);
  background:var(--wpm-surface-1); border:1px solid var(--wpm-border); transition:var(--wpm-transition); }
.bridge-card:hover { transform:var(--wpm-lift); box-shadow:var(--wpm-shadow-lg); border-color:var(--wpm-border-strong); }
.bridge-card.featured { border-color:var(--wpm-brand); box-shadow:var(--wpm-glow-brand); }
.bridge-card.featured:hover { border-color:var(--wpm-brand); }
.bridge-card.featured::after { content:"1 place à la fois"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--wpm-brand); color:#fff; font-size:12px; font-weight:600; padding:5px 14px; border-radius:var(--wpm-radius-pill); white-space:nowrap; }
.bridge-price { display:inline-flex; align-items:baseline; gap:8px; font-family:var(--wpm-font-display); font-weight:700;
  font-size:24px; letter-spacing:-0.02em; color:var(--wpm-text-primary); margin-bottom:6px; }
.bridge-price.coach { font-size:20px; color:var(--wpm-accent-text); }
.bridge-card h3 { font-family:var(--wpm-font-display); font-size:19px; line-height:1.25; letter-spacing:-0.015em; margin:0 0 12px; color:var(--wpm-text-primary); }
.bridge-card p { font-size:14px; line-height:1.6; color:var(--wpm-text-secondary); margin:0 0 22px; flex:1; }
.bridge-card .btn { margin-top:auto; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
/* ============================================================================
   FINAL CTA — push vers le LM featured (reprend le style « à la une »)
   ============================================================================ */
.cta-final.is-featured { border-color:var(--wpm-brand); box-shadow:var(--wpm-glow-brand); }
.cta-final.is-featured h2 { max-width:18ch; margin-inline:auto; }
.cta-final .cta-format { display:inline-flex; align-items:center; gap:8px; font-family:var(--wpm-font-mono);
  font-size:13px; color:var(--wpm-text-secondary); margin:-4px 0 20px; }
.cta-final .cta-format .dot { width:3px; height:3px; border-radius:50%; background:var(--wpm-border-strong); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1040px){
  .lib-grid { grid-template-columns:repeat(2,1fr); }
  .lib-grid.cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:880px){
  .featured-lm { grid-template-columns:1fr; gap:30px; padding:32px; }
  .featured-cover { order:-1; }
  .bridge-grid { grid-template-columns:1fr; }
}
@media (max-width:560px){
  .lib-grid { grid-template-columns:1fr; }
  .lib-grid.cols-2, .lib-grid.cols-3, .lib-grid.cols-4 { grid-template-columns:1fr; }
}