/* ==========================================================================
   Eshope v2 : kit de lecture des contenus longs (voir assets/js/eshope-v2-read.js)
   ========================================================================== */

body.v2 .v2-read { display: flow-root; }
body.v2 .v2-read :where(p, li) { line-height: 1.75; }
body.v2 .v2-read > :where(p) { max-width: 72ch; }

/* Mini-illustrations flottantes à côté des titres */
.v2-spot { width: clamp(120px, 15vw, 172px); margin: .25rem 0 1rem; shape-margin: 1rem; }
.v2-spot--right { float: right; margin-left: clamp(1rem, 3vw, 2.5rem); }
.v2-spot--left { float: left; margin-right: clamp(1rem, 3vw, 2.5rem); }
.v2-spot .illu { filter: drop-shadow(0 12px 18px oklch(0.25 0.04 225 / 0.12)); }
@media (max-width: 600px) { .v2-spot { width: 96px; } }

/* Photos intercalées « scotchées » */
.v2-photo { clear: both; position: relative; margin: clamp(2rem, 5vw, 3.5rem) auto; max-width: 820px; padding-top: 10px; }
.v2-photo img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; border: 1.5px solid var(--ink); border-radius: 18px; transform: rotate(-.6deg); box-shadow: 12px 12px 0 oklch(0.69 0.115 200 / 0.25); }
.v2-photo:nth-of-type(even) img { transform: rotate(.6deg); box-shadow: 12px 12px 0 oklch(0.86 0.14 85 / 0.5); }
.v2-photo .v2-tape { position: absolute; top: 0; left: 50%; z-index: 2; width: 110px; height: 30px; transform: translateX(-50%) rotate(-3deg); background: oklch(0.86 0.14 85 / 0.85); clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 45%); }
.v2-photo figcaption { border: 0 !important; font-style: normal; padding: 0 1rem 0 0; margin-top: 1rem; font-size: 1.1rem; text-align: right; padding-right: 1rem; }
.v2-photo figcaption::before { content: '↑ '; }

/* Listes en cases cochées */
body.v2 .v2-read ul:not([class]) { list-style: none; padding-left: 0; display: flow-root; }
body.v2 .v2-read ul:not([class]) > li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
body.v2 .v2-read ul:not([class]) > li::before {
    content: ''; position: absolute; left: 0; top: .45em; width: 18px; height: 18px; border-radius: 6px;
    background: var(--tape) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23142534' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
    border: 1.5px solid var(--ink);
}
body.v2 .v2-read ol:not([class]) { counter-reset: v2ol; list-style: none; padding-left: 0; display: flow-root; }
body.v2 .v2-read ol:not([class]) > li { counter-increment: v2ol; position: relative; padding-left: 2.6rem; margin-bottom: .8rem; }
body.v2 .v2-read ol:not([class]) > li::before { content: counter(v2ol); position: absolute; left: 0; top: .1em; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 800; font-size: .85rem; }

/* Encadrés « à retenir » : étiquette manuscrite */
body.v2 .v2-read .highlight-box { position: relative; margin-top: 2.5rem !important; }
body.v2 .v2-read .highlight-box::before { content: 'bon à savoir'; position: absolute; top: -.9rem; left: 1.25rem; padding: .1rem .7rem; background: var(--tape); border: 1.5px solid var(--ink); border-radius: 999px; font-family: var(--font-hand); font-size: 1rem; color: var(--ink); transform: rotate(-2deg); }

/* Sommaire des articles */
.v2-toc { margin: 0 0 2.5rem; padding: 1.4rem 1.6rem; border-radius: 18px; background: var(--paper-2); border: 1.5px solid oklch(0.25 0.04 225 / 0.12); }
.v2-toc__title { font-size: 1.15rem; margin: 0 0 .6rem !important; }
.v2-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; counter-reset: toc; }
.v2-toc li { counter-increment: toc; break-inside: avoid; margin-bottom: .45rem; font-size: .95rem; line-height: 1.35; }
.v2-toc li::before { content: counter(toc, decimal-leading-zero) ' '; font-family: var(--font-hand); color: var(--pencil); }
body.v2 .v2-toc a { color: var(--ink-2) !important; text-decoration: none !important; }
body.v2 .v2-toc a:hover, body.v2 .v2-toc a.is-active { color: var(--teal-deep) !important; }
@media (min-width: 1420px) {
    .v2-has-toc { position: relative; }
    .v2-toc { position: absolute; top: 0; bottom: 0; left: -248px; width: 210px; margin: 0; padding: 0; background: none; border: 0; }
    .v2-toc__title, .v2-toc ol { position: sticky; top: 100px; }
    .v2-toc ol { columns: 1; top: 135px; }
    .v2-toc li { font-size: .88rem; padding-left: .75rem; border-left: 2px solid var(--line); margin: 0; padding-block: .3rem; }
    .v2-toc li:has(a.is-active) { border-left-color: var(--pencil); }
}
@media (max-width: 700px) { .v2-toc ol { columns: 1; } }

/* Barre de progression de lecture */
.v2-progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 80; pointer-events: none; }
.v2-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--tape)); transform-origin: 0 50%; transform: scaleX(0); }

/* Illustration des sections « split » des pages métiers */
.v2-split-illu .illu { max-width: 520px; margin-inline: auto; }
.v2-split-illu--dark { background: var(--paper); border-radius: 26px; padding: clamp(1rem, 3vw, 2rem); border: 1.5px solid var(--paper); box-shadow: 10px 10px 0 var(--teal); }

/* Animations des mini-illustrations */
.illu .sp-shake { transform-box: fill-box; transform-origin: center; animation: sp-shake 2.8s ease-in-out infinite; }
@keyframes sp-shake { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-6deg); } 68% { transform: rotate(6deg); } 72% { transform: rotate(-5deg); } 76% { transform: rotate(4deg); } 80% { transform: rotate(0); } }
.illu .sp-wave { animation: sp-wave 2.8s ease-out infinite; }
.illu .sp-wave--2 { animation-delay: .2s; }
@keyframes sp-wave { 0%, 58% { opacity: 0; } 66% { opacity: 1; } 90%, 100% { opacity: 0; } }
.illu .sp-pulse { transform-box: fill-box; transform-origin: center; animation: sp-pulse 2.4s var(--ease) infinite; }
@keyframes sp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .7; } }
.illu .sp-pop { transform-box: fill-box; transform-origin: center; animation: sp-popk 3.2s var(--ease) infinite; }
@keyframes sp-popk { 0%, 20% { transform: scale(.6); } 30%, 85% { transform: scale(1); } 100% { transform: scale(.6); } }
.illu .sp-draw { stroke-dasharray: 160; animation: sp-draw 3.2s var(--ease) infinite; }
@keyframes sp-draw { 0%, 25% { stroke-dashoffset: 160; } 55%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 160; } }
.illu .sp-needle { transform-box: view-box; transform-origin: 80px 100px; animation: sp-needle 3.5s var(--ease) infinite; }
@keyframes sp-needle { 0%, 100% { transform: rotate(-70deg); } 45%, 75% { transform: rotate(58deg); } }
.illu .sp-star { transform-box: fill-box; transform-origin: center; animation: sp-star 3s var(--ease) infinite both; animation-delay: var(--d, 0s); }
@keyframes sp-star { 0% { transform: scale(0) rotate(-40deg); } 15%, 85% { transform: scale(1) rotate(0); } 100% { transform: scale(0); } }
.illu .sp-swing { transform-box: view-box; transform-origin: 80px 14px; animation: sp-swing 3s ease-in-out infinite alternate; }
@keyframes sp-swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.illu .sp-lens { animation: sp-lens 4s var(--ease) infinite; }
@keyframes sp-lens { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-30px, -18px); } 66% { transform: translate(-18px, 18px); } }
.illu .sp-bubble { transform-box: fill-box; transform-origin: 20% 100%; animation: sp-bubble 4s var(--ease) infinite both; animation-delay: var(--d, 0s); }
@keyframes sp-bubble { 0% { transform: scale(0); opacity: 0; } 12%, 80% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(.9); opacity: 0; } }
.illu .sp-page { animation: sp-page 4s var(--ease) infinite both; animation-delay: var(--d, 0s); }
@keyframes sp-page { 0% { transform: translateY(16px); opacity: 0; } 15%, 85% { transform: none; opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
.illu .sp-arrow { animation: sp-arrow 3.2s var(--ease) infinite; }
@keyframes sp-arrow { 0% { transform: translate(50px, -50px); opacity: 0; } 12% { opacity: 1; } 28%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.illu .sp-cart { animation: sp-cart 3s ease-in-out infinite; }
@keyframes sp-cart { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(8px); } }
.illu .sp-pencil { animation: sp-pencil 3.2s var(--ease) infinite; }
@keyframes sp-pencil { 0%, 25% { transform: translate(-80px, 50px); } 55%, 88% { transform: none; } 100% { transform: translate(-80px, 50px); } }

/* Notifications de l'illustration « appels » */
.illu .icl-notif { animation: icl-notif 6.6s var(--ease) infinite both; animation-delay: var(--d, 0s); }
@keyframes icl-notif { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 6%, 55% { opacity: 1; transform: none; } 65%, 100% { opacity: 0; transform: translateY(-8px); } }
.illu .icl-btn { transform-box: fill-box; transform-origin: center; animation: ia-click 2.2s var(--ease) infinite; }
.illu .icl-ring { fill: none; stroke: var(--teal); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: icl-ring 2.2s var(--ease) infinite; }
@keyframes icl-ring { 0%, 40% { transform: scale(.6); opacity: 0; } 50% { opacity: 1; } 90%, 100% { transform: scale(2.4); opacity: 0; } }
/* Paniers / validation de l'illustration boutique */
.illu .is-fly { animation: is-fly 4s var(--ease) infinite; }
@keyframes is-fly { 0%, 10% { transform: translate(140px, 120px); opacity: 0; } 15% { opacity: 1; } 45% { transform: translate(380px, 110px); opacity: 1; } 50%, 100% { transform: translate(380px, 110px); opacity: 0; } }
.illu .is-count { transform-box: fill-box; transform-origin: center; animation: ih-pop 4s var(--ease) infinite; }
.illu .is-cart { animation: sp-cart 4s ease-in-out infinite; }
.illu .is-ok { transform-box: fill-box; transform-origin: center; animation: ih-pop 4s var(--ease) infinite; animation-delay: .6s; }
/* Réseaux sociaux / identité */
.illu .isc-pop { transform-box: fill-box; transform-origin: center; animation: isc-pop 3s var(--ease) infinite both; animation-delay: var(--d, 0s); }
@keyframes isc-pop { 0% { transform: translateY(20px) scale(.4); opacity: 0; } 15% { transform: translateY(0) scale(1); opacity: 1; } 70% { transform: translateY(-70px); opacity: 1; } 100% { transform: translateY(-110px); opacity: 0; } }
.illu .isc-heart { transform-box: fill-box; transform-origin: center; animation: sp-pulse 1.6s var(--ease) infinite; }
.illu .isc-day { transform-box: fill-box; transform-origin: center; animation: sp-popk 3.6s var(--ease) infinite both; animation-delay: var(--d, 0s); }
.illu .ibr-draw { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 320; animation: ibr-draw 5s var(--ease) infinite; }
.illu .ibr-draw--2 { stroke: var(--pencil); animation-delay: .8s; }
@keyframes ibr-draw { 0%, 8% { stroke-dashoffset: 320; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 320; } }
.illu .ibr-pen { animation: ibr-pen 5s var(--ease) infinite; }
@keyframes ibr-pen { 0% { transform: translate(80px, 160px); } 15% { transform: translate(125px, 70px); } 30% { transform: translate(170px, 160px); } 45% { transform: translate(80px, 160px); } 60%, 100% { transform: translate(145px, 135px); } }
.illu .ibr-sw { transform-box: fill-box; transform-origin: 50% 100%; animation: ih-bar 4.5s var(--ease) infinite both; animation-delay: var(--d, 0s); }