/* ═══════════════════════════════════════════════════════════
   PANDAGRO — Design System partagé
   ressources.pandagro-svt.fr
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  color-scheme: light only;
  --pdg-blue:       #2A4BFF;
  --pdg-blue-dk:    #1d4ed8;
  --pdg-sky:        #47B8FF;
  --pdg-yellow:     #FFD300;
  --pdg-dark:       #0f172a;
  --pdg-text:       #1e293b;
  --pdg-muted:      #64748b;
  --pdg-bg:         #f8f9ff;
  --pdg-bg-blue:    #eef2ff;
  --pdg-bg2:        #eff6ff;
  --pdg-border:     rgba(42,75,255,.12);
  --pdg-border-lt:  #dce8ff;
  --pdg-white:      #ffffff;
  --pdg-green:      #00b67a;
  --pdg-gradient:   linear-gradient(135deg, #2A4BFF 0%, #47B8FF 100%);
  --pdg-shadow:     0 4px 20px rgba(42,75,255,.08);
  --pdg-shadow-lg:  0 20px 50px rgba(42,75,255,.16);
  --pdg-radius:     14px;
  --pdg-radius-lg:  22px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Quicksand', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: var(--pdg-text);
  background: var(--pdg-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── TYPOGRAPHIE ── */
h1, h2, h3, h4 {
  font-family: 'Nunito', 'Quicksand', sans-serif;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--pdg-dark);
}

/* ── LAYOUT ── */
.pdg-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.pdg-container-sm { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.pdg-section { padding: 72px 0; }
.pdg-section-alt { background: var(--pdg-bg); }
.pdg-divider { border: none; border-top: 1px solid var(--pdg-border); }
.pdg-center { text-align: center; }

/* ── ANIMATIONS ── */
@keyframes pdg-gradient-shift {
  0%  { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes pdg-shimmer {
  0%      { left: -100%; }
  40%,100%{ left: 150%;  }
}
@keyframes pdg-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pdg-reveal { transition: opacity .6s ease, transform .6s ease; }
.pdg-reveal.pdg-hidden  { opacity: 0; transform: translateY(24px); }
.pdg-reveal.pdg-visible { opacity: 1 !important; transform: translateY(0) !important; }
.pdg-d1 { transition-delay: .1s; }
.pdg-d2 { transition-delay: .2s; }
.pdg-d3 { transition-delay: .3s; }
.pdg-d4 { transition-delay: .4s; }

/* ═══════════════════════════
   HEADER
   ═══════════════════════════ */
.pdg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pdg-white);
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
  padding: 14px 0;
}
/* Sur les pages avec promo-bar, le header se colle en-dessous d'elle (pas par-dessus) */
.pdg-promo-bar ~ .pdg-header { top: 44px; }
@media (max-width: 560px) { .pdg-promo-bar ~ .pdg-header { top: 37px; } }
@media (max-width: 380px) { .pdg-promo-bar ~ .pdg-header { top: 34px; } }
.pdg-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.pdg-logo { display: flex; align-items: center; gap: 10px; }
.pdg-logo img { height: 34px; width: auto; }
.pdg-logo-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #16a34a;
  font-size: 11px; font-weight: 800; padding: 4px 9px;
  border-radius: 999px; white-space: nowrap;
}
.pdg-logo-badge svg { fill: #16a34a; }

.pdg-nav { display: flex; align-items: center; gap: 8px; }
.pdg-nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 11px;
  font-family: 'Quicksand', sans-serif; font-size: 14px; font-weight: 700;
  line-height: 1; white-space: nowrap; cursor: pointer; border: none;
  transition: all .2s;
}
.pdg-nav-btn-ghost  { background: transparent; color: var(--pdg-muted); border: 1.5px solid transparent; }
.pdg-nav-btn-ghost:hover { color: var(--pdg-blue); background: var(--pdg-bg-blue); }
.pdg-nav-btn-yellow { background: var(--pdg-blue); color: #fff; border: 1.5px solid var(--pdg-blue); }
.pdg-nav-btn-yellow:hover { background: var(--pdg-blue-dk); transform: translateY(-2px); }
.pdg-nav-btn-blue   { background: var(--pdg-gradient); color: #fff; border: 1.5px solid transparent; box-shadow: 0 4px 15px rgba(42,75,255,.22); }
.pdg-nav-btn-blue:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(42,75,255,.35); }

.pdg-burger { display: none; flex-direction: column; gap: 4px; cursor: pointer; }
.pdg-burger span { width: 24px; height: 3px; background: var(--pdg-text); border-radius: 2px; transition: all .3s; display: block; }

.pdg-mobile-nav {
  display: none; flex-direction: column; gap: 8px; padding: 16px 24px;
  background: var(--pdg-white); border-top: 1px solid var(--pdg-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.pdg-mobile-nav.pdg-open { display: flex; }

@media (max-width: 820px) {
  .pdg-nav { display: none; }
  .pdg-burger { display: flex; }
}
@media (max-width: 480px) {
  .pdg-header-inner { padding: 0 16px; }
  .pdg-logo img { height: 28px; }
}

/* ═══════════════════════════
   FOOTER
   ═══════════════════════════ */
.pdg-footer {
  background: var(--pdg-dark);
  color: rgba(255,255,255,.75);
  padding: 48px 24px 32px;
  margin-top: 0;
}
.pdg-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.pdg-footer-brand h3 {
  color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.01em;
}
.pdg-footer-brand p { font-size: 13.5px; line-height: 1.65; max-width: 260px; }
.pdg-footer-col h4 { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.pdg-footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.pdg-footer-col a { font-size: 13.5px; transition: color .2s; }
.pdg-footer-col a:hover { color: var(--pdg-sky); }
.pdg-footer-col-res { min-width: 250px; }
.pdg-footer-col-res li { line-height: 1.5; color: rgba(255,255,255,.35); }
.pdg-footer-bottom {
  max-width: 1100px; margin: 24px auto 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12.5px;
}
.pdg-footer-tp {
  display: flex; align-items: center; gap: 6px;
  color: var(--pdg-green); font-weight: 700; font-size: 13px;
}
.pdg-footer-tp span { font-size: 16px; letter-spacing: 1px; }

/* ═══════════════════════════
   HERO (pages ressources / annales)
   ═══════════════════════════ */
.pdg-hero {
  position: relative; overflow: hidden;
  padding: 64px 24px 72px;
  background: var(--pdg-white);
  text-align: center;
}
.pdg-hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(42,75,255,.08) 0%, transparent 65%);
}
.pdg-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.pdg-breadcrumb {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 700; color: var(--pdg-muted); margin-bottom: 20px;
}
.pdg-breadcrumb a { color: var(--pdg-blue); }
.pdg-breadcrumb a:hover { text-decoration: underline; }
.pdg-breadcrumb span { opacity: .5; }

.pdg-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--pdg-blue); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--pdg-bg2); padding: 4px 12px; border-radius: 50px;
  border: 1px solid rgba(42,75,255,.2); margin-bottom: 16px;
}
.pdg-h1 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 900; letter-spacing: -.03em; margin-bottom: 16px; color: var(--pdg-dark);
}
.pdg-h1 em {
  font-style: normal;
  background: var(--pdg-gradient); background-size: 200%;
  animation: pdg-gradient-shift 4s ease infinite;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pdg-hero-sub {
  font-size: 16px; color: var(--pdg-muted); line-height: 1.7;
  max-width: 640px; margin: 0 auto 28px;
}
.pdg-hero-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 760px; margin: 0 auto 28px;
}
.pdg-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--pdg-bg2); border: 1.5px solid #bfdbfe;
  color: var(--pdg-text); font-size: 14px; font-weight: 700; line-height: 1;
  transition: all .2s;
}
.pdg-hero-badge:hover { transform: translateY(-2px); color: var(--pdg-blue); border-color: rgba(42,75,255,.25); }

/* ═══════════════════════════
   BOUTONS CTA
   ═══════════════════════════ */
.pdg-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: var(--pdg-radius); border: none;
  background: var(--pdg-blue); color: #fff;
  font-family: 'Quicksand', sans-serif; font-size: 16px; font-weight: 800;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 24px rgba(42,75,255,.35);
  transition: background .25s, transform .2s, box-shadow .2s;
}
.pdg-btn::after {
  content: "";
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg);
  animation: pdg-shimmer 3s ease-in-out infinite;
}
.pdg-btn:hover { background: var(--pdg-blue-dk); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(42,75,255,.45); color: #fff; }

.pdg-btn-yellow {
  background: var(--pdg-blue);
  color: #fff;
  box-shadow: 0 8px 24px rgba(42,75,255,.32);
}
.pdg-btn-yellow:hover { background: var(--pdg-blue-dk); box-shadow: 0 14px 36px rgba(42,75,255,.45); color: #fff; }

.pdg-btn-outline {
  background: transparent; color: var(--pdg-blue);
  border: 2px solid rgba(42,75,255,.3);
  box-shadow: none;
}
.pdg-btn-outline:hover { background: var(--pdg-bg2); box-shadow: none; color: var(--pdg-blue); }

.pdg-btn-white {
  background: #fff; color: var(--pdg-blue);
  border: 1.5px solid var(--pdg-border);
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
}
/* Le `background` est indispensable : sans lui, `.pdg-btn:hover` repasse le
   fond en bleu alors que la couleur du texte reste bleue, et le libellé
   disparaît au survol. */
.pdg-btn-white:hover {
  background: var(--pdg-bg2); color: var(--pdg-blue);
  transform: translateY(-3px); border-color: var(--pdg-blue);
  box-shadow: 0 12px 32px rgba(42,75,255,.18);
}

/* ── Spécifique SIO popup (ne modifie pas le JS sio) ── */
.pdg-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: var(--pdg-radius); border: none;
  background: var(--pdg-blue); color: #fff;
  font-family: 'Quicksand', sans-serif; font-size: 16px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(42,75,255,.35);
  transition: background .25s, transform .2s, box-shadow .2s;
}
.pdg-cta:hover { background: var(--pdg-blue-dk); transform: translateY(-2px); }

.pdg-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.pdg-cta-alt {
  background: #fff; color: var(--pdg-blue);
  border: 2px solid rgba(42,75,255,.3);
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
}
.pdg-cta-alt:hover { background: var(--pdg-bg2); border-color: var(--pdg-blue); color: var(--pdg-blue); transform: translateY(-2px); }

/* ═══════════════════════════
   BADGE "satisfait ou remboursé"
   ═══════════════════════════ */
.pdg-badge-circle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--pdg-gradient);
  box-shadow: 0 4px 14px rgba(42,75,255,.30);
  text-align: center; padding: 6px; flex-shrink: 0;
}
.pdg-badge-circle .top  { font-size: .52rem; font-weight: 800; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; }
.pdg-badge-circle .main { font-size: .7rem; font-weight: 900; color: #fff; line-height: 1.1; margin: 2px 0 1px; }
.pdg-badge-circle .sub  { font-size: .48rem; font-weight: 700; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; }

/* ═══════════════════════════
   CARDS
   ═══════════════════════════ */
.pdg-card {
  background: var(--pdg-white);
  border: 1.5px solid var(--pdg-border-lt);
  border-radius: var(--pdg-radius);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--pdg-text);
  box-shadow: var(--pdg-shadow);
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.pdg-card:hover {
  border-color: var(--pdg-sky);
  box-shadow: 0 6px 20px rgba(42,75,255,.16);
  transform: translateY(-2px);
}
.pdg-card-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--pdg-bg-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.pdg-card-body { flex: 1; min-width: 0; }
.pdg-card-title { font-size: .9rem; font-weight: 700; line-height: 1.3; }
.pdg-card-sub   { font-size: .75rem; color: var(--pdg-muted); margin-top: 2px; }
.pdg-card-arrow { flex-shrink: 0; color: var(--pdg-muted); transition: transform .18s, color .18s; }
.pdg-card:hover .pdg-card-arrow { transform: translateX(3px); color: var(--pdg-blue); }

/* ── Publication card (jaune) ── */
.pdg-pub-card {
  display: block; text-decoration: none;
  background: #fff; border-radius: 18px; overflow: hidden;
  border: 3px solid #FFD300;
  box-shadow: 0 4px 24px rgba(255,211,0,.25);
  transition: transform .18s, box-shadow .18s;
}
.pdg-pub-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(255,211,0,.35); }
.pdg-pub-card img { width: 100%; max-height: 280px; object-fit: contain; background: #f0f5fc; display: block; }
.pdg-pub-card-body {
  padding: 14px 16px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pdg-pub-eyebrow { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pdg-blue); margin-bottom: 3px; }
.pdg-pub-title   { font-size: 1rem; font-weight: 800; color: var(--pdg-text); line-height: 1.2; }
.pdg-pub-slogan  { font-size: .72rem; color: #94a3b8; font-style: italic; margin: 4px 0 6px; }
.pdg-pub-cta     { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--pdg-blue); }

/* ── Section label ── */
.pdg-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--pdg-blue); margin-bottom: 10px;
}
.pdg-section-label::before {
  content: ''; width: 4px; height: 14px;
  background: var(--pdg-blue); border-radius: 2px; flex-shrink: 0;
}

/* ── Tag eyebrow ── */
.pdg-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--pdg-blue); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--pdg-bg2); padding: 4px 12px; border-radius: 50px;
  border: 1px solid rgba(42,75,255,.2); margin-bottom: 14px;
}

/* ═══════════════════════════
   STATS ROW
   ═══════════════════════════ */
.pdg-stats-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 32px; }
.pdg-stat {
  background: var(--pdg-white); border: 1.5px solid var(--pdg-border);
  border-radius: 16px; padding: 18px 24px; text-align: center;
  box-shadow: var(--pdg-shadow); min-width: 140px;
}
.pdg-stat-num {
  display: block;
  font-family: 'Nunito', sans-serif; font-size: clamp(22px,4vw,32px); font-weight: 900; line-height: 1;
  background: var(--pdg-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pdg-stat-label { font-size: 12px; color: var(--pdg-muted); margin-top: 5px; font-weight: 600; }

/* ═══════════════════════════
   CTA BOX
   ═══════════════════════════ */
.pdg-cta-box {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
  border: 1px solid var(--pdg-border);
  border-radius: 24px; padding: 52px 40px; text-align: center;
  position: relative; overflow: hidden;
  box-shadow: 0 14px 44px rgba(15,23,42,.07);
}
.pdg-cta-box::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: var(--pdg-gradient);
}
.pdg-cta-box h2 { font-size: clamp(22px,4vw,34px); font-weight: 900; color: var(--pdg-dark); margin: 0 0 14px; padding: 0; border: 0; position: relative; }
.pdg-cta-box p  { font-size: 16px; color: var(--pdg-muted); margin: 0 auto 30px; max-width: 520px; position: relative; }
.pdg-pack-img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 22px; position: relative; filter: drop-shadow(0 16px 30px rgba(42,75,255,.18)); }

/* ═══════════════════════════
   HERO "mini" (pages simples)
   ═══════════════════════════ */
.pdg-hero-sm {
  background: var(--pdg-gradient); padding: 40px 24px 32px;
  text-align: center; color: #fff;
}
.pdg-hero-sm-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  background: #fff; border: 3px solid rgba(255,255,255,.6);
  box-shadow: 0 0 0 5px rgba(255,255,255,.15), 0 8px 24px rgba(0,0,0,.25);
  overflow: hidden; margin: 0 auto 14px;
}
.pdg-hero-sm-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.pdg-hero-sm h1 { font-size: 1.65rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15; }
.pdg-hero-sm h1 span { color: #93c5fd; }
.pdg-hero-sm p   { font-size: .85rem; color: rgba(255,255,255,.78); max-width: 360px; margin: 10px auto 0; line-height: 1.65; }
.pdg-hero-sm .pdg-tp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25); border-radius: 10px;
  padding: 5px 12px; text-decoration: none;
}
.pdg-hero-sm .pdg-tp-badge .stars { font-size: .75rem; color: #fff; letter-spacing: 2px; }
.pdg-hero-sm .pdg-tp-badge .label { font-size: .62rem; font-weight: 800; color: rgba(255,255,255,.85); letter-spacing: .06em; text-transform: uppercase; }

/* ═══════════════════════════
   PAGE MERCI
   ═══════════════════════════ */
.pdg-merci-hero {
  background: var(--pdg-bg); padding: 48px 24px 32px; text-align: center;
}
.pdg-merci-icon {
  width: 64px; height: 64px; background: var(--pdg-gradient);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(42,75,255,.3);
  font-size: 28px; color: #fff; font-weight: 900; line-height: 1;
}
.pdg-merci-hero h1 {
  font-size: clamp(22px,5vw,32px); font-weight: 900; color: var(--pdg-dark);
  line-height: 1.2; margin-bottom: 10px;
}
.pdg-merci-hero h1 em {
  font-style: normal;
  background: var(--pdg-gradient); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.pdg-merci-box {
  background: #fff; border: 2px solid rgba(42,75,255,.12);
  border-radius: 20px; padding: 24px 22px; margin-bottom: 20px;
  box-shadow: var(--pdg-shadow);
}

/* ── Bloc « Continue sur ton téléphone » (WhatsApp + PDF Drive) ── */
.pdg-continue-sub {
  font-size: 15px; color: var(--pdg-text); line-height: 1.6; margin: 4px 0 16px;
}
.pdg-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; box-sizing: border-box;
  background: #25D366; color: #fff; font-family: 'Nunito', sans-serif;
  font-weight: 900; font-size: 16px; text-decoration: none;
  padding: 15px 18px; border-radius: 14px;
  box-shadow: 0 8px 22px rgba(37,211,102,.32);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.pdg-wa-btn:hover { background: #1ebe5b; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,211,102,.42); color: #fff; }
.pdg-wa-btn svg { flex-shrink: 0; }
.pdg-wa-note { font-size: 12.5px; color: var(--pdg-muted); text-align: center; margin: 8px 0 0; }
.pdg-drive-card {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 14px 16px;
  background: var(--pdg-bg2); border: 1.5px solid var(--pdg-border);
  border-radius: 14px; text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.pdg-drive-card:hover { border-color: var(--pdg-blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42,75,255,.14); }
.pdg-drive-ico { font-size: 26px; line-height: 1; flex-shrink: 0; }
.pdg-drive-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pdg-drive-title { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 15px; color: var(--pdg-text); }
.pdg-drive-sub { font-size: 13px; color: var(--pdg-muted); }
.pdg-drive-arrow { color: var(--pdg-blue); font-weight: 900; font-size: 18px; flex-shrink: 0; }

/* ── Barre promo collante (haut de page merci) ── */
.pdg-promo-bar {
  position: sticky; top: 0; z-index: 110;
  background: linear-gradient(90deg, var(--pdg-blue) 0%, var(--pdg-blue-dk) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: nowrap; padding: 9px 14px; text-align: center;
}
.pdg-promo-bar-code {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 14px; letter-spacing: .04em;
  color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  padding: 4px 11px; border-radius: 999px;
  white-space: nowrap;
}
.pdg-promo-bar-code::before { content: "🎟️"; }
.pdg-promo-bar a {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--pdg-blue); font-weight: 800; font-size: 13px;
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  white-space: nowrap;
}
.pdg-promo-bar a:hover { transform: translateY(-1px); color: var(--pdg-blue-dk); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
/* Version courte de la barre, montrée seulement sur mobile — voir plus bas. */
.pdg-promo-bar-court { display: none; }

/* Mobile : le code personnalisé fait 24 caractères (72H-CAPES-EXTERNE-K3P9XM) et
   mangeait toute la barre. On lui substitue la promesse ; le code en entier reste
   affiché en gros dans l'encadré plus bas, c'est là qu'on vient le chercher. */
@media (max-width: 560px) {
  .pdg-promo-bar { gap: 8px; padding: 8px 10px; }
  .pdg-promo-bar-code { display: none; }
  .pdg-promo-bar-court {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 12.5px;
    color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
    padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  }
  .pdg-promo-bar-court::before { content: "🎟️"; }
  .pdg-promo-bar a { font-size: 12px; padding: 6px 11px; }
  .pdg-bar-long { display: none; }
}

/* ── Accès flashcards en 3 étapes ── */
.pdg-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.pdg-step { display: flex; gap: 14px; align-items: flex-start; }
.pdg-step-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--pdg-gradient); color: #fff; font-family: 'Nunito', sans-serif;
  font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(42,75,255,.28);
}
.pdg-step-body { flex: 1; min-width: 0; }
.pdg-step-body p { font-size: 15px; line-height: 1.55; color: var(--pdg-text); margin: 3px 0 0; }
.pdg-step-body strong { color: var(--pdg-dark); font-weight: 800; }
.pdg-copy {
  display: flex; align-items: stretch; gap: 0; margin-top: 9px;
  border: 1.5px solid var(--pdg-border); border-radius: 12px; overflow: hidden; background: var(--pdg-bg);
}
.pdg-copy code {
  flex: 1; min-width: 0; padding: 11px 14px; font-family: 'Quicksand', monospace;
  font-size: 14px; font-weight: 700; color: var(--pdg-blue); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: flex; align-items: center;
}
.pdg-copy-btn {
  flex-shrink: 0; border: none; cursor: pointer; background: var(--pdg-blue); color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; padding: 0 16px;
  transition: background .2s;
}
.pdg-copy-btn:hover { background: var(--pdg-blue-dk); }
.pdg-copy-btn.pdg-copied { background: var(--pdg-green); }
.pdg-inline-link { color: var(--pdg-blue); font-weight: 800; text-decoration: underline; }
.pdg-step-hint {
  font-size: 13px; color: var(--pdg-muted); line-height: 1.6; margin-top: 14px;
  background: var(--pdg-bg2); border-radius: 10px; padding: 10px 14px;
}

/* ── Carte offre promo -57€ ── */
.pdg-offer {
  position: relative; overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--pdg-border-lt); border-radius: var(--pdg-radius-lg);
  padding: 32px 26px 26px; margin-bottom: 22px;
  box-shadow: 0 20px 48px rgba(42,75,255,.10);
}
.pdg-offer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--pdg-gradient);
}
.pdg-offer-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 13px; letter-spacing: .04em;
  padding: 7px 15px; border-radius: 999px; margin-bottom: 14px;
}
.pdg-offer h3 {
  font-family: 'Nunito', sans-serif; font-size: clamp(19px,3.4vw,24px); font-weight: 900;
  color: var(--pdg-dark); line-height: 1.25; margin-bottom: 8px;
}
.pdg-offer h3 .pdg-offer-h3-sub {
  display: block; margin-top: 5px;
  font-size: 14px; font-weight: 700; color: var(--pdg-muted);
}
.pdg-offer-img {
  position: relative; z-index: 1;
  display: block; width: 100%; max-width: 360px; margin: 20px auto 24px;
  padding: 22px 26px;
  background:
    radial-gradient(circle at 50% 40%, rgba(42,75,255,.16), transparent 66%),
    linear-gradient(180deg, #f4f7ff 0%, #eaf0ff 100%);
  border: 1px solid #dce8ff;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 #ffffff, 0 14px 30px rgba(42,75,255,.14);
}
@media (max-width: 560px) {
  .pdg-offer-img { max-width: 300px; padding: 16px 18px; }
}
.pdg-offer-list { list-style: none; margin: 14px 0 0; padding: 0; }
.pdg-offer-list li {
  display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.5;
  color: var(--pdg-text); margin-bottom: 8px;
}
.pdg-offer-list li::before { content: "✓"; color: var(--pdg-green); font-weight: 900; flex-shrink: 0; }
/* Libellé au-dessus du code : « Code créé à l'instant, rien que pour toi Camille »
   quand le contact est reconnu, libellé neutre sinon. Piloté par le script. */
.pdg-promo-etat {
  font-size: 12.5px; color: var(--pdg-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 6px;
}
.pdg-offer-code {
  display: flex; align-items: stretch; margin: 18px 0 10px;
  border: 2px dashed var(--pdg-dark); border-radius: 12px; overflow: hidden; background: #fff;
}
.pdg-offer-code-val {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 17px; letter-spacing: .06em;
  color: var(--pdg-dark); padding: 12px 10px;
}
/* Les codes personnalisés portent un suffixe (72H-CAPES-EXTERNE-K3P9XM, 24
   caractères) : sur petit écran ils débordaient de l'encadré. */
@media (max-width: 480px) {
  .pdg-offer-code-val { font-size: 13.5px; letter-spacing: .01em; padding: 12px 6px; }
  .pdg-offer-code-btn { padding: 0 14px; font-size: 12px; }
}
.pdg-offer-code-btn {
  flex-shrink: 0; border: none; cursor: pointer; background: var(--pdg-dark); color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; padding: 0 20px; transition: background .2s;
}
.pdg-offer-code-btn:hover { background: #1e293b; }
.pdg-offer-code-btn.pdg-copied { background: var(--pdg-green); }
.pdg-countdown-wrap { text-align: center; margin: 8px 0 4px; }
.pdg-countdown-label { font-size: 12.5px; color: var(--pdg-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pdg-countdown {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 30px; color: var(--pdg-dark);
  letter-spacing: .04em; line-height: 1.1; margin: 4px 0 2px;
}
.pdg-countdown-units { font-size: 11px; color: var(--pdg-muted); font-weight: 700; letter-spacing: .18em; }
.pdg-countdown-note { font-size: 12px; color: var(--pdg-muted); margin-top: 8px; }
.pdg-guarantee {
  display: flex; align-items: center; gap: 10px; margin: 16px 0;
  background: rgba(0,182,122,.08); border: 1px solid rgba(0,182,122,.25);
  border-radius: 12px; padding: 12px 15px;
}
.pdg-guarantee-ico { font-size: 22px; flex-shrink: 0; }
.pdg-guarantee-txt { font-size: 13px; line-height: 1.5; color: var(--pdg-text); }
.pdg-guarantee-txt strong { color: var(--pdg-dark); font-weight: 800; }
.pdg-btn-dark {
  background: var(--pdg-dark); color: #fff; width: 100%; justify-content: center;
}
.pdg-btn-dark:hover { background: #1e293b; box-shadow: 0 14px 36px rgba(15,23,42,.35); color: #fff; }
/* Le code promo est écrit DANS l'intitulé du bouton : on voit ce qu'on utilise au
   moment de cliquer, plutôt que d'avoir à le copier d'abord. Il fait jusqu'à 24
   caractères — l'intitulé doit donc pouvoir passer à la ligne, et rester centré. */
.pdg-btn-dark { flex-wrap: wrap; text-align: center; line-height: 1.4; }
.pdg-btn [data-promo-code] {
  font-family: 'Nunito', sans-serif; font-weight: 900; letter-spacing: .02em;
  background: rgba(255,255,255,.14); border-radius: 7px; padding: 1px 7px;
}
@media (max-width: 480px) {
  .pdg-btn-dark { padding: 14px 18px; font-size: 15px; }
  .pdg-btn [data-promo-code] { font-size: 14px; }
}

/* ── Résultats / stats ── */
.pdg-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 18px; }
.pdg-stat {
  text-align: center; background: var(--pdg-bg-blue); border-radius: 16px; padding: 18px 12px;
  border: 1px solid rgba(42,75,255,.12);
}
.pdg-stat-num { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 40px; color: var(--pdg-blue); line-height: 1; }
.pdg-stat-lbl { font-size: 13px; color: var(--pdg-muted); font-weight: 700; margin-top: 4px; }
.pdg-bigstat { text-align: center; background: var(--pdg-bg-blue); border-radius: 16px; padding: 26px 18px; border: 1px solid rgba(42,75,255,.12); margin: 6px 0 6px; }
.pdg-bigstat-num { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 54px; color: var(--pdg-blue); line-height: 1; }
.pdg-bigstat-lbl { font-size: 14px; color: var(--pdg-dark); font-weight: 800; margin-top: 6px; }
.pdg-bigstat-sub { font-size: 13.5px; color: var(--pdg-muted); margin-top: 12px; line-height: 1.55; }
.pdg-compare { display: flex; flex-direction: column; gap: 12px; }
.pdg-compare-row { }
.pdg-compare-row p { font-size: 13.5px; color: var(--pdg-text); margin-bottom: 6px; line-height: 1.4; }
.pdg-compare-row p strong { color: var(--pdg-blue); font-weight: 900; }
.pdg-bar { height: 9px; background: var(--pdg-bg-blue); border-radius: 999px; overflow: hidden; }
.pdg-bar-fill { height: 100%; background: var(--pdg-gradient); border-radius: 999px; }

/* ── Témoignage ── */
.pdg-testi {
  display: flex; gap: 16px; align-items: center; background: #fff;
  border: 2px solid rgba(42,75,255,.12); border-radius: 20px; padding: 20px 22px;
  box-shadow: var(--pdg-shadow); margin-bottom: 20px;
}
.pdg-testi-img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--pdg-yellow); }
.pdg-testi-body p { font-size: 15px; font-style: italic; color: var(--pdg-text); line-height: 1.55; margin-bottom: 8px; }
.pdg-testi-stars { color: var(--pdg-yellow); font-size: 15px; letter-spacing: 2px; }
.pdg-testi-name { font-family: 'Nunito', sans-serif; font-weight: 900; color: var(--pdg-dark); font-size: 14.5px; margin-top: 4px; }
.pdg-testi-role { font-size: 12.5px; color: var(--pdg-muted); }

/* ── FAQ ── */
.pdg-faq { display: flex; flex-direction: column; gap: 10px; }
.pdg-faq-item { border: 1.5px solid var(--pdg-border); border-radius: 14px; overflow: hidden; background: #fff; }
.pdg-faq-q {
  width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px; color: var(--pdg-dark);
  padding: 15px 18px;
}
.pdg-faq-q::after { content: "+"; font-size: 22px; color: var(--pdg-blue); flex-shrink: 0; transition: transform .2s; }
.pdg-faq-item.pdg-open .pdg-faq-q::after { transform: rotate(45deg); }
.pdg-faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.pdg-faq-a p { font-size: 14px; line-height: 1.65; color: var(--pdg-muted); padding: 0 18px 16px; margin: 0; }
.pdg-faq-item.pdg-open .pdg-faq-a { max-height: 240px; }

@media (max-width: 560px) {
  .pdg-testi { flex-direction: column; text-align: center; }
  .pdg-results-grid { gap: 10px; }
  .pdg-stat-num { font-size: 34px; }
}

/* ═══════════════════════════
   WIDGET CODE ALGOAPP (pages merci)
   ═══════════════════════════ */
.pdg-algoapp { }
.pdg-algoapp-title {
  font-family: 'Nunito', sans-serif; font-size: 19px; font-weight: 900;
  color: var(--pdg-dark); margin: 2px 0 14px; line-height: 1.3;
}
.pdg-algoapp-title span { color: var(--pdg-muted); font-weight: 700; font-size: 14px; }
.pdg-algoapp-sub { font-size: 14px; color: var(--pdg-muted); line-height: 1.6; margin: 0 0 16px; }

.pdg-aa-mailrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--pdg-bg-blue); border: 1px solid var(--pdg-border);
  border-radius: 14px; padding: 10px 12px;
}
.pdg-aa-mail {
  flex: 1 1 200px; min-width: 0; font-family: 'Quicksand', monospace;
  font-size: 15px; font-weight: 700; color: var(--pdg-blue-dk);
  word-break: break-all; letter-spacing: .01em;
}
.pdg-aa-copy {
  flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 10px;
  background: var(--pdg-blue); color: #fff; font-family: 'Quicksand', sans-serif;
  font-weight: 700; font-size: 13.5px; padding: 9px 14px;
  transition: background .18s ease;
}
.pdg-aa-copy:hover { background: var(--pdg-blue-dk); }
.pdg-aa-copy.is-copied { background: var(--pdg-green); }

.pdg-aa-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pdg-aa-refresh, .pdg-aa-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border-radius: 12px; font-family: 'Quicksand', sans-serif;
  font-weight: 700; font-size: 14.5px; padding: 12px 18px; text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.pdg-aa-refresh {
  flex: 1 1 auto; border: 1.5px solid var(--pdg-blue); background: #fff; color: var(--pdg-blue-dk);
}
.pdg-aa-refresh:hover { background: var(--pdg-bg-blue); }
.pdg-aa-refresh[disabled] { opacity: .7; cursor: default; }
.pdg-aa-spin { display: inline-block; font-size: 16px; }
.pdg-aa-refresh.is-loading .pdg-aa-spin { animation: pdg-spin .8s linear infinite; }
@keyframes pdg-spin { to { transform: rotate(360deg); } }
.pdg-aa-open {
  flex: 1 1 auto; border: 1.5px solid var(--pdg-border);
  background: var(--pdg-dark); color: #fff;
}
.pdg-aa-open:hover { background: #1e293b; }
.pdg-aa-open img { border-radius: 5px; background: #fff; padding: 1px; }

.pdg-aa-codeblock {
  margin-top: 16px; text-align: center; border-radius: 16px;
  border: 2px dashed var(--pdg-border); background: var(--pdg-bg2);
  padding: 22px 16px; transition: border-color .2s ease, background .2s ease;
}
.pdg-aa-codeblock.has-code {
  border-style: solid; border-color: var(--pdg-green);
  background: linear-gradient(180deg, rgba(0,182,122,.08), rgba(0,182,122,.02));
}
.pdg-aa-code {
  font-family: 'Nunito', sans-serif; font-weight: 900; letter-spacing: .14em;
  font-size: 44px; line-height: 1; color: var(--pdg-dark);
}
.pdg-aa-codeblock.has-code .pdg-aa-code { color: var(--pdg-green); }
/* Code périmé : il s'affichait en vert, grand, comme s'il marchait — les gens le
   saisissaient pour rien. Il reste lisible (on peut vouloir le comparer) mais il
   ne se présente plus comme la bonne réponse. */
.pdg-aa-codeblock.is-perime {
  border-style: dashed; border-color: #fdba74;
  background: linear-gradient(180deg, rgba(249,115,22,.07), rgba(249,115,22,.02));
}
.pdg-aa-codeblock.is-perime .pdg-aa-code { color: #9a3412; opacity: .55; text-decoration: line-through; text-decoration-thickness: 3px; }
.pdg-aa-meta { font-size: 13px; color: var(--pdg-muted); margin-top: 10px; }
.pdg-aa-meta.is-old { color: #c2410c; font-weight: 700; }

.pdg-aa-hint { font-size: 13px; color: var(--pdg-blue-dk); margin-top: 10px; text-align: center; min-height: 1px; }
.pdg-aa-updated { font-size: 11.5px; color: var(--pdg-muted); margin-top: 6px; text-align: center; }

.pdg-aa-note {
  font-size: 12.5px; color: var(--pdg-muted); line-height: 1.55;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pdg-border);
}
.pdg-aa-stores { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pdg-aa-stores span { font-size: 12.5px; color: var(--pdg-muted); }
.pdg-aa-stores img { height: 34px; width: auto; }
.pdg-aa-desktop { display: none; }
.pdg-aa-desktop-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--pdg-dark); color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13.5px;
  padding: 9px 16px; border-radius: 10px; transition: background .2s;
}
.pdg-aa-desktop-btn:hover { background: #1e293b; }
.pdg-aa-desktop-btn img { height: 20px; width: auto; border-radius: 5px; background: #fff; padding: 1px; }
@media (min-width: 768px) {
  .pdg-aa-mobile { display: none; }
  .pdg-aa-desktop { display: flex; }
}

@media (max-width: 560px) {
  .pdg-aa-code { font-size: 38px; }
  .pdg-aa-actions { flex-direction: column; }
}

/* ═══════════════════════════
   BLOG
   ═══════════════════════════ */
/* ── Article éditorial (blog) — hero pleine largeur ── */
.pdg-article-hero {
  background: radial-gradient(120% 100% at 50% 0%, var(--pdg-bg-blue) 0%, var(--pdg-white) 68%);
  padding: 30px 0 18px;
}
/* L'image d'en-tête suit directement le titre : ni trait de séparation, ni blanc
   entre les deux. */
.pdg-article > .pdg-article-figure:first-child { margin-top: 0; }
.pdg-article-hero-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; text-align: center; }
.pdg-article-hero .pdg-breadcrumb { justify-content: center; margin-bottom: 20px; }
.pdg-article-cat {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--pdg-blue); color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 11.5px;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 999px; margin-bottom: 18px;
}
.pdg-article-hero h1 { font-size: clamp(27px,4.6vw,44px); font-weight: 900; line-height: 1.12; margin-bottom: 18px; }
.pdg-article-hero .pdg-article-intro {
  font-size: 18px; color: var(--pdg-muted); line-height: 1.7;
  margin: 0 auto 26px; max-width: 680px;
}
.pdg-article-byline {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  font-size: 13.5px; color: var(--pdg-muted); font-weight: 600;
}
.pdg-author { display: inline-flex; align-items: center; gap: 9px; }
.pdg-author-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; object-position: left center;
  background: #fff; border: 1.5px solid var(--pdg-border-lt); box-shadow: var(--pdg-shadow);
}
.pdg-author strong { color: var(--pdg-text); font-weight: 800; }
.pdg-byline-dot { width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; }

/* corps d'article */
.pdg-article { max-width: 720px; margin: 0 auto; padding: 16px 24px 80px; }
.pdg-article h2 {
  font-size: clamp(21px,3.4vw,30px); font-weight: 800; color: var(--pdg-dark);
  margin: 56px 0 18px; padding-left: 16px; border-left: 5px solid var(--pdg-blue);
}
.pdg-article h3 { font-size: 19px; font-weight: 800; color: var(--pdg-blue); margin: 38px 0 12px; }
.pdg-article p  { font-size: 16.5px; line-height: 1.85; margin-bottom: 20px; color: var(--pdg-text); }
/* le CTA en fin d'article ne doit pas hériter de la barre bleue des h2 */
.pdg-article .pdg-cta-box h2 { margin: 0 0 14px; padding: 0; border: 0; color: var(--pdg-dark); }
.pdg-article ul { list-style: none; padding-left: 0; margin: 20px 0 28px; }
.pdg-article ul li { position: relative; padding-left: 30px; font-size: 16.5px; line-height: 1.85; margin-bottom: 14px; color: var(--pdg-text); }
.pdg-article ul li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--pdg-blue); font-weight: 800;
}
.pdg-article ul li strong { color: var(--pdg-blue); }
/* Listes d'erreurs : la coche bleue par défaut se lisait comme une
   recommandation alors que ces lignes énumèrent ce que le jury sanctionne. */
.pdg-article ul.pdg-errlist li::before { content: "✗"; color: #c8372c; }
.pdg-article ul.pdg-errlist li strong { color: #b3261e; }
.pdg-article ol { padding-left: 26px; margin: 20px 0 28px; }
.pdg-article ol li { font-size: 16.5px; line-height: 1.85; margin-bottom: 14px; padding-left: 6px; color: var(--pdg-text); }
.pdg-article ol li::marker { color: var(--pdg-blue); font-weight: 800; }
.pdg-article ol li strong { color: var(--pdg-blue); }
.pdg-article p strong { color: var(--pdg-blue); font-weight: 700; }
.pdg-article-callout {
  background: var(--pdg-bg2); border-left: 4px solid var(--pdg-blue);
  border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 24px 0;
  font-size: 15px; line-height: 1.7; color: var(--pdg-text);
}

/* image / figure d'article */
.pdg-article-figure {
  /* Plus de cadre : ni bordure, ni ombre, ni fond. Les illustrations sont
     detourees sur fond clair, la carte ajoutait un rectangle inutile autour. */
  margin: 32px auto; width: fit-content; max-width: 100%;
  border-radius: var(--pdg-radius-lg); overflow: hidden;
}
/* `width: auto` + `object-fit: contain` : sans eux, la combinaison
   max-width:100% / max-height:400px écrase la hauteur sans réduire la largeur,
   et une image carrée s'affiche étirée (800×800 rendu en 672×400). */
.pdg-article-figure img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 400px; object-fit: contain; margin: 0 auto;
}
.pdg-article-figure figcaption {
  font-size: 12.5px; color: var(--pdg-muted); text-align: center;
  padding: 10px 18px 0;
}

/* encadré "points clés" (résumé en tête d'article) */
.pdg-key-points {
  background: linear-gradient(135deg, #fffef2 0%, #fff9e0 100%);
  border: 1px solid rgba(255,211,0,.4);
  border-radius: var(--pdg-radius-lg); padding: 22px 26px; margin: 0 0 36px;
}
.pdg-key-points-title {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 15px;
  color: var(--pdg-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px;
}
.pdg-key-points ul { list-style: none; margin: 0; padding: 0; }
.pdg-key-points ul li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.7; color: var(--pdg-text); margin-bottom: 12px; }
.pdg-key-points ul li:last-child { margin-bottom: 0; }
.pdg-key-points ul li::before { content: "→"; position: absolute; left: 0; top: 0; color: #caa300; font-weight: 900; }
.pdg-key-points ul li strong { color: var(--pdg-dark); }

/* citation / pull-quote */
.pdg-article-quote {
  margin: 30px 0; padding: 6px 0 6px 24px; border-left: 5px solid var(--pdg-yellow);
  font-family: 'Nunito', sans-serif; font-size: 20px; font-weight: 800; line-height: 1.4;
  color: var(--pdg-dark);
}
.pdg-article-quote cite { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; font-style: normal; color: var(--pdg-muted); }

/* ── Tableau de bord blog ── */
.pdg-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 20px; }
.pdg-blog-card {
  background: var(--pdg-white); border: 1.5px solid var(--pdg-border);
  border-radius: var(--pdg-radius-lg); overflow: hidden;
  box-shadow: var(--pdg-shadow); transition: all .25s; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
.pdg-blog-card:hover { transform: translateY(-4px); box-shadow: var(--pdg-shadow-lg); border-color: rgba(42,75,255,.28); }
/* Vignette de carte : hauteur fixe et recadrage centré, sinon l'image
   s'affiche à sa hauteur naturelle et fait exploser la grille. */
/* Barre de thèmes du blog — de vrais liens vers /blog/theme/<slug>/, pour que
   chaque thématique ait son URL indexable. */
.pdg-theme-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 900px; margin: 0 auto 32px;
}
.pdg-theme-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--pdg-white); border: 1px solid var(--pdg-border);
  font-size: 13.5px; font-weight: 700; color: var(--pdg-dark);
  text-decoration: none; transition: all .18s ease; white-space: nowrap;
}
.pdg-theme-btn span {
  font-size: 11.5px; font-weight: 800; color: var(--pdg-muted);
  background: var(--pdg-bg); border-radius: 999px; padding: 1px 7px;
}
.pdg-theme-btn:hover { border-color: rgba(42,75,255,.35); color: var(--pdg-blue); transform: translateY(-1px); }
.pdg-theme-btn-on { background: var(--pdg-blue); border-color: var(--pdg-blue); color: #fff; }
.pdg-theme-btn-on span { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 640px) {
  .pdg-theme-bar { gap: 8px; padding: 0 12px; }
  .pdg-theme-btn { padding: 8px 13px; font-size: 12.5px; }
}
.pdg-blog-card-img { width: 100%; height: 168px; object-fit: cover; display: block; background: var(--pdg-bg); }
.pdg-blog-card-body { padding: 20px; flex: 1; }
.pdg-blog-card-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--pdg-blue); margin-bottom: 8px; }
.pdg-blog-card-title { font-size: 17px; font-weight: 800; color: var(--pdg-dark); line-height: 1.25; margin-bottom: 10px; }
.pdg-blog-card-sub { font-size: 13.5px; color: var(--pdg-muted); line-height: 1.6; }
.pdg-blog-card-footer { padding: 12px 20px; border-top: 1px solid var(--pdg-border); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--pdg-muted); font-weight: 600; }

/* ═══════════════════════════
   ACCORDÉON (annales)
   ═══════════════════════════ */
.pdg-acc-wrap { margin-bottom: 12px; background: var(--pdg-white); border: 1.5px solid var(--pdg-border); border-radius: 18px; box-shadow: var(--pdg-shadow); transition: all .25s; overflow: hidden; }
.pdg-acc-wrap:hover { border-color: rgba(42,75,255,.25); box-shadow: var(--pdg-shadow-lg); }
.pdg-acc-toggle { display: none; }
.pdg-acc-label {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; cursor: pointer; user-select: none; gap: 14px;
}
.pdg-acc-title-wrap { display: flex; align-items: center; gap: 12px; }
.pdg-acc-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; box-shadow: 0 4px 10px rgba(0,0,0,.1); }
.pdg-acc-title { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 800; color: var(--pdg-dark); }
.pdg-acc-chevron { color: var(--pdg-muted); font-size: 16px; transition: transform .3s; flex-shrink: 0; }
.pdg-acc-toggle:checked ~ .pdg-acc-label .pdg-acc-chevron { transform: rotate(180deg); }
.pdg-acc-body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(0,1,0,1); }
.pdg-acc-toggle:checked ~ .pdg-acc-body { max-height: 8000px; transition: max-height 1s ease-in-out; }
.pdg-acc-inner { padding: 20px 22px 24px; border-top: 1px solid var(--pdg-border); }

/* ── Table ── */
.pdg-table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--pdg-border); border-radius: 14px; }
.pdg-table-wrap .pdg-table { margin: 0; }
.pdg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pdg-table th { background: var(--pdg-bg); padding: 10px 14px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--pdg-muted); text-align: left; }
.pdg-table td { padding: 11px 14px; border-bottom: 1px solid var(--pdg-border); line-height: 1.5; }
.pdg-table tr:last-child td { border-bottom: none; }
.pdg-table a { color: var(--pdg-blue); font-weight: 600; }
.pdg-table a:hover { text-decoration: underline; }

/* ── Iframe ── */
.pdg-ratio { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; }
.pdg-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* ═══════════════════════════
   BOUTIQUE
   ═══════════════════════════ */
.pdg-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; }
.pdg-pack-card {
  background: var(--pdg-white); border: 2px solid var(--pdg-border);
  border-radius: 20px; overflow: hidden; box-shadow: var(--pdg-shadow);
  transition: all .25s; display: flex; flex-direction: column;
}
.pdg-pack-card:hover { transform: translateY(-4px); box-shadow: var(--pdg-shadow-lg); border-color: rgba(42,75,255,.3); }
.pdg-pack-visual { background: var(--pdg-bg); padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 180px; }
.pdg-pack-visual img { max-height: 160px; object-fit: contain; }
.pdg-pack-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.pdg-pack-body h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.pdg-pack-body p  { font-size: 13.5px; color: var(--pdg-muted); line-height: 1.6; flex: 1; margin-bottom: 16px; }
.pdg-pack-stats { display: flex; gap: 0; border: 1px solid var(--pdg-border); border-radius: 10px; overflow: hidden; margin-bottom: 16px; font-size: 12px; }
.pdg-pack-stat { flex: 1; text-align: center; padding: 10px 6px; }
.pdg-pack-stat:not(:last-child) { border-right: 1px solid var(--pdg-border); }
.pdg-pack-stat strong { display: block; font-family: 'Nunito',sans-serif; font-size: 16px; font-weight: 800; background: var(--pdg-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pdg-pack-stat span   { color: var(--pdg-muted); font-size: 11px; }

/* ═══════════════════════════
   TÉMOIGNAGES
   ═══════════════════════════ */
.pdg-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; }
.pdg-video-card {
  background: var(--pdg-white); border: 1.5px solid var(--pdg-border);
  border-radius: 22px; overflow: hidden; box-shadow: var(--pdg-shadow); transition: all .25s;
}
.pdg-video-card:hover { transform: translateY(-4px); box-shadow: var(--pdg-shadow-lg); border-color: rgba(42,75,255,.28); }
.pdg-video-info { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px; }
.pdg-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid rgba(42,75,255,.2); flex-shrink: 0; }
.pdg-video-name { font-family: 'Nunito',sans-serif; font-size: 14px; font-weight: 800; color: var(--pdg-dark); }
.pdg-video-rank { font-size: 11.5px; color: var(--pdg-blue); font-weight: 600; margin-top: 2px; }
.pdg-video-quote { padding: 0 16px 12px; font-size: 13px; color: var(--pdg-muted); line-height: 1.65; font-style: italic; }

/* ═══════════════════════════
   TRUSTPILOT STRIP
   ═══════════════════════════ */
.pdg-trust-strip {
  background: var(--pdg-bg2); border-top: 1px solid var(--pdg-border); border-bottom: 1px solid var(--pdg-border);
  padding: 24px;
}
.pdg-trust-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.pdg-trust-tp {
  display: flex; align-items: center; gap: 10px;
  background: var(--pdg-white); border: 1.5px solid rgba(42,75,255,.15);
  border-radius: 12px; padding: 10px 18px; box-shadow: var(--pdg-shadow);
}
.pdg-trust-stars { color: var(--pdg-green); font-size: 18px; letter-spacing: 2px; }
.pdg-trust-score { font-family: 'Nunito',sans-serif; font-weight: 900; font-size: 20px; color: var(--pdg-green); }
.pdg-trust-score-sub { font-size: 11px; color: var(--pdg-muted); font-weight: 600; }

/* ═══════════════════════════
   RESPONSIVE GLOBAL
   ═══════════════════════════ */
@media (max-width: 640px) {
  .pdg-section { padding: 52px 0; }
  .pdg-hero { padding: 48px 20px 56px; }
  .pdg-cta-box { padding: 44px 24px; }
  .pdg-stats-row { gap: 10px; }
  .pdg-stat { min-width: 120px; padding: 14px 16px; }
  .pdg-video-grid { grid-template-columns: 1fr; }
  .pdg-blog-grid { grid-template-columns: 1fr; }
  .pdg-pack-grid { grid-template-columns: 1fr; }
  .pdg-footer-inner { flex-direction: column; gap: 28px; }
  .pdg-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .pdg-hero-badges { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; max-width: 340px; margin-left: auto; margin-right: auto; }
  .pdg-hero-badge { width: 100%; min-height: 46px; padding: 9px 12px; border-radius: 12px; font-size: 13px; justify-content: flex-start; }
  .pdg-btn { width: 100%; max-width: 360px; justify-content: center; }
}

/* ═══════════════════════════
   PAGE D'ACCUEIL (home)
   ═══════════════════════════ */
.pdg-hero-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
  margin-bottom: 16px; color: var(--pdg-dark);
}
.pdg-hero-title em {
  font-style: normal;
  background: var(--pdg-gradient); background-size: 200%;
  animation: pdg-gradient-shift 4s ease infinite;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pdg-hero-ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin: 28px auto 32px;
}
.pdg-hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 32px;
  margin-top: 8px;
}
.pdg-hero-stats span {
  display: flex; flex-direction: column; align-items: center;
  font-size: 13px; color: var(--pdg-muted); font-weight: 600;
}
.pdg-hero-stats strong {
  font-family: 'Nunito', sans-serif; font-size: clamp(20px,4vw,28px); font-weight: 900; line-height: 1;
  background: var(--pdg-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Titres de section ── */
.pdg-section-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(24px, 4vw, 38px); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.15; color: var(--pdg-dark);
  margin-bottom: 12px;
}
.pdg-section-sub {
  font-size: 16px; color: var(--pdg-muted); line-height: 1.7;
  max-width: 620px; margin-bottom: 40px;
}
.pdg-center .pdg-section-sub, .pdg-section-sub.pdg-center { margin-left: auto; margin-right: auto; }

/* ── Grilles ── */
.pdg-grid { display: grid; gap: 20px; }
.pdg-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pdg-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ── Cartes fonctionnalité ── */
.pdg-feature-card {
  background: var(--pdg-white);
  border: 1.5px solid var(--pdg-border-lt);
  border-radius: var(--pdg-radius-lg);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--pdg-text);
  box-shadow: var(--pdg-shadow);
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.pdg-feature-card:hover {
  border-color: var(--pdg-sky);
  box-shadow: var(--pdg-shadow-lg);
  transform: translateY(-4px);
}
.pdg-feature-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--pdg-bg-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 16px; flex-shrink: 0;
}
.pdg-feature-title {
  font-family: 'Nunito', sans-serif; font-size: 1.15rem; font-weight: 800;
  color: var(--pdg-dark); line-height: 1.25; margin-bottom: 8px;
}
.pdg-feature-sub {
  font-size: .9rem; color: var(--pdg-muted); line-height: 1.6; flex: 1;
}
.pdg-feature-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; font-size: .85rem; font-weight: 800; color: var(--pdg-blue);
  transition: gap .18s;
}
.pdg-feature-card:hover .pdg-feature-link { gap: 10px; }

/* ── CTA box (contenu supplémentaire) ── */
.pdg-cta-box-label {
  display: inline-block; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.9); margin-bottom: 14px; position: relative;
}
.pdg-cta-box-title {
  font-family: 'Nunito', sans-serif; font-size: clamp(22px,4vw,40px);
  font-weight: 900; color: #fff; margin-bottom: 14px; position: relative;
}
.pdg-cta-box-sub {
  font-size: 16px; color: #eff6ff; margin: 0 auto 28px; max-width: 520px; position: relative;
}
.pdg-cta-checklist {
  list-style: none; margin: 0 auto 32px; padding: 0; max-width: 440px;
  display: grid; gap: 10px; text-align: left; position: relative;
}
.pdg-cta-checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--pdg-text); font-size: 15px; font-weight: 600;
}
.pdg-cta-checklist li::before {
  content: "✓"; flex-shrink: 0; font-weight: 900; color: var(--pdg-blue);
}

/* ── Boutons manquants ── */
.pdg-btn-primary { background: var(--pdg-blue); color: #fff; }
.pdg-btn-primary:hover { background: var(--pdg-blue-dk); color: #fff; }
.pdg-btn-ghost {
  background: transparent; color: var(--pdg-blue);
  box-shadow: none; border: none;
}
.pdg-btn-ghost::after { display: none; }
.pdg-btn-ghost:hover { background: var(--pdg-bg2); color: var(--pdg-blue-dk); box-shadow: none; }

/* ── CTA final ── */
.pdg-cta-final { text-align: center; max-width: 680px; margin: 0 auto; }
.pdg-cta-final h2 {
  font-family: 'Nunito', sans-serif; font-size: clamp(24px,4vw,40px);
  font-weight: 900; color: var(--pdg-dark); margin-bottom: 14px; line-height: 1.15;
}
.pdg-cta-final p {
  font-size: 16px; color: var(--pdg-muted); line-height: 1.7; margin-bottom: 28px;
}
.pdg-cta-final .pdg-btn { margin: 6px; }

/* ── Bandeau Trustpilot ── */
.pdg-tp-strip {
  background: var(--pdg-bg2);
  border-top: 1px solid var(--pdg-border-lt);
  border-bottom: 1px solid var(--pdg-border-lt);
  padding: 20px 24px;
}
.pdg-tp-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; max-width: 1100px; margin: 0 auto;
  font-size: 15px; color: var(--pdg-text);
}
.pdg-tp-stars { color: var(--pdg-green); font-size: 18px; letter-spacing: 2px; }
.pdg-tp-score { font-family: 'Nunito', sans-serif; font-weight: 900; color: var(--pdg-green); }
.pdg-tp-sep { color: var(--pdg-border-lt); }
.pdg-tp-count { color: var(--pdg-muted); font-weight: 600; }
.pdg-tp-link { color: var(--pdg-blue); font-weight: 700; text-decoration: none; }
.pdg-tp-link:hover { text-decoration: underline; }

/* ── Formulaire de capture (embedded sio) ── */
.pdg-capture {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 420px; margin: 0 auto;
}
.pdg-capture[hidden] { display: none; }
.pdg-capture-field {
  width: 100%; padding: 14px 18px;
  border: 1.5px solid var(--pdg-border-lt); border-radius: var(--pdg-radius);
  font-family: 'Quicksand', sans-serif; font-size: 15px; color: var(--pdg-text);
  background: #fff; transition: border-color .18s, box-shadow .18s;
}
.pdg-capture-field::placeholder { color: var(--pdg-muted); }
.pdg-capture-field:focus {
  outline: none; border-color: var(--pdg-blue);
  box-shadow: 0 0 0 3px rgba(42,75,255,.12);
}
.pdg-capture-btn { width: 100%; justify-content: center; margin-top: 4px; }

/* ── Bloc pack gratuit inline (in-article) ── */
.pdg-freebie {
  background: linear-gradient(160deg, #f4f7ff 0%, #eef2ff 100%);
  border: 2px solid rgba(42,75,255,.16);
  border-radius: 20px;
  padding: 34px 26px;
  text-align: center;
  margin: 44px 0;
}
.pdg-freebie-badge {
  display: inline-block;
  background: var(--pdg-blue); color: #fff;
  font-weight: 800; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; padding: 6px 15px;
  border-radius: 999px; margin-bottom: 14px;
}
.pdg-freebie h2 { margin: 0 0 8px; font-size: 1.4rem; }
.pdg-freebie > p { color: var(--pdg-muted); max-width: 520px; margin: 0 auto 20px; }
.pdg-freebie .pdg-capture { margin: 0 auto; }
.pdg-freebie-note {
  color: var(--pdg-muted); font-size: .8rem; font-weight: 600;
  margin: 14px 0 0;
}

/* ── Popup modal de capture ── */
.pdg-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; visibility: hidden;
  transition: opacity .25s ease;
}
.pdg-modal-open { opacity: 1; visibility: visible; }
.pdg-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.6);
}
.pdg-modal-card {
  position: relative; z-index: 1;
  background: #fff; border-radius: var(--pdg-radius-lg);
  padding: 40px 32px 26px; max-width: 440px; width: 100%;
  text-align: center; box-shadow: var(--pdg-shadow-lg);
  transform: translateY(16px) scale(.98); transition: transform .25s ease;
}
.pdg-modal-open .pdg-modal-card { transform: translateY(0) scale(1); }
.pdg-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 28px; line-height: 1;
  color: var(--pdg-muted); cursor: pointer; padding: 4px;
}
.pdg-modal-close:hover { color: var(--pdg-dark); }
.pdg-modal-emoji { font-size: 2.4rem; margin-bottom: 8px; }
.pdg-modal-title {
  font-family: 'Nunito', sans-serif; font-size: 1.5rem; font-weight: 900;
  color: var(--pdg-dark); margin-bottom: 10px; line-height: 1.15;
}
.pdg-modal-sub {
  font-size: 14px; color: var(--pdg-muted); line-height: 1.6; margin-bottom: 22px;
}
.pdg-modal-note { font-size: 12px; color: var(--pdg-muted); margin-top: 14px; }

/* ── Popup capture — message de succès (variante Pokémon) ── */
.pdg-modal-success {
  text-align: center;
  padding: 18px 16px;
  border: 1px solid var(--pdg-border);
  border-radius: var(--pdg-radius-lg);
  background: linear-gradient(180deg, rgba(0,182,122,.08), rgba(0,182,122,.02));
}
.pdg-modal-success-icon { font-size: 2rem; margin-bottom: 6px; }
.pdg-modal-success-title {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.2rem;
  color: var(--pdg-green); margin-bottom: 8px;
}
.pdg-modal-success-text {
  font-size: 14px; color: var(--pdg-text); line-height: 1.5; margin-bottom: 16px;
}
.pdg-modal-success-btn { width: 100%; justify-content: center; }

/* Boutons du popup : bleu de marque plein (pas de jaune "flashy") */
.pdg-capture-btn.pdg-btn-yellow,
.pdg-modal-success-btn.pdg-btn-yellow {
  background: var(--pdg-blue); color: #fff;
  box-shadow: 0 8px 24px rgba(42,75,255,.28);
}
.pdg-capture-btn.pdg-btn-yellow:hover,
.pdg-modal-success-btn.pdg-btn-yellow:hover {
  background: var(--pdg-blue-dk); color: #fff;
  box-shadow: 0 12px 30px rgba(42,75,255,.4);
}

/* ── Popup capture — variante "pack" (image + badge concours) ── */
.pdg-modal-card.pdg-modal-pack {
  max-width: 470px; padding: 0; overflow: hidden; text-align: left;
}
.pdg-modal-pack .pdg-modal-close { color: var(--pdg-muted); z-index: 3; }
.pdg-modal-pack .pdg-modal-close:hover { color: var(--pdg-dark); }
.pdg-modal-hero {
  position: relative; padding: 30px 32px 20px;
  background: linear-gradient(180deg, var(--pdg-bg-blue) 0%, #fff 100%);
  border-bottom: 1px solid var(--pdg-border);
  text-align: center; overflow: hidden;
}
.pdg-modal-badge {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--pdg-blue);
  border: 1px solid var(--pdg-border);
  box-shadow: 0 2px 8px rgba(42,75,255,.08);
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.pdg-modal-img {
  position: relative; z-index: 1;
  display: block; width: 100%; max-width: 260px; margin: 0 auto;
  filter: drop-shadow(0 12px 22px rgba(20,30,80,.16));
}
.pdg-modal-body { padding: 24px 32px 28px; text-align: center; }
.pdg-modal-pack .pdg-modal-title { font-size: 1.45rem; margin-bottom: 8px; }
.pdg-modal-pack .pdg-modal-sub { margin-bottom: 20px; }
.pdg-modal-pack .pdg-modal-title .pdg-hl { color: var(--pdg-blue); }
@media (max-width: 480px) {
  .pdg-modal-hero { padding: 20px 22px 16px; }
  .pdg-modal-body { padding: 20px 22px 24px; }
  .pdg-modal-img { max-width: 210px; }
}

/* ── Responsive home ── */
@media (max-width: 860px) {
  .pdg-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .pdg-grid-2, .pdg-grid-3 { grid-template-columns: 1fr; }
  .pdg-hero-stats { gap: 20px; }
}

/* ── Info rows (acces-gratuit, whatsapp) ── */
.pdg-info-row { display: flex; gap: 14px; align-items: flex-start; }
.pdg-info-icon {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; background: #eef1ff; border-radius: 12px;
}
.pdg-info-row strong { display: block; color: var(--pdg-text); font-weight: 700; }

/* ── Numbered steps (acces-gratuit, formation) ── */
.pdg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pdg-steps li { display: flex; gap: 14px; align-items: flex-start; }
.pdg-step-num {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 16px;
  color: #fff; background: var(--pdg-blue); border-radius: 50%;
}

/* ── Disabled placeholder CTA (ressources-gratuit non configurés) ── */
.pdg-cta-placeholder { pointer-events: none; }

/* ── Bibliothèque PDF annales ── */
.pdg-annales-intro { font-size: 15px; color: var(--pdg-muted); max-width: 720px; margin: 0 auto 36px; text-align: center; line-height: 1.7; }
.pdg-annales-group { margin-bottom: 38px; }
.pdg-annales-group-title {
  font-family: 'Nunito', sans-serif; font-size: clamp(20px, 3vw, 26px); font-weight: 900;
  color: var(--pdg-dark); margin: 0 0 6px; padding-bottom: 10px;
  border-bottom: 2px solid var(--pdg-border-lt);
}
.pdg-annales-sub {
  font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--pdg-blue); margin: 22px 0 12px;
}
.pdg-pdf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pdg-pdf-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: #fff; border: 1.5px solid var(--pdg-border-lt); border-radius: var(--pdg-radius);
  color: var(--pdg-text); font-family: 'Quicksand', sans-serif; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s;
}
.pdg-pdf-link:hover { border-color: var(--pdg-blue); box-shadow: var(--pdg-shadow); transform: translateY(-1px); }
.pdg-pdf-link .pdf-ico { flex: 0 0 auto; font-size: 18px; }
.pdg-pdf-link .pdf-lbl { flex: 1 1 auto; line-height: 1.4; }
.pdg-pdf-link .pdf-dl { flex: 0 0 auto; color: var(--pdg-blue); font-weight: 700; }

/* Mobile: cache WhatsApp + intro qui parle d'envoyer le lien.
   Desktop: cache l'intro "PDF" alternative. */
.pdg-continue-label-mobile, .pdg-continue-sub-mobile { display: none; }
@media (max-width: 640px) {
  .pdg-wa-btn, .pdg-wa-note,
  .pdg-continue-label-desktop, .pdg-continue-sub-desktop { display: none !important; }
  .pdg-continue-label-mobile { display: flex !important; }
  .pdg-continue-sub-mobile { display: block !important; }
}
/* ═══════════════════════════════════════════════════════════════
   Images de pack cliquables + micro-animations d'article
   Ajouté le 01/08/2026
   ═══════════════════════════════════════════════════════════════ */

/* — Toute image de pack est un lien vers la page de vente — */
.pdg-pack-link { display: block; text-decoration: none; border: 0; cursor: pointer; }
.pdg-pack-link img { transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease; }
.pdg-pack-link:hover img { transform: translateY(-6px) scale(1.025); }
.pdg-pack-link:focus-visible { outline: 3px solid var(--pdg-blue); outline-offset: 6px; border-radius: 12px; }

/* — Le panda qui fait coucou dans les titres « Points clés » — */
@keyframes pdg-wiggle {
  0%, 88%, 100% { transform: rotate(0deg); }
  91% { transform: rotate(-14deg); }
  94% { transform: rotate(12deg); }
  97% { transform: rotate(-6deg); }
}
.pdg-key-points-title { cursor: default; }
.pdg-key-points:hover .pdg-key-points-title::first-letter { display: inline-block; }

/* — Puces qui glissent à l'entrée du bloc — */
@keyframes pdg-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.pdg-key-points.pdg-visible ul li { animation: pdg-slide-in .45s both; }
.pdg-key-points.pdg-visible ul li:nth-child(1) { animation-delay: .05s; }
.pdg-key-points.pdg-visible ul li:nth-child(2) { animation-delay: .13s; }
.pdg-key-points.pdg-visible ul li:nth-child(3) { animation-delay: .21s; }
.pdg-key-points.pdg-visible ul li:nth-child(4) { animation-delay: .29s; }
.pdg-key-points.pdg-visible ul li:nth-child(5) { animation-delay: .37s; }
.pdg-key-points ul li::before { transition: transform .25s ease; }
.pdg-key-points ul li:hover::before { transform: translateX(4px); }

/* — Ligne de temps de l'épreuve : les segments se remplissent — */
.pdg-timeline { margin: 22px 0 26px; }
.pdg-timeline-bar {
  display: flex; height: 42px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--pdg-border); background: var(--pdg-bg);
}
/* Visible par défaut : l'animation n'est qu'un bonus si le JS tourne. */
.pdg-timeline-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; white-space: nowrap;
  transform-origin: left center;
}
@keyframes pdg-grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.pdg-timeline.pdg-visible .pdg-timeline-seg { animation: pdg-grow-x .7s cubic-bezier(.22,1,.36,1) both; }
.pdg-timeline.pdg-visible .pdg-timeline-seg:nth-child(2) { animation-delay: .22s; }
.pdg-timeline.pdg-visible .pdg-timeline-seg:nth-child(3) { animation-delay: .44s; }
@keyframes pdg-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pdg-timeline.pdg-visible .pdg-timeline-seg span { animation: pdg-fade-in .35s ease .55s both; }
.pdg-timeline-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px;
  font-size: 13px; color: var(--pdg-muted); font-weight: 600;
}
.pdg-timeline-legend b { color: var(--pdg-dark); }

/* — Les postes de l'APTC en cartes numérotées — */
.pdg-postes { display: grid; gap: 12px; margin: 20px 0 8px; }
@media (min-width: 720px) { .pdg-postes { grid-template-columns: 1fr 1fr; } }
.pdg-poste {
  position: relative; border: 1px solid var(--pdg-border); border-radius: 14px;
  padding: 16px 18px 16px 56px; background: #fff;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.pdg-poste:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(42,75,255,.10); border-color: #dbe3ff; }
.pdg-poste-num {
  position: absolute; left: 14px; top: 15px;
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, #4f7cff, #2a4bff);
  box-shadow: 0 4px 10px rgba(42,75,255,.28);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pdg-poste:hover .pdg-poste-num { transform: rotate(-8deg) scale(1.08); }
.pdg-poste-t { font-weight: 800; color: var(--pdg-dark); font-size: 15px; margin-bottom: 3px; }
.pdg-poste-d { font-size: 14px; color: var(--pdg-muted); line-height: 1.55; }
.pdg-poste-tag {
  display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px;
  border-radius: 999px; background: #eafaf1; color: #0f8b52;
}

/* — Encadrés « astuce » avec l'ampoule qui s'allume — */
.pdg-tip {
  position: relative; border-left: 4px solid #f5b301; background: #fffbeb;
  border-radius: 0 12px 12px 0; padding: 14px 18px 14px 46px;
  margin: 16px 0; font-size: 15px; line-height: 1.62; color: var(--pdg-text);
}
.pdg-tip::before {
  content: "💡"; position: absolute; left: 14px; top: 13px; font-size: 18px;
  transition: transform .3s ease, filter .3s ease;
}
.pdg-tip:hover::before { transform: scale(1.25) rotate(-8deg); filter: drop-shadow(0 0 6px rgba(245,179,1,.7)); }
.pdg-tip strong { color: var(--pdg-dark); }

/* — Tableau comparatif : la ligne survolée se détache — */
.pdg-table tbody tr { transition: background .2s ease; }
.pdg-table tbody tr:hover { background: #f7f9ff; }

/* — Questions/réponses dépliables des articles (classes distinctes de .pdg-faq-*) — */
.pdg-qa {
  border: 1px solid var(--pdg-border); border-radius: 12px;
  margin: 10px 0; background: #fff; overflow: hidden;
}
.pdg-qa > summary {
  cursor: pointer; list-style: none; display: block;
  padding: 16px 48px 16px 18px;
  font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--pdg-dark);
  font-size: 16px; line-height: 1.45; position: relative;
  transition: background .2s ease;
}
.pdg-qa > summary::-webkit-details-marker,
.pdg-qa > summary::marker { display: none; content: ""; }
.pdg-qa > summary:hover { background: #f7f9ff; }
.pdg-qa > summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 800; color: var(--pdg-blue); line-height: 1;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pdg-qa[open] > summary::after { transform: translateY(-50%) rotate(135deg); }
.pdg-qa-body { padding: 0 18px 18px; }
.pdg-article .pdg-qa-body p {
  margin: 0 0 10px; font-size: 15.5px; line-height: 1.7; color: var(--pdg-text);
}
.pdg-article .pdg-qa-body p:last-child { margin-bottom: 0; }

/* — Compteur de chiffre-clé — */
.pdg-stat-row { display: grid; gap: 12px; margin: 20px 0; }
@media (min-width: 640px) { .pdg-stat-row { grid-template-columns: repeat(3, 1fr); } }
.pdg-stat-card {
  border: 1px solid var(--pdg-border); border-radius: 14px; padding: 18px 16px;
  text-align: center; background: #fff;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.pdg-stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.08); }
.pdg-stat-n { font-family: 'Nunito', sans-serif; font-size: 30px; font-weight: 900; color: var(--pdg-blue); line-height: 1.1; }
.pdg-stat-l { font-size: 13.5px; font-weight: 700; color: var(--pdg-dark); margin-top: 6px; }
.pdg-stat-s { font-size: 12.5px; color: var(--pdg-muted); margin-top: 3px; line-height: 1.45; }

/* — Liens de ressources externes — */
.pdg-reslist { list-style: none; padding: 0; margin: 14px 0; }
.pdg-reslist li {
  padding: 10px 12px; border-bottom: 1px solid var(--pdg-border);
  font-size: 14.5px; transition: padding-left .25s ease, background .25s ease;
}
.pdg-reslist li:last-child { border-bottom: none; }
.pdg-reslist li:hover { padding-left: 20px; background: #f7f9ff; }
/* Sans couleur, ces dix ressources ressemblaient à du texte gras : rien
   n'indiquait qu'elles étaient cliquables. */
.pdg-reslist a { font-weight: 700; color: var(--pdg-blue); }
.pdg-reslist a:hover { text-decoration: underline; }

/* — Respect des préférences d'accessibilité — */
@media (prefers-reduced-motion: reduce) {
  .pdg-pack-link img, .pdg-poste, .pdg-poste-num, .pdg-stat-card,
  .pdg-timeline-seg, .pdg-timeline-seg span, .pdg-key-points.pdg-visible ul li,
  .pdg-tip::before, .pdg-qa > summary::after, .pdg-reslist li {
    transition: none !important; animation: none !important; transform: none !important;
  }
  .pdg-timeline-seg { transform: scaleX(1) !important; }
  .pdg-timeline-seg span { opacity: 1 !important; }
  .pdg-key-points ul li { opacity: 1 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Illustrations animées d'article (SVG inline, aucune requête réseau)
   ═══════════════════════════════════════════════════════════════ */
.pdg-anim {
  margin: 30px 0; padding: 26px 20px; border: 1px solid var(--pdg-border);
  border-radius: 16px; background: linear-gradient(180deg,#fbfcff 0%,#fff 100%);
  text-align: center;
}
.pdg-anim svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.pdg-anim figcaption {
  margin-top: 14px; font-size: 13.5px; line-height: 1.55;
  color: var(--pdg-muted); font-weight: 600; max-width: 520px;
  margin-left: auto; margin-right: auto;
}
.pdg-anim figcaption b { color: var(--pdg-dark); }

/* Règle générale : tout est visible par défaut. Les animations ne se déclenchent
   qu'au moment où l'illustration entre dans le champ (classe .pdg-visible posée
   par l'IntersectionObserver). Sans JavaScript, le lecteur voit l'état final. */

/* — Tracé qui se dessine — */
@keyframes pdg-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.pdg-anim.pdg-visible .draw { stroke-dasharray: 600; animation: pdg-draw 2.4s ease-out .2s both; }

/* — Apparition en cascade — */
@keyframes pdg-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.pdg-anim.pdg-visible .pop { animation: pdg-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.pdg-anim .pop { transform-box: fill-box; transform-origin: center; }
.pdg-anim .d1 { animation-delay: .5s } .pdg-anim .d2 { animation-delay: .9s }
.pdg-anim .d3 { animation-delay: 1.3s } .pdg-anim .d4 { animation-delay: 1.7s }
.pdg-anim .d5 { animation-delay: 2.1s } .pdg-anim .d6 { animation-delay: 2.5s }

/* — Rotation douce (hélice, microscope) — */
@keyframes pdg-spin-slow { to { transform: rotate(360deg); } }
.pdg-anim .spin { animation: pdg-spin-slow 9s linear infinite; transform-box: fill-box; transform-origin: center; }

/* — Pulsation (rappel de mémoire) — */
@keyframes pdg-pulse { 0%,100% { r: 5; opacity: 1 } 50% { r: 8; opacity: .55 } }
.pdg-anim .pulse { animation: pdg-pulse 2s ease-in-out infinite; }
.pdg-anim .pulse.p2 { animation-delay: .5s } .pdg-anim .pulse.p3 { animation-delay: 1s }
.pdg-anim .pulse.p4 { animation-delay: 1.5s }

/* — Va-et-vient (sablier, plaques) — */
@keyframes pdg-drift { 0%,100% { transform: translateX(0) } 50% { transform: translateX(9px) } }
.pdg-anim .drift { animation: pdg-drift 4s ease-in-out infinite; transform-box: fill-box; }
.pdg-anim .drift.rev { animation-direction: reverse; }

/* — Montée d'une barre — */
@keyframes pdg-rise { from { transform: scaleY(0) } to { transform: scaleY(1) } }
.pdg-anim .rise { transform-box: fill-box; transform-origin: bottom center; }
.pdg-anim.pdg-visible .rise { animation: pdg-rise .9s cubic-bezier(.22,1,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  .pdg-anim .draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .pdg-anim .pop, .pdg-anim .spin, .pdg-anim .pulse,
  .pdg-anim .drift, .pdg-anim .rise { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* — Vidéo d'illustration dans les articles (courbe de l'oubli maison) — */
.pdg-anim video {
  width: 100%; max-width: 620px; height: auto; display: block;
  margin: 0 auto; border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   Commentaires de blog
   ═══════════════════════════════════════════════════════════════ */
/* Même gabarit que .pdg-article : sans cela le bloc dépasse de 20 px de
   chaque côté et la colonne de lecture semble se décaler en fin de page. */
.pdg-comments {
  max-width: 720px; margin: 60px auto 0; padding: 0 24px 20px;
}
.pdg-com-entete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 2px solid var(--pdg-border); }
.pdg-com-entete h2 { font-family: 'Nunito', sans-serif; font-size: clamp(21px,3vw,26px);
  font-weight: 900; color: var(--pdg-dark); margin: 0; padding: 0; border: 0; }
.pdg-com-compteur { font-size: 13.5px; font-weight: 700; color: var(--pdg-muted); }
.pdg-com-intro { font-size: 15px; line-height: 1.6; color: var(--pdg-muted); margin: 14px 0 18px; }

.pdg-com-form, .pdg-com-login {
  background: #fafbff; border: 1px solid var(--pdg-border); border-radius: 16px;
  padding: 18px; margin-bottom: 26px;
}
.pdg-com-login { background: #fff; }
.pdg-com-login p { font-size: 13.5px; color: var(--pdg-muted); margin: 0 0 12px; }
.pdg-com-champs { display: flex; gap: 10px; margin-bottom: 10px; }
.pdg-com-form input[type=text], .pdg-com-form textarea,
.pdg-com-login input {
  width: 100%; font-family: 'Quicksand', sans-serif; font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--pdg-border); border-radius: 11px;
  background: #fff; color: var(--pdg-text); transition: border-color .2s, box-shadow .2s;
}
.pdg-com-login input { margin-bottom: 10px; }
.pdg-com-form input:focus, .pdg-com-form textarea:focus, .pdg-com-login input:focus {
  outline: none; border-color: var(--pdg-blue); box-shadow: 0 0 0 3px rgba(42,75,255,.12);
}
.pdg-com-form textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
/* champ piège à robots */
.pdg-com-form input[name=site] { position: absolute; left: -9999px; width: 1px; height: 1px; }
.pdg-com-bas { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.pdg-com-bas .pdg-btn { padding: 11px 22px; font-size: 15px; }
.pdg-com-msg, .pdg-com-msg-login { font-size: 13.5px; font-weight: 700; }
.pdg-com-msg-ok { color: #0f8b52; }
.pdg-com-msg-erreur, .pdg-com-msg-login { color: #b3261e; }
.pdg-com-rep-sur { font-size: 13.5px; color: var(--pdg-muted); font-weight: 600;
  background: #eef2ff; border-radius: 9px; padding: 8px 12px; margin-bottom: 12px; }
.pdg-com-rep-sur b { color: var(--pdg-dark); }

.pdg-com-fil { margin-bottom: 18px; }
.pdg-com { display: flex; gap: 13px; padding: 15px 16px; background: #fff;
  border: 1px solid var(--pdg-border); border-radius: 14px; }
.pdg-com-av {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, #6b86f5, #2a4bff);
}
/* Réponse de Pandagro : elle doit se distinguer au premier coup d'œil d'un
   commentaire de lecteur, sinon la réponse officielle se noie dans le fil. */
.pdg-com-auteur { border-color: rgba(42,75,255,.28); background: var(--pdg-bg-blue); }
.pdg-com-auteur .pdg-com-av { background: linear-gradient(135deg, #2a4bff, #0f172a); }
.pdg-com-badge {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--pdg-blue);
  background: rgba(42,75,255,.1); border: 1px solid rgba(42,75,255,.25);
  padding: 2px 8px; border-radius: 999px; align-self: center;
}
.pdg-com-corps { flex: 1; min-width: 0; }
.pdg-com-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pdg-com-nom { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px; color: var(--pdg-dark); }
.pdg-com-date { font-size: 12.5px; color: var(--pdg-muted); font-weight: 600; }
.pdg-com-texte { margin: 6px 0 0; font-size: 15px; line-height: 1.65;
  color: var(--pdg-text); overflow-wrap: anywhere; }
.pdg-com-actions { margin-top: 9px; display: flex; gap: 16px; }
.pdg-com-lien { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--pdg-blue); }
.pdg-com-lien:hover { text-decoration: underline; }
.pdg-com-sup { color: #b3261e; }
.pdg-com-reponses { margin: 10px 0 0 26px; padding-left: 18px;
  border-left: 2px solid var(--pdg-border); display: flex; flex-direction: column; gap: 10px; }
.pdg-com-rep { background: #fafbff; }
.pdg-com-rep .pdg-com-av { width: 32px; height: 32px; font-size: 12px;
  background: linear-gradient(135deg, #9fb0cc, #6b86f5); }
.pdg-com-vide { font-size: 15px; color: var(--pdg-muted); padding: 22px 0; text-align: center; }
.pdg-com-pied { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--pdg-border);
  font-size: 13px; color: var(--pdg-muted); }

@media (max-width: 560px) {
  .pdg-com-champs { flex-direction: column; }
  .pdg-com-reponses { margin-left: 10px; padding-left: 12px; }
}

/* — Barre de progression de lecture (posée par scroll-anim.js) — */
.pdg-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, #47B8FF, #2a4bff);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .pdg-progress { display: none; } }

/* — Encart d'offre glissé dans le fil de l'article — */
.pdg-offre {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 30px 0; padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--pdg-border); background: linear-gradient(180deg,#fbfcff,#fff);
}
.pdg-offre-txt { flex: 1 1 260px; min-width: 0; }
.pdg-offre-t { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 16px;
  color: var(--pdg-dark); margin-bottom: 4px; }
.pdg-offre-d { font-size: 14.5px; line-height: 1.55; color: var(--pdg-muted); }
.pdg-offre .pdg-btn { flex: 0 0 auto; padding: 12px 22px; font-size: 14.5px; }
.pdg-offre-mini { flex: 0 0 92px; }
.pdg-offre-mini img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 8px 16px rgba(42,75,255,.16)); transition: transform .3s ease; }
.pdg-offre-mini:hover img { transform: translateY(-4px) scale(1.03); }
@media (max-width: 560px) {
  .pdg-offre { flex-direction: column; align-items: flex-start; }
  /* En colonne, le `flex-basis: 260px` du texte devient une HAUTEUR imposée :
     le bloc se retrouvait à 260 px pour ~110 px de contenu, d'où un grand
     vide blanc entre le texte et le bouton sur téléphone. */
  .pdg-offre-txt { flex: 0 1 auto; width: 100%; }
  .pdg-offre-mini { flex: 0 0 auto; }
  .pdg-offre .pdg-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Respirations animées dans les articles
   Décoratives, jamais scientifiques. Volontairement plus petites
   que les illustrations de contenu pour rester une ponctuation.
   ═══════════════════════════════════════════════════════════════ */
.pdg-gif {
  margin: 30px auto; max-width: 380px; width: 100%;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--pdg-border); background: var(--pdg-bg);
}
.pdg-gif img {
  display: block; width: 100%; height: auto; object-fit: contain; margin: 0;
}
.pdg-gif figcaption {
  font-size: 12.5px; color: var(--pdg-muted); text-align: center;
  padding: 9px 14px; background: var(--pdg-white);
  border-top: 1px solid var(--pdg-border); line-height: 1.45;
}
@media (max-width: 520px) { .pdg-gif { max-width: 100%; } }

/* ── Grille de logos d'écoles ────────────────────────────────────────────── */
.pdg-ecoles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
  margin: 18px 0 26px;
}
.pdg-ecole {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 104px;
  padding: 16px 14px;
  background: #fff;
  border: 1px solid var(--pdg-border, #e2dfd8);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.pdg-ecole:hover {
  border-color: #2A4BFF;
  box-shadow: 0 4px 14px rgba(42, 75, 255, .10);
  transform: translateY(-1px);
}
/* La hauteur maximale depend du format du logo : un logo carre plafonne tout de
   suite en hauteur et parait minuscule, alors qu'un logo tres large est de toute
   facon borne par la largeur de la tuile. On donne donc plus de hauteur aux
   formats carres et verticaux. */
.pdg-ecole img {
  max-width: 100%;
  width: auto; height: auto;
  max-height: 54px;
  object-fit: contain;
}
.pdg-ecole--m img  { max-height: 64px; }
.pdg-ecole--l img  { max-height: 74px; }
.pdg-ecole--xl img { max-height: 86px; }
.pdg-ecole span {
  font-size: .75rem; font-weight: 600; line-height: 1.25;
  text-align: center; color: #7a7670;
  min-width: 0; overflow-wrap: anywhere;
}
.pdg-ecoles-titre {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #b8b4ac;
  margin: 26px 0 10px;
}
@media (max-width: 430px) {
  .pdg-ecoles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pdg-ecole { padding: 12px 9px; gap: 6px; min-height: 88px; }
  .pdg-ecole img     { max-height: 44px; }
  .pdg-ecole--m img  { max-height: 54px; }
  .pdg-ecole--l img  { max-height: 62px; }
  .pdg-ecole--xl img { max-height: 72px; }
  .pdg-ecole span { font-size: .68rem; }
}






/* --- Graphiques d'article (SVG en ligne, sans JS) --- */
.pdg-fig{margin:26px 0;}
.pdg-fig figcaption{margin-top:10px;font-size:13.5px;color:var(--pdg-muted);line-height:1.55;}
.pdg-fig-t{font-weight:800;color:var(--pdg-dark);font-size:16px;margin-bottom:14px;line-height:1.35;}
.pdg-anneaux{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.pdg-anneaux>svg{flex:1 1 190px;max-width:250px;height:auto;}
.pdg-g-barres{width:100%;max-width:520px;height:auto;display:block;margin:0 auto;}
.pdg-fig details{margin-top:12px;}
.pdg-fig summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--pdg-blue);}
.pdg-fig details[open] summary{margin-bottom:10px;}
@media(max-width:560px){.pdg-fig-t{font-size:15px;}.pdg-anneaux>svg{flex:1 1 150px;}}

/* Animation à l'affichage — CSS seul, aucun JS.
   Réservée aux figures portant .pdg-fig-anim : on n'anime pas tous les
   graphiques, sinon l'effet s'use et la page s'agite. */
.pdg-fig-anim .pdg-arc{animation:pdg-arc .9s cubic-bezier(.22,.61,.36,1) both;}
@keyframes pdg-arc{from{stroke-dashoffset:var(--de);}to{stroke-dashoffset:var(--vers);}}
.pdg-fig-anim .pdg-bar{transform-box:view-box;animation:pdg-bar .65s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d,0s);}
@keyframes pdg-bar{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.pdg-fig-anim .pdg-bar-v{animation:pdg-fade .4s ease-out both;animation-delay:var(--d,0s);}
@keyframes pdg-fade{from{opacity:0;}to{opacity:1;}}
/* Déclenchement au défilement là où le navigateur le sait faire (Chrome, Safari
   récents). Sans ce bloc l'animation se joue au chargement : un graphique situé
   plus bas est déjà dessiné quand le lecteur y arrive. Les navigateurs sans
   support gardent l'animation au chargement — aucune régression. */
/* L'animation attend que la figure entre dans l'écran. `animation-timeline`
   n'est pas assez répandu ; on met donc l'animation en pause et reveal.js
   ajoute .pdg-anim-go au bon moment. Sans JS la règle .pdg-js ne s'applique
   pas et le graphique s'affiche normalement — jamais de graphique invisible. */
.pdg-js .pdg-fig-anim .pdg-arc,
.pdg-js .pdg-fig-anim .pdg-bar,
.pdg-js .pdg-fig-anim .pdg-bar-v{animation-play-state:paused;}
.pdg-js .pdg-fig-anim.pdg-anim-go .pdg-arc,
.pdg-js .pdg-fig-anim.pdg-anim-go .pdg-bar,
.pdg-js .pdg-fig-anim.pdg-anim-go .pdg-bar-v{animation-play-state:running;}
/* Respect du réglage système « réduire les animations ». */

/* --- Couche interactive (figures .pdg-fig-inter) --- */
.pdg-fig-inter{position:relative;}
.pdg-fig-inter .pdg-bar,.pdg-fig-inter .pdg-arc{cursor:pointer;transition:opacity .15s;outline:none;}
.pdg-fig-inter.pdg-survol .pdg-bar,.pdg-fig-inter.pdg-survol .pdg-arc{opacity:.38;}
.pdg-fig-inter .pdg-bar.pdg-actif,.pdg-fig-inter .pdg-arc.pdg-actif{opacity:1;}
.pdg-bar:focus-visible,.pdg-arc:focus-visible{stroke:#0f172a;stroke-width:2;}
.pdg-bulle{position:absolute;z-index:5;pointer-events:none;background:#0f172a;color:#fff;
  font-size:12.5px;font-weight:700;line-height:1.4;padding:7px 11px;border-radius:9px;
  white-space:nowrap;opacity:0;transform:translate(-50%,-118%);transition:opacity .12s;
  box-shadow:0 6px 18px rgba(15,23,42,.28);}
.pdg-bulle.pdg-on{opacity:1;}
.pdg-bulle b{font-weight:800;display:block;font-size:11px;opacity:.72;text-transform:uppercase;letter-spacing:.04em;}
@media(prefers-reduced-motion:reduce){
  .pdg-fig-anim .pdg-arc,.pdg-fig-anim .pdg-bar,.pdg-fig-anim .pdg-bar-v{animation:none;}
}