/* ==========================================================================
   SpeakPro Premium — refonte visuelle de l'espace apprenant (04/11/2026)
   --------------------------------------------------------------------------
   Même langage que SpeakPro Classic : carte navy en tête de page, rail des
   étapes, cartes blanches aérées, peu de texte. Chargée après premium-v3.css
   et sp-identity.css, limitée à body.pv4 (les 5 pages apprenant Premium) :
   l'espace coach et les autres offres ne changent pas.
   ========================================================================== */
body.pv4 {
  --p4-navy: #10233F; --p4-navy-2: #18345A; --p4-terra: #C8683F; --p4-terra-d: #A34F2B; --p4-peach: #E9B597;
  --p4-bg: #FBF7F2; --p4-sand: #F4EADF; --p4-line: #ECE2D6; --p4-ink: #1E2A3F; --p4-mute: #5C6B84; --p4-ok: #1F8A55;
  --p4-shadow: 0 1px 2px rgba(16,35,63,.05), 0 12px 32px -14px rgba(16,35,63,.20);
  --p4-r: 22px;
  background: var(--p4-bg); background-image: none;
}
body.pv4 .pv-main { overflow-x: clip; padding-bottom: 40px; }
body.pv4 .pv-wrap { max-width: 1080px; }
body.pv4 .pv-section { margin-top: 30px; }
body.pv4 .pv-in { animation: p4-in .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes p4-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.pv4 .pv-in { animation: none; } }

/* ------------------------------------------------------------ retour */
.p4-back { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 14px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: #fff; color: var(--p4-navy); font: 600 13.5px/1 var(--pv-display, 'Plus Jakarta Sans', sans-serif); text-decoration: none;
  border: 1px solid var(--p4-line); box-shadow: 0 1px 2px rgba(16,35,63,.06); transition: border-color .2s, transform .2s; }
.p4-back:hover { border-color: var(--p4-terra); }
.p4-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p4-first { height: 22px; }

/* ------------------------------------------------------------ carte navy (en-tête de page) */
body.pv4 .p4-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--p4-navy); color: #fff; border-radius: 26px;
  padding: 34px 34px 30px; box-shadow: var(--p4-shadow); }
.p4-hero::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -150px; top: -210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,104,63,.40), rgba(200,104,63,0) 70%); pointer-events: none; }
.p4-hero.is-center { text-align: center; }
.p4-kick { font: 700 11.5px/1.3 var(--pv-display, sans-serif); letter-spacing: .13em; text-transform: uppercase; color: var(--p4-peach); margin: 0 0 12px; }
body.pv4 .p4-hero h1 { color: #fff; font-family: var(--pv-serif); font-weight: 600; font-size: clamp(28px, 4.6vw, 42px); line-height: 1.1; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
body.pv4 .p4-hero h2 { color: #fff; font-family: var(--pv-serif); font-weight: 600; font-size: clamp(21px, 3vw, 27px); line-height: 1.2; margin: 0; text-wrap: balance; }
body.pv4 .p4-hero.is-center h1 { max-width: 24ch; margin-inline: auto; }
.p4-sub { color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.55; margin: 10px 0 0; max-width: 52ch; }
body.pv4 .p4-hero.is-center .p4-sub { margin-inline: auto; }
body.pv4 .p4-view > .pv-actions { justify-content: center; }
.p4-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.p4-hero.is-center .p4-chips { justify-content: center; }
.p4-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.p4-chip b { color: var(--p4-peach); font-weight: 700; }
.p4-chip svg { width: 14px; height: 14px; stroke: var(--p4-peach); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p4-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.p4-hero.is-center .p4-actions { justify-content: center; }
.p4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--p4-terra); color: #fff; font: 700 14.5px/1 var(--pv-display, sans-serif); text-decoration: none; transition: background .2s, transform .2s; }
.p4-btn:hover { background: var(--p4-terra-d); color: #fff; transform: translateY(1px); }
.p4-btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); }
.p4-btn-ghost:hover { background: rgba(255,255,255,.16); }
.p4-btn-light { background: #fff; color: var(--p4-navy); border: 1px solid var(--p4-line); }
.p4-btn-light:hover { background: var(--p4-sand); color: var(--p4-navy); }
.p4-btn-sm { padding: 10px 16px; font-size: 13.5px; }
.p4-hero .p4-btn:focus-visible, .p4-back:focus-visible, .p4-node:focus-visible, .p4-row:focus-visible, .p4-rail a:focus-visible { outline: 3px solid var(--p4-peach); outline-offset: 3px; }

/* en-tête du tableau de bord : module en cours + anneau de progression */
.p4-dash { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 34px; align-items: center; }
.p4-now { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.p4-now .p4-kick { margin-bottom: 8px; }
.p4-ringbox { display: grid; justify-items: center; gap: 12px; text-align: center; }
.p4-ring { --p: 0; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--p4-terra) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.p4-ring > span { width: 122px; height: 122px; border-radius: 50%; background: var(--p4-navy); display: grid; place-content: center; gap: 2px; }
.p4-ring b { font: 600 34px/1 var(--pv-serif); color: #fff; }
.p4-ring i { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.6); letter-spacing: .08em; text-transform: uppercase; }
.p4-ringbox p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.74); line-height: 1.5; }
.p4-ringbox p b { color: #fff; }
.p4-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.p4-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--p4-terra), #E39A72); }
.p4-bar.is-light { background: rgba(16,35,63,.08); }
.p4-progress { display: flex; align-items: center; gap: 12px; margin-top: 20px; max-width: 460px; font-size: 13px; color: rgba(255,255,255,.75); }
.p4-hero.is-center .p4-progress { margin-inline: auto; }
.p4-progress .p4-bar { flex: 1; }

/* ------------------------------------------------------------ titres de section */
.p4-sec { margin-top: 34px; }
.p4-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
body.pv4 .p4-sec-h h2 { font-size: 22px; margin: 0; color: var(--p4-navy); }
.p4-sec-h a { font-size: 13.5px; font-weight: 600; color: var(--p4-terra-d); text-decoration: none; }
.p4-sec-h a:hover { text-decoration: underline; }
.p4-eyebrow { font: 700 11px/1.3 var(--pv-display, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--p4-terra); margin: 0 0 6px; }

/* ------------------------------------------------------------ parcours : 14 étapes */
.p4-road { background: #fff; border-radius: var(--p4-r); box-shadow: var(--p4-shadow); padding: 22px 22px 18px; overflow-x: auto; scrollbar-width: thin; }
.p4-road-in { display: flex; gap: 0; min-width: 760px; }
.p4-lv { flex: var(--n) 1 0; min-width: 0; }
.p4-lv-t { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--p4-mute); letter-spacing: .04em; margin: 0 0 12px; padding-left: 4px; }
.p4-lv-t span { color: var(--p4-terra-d); background: rgba(200,104,63,.10); border-radius: 99px; padding: 2px 8px; font-size: 11px; }
.p4-lv-nodes { display: flex; }
.p4-node { flex: 1; position: relative; display: grid; justify-items: center; gap: 8px; text-decoration: none; color: var(--p4-mute); padding: 0 2px; }
.p4-node::before { content: ""; position: absolute; top: 17px; left: -50%; right: 50%; height: 2px; background: var(--p4-line); z-index: 0; }
.p4-lv:first-child .p4-node:first-child::before { display: none; }
.p4-node.is-done::before, .p4-node.is-progress::before { background: var(--p4-terra); }
.p4-dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--pv-display, sans-serif);
  background: #fff; border: 2px solid var(--p4-line); color: var(--p4-mute); transition: transform .2s; }
.p4-node:hover .p4-dot { transform: scale(1.08); }
.p4-node.is-done .p4-dot { background: var(--p4-terra); border-color: var(--p4-terra); color: #fff; }
.p4-node.is-progress .p4-dot { background: var(--p4-navy); border-color: var(--p4-navy); color: #fff; box-shadow: 0 0 0 5px rgba(200,104,63,.22); }
.p4-node.is-todo .p4-dot { border-color: var(--p4-terra); color: var(--p4-terra-d); }
.p4-dot svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.p4-node small { font-size: 11.5px; line-height: 1.3; text-align: center; max-width: 11ch; color: var(--p4-mute); }
.p4-node.is-progress small { color: var(--p4-navy); font-weight: 600; }

/* ------------------------------------------------------------ tuiles du tableau de bord */
.p4-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.p4-tile { background: #fff; border-radius: var(--p4-r); box-shadow: var(--p4-shadow); padding: 22px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; min-width: 0; }
.p4-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--p4-bg); border: 1px solid var(--p4-line); display: grid; place-items: center; margin-bottom: 8px; }
.p4-ico svg { width: 21px; height: 21px; stroke: var(--p4-terra); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p4-tile h3 { margin: 0; font-size: 13px !important; font-family: var(--pv-display, sans-serif) !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--p4-mute) !important; }
.p4-tile-v { margin: 0; font: 600 19px/1.3 var(--pv-serif); color: var(--p4-navy); }
.p4-tile-s { margin: 0; font-size: 13.5px; color: var(--p4-mute); line-height: 1.5; display: flex; align-items: center; gap: 8px; }
.p4-tile .p4-btn { justify-self: start; margin-top: 12px; }
.p4-week { display: flex; gap: 5px; }
.p4-week span { width: 22px; height: 6px; border-radius: 99px; background: rgba(16,35,63,.10); }
.p4-week span.is-used { background: var(--p4-terra); }
.p4-live { width: 8px; height: 8px; border-radius: 50%; background: #A7B0BE; flex: none; }
.p4-live.is-on { background: var(--p4-ok); box-shadow: 0 0 0 4px rgba(31,138,85,.15); }

/* ------------------------------------------------------------ listes (activités, étapes, modules) */
.p4-list { background: #fff; border-radius: var(--p4-r); box-shadow: var(--p4-shadow); padding: 6px 0; }
.p4-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 14px 20px; text-decoration: none; color: inherit;
  border-top: 1px solid var(--p4-line); transition: background .15s; }
.p4-row:first-child { border-top: 0; }
a.p4-row:hover { background: #FDFAF6; }
.p4-row .p4-dot { width: 40px; height: 40px; font-size: 14px; }
.p4-row-t { display: block; font-weight: 600; color: var(--p4-navy); font-size: 15.5px; line-height: 1.35; }
.p4-row-s { display: block; font-size: 13px; color: var(--p4-mute); margin-top: 2px; }
.p4-row-r { display: flex; align-items: center; gap: 12px; }
.p4-row-p { width: 110px; display: grid; gap: 5px; font-size: 12px; color: var(--p4-mute); text-align: right; }
.p4-row.is-done .p4-dot { background: var(--p4-terra); border-color: var(--p4-terra); color: #fff; }
.p4-row.is-progress .p4-dot, .p4-row.is-current .p4-dot { background: var(--p4-navy); border-color: var(--p4-navy); color: #fff; }
.p4-row.is-current { background: linear-gradient(90deg, rgba(200,104,63,.07), rgba(200,104,63,0) 60%); }
.p4-row.is-locked .p4-row-t { color: #6B7789; }
.p4-row.is-locked .p4-dot { background: var(--p4-bg); }
.p4-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--p4-bg); color: var(--p4-mute); border: 1px solid var(--p4-line); }
.p4-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.p4-badge.is-done { color: var(--p4-ok); background: rgba(31,138,85,.08); border-color: rgba(31,138,85,.2); }
.p4-badge.is-progress { color: var(--p4-terra-d); background: rgba(200,104,63,.08); border-color: rgba(200,104,63,.25); }
.p4-badge.is-locked::before { display: none; }
.p4-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.p4-group { margin-top: 30px; }
.p4-group-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.p4-group-h .p4-lvl { font: 700 12px/1 var(--pv-display, sans-serif); color: #fff; background: var(--p4-navy); border-radius: 8px; padding: 6px 8px; }
body.pv4 .p4-group-h h2 { font-size: 20px; margin: 0; color: var(--p4-navy); }
.p4-group-h span { font-size: 13px; color: var(--p4-mute); }
.p4-empty { padding: 18px 20px; margin: 0; color: var(--p4-mute); font-size: 14px; }
.p4-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }

/* ------------------------------------------------------------ page module : rail des étapes */
.p4-know { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 16px auto 0; padding: 0; list-style: none; max-width: 760px; }
.p4-know li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: rgba(255,255,255,.82); }
.p4-know li::before { content: ""; width: 14px; height: 14px; flex: none; background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B597' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.p4-rail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 4px; margin: 24px auto 0; padding: 0; list-style: none; }
.p4-rail li { display: flex; align-items: center; gap: 4px; }
.p4-rail li + li::before { content: ""; width: 10px; height: 1px; background: rgba(255,255,255,.22); }
.p4-rail a { white-space: nowrap; position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); transition: background .2s, border-color .2s; }
.p4-rail a:hover { background: rgba(200,104,63,.28); border-color: rgba(233,181,151,.5); }
.p4-rail a[aria-current="step"] { background: var(--p4-terra); border-color: var(--p4-terra); }
.p4-rail a svg { width: 15px; height: 15px; stroke: var(--p4-peach); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.p4-rail a[aria-current="step"] svg { stroke: #fff; }
.p4-rail a.is-todo { color: rgba(255,255,255,.62); }
.p4-rail a.is-todo::after { content: "À venir"; position: absolute; top: -9px; right: -4px; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 99px; background: #4A5A73; color: #fff; }
.p4-rail a.is-seen:not([aria-current]) svg { stroke: #8FD3AE; }
.p4-rail a.is-quiz { background: rgba(233,181,151,.14); border-color: rgba(233,181,151,.4); }

/* contenu de l'étape ouverte */
.p4-view { margin-top: 22px; background: #fff; border-radius: 24px; box-shadow: var(--p4-shadow); padding: 34px 34px 28px; scroll-margin-top: 80px; }
body.pv4 .p4-view .pv-view-head { display: block; text-align: center; margin-bottom: 24px; }
body.pv4 .p4-view .pv-view-head > div { display: block; text-align: center; }
body.pv4 .p4-view .pv-view-head > * + * { margin-top: 14px; display: flex; justify-content: center; }
body.pv4 .p4-view .pv-view-head .pv-muted { margin-inline: auto !important; }
body.pv4 .p4-view .pv-view-head h2 { font-size: clamp(24px, 3.6vw, 30px); margin: 0 0 6px; color: var(--p4-navy); }
body.pv4 .p4-view .pv-view-head .pv-muted { max-width: 56ch !important; font-size: 14.5px; }
.p4-step-n { font: 700 11px/1 var(--pv-display, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--p4-mute); margin: 0 0 14px; text-align: center; }
.p4-view-ico { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: var(--p4-bg); border: 1px solid var(--p4-line); display: grid; place-items: center; }
.p4-view-ico svg { width: 26px; height: 26px; stroke: var(--p4-terra); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.pv4 .p4-view .pv-view-nav { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--p4-line); }
body.pv4 .pv-sheet { box-shadow: none; border: 1px solid var(--p4-line); border-radius: 18px; }

/* aide du coach : bouton rond, discret, au-dessus de la barre d'onglets */

/* bouton d'aide : rond, icône seule (libellé lu par les lecteurs d'écran) */

/* ------------------------------------------------------------ mobile */
@media (max-width: 900px) {
  .p4-dash { grid-template-columns: 1fr; gap: 24px; }
  .p4-ringbox { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; gap: 16px; order: -1; }
  .p4-ring { width: 88px; height: 88px; } .p4-ring > span { width: 70px; height: 70px; } .p4-ring b { font-size: 22px; } .p4-ring i { display: none; }
  .p4-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body.pv4 .p4-hero { border-radius: 22px; padding: 26px 20px 22px; }
  .p4-now { margin-top: 18px; padding-top: 16px; }
  .p4-actions { margin-top: 20px; }
  .p4-actions .p4-btn { flex: 1 1 100%; }
  .p4-road { padding: 18px 14px 14px; margin-inline: -4px; }
  .p4-row { grid-template-columns: 36px minmax(0,1fr); padding: 14px 16px; gap: 12px; }
  .p4-row .p4-dot { width: 36px; height: 36px; font-size: 13px; }
  .p4-row-r { grid-column: 2; justify-content: flex-start; }
  .p4-road-in { min-width: 1080px; }
  body.pv4 .pv-doc { flex-wrap: wrap; } body.pv4 .pv-doc-b { flex: 1 1 160px; min-width: 0; }
  .p4-row-p { width: 120px; text-align: left; }
  .p4-view { padding: 26px 18px 22px; border-radius: 20px; margin-inline: -4px; }
  .p4-rail { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -20px; padding: 10px 20px 4px; scrollbar-width: none; }
  .p4-rail::-webkit-scrollbar { display: none; }
  .p4-know { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; max-width: none; }
  body.pv4 .p4-hero.is-center { text-align: left; } body.pv4 .p4-hero.is-center h1 { margin-inline: 0; } .p4-hero.is-center .p4-chips, .p4-hero.is-center .p4-actions { justify-content: flex-start; }

}

/* 04/11 (2) : tableau de bord centré ; tuiles centrées, même gabarit */
body.pv4 .p4-hero.is-center .p4-dash { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
body.pv4 .p4-hero.is-center .p4-dash > div:first-child { width: 100%; }
body.pv4 .p4-hero.is-center .p4-ringbox { order: -1; grid-template-columns: auto auto; justify-items: start; text-align: left; align-items: center; gap: 16px; }
body.pv4 .p4-hero.is-center .p4-ring { width: 96px; height: 96px; } body.pv4 .p4-hero.is-center .p4-ring > span { width: 76px; height: 76px; }
body.pv4 .p4-hero.is-center .p4-ring b { font-size: 24px; } body.pv4 .p4-hero.is-center .p4-ring i { display: none; }
body.pv4 .p4-hero.is-center .p4-now { max-width: 640px; margin-inline: auto; }
.p4-tile { justify-items: center; text-align: center; grid-template-rows: auto auto auto 1fr auto; padding: 30px 24px 26px; }
.p4-tile .p4-ico { width: 58px; height: 58px; margin-bottom: 10px; }
.p4-tile .p4-ico svg { width: 25px; height: 25px; }
.p4-tile h3 { font-size: 11.5px !important; color: var(--p4-terra) !important; letter-spacing: .14em; }
.p4-tile-v { font-size: 21px; }
.p4-tile-s { justify-content: center; }
.p4-tile .p4-btn { justify-self: center; margin-top: 16px; }
@media (max-width: 640px) {
  body.pv4 .p4-hero.is-center { text-align: center; } body.pv4 .p4-hero.is-center h1 { margin-inline: auto; }
  body.pv4 .p4-hero.is-center .p4-chips, body.pv4 .p4-hero.is-center .p4-actions { justify-content: center; }
  body.pv4 .p4-hero.is-center .p4-ringbox { justify-self: center; }
  body.pv4 .p4-hero.is-center .p4-know { align-items: center; text-align: center; }
  body.pv4 .p4-hero.is-center .p4-progress { margin-inline: auto; }
}

/* Cours en PDF (carte du Classic) et Activity Practice en mode « un exercice à la fois » */
body.pv4 .p4-doc { max-width: 560px; margin: 4px auto 0; }
body.pv4 .p4-view .sp-todo { max-width: 560px; margin-inline: auto; }
body.pv4 .p4-practice .pv-sheet { max-width: 680px; margin-inline: auto; border-radius: 20px; padding: 26px 28px; }
body.pv4 .p4-practice .pv-sheet:not(:has(.pv-practice-top)) { text-align: center; }
body.pv4 .p4-practice .pv-sheet:not(:has(.pv-practice-top)) > div { justify-content: center; }
body.pv4 .p4-practice .pv-paper-btn { border-radius: 999px; padding: 12px 22px; font-family: var(--pv-display, sans-serif); font-weight: 700; }
body.pv4 .p4-view.is-running .p4-step-n, body.pv4 .p4-view.is-running .p4-view-ico, body.pv4 .p4-view.is-running .pv-view-head, body.pv4 .p4-view.is-running .pv-view-nav { display: none; }
body.pv4 .p4-view.is-running { padding-top: 28px; }
body.pv4 .p4-view.is-running .pv-sheet { border: 0; padding: 0; max-width: 720px; }
@media (max-width: 640px) { body.pv4 .p4-practice .pv-sheet { padding: 20px 16px; } }
/* carte du cours PDF (même dessin que le Classic, sans dépendre de body.m1) */
body.pv4 .p4-doc { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: var(--p4-bg); border: 1px solid var(--p4-line); text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
body.pv4 .p4-doc:hover { border-color: #E2C7B4; box-shadow: 0 6px 18px -10px rgba(163,79,43,.45); transform: translateY(-1px); }
body.pv4 .p4-doc .m1-doc-tile { flex: none; width: 52px; height: 62px; border-radius: 10px; background: var(--p4-terra); color: #fff; display: grid; place-items: center; font: 800 13px/1 var(--pv-display, sans-serif); letter-spacing: .06em; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
body.pv4 .p4-doc .m1-doc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
body.pv4 .p4-doc .m1-doc-text strong { font-size: 15.5px; color: var(--p4-navy); }
body.pv4 .p4-doc .m1-doc-text span { font-size: 13.5px; color: var(--p4-mute); }
body.pv4 .p4-doc .m1-doc-go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: var(--p4-navy); color: #fff; font: 700 13.5px/1 var(--pv-display, sans-serif); }
body.pv4 .p4-doc:hover .m1-doc-go { background: var(--p4-terra); }
@media (max-width: 640px) { body.pv4 .p4-doc { flex-wrap: wrap; } body.pv4 .p4-doc .m1-doc-go { width: 100%; justify-content: center; } }

/* liste « vous savez » avec cases à cocher (espaces des offres) */
.p4-know.is-check li::before { display: none; }
.p4-know.is-check label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.p4-know.is-check input { accent-color: var(--p4-terra); width: 16px; height: 16px; }
/* aide : même bouton rond sur Premium et sur les offres (academy.css le redessinait en blanc) */

/* offres d'examen : épreuves, date du test */
.p4-skills.is-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.p4-skills.is-5 { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.p4-skills .p4-tile { padding: 24px 16px 20px; }
.p4-skills .p4-tile-v { font-size: 26px; }
.p4-skillbar { width: 100%; display: grid; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--p4-mute); }
.p4-tile-x { margin: 8px 0 0; font-size: 12px; color: var(--p4-mute); line-height: 1.45; }
.p4-dateform { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.p4-dateform[hidden] { display: none; }
.p4-dateform input { font: inherit; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; color-scheme: dark; }
@media (max-width: 1000px) { .p4-skills.is-5 { grid-template-columns: repeat(3, minmax(0,1fr)); } .p4-skills.is-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .p4-skills.is-4, .p4-skills.is-5 { grid-template-columns: repeat(2, minmax(0,1fr)); } .p4-skills .p4-tile .p4-btn { padding: 9px 14px; } }

/* 04/11/2026 — bouton « Parler à un coach » : avatar du coach, libellé, réduction pendant le défilement. */
body.pv4 .pv-help-fab, body.pv.pv4 .pv-help-fab { right: 16px; left: auto; bottom: 92px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; height: auto; width: auto; border-radius: 999px; background: #fff; color: var(--p4-navy); border: 1px solid rgba(200,161,90,.45); box-shadow: 0 14px 34px -14px rgba(16,35,63,.45), 0 2px 6px rgba(16,35,63,.08); transition: padding .25s ease, gap .25s ease, box-shadow .2s ease, transform .2s ease; }
body.pv4 .pv-help-fab::before { content: none; }
body.pv4 .pv-help-fab:hover { transform: translateY(-1px); box-shadow: 0 18px 38px -14px rgba(16,35,63,.5), 0 2px 6px rgba(16,35,63,.08); }
body.pv4 .pv-coach-av { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #C8A15A; }
body.pv4 .pv-coach-av svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
body.pv4 .pv-help-fab .pv-help-dot { position: absolute; right: -1px; bottom: -1px; top: auto; width: 12px; height: 12px; border: 2px solid #fff; background: #A7B0BE; box-shadow: none; }
body.pv4 .pv-help-fab .pv-help-dot.is-on { background: #2BB673; }
body.pv4 .pv-coach-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; overflow: hidden; max-width: 160px; white-space: nowrap; transition: max-width .25s ease, opacity .2s ease; }
body.pv4 .pv-coach-txt small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #B4874A; }
body.pv4 .pv-coach-txt b { font-size: 14px; font-weight: 600; color: var(--p4-navy); }
body.pv4 .pv-help-fab.is-mini { padding: 4px; gap: 0; }
body.pv4 .pv-help-fab.is-mini .pv-coach-txt { max-width: 0; opacity: 0; }
@media (min-width: 900px) { body.pv4 .pv-help-fab, body.pv.pv4 .pv-help-fab { right: 28px; bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { body.pv4 .pv-help-fab, body.pv4 .pv-coach-txt { transition: none; } }
body.pv4 .p4-back { display: none; } /* 04/11/2026 : remplacé par le bouton Retour flottant (back-button.js), comme dans le Classic. */
/* 04/11/2026 — Further Learning : vidéo intégrée. */
body.pv4 .p4-yt { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0B1A30; cursor: pointer; box-shadow: 0 18px 40px -24px rgba(16,35,63,.6); }
body.pv4 .p4-yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, filter .3s ease; }
body.pv4 .p4-yt:hover img { transform: scale(1.03); filter: brightness(.88); }
body.pv4 .p4-yt-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.95); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
body.pv4 .p4-yt-play svg { width: 30px; height: 30px; fill: var(--p4-terra, #C8683F); margin-left: 4px; }
body.pv4 .p4-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.pv4 .p4-yt:focus-visible { outline: 3px solid var(--p4-terra, #C8683F); outline-offset: 3px; }
body.pv4 .p4-yt-cap { margin: 12px 2px 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
body.pv4 .p4-yt-cap b { font-weight: 600; color: var(--p4-navy); font-size: 15px; }
body.pv4 .p4-yt-cap span { font-size: 13px; color: #6B7280; }

/* ---------- 09/11/2026 : centrages et mise en page des étapes (retours de Yannick) ---------- */
body.pv4 .p4-ask { display: flex; justify-content: center; margin: 0 0 14px; }
body.pv4 .p4-ask span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; background: var(--p4-sand); color: var(--p4-terra-d);
  font: 700 14px/1.2 var(--pv-display, sans-serif); text-align: center; border: 1px solid #EAD5C3; }
body.pv4 .p4-ask svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.pv4 .p4-ls-title { margin: 0 0 12px; font-size: 21px; text-align: center; }
body.pv4 .p4-show { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 14.5px; margin: 0 0 14px; }
/* Boutons précédent / suivant : toujours face à face, à gauche et à droite */
body.pv4 .pv-view-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex-wrap: nowrap; }
body.pv4 .pv-view-nav > a { justify-content: center; text-align: center; white-space: normal; line-height: 1.25; min-height: 48px; padding-left: 10px; padding-right: 10px; }
/* Further Learning : légende de la vidéo centrée, bloc coach orange */
body.pv4 .p4-yt-cap { align-items: center; text-align: center; }
body.pv4 .p4-coach { margin-top: 18px; padding: 26px 22px; border-radius: 22px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--p4-terra), var(--p4-terra-d)); box-shadow: 0 16px 34px -18px rgba(163,79,43,.7); }
body.pv4 .p4-coach-k { margin: 0 0 8px; font: 700 12px/1 var(--pv-display, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #FBE3D3; }
body.pv4 .p4-coach-t { margin: 0 0 6px; font-size: 17px; line-height: 1.45; color: #fff; }
body.pv4 .p4-coach-t b { color: #fff; font-weight: 700; }
body.pv4 .p4-coach-f { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #FDEEE4; }
body.pv4 .p4-coach-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; background: #fff; color: var(--p4-terra-d);
  font: 700 14.5px/1 var(--pv-display, sans-serif); text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
body.pv4 .p4-coach-btn:hover { background: var(--p4-sand); color: var(--p4-terra-d); }
/* Assessment Quiz : écran d'accueil centré */
body.pv4 #pv-quiz:has(> [data-go]) { text-align: center; }
body.pv4 #pv-quiz .pv-quiz-facts { justify-content: center; }
body.pv4 #pv-quiz .pv-quiz-facts div { align-items: center; }
/* Phonétique : boutons centrés, enregistrement visible, pas de zoom au double toucher */
body.pv, body.pv button, body.pv a, body.pv input, body.pv label { touch-action: manipulation; }
body.pv .p4-rec-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
body.pv .p4-rec-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
body.pv .p4-rec-live { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: #A34F2B; }
body.pv .p4-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #D33; animation: p4pulse 1s infinite; }
@keyframes p4pulse { 50% { opacity: .25; } }
/* Pronunciation dans un module : une rubrique + quiz */
body.pv4 .p4-ph-topic .pv-section { margin-top: 0; }
body.pv4 .p4-phq { text-align: center; }
body.pv4 .p4-phq-k { margin: 0 0 8px; font: 700 12px/1 var(--pv-display, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--p4-terra-d); }
body.pv4 .p4-phq-q { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
body.pv4 .p4-phq .pv-opts { text-align: left; }
body.pv4 .p4-phq-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
body.pv4 .p4-ph-lib { text-align: center; margin: 14px 0 0; font-size: 14px; }
/* Reading & Shadowing : le texte, phrase par phrase */
body.pv4 .p4-read { margin: 0; font-size: 17.5px; line-height: 1.85; color: var(--p4-ink); }
body.pv4 .p4-read span { border-radius: 6px; padding: 1px 2px; transition: background .2s; }
body.pv4 .p4-read span.is-now { background: #FBE3D3; box-shadow: 0 0 0 2px #FBE3D3; }