/* Page de lecture vivante : parcours, pastille, retenues, focus. */
.vv-note{margin:14px 0 0;font:500 .875rem/1.5 var(--body,inherit);font-style:italic;color:color-mix(in srgb,var(--fg) 74%,transparent)}
.vv-track{margin:22px 0 0;max-width:34em}
.vv-track__k{font:600 .75rem/1.4 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--fg) 74%,transparent);margin:0 0 10px}
.vv-track__t{text-transform:none;letter-spacing:0;font-weight:500;font-family:inherit}
.vv-dots{list-style:none;margin:0;padding:0;display:flex;gap:5px;flex-wrap:wrap}
.vv-dot{position:relative;display:block;width:22px;height:10px;border-radius:6px;border:1.5px solid var(--fg);background:transparent;padding:0;cursor:pointer;transition:background .25s,width .25s,transform .2s}
.vv-dot i{display:none}
.vv-dot span{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);width:max-content;max-width:min(300px,70vw);padding:7px 10px;border-radius:10px;background:var(--fg);color:var(--bg);font:500 .8125rem/1.3 var(--body,inherit);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:30;text-align:left;white-space:normal}
.vv-dot:hover span,.vv-dot:focus-visible span{opacity:1;transform:translate(-50%,0)}
.vv-dot:hover{transform:translateY(-2px)}
.vv-dot.lu{background:var(--fg)}
.vv-dot.act{width:38px;background:#DF6D2E;border-color:#DF6D2E}
.vv-dot:focus-visible{outline:3px solid #1D68DC;outline-offset:2px}

.vv-pill{position:fixed;left:50%;bottom:14px;z-index:60;display:flex;align-items:center;gap:6px;padding:6px 8px;border:2px solid var(--fg);border-radius:999px;background:var(--card,#fff);box-shadow:4px 4px 0 var(--fg);max-width:calc(100vw - 20px);transform:translate(-50%,140%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.vv-pill.on{transform:translate(-50%,0)}
.vv-pill.bump{animation:vvb .5s}
@keyframes vvb{40%{transform:translate(-50%,-8px)}}
.vv-sec{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--fg);padding:2px 8px 2px 2px;cursor:pointer;text-align:left;min-width:0;font:inherit}
.vv-ring{width:34px;height:34px;flex:none;transform:rotate(-90deg)}
.vv-ring circle{fill:none;stroke-width:4}
.vv-ring .bg{stroke:color-mix(in srgb,var(--fg) 16%,transparent)}
.vv-ring .fg{stroke:#DF6D2E;stroke-linecap:round;transition:stroke-dashoffset .2s}
.vv-sec__t{display:flex;flex-direction:column;min-width:0;max-width:min(260px,34vw)}
.vv-sec__t small{font:600 .6875rem/1.2 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--fg) 74%,transparent)}
.vv-sec__t b{font:600 .875rem/1.25 var(--body,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vv-btn{border:1.5px solid var(--fg);background:transparent;color:var(--fg);border-radius:999px;padding:7px 12px;font:600 .8125rem/1 var(--body,inherit);cursor:pointer;white-space:nowrap}
.vv-btn:hover{background:var(--fg);color:var(--bg)}
.vv-btn[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.vv-btn em{font-style:normal;display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:color-mix(in srgb,var(--fg) 14%,transparent);margin-left:4px;font-size:.75rem}
.vv-btn.has em{background:#DF6D2E;color:#fff}
.vv-sq{padding:7px 9px}
.vv-btn:focus-visible,.vv-sec:focus-visible{outline:3px solid #1D68DC;outline-offset:2px}

body.vv-focus .ar-text>*{opacity:.22;transition:opacity .3s}
body.vv-focus .ar-text>.vv-on{opacity:1}
body.vv-focus .ar-text>h2{opacity:.5}
body.vv-focus .ar-text>h2.vv-on{opacity:1}

.vv-bulle{position:fixed;z-index:70;display:flex;gap:2px;padding:4px;border-radius:12px;background:var(--fg);box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .15s,transform .15s}
.vv-bulle.on{opacity:1;pointer-events:auto;transform:none}
.vv-bulle button{border:0;background:transparent;color:var(--bg);font:600 .8125rem/1 var(--body,inherit);padding:9px 12px;border-radius:8px;cursor:pointer}
.vv-bulle button:hover{background:color-mix(in srgb,var(--bg) 22%,transparent)}
.ar-text ::selection{background:#F3C9A8;color:#0A1C33}

.vv-toast{position:fixed;left:50%;top:78px;z-index:65;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border:2px solid var(--fg);border-radius:14px;background:var(--card,#fff);box-shadow:4px 4px 0 var(--fg);transform:translate(-50%,-30px);opacity:0;transition:transform .35s,opacity .35s;max-width:calc(100vw - 20px);font-size:.9375rem}
.vv-toast.on{transform:translate(-50%,0);opacity:1}
.vv-go{border:0;border-radius:999px;background:#DF6D2E;color:#fff;font:700 .875rem/1 var(--body,inherit);padding:9px 14px;cursor:pointer}
.vv-no{border:0;background:transparent;color:var(--fg);font-size:1.25rem;line-height:1;cursor:pointer;padding:4px 8px}

.vv-tir{position:fixed;right:0;top:0;bottom:0;z-index:80;width:min(400px,100vw);padding:20px 20px 16px;border-left:2px solid var(--fg);background:var(--card,#fff);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:-12px 0 40px rgba(0,0,0,.18)}
.vv-tir.on{transform:none}
.vv-tir__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.vv-tir__h b{font:700 1.25rem/1.2 var(--titre,inherit)}
.vv-x{border:1.5px solid var(--fg);background:transparent;color:var(--fg);width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer}
.vv-tir__a{font-size:.875rem;line-height:1.5;margin:0 0 12px;color:color-mix(in srgb,var(--fg) 74%,transparent)}
.vv-tir:not(.vide) .vv-tir__a{display:none}
.vv-list{list-style:none;margin:0;padding:0;overflow:auto;flex:1;display:flex;flex-direction:column;gap:12px}
.vv-list li{position:relative;padding:12px 14px;border:1.5px solid var(--fg);border-radius:14px;background:var(--bg)}
.vv-list q{display:block;quotes:none;font:italic 500 1rem/1.5 var(--serif,Georgia,serif)}
.vv-list small{display:block;margin-top:6px;font:600 .6875rem/1.3 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--fg) 74%,transparent)}
.vv-del{margin-top:8px;border:0;background:transparent;color:color-mix(in srgb,var(--fg) 74%,transparent);text-decoration:underline;font:inherit;font-size:.8125rem;cursor:pointer;padding:0}
.vv-tir__f,.vv-fin__b{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.vv-b{border:2px solid var(--fg);background:var(--fg);color:var(--bg);border-radius:999px;padding:10px 16px;font:700 .875rem/1 var(--body,inherit);cursor:pointer;text-decoration:none}
.vv-b--ghost{background:transparent;color:var(--fg)}
.vv-b:hover{box-shadow:3px 3px 0 #DF6D2E}
.vv-tir.vide .vv-tir__f{display:none}

.vv-fin{margin:44px 0 0;padding:22px 24px 24px;border:2px solid var(--fg);border-radius:20px;background:var(--card,#fff);box-shadow:6px 6px 0 var(--fg)}
.vv-fin__k{font:600 .75rem/1.3 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;color:color-mix(in srgb,var(--fg) 74%,transparent)}
.vv-fin__p{margin:0;font-size:1rem;line-height:1.55;color:color-mix(in srgb,var(--fg) 82%,transparent)}
.vv-fin.vide{border-style:dashed;box-shadow:none}
.vv-fin__l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vv-fin__l li{padding-left:16px;border-left:4px solid #DF6D2E}
.vv-fin__l q{quotes:none;font:italic 500 1.0625rem/1.5 var(--serif,Georgia,serif)}

@media(max-width:700px){
  .vv-pill{bottom:8px;gap:4px;padding:5px 6px}
  .vv-sec__t{max-width:34vw}
  .vv-sq{display:none}
  .vv-btn{padding:7px 10px}
  .vv-toast{top:64px}
}
@media(prefers-reduced-motion:reduce){.vv-pill,.vv-tir,.vv-toast,.vv-bulle,.vv-dot,body.vv-focus .ar-text>*{transition:none}.vv-pill.bump{animation:none}}
@media print{.vv-pill,.vv-tir,.vv-bulle,.vv-toast,.vv-track{display:none!important}}

/* carte de droite qui suit la lecture */
.vv-promo-w{position:absolute;top:0;bottom:0;left:calc(100% + 40px)}
.vv-promo{position:sticky;top:112px;padding:18px 18px 16px;border:2px solid var(--fg);border-radius:20px;background:var(--card,#fff);box-shadow:5px 5px 0 var(--fg)}
.vv-promo__k{margin:0 0 8px;font:600 .6875rem/1.3 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--fg) 74%,transparent)}
.vv-promo__h{margin:0;font:700 1.375rem/1.15 var(--titre,inherit);letter-spacing:-.01em;text-wrap:balance}
.vv-promo__h em{font-family:var(--serif,Georgia,serif);font-style:italic;font-weight:600;color:#DF6D2E}
.vv-promo__p{margin:10px 0 14px;font-size:.9375rem;line-height:1.5;color:color-mix(in srgb,var(--fg) 82%,transparent)}
.vv-promo__cta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 18px;border-radius:999px;background:#DF6D2E;color:#fff;text-decoration:none;font:700 .9375rem/1 var(--body,inherit);box-shadow:3px 3px 0 var(--fg);transition:transform .2s,box-shadow .2s}
.vv-promo__cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--fg)}
.vv-promo__cta b{transition:transform .2s}.vv-promo__cta:hover b{transform:translateX(4px)}
.vv-promo__l{display:inline-block;margin-top:12px;font-size:.875rem;font-weight:600;color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.vv-promo__p2{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1.5px dashed color-mix(in srgb,var(--fg) 24%,transparent);font:600 .75rem/1 var(--mono,monospace);color:color-mix(in srgb,var(--fg) 74%,transparent)}
.vv-promo__p2 i{flex:1;height:6px;border-radius:4px;background:color-mix(in srgb,var(--fg) 14%,transparent);overflow:hidden}
.vv-promo__p2 u{display:block;height:100%;width:0;background:#DF6D2E;border-radius:4px;text-decoration:none;transition:width .2s}
.vv-promo a:focus-visible{outline:3px solid #1D68DC;outline-offset:3px}

/* même catégorie : une carte à la une, les autres en pile */
.ar-same ul{display:grid!important;gap:14px!important;grid-template-columns:1fr!important;margin:0;padding:0;list-style:none}
@media(min-width:860px){
  .ar-same ul{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important}
  .ar-same li.vv-first{grid-row:1 / span 3}
}
.ar-same li{display:block;margin:0}
.ar-same a.vv-card{position:relative;display:grid!important;grid-template-columns:auto 1fr auto;grid-template-areas:"n m c" "n t c" "n t g";gap:2px 14px;align-items:start;height:100%;padding:16px 18px!important;border:2px solid var(--fg)!important;border-radius:18px!important;background:var(--card,#fff)!important;color:var(--fg)!important;text-decoration:none;box-shadow:4px 4px 0 var(--fg)!important;transition:transform .2s,box-shadow .2s}
.ar-same a.vv-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #DF6D2E!important}
.ar-same a.vv-card:focus-visible{outline:3px solid #1D68DC;outline-offset:3px}
.ar-same .vv-card .mono{grid-area:m}
.ar-same .vv-card b{grid-area:t;font:700 1.0625rem/1.3 var(--serif,Georgia,serif)}
.ar-same .vv-n{grid-area:n;align-self:start;font:700 1.75rem/1 var(--titre,inherit);font-style:normal;color:#DF6D2E;min-width:2ch}
.ar-same .vv-min{grid-area:c;font:600 .75rem/1 var(--mono,monospace);font-style:normal;padding:6px 10px;border:1.5px solid var(--fg);border-radius:999px;white-space:nowrap}
.ar-same .vv-cgo{grid-area:g;justify-self:end;align-self:end;font:700 .875rem/1 var(--body,inherit);margin-top:10px}
.ar-same .vv-cgo b{display:inline-block;transition:transform .2s}
.ar-same a.vv-card:hover .vv-cgo b{transform:translateX(5px)}
.vv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ar-same li.vv-first a.vv-card{background:var(--fg)!important;color:var(--bg)!important;grid-template-areas:"n m c" "t t t" "g g g";padding:22px 24px!important;min-height:230px;align-content:space-between}
.ar-same li.vv-first .vv-card b{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;color:var(--bg);align-self:center;margin-top:18px}
.ar-same li.vv-first .vv-n{color:#ffb89c;font-size:2.25rem}
.ar-same li.vv-first .vv-min{border-color:var(--bg)}
.ar-same li.vv-first .vv-cgo{justify-self:start;margin-top:18px;padding:10px 16px;border-radius:999px;background:#DF6D2E;color:#fff}
@media(max-width:859px){.ar-same li.vv-first a.vv-card{min-height:0}}
@media(max-width:1180px){.vv-promo-w{display:none!important}}
.vv-promo__h{font-size:1.2rem!important}
.ar-same li.vv-first .vv-card .mono{color:#C3CAE3!important}

/* mobile : la pastille de lecture remplace l'onglet Sommaire (sinon elle le cache) ; son nom de partie ouvre le sommaire */
@media(max-width:899px){
  body:has(.vv-pill.on) .rail.js-rail:not(.is-open) .rail-btn{opacity:0;pointer-events:none;visibility:hidden}
  .vv-sec::after{content:"Sommaire ▴";position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
