/* DESIGN PILIER « Le Manuel » (validated mockup 7A, 01/10): /quel-canape-choisir/ as a long read in 10 chapters.
   Loaded after pilier.css on that page only (inc/design-pilier.php), every rule under body.dzp-manuel. Presentation
   only, on the markup of page-quel-canape-choisir.php; assets/js/design-pilier.js adds the rail, the progress bar,
   the step titles of the contents, the brand bars and the Pinterest buttons (the page reads fine without it). */
.dzp-manuel { --dzp-haut: 68px; --dzp-ease: cubic-bezier(0.2, 0.7, 0.1, 1); }
.dzp-manuel .pilier :focus-visible { outline: 3px solid var(--moutarde); outline-offset: 2px; }

/* ---------- Head: big serif title, cover image ---------- */
.dzp-manuel .pilier__tete .guide-q__une { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.dzp-manuel .pilier__tete .rubrique-simple { font: 650 var(--t-xs)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dzp-manuel .pilier__tete h1 { font: 300 clamp(3rem, 2rem + 4.4vw, 6rem)/0.92 var(--serif); letter-spacing: -0.035em; margin: 0.8rem 0 1.3rem; color: var(--anthracite); }
.dzp-manuel .pilier__tete h1 em { font-style: italic; color: var(--bleu); }
.dzp-manuel .pilier__tete .chapeau p { font: 400 clamp(1.08rem, 1rem + 0.3vw, 1.2rem)/1.55 var(--serif); color: var(--anthracite); max-width: 34rem; }
.dzp-manuel .guide-q__visuel { position: relative; margin: 0; }
.dzp-manuel .guide-q__visuel img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: 4px; }

/* Reading tools as two discreet pills (the script turns the titles into buttons; without it the lists stay open) */
.dzp-manuel .outils-lecture.dzp-pilules { display: flex; flex-wrap: wrap; gap: 0.5rem; position: relative; margin: 1.1rem 0 0.4rem; }
.dzp-manuel .dzp-pilules > div { position: static; }
.dzp-manuel .dzp-pilule { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--trait); background: #fff; border-radius: 999px; padding: 0.5rem 0.95rem; font: 600 0.85rem/1 var(--sans); color: var(--anthracite); cursor: pointer; }
.dzp-manuel .dzp-pilule[aria-expanded="true"] { background: var(--anthracite); color: #fff; border-color: var(--anthracite); }
.dzp-manuel .dzp-pilules .resume-ia__titre, .dzp-manuel .dzp-pilules .partage__titre { display: none; }
.dzp-manuel .dzp-pilules .resume-ia__liste, .dzp-manuel .dzp-pilules .partage__liste { position: absolute; z-index: 20; top: calc(100% + 0.4rem); left: 0; margin: 0; background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: 0.5rem; box-shadow: var(--ombre); min-width: 16rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem; }
.dzp-manuel .dzp-pilules [hidden] { display: none !important; }

/* ---------- Key figures: one ruled row of big serif numbers ---------- */
.dzp-manuel .pilier__chiffres { margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; border-top: 0; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.dzp-manuel .pilier__chiffres > div { border-block: 1px solid var(--anthracite); padding: 1.1rem 1rem 1.1rem 0; }
.dzp-manuel .pilier__chiffres > div + div { padding-left: 1rem; border-left: 1px solid var(--trait); }
.dzp-manuel .pilier__chiffres dd { font: 300 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--serif); letter-spacing: -0.03em; }

/* ---------- Contents: a magazine table of contents, two columns ---------- */
.dzp-manuel .pilier__sommaire { display: block; columns: 2; column-gap: 2.4rem; margin: clamp(2.2rem, 5vw, 3.6rem) 0 0; padding: 0; background: none; border: 0; }
.dzp-manuel .pilier__sommaire::before { content: "Sommaire"; display: block; column-span: all; margin-bottom: 0.8rem; font: 650 var(--t-xs)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dzp-manuel .pilier__sommaire a { break-inside: avoid; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 0 0.6rem; padding: 0.8rem 0; border: 0; border-top: 1px solid var(--trait); border-radius: 0; background: none; text-decoration: none; color: var(--anthracite); font: 650 var(--t-sm)/1.3 var(--sans); }
.dzp-manuel .pilier__sommaire a .num { grid-row: span 2; display: block; min-width: 0; height: auto; background: none; border-radius: 0; font: 300 2rem/1 var(--serif); color: var(--bleu); }
.dzp-manuel .pilier__sommaire a i { font: italic 400 0.95rem/1.35 var(--serif); color: var(--feutre); }
.dzp-manuel .pilier__sommaire a:hover { color: var(--bleu); }
.dzp-manuel .pilier__sommaire a[href="#le-test"] { grid-template-columns: 1fr; margin-top: 0.8rem; width: fit-content; padding: 0.75rem 1.2rem; border: 0; border-radius: 999px; background: var(--moutarde); font-weight: 650; }

/* ---------- The method: one chapter per step, giant outlined number, alternating photo ---------- */
.dzp-manuel .pilier__methode > .enveloppe { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
.dzp-manuel .pilier__methode .une-guides__entete { grid-column: 1 / -1; }
.dzp-manuel .pilier__methode .une-guides__entete h2 { font: 400 clamp(2rem, 1.4rem + 2.4vw, 3.2rem)/1.02 var(--serif); letter-spacing: -0.025em; }
.dzp-manuel .pilier__etapes { grid-column: 2; display: block; }
.dzp-manuel .pilier-etape { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; padding: clamp(2.6rem, 5vw, 3.6rem) 0; background: none; border: 0; border-top: 1px solid var(--trait); border-radius: 0; overflow: visible; scroll-margin-top: calc(var(--dzp-haut) + 1rem); }
.dzp-manuel .pilier-etape__corps { display: contents; }
.dzp-manuel .pilier-etape__corps > * { grid-column: 2; margin-block: 0 0.7rem; }
.dzp-manuel .pilier-etape__surtitre, .dzp-manuel .pilier-etape__titre { grid-column: 1 / -1; position: relative; z-index: 1; }
.dzp-manuel .pilier-etape__surtitre { padding-top: 2.4rem; color: var(--feutre); letter-spacing: 0.12em; }
.dzp-manuel .pilier-etape__num { position: absolute; z-index: -1; right: 0; top: -1rem; min-width: 0; height: auto; background: none; border-radius: 0; font: 300 clamp(6.5rem, 4rem + 7vw, 11rem)/0.8 var(--serif); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px var(--moutarde); pointer-events: none; }
.dzp-manuel .pilier-etape__titre { font: 400 clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem)/1.03 var(--serif); letter-spacing: -0.02em; max-width: 15em; margin: 0.4rem 0 1.4rem; padding-right: 5rem; }
.dzp-manuel .dzp-cadre, .dzp-manuel .pilier-etape > .pilier-etape__photo { grid-column: 1; grid-row: 3 / span 9; position: relative; display: block; align-self: start; }
.dzp-manuel .pilier-etape__photo { display: block; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: var(--platre-2); }
.dzp-manuel .pilier-etape--texte .pilier-etape__corps > * { grid-column: 1 / -1; }
.dzp-manuel .pilier-etape__texte { font: 400 clamp(1.05rem, 1rem + 0.2vw, 1.12rem)/1.62 var(--serif); color: var(--anthracite); margin-bottom: 1.2rem !important; }
.dzp-manuel .pilier-etape__texte::first-letter { float: left; font-size: 3.3em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--bleu); }
.dzp-manuel .pilier-etape__label { margin-top: 0.4rem !important; color: var(--feutre); letter-spacing: 0.1em; }
.dzp-manuel .pilier-etape__apprendre li::before { border-color: var(--bleu); }
.dzp-manuel .pilier-etape__phares a { background: #fff; }
.dzp-manuel .pilier-etape__phares .num { color: var(--bleu); }
.dzp-manuel .pilier-etape__lien { padding-top: 0.4rem; width: fit-content; border-bottom: 2px solid var(--moutarde); }
/* every other chapter: the photo on the right */
.dzp-manuel .pilier-etape:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.dzp-manuel .pilier-etape:nth-child(even) .dzp-cadre, .dzp-manuel .pilier-etape:nth-child(even) > .pilier-etape__photo { grid-column: 2; }
.dzp-manuel .pilier-etape:nth-child(even) .pilier-etape__corps > * { grid-column: 1; }
.dzp-manuel .pilier-etape:nth-child(even) .pilier-etape__surtitre, .dzp-manuel .pilier-etape:nth-child(even) .pilier-etape__titre { grid-column: 1 / -1; }

/* Rail of the steps (built by the script), sticky beside the chapters */
.dzp-rail { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--dzp-haut) + 1.5rem); align-self: start; padding-top: 1rem; }
.dzp-rail p { margin: 0 0 0.7rem; font: 650 var(--t-xs)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dzp-rail ol { list-style: none; margin: 0 0 1rem; padding: 0; border-left: 1px solid var(--trait); }
.dzp-rail a { display: flex; gap: 0.6rem; margin-left: -1px; padding: 0.32rem 0.8rem; border-left: 2px solid transparent; color: var(--feutre); text-decoration: none; font: 500 var(--t-sm)/1.3 var(--sans); transition: color 0.2s, border-color 0.2s; }
.dzp-rail a b { font: 650 0.75rem/1.7 var(--sans); }
.dzp-rail a[aria-current] { color: var(--anthracite); border-color: var(--moutarde); font-weight: 650; }
.dzp-rail .dzp-rail__test { display: inline-block; margin-left: 0.8rem; color: var(--anthracite); font: 650 var(--t-sm)/1.3 var(--sans); text-decoration: none; border-bottom: 2px solid var(--moutarde); }
.dzp-progres { display: none; }

/* Pinterest « Enregistrer » (plain link, no third-party script) */
.dzp-pin { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.35rem; background: #e60023; color: #fff; font: 700 0.8rem/1 var(--sans); padding: 0.5rem 0.8rem 0.5rem 0.55rem; border-radius: 999px; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.dzp-pin svg { width: 1.05rem; height: 1.05rem; fill: #fff; }
.dzp-pin:hover { background: #ad081b; color: #fff; }
@media (hover: hover) { .dzp-pin { opacity: 0; transition: opacity 0.25s; } .dzp-cadre:hover .dzp-pin, .guide-q__visuel:hover .dzp-pin, .dzp-pin:focus-visible { opacity: 1; } }

/* ---------- The quiz: a dark spread, answers as pills ---------- */
.dzp-manuel .quiz-selection { background: var(--anthracite); color: var(--blanc); padding-block: clamp(3rem, 7vw, 5rem); margin-block: 0; }
.dzp-manuel .quiz-selection .quiz { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(1.6rem, 4vw, 3rem); align-items: start; background: none; border: 0; box-shadow: none; padding: 0; color: inherit; }
.dzp-manuel .quiz-selection .quiz { grid-auto-flow: dense; }
.dzp-manuel .quiz-selection .quiz > * { grid-column: 2; min-width: 0; }
.dzp-manuel .quiz-selection .quiz > .dzp-quiz-tete { grid-column: 1; grid-row: 1 / span 8; position: sticky; top: calc(var(--dzp-haut) + 1.5rem); }
.dzp-manuel .quiz-selection .rubrique-simple { color: var(--moutarde); font: 650 var(--t-xs)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.dzp-manuel .quiz-selection .quiz__titre { font: 300 clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem)/1.02 var(--serif); letter-spacing: -0.03em; color: var(--blanc); margin: 0.5rem 0 1rem; }
.dzp-manuel .quiz-selection .quiz__aide { color: #c9c7c0; font-size: var(--t-sm); }
.dzp-manuel .quiz-selection .quiz__question { border: 0; border-bottom: 1px solid #3a3d42; margin: 0 0 1.3rem; padding: 0 0 1.3rem; background: none; min-width: 0; }
.dzp-manuel .quiz-selection legend { display: flex; gap: 0.8rem; align-items: baseline; padding: 0; margin-bottom: 0.9rem; font: 400 1.3rem/1.25 var(--serif); color: var(--blanc); }
.dzp-manuel .quiz-selection legend .num { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--moutarde); color: var(--anthracite); font: 650 0.8rem/1 var(--sans); }
.dzp-manuel .quiz-selection .quiz__reponses { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.dzp-manuel .quiz-selection .quiz__reponse { position: relative; flex: none; }
.dzp-manuel .quiz-selection .quiz__reponse input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dzp-manuel .quiz-selection .quiz__reponse span { display: block; padding: 0.55rem 1rem; border: 1px solid #4a4d52; border-radius: 999px; background: none; color: var(--blanc); font: 500 var(--t-sm)/1.2 var(--sans); transition: background 0.2s, border-color 0.2s; }
.dzp-manuel .quiz-selection .quiz__reponse:hover span { border-color: #9a9893; }
.dzp-manuel .quiz-selection .quiz__reponse input:checked + span { background: var(--moutarde); border-color: var(--moutarde); color: var(--anthracite); font-weight: 650; }
.dzp-manuel .quiz-selection .quiz__reponse input:focus-visible + span { outline: 3px solid var(--moutarde); outline-offset: 2px; }
.dzp-manuel .quiz-selection .quiz__resultat { background: #2f3236; border: 0; border-radius: 16px; padding: 1.4rem; color: var(--blanc); }
.dzp-manuel .quiz-selection .quiz__surtitre { color: var(--moutarde); }
.dzp-manuel .quiz-selection .quiz__choix { font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.1 var(--serif); color: var(--blanc); }
.dzp-manuel .quiz-selection .quiz__aussi { color: #c9c7c0; }
.dzp-manuel .quiz-selection .mini { background: #fff; color: var(--anthracite); border-radius: 12px; }
.dzp-manuel .quiz-selection .quiz__minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-block: 0.4rem 1.1rem; }
.dzp-manuel .quiz-selection .bouton { background: var(--moutarde); color: var(--anthracite); }

/* ---------- Best sofa for each need ---------- */
.dzp-manuel .pilier__meilleurs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.2rem 1.6rem; }
.dzp-manuel .pilier-meilleur { grid-column: span 2; }
.dzp-manuel .pilier__meilleurs:has(> :nth-child(5):last-child) > :nth-child(-n+2),
.dzp-manuel .pilier__meilleurs:has(> :nth-child(4):last-child) > *,
.dzp-manuel .pilier__meilleurs:has(> :nth-child(2):last-child) > * { grid-column: span 3; }
.dzp-manuel .pilier-meilleur__photo { border-radius: 4px; background: var(--platre); }
.dzp-manuel .pilier-meilleur__photo img { object-fit: contain; transition: transform 0.8s var(--dzp-ease); }
.dzp-manuel .pilier-meilleur:hover .pilier-meilleur__photo img { transform: scale(1.04); }
.dzp-manuel .pilier-meilleur__besoin { color: var(--feutre); letter-spacing: 0.12em; }
.dzp-manuel .pilier-meilleur__nom { font: 500 1.35rem/1.2 var(--serif); }

/* Section heads in the serif of the magazine */
.dzp-manuel .pilier .rubrique h2, .dzp-manuel .pilier__duo h2, .dzp-manuel .pilier .faq h2, .dzp-manuel .famille h2 { font: 400 clamp(1.9rem, 1.3rem + 2vw, 3rem)/1.04 var(--serif); letter-spacing: -0.02em; text-transform: none; }

/* ---------- Situations: a ruled two-column index ---------- */
.dzp-manuel .situations { background: var(--platre); padding-block: clamp(3rem, 6vw, 4.5rem); margin-block: 0; }
.dzp-manuel .situations__liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; gap: 0 2.5rem; border-top: 1px solid var(--anthracite); }
.dzp-manuel .situations__liste li { border: 0; }
.dzp-manuel .situations__liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; padding: 0.9rem 0; border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; background: none; box-shadow: none; text-decoration: none; }
.dzp-manuel .situations__nom { font: 400 1.3rem/1.2 var(--serif); color: var(--anthracite); }
.dzp-manuel .situations__filtre { grid-row: 2; font: 400 var(--t-sm)/1.3 var(--sans); color: var(--feutre); }
.dzp-manuel .situations__n { grid-row: 1 / span 2; align-self: center; font: 650 var(--t-sm)/1 var(--sans); color: var(--anthracite); }
.dzp-manuel .situations__liste a:hover .situations__nom { color: var(--bleu); }

/* ---------- Brands (bars drawn by the script from the numbers) and comparisons ---------- */
.dzp-manuel .pilier__duo { align-items: center; }
.dzp-manuel .pilier__marques { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; border-top: 0; }
.dzp-manuel .pilier__marques li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 0.8rem; padding: 0.35rem 0; border: 0; }
.dzp-manuel .pilier__marques .num { text-align: right; color: var(--anthracite); font-weight: 650; }
.dzp-barre { display: block; height: 6px; border-radius: 3px; background: var(--platre); overflow: hidden; }
.dzp-barre i { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--bleu); }
.dzp-manuel .pilier__comparatifs { background: var(--platre); color: var(--anthracite); border-radius: 6px; padding: 1.4rem 1.4rem 1.6rem; }
.dzp-manuel .pilier__comparatifs > :not(.pilier__comparatifs-photo) { margin: 0; }
.dzp-manuel .pilier__comparatifs-photo { border-radius: 4px; }
.dzp-manuel .pilier__comparatifs strong { font: 400 2rem/1.05 var(--serif); color: var(--anthracite); }
.dzp-manuel .pilier__comparatifs > span:not([class]) { color: var(--feutre); }
.dzp-manuel .pilier__comparatifs .une-guides__surtitre { color: var(--feutre); }
.dzp-manuel .pilier__comparatifs .lien-fleche { width: fit-content; margin-top: 0.4rem; padding: 0.8rem 1.3rem; border-radius: 999px; background: var(--anthracite); color: #fff; }

/* ---------- Mag', FAQ, families ---------- */
.dzp-manuel .guide-mag { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dzp-manuel .guide-mag__article img { border-radius: 4px; }
.dzp-manuel .guide-mag__article span { font: 500 1.05rem/1.3 var(--serif); }
.dzp-manuel .faq.lecture { max-width: var(--col); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 3rem; align-items: start; }
.dzp-manuel .faq.lecture > h2 { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: calc(var(--dzp-haut) + 1.5rem); }
.dzp-manuel .faq.lecture > details { grid-column: 2; border-top: 1px solid var(--trait); padding: 1rem 0; }
.dzp-manuel .faq.lecture > details:last-of-type { border-bottom: 1px solid var(--trait); }
.dzp-manuel .faq.lecture summary { font: 500 1.15rem/1.35 var(--serif); }
.dzp-manuel .famille { background: var(--platre); padding-block: clamp(3rem, 6vw, 4rem); margin-block: 0; }
.dzp-manuel .famille__sections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2.2rem; }
.dzp-manuel .famille__titre-section a { font: 500 1.08rem/1.3 var(--serif); text-decoration: none; }

/* ---------- Tablet and phone: designed for the thumb ---------- */
@media (max-width: 1000px) {
  .dzp-manuel .pilier__methode > .enveloppe { display: block; }
  .dzp-rail { display: none; }
  .dzp-progres { display: block; position: sticky; top: var(--dzp-haut); z-index: 30; background: rgba(250, 250, 248, 0.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--trait); }
  .dzp-progres[hidden] { display: none; }
  .dzp-progres i { display: block; height: 3px; width: var(--p, 0%); background: var(--moutarde); transition: width 0.2s; }
  .dzp-progres span { display: block; padding: 0.45rem var(--gutter); font: 650 0.76rem/1.2 var(--sans); letter-spacing: 0.04em; color: var(--anthracite); }
  .dzp-manuel .pilier__meilleurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dzp-manuel .pilier-meilleur, .dzp-manuel .pilier__meilleurs > * { grid-column: auto !important; }
  .dzp-manuel .quiz-selection .quiz__minis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dzp-manuel .pilier__tete .guide-q__une { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .dzp-manuel .guide-q__visuel { order: -1; margin-inline: calc(-1 * var(--gutter)); }
  .dzp-manuel .guide-q__visuel img { border-radius: 0; aspect-ratio: 4 / 3; }
  .dzp-manuel .pilier__tete h1 { font-size: clamp(2.9rem, 13vw, 4rem); margin: 0.5rem 0 1rem; }
  .dzp-manuel .pilier__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dzp-manuel .pilier__chiffres > div { border-block: 0; border-top: 1px solid var(--trait); padding: 1rem 0.8rem 1rem 0; border-left: 0 !important; }
  .dzp-manuel .pilier__chiffres > div:nth-child(even) { padding-left: 0.9rem; border-left: 1px solid var(--trait) !important; }
  .dzp-manuel .pilier__chiffres > div:first-child { grid-column: 1 / -1; border-top: 1px solid var(--anthracite); }
  .dzp-manuel .pilier__chiffres > div:first-child dd { font-size: 3.6rem; }
  .dzp-manuel .pilier__chiffres > div:nth-child(even) { border-left: 0 !important; padding-left: 0; }
  .dzp-manuel .pilier__chiffres > div:nth-child(odd):not(:first-child) { border-left: 1px solid var(--trait) !important; padding-left: 0.9rem; }
  .dzp-manuel .pilier__chiffres { border-bottom: 1px solid var(--anthracite); }
  .dzp-manuel .pilier__sommaire { columns: 1; }
  .dzp-manuel .pilier-etape, .dzp-manuel .pilier-etape:nth-child(even) { display: flex; flex-direction: column; align-items: stretch; padding: 2.6rem 0 2rem; }
  .dzp-manuel .pilier-etape__surtitre { order: 1; } .dzp-manuel .pilier-etape__titre { order: 2; font-size: 2.05rem; padding-right: 4.5rem; margin-bottom: 1.2rem; }
  .dzp-manuel .dzp-cadre, .dzp-manuel .pilier-etape > .pilier-etape__photo { order: 3; margin: 0 calc(-1 * var(--gutter)) 1.2rem; }
  .dzp-manuel .pilier-etape__photo { aspect-ratio: 4 / 3; border-radius: 0; }
  .dzp-manuel .pilier-etape__corps > * { order: 4; }
  .dzp-manuel .pilier-etape__num { font-size: 7.5rem; top: -0.3rem; }
  .dzp-manuel .pilier-etape__label, .dzp-manuel .pilier-etape__apprendre, .dzp-manuel .pilier-etape__phares, .dzp-manuel .pilier-etape__lien, .dzp-manuel .pilier-etape__compte { margin-inline: 0; padding-left: 0.9rem !important; border-left: 2px solid var(--moutarde); margin-block: 0 !important; padding-block: 0.35rem !important; }
  .dzp-manuel .pilier-etape__lien { border-bottom: 0; text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .dzp-manuel .pilier-etape__phares { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)) !important; padding-right: var(--gutter); }
  .dzp-manuel .pilier-etape__phares a { white-space: nowrap; }
  .dzp-manuel .quiz-selection .quiz { display: block; }
  .dzp-manuel .quiz-selection .dzp-quiz-tete { position: static; margin-bottom: 1.4rem; }
  .dzp-manuel .quiz-selection .quiz__reponses { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .dzp-manuel .quiz-selection .quiz__reponse span { white-space: nowrap; }
  .dzp-manuel .quiz-selection .quiz__resultat { position: sticky; bottom: 0.6rem; }
  .dzp-manuel .quiz-selection .quiz__minis .mini:nth-child(n+2) { display: none; }
  .dzp-manuel .pilier__meilleurs, .dzp-manuel .guide-mag { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .dzp-manuel .guide-mag { grid-auto-columns: 70%; }
  .dzp-manuel .pilier-meilleur, .dzp-manuel .guide-mag__article { display: flex; flex-direction: column; scroll-snap-align: start; padding-top: 0; border-top: 0; }
  .dzp-manuel .pilier-meilleur__photo { margin-bottom: 0.4rem; }
  .dzp-manuel .situations__liste { grid-template-columns: minmax(0, 1fr); }
  .dzp-manuel .pilier__marques li { grid-template-columns: 7.5rem minmax(0, 1fr) 2rem; }
  .dzp-manuel .faq.lecture { display: block; }
  .dzp-manuel .faq.lecture > h2 { position: static; margin-bottom: 1rem; }
  .dzp-manuel .famille__sections { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dzp-manuel .pilier-meilleur__photo img, .dzp-rail a, .dzp-progres i { transition: none; }
}