/* ═══════════════════════════════════════════════════════════════
   bw-parcours.css, la page parcours.html : le chemin et ses huit escales.
   Palette de bw-premium.css (--bwp-*), un seul rayon (2 px), aucune ombre.
   Les chiffres en Inter, jamais en Playfair (règle de progression.html).
   Le mouvement : des fondus, le tracé qui se dessine, des visuels qui
   s'animent à l'arrivée, un lieu de la carte qui s'allume ; rien du tout
   sous prefers-reduced-motion ou bw-motion-off.
   ═══════════════════════════════════════════════════════════════ */
#pc{--pc-amp:110px}
#pc .pc-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* l'entrée, puis le chemin juste dessous : la règle premium des sections
   (128 px) les éloignerait d'un écran entier */
html.bw-premium #pc > section.pc-entree{padding-bottom:40px}
html.bw-premium #pc > section.pc-chemin-zone{padding-top:24px;padding-bottom:96px}
#pc .pc-depart{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:32px 0 0}
#pc .pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;background:var(--bwp-encre);color:#fff;border:1px solid var(--bwp-encre);border-radius:2px;font:600 1rem/1.2 'Inter',system-ui,sans-serif;text-decoration:none;cursor:pointer}
#pc .pc-btn:hover{background:var(--bwp-brun);border-color:var(--bwp-brun)}
#pc .pc-btn small{font:500 .8125rem/1 'Inter',system-ui,sans-serif;color:var(--bwp-trait)}
#pc .pc-compte{font-size:.9375rem;color:var(--bwp-brun)}

/* le chemin : un serpentin sur grand écran, droit sur téléphone */
/* la carte (phase 7) : un fond de carte pointillé, la route, des lieux */
#pc .pc-chemin{position:relative;max-width:900px;margin:0 auto;padding:24px 0;background-image:radial-gradient(circle,var(--bwp-trait) 1.2px,transparent 1.4px);background-size:22px 22px;background-position:center top}
#pc .pc-trace{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
#pc .pc-seg{fill:none;stroke-linecap:round}
#pc .pc-seg-fait{stroke:var(--bwp-dore);stroke-width:3.5}
#pc .pc-seg-afaire{stroke:var(--bwp-contour);stroke-width:2;stroke-dasharray:.1 9}
#pc .pc-chap{position:relative;z-index:1;width:max-content;max-width:100%;margin:32px auto 8px;padding:10px 24px;background:var(--bwp-beige);text-align:center}
#pc .pc-trace + .pc-chap{margin-top:0}
#pc .pc-chap-n{margin:0 0 8px;font:500 .6875rem/1 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bwp-brun)}
#pc .pc-chap-t{margin:0;font:600 clamp(1.5rem,1.2rem + 1vw,2rem)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.01em;color:var(--bwp-encre)}
#pc .pc-etapes{list-style:none;margin:0;padding:0}
#pc .pc-etape{position:relative;height:120px}
#pc .pc-etape > a{position:absolute;top:24px;left:calc(50% + var(--x) * var(--pc-amp) - 36px);display:flex;align-items:center;gap:20px;color:var(--bwp-encre);text-decoration:none}
#pc .pc-gauche > a{left:auto;right:calc(50% - var(--x) * var(--pc-amp) - 36px);flex-direction:row-reverse;text-align:right}
#pc .pc-case{flex:none;position:relative;z-index:1;width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--bwp-blanc);border:1px solid var(--bwp-contour);border-radius:2px;color:var(--bwp-brun)}
#pc .pc-case .pc-ic{font-size:32px}
#pc .pc-n{position:absolute;top:-9px;left:-9px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;background:var(--bwp-beige);border:1px solid var(--bwp-contour);border-radius:2px;font:600 .75rem/1 'Inter',system-ui,sans-serif;color:var(--bwp-encre)}
#pc .pc-coche,#pc .pc-drapeau{width:28px;height:28px;fill:none;stroke-linecap:round;stroke-linejoin:round}
#pc .pc-coche{display:none;stroke:#fff;stroke-width:2.6}
#pc .pc-case .pc-coche{position:absolute;top:-9px;left:-9px;box-sizing:border-box;width:22px;height:22px;padding:3px;background:var(--bwp-encre);border-radius:2px}
#pc .pc-drapeau{stroke:var(--bwp-encre);stroke-width:1.9}
#pc .pc-fait .pc-case{background:var(--bwp-dore);border-color:var(--bwp-dore);color:#fff}
#pc .pc-fait .pc-n{display:none}
#pc .pc-fait .pc-coche{display:block}
#pc .pc-ici .pc-case{border:2.5px solid var(--bwp-dore);color:var(--bwp-encre)}
#pc .pc-ici .pc-case::after{content:"";position:absolute;inset:-8px;border:1.5px solid var(--bwp-dore);border-radius:2px;opacity:0}
@media (prefers-reduced-motion:no-preference){
  html:not(.bw-motion-off) #pc .pc-ici .pc-case::after{animation:pc-ici 2.2s ease-out 2}
  html:not(.bw-motion-off) #pc .pc-allume .pc-case{animation:pc-allume .9s .2s ease-out both}
  html:not(.bw-motion-off) #pc .pc-carte-fin.pc-anime .pc-fait .pc-case{animation:pc-allume .6s ease-out both;animation-delay:calc(var(--k,0) * 110ms + .15s)}
}
@keyframes pc-ici{0%{opacity:.7;transform:scale(.92)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0}}
@keyframes pc-allume{0%{background-color:var(--bwp-blanc);color:var(--bwp-brun);transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:none}}
#pc .pc-arrive .pc-case{background:var(--bwp-sable)}
#pc .pc-arrive.pc-fait .pc-case{background:var(--bwp-dore);border-color:var(--bwp-dore)}
#pc .pc-arrive.pc-fait .pc-drapeau{stroke:#fff}
#pc .pc-txt{display:flex;flex-direction:column;gap:4px;width:max-content;max-width:15em}
#pc .pc-txt b{font:700 1.1875rem/1.25 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.01em}
#pc .pc-etape > a:hover .pc-txt b{text-decoration:underline;text-underline-offset:3px}
#pc .pc-meta{font-size:.875rem;color:var(--bwp-brun)}
#pc .pc-statut:not(:empty)::after{content:" · ";color:var(--bwp-brun);font-weight:400}
#pc .pc-ici .pc-statut{color:var(--bwp-dore-f);font-weight:600}
#pc .pc-arrive{height:132px}
#pc .pc-bas{margin:40px 0 0;font-size:.9375rem}
#pc .pc-effacer{padding:0;background:none;border:0;font:inherit;color:var(--bwp-brun);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#pc .pc-effacer[hidden]{display:none}

/* une escale : l'échange à gauche, le visuel à droite (Tristan, 18 oct. :
   « seulement du texte et des questions à gauche ») ; au téléphone, le
   visuel passe entre le titre et l'échange */
#pc .pc-niveau{padding:48px 0 96px}
#pc .pc-arrivee .pc-cadre{max-width:820px}
#pc .pc-tete,#pc .pc-ecrans{max-width:62ch}
#pc .pc-visuel{margin:0 0 32px;padding:32px;background:var(--bwp-sable);border-radius:2px;color:var(--bwp-encre)}
@media (min-width:960px){
  #pc .pc-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tete vis" "ecr vis";grid-template-rows:auto 1fr;column-gap:72px;align-items:start}
  #pc .pc-tete{grid-area:tete}
  #pc .pc-ecrans{grid-area:ecr}
  #pc .pc-visuel{grid-area:vis;position:sticky;top:calc(var(--pc-haut,0px) + 84px);margin:0}
}
/* la barre des huit escales (Tristan, 18 oct. : « on n'a aucune idée d'où on
   est rendu ») : collée sous l'en-tête du site (--pc-haut, posée par le
   script) ; les faites pleines, celle d'ici dorée à mesure de ses écrans */
#pc .pc-barre{position:sticky;top:var(--pc-haut,0px);z-index:5;display:flex;align-items:center;gap:16px;margin:-8px 0 32px;padding:8px 0;background:var(--bwp-beige);font-size:.9375rem}
#pc .pc-retour{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--bwp-brun);text-decoration:none;white-space:nowrap}
#pc .pc-retour:hover{color:var(--bwp-encre)}
#pc .pc-escales{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
#pc .pc-e{position:relative;flex:1;min-width:0;height:44px;padding:0;border:0;background:none;cursor:pointer}
#pc .pc-e::before,#pc .pc-e i{content:"";position:absolute;left:0;top:50%;height:6px;margin-top:-3px;border-radius:2px}
#pc .pc-e::before{right:0;background:var(--bwp-trait);transition:background-color .25s ease}
#pc .pc-e i{display:block;width:0;background:var(--bwp-dore);transition:width .35s ease}
#pc .pc-e:hover::before{background:var(--bwp-contour)}
#pc .pc-e-fait::before,#pc .pc-e-fait:hover::before{background:var(--bwp-encre)}
#pc .pc-e-ici::before{background:color-mix(in srgb,var(--bwp-dore) 25%,var(--bwp-trait))}
#pc .pc-e-n{flex:none;margin-left:6px;font:600 .8125rem/1 'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--bwp-encre);white-space:nowrap}
html.bw-motion-off #pc .pc-e i,html.bw-motion-off #pc .pc-e::before{transition:none}
@media (prefers-reduced-motion:reduce){ #pc .pc-e i,#pc .pc-e::before{transition:none} }
#pc .pc-passer{padding:10px 0;background:none;border:0;font:inherit;color:var(--bwp-brun);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#pc .pc-pos{margin:0 0 12px;font:500 .6875rem/1 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bwp-brun)}
#pc .pc-niveau h2{margin:0 0 36px;font:600 clamp(2rem,1.5rem + 2vw,2.75rem)/1.1 'Playfair Display',Georgia,serif;letter-spacing:-.012em;color:var(--bwp-encre)}
#pc .pc-niveau h2:focus,#pc .pc-ecran:focus{outline:none}
#pc .pc-ecran{margin:0 0 32px}
#pc .pc-idee{margin:0;font:600 clamp(1.5rem,1.2rem + 1.2vw,2rem)/1.2 'Playfair Display',Georgia,serif;letter-spacing:-.01em;color:var(--bwp-encre)}
#pc .pc-q fieldset{min-width:0;margin:0;padding:0;border:0}
#pc .pc-q legend,#pc .pc-consigne{margin:0 0 10px;padding:0;font-size:.9375rem;color:var(--bwp-brun)}
#pc .pc-enonce{margin:0 0 20px;font:600 1.5rem/1.25 'Playfair Display',Georgia,serif;color:var(--bwp-encre)}
#pc .pc-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
#pc .pc-choix label{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;background:var(--bwp-blanc);border:1px solid var(--bwp-contour);border-radius:2px;font-weight:600;cursor:pointer}
#pc .pc-choix input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--bwp-encre)}
#pc .pc-choix label:has(input:checked){padding:11px 15px;border:2px solid var(--bwp-encre)}
#pc .pc-explique{margin:16px 0 0;color:var(--bwp-brun)}
#pc .pc-retour-q{margin:20px 0 0;padding:4px 0 4px 16px;border-left:2px solid var(--bwp-dore);color:var(--bwp-brun)}
#pc .pc-retour-q:empty{display:none}
#pc .pc-retour-q b{display:block;margin:0 0 4px;font:700 1.0625rem/1.3 'Bricolage Grotesque',system-ui,sans-serif;color:var(--bwp-encre)}
#pc .pc-oignon,#pc .pc-liste,#pc .pc-idees{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#pc .pc-oignon li{display:flex;align-items:baseline;gap:16px;padding:16px 20px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px;cursor:pointer}
#pc .pc-oignon li:nth-child(2){margin-left:24px}
#pc .pc-oignon li:nth-child(3){margin-left:48px}
#pc .pc-couche-n{flex:none;width:10em;white-space:nowrap;font:500 .6875rem/1 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bwp-brun)}
#pc .pc-oignon b,#pc .pc-mot{font:700 1.0625rem/1.3 'Bricolage Grotesque',system-ui,sans-serif}
#pc .pc-liste{counter-reset:pc-o}
#pc .pc-liste li{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 20px;background:var(--bwp-blanc);border:1px solid var(--bwp-contour);border-radius:2px;counter-increment:pc-o}
#pc .pc-liste li::before{content:counter(pc-o);width:1.2em;font:600 .875rem/1 'Inter',system-ui,sans-serif;color:var(--bwp-brun)}
#pc .pc-mot{flex:1}
#pc .pc-fleche{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px;font:600 1rem/1 'Inter',system-ui,sans-serif;color:var(--bwp-encre);cursor:pointer}
#pc .pc-fleche:disabled{color:var(--bwp-trait);cursor:default}
#pc .pc-idees{margin-top:16px}
#pc .pc-fin{padding:28px 0 0;border-top:1px solid var(--bwp-trait)}
#pc .pc-acquis{margin:0 0 12px;font:700 1.25rem/1.3 'Bricolage Grotesque',system-ui,sans-serif;color:var(--bwp-encre)}
#pc .pc-vrai{color:var(--bwp-encre);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bwp-contour)}
#pc .pc-vrai:hover{text-decoration-color:var(--bwp-encre)}
/* « Voir en vrai » : un bouton au trait, sous l'acquis ; « Escale suivante » reste le bouton plein */
#pc .pc-vrai[data-visite]{display:inline-flex;align-items:center;gap:6px;min-height:48px;margin:4px 0 0;padding:10px 20px;background:var(--bwp-blanc);border:1px solid var(--bwp-encre);border-radius:2px;text-decoration:none;line-height:1.3;transition:background-color .25s ease}
#pc .pc-vrai[data-visite]:hover{background:var(--bwp-sable)}
html.bw-motion-off #pc .pc-vrai[data-visite]{transition:none}
#pc .pc-pied{margin:40px 0 0}
#pc .pc-suite{min-width:12em}
/* l'arrivée : la carte complète, l'image, trois suites */
#pc .pc-carte-fin{list-style:none;margin:32px 0 0;padding:28px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 16px;background-image:radial-gradient(circle,var(--bwp-trait) 1.2px,transparent 1.4px);background-size:22px 22px}
#pc .pc-reste[hidden],#pc .pc-fini[hidden]{display:none}
#pc .pc-carte-fin li{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:none;margin:0;text-align:center}
#pc .pc-carte-nom{font:600 .875rem/1.3 'Inter',system-ui,sans-serif;color:var(--bwp-encre)}
#pc .pc-carte-fin .pc-fait .pc-coche{display:block}
#pc .pc-carte-compte{margin:24px 0 0;color:var(--bwp-brun)}
#pc:not(.pc-js) #pc-carte-image{display:none}
#pc .pc-carte-compte:empty{display:none}
#pc .pc-arrivee .pc-boutons{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:24px 0 0}
#pc .pc-btn-trait{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;background:var(--bwp-blanc);border:1px solid var(--bwp-encre);border-radius:2px;color:var(--bwp-encre);font:600 1rem/1 'Inter',system-ui,sans-serif;cursor:pointer;transition:background-color .25s ease}
#pc .pc-btn-trait:hover{background:var(--bwp-sable)}
#pc .pc-carte-img{display:block;width:100%;max-width:360px;height:auto;margin:24px 0 0;border:1px solid var(--bwp-trait);border-radius:2px}
#pc .pc-carte-note{margin:12px 0 0;font-size:.8125rem;color:var(--bwp-brun)}
#pc .pc-suites-t{margin:48px 0 0;font:500 .75rem/1.4 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bwp-dore-f)}
#pc .pc-suites3{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#pc .pc-suites3 li{max-width:none;margin:0}
#pc .pc-suites3 a{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;height:100%;padding:16px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px;color:var(--bwp-encre);text-decoration:none;transition:border-color .25s ease}
#pc .pc-suites3 a:hover{border-color:var(--bwp-encre)}
#pc .pc-suites3 .pc-v-ic{grid-row:span 2}
#pc .pc-suites3 b{font:700 1.0625rem/1.25 'Bricolage Grotesque',system-ui,sans-serif}
#pc .pc-suites3 a > span:last-child{font-size:.875rem;color:var(--bwp-brun)}

/* ── les visuels : la palette, des cartes blanches sur le sable ── */
#pc .pc-ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#pc .pc-visuel ul,#pc .pc-visuel ol{list-style:none;margin:0;padding:0}
#pc .pc-visuel li{margin:0;max-width:none}
#pc .pc-v-k{margin:0 0 10px;font:500 .6875rem/1.3 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bwp-dore-f)}
#pc .pc-v-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:2px;background:var(--bwp-beige);color:var(--bwp-encre);font-size:22px;transition:background-color .25s ease,color .25s ease}
#pc .pc-on .pc-v-ic,#pc .pc-choisi .pc-v-ic{background:var(--bwp-dore);color:#fff}

/* 1. les trois portes */
#pc .pc-v-portes{display:grid;gap:12px}
#pc .pc-v-portes li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:center;padding:16px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px;transition:border-color .25s ease}
#pc .pc-v-portes .pc-v-ic{grid-row:span 2}
#pc .pc-v-portes b{font:700 1.125rem/1.25 'Bricolage Grotesque',system-ui,sans-serif}
#pc .pc-v-portes li > span:last-child{font-size:.9375rem;color:var(--bwp-brun)}
#pc .pc-v-portes li.pc-on{border-color:var(--bwp-encre)}

/* 2. la carte des thèmes, en deux mondes */
#pc .pc-v-univers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
#pc .pc-v-univers ul{display:grid;gap:8px}
#pc .pc-v-univers li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 12px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
#pc .pc-v-univers .pc-v-ic{grid-row:span 2;width:36px;height:36px;font-size:18px}
#pc .pc-v-univers b{font:600 .9375rem/1.25 'Inter',system-ui,sans-serif}
#pc .pc-v-univers small{font-size:.8125rem;color:var(--bwp-brun)}
#pc .pc-v-univers li.pc-on,#pc .pc-v-univers li.pc-choisi{background:var(--bwp-encre);border-color:var(--bwp-encre);color:#fff}
#pc .pc-v-univers li.pc-on small,#pc .pc-v-univers li.pc-choisi small{color:var(--bwp-trait)}
#pc .pc-v-total{margin:20px 0 0;font:500 .875rem/1.4 'Inter',system-ui,sans-serif;color:var(--bwp-brun)}

/* 3 et 4. la page d'un thème, en miniature */
#pc .pc-v-titre{margin:0 0 12px;font:600 1.75rem/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.01em}
#pc .pc-v-onglets{display:flex;gap:24px;margin:0 0 20px;border-bottom:1px solid var(--bwp-contour);font:600 .875rem/1 'Inter',system-ui,sans-serif;color:var(--bwp-brun)}
#pc .pc-v-onglets span{padding:0 0 10px}
#pc .pc-v-onglets .pc-on{margin-bottom:-1px;border-bottom:2px solid var(--bwp-encre);color:var(--bwp-encre)}
#pc .pc-v-bloc{margin:0 0 12px;padding:16px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px;transition:opacity .35s ease,border-color .35s ease}
#pc .pc-v-encours .pc-v-bloc{opacity:.4}
#pc .pc-v-encours .pc-v-bloc.pc-on{opacity:1;border-color:var(--bwp-dore)}
#pc .pc-v-bloc:last-child{margin-bottom:0}
#pc .pc-v-bloc i{display:block;height:8px;margin:8px 0 0;border-radius:2px;background:var(--bwp-trait)}
#pc .pc-v-bloc i.pc-v-court{width:60%}
#pc .pc-v-chrono{display:flex;align-items:baseline;gap:12px;margin:0;color:var(--bwp-brun);font-size:.875rem}
#pc .pc-v-chrono b{font:600 2rem/1 'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--bwp-encre)}
/* les vrais contenus du thème (phase 4) : l'essentiel, le compteur, l'idée reçue */
#pc .pc-v-txt{margin:0;font-size:.875rem;line-height:1.45;color:var(--bwp-encre)}
#pc .pc-v-rempli i{display:none}
#pc .pc-v-compteur{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:.875rem;line-height:1.35;color:var(--bwp-encre)}
#pc .pc-v-compteur b{font:600 1.75rem/1.1 'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
#pc .pc-v-src{margin:6px 0 0;font-size:.75rem;color:var(--bwp-brun)}
#pc .pc-v-compteur[hidden],#pc .pc-v-src[hidden],#pc .pc-v-chrono[hidden]{display:none}
#pc .pc-v-ligne{display:flex;align-items:baseline;gap:10px;margin:8px 0 0}
#pc .pc-v-k + .pc-v-ligne{margin-top:0}
#pc .pc-v-pill{flex:none;padding:4px 8px;border-radius:2px;font:600 .75rem/1 'Inter',system-ui,sans-serif;background:var(--bwp-beige);color:var(--bwp-brun);text-decoration:line-through}
#pc .pc-v-pill.pc-v-vrai{background:var(--bwp-dore);color:#fff;text-decoration:none}
/* la carte : les enjeux de chaque thème, sous son nom */
#pc .pc-v-enj{grid-column:2;display:block;margin:4px 0 0;font-size:.75rem;line-height:1.4;color:var(--bwp-brun)}
#pc .pc-v-univers li.pc-on .pc-v-enj,#pc .pc-v-univers li.pc-choisi .pc-v-enj{color:var(--bwp-trait)}
/* « Le savais-tu ? », « Ce qui surprend » : une carte, un grand chiffre */
#pc .pc-savoir{padding:24px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-left:3px solid var(--bwp-dore);border-radius:2px}
#pc .pc-savoir-k{margin:0 0 12px;font:500 .6875rem/1.3 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bwp-dore-f)}
#pc .pc-savoir-v{margin:0 0 6px;font:600 clamp(2rem,1.6rem + 1.6vw,2.75rem)/1.05 'Inter',system-ui,sans-serif;letter-spacing:-.02em;color:var(--bwp-encre)}
#pc .pc-savoir-t{margin:0;font:700 1.125rem/1.35 'Bricolage Grotesque',system-ui,sans-serif;color:var(--bwp-encre)}
#pc .pc-savoir-x{margin:8px 0 0;line-height:1.55;color:var(--bwp-brun)}
#pc .pc-savoir-s{margin:10px 0 0;font-size:.8125rem;color:var(--bwp-brun)}
#pc .pc-savoir-autre{min-height:44px;margin:12px 0 0;padding:0;border:0;background:none;color:var(--bwp-encre);font:600 .875rem/1.2 'Inter',system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bwp-contour);cursor:pointer}
#pc .pc-savoir-autre:hover{text-decoration-color:var(--bwp-encre)}
#pc .pc-savoir-autre[hidden],#pc:not(.pc-js) .pc-savoir-autre{display:none}
/* les captures annotées (phase 6) : la vraie page, des cadres numérotés, la légende */
#pc .pc-cap{margin:20px 0 24px}
#pc .pc-cap-img{position:relative}
#pc .pc-cap-img img{display:block;width:100%;height:auto;border:1px solid var(--bwp-trait);border-radius:2px;background:var(--bwp-blanc)}
#pc .pc-cap-z{position:absolute;border:2px solid var(--bwp-dore);border-radius:2px;pointer-events:none}
#pc .pc-cap-z b{position:absolute;left:0;top:0;transform:translate(-45%,-45%);display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--bwp-dore);color:#fff;font:600 .75rem/1 'Inter',system-ui,sans-serif}
#pc .pc-cap-l{list-style:none;margin:12px 0 0;padding:0;counter-reset:pc-cap}
#pc .pc-cap-l li{position:relative;max-width:none;margin:6px 0 0;padding:0 0 0 32px;counter-increment:pc-cap;font-size:.9375rem;line-height:1.45;color:var(--bwp-brun)}
#pc .pc-cap-l li::before{content:counter(pc-cap);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--bwp-dore);color:#fff;font:600 .75rem/1 'Inter',system-ui,sans-serif}
#pc .pc-cap-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:6px 0 0;color:var(--bwp-encre);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bwp-contour)}
@media (prefers-reduced-motion:no-preference){
  html:not(.bw-motion-off) #pc .pc-neuf .pc-cap-z{animation:pc-case .45s .3s ease-out both}
}
/* « Devine le chiffre » : un curseur, puis ta réponse et la vraie en barres */
#pc .pc-devine[hidden]{display:none}
#pc .pc-devine input[type=range]{display:block;width:100%;height:44px;margin:12px 0 0;accent-color:var(--bwp-dore);cursor:pointer}
#pc .pc-devine input[type=range][hidden]{display:none}
#pc .pc-devine-res:empty{display:none}
#pc .pc-devine-res{margin:16px 0 0}
#pc .pc-devine-l{display:grid;grid-template-columns:7.5em minmax(0,1fr) 4.5em;align-items:center;gap:12px;margin:8px 0 0;font-size:.875rem;color:var(--bwp-brun)}
#pc .pc-devine-l b{text-align:right;font:600 .9375rem/1 'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--bwp-encre)}
#pc .pc-devine-b{display:block;height:10px;border-radius:2px;background:var(--bwp-beige);overflow:hidden}
#pc .pc-devine-b i{display:block;width:0;height:100%;border-radius:2px;background:var(--bwp-contour);transition:width .9s cubic-bezier(.2,.8,.2,1)}
#pc .pc-devine-vrai .pc-devine-b i{background:var(--bwp-dore)}
#pc .pc-devine-vrai span:first-child{color:var(--bwp-encre);font-weight:600}
#pc .pc-devine-mot{margin:12px 0 0;font:700 1rem/1.3 'Bricolage Grotesque',system-ui,sans-serif;color:var(--bwp-encre)}
/* « Mythe ou réalité ? » : une carte qui se retourne */
#pc .pc-jeu{padding:24px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-left:3px solid var(--bwp-dore);border-radius:2px;perspective:900px}
#pc .pc-jeu-carte{transition:transform .18s ease-in;transform-origin:50% 50%}
#pc .pc-jeu-carte.pc-tourne{transform:rotateY(90deg)}
#pc .pc-jeu-n{margin:0 0 8px;font-size:.8125rem;color:var(--bwp-brun)}
#pc .pc-jeu-q{margin:0;font:600 clamp(1.25rem,1.1rem + .6vw,1.5rem)/1.3 'Playfair Display',Georgia,serif;color:var(--bwp-encre)}
#pc .pc-jeu-choix{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
#pc .pc-jeu-b{min-height:48px;margin:16px 0 0;padding:0 22px;background:var(--bwp-blanc);border:1px solid var(--bwp-encre);border-radius:2px;color:var(--bwp-encre);font:600 .9375rem/1 'Inter',system-ui,sans-serif;cursor:pointer;transition:background-color .25s ease}
#pc .pc-jeu-choix .pc-jeu-b{margin:0;min-width:8em}
#pc .pc-jeu-b:hover{background:var(--bwp-sable)}
#pc .pc-jeu-r{margin:12px 0 0;line-height:1.55;color:var(--bwp-brun)}
#pc .pc-jeu-r b{display:block;margin:0 0 4px;font:700 1rem/1.3 'Bricolage Grotesque',system-ui,sans-serif;color:var(--bwp-encre)}
#pc .pc-jeu-bon b{color:var(--bwp-dore-f)}
html.bw-motion-off #pc .pc-jeu-carte,html.bw-motion-off #pc .pc-devine-b i{transition:none}
@media (prefers-reduced-motion:reduce){ #pc .pc-jeu-carte,#pc .pc-devine-b i{transition:none} }
/* les visuels s'animent à l'arrivée sur une escale (.pc-anime, posée par le script) */
@media (prefers-reduced-motion:no-preference){
  html:not(.bw-motion-off) #pc .pc-anime .pc-v-portes li,html:not(.bw-motion-off) #pc .pc-anime .pc-v-outils li,html:not(.bw-motion-off) #pc .pc-anime .pc-v-duo li,html:not(.bw-motion-off) #pc .pc-anime .pc-v-bloc{animation:pc-monte .45s ease-out both}
  html:not(.bw-motion-off) #pc .pc-anime li:nth-child(2),html:not(.bw-motion-off) #pc .pc-anime .pc-v-bloc:nth-of-type(2){animation-delay:.08s}
  html:not(.bw-motion-off) #pc .pc-anime li:nth-child(3),html:not(.bw-motion-off) #pc .pc-anime .pc-v-bloc:nth-of-type(3){animation-delay:.16s}
  html:not(.bw-motion-off) #pc .pc-anime li:nth-child(4){animation-delay:.24s}
  html:not(.bw-motion-off) #pc .pc-anime li:nth-child(5){animation-delay:.32s}
  html:not(.bw-motion-off) #pc .pc-anime .pc-v-cal i{animation:pc-case .35s ease-out both;animation-delay:calc(var(--k,0) * 22ms)}
  html:not(.bw-motion-off) #pc .pc-anime .pc-v-barre i{animation:pc-remplit 1s .5s cubic-bezier(.2,.8,.2,1) both}
  html:not(.bw-motion-off) #pc .pc-anime .pc-v-gestes .pc-on .pc-v-case{animation:pc-coche .45s .45s ease-out both}
  html:not(.bw-motion-off) #pc .pc-anime .pc-v-plus{animation:pc-plus .6s .85s ease-out both}
  html:not(.bw-motion-off) #pc .pc-revele .pc-v-stades li{animation:pc-monte .45s ease-out both}
  html:not(.bw-motion-off) #pc .pc-revele .pc-v-stades li:nth-child(2){animation-delay:.12s}
  html:not(.bw-motion-off) #pc .pc-revele .pc-v-stades li:nth-child(3){animation-delay:.24s}
  html:not(.bw-motion-off) #pc .pc-revele .pc-v-stades li:nth-child(4){animation-delay:.36s}
}
@keyframes pc-monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pc-case{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes pc-remplit{from{width:0}}
@keyframes pc-coche{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:none}}
@keyframes pc-plus{0%{transform:translateY(8px);opacity:0}60%{transform:translateY(-3px);opacity:1}100%{transform:none}}
#pc .pc-v-gestes{display:grid;gap:8px}
#pc .pc-v-gestes li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:12px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px}
#pc .pc-v-gestes .pc-v-ic{width:36px;height:36px;font-size:18px}
#pc .pc-v-gestes b{font:600 .9375rem/1.3 'Inter',system-ui,sans-serif}
#pc .pc-v-case{position:relative;width:22px;height:22px;border:1px solid var(--bwp-contour);border-radius:2px}
#pc .pc-v-gestes .pc-on{border-color:var(--bwp-encre)}
#pc .pc-v-gestes .pc-on .pc-v-case{background:var(--bwp-encre);border-color:var(--bwp-encre)}
#pc .pc-v-gestes .pc-on .pc-v-case::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#pc .pc-v-relie{display:flex;align-items:center;gap:10px;margin:16px 0 0;font:500 .875rem/1.3 'Inter',system-ui,sans-serif;color:var(--bwp-brun)}
#pc .pc-v-plus{padding:4px 8px;border-radius:2px;background:var(--bwp-dore);color:#fff;font-weight:600}

/* 5. Ta progression, en miniature */
#pc .pc-v-grand{display:flex;align-items:baseline;gap:12px;margin:0 0 20px;color:var(--bwp-brun)}
#pc .pc-v-grand b{font:600 3.5rem/1 'Inter',system-ui,sans-serif;letter-spacing:-.02em;color:var(--bwp-encre)}
#pc .pc-v-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:280px}
#pc .pc-v-cal i{display:block;aspect-ratio:1;border-radius:2px;background:var(--bwp-beige)}
#pc .pc-v-cal i.c1{background:color-mix(in srgb,var(--bwp-dore) 50%,#fff)}
#pc .pc-v-cal i.c2{background:color-mix(in srgb,var(--bwp-dore) 75%,#fff)}
#pc .pc-v-cal i.c3{background:var(--bwp-dore)}
#pc .pc-v-cal i.c4{background:var(--bwp-dore-f)}
#pc .pc-v-defi{margin:24px 0 0;padding:16px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px}
#pc .pc-v-barre{display:block;height:6px;border-radius:2px;background:var(--bwp-beige);overflow:hidden}
#pc .pc-v-barre i{display:block;width:40%;height:100%;background:var(--bwp-dore)}
#pc .pc-v-note{display:block;margin:8px 0 0;font-size:.8125rem;color:var(--bwp-brun)}

/* 6. les étapes d'une solution */
#pc .pc-v-stades{display:grid;gap:12px}
#pc .pc-v-stades li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px;padding:14px 16px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px}
#pc .pc-v-n{grid-row:span 3;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--bwp-dore);font:600 .9375rem/1 'Inter',system-ui,sans-serif;color:var(--bwp-dore-f)}
#pc .pc-v-stades b{font:700 1.0625rem/1.25 'Bricolage Grotesque',system-ui,sans-serif}
#pc .pc-v-stades small{font-size:.8125rem;color:var(--bwp-brun)}
#pc .pc-v-ex{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:.875rem;color:var(--bwp-encre)}
#pc .pc-v-ex .pc-ic{font-size:18px;color:var(--bwp-dore-f)}
/* la réponse du jeu d'ordre est dans le visuel : il reste voilé jusqu'à « Vérifier » */
#pc .pc-v-voile{display:none;margin:0 0 16px;font:500 .875rem/1.4 'Inter',system-ui,sans-serif;color:var(--bwp-brun)}
#pc.pc-js .pc-visuel[data-pc-revele]:not(.pc-revele) .pc-v-voile{display:block}
#pc.pc-js .pc-visuel[data-pc-revele]:not(.pc-revele) .pc-v-stades li > :not(.pc-v-n){visibility:hidden}
#pc.pc-js .pc-visuel[data-pc-revele]:not(.pc-revele) .pc-v-n{border-style:dashed;color:transparent}

/* 7. les outils */
#pc .pc-v-outils{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#pc .pc-v-outils li{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px;transition:border-color .25s ease}
#pc .pc-v-outils .pc-v-ic{width:36px;height:36px;font-size:18px}
#pc .pc-v-outils b{font:600 .9375rem/1.25 'Inter',system-ui,sans-serif}
#pc .pc-v-outils li.pc-on{border-color:var(--bwp-encre)}

/* 8. le blog et la boutique */
#pc .pc-v-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#pc .pc-v-duo li{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--bwp-blanc);border:1px solid var(--bwp-trait);border-radius:2px;transition:border-color .25s ease}
#pc .pc-v-duo b{font:700 1.125rem/1.25 'Bricolage Grotesque',system-ui,sans-serif}
#pc .pc-v-duo li > span:last-child{font-size:.9375rem;color:var(--bwp-brun)}
#pc .pc-v-duo li.pc-on{border-color:var(--bwp-encre)}

/* le choix du thème : son pictogramme dans chaque case */
#pc .pc-themes .pc-choix{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
#pc .pc-themes .pc-choix label{gap:10px;font-weight:600}
#pc .pc-themes .pc-choix .pc-ic{font-size:20px;color:var(--bwp-dore-f)}
#pc .pc-idees li b{display:block;margin:0 0 2px;font:700 1rem/1.3 'Bricolage Grotesque',system-ui,sans-serif;color:var(--bwp-encre)}
#pc .pc-idees a{color:var(--bwp-encre);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bwp-contour)}
#pc .pc-idees a:hover{text-decoration-color:var(--bwp-encre)}

html.bw-motion-off #pc .pc-v-ic,html.bw-motion-off #pc .pc-visuel li,html.bw-motion-off #pc .pc-v-bloc{transition:none}
@media (prefers-reduced-motion:reduce){
  #pc .pc-v-ic,#pc .pc-visuel li,#pc .pc-v-bloc{transition:none}
}

/* avec JavaScript : une vue à la fois, un écran après l'autre */
#pc:not(.pc-js) .pc-pied,#pc:not(.pc-js) .pc-passer,#pc:not(.pc-js) .pc-escales{display:none}
#pc.pc-js .pc-niveau{display:none}
#pc.pc-js .pc-niveau.pc-actif{display:block}
#pc.pc-js.pc-mode-niveau .pc-entree,#pc.pc-js.pc-mode-niveau .pc-chemin-zone{display:none}
#pc.pc-js .pc-ecran{display:none}
#pc.pc-js .pc-ecran.pc-vu{display:block}
#pc.pc-js .pc-explique{display:none}
#pc.pc-js .pc-oignon li.pc-ferme{display:none}
#pc.pc-js .pc-idees li{display:none}
#pc.pc-js .pc-idees li.pc-choisi{display:block;padding:4px 0 4px 16px;border-left:2px solid var(--bwp-dore)}

@media (prefers-reduced-motion:no-preference){
  html:not(.bw-motion-off) #pc.pc-js .pc-neuf{animation:pc-fondu .35s ease-out both}
  html:not(.bw-motion-off) #pc .pc-seg-trace{transition:stroke-dashoffset .9s ease}
}
@keyframes pc-fondu{from{opacity:0}to{opacity:1}}

/* la tablette : la courbe se resserre et les noms passent sur deux lignes,
   sinon « Les nouvelles technologies » sortait de l'écran à 768 px */
@media (max-width:959.98px){
  #pc{--pc-amp:80px}
  #pc .pc-txt{max-width:10em}
}
@media (max-width:759px){
  #pc{--pc-amp:0px}
  #pc .pc-txt{width:auto;max-width:none}
  #pc .pc-chap{margin-left:0;padding-left:0;text-align:left}
  #pc .pc-etape{height:96px}
  #pc .pc-etape > a,#pc .pc-gauche > a{top:16px;left:12px;right:0;flex-direction:row;text-align:left}
  #pc .pc-carte-fin{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  #pc .pc-suites3{grid-template-columns:minmax(0,1fr)}
  #pc .pc-arrive{height:96px}
  #pc .pc-oignon li{flex-direction:column;gap:6px}
  #pc .pc-couche-n{width:auto}
  #pc .pc-oignon li:nth-child(2){margin-left:12px}
  #pc .pc-oignon li:nth-child(3){margin-left:24px}
  #pc .pc-visuel{padding:20px}
  #pc .pc-v-univers{grid-template-columns:minmax(0,1fr);gap:12px}
  #pc .pc-v-univers ul{display:flex;flex-wrap:wrap;gap:6px}
  #pc .pc-v-univers li{display:flex;gap:8px;padding:6px 10px}
  #pc .pc-v-univers .pc-v-ic{width:auto;height:auto;background:none;font-size:16px}
  #pc .pc-v-univers li.pc-on .pc-v-ic,#pc .pc-v-univers li.pc-choisi .pc-v-ic{background:none;color:var(--bwp-dore)}
  #pc .pc-v-univers small{display:none}
  #pc .pc-v-univers li{flex-wrap:wrap}
  #pc .pc-v-enj{display:none;flex-basis:100%;margin:2px 0 0}
  #pc .pc-v-univers li.pc-choisi .pc-v-enj,#pc .pc-v-univers li.pc-on .pc-v-enj{display:block}
  #pc .pc-v-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.8125rem}
  #pc .pc-v-page .pc-v-bloc{margin-bottom:8px;padding:10px 12px}
  #pc .pc-v-page .pc-v-k{margin-bottom:4px}
  #pc .pc-v-onglets{margin-bottom:12px}
  #pc .pc-v-compteur b{font-size:1.375rem}
  #pc .pc-v-ligne{gap:8px;margin-top:6px}
  #pc .pc-savoir,#pc .pc-jeu{padding:18px}
  #pc .pc-devine-l{grid-template-columns:6.5em minmax(0,1fr) 4em;gap:8px}
  #pc .pc-v-k{margin-bottom:6px}
  #pc .pc-v-titre{font-size:1.375rem}
  #pc .pc-v-bloc{padding:12px}
  #pc .pc-v-grand b{font-size:2.5rem}
  #pc .pc-v-outils,#pc .pc-v-duo{grid-template-columns:minmax(0,1fr)}
  #pc .pc-v-portes li,#pc .pc-v-stades li{padding:12px}
}
/* le choix du thème sur un petit écran : deux colonnes, sans pictogramme (la carte au-dessus les montre) ;
   la barre des escales garde la place : la flèche seule pour le chemin */
@media (max-width:519px){
  #pc .pc-barre{gap:10px}
  #pc .pc-retour{min-width:32px}
  #pc .pc-retour-t{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  #pc .pc-escales{gap:4px}
  #pc .pc-themes .pc-choix{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pc .pc-themes .pc-choix label{gap:10px;padding:10px 12px;font-size:.9375rem}
  #pc .pc-themes .pc-choix label:has(input:checked){padding:9px 11px}
  #pc .pc-themes .pc-choix .pc-ic{display:none}
}
@media print{
  #pc .pc-trace,#pc .pc-pied,#pc .pc-passer,#pc .pc-escales{display:none}
  #pc .pc-barre{position:static}
}