/* ============================================================================
   ACCUEIL — style « Software » (index.html uniquement)
   Tout est préfixé par .home : la navbar, le footer et les autres pages
   gardent leur style. Polices servies en local (CSP : font-src 'self').
   ============================================================================ */

@font-face {
  font-family: 'Host Grotesk';
  font-style: normal; font-display: swap; font-weight: 300 800;
  src: url(fonts/host-grotesk-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal; font-display: swap; font-weight: 300 800;
  src: url(fonts/host-grotesk-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(fonts/instrument-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* — Jetons — */
.home {
  --dp-color-ground: #fcfcfd;
  --dp-color-ink: var(--texte, #1f2329);                 /* gris très foncé du site (stylesheet.css) */
  --dp-color-ink-secondary: var(--texte-2, #495057);
  --dp-color-ground-muted: #f3f4f6;
  --dp-color-rule: #dde0e6;
  --dp-color-accent: #074ce0;
  --dp-color-accent-hover: #0640bd;
  --dp-color-panel: #ffffff;
  --dp-color-on-accent: #ffffff;
  --dp-shadow: 0 1px 2px rgb(22 25 31 / .04), 0 8px 24px -12px rgb(22 25 31 / .14);
  --dp-typography-fallback: sans-serif;
  --dp-typography-body: 16px;
  --dp-typography-interface: 15px;
  --dp-typography-small: 14px;
  --dp-typography-metadata: 13px;
  --dp-typography-label: 12px;
  --dp-typography-body-leading: 1.6;
  --dp-spacing-grid-gap: 24px;
  --dp-radius-panel: 12px;
  --dp-border-hairline: 1px;
  --dp-motion-interaction: 160ms;
  --dp-motion-easing: ease-out;

  --dp-font-display: 'Host Grotesk', var(--dp-typography-fallback);
  --dp-font-text: 'Instrument Sans', var(--dp-typography-fallback);
  --dp-section-pad: clamp(56px, 8vw, 96px);
}
/* Mode sombre du site (bouton thème) : mêmes rôles, valeurs inversées */
[data-bs-theme="dark"] .home {
  --dp-color-ground: #111318;
  --dp-color-ink: var(--texte, #dee2e6);
  --dp-color-ink-secondary: var(--texte-2, #adb5bd);
  --dp-color-ground-muted: #171a20;
  --dp-color-rule: #2c313a;
  --dp-color-accent: #7aa5ff;
  --dp-color-accent-hover: #9dbcff;
  --dp-color-panel: #1d2128;
  --dp-color-on-accent: #0b1020;
  --dp-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6);
}

.home {
  background: var(--dp-color-ground);
  color: var(--dp-color-ink);
  font-family: var(--dp-font-text);
  font-size: var(--dp-typography-body);
  line-height: var(--dp-typography-body-leading);
}
.home :is(h1, h2, h3, .dp-figure) {
  font-family: var(--dp-font-display);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  color: inherit; margin: 0;
}
.home p { margin: 0; }
.home :focus-visible { outline: 3px solid var(--dp-color-accent); outline-offset: 2px; }

.dp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.dp-section { padding: var(--dp-section-pad) 0; }
.dp-muted { background: var(--dp-color-ground-muted); }

.dp-eyebrow {
  display: block; margin-bottom: 12px;
  font-size: var(--dp-typography-label); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dp-color-accent);
}
.dp-h2 { font-size: clamp(30px, 3.6vw, 44px); }
.dp-intro { max-width: 46rem; margin-top: 16px; color: var(--dp-color-ink-secondary); font-size: 18px; }

/* — Boutons — */
.dp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 8px;
  font-family: var(--dp-font-text); font-size: var(--dp-typography-interface); font-weight: 600;
  line-height: 1.2; text-decoration: none;
  border: var(--dp-border-hairline) solid transparent;
  transition: transform var(--dp-motion-interaction) var(--dp-motion-easing),
              background-color var(--dp-motion-interaction) var(--dp-motion-easing),
              border-color var(--dp-motion-interaction) var(--dp-motion-easing);
}
.dp-btn:hover { transform: translateY(-1px); text-decoration: none; }
.dp-btn:active { transform: none; }
.dp-btn-primary { background: var(--dp-color-accent); color: var(--dp-color-on-accent); }
.dp-btn-primary:hover { background: var(--dp-color-accent-hover); color: var(--dp-color-on-accent); }
.dp-btn-secondary {
  background: var(--dp-color-panel); color: var(--dp-color-ink); border-color: var(--dp-color-rule);
}
.dp-btn-secondary:hover { background: var(--dp-color-ground-muted); color: var(--dp-color-ink); border-color: var(--dp-color-ink-secondary); }

/* — Hero — */
.dp-hero { padding: clamp(48px, 7vw, 88px) 0 0; }
.dp-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
.dp-hero h1 { font-size: clamp(38px, 6.2vw, 70px); letter-spacing: -.035em; line-height: 1.04; }
.dp-hero .dp-lead {
  max-width: 38rem; margin-top: 20px;
  font-size: 19px; color: var(--dp-color-ink-secondary);
}
.dp-hero .dp-lead-accent { color: var(--dp-color-accent); font-weight: 600; }
.dp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Schéma : les 4 étapes d'un thème posées sur un escalier (« pas à pas »).
   Les couleurs suivent la palette de la matière affichée (attribut data-matiere
   posé sur .dp-diagram : palettes --pal-* de stylesheet.css) ; le script de
   l'accueil fait défiler compta → éco. politique → éco. d'entreprise → droit.
   Tailles en cqw : tout suit la largeur du schéma. */
.dp-diagram {
  --dg: var(--pal-strong);                 /* couleur d'accent de la matière */
  --dg-on: #fff;                           /* texte sur aplat --dg */
  --dg-soft: rgb(var(--pal-rgb) / .16);    /* fond teinté */
  --dg-end: var(--pal-deep);               /* fin du dégradé du n° 4 */
  position: relative; width: 100%; max-width: 620px; aspect-ratio: 520 / 480;
  margin-left: auto; margin-right: -16px; /* collé à droite, déborde un peu dans la marge */
  container-type: inline-size;
}
[data-bs-theme="dark"] .dp-diagram { --dg: var(--pal-bright); --dg-on: #15151f; --dg-end: var(--pal-vivid); }
/* Le trait d'entrée a son propre data-matiere : il prend la couleur de la matière suivante */
.dp-leadsvg { --dg: var(--pal-strong); }
[data-bs-theme="dark"] .dp-leadsvg { --dg: var(--pal-bright); }
.dp-diagram > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dp-stair {
  fill: none; stroke: var(--dg); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 7; opacity: .7;
}
/* Tronçons du masque : blancs = pointillés visibles */
.dp-seg { fill: none; stroke: #fff; stroke-width: 8; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Cycle d'une matière, piloté par le script de l'accueil (classes de phase sur .dp-diagram) :
     ph-in    : montée des marches : carte 1, trait, carte 2, trait, carte 3, trait, carte 4, trait de sortie
     ph-out   : tout disparaît de 1 à 4 (plus vite qu'à l'apparition)
   Trait d'entrée vers le 1 : il s'efface 1 s après l'apparition du chiffre 1, puis se redessine, à la
   couleur de la matière suivante (second svg .dp-leadnext), 2 s après la fin du trait qui suit le 4,
   pendant la fin de ph-out ; il reste ensuite affiché et le cycle reprend.
   Sans classe de phase (pas de JS, mouvement réduit) : tout est affiché, rien ne bouge. */
@media (prefers-reduced-motion: no-preference) {
  /* — Trait d'entrée de la matière suivante : se dessine 2 s après la fin du trait qui suit le 4 — */
  .dp-leadnext { visibility: hidden; }
  .dp-diagram.ph-in .dp-leadnext, .dp-diagram.ph-out .dp-leadnext { visibility: visible; }
  .dp-diagram.ph-in .dp-leadnext .dp-seg { stroke-dashoffset: 1; }
  /* fin du trait après le 4 : 3,9 s ; début de ph-out : 3,9 + 1,65 = 5,55 s ; + 0,35 s = 5,9 s, soit 2 s plus tard */
  .dp-diagram.ph-out .dp-leadnext .dp-seg { stroke-dashoffset: 1; animation: dp-draw .35s ease-out .35s forwards; }
  /* … et l'ancien trait (couleur de la matière courante) s'efface 1 s après le chiffre 1 */
  .dp-diagram.ph-in .dp-leadsvg:not(.dp-leadnext) .dp-seg { animation: dp-erase .3s ease-in 1s forwards; }
  .dp-diagram.ph-out .dp-leadsvg:not(.dp-leadnext) .dp-seg { stroke-dashoffset: -1; }

  /* — Apparition : la carte n arrive avec le trait, puis le trait file vers la suivante — */
  .dp-diagram.ph-in > svg:not(.dp-leadsvg) .dp-seg { stroke-dashoffset: 1; animation: dp-draw var(--dur, .6s) var(--ease, ease-in-out) var(--at, 0s) forwards; }
  .dp-diagram.ph-in .dp-seg-1 { --at: .4s; }
  .dp-diagram.ph-in .dp-seg-2 { --at: 1.4s; }
  .dp-diagram.ph-in .dp-seg-3 { --at: 2.4s; }
  .dp-diagram.ph-in .dp-seg-4 { --at: 3.4s; --dur: .5s; --ease: ease-in; }

  .dp-diagram.ph-in .dp-fc { animation: dp-rise .5s cubic-bezier(.2, .8, .3, 1) var(--at, 0s) both; }
  .dp-diagram.ph-in .dp-fc-1 { --at: 0s; }
  .dp-diagram.ph-in .dp-fc-2 { --at: 1s; }
  .dp-diagram.ph-in .dp-fc-3 { --at: 2s; }
  .dp-diagram.ph-in .dp-fc-4 { --at: 3s; }
  .dp-diagram.ph-in .dp-n { animation: dp-pop .4s cubic-bezier(.34, 1.56, .64, 1) var(--at, 0s) both; }
  .dp-diagram.ph-in .dp-fc-2 .dp-n { --at: 1s; }
  .dp-diagram.ph-in .dp-fc-3 .dp-n { --at: 2s; }
  .dp-diagram.ph-in .dp-fc-4 .dp-n { --at: 3s; }

  /* — Disparition de 1 à 4 : trait effacé de proche en proche, cartes estompées au même rythme — */
  .dp-diagram.ph-out > svg:not(.dp-leadsvg) .dp-seg { animation: dp-erase .22s ease-in var(--at, 0s) forwards; }
  .dp-diagram.ph-out .dp-seg-1 { --at: 0s; }
  .dp-diagram.ph-out .dp-seg-2 { --at: .12s; }
  .dp-diagram.ph-out .dp-seg-3 { --at: .24s; }
  .dp-diagram.ph-out .dp-seg-4 { --at: .36s; }
  .dp-diagram.ph-out .dp-fc { animation: dp-fall .22s ease-in var(--at, 0s) forwards; }
  .dp-diagram.ph-out .dp-fc-1 { --at: 0s; }
  .dp-diagram.ph-out .dp-fc-2 { --at: .12s; }
  .dp-diagram.ph-out .dp-fc-3 { --at: .24s; }
  .dp-diagram.ph-out .dp-fc-4 { --at: .36s; }
  .dp-diagram.ph-out .dp-n { animation: dp-pop-out .18s ease-in var(--at, 0s) forwards; }
  .dp-diagram.ph-out .dp-fc-2 .dp-n { --at: .12s; }
  .dp-diagram.ph-out .dp-fc-3 .dp-n { --at: .24s; }
  .dp-diagram.ph-out .dp-fc-4 .dp-n { --at: .36s; }
}
@keyframes dp-draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dp-erase { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes dp-rise  { from { opacity: 0; transform: translateY(2.4cqw) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dp-fall  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(1.2cqw) scale(.97); } }
@keyframes dp-pop   { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dp-pop-out { from { transform: scale(1); } to { transform: scale(0); } }

/* Cartes-marches */
.dp-fc {
  position: absolute; width: 37%;
  padding: 2.8cqw 3cqw; border-radius: 2.6cqw;
  background: var(--dp-color-panel); border: var(--dp-border-hairline) solid var(--dp-color-rule);
  box-shadow: 0 1px 2px rgb(22 25 31 / .05), 0 14px 30px -16px rgb(22 25 31 / .28);
  font-size: 2.4cqw; line-height: 1.3; color: var(--dp-color-ink-secondary);
}
.dp-fc-in { display: flex; flex-direction: column; gap: 1.8cqw; }
.dp-fc-1 { left: 4%;  top: 72%; z-index: 1; }
.dp-fc-2 { left: 23%; top: 49%; z-index: 2; }
.dp-fc-3 { left: 42%; top: 26%; z-index: 3; }
.dp-fc-4 { left: 61%; top: 3%;  z-index: 4; }
/* Numéro posé sur l'angle de la marche */
.dp-n {
  position: absolute; left: -2.6cqw; top: -2.6cqw; width: 4.6cqw; height: 4.6cqw; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dp-font-display); font-weight: 700; font-size: 2.4cqw;
  background: var(--dg); color: var(--dg-on);
  box-shadow: 0 0 0 .8cqw var(--dp-color-ground);
}
.dp-fc-4 .dp-n { background: linear-gradient(155deg, var(--dg), var(--dg-end)); }
.dp-fc-head {
  display: flex; align-items: center; gap: 1.6cqw; white-space: nowrap;
  font-family: var(--dp-font-display); font-weight: 700; font-size: 2.9cqw; letter-spacing: -.01em;
  color: var(--dp-color-ink);
}
.dp-fc-head > i { font-size: 3.4cqw; line-height: 1; color: var(--dg); }

.dp-sk { display: block; height: 1.2cqw; border-radius: 99px; background: var(--dp-color-rule); }
.dp-sk.lt { background: var(--dp-color-ground-muted); }
.dp-sk.w80 { width: 80%; } .dp-sk.w70 { width: 70%; }

/* 1. Théorie — compta : bilan en T */
.dp-taccount { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--dp-color-ink); }
.dp-taccount > div { display: flex; flex-direction: column; gap: 1cqw; padding: 1cqw 1.2cqw 0; }
.dp-taccount > div + div { border-left: 1.5px solid var(--dp-color-ink); }
.dp-taccount b { font-size: 2.2cqw; font-weight: 600; color: var(--dp-color-ink); }
/* éco. politique : courbes d'offre et de demande */
.dp-chart { display: block; width: 100%; height: 9.5cqw; }
.dp-chart .ax { fill: none; stroke: var(--dp-color-ink); stroke-width: 1.2; }
.dp-chart .de { fill: none; stroke: var(--dp-color-ink-secondary); stroke-width: 2; stroke-linecap: round; }
.dp-chart .of { fill: none; stroke: var(--dg); stroke-width: 2; stroke-linecap: round; }
.dp-chart .eq { fill: var(--dg); }
/* éco. d'entreprise : les 4 P */
.dp-p4 { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.dp-p4 span {
  padding: .9cqw 0; border-radius: 1.2cqw; text-align: center; font-size: 2.1cqw; font-weight: 600;
  color: var(--dp-color-ink); background: var(--dp-color-ground-muted);
}
.dp-p4 span:first-child { background: var(--dg-soft); }
/* droit : hiérarchie des normes */
.dp-norms { display: flex; flex-direction: column; align-items: flex-start; gap: .8cqw; }
.dp-norms span {
  padding: .8cqw 1.2cqw; border-radius: 1.1cqw; text-align: left; font-size: 2cqw; font-weight: 600; white-space: nowrap;
  color: var(--dp-color-ink); background: var(--dp-color-ground-muted);
}
.dp-norms span:nth-child(1) { width: 52%; background: var(--dg-soft); }
.dp-norms span:nth-child(2) { width: 76%; }
.dp-norms span:nth-child(3) { width: 100%; }

/* 2. Quiz : réponse choisie */
.dp-opt {
  display: flex; align-items: center; gap: 1.4cqw;
  padding: 1.2cqw 1.3cqw; border-radius: 1.5cqw; border: 1px solid var(--dg);
  font-size: 2.3cqw; color: var(--dp-color-ink); white-space: nowrap;
}
.dp-radio { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--dg); flex: none; }
.dp-opt i { margin-left: auto; font-size: 2.8cqw; line-height: 1; color: var(--dg); }

/* 3. Application — compta : écriture au journal */
.dp-entry {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 1.2cqw; align-items: center;
  padding: 1.2cqw 1.4cqw; border-radius: 1.5cqw; background: var(--dp-color-ground-muted);
  font-size: 2.3cqw; color: var(--dp-color-ink);
}
.dp-entry b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* éco. politique : formule du PIB */
.dp-calc {
  padding: 1.2cqw 1.4cqw; border-radius: 1.5cqw; background: var(--dp-color-ground-muted);
  text-align: center; font-size: 2.3cqw; font-weight: 700; color: var(--dp-color-ink); white-space: nowrap;
}
/* éco. d'entreprise : SWOT */
.dp-swot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.dp-swot b {
  padding: 1cqw 0; border-radius: 1.2cqw; text-align: center; font-family: var(--dp-font-display);
  font-size: 2.6cqw; color: var(--dp-color-ink); background: var(--dp-color-ground-muted);
}
.dp-swot b:nth-child(odd) { background: var(--dg-soft); }
/* droit : conditions de l'art. 41 CO */
.dp-conds { display: flex; gap: 1cqw; }
.dp-conds span {
  display: inline-flex; align-items: center; gap: 1cqw; padding: 1.1cqw 1.3cqw; border-radius: 1.5cqw;
  font-size: 2.1cqw; font-weight: 600; color: var(--dp-color-ink); background: var(--dp-color-ground-muted);
}
.dp-conds i { color: var(--dg); font-size: 2.5cqw; line-height: 1; }

/* 4. Flashcard empilée */
.dp-flash {
  position: relative; padding: 1.4cqw 1.6cqw; border-radius: 1.5cqw; text-align: center;
  font-weight: 600; font-size: 2.3cqw; color: var(--dp-color-ink);
  background: var(--dp-color-panel); border: 1px solid var(--dp-color-rule);
  box-shadow: .8cqw .8cqw 0 -1px var(--dp-color-ground-muted), .8cqw .8cqw 0 0 var(--dp-color-rule);
}

/* Bande de chiffres (calculés par le script de statistiques) */
.dp-hero { padding-bottom: clamp(32px, 4vw, 48px); }
/* Matières : enchaîne directement sous le hero (padding du hero suffit) */
#modules { padding-top: clamp(8px, 2vw, 24px); }
.dp-stats { padding: clamp(40px, 5vw, 64px) 0; }
.dp-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: var(--dp-border-hairline) solid var(--dp-color-rule);
  border-bottom: var(--dp-border-hairline) solid var(--dp-color-rule);
}
.dp-fact { padding: 24px 24px 24px 0; }
.dp-fact + .dp-fact { padding-left: 24px; border-left: var(--dp-border-hairline) solid var(--dp-color-rule); }
.dp-fact .dp-figure { font-size: clamp(28px, 3vw, 38px); }
.dp-fact div:last-child { margin-top: 4px; font-size: var(--dp-typography-small); color: var(--dp-color-ink-secondary); }

/* — Cartes matières — */
.dp-head { margin-bottom: 40px; }
.dp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-spacing-grid-gap); }
.dp-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: var(--dp-radius-panel);
  background: var(--dp-color-panel); border: var(--dp-border-hairline) solid var(--dp-color-rule);
  box-shadow: var(--dp-shadow); color: var(--dp-color-ink); text-decoration: none;
  transition: transform var(--dp-motion-interaction) var(--dp-motion-easing),
              border-color var(--dp-motion-interaction) var(--dp-motion-easing);
}
a.dp-card:hover { transform: translateY(-2px); border-color: var(--dp-color-accent); color: var(--dp-color-ink); text-decoration: none; }
.dp-card h3 { font-size: 20px; }
.dp-card p { font-size: var(--dp-typography-small); color: var(--dp-color-ink-secondary); }
.dp-icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgb(7 76 224 / .08); color: var(--dp-color-accent); font-size: 18px;
}
[data-bs-theme="dark"] .home .dp-icon { background: rgb(122 165 255 / .14); }
.dp-more { margin-top: auto; padding-top: 6px; font-size: var(--dp-typography-small); font-weight: 600; color: var(--dp-color-accent); }

/* — Parcours (fond gris pâle) — */
.dp-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-spacing-grid-gap);
}
.dp-step { position: relative; }
/* Trait reliant les numéros d'une étape à la suivante */
.dp-step:not(:last-child)::after {
  content: ''; position: absolute; top: 20px; left: 52px; right: calc(-1 * var(--dp-spacing-grid-gap) + 12px);
  height: 1px; background: var(--dp-color-rule);
}
.dp-step-num {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--dp-font-display); font-weight: 700; font-size: 17px;
  background: var(--dp-color-panel); border: 1px solid var(--dp-color-rule); color: var(--dp-color-ink);
}
.dp-step-verb {
  display: flex; align-items: center; gap: 8px; margin: 24px 0 8px;
  font-size: var(--dp-typography-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dp-color-accent);
}
.dp-step-verb i { font-size: 15px; color: var(--dp-color-accent); }
.dp-step h3 { font-size: 22px; margin-bottom: 10px; }
.dp-step p { font-size: var(--dp-typography-small); color: var(--dp-color-ink-secondary); }
.dp-benefits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dp-spacing-grid-gap);
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--dp-color-rule);
}
.dp-benefit { display: flex; gap: 12px; font-size: var(--dp-typography-small); color: var(--dp-color-ink-secondary); }
.dp-benefit i { font-size: 20px; line-height: 1.1; color: var(--dp-color-accent); }

/* — Trophées — */
.dp-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
/* Trophées : carte à gauche, texte à droite, centrés verticalement */
.dp-split-trophy { grid-template-columns: 1.2fr 1fr; align-items: center; }
.dp-trophy-card {
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px; border-radius: var(--dp-radius-panel);
  background: var(--dp-color-panel); border: var(--dp-border-hairline) solid var(--dp-color-rule);
  box-shadow: var(--dp-shadow);
}
.dp-trophy-top { display: flex; align-items: center; gap: 16px; }
.dp-trophy-ic {
  position: relative; width: 64px; height: 64px; border-radius: 14px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 30px;
  background: rgb(7 76 224 / .08); color: var(--dp-color-accent);
}
[data-bs-theme="dark"] .home .dp-trophy-ic { background: rgb(122 165 255 / .14); }
.dp-trophy-top .dp-figure { font-size: 34px; }
.dp-trophy-top small { display: block; font-size: var(--dp-typography-metadata); color: var(--dp-color-ink-secondary); }
.dp-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dp-badges li {
  padding: 10px 14px; border-radius: 8px;
  border: var(--dp-border-hairline) solid var(--dp-color-rule);
  font-size: var(--dp-typography-small); font-weight: 600;
}

/* — Podcasts (fond gris pâle) — */
.dp-pod-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 56px; align-items: center; }
.dp-pod-stat { font-size: var(--dp-typography-small); color: var(--dp-color-ink-secondary); }
.dp-pod-stat strong { color: var(--dp-color-ink); font-size: 17px; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.dp-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 8px 14px; border-radius: 8px; font-size: var(--dp-typography-small); font-weight: 500;
  color: var(--dp-color-ink); text-decoration: none;
  background: var(--dp-color-panel); border: 1px solid var(--dp-color-rule);
  transition: background-color var(--dp-motion-interaction) var(--dp-motion-easing),
              border-color var(--dp-motion-interaction) var(--dp-motion-easing);
}
.dp-chip i { color: var(--dp-color-accent); }
.dp-chip:hover { border-color: var(--dp-color-accent); color: var(--dp-color-ink); text-decoration: none; }
.dp-chip .pod-chip-n:not(:empty) {
  font-size: var(--dp-typography-label); font-weight: 600; padding: 1px 7px; border-radius: 99px;
  background: var(--dp-color-ground-muted); color: var(--dp-color-ink-secondary);
}
/* Illustration casque : disque blanc, ondes bleues pâles qui pulsent, barres de l'égaliseur qui
   dansent (animations dans stylesheet.css, coupées si l'utilisateur réduit les animations) */
.home .pod-visual .pod-disc { color: var(--dp-color-accent); --disc-bg: var(--dp-color-panel); box-shadow: 0 18px 40px -16px rgb(7 76 224 / .45); }
.home .pod-visual .pod-ring { border-color: rgb(7 76 224 / .3); }
.home .pod-visual .pod-eq i { background: rgb(7 76 224 / .35); transform-origin: bottom; }
[data-bs-theme="dark"] .home .pod-visual .pod-ring { border-color: rgb(122 165 255 / .35); }
[data-bs-theme="dark"] .home .pod-visual .pod-eq i { background: rgb(122 165 255 / .45); }

/* — Responsive — */
@media (max-width: 1050px) {
  .dp-wrap { padding: 0 24px; }
  .dp-hero-grid, .dp-pod-grid, .dp-split { gap: 36px; }
  .dp-cards { grid-template-columns: repeat(2, 1fr); }
  .home { --dp-spacing-grid-gap: 20px; }
}
@media (max-width: 760px) {
  .dp-wrap { padding: 0 16px; }
  .dp-hero-grid, .dp-pod-grid, .dp-split { grid-template-columns: 1fr; }
  .dp-diagram { max-width: 420px; margin-inline: auto; }
  .dp-facts { grid-template-columns: repeat(2, 1fr); }
  .dp-fact, .dp-fact + .dp-fact { padding: 20px 16px; border-left: 0; }
  .dp-fact:nth-child(even) { border-left: var(--dp-border-hairline) solid var(--dp-color-rule); }
  .dp-fact:nth-child(n+3) { border-top: var(--dp-border-hairline) solid var(--dp-color-rule); }
  .dp-steps { grid-template-columns: 1fr; gap: 32px; }
  .dp-step:not(:last-child)::after { display: none; }
  .dp-step-verb { margin-top: 16px; }
  .dp-benefits { grid-template-columns: 1fr; gap: 14px; }
  .dp-pod-visual { display: none; }
}
@media (max-width: 480px) {
  .dp-cards, .dp-benefits, .dp-badges { grid-template-columns: 1fr; }
  .dp-actions .dp-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .home :is(.dp-btn, .dp-card, .dp-chip) { transition: none; }
  .home :is(.dp-btn, a.dp-card):is(:hover, :active) { transform: none; }
}