/* vigieFlow — site vitrine : animation de présentation, illustrations animées, modules, questions, menu mobile. */

/* ---------- Menu mobile (sans script) ---------- */
.fo-burger-cb{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.fo-burger{display:none;width:42px;height:42px;border-radius:10px;cursor:pointer;place-items:center;margin-left:auto;border:1px solid var(--line)}
.fo-burger span,.fo-burger span::before,.fo-burger span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .25s}
.fo-burger span::before,.fo-burger span::after{content:"";position:absolute;left:0}
.fo-burger span::before{top:-6px}.fo-burger span::after{top:6px}
.fo-head.on-dark:not(.scrolled) .fo-burger{color:#fff;border-color:rgba(255,255,255,.25)}
.fo-burger-cb:focus-visible+.fo-burger{outline:2px solid var(--fo-teal);outline-offset:2px}
@media (max-width:980px){
  .fo-head-in{flex-wrap:wrap}
  .fo-burger{display:grid}
  .fo-head-cta{order:2}
  .fo-burger-cb:checked~.fo-nav{display:flex;flex-direction:column;order:3;flex-basis:100%;margin:0;padding:8px 0 4px}
  .fo-burger-cb:checked~.fo-nav a{padding:10px 4px}
  .fo-burger-cb:checked+.fo-burger span{transform:rotate(45deg)}
  .fo-burger-cb:checked+.fo-burger span::before{transform:translateY(6px) rotate(-90deg)}
  .fo-burger-cb:checked+.fo-burger span::after{opacity:0}
  .fo-head-cta .fo-btn{display:none}
}

/* ---------- Boutons et titres ---------- */
.fo-play{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);margin-right:2px}
.fo-play::before{content:"";border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.fo-feat-n{display:inline-block;font-family:var(--f-display);font-weight:800;font-size:.86rem;letter-spacing:.12em;color:var(--teal-ink);margin-bottom:10px}

/* ---------- Animation de présentation ---------- */
.fo-motion-sec{background:radial-gradient(70% 60% at 50% 0%,rgba(0,191,200,.08),transparent 70%),var(--surface)}
.mo{max-width:1040px;margin:0 auto}
.mo-stage{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 70% at 85% 15%,rgba(0,191,200,.28),transparent 60%),radial-gradient(55% 60% at 10% 95%,rgba(10,132,208,.3),transparent 60%),linear-gradient(160deg,#061226,#0A1C38 60%,#0B2A4A);
  box-shadow:0 40px 80px rgba(10,28,56,.28),0 0 0 1px rgba(255,255,255,.06) inset;color:#E8F0F8}
.mo-glow{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent)}
.mo-prog{position:absolute;top:18px;left:22px;right:22px;z-index:3;display:flex;gap:6px;margin:0;padding:0;list-style:none}
.mo-prog li{flex:1}
.mo-prog button{display:block;width:100%;padding:8px 0;border:0;background:none;cursor:pointer}
.mo-prog i{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.mo-prog i::after{content:"";position:absolute;inset:0;background:var(--fo-teal);transform:scaleX(0);transform-origin:left}
.mo-prog li.done i::after{transform:scaleX(1)}
.mo-prog li.cur i::after{animation:moFill var(--mo-d,3.3s) linear forwards}
.mo.paused .mo-prog li.cur i::after{animation-play-state:paused}
@keyframes moFill{to{transform:scaleX(1)}}
.mo-scene{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:28px;padding:64px 44px 40px;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.mo-scene.on{opacity:1;visibility:visible;transition:opacity .5s}
.mo-vis{display:grid;place-items:center;transform:translateY(16px) scale(.97);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mo-scene.on .mo-vis{transform:none}
.mo-cap{display:flex;flex-direction:column;gap:10px;transform:translateX(18px);opacity:0;transition:transform .6s .15s cubic-bezier(.2,.7,.2,1),opacity .6s .15s}
.mo-scene.on .mo-cap{transform:none;opacity:1}
.mo-num{font-family:var(--f-mono);font-size:.78rem;color:var(--fo-teal);letter-spacing:.1em}
.mo-cap h3{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:800;font-stretch:108%;color:#fff;line-height:1.15}
.mo-cap .fo-rich{color:#B9C8DB;font-size:1.02rem;line-height:1.55}
.mo-ctrl{position:absolute;right:18px;bottom:16px;z-index:3;display:flex;gap:8px}
.mo-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(6,18,38,.55);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.mo-btn:hover{border-color:var(--fo-teal)}
.mo-btn:focus-visible,.mo-prog button:focus-visible{outline:2px solid var(--fo-teal);outline-offset:2px}
.mo-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mo-i-pause{width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.mo-i-play{display:none;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.mo.paused .mo-i-pause{display:none}.mo.paused .mo-i-play{display:block}
@media (max-width:760px){
  .mo-stage{aspect-ratio:auto;min-height:560px}
  .mo-scene{grid-template-columns:minmax(0,1fr);align-content:center;padding:56px 18px 70px;gap:18px}
  .mo-cap{transform:translateY(10px)}
}

/* ---------- Grille des modules ---------- */
.fo-mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fo-mod{position:relative;border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--surface);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;overflow:hidden}
.fo-mod::after{content:"";position:absolute;inset:auto -40% -60% auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(0,191,200,.18),transparent 70%);opacity:0;transition:opacity .4s}
.fo-mod:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(10,28,56,.12);border-color:transparent}
.fo-mod:hover::after{opacity:1}
.fo-mod h3{font-size:1.08rem;margin-bottom:8px}
.fo-mod .fo-rich{color:var(--muted);font-size:.93rem;line-height:1.55}
.fo-mod .fo-ico{margin-bottom:16px;transition:transform .4s}
.fo-mod:hover .fo-ico{transform:rotate(-6deg) scale(1.08)}
@media (max-width:1100px){.fo-mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fo-mods{grid-template-columns:minmax(0,1fr)}}

/* ---------- Questions fréquentes ---------- */
.fo-faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:48px;align-items:start}
.fo-faq{display:flex;flex-direction:column;gap:10px}
.fo-faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:box-shadow .3s,border-color .3s}
.fo-faq details[open]{border-color:color-mix(in srgb,var(--fo-teal) 45%,var(--line));box-shadow:0 14px 34px rgba(10,28,56,.08)}
.fo-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;font-weight:650;font-size:1.02rem}
.fo-faq summary::-webkit-details-marker{display:none}
.fo-faq summary:focus-visible{outline:2px solid var(--fo-teal);outline-offset:2px;border-radius:14px}
.fo-faq-i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal-soft);position:relative;transition:transform .3s}
.fo-faq-i::before,.fo-faq-i::after{content:"";position:absolute;left:7px;right:7px;top:12px;height:2px;background:var(--teal-ink);border-radius:2px}
.fo-faq-i::after{transform:rotate(90deg);transition:transform .3s}
.fo-faq details[open] .fo-faq-i::after{transform:none}
.fo-faq .fo-rich{padding:0 20px 18px;color:var(--muted);line-height:1.65}
@media (max-width:980px){.fo-faq-wrap{grid-template-columns:minmax(0,1fr);gap:20px}}

/* ---------- Illustrations animées ---------- */
/* Au repos : état final (lisible, sans animation). Les animations partent quand l'illustration entre à l'écran (.in) ou quand sa scène est jouée (.on). */
.vz{width:100%;display:grid;place-items:center;font-family:var(--f-body)}
.vz-card,.vz-win{width:100%;max-width:440px;background:#fff;color:#0E1B2E;border-radius:16px;box-shadow:0 26px 60px rgba(4,12,28,.28);padding:18px;display:flex;flex-direction:column;gap:12px}
.fo-feat-vis .vz-card,.fo-feat-vis .vz-win{box-shadow:0 18px 40px rgba(10,28,56,.14)}
:where(.in,.on) .vz [data-k]{animation-delay:calc(var(--k,0) * 90ms + .2s)}

.vz-win{padding:0;overflow:hidden}
.vz-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#EEF3F8;border-bottom:1px solid #DCE3EB;font-family:var(--f-mono);font-size:.72rem;color:#5A6A7E}
.vz-bar i{width:9px;height:9px;border-radius:50%;background:#C9D3DE}
.vz-bar span{margin-left:8px}
.vz-live{margin-left:auto;font-family:var(--f-body);font-weight:700;color:#17845A;background:#E1F3EA;border-radius:20px;padding:1px 8px}
.vz-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 14px 0}
.vz-kpi{display:flex;flex-direction:column;padding:9px 11px;border-radius:10px;background:#F4F7FA;border:1px solid #E6ECF2}
.vz-kpi span{font-size:.68rem;color:#5A6A7E;text-transform:uppercase;letter-spacing:.06em}
.vz-kpi b{font-family:var(--f-display);font-size:1.25rem}
.vz-kpi em{font-style:normal;font-size:.72rem;color:#17845A;font-weight:700}
.vz-days{display:grid;grid-template-columns:repeat(30,1fr);gap:2px;height:22px;padding:0 14px}
.vz-days i{border-radius:2px;background:#17845A}
.vz-days i.w{background:#D69A1A}
.vz-curve{display:block;width:100%;height:56px}
.vz-curve .l{fill:none;stroke:#0A84D0;stroke-width:2.5;stroke-dasharray:420}
.vz-curve .a{fill:rgba(10,132,208,.1)}
:where(.in,.on) .vz-kpi{animation:vzPop .5s both}
:where(.in,.on) .vz-days i{animation:vzGrowY .35s both;transform-origin:bottom}
:where(.in,.on) .vz-curve .l{animation:vzDraw 1.6s .6s ease both}

.vz-score{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px}
.vz-ring{position:relative;width:118px;height:118px;display:grid;place-items:center;flex:none}
.vz-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.vz-ring circle{fill:none;stroke-width:10}
.vz-ring .t{stroke:#E6ECF2}
.vz-ring .v{stroke:#00BFC8;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:44}
.vz-ring b{font-family:var(--f-display);font-size:2rem;font-weight:800;margin-top:-10px}
.vz-ring small{position:absolute;bottom:28px;font-size:.6rem;color:#5A6A7E;text-transform:uppercase;letter-spacing:.08em}
.vz-fams{flex:1;min-width:170px;display:flex;flex-direction:column;gap:7px}
.vz-fams div{display:grid;grid-template-columns:82px 1fr;gap:8px;align-items:center;font-size:.72rem;color:#5A6A7E}
.vz-fams i{height:7px;border-radius:6px;background:linear-gradient(90deg,#0A84D0,#00BFC8);width:var(--w)}
.vz-pills{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap}
.vz-pills span{font-size:.72rem;font-weight:700;border-radius:20px;padding:3px 10px}
.vz-pills .r{background:#FBE5E5;color:#A52A2A}.vz-pills .o{background:#FBF0D9;color:#7A4C00}.vz-pills .b{background:#E3F0FA;color:#0A5A90}
:where(.in,.on) .vz-ring .v{animation:vzRing 1.6s .3s cubic-bezier(.2,.7,.2,1) both}
:where(.in,.on) .vz-fams i{animation:vzGrowX 1s both;transform-origin:left}
:where(.in,.on) .vz-pills span{animation:vzPop .45s both;animation-delay:calc(var(--k,0) * 120ms + 1.2s)}

.vz-q{align-self:flex-end;max-width:85%;background:#0A1C38;color:#fff;border-radius:14px 14px 4px 14px;padding:10px 13px;font-size:.84rem}
.vz-a{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#F4F7FA;border-radius:14px 14px 14px 4px;padding:12px 13px}
.vz-a i{height:8px;border-radius:4px;background:#D5DEE8;flex:1 1 60%}
.vz-a i.s{flex-basis:35%}
.vz-brand{font-size:.8rem;font-weight:800;color:#00676E;background:#DDF6F7;border-radius:6px;padding:2px 8px;box-shadow:0 0 0 2px #00BFC8 inset}
.vz-engines{display:flex;gap:6px;flex-wrap:wrap}
.vz-engines span{font-size:.74rem;font-weight:650;border:1px solid #E6ECF2;border-radius:20px;padding:3px 10px;background:#fff}
.vz-engines b{color:#17845A}
:where(.in,.on) .vz-q{animation:vzSlideL .5s .2s both}
:where(.in,.on) .vz-a>*{animation:vzFade .4s both;animation-delay:calc(var(--k,0) * 140ms + .7s)}
:where(.in,.on) .vz-brand{animation:vzPop .5s 1.1s both}
:where(.in,.on) .vz-engines span{animation:vzPop .4s both;animation-delay:calc(var(--k,0) * 160ms + 1.4s)}

.vz-doc-h{display:flex;justify-content:space-between;align-items:center}
.vz-ai{font-size:.7rem;font-weight:700;color:#4B2E9A;background:#EDE7FA;border-radius:20px;padding:2px 9px}
.vz-state{position:relative;font-size:.72rem;font-weight:700}
.vz-state em{font-style:normal;border-radius:20px;padding:2px 9px;background:#FBF0D9;color:#7A4C00}
.vz-state em+em{position:absolute;right:0;top:0;background:#E1F3EA;color:#17845A;opacity:0}
.vz-doc-t{font-family:var(--f-display);font-size:1.05rem;line-height:1.25}
.vz-lines{display:flex;flex-direction:column;gap:7px}
.vz-lines i{height:7px;border-radius:4px;background:#E1E7EE;width:var(--w)}
.vz-h2{font-size:.78rem;margin-top:4px}
:where(.in,.on) .vz-lines>*{animation:vzType .5s both;transform-origin:left}
:where(.in,.on) .vz-state em+em{animation:vzSwap .4s 2.2s both}

.vz-post{padding:14px}
.vz-post-h{display:flex;align-items:center;gap:9px}
.vz-post-h b{font-size:.84rem;display:block}.vz-post-h small{font-size:.7rem;color:#5A6A7E}
.vz-av{width:32px;height:32px;border-radius:50%;background:#0A1C38;color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center;flex:none}
.vz-nets{margin-left:auto;display:flex;gap:3px}
.vz-nets i,.vz-legend i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;font-style:normal;font-size:.6rem;font-weight:800;color:#fff}
.vz-nets .li,.vz-legend .li{background:#0A66C2}.vz-nets .ig,.vz-legend .ig{background:#C13584}.vz-nets .fb,.vz-legend .fb{background:#1877F2}
.vz-img{position:relative;aspect-ratio:1.6/1;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#F6D9A8,#F0B98B 55%,#C98E6B)}
.vz-sun{position:absolute;width:60px;height:60px;border-radius:50%;background:#FFF1C9;right:22%;top:18%;box-shadow:0 0 40px #FFF1C9}
.vz-hill{position:absolute;left:-10%;right:-10%;border-radius:50% 50% 0 0}
.vz-hill.a{bottom:-30%;height:70%;background:#8A6A4E}.vz-hill.b{bottom:-45%;height:70%;left:30%;background:#5E4632}
.vz-shimmer{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%)}
.vz-logo{position:absolute;right:10px;bottom:10px;background:#fff;color:#0A1C38;font-family:var(--f-display);font-weight:800;font-size:.62rem;letter-spacing:.08em;border-radius:6px;padding:4px 8px}
.vz-gen{position:absolute;left:10px;top:10px;background:rgba(10,28,56,.78);color:#fff;font-size:.66rem;font-weight:650;border-radius:20px;padding:3px 9px}
.vz-txt{display:flex;flex-direction:column;gap:6px}
.vz-txt i{height:7px;border-radius:4px;background:#E1E7EE}.vz-txt i.s{width:60%}
:where(.in,.on) .vz-shimmer{animation:vzShimmer 1.4s .3s ease both}
:where(.in,.on) .vz-img{animation:vzReveal 1s .2s both}
:where(.in,.on) .vz-logo{animation:vzPop .5s 1.5s both}
:where(.in,.on) .vz-gen{animation:vzFade .4s .3s both}
:where(.in,.on) .vz-txt i{animation:vzType .5s both;transform-origin:left;animation-delay:calc(var(--k,0) * 140ms + 1.8s)}

.vz-car{display:flex;gap:10px;width:100%;max-width:460px;overflow:hidden;padding:10px 4px 18px}
.vz-slide{flex:0 0 46%;aspect-ratio:4/5;border-radius:12px;background:linear-gradient(160deg,#123B5C,#0A1C38);color:#fff;padding:14px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 30px rgba(4,12,28,.3)}
.vz-slide span{font-family:var(--f-mono);font-size:.62rem;color:#00BFC8}
.vz-slide b{font-family:var(--f-display);font-size:.98rem;line-height:1.2}
.vz-car-nets{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.vz-car-nets span{font-size:.72rem;font-weight:650;border-radius:20px;padding:3px 10px;background:#fff;color:#0E1B2E;box-shadow:0 4px 12px rgba(4,12,28,.15)}
:where(.in,.on) .vz-slide{animation:vzCar 3.2s .3s cubic-bezier(.6,0,.2,1) both}

.vz-heat-g{display:grid;grid-template-columns:24px repeat(5,minmax(0,1fr));gap:5px;align-items:center}
.vz-heat-g .d{font-size:.68rem;color:#5A6A7E;font-weight:700}
.vz-heat-g i{height:22px;border-radius:5px;background:#EEF2F6}
.vz-heat-g .l1{background:#CDEFF1}.vz-heat-g .l2{background:#8EDDE2}.vz-heat-g .l3{background:#3FCAD2}.vz-heat-g .l4{background:#00A9B2}.vz-heat-g .l5{background:#00828A}
.vz-heat-g .best{box-shadow:0 0 0 3px #fff,0 0 0 5px #0A1C38}
.vz-heat-x{display:grid;grid-template-columns:24px repeat(5,minmax(0,1fr));gap:5px;font-size:.64rem;color:#5A6A7E;text-align:center}
.vz-best{font-size:.82rem;background:#0A1C38;color:#fff;border-radius:10px;padding:8px 12px;align-self:flex-start}
.vz-best b{color:#00BFC8}
:where(.in,.on) .vz-heat-g i{animation:vzPop .35s both;animation-delay:calc(var(--k,0) * 25ms + .2s)}
:where(.in,.on) .vz-heat-g .best{animation:vzPop .35s both,vzPulse 1.6s 1.4s ease-in-out 2}
:where(.in,.on) .vz-best{animation:vzSlideL .5s 1.3s both}

.vz-rep-h{display:flex;justify-content:space-between;align-items:center;font-size:.86rem}
.vz-rep-h em{font-style:normal;font-weight:800;color:#17845A}
.vz-cols{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;align-items:end;height:120px;border-bottom:1px solid #E6ECF2}
.vz-cols i{height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#00BFC8,#0A84D0)}
.vz-legend{display:flex;gap:12px;font-size:.72rem;color:#5A6A7E;flex-wrap:wrap}
.vz-legend span{display:flex;gap:5px;align-items:center}.vz-legend i{width:10px;height:10px;border-radius:3px}
.vz-utm{font-family:var(--f-mono);font-size:.68rem;color:#5A6A7E;background:#F4F7FA;border-radius:8px;padding:7px 9px;overflow-wrap:anywhere}
.vz-utm b{color:#0A5A90;font-weight:600}
:where(.in,.on) .vz-cols i{animation:vzGrowY .7s both;transform-origin:bottom}
:where(.in,.on) .vz-utm{animation:vzFade .5s 1.4s both}

/* Les anciennes illustrations sur fond sombre (scènes) */
.mo-vis .fv-cal,.mo-vis .fv-alert{max-width:440px}
.mo-vis .fv-col{background:rgba(255,255,255,.95)}

@keyframes vzPop{from{opacity:0;transform:scale(.85)}}
@keyframes vzFade{from{opacity:0}}
@keyframes vzGrowX{from{transform:scaleX(0)}}
@keyframes vzGrowY{from{transform:scaleY(0)}}
@keyframes vzDraw{from{stroke-dashoffset:420}}
@keyframes vzRing{from{stroke-dashoffset:314}}
@keyframes vzSlideL{from{opacity:0;transform:translateX(20px)}}
@keyframes vzType{from{transform:scaleX(0)}}
@keyframes vzSwap{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}
@keyframes vzShimmer{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes vzReveal{from{filter:blur(14px) saturate(.4);opacity:.4}}
@keyframes vzCar{0%,15%{transform:translateX(0)}45%,60%{transform:translateX(calc(-100% - 10px))}90%,100%{transform:translateX(calc(-200% - 20px))}}
@keyframes vzPulse{50%{box-shadow:0 0 0 3px #fff,0 0 0 9px rgba(10,28,56,.25)}}

@media (prefers-reduced-motion:reduce){
  .vz *,.mo *{animation:none!important;transition:none!important}
  .vz-state em+em{opacity:1}
}
:where(.in,.on) .vz-state em:first-child{animation:vzOut .3s 2.1s both}
@keyframes vzOut{to{opacity:0}}
.fo-head-cta a{white-space:nowrap}
.fo-nav a{white-space:nowrap}
@media (max-width:760px){.mo-scene{padding-bottom:86px}.mo-stage{min-height:600px}}
@media (min-width:981px) and (max-width:1240px){.fo-head-cta .fo-link{display:none}}
/* Nouvelles illustrations : Cette semaine, résultat des actions, conseil mots-clés, avis Google */
.vz-week-h,.vz-rev-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.9rem}
.vz-week-h span{font-size:.72rem;color:#5A6A7E}
.vz-todo{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #E6ECF2;border-left:4px solid #C9D3DE;border-radius:10px}
.vz-todo i{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem;background:#EEF2F6;color:#5A6A7E}
.vz-todo div{flex:1;min-width:0;display:flex;flex-direction:column}
.vz-todo b{font-size:.8rem}.vz-todo span{font-size:.68rem;color:#5A6A7E}
.vz-todo em{font-style:normal;font-size:.7rem;font-weight:700;border:1px solid #DCE3EB;border-radius:7px;padding:3px 8px}
.vz-todo.bad{border-left-color:#C23B3B;background:#FDF1F1}.vz-todo.bad i{background:#C23B3B;color:#fff}
.vz-todo.warn{border-left-color:#D69A1A}.vz-todo.warn i{background:#FBF0D9;color:#7A4C00}
.vz-todo.info{border-left-color:#0A84D0}.vz-todo.info i{background:#E3F0FA;color:#0A5A90}
:where(.in,.on) .vz-todo{animation:vzSlideL .45s both}
.vz-ba{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 64px;gap:10px;align-items:center;font-size:.72rem;color:#5A6A7E}
.vz-ba b{color:#0E1B2E;text-align:right;font-variant-numeric:tabular-nums}
.vz-ba-bars{display:flex;flex-direction:column;gap:3px}
.vz-ba-bars i{display:block;height:7px;border-radius:5px;width:var(--w);min-width:3px}
.vz-ba-bars i.a,.vz-legend .ba-a{background:#C9D3DE}.vz-ba-bars i.b,.vz-legend .ba-b{background:linear-gradient(90deg,#0A84D0,#00BFC8)}
:where(.in,.on) .vz-ba-bars i.b{animation:vzGrowX 1s both;transform-origin:left;animation-delay:calc(var(--k,0) * 200ms + .6s)}
.vz-search{display:flex;align-items:center;gap:8px;border:1px solid #DCE3EB;border-radius:22px;padding:8px 14px;font-size:.84rem}
.vz-search svg{width:16px;height:16px;fill:none;stroke:#5A6A7E;stroke-width:2}
.vz-serp-m{display:flex;flex-wrap:wrap;gap:6px}
.vz-serp-m span{font-size:.68rem;font-weight:700;background:#E3F0FA;color:#0A5A90;border-radius:20px;padding:3px 9px}
:where(.in,.on) .vz-serp-m span{animation:vzPop .4s both;animation-delay:calc(var(--k,0) * 150ms + .3s)}
.vz-serp-r{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.vz-serp-r li{display:flex;align-items:center;gap:9px;font-size:.76rem;padding:6px 9px;border-radius:8px;background:#F4F7FA}
.vz-serp-r li b{width:18px;color:#5A6A7E}
.vz-serp-r li.me{background:#0A1C38;color:#fff}.vz-serp-r li.me b{color:#7FE3E8}
.vz-serp-r li em{margin-left:auto;font-style:normal;font-size:.66rem;font-weight:700;color:#7FE3E8}
:where(.in,.on) .vz-serp-r li{animation:vzFade .35s both;animation-delay:calc(var(--k,0) * 110ms + .8s)}
:where(.in,.on) .vz-serp-r li.me{animation:vzFade .35s both,vzPulse 1.6s 1.8s ease-in-out 2}
.vz-stars{color:#E3A008;letter-spacing:1px}
.vz-rev-h b{font-family:var(--f-display);font-size:1.6rem}.vz-rev-h small{margin-left:auto;font-size:.68rem;color:#5A6A7E}
.vz-rev-q,.vz-rev-a{border-radius:12px;padding:10px 12px;font-size:.78rem;display:flex;flex-direction:column;gap:4px}
.vz-rev-q{background:#FDF1F1;border:1px solid #F3D3D3}.vz-rev-q p,.vz-rev-a p{margin:0;line-height:1.45}
.vz-rev-a{background:#F4F7FA;border:1px dashed #00BFC8;margin-left:18px}
.vz-rev-a em{align-self:flex-end;font-style:normal;font-size:.7rem;font-weight:700;color:#fff;background:#0A1C38;border-radius:7px;padding:4px 10px}
:where(.in,.on) .vz-rev-q{animation:vzSlideL .45s .3s both}
:where(.in,.on) .vz-rev-a{animation:vzReveal .9s 1.1s both}
/* Options à la carte */
.fo-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:860px){.fo-opts{grid-template-columns:1fr}}
.fo-opt{position:relative;border:1.5px dashed var(--teal,#00BFC8);border-radius:20px;padding:26px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.fo-opt-b{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#00727A;border-radius:6px;padding:3px 9px}
.fo-opt h3{font-size:1.2rem;margin:0}
.fo-opt .fo-rich{color:var(--muted)}
.fo-opt-vis{margin-top:6px}
.fo-c-cta{text-align:center;margin-top:28px}