/* ==========================================================================
   Eshope v2 : illustrations animées (SVG) et sections premium
   Animations limitées à transform / opacity / stroke-dashoffset.
   ========================================================================== */

.illu { width: 100%; height: auto; overflow: visible; display: block; }

/* Palette des illustrations */
.illu .f-paper { fill: var(--paper); }
.illu .f-paper2 { fill: var(--paper-2); }
.illu .f-paper-a { fill: oklch(0.975 0.012 85 / 0.72); }
.illu .f-ink { fill: var(--ink); }
.illu .f-inksoft { fill: oklch(0.25 0.04 225 / 0.5); }
.illu .f-muted { fill: oklch(0.25 0.04 225 / 0.16); }
.illu .f-teal { fill: var(--teal); }
.illu .f-tealsoft { fill: oklch(0.69 0.115 200 / 0.16); }
.illu .f-tape { fill: var(--tape); }
.illu .f-pencil { fill: var(--pencil); }
.illu .f-none { fill: none; }
.illu .f-dot { fill: oklch(0.25 0.04 225 / 0.13); }
.illu .f-glass { fill: oklch(0.69 0.115 200 / 0.14); }
.illu .f-shadow { fill: oklch(0.25 0.04 225 / 0.14); }

.illu .s-ink { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.illu .s-line { stroke: oklch(0.25 0.04 225 / 0.2); stroke-width: 1.5; }
.illu .s-teal { stroke: var(--teal); stroke-width: 1.5; }
.illu .s-paper { stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; }
.illu .s-pencil { stroke: var(--pencil); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.illu .s-guide { stroke: var(--pencil); stroke-width: 1; stroke-dasharray: 4 5; fill: none; }
.illu .s-gridlight { stroke: oklch(0.975 0.012 85 / 0.14); stroke-width: 1; fill: none; }
.illu path.s-ink:not([class*="f-"]) { fill: none; }

.illu .ih-shadow, .illu .ib-shadow { filter: drop-shadow(0 18px 22px oklch(0.25 0.04 225 / 0.16)); }

.illu text { font-family: var(--font-body); }
.illu .t-url { font-size: 10px; font-weight: 500; fill: var(--ink-3); }
.illu .t-search { font-size: 11px; font-weight: 600; fill: var(--ink); }
.illu .t-badge { font-size: 10px; font-weight: 700; fill: var(--paper); text-anchor: middle; }
.illu .t-tag { font-size: 10px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.illu .t-small { font-size: 10.5px; font-weight: 600; fill: var(--ink-2); }
.illu .t-light { font-size: 11px; font-weight: 600; fill: oklch(0.975 0.012 85 / 0.75); }
.illu .t-code { font-family: var(--font-display); font-size: 30px; font-weight: 800; fill: var(--tape); }
.illu .t-hand { font-family: var(--font-hand); font-size: 20px; fill: var(--pencil); }
.illu .t-hand-light { font-family: var(--font-hand); font-size: 18px; fill: var(--tape); }

/* ---------- Hero ---------- */
.illu .ih-orbit { fill: none; stroke: oklch(0.25 0.04 225 / 0.12); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.illu .ih-orbit--2 { stroke: oklch(0.69 0.115 200 / 0.35); stroke-dasharray: 1 7; }
.illu .ih-orbiter { transform-box: view-box; transform-origin: 300px 275px; animation: v2-spin 22s linear infinite; }

.illu .ib { transform-box: fill-box; transform-origin: center; animation: ib-build 9s var(--ease) infinite both; animation-delay: var(--d, 0s); }
@keyframes ib-build {
    0% { opacity: 0; transform: translateY(12px) scale(.9); }
    7%, 82% { opacity: 1; transform: none; }
    92%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}
.illu .ih-guides { animation: ih-guides 9s ease infinite; }
@keyframes ih-guides { 0%, 4% { opacity: .9; } 34%, 88% { opacity: 0; } 100% { opacity: .9; } }

.illu .ih-cursor { animation: ih-cursor 9s var(--ease) infinite; }
@keyframes ih-cursor {
    0% { transform: translate(560px, 470px); opacity: 0; }
    6% { opacity: 1; }
    22% { transform: translate(169px, 296px); }
    24% { transform: translate(169px, 296px) scale(.85); }
    26% { transform: translate(169px, 296px); }
    44% { transform: translate(214px, 372px); }
    62% { transform: translate(470px, 168px); opacity: 1; }
    72%, 100% { transform: translate(470px, 168px); opacity: 0; }
}
.illu .ih-ripple { fill: none; stroke: var(--teal); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ih-ripple 9s var(--ease) infinite; }
@keyframes ih-ripple { 0%, 23% { opacity: 0; transform: scale(.3); } 25% { opacity: .9; transform: scale(.6); } 34%, 100% { opacity: 0; transform: scale(1.8); } }

.illu .ih-row { animation-duration: 7s; animation-iteration-count: infinite; animation-timing-function: var(--ease); }
.illu .ih-row--a { animation-name: ih-row-a; }
.illu .ih-row--b { animation-name: ih-row-b; }
.illu .ih-row--me { animation-name: ih-row-me; }
@keyframes ih-row-a { 0%, 18% { transform: translateY(0); } 38%, 84% { transform: translateY(26px); } 100% { transform: translateY(0); } }
@keyframes ih-row-b { 0%, 18% { transform: translateY(0); } 38%, 84% { transform: translateY(26px); } 100% { transform: translateY(0); } }
@keyframes ih-row-me { 0%, 18% { transform: translateY(0); } 38%, 84% { transform: translateY(-58px); } 100% { transform: translateY(0); } }
.illu .ih-badge { transform-box: fill-box; transform-origin: center; animation: ih-badge 7s var(--ease) infinite; }
@keyframes ih-badge { 0%, 36% { opacity: 0; transform: scale(.4); } 42%, 84% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(.6); } }

.illu .ih-float { animation: ih-float 6s ease-in-out infinite alternate; }
.illu .ih-float--b { animation-duration: 7.5s; animation-delay: -2s; }
.illu .ih-float--c { animation-duration: 5s; animation-delay: -1s; }
@keyframes ih-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }

.illu .ih-bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: ih-bar 4.5s var(--ease) infinite both; animation-delay: var(--d, 0s); }
@keyframes ih-bar { 0% { transform: scaleY(.12); } 28%, 80% { transform: scaleY(1); } 100% { transform: scaleY(.12); } }
.illu .ih-spark { fill: none; stroke: var(--pencil); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 260; animation: ih-spark 4.5s var(--ease) infinite; }
@keyframes ih-spark { 0%, 10% { stroke-dashoffset: 260; } 45%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 260; } }
.illu .ih-spark-dot { transform-box: fill-box; transform-origin: center; animation: ih-pop 4.5s var(--ease) infinite; }
@keyframes ih-pop { 0%, 40% { transform: scale(0); } 48%, 82% { transform: scale(1); } 100% { transform: scale(0); } }

.illu .ih-notes text, .illu .ih-notes path { animation: ih-note 9s ease infinite; }
@keyframes ih-note { 0%, 30% { opacity: 0; } 38%, 90% { opacity: 1; } 100% { opacity: 0; } }
.illu .ih-twinkle { transform-box: fill-box; transform-origin: center; animation: ih-twinkle 3.2s ease-in-out infinite; }
.illu .ih-twinkle--2 { animation-delay: -1.1s; }
.illu .ih-twinkle--3 { animation-delay: -2.2s; }
@keyframes ih-twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* ---------- Construction ---------- */
.illu .ic-lines rect { transform-box: fill-box; transform-origin: 0 50%; animation: ic-type 6s var(--ease) infinite both; animation-delay: var(--d, 0s); }
@keyframes ic-type { 0% { transform: scaleX(0); } 10%, 82% { transform: scaleX(1); } 94%, 100% { transform: scaleX(0); } }
.illu .ic-caret { animation: ic-blink 1s steps(2) infinite; }
@keyframes ic-blink { 50% { opacity: 0; } }
.illu .ic-drop { animation: ic-drop 6s var(--ease) infinite both; animation-delay: var(--d, 0s); }
@keyframes ic-drop { 0% { opacity: 0; transform: translateY(-40px); } 10%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(10px); } }
.illu .ic-gear { transform-box: fill-box; transform-origin: center; animation: v2-spin 9s linear infinite; }

/* ---------- SEO ---------- */
.illu .is-lens { animation: is-lens 7s var(--ease) infinite; }
@keyframes is-lens {
    0%, 6% { transform: translate(110px, 150px); }
    30% { transform: translate(210px, 205px); }
    55% { transform: translate(120px, 252px); }
    80%, 100% { transform: translate(110px, 150px); }
}
.illu .is-handle { stroke-width: 7; }
.illu .is-curve { fill: none; stroke: var(--tape); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 220; animation: ih-spark-seo 5s var(--ease) infinite; }
@keyframes ih-spark-seo { 0%, 8% { stroke-dashoffset: 220; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 220; } }
.illu .is-dot { transform-box: fill-box; transform-origin: center; animation: ih-pop 5s var(--ease) infinite; }
.illu .is-pin-bounce { animation: is-bounce 2.4s var(--ease) infinite; }
@keyframes is-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 60% { transform: translateY(0); } 70% { transform: translateY(-4px); } }
.illu .is-res { transform-box: fill-box; transform-origin: center; animation: is-res 7s var(--ease) infinite; }
@keyframes is-res { 0%, 20% { transform: scale(1); } 26% { transform: scale(1.03); } 32%, 100% { transform: scale(1); } }

/* ---------- Publicité ---------- */
.illu .ia-arrow { animation: ia-arrow 5s var(--ease) infinite; }
@keyframes ia-arrow { 0% { transform: translate(150px, -150px); opacity: 0; } 10% { opacity: 1; } 24%, 82% { transform: translate(0, 0); opacity: 1; } 94%, 100% { transform: translate(0, 0); opacity: 0; } }
.illu .ia-hit { fill: none; stroke: var(--pencil); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ia-hit 5s var(--ease) infinite; }
@keyframes ia-hit { 0%, 23% { opacity: 0; transform: scale(1); } 25% { opacity: 1; } 45%, 100% { opacity: 0; transform: scale(3.2); } }
.illu .ia-core { transform-box: fill-box; transform-origin: center; animation: ia-core 5s var(--ease) infinite; }
@keyframes ia-core { 0%, 23% { transform: scale(1); } 27% { transform: scale(1.2); } 34%, 100% { transform: scale(1); } }
.illu .ia-click { transform-box: fill-box; transform-origin: center; animation: ia-click 2.5s var(--ease) infinite; }
@keyframes ia-click { 0%, 100% { transform: scale(1); } 45% { transform: scale(.88); } 55% { transform: scale(1); } }
.illu .ia-click-ring { fill: oklch(0.69 0.115 200 / 0.25); transform-box: fill-box; transform-origin: center; animation: ia-ring 2.5s var(--ease) infinite; }
@keyframes ia-ring { 0%, 40% { transform: scale(.4); opacity: 0; } 50% { opacity: 1; } 90%, 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Radar ---------- */
.illu .ir-ring { fill: none; stroke: oklch(0.975 0.012 85 / 0.16); stroke-width: 1.5; }
.illu .ir-axis { stroke: oklch(0.975 0.012 85 / 0.1); stroke-width: 1; stroke-dasharray: 3 6; }
.illu .ir-stop0 { stop-color: oklch(0.69 0.115 200 / 0); }
.illu .ir-stop1 { stop-color: oklch(0.69 0.115 200 / 0.55); }
.illu .ir-beam { stroke: var(--teal); stroke-width: 2.5; }
.illu .ir-sweep { transform-box: fill-box; transform-origin: 0% 100%; animation: v2-spin 4s linear infinite; }
.illu .ir-blip { fill: var(--tape); transform-box: fill-box; transform-origin: center; animation: ir-blip 4s ease-out infinite both; animation-delay: var(--d, 0s); }
@keyframes ir-blip { 0% { opacity: 0; transform: scale(.3); } 6% { opacity: 1; transform: scale(1.4); } 14% { transform: scale(1); } 70% { opacity: .9; } 100% { opacity: 0; } }
.illu .ir-center { fill: var(--tape); }

/* ==========================================================================
   Sections premium de l'accueil
   ========================================================================== */

/* Hero : scène illustrée */
.v2-hero--premium { position: relative; }
.v2-hero--premium::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 70% at 78% 45%, oklch(0.69 0.115 200 / 0.14), transparent 70%),
        radial-gradient(40% 50% at 95% 90%, oklch(0.86 0.14 85 / 0.18), transparent 70%);
}
.v2-hero--premium .v2-hero__grid { position: relative; grid-template-columns: .95fr 1.15fr; }
.v2-hero--premium .v2-h1 { font-size: clamp(2.5rem, 5.4vw, 4.7rem); }
.v2-hero__scene .illu-hero { transform: scale(1.08); transform-origin: 40% 50%; }
.v2-hero__scene { position: relative; margin-right: clamp(-3rem, -3vw, 0rem); }

/* Bandeau de confiance */
.v2-trust { border-top: 1px solid var(--line); }
.v2-trust ul { list-style: none; padding: 1.6rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2.5rem; }
.v2-trust li { display: flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--ink-2); font-size: .95rem; }
.v2-trust svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--teal-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Piliers */
.v2-pillars__head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 5rem; align-items: end; margin-bottom: clamp(3rem, 7vw, 6rem); }
.v2-pillar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
.v2-pillar + .v2-pillar { border-top: 1px solid var(--line); }
.v2-pillar:nth-of-type(even) .v2-pillar__stage { order: -1; }
.v2-pillar__stage {
    position: relative; border-radius: 28px; padding: clamp(1rem, 2.5vw, 2rem);
    background:
        linear-gradient(oklch(0.25 0.04 225 / 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, oklch(0.25 0.04 225 / 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--paper-2);
    border: 1.5px solid oklch(0.25 0.04 225 / 0.12);
}
.v2-pillar__stage::after {
    content: attr(data-label); position: absolute; top: -14px; left: 28px; padding: .3rem .8rem; border-radius: 999px;
    background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.v2-pillar__n { font-family: var(--font-hand); color: var(--pencil); font-size: 1.25rem; }
body.v2 .v2-pillar h3 { color: var(--ink); }
.v2-pillar h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.035em; line-height: 1.04; margin: .4rem 0 1.1rem; }
.v2-pillar p { color: var(--ink-2); max-width: 46ch; }
.v2-pillar ul { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; gap: .7rem; }
.v2-pillar li { display: flex; gap: .75rem; align-items: baseline; font-weight: 500; }
.v2-pillar li::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--tape); border: 1.5px solid var(--ink); transform: rotate(45deg) translateY(-1px); }
.v2-pillar__links { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }

.v2-also { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: clamp(2rem, 5vw, 3.5rem); padding: 1.6rem 1.8rem; border-radius: 22px; border: 1.5px dashed oklch(0.25 0.04 225 / 0.3); }
.v2-also p { font-family: var(--font-hand); color: var(--pencil); font-size: 1.2rem; margin-right: .5rem; }
.v2-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 600; transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
body.v2 :where(main) a.v2-chip:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

/* Audit : bande sombre + radar */
.v2-audit--dark { background: var(--night); color: var(--paper); border: 0; overflow: hidden; position: relative; }
.v2-audit--dark::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(50% 80% at 85% 50%, oklch(0.69 0.115 200 / 0.18), transparent 70%);
}
.v2-audit--dark .v2-audit__inner { position: relative; grid-template-columns: 1.1fr .9fr; align-items: center; }
.v2-audit--dark .v2-display { color: var(--paper); max-width: 17ch; font-size: clamp(2.2rem, 4.4vw, 3.9rem); }
.v2-audit--dark p { color: oklch(0.86 0.02 225); max-width: 46ch; margin: 1.5rem 0 2rem; }
.v2-audit--dark .v2-radar { max-width: 420px; justify-self: end; width: 100%; }

@media (max-width: 960px) {
    .v2-hero--premium .v2-hero__grid, .v2-pillars__head, .v2-pillar, .v2-audit--dark .v2-audit__inner { grid-template-columns: 1fr; }
    .v2-pillar:nth-of-type(even) .v2-pillar__stage { order: 0; }
    .v2-hero__scene { margin: 0; }
    .v2-hero__scene .illu-hero { transform: none; }
    .v2-audit--dark .v2-radar { justify-self: center; max-width: 320px; }
    .v2-trust ul { justify-content: flex-start; }
}