@font-face{font-family:"VG5000";src:url("../img/vg5000.woff2") format("woff2"),url("../img/vg5000.otf") format("opentype");font-display:swap}
body{margin:0;background:#f6fdf0}
a{color:#234d0b}@media (hover:hover) and (pointer:fine){a:hover{color:#6b5fe0}}
::selection{background:#6b5fe0;color:#fff}
html{scrollbar-color:#234d0b #def8c6;accent-color:#6b5fe0;caret-color:#6b5fe0}
.va{--vert:#234d0b;--pale:#def8c6;--lime:#a3d96b;--violet:#6b5fe0;--lav:#cfcbf8;--fond:#f6fdf0;--out:cubic-bezier(0.23,1,0.32,1);--inout:cubic-bezier(0.77,0,0.175,1);font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--vert);background:var(--fond);font-size:18px;line-height:1.55;-webkit-tap-highlight-color:transparent;overflow-x:clip}
.va *{box-sizing:border-box}
.va p,.va li{text-wrap:pretty}
.va a:focus-visible,.va button:focus-visible{outline:3px solid #6b5fe0;outline-offset:3px}
.d{font-family:VG5000,"Geist Mono",monospace;font-weight:400;letter-spacing:0}
.m{font-family:"Geist Mono",ui-monospace,monospace}
.w{max-width:1320px;margin:0 auto;padding-left:40px;padding-right:40px}
/* boutons 8 bits : coins crantés */
.px{--n:6px;clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,var(--n) calc(100% - var(--n)),0 calc(100% - var(--n)),0 var(--n),var(--n) var(--n))}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 26px;font-weight:600;font-size:18px;text-decoration:none;border:0;cursor:pointer;transition:transform 160ms var(--out),background-color 200ms ease;touch-action:manipulation;user-select:none}
.btn:active{transform:scale(0.97)}
.btn-v{background:var(--violet);color:#fff}@media (hover:hover) and (pointer:fine){.btn-v:hover{color:#fff}}
.btn-g{background:var(--vert);color:var(--lime)}@media (hover:hover) and (pointer:fine){.btn-g:hover{color:var(--lime)}}
.btn-l{background:var(--lime);color:var(--vert)}@media (hover:hover) and (pointer:fine){.btn-l:hover{color:var(--vert)}}
.btn-w{background:#fff;color:var(--vert)}
@media (hover:hover) and (pointer:fine){.btn-v:hover{background:#5a4fd0}.btn-g:hover{background:#1a3a08}.btn-l:hover{background:#b4e283}.btn .ar{transition:transform 200ms var(--out)}.btn:hover .ar{transform:translateX(4px)}}
.ico{width:16px;height:16px;flex:none;fill:currentColor}

/* ---------- en-tête ---------- */
.head{position:absolute;inset:0 0 auto 0;z-index:20}
.head .w{display:flex;align-items:center;gap:32px;padding-top:24px;padding-bottom:24px}
.nav{display:flex;gap:28px;font-weight:500;font-size:17px;flex:1 1 auto}
.nav a{text-decoration:none;color:var(--vert);padding:6px 0;background:linear-gradient(var(--violet),var(--violet)) left bottom/0 3px no-repeat;transition:background-size 220ms var(--out)}
.nav a[aria-current]{background-size:100% 3px}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--vert);background-size:100% 3px}}
.statut{display:inline-flex;align-items:center;gap:10px;font-size:14px;padding:8px 14px;background:rgba(255,255,255,.7);border:2px solid var(--vert)}
.dot{width:10px;height:10px;background:var(--lime);box-shadow:0 0 0 2px var(--vert)}
.dot.ferme{background:var(--violet)}
.burger{display:none}
.logo-n{display:none}
.nuit .logo-n{display:inline}.nuit .logo-j{display:none}
.nuit .nav a{color:#fff}
.nuit .statut{background:rgba(35,77,11,.6);color:#fff;border-color:#fff}
.nuit .hero .couche{filter:brightness(.62) saturate(1.15)}
.nuit .hero .couche.herbe,.nuit .hero .couche[src*="pre"]{filter:brightness(.55) saturate(1.1)}
.nuit .nuage{opacity:.35!important}
.nuit .boutique>img{filter:brightness(.8)}
.nuit .enseigne::before{opacity:1}.nuit .enseigne::after{opacity:.9}
.nuit .boutique .fenetres{opacity:1}
.nuit .burger{background:#234d0b;color:#fff;border-color:#fff}
.tel-ico{display:none}

/* ---------- ciel ---------- */
.hero{position:relative;min-height:1160px;overflow:hidden;isolation:isolate}
.ciel{position:absolute;inset:0;z-index:-3;transition:opacity 600ms ease}
/* ciels pixel tramés (sans bandes) : grands cumulus façon anime, générés par ciel-gen.py */
/* 9 moments de la journée, calés sur le lever et le coucher du soleil à Orbey (ciel-gen : ciels/sky9.py) */
.c-aube{background:#fff0c4 url("../img/ciel-aube.png") 70% 100%/cover no-repeat;image-rendering:pixelated}
.c-matin{background:#f4faea url("../img/ciel-matin.png") 70% 100%/cover no-repeat;image-rendering:pixelated}
.c-midi{background:#f2f9ea url("../img/ciel-midi.png") 70% 100%/cover no-repeat;image-rendering:pixelated}
.c-aprem1{background:#eef8e6 url("../img/ciel-aprem1.png") 70% 100%/cover no-repeat;image-rendering:pixelated}
.c-aprem2{background:#f8f3dc url("../img/ciel-aprem2.png") 70% 100%/cover no-repeat;image-rendering:pixelated}
.c-aprem3{background:#fff1c4 url("../img/ciel-aprem3.png") 70% 100%/cover no-repeat;image-rendering:pixelated}
.c-crepuscule{background:#ffd59e url("../img/ciel-crepuscule.png") 70% 100%/cover no-repeat;image-rendering:pixelated}
.c-soiree{background:#d97d86 url("../img/ciel-soiree.png") 70% 100%/cover no-repeat;image-rendering:pixelated}
.c-nuit{background:#2f4578 url("../img/ciel-nuit.png") 70% 100%/cover no-repeat;image-rendering:pixelated}
.soleil{margin-top:var(--sol,0px)}
.m-aube{--sol:150px}.m-matin{--sol:60px}.m-midi{--sol:-80px}.m-aprem1{--sol:-40px}.m-aprem2{--sol:20px}.m-aprem3{--sol:120px}.m-crepuscule{--sol:210px}.m-nuit{--sol:-60px}
.m-aube .hero .couche{filter:brightness(.86) saturate(1.1) hue-rotate(-6deg)}
.m-aprem3 .hero .couche{filter:sepia(.18) saturate(1.2)}
.m-aube .nuage,.m-aprem3 .nuage{opacity:.6!important}
/* logo vert le jour (v49) */
.soleil{position:absolute;left:58%;top:250px;width:136px;height:136px;z-index:-2}
.etoiles{position:absolute;inset:0 0 50% 0;z-index:-2;background-image:radial-gradient(#fff 1.5px,transparent 2px),radial-gradient(#def8c6 1.5px,transparent 2px);background-size:173px 131px,97px 83px;background-position:13px 29px,51px 7px;opacity:.9}
.nuage{position:absolute;z-index:-2;image-rendering:pixelated;animation:derive linear infinite}
@keyframes derive{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.couche{position:absolute;left:0;width:100%;display:block;image-rendering:pixelated;pointer-events:none}
.herbe{transform-origin:50% 100%;animation:vent ease-in-out infinite alternate}
@keyframes vent{from{transform:skewX(-3.5deg)}to{transform:skewX(3.5deg)}}
.herbe.v2{animation-name:vent2}
@keyframes vent2{0%{transform:skewX(-4.5deg) translateX(-3px)}45%{transform:skewX(1deg) translateX(0)}100%{transform:skewX(4deg) translateX(3px)}}
.brins{position:absolute;inset:0;pointer-events:none;z-index:7;overflow:hidden}
.brins i{position:absolute;left:0;height:4px;background:var(--bc);opacity:0;animation:vol var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes vol{0%{transform:translate(-4vw,0) rotate(0);opacity:0}8%{opacity:1}25%{transform:translate(24vw,var(--a)) rotate(100deg)}50%{transform:translate(52vw,calc(var(--a) * -0.6)) rotate(190deg)}75%{transform:translate(78vw,var(--a)) rotate(280deg)}92%{opacity:1}100%{transform:translate(104cqw,0) rotate(360deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.brins{display:none}}
.luciole{position:absolute;width:6px;height:6px;background:#def8c6;box-shadow:0 0 12px 4px rgba(163,217,107,.7);animation:luc 7s ease-in-out infinite alternate;z-index:3}
@keyframes luc{0%{transform:translate(0,0);opacity:.2}50%{opacity:1}100%{transform:translate(40px,-60px);opacity:.3}}
.van{position:absolute;bottom:40px;left:0;width:240px;z-index:4;image-rendering:pixelated;animation:rouler 26s linear infinite}
@keyframes rouler{from{transform:translateX(-200px)}to{transform:translateX(calc(100vw + 40px))}}
.hero-w{max-width:1760px}
.boutique{position:absolute;left:63%;bottom:58px;width:400px;z-index:2;display:block;text-decoration:none;transition:transform 220ms var(--out)}
.boutique>img{width:100%;display:block;image-rendering:pixelated}
.enseigne{position:absolute;left:5%;right:5%;top:17.2%;height:15.6%;display:flex;align-items:center;justify-content:center}
.enseigne img{position:relative;z-index:1;height:52%;width:auto;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(240,255,228,.95)) drop-shadow(0 0 16px rgba(222,248,198,.7));animation:neon 6s steps(1) infinite}
.enseigne::before{content:"";position:absolute;left:-30%;right:-30%;top:-70px;bottom:-70px;background:radial-gradient(closest-side,rgba(244,255,234,.55),rgba(222,248,198,.18) 55%,transparent);pointer-events:none;opacity:.55;transition:opacity 600ms ease}
.enseigne::after{content:"";position:absolute;left:-4%;right:-4%;top:100%;height:150px;background:linear-gradient(rgba(244,255,234,.38),rgba(244,255,234,0));clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);pointer-events:none;opacity:.35;transition:opacity 600ms ease}
@keyframes neon{0%,90%,94%,100%{opacity:1}91%{opacity:.55}93%{opacity:.8}}
.vitre{position:absolute;top:50%;height:31%;background:linear-gradient(rgba(255,222,140,.5),rgba(255,206,110,.32));box-shadow:0 0 28px 6px rgba(255,214,120,.35);opacity:0;transition:opacity 600ms ease;pointer-events:none}
.nuit .vitre{opacity:1}
.panneau{position:absolute;left:51%;top:41.5%;translate:-50% 0;z-index:3;background:#10200a;padding:4px 8px 3px;font-size:13px;line-height:1;white-space:nowrap;letter-spacing:.04em;--neon:#7dff6a;color:#eaffe4;border:2px solid var(--neon);box-shadow:0 0 6px var(--neon),inset 0 0 6px color-mix(in srgb,var(--neon) 60%,transparent),0 0 18px color-mix(in srgb,var(--neon) 55%,transparent);text-shadow:0 0 3px #fff,0 0 8px var(--neon),0 0 16px var(--neon);animation:neon 7s steps(1) infinite}
.panneau.ferme{--neon:#ff3b3b;color:#ffe6e6;animation-duration:5s}
.panneau::before{content:"";position:absolute;left:50%;top:-10px;width:2px;height:8px;background:#1d3f09}
@media (hover:hover) and (pointer:fine){.boutique:hover{transform:translateY(-4px)}}

.titre{position:relative;z-index:10;padding-top:250px;max-width:860px}
.kick{font-size:14px;letter-spacing:.06em;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:30px 0 0;max-width:640px}
.kick i{width:8px;height:8px;background:var(--violet);display:inline-block}
.h1{font-size:clamp(40px,5.2vw,78px);line-height:.98;margin:0;text-wrap:balance;letter-spacing:-0.01em}
.lead{font-size:clamp(19px,1.5vw,22px);line-height:1.5;margin:26px 0 0;max-width:44ch}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.va .soirtxt .h1,.va .soirtxt .kick,.va .soirtxt .lead{color:#fff}

/* cartes flottantes (esprit Betheme) */
.lien{white-space:nowrap}
.scene-info{position:relative;flex:none;width:310px;padding-right:40px}
.scene-info .fen{width:270px;box-shadow:8px 8px 0 rgba(35,77,11,.18)}
.scene-info .ordi-pose{position:absolute;right:-6px;bottom:-18px;width:96px;image-rendering:pixelated}
.scene-caisse{position:relative;flex:none;width:300px;padding-top:40px}
.scene-caisse .caisse{width:260px;margin-left:auto;background:#fff}
.scene-caisse .tab{position:absolute;left:-6px;top:0;width:120px;height:auto;rotate:-6deg}
.badge-devis{position:absolute;right:72px;top:72px;rotate:4deg;scale:1.5;transform-origin:top right}
.badge-devis .puce{font-size:30px;padding:16px 22px}

.compo{position:absolute;top:0;right:40px;width:560px;height:760px;z-index:8;pointer-events:none}
.compo>*{pointer-events:auto}
.flot{position:absolute;z-index:8;animation:flotte 7s ease-in-out infinite alternate}
@keyframes flotte{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.carte{background:#fff;border:3px solid var(--vert);box-shadow:8px 8px 0 rgba(35,77,11,.18)}
.fen{width:330px}
.fen .barre{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--vert);color:var(--pale);font-size:12px}
.fen .barre i{width:9px;height:9px;background:var(--lime);display:inline-block}
.fen .barre i+i{background:var(--lav)}
.fen pre{margin:0;padding:12px 14px 6px;font-size:12.5px;line-height:1.6;white-space:pre-wrap;font-family:"Geist Mono",monospace}
.prog{margin:4px 14px 14px;height:14px;border:2px solid var(--vert);padding:2px}
.prog b{display:block;height:100%;width:100%;background:repeating-linear-gradient(90deg,var(--lime) 0 10px,transparent 10px 12px);transform-origin:left;animation:charge 3.2s var(--inout) infinite}
@keyframes charge{0%{transform:scaleX(.05)}70%,100%{transform:scaleX(1)}}
.puce{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;font-size:15px;font-weight:600}
.caisse{width:300px;padding:18px 18px 14px;background:var(--lav);border-color:var(--vert)}
.caisse img{width:100%;height:auto;display:block;margin-top:-56px}

/* carte du magasin dans le ciel */
.infos-mag{position:absolute;right:40px;top:250px;z-index:10;width:300px;padding:20px 22px 16px;font-size:16px;line-height:1.45;--n:8px}
.infos-mag p{margin:0}
.im-k{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em}
.im-adr{margin-top:14px!important}
.im-tel{margin-top:10px!important}
.im-tel a{color:var(--vert)}.im-tel .d{font-size:22px;text-decoration:none}
.im-h{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.im-h caption{text-align:left;font-size:12px;letter-spacing:.06em;padding:12px 0 6px;border-top:2px dashed #c2e89a}
.im-h th{text-align:left;font-weight:600;padding:5px 8px 5px 0;vertical-align:top;white-space:nowrap}
.im-h td{padding:5px 0;text-align:right;font-variant-numeric:tabular-nums}
.im-h tr.auj{background:var(--pale);box-shadow:-8px 0 0 var(--pale),8px 0 0 var(--pale)}
.im-h tr.auj th::after{content:" · aujourd’hui";font-weight:400;font-size:13px}
.nuit .infos-mag{background:#f6fdf0}

/* photos du propriétaire */
.pano{--n:16px;position:relative;margin:0;height:min(640px,46vw);overflow:hidden;background:var(--vert)}
.pano-img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}
.pano::after{content:"";position:absolute;inset:0;background:linear-gradient(250deg,rgba(20,45,6,.7) 0%,rgba(20,45,6,0) 55%),linear-gradient(180deg,rgba(35,77,11,0) 60%,rgba(20,45,6,.45) 100%)}
.pano-txt{position:absolute;right:48px;top:48px;z-index:1;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:10px;color:#fff}
.pano-k{font-size:13px;letter-spacing:.08em;color:var(--lime)}
.pano-t{font-size:clamp(34px,4.2vw,64px);line-height:1;max-width:14ch;text-wrap:balance}
.pano-s{font-size:19px;max-width:44ch}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){.pano-img{animation:panoZ linear both;animation-timeline:view();animation-range:entry 0% exit 100%}@keyframes panoZ{from{transform:scale(1.14) translateY(-3%)}to{transform:scale(1) translateY(3%)}}}}
.pq-w{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;margin-top:56px;align-items:center}
.pq-w .pq{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.pq-photo{--n:12px;position:relative;margin:0;aspect-ratio:4/5;overflow:hidden}
.pq-photo img{width:100%;height:100%;object-fit:cover;object-position:44% 50%;display:block}
.pq-photo figcaption{position:absolute;left:16px;bottom:16px;background:var(--lime);color:var(--vert);font-size:13px;letter-spacing:.06em;padding:8px 12px 6px}
.toile{--n:14px;margin:48px 0 0;height:300px;overflow:hidden;position:relative}
.toile img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block}
.toile+.route{margin-top:-60px;width:calc(100% - 80px);margin-left:40px}

/* ASCII de la charte, dans les coins vides (dégradé de transparence) */
.asc{position:absolute;pointer-events:none;z-index:-1;aspect-ratio:338/320;background:linear-gradient(var(--sens,160deg),var(--c) 15%,transparent 90%);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.asc.croix{aspect-ratio:297/294}
.cta,.pied,.sec{isolation:isolate}
.pied .w{position:relative}

/* bande des rubriques : un tableau de bord posé sur la prairie */
.terre{position:absolute;left:0;right:0;top:100px;z-index:15}
.terre .w{max-width:1440px;filter:drop-shadow(8px 8px 0 var(--lime))}
.rubs{--n:10px;display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:10px;list-style:none;background:#fff;border:3px solid var(--vert)}
.rubs li+li{border-left:2px dashed #c2e89a}
.rub{display:flex;align-items:center;gap:12px;padding:12px 14px;color:var(--vert);text-decoration:none;font-size:19px;white-space:nowrap;line-height:1;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform 120ms var(--out)}
.rub .ic{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--pale);transition:background-color 200ms ease,transform 200ms var(--out)}
.rub svg{width:24px;height:24px;fill:var(--vert);image-rendering:pixelated}
.rub small{display:block;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:12.5px;margin-top:6px;color:#437a1d;font-weight:500;letter-spacing:0}
.rub[aria-current] .ic{background:var(--vert)}.rub[aria-current] svg{fill:var(--lime)}
.rub:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.rub:hover .ic{background:var(--lime);transform:translateY(-3px)}.rub[aria-current]:hover .ic{background:var(--vert)}}

/* sections */
.sec{padding-top:150px}
.h2{font-size:clamp(34px,4vw,60px);line-height:1;margin:0;text-wrap:balance}
.intro{display:flex;flex-wrap:wrap;gap:24px 64px;align-items:flex-end;justify-content:space-between}
.intro p{max-width:46ch;margin:0}
.duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.duo .dossier{padding:40px 30px 32px}
.duo .dossier h3{font-size:clamp(30px,2.5vw,40px)}
.duo .visu{flex-direction:column;align-items:stretch;gap:22px}
.duo .visu .lien{order:2}
.duo .scene-info,.duo .scene-caisse,.duo .scene-wifi{align-self:center}
.duo .scene-info .fen{width:300px}
.duo .caisse{width:250px}
.d-wifi .dossier,.d-wifi .onglet{background:var(--vert);color:var(--pale)}
.d-wifi .dossier h3{color:#fff}
.d-wifi .lien{color:var(--lime)}
.scene-wifi{position:relative;width:230px;height:250px}
.sw-ondes{position:absolute;left:50%;top:0;translate:-50% 0;width:56px}
.sw-ondes svg{width:100%;fill:var(--lime);image-rendering:pixelated;animation:ondesW 2.4s steps(1) infinite}
@keyframes ondesW{0%{clip-path:inset(66% 0 0 0)}33%{clip-path:inset(33% 0 0 0)}66%,100%{clip-path:inset(0 0 0 0)}}
.sw-tel{--n:10px;position:absolute;left:50%;bottom:0;translate:-50% 0;width:170px;height:190px;background:#fff;box-shadow:inset 0 0 0 8px var(--pale);padding:20px 16px;display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:center;color:var(--vert)}
.sw-logo{background:var(--lav);padding:12px 6px;font-size:17px;line-height:1}
.sw-btn{background:var(--violet);color:#fff;padding:10px;font-size:15px}
.sw-fr{display:flex;align-items:center;justify-content:center;gap:0;font-size:10px;margin-top:auto}.sw-fr i{width:6px;height:9px}.sw-fr i:nth-child(1){background:#5a6cf0}.sw-fr i:nth-child(2){background:#fff;box-shadow:inset 0 1px 0 #ddd,inset 0 -1px 0 #ddd}.sw-fr i:nth-child(3){background:#ff5a5a;margin-right:6px}
@media (max-width:1180px){.duo{grid-template-columns:minmax(0,1fr)}}
.dossier-w{position:relative;padding-top:40px;display:flex;flex-direction:column}
.dossier{position:relative;padding:44px 40px 40px;flex:1;min-height:560px;display:flex;flex-direction:column;--n:14px}
.dossier-w .onglet{position:absolute;left:0;top:0;height:46px;padding:0 22px 6px;display:flex;align-items:center;font-size:15px;--n:8px;clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% 100%,0 100%,0 8px,8px 8px)}
.dossier h3{font-size:clamp(34px,3.2vw,48px);line-height:1;margin:0}
.dossier ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.dossier li{display:flex;gap:12px;align-items:baseline}
.dossier li::before{content:"";width:10px;height:10px;flex:none;background:currentColor;transform:translateY(-1px)}
.d-info .dossier,.d-info .onglet{background:var(--pale)}
.d-caisse .dossier,.d-caisse .onglet{background:var(--lav)}
.dossier-w .dossier{clip-path:polygon(0 0,calc(100% - 14px) 0,calc(100% - 14px) 14px,100% 14px,100% calc(100% - 14px),calc(100% - 14px) calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,14px calc(100% - 14px),0 calc(100% - 14px))}
.visu{margin-top:auto;padding-top:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.lien{font-weight:700;text-decoration:none;display:inline-flex;gap:10px;align-items:center;font-size:18px}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:24px;margin-top:64px}
.mini{background:#fff;border:3px solid var(--vert);padding:28px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--vert);transition:transform 200ms var(--out),box-shadow 200ms var(--out)}
.mini .d{font-size:26px;line-height:1.05}
.wifi-pub{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:24px 48px;align-items:center;background:var(--vert);color:var(--pale);border-color:var(--vert)}
.wifi-pub .d{color:#fff;font-size:30px}
.wp-txt{flex:1 1 420px;display:flex;flex-direction:column;gap:10px}
.wp-k{margin:0;font-size:13px;letter-spacing:.06em;color:var(--lime)}
.wp-pts{flex:1 1 380px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.wp-pts li{display:flex;align-items:center;gap:12px;background:#2f6312;padding:12px 14px;font-weight:600;font-size:16px;color:#fff}
.wp-pts svg{width:22px;height:22px;flex:none;fill:var(--lime)}
.drap{display:flex;width:22px;height:16px;flex:none}.drap i{flex:1}.drap i:nth-child(1){background:#5a6cf0}.drap i:nth-child(2){background:#fff}.drap i:nth-child(3){background:#ff5a5a}
@media (hover:hover) and (pointer:fine){.wifi-pub:hover{color:var(--pale)}}
@media (hover:hover) and (pointer:fine){.mini:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--lime);color:var(--vert)}}

/* la route */
.route{position:relative;margin-top:60px;height:220px;background:var(--pale);overflow:clip;container-type:inline-size;view-timeline:--route}
.route .chemin{position:absolute;left:0;right:0;top:132px;height:24px;background:repeating-linear-gradient(90deg,#fff 0 24px,transparent 24px 48px) center/100% 4px no-repeat,var(--vert)}
.etape{position:absolute;top:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:15px;font-weight:600;white-space:nowrap}
.etape .pin{width:16px;height:16px;background:var(--violet);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--vert)}
.etape .mat{width:4px;height:52px;background:var(--vert)}
.etape.ici .pin{position:relative;width:24px;height:24px;background:var(--lime)}
.etape.ici .pin::after{content:"";position:absolute;inset:-6px;border:3px solid var(--violet);opacity:0;animation:pulse 1.6s cubic-bezier(0.23,1,0.32,1) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.route .van2{position:absolute;top:96px;left:0;width:120px;z-index:2;image-rendering:pixelated;animation:rouler2 18s linear infinite}
@keyframes rouler2{0%{transform:translateX(-140px)}46%{transform:translateX(calc(100cqw + 20px))}50%{transform:translateX(calc(100cqw + 20px)) scaleX(-1)}96%{transform:translateX(-140px) scaleX(-1)}100%{transform:translateX(-140px)}}
@media (prefers-reduced-motion:reduce){.route .van2{animation:none;transform:translateX(30cqw)}}

/* contrats */
.onglets{display:inline-flex;border:3px solid var(--vert);padding:4px;gap:4px;background:#fff}
.onglets button{all:unset;cursor:pointer;padding:12px 20px;font-family:VG5000,monospace;font-size:18px;transition:background-color 180ms ease,color 180ms ease;touch-action:manipulation;user-select:none}
.onglets button[aria-pressed="true"]{background:var(--vert);color:var(--lime)}
.pro-tag{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 14px;background:var(--violet);color:#fff;font-size:14px;letter-spacing:.06em}
.pro-tag svg{width:16px;height:16px;fill:#fff}
.pro-sous{margin:18px 0 0;max-width:62ch;font-size:19px}
.surl{display:block;margin-top:8px;font-size:16px;color:#437a1d}
.offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:28px;margin-top:56px;align-items:end;filter:drop-shadow(8px 8px 0 rgba(35,77,11,.16))}
.offre{--n:12px;position:relative;background:var(--pale);padding:36px 32px 32px;display:flex;flex-direction:column;gap:14px;min-height:430px;transition:transform 200ms var(--out)}
.offre:nth-child(3){background:var(--lav)}
.offre.top{background:var(--vert);color:var(--pale);min-height:480px}
.offre .niv{display:flex;gap:6px;margin-bottom:6px}.offre .niv i{width:22px;height:22px;background:currentColor;opacity:.18}.offre .niv i.on{opacity:1;background:var(--violet)}
.offre.top .niv i.on{background:var(--lime)}
.offre .ruban{position:absolute;top:-1px;right:24px;background:var(--lime);color:var(--vert);font-size:13px;letter-spacing:.06em;padding:8px 12px 6px}
@media (hover:hover) and (pointer:fine){.offre:hover{transform:translateY(-6px)}}
.prix{font-size:52px;line-height:.95}
.devis-o{margin-top:auto;padding-top:10px;font-weight:700;color:var(--violet);text-underline-offset:4px}
.offre.top .devis-o{color:var(--lime)}
.offre ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px;font-size:16px}
.offre li{display:flex;gap:10px}
.offre li svg{margin-top:5px}
.note{font-size:15px;margin-top:24px}

.pq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:40px 32px;margin-top:56px}
.pq .n{font-size:15px;color:var(--violet)}
.pq h3{font-size:26px;line-height:1.1;margin:10px 0 8px}
.pq p{margin:0;font-size:17px}
.avis{margin-top:56px;border:3px dashed var(--vert);padding:40px;text-align:center;font-size:16px}

.cta{position:relative;margin-top:150px;background:var(--lime);padding:72px 56px 120px;overflow:hidden;--n:14px}
.cta .h2{max-width:16ch}
.cta p{max-width:52ch;margin:20px 0 0}
.cta .couche{bottom:-6px}

.pied{background:var(--vert);color:var(--pale);margin-top:0;position:relative}
.pied .herbe-haut{position:absolute;left:0;right:0;top:-92px;height:96px;overflow:hidden;pointer-events:none}
.pied .herbe-haut .couche{transform-origin:bottom}
.pied a{color:var(--pale)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:40px}
.geant{font-size:clamp(90px,22vw,330px);line-height:.8;color:var(--lime);margin:80px 0 0;letter-spacing:-0.03em}

/* petit ordi */
.mascotte{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;align-items:flex-end;gap:10px;text-decoration:none}
.mascotte .bulle{background:#fff;border:3px solid var(--vert);padding:10px 14px;font-size:15px;line-height:1.3;color:var(--vert);opacity:0;transform:translateY(6px) scale(.97);transform-origin:100% 100%;transition:opacity 180ms var(--out),transform 180ms var(--out);pointer-events:none}
.mascotte .ordi{position:relative;width:84px;height:72px}
.mascotte .ordi img{position:absolute;inset:0;width:100%;image-rendering:pixelated}
.mascotte .b{animation:cligne 5s steps(1) infinite}
@keyframes cligne{0%,92%{opacity:0}93%,97%{opacity:1}98%{opacity:0}}
.mascotte:focus-visible .bulle{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.mascotte:hover .bulle{opacity:1;transform:none}}

/* arrivée sur la page : le titre monte en cascade, l'enseigne s'allume, le petit ordi dit bonjour */
.titre>*{animation:monte 700ms var(--out) backwards}
.titre>.kick{animation-delay:380ms}.titre>.h1{animation-name:monteH;animation-delay:120ms}.titre>.lead{animation-delay:220ms}.titre>.ctas{animation-delay:300ms}
@keyframes monte{from{opacity:0;transform:translateY(20px)}}
@keyframes monteH{from{transform:translateY(24px)}}
.enseigne img{animation:allume 1.3s steps(1) 500ms backwards,neon 6s steps(1) 1.8s infinite}
@keyframes allume{0%{opacity:0}18%{opacity:.85}24%{opacity:0}42%{opacity:1}48%{opacity:.15}58%,100%{opacity:1}}
.mascotte .bulle{animation:bonjour 5.5s var(--out) 2.4s backwards}
@keyframes bonjour{0%{opacity:0;transform:translateY(6px) scale(.97)}5%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(6px) scale(.97)}}
.mascotte .ordi{animation:hop 480ms steps(3) 2.4s}
@keyframes hop{50%{transform:translateY(-8px)}}
.offre{animation:offreA 260ms var(--out) backwards}
.t-caisse .offre{animation-name:offreB}
.offre:nth-child(2){animation-delay:40ms}.offre:nth-child(3){animation-delay:80ms}
@keyframes offreA{from{opacity:0;transform:translateY(10px)}}
@keyframes offreB{from{opacity:0;transform:translateY(10px)}}

/* défilement : le paysage se resserre en fenêtre, les plans glissent à des vitesses différentes, le titre s'efface */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline: scroll()){
@keyframes fenetre{to{clip-path:inset(0 32px 0 32px)}}
.par1{animation:par1 linear both;animation-timeline:scroll(root);animation-range:0 85vh}
.par2{animation:par2 linear both;animation-timeline:scroll(root);animation-range:0 85vh}
.par3{animation:par3 linear both;animation-timeline:scroll(root);animation-range:0 85vh}
.soleil{animation:soleilD linear both;animation-timeline:scroll(root);animation-range:0 85vh}
.ciel{top:-280px}.ciel,.etoiles{animation:cielD linear both;animation-timeline:scroll(root);animation-range:0 85vh}
.titre{animation:efface linear both;animation-timeline:scroll(root);animation-range:10vh 70vh}
@keyframes par1{to{transform:translateY(190px) scale(1.04)}}
@keyframes par2{to{transform:translateY(110px)}}
@keyframes par3{to{transform:translateY(45px)}}
@keyframes soleilD{to{transform:translateY(260px)}}@keyframes cielD{to{transform:translateY(260px)}}
@keyframes efface{to{opacity:0;transform:translateY(-70px)}}
}}

/* herbes vivantes : couchées par la souris ou le doigt, elles se redressent avec un petit rebond */
.herbe-vive{position:absolute;left:-48px;right:-48px;bottom:0;height:96px;pointer-events:none;transform-origin:50% 100%}
.herbe-vive>i{position:absolute;top:0;bottom:0;width:2.5%;overflow:hidden;transform-origin:50% 100%}
.herbe-vive>i img{position:absolute;width:4000%;height:80px;max-width:none;object-fit:cover;object-position:bottom;image-rendering:pixelated}
.herbe-vive>i:nth-child(1){left:0.0%}.herbe-vive>i:nth-child(1) img{left:0%}
.herbe-vive>i:nth-child(2){left:2.5%}.herbe-vive>i:nth-child(2) img{left:-100%}
.herbe-vive>i:nth-child(3){left:5.0%}.herbe-vive>i:nth-child(3) img{left:-200%}
.herbe-vive>i:nth-child(4){left:7.5%}.herbe-vive>i:nth-child(4) img{left:-300%}
.herbe-vive>i:nth-child(5){left:10.0%}.herbe-vive>i:nth-child(5) img{left:-400%}
.herbe-vive>i:nth-child(6){left:12.5%}.herbe-vive>i:nth-child(6) img{left:-500%}
.herbe-vive>i:nth-child(7){left:15.0%}.herbe-vive>i:nth-child(7) img{left:-600%}
.herbe-vive>i:nth-child(8){left:17.5%}.herbe-vive>i:nth-child(8) img{left:-700%}
.herbe-vive>i:nth-child(9){left:20.0%}.herbe-vive>i:nth-child(9) img{left:-800%}
.herbe-vive>i:nth-child(10){left:22.5%}.herbe-vive>i:nth-child(10) img{left:-900%}
.herbe-vive>i:nth-child(11){left:25.0%}.herbe-vive>i:nth-child(11) img{left:-1000%}
.herbe-vive>i:nth-child(12){left:27.5%}.herbe-vive>i:nth-child(12) img{left:-1100%}
.herbe-vive>i:nth-child(13){left:30.0%}.herbe-vive>i:nth-child(13) img{left:-1200%}
.herbe-vive>i:nth-child(14){left:32.5%}.herbe-vive>i:nth-child(14) img{left:-1300%}
.herbe-vive>i:nth-child(15){left:35.0%}.herbe-vive>i:nth-child(15) img{left:-1400%}
.herbe-vive>i:nth-child(16){left:37.5%}.herbe-vive>i:nth-child(16) img{left:-1500%}
.herbe-vive>i:nth-child(17){left:40.0%}.herbe-vive>i:nth-child(17) img{left:-1600%}
.herbe-vive>i:nth-child(18){left:42.5%}.herbe-vive>i:nth-child(18) img{left:-1700%}
.herbe-vive>i:nth-child(19){left:45.0%}.herbe-vive>i:nth-child(19) img{left:-1800%}
.herbe-vive>i:nth-child(20){left:47.5%}.herbe-vive>i:nth-child(20) img{left:-1900%}
.herbe-vive>i:nth-child(21){left:50.0%}.herbe-vive>i:nth-child(21) img{left:-2000%}
.herbe-vive>i:nth-child(22){left:52.5%}.herbe-vive>i:nth-child(22) img{left:-2100%}
.herbe-vive>i:nth-child(23){left:55.0%}.herbe-vive>i:nth-child(23) img{left:-2200%}
.herbe-vive>i:nth-child(24){left:57.5%}.herbe-vive>i:nth-child(24) img{left:-2300%}
.herbe-vive>i:nth-child(25){left:60.0%}.herbe-vive>i:nth-child(25) img{left:-2400%}
.herbe-vive>i:nth-child(26){left:62.5%}.herbe-vive>i:nth-child(26) img{left:-2500%}
.herbe-vive>i:nth-child(27){left:65.0%}.herbe-vive>i:nth-child(27) img{left:-2600%}
.herbe-vive>i:nth-child(28){left:67.5%}.herbe-vive>i:nth-child(28) img{left:-2700%}
.herbe-vive>i:nth-child(29){left:70.0%}.herbe-vive>i:nth-child(29) img{left:-2800%}
.herbe-vive>i:nth-child(30){left:72.5%}.herbe-vive>i:nth-child(30) img{left:-2900%}
.herbe-vive>i:nth-child(31){left:75.0%}.herbe-vive>i:nth-child(31) img{left:-3000%}
.herbe-vive>i:nth-child(32){left:77.5%}.herbe-vive>i:nth-child(32) img{left:-3100%}
.herbe-vive>i:nth-child(33){left:80.0%}.herbe-vive>i:nth-child(33) img{left:-3200%}
.herbe-vive>i:nth-child(34){left:82.5%}.herbe-vive>i:nth-child(34) img{left:-3300%}
.herbe-vive>i:nth-child(35){left:85.0%}.herbe-vive>i:nth-child(35) img{left:-3400%}
.herbe-vive>i:nth-child(36){left:87.5%}.herbe-vive>i:nth-child(36) img{left:-3500%}
.herbe-vive>i:nth-child(37){left:90.0%}.herbe-vive>i:nth-child(37) img{left:-3600%}
.herbe-vive>i:nth-child(38){left:92.5%}.herbe-vive>i:nth-child(38) img{left:-3700%}
.herbe-vive>i:nth-child(39){left:95.0%}.herbe-vive>i:nth-child(39) img{left:-3800%}
.herbe-vive>i:nth-child(40){left:97.5%}.herbe-vive>i:nth-child(40) img{left:-3900%}
.hero>.couche{left:-48px;width:calc(100% + 96px)}
.cta .herbe-vive{left:0;right:0}
.pied .herbe-vive{left:0;right:0}

/* boutique vivante : la porte s'ouvre, la lumière s'allume, quelqu'un fait coucou */
.porte{position:absolute;left:47%;width:8%;top:48.6%;height:45.7%;pointer-events:none;opacity:0;background:linear-gradient(#fff6cf,#ffd77a);transition:opacity 0s 260ms}
.porte>i{position:absolute;inset:0;background:#cfcbf8;box-shadow:inset 0 0 0 2px #234d0b;transform-origin:0 50%;transition:scale 260ms steps(3)}
.bonhomme{position:absolute;left:14%;bottom:1%;width:72%;opacity:0;translate:0 12%;transition:opacity 0s,translate 0s;image-rendering:pixelated}
.bonhomme .bras{transform-origin:7.5px 4.5px;animation:salue .7s steps(1) infinite}
@keyframes salue{50%{transform:rotate(-28deg)}}
@media (hover:hover) and (pointer:fine){
.boutique:hover .porte{opacity:1;transition-delay:0s}
.boutique:hover .porte>i{scale:.16 1}
.boutique:hover .bonhomme{opacity:1;translate:0 0;transition:opacity 0s 240ms,translate 160ms steps(2) 240ms}
.boutique:hover .vitre{opacity:1}
.boutique:hover .enseigne img{animation:allume .9s steps(1)}
}
.van2{background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit}
.van2 img{width:100%;display:block;image-rendering:pixelated}
.tut{position:absolute;left:34%;bottom:88%;background:#fff;border:3px solid var(--vert);padding:5px 9px 3px;font-size:14px;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;color:var(--vert)}
.van2.k1 .tut{animation:tut1 1.2s steps(1)}.van2.k2 .tut{animation:tut2 1.2s steps(1)}
.van2.k1 img{animation:hop1 .36s steps(2)}.van2.k2 img{animation:hop2 .36s steps(2)}
@keyframes tut1{0%,92%{opacity:1}0%,20%,40%{translate:0 0}10%,30%{translate:0 -4px}100%{opacity:0}}
@keyframes tut2{0%,92%{opacity:1}0%,20%,40%{translate:0 0}10%,30%{translate:0 -4px}100%{opacity:0}}
@keyframes hop1{50%{translate:0 -6px}}@keyframes hop2{50%{translate:0 -6px}}

/* photos qui apparaissent en pixels au défilement (cachées seulement si le navigateur sait l'animer) */
.pano,.toile,.pq-photo{view-timeline:--photo}
.pixels{display:none;position:absolute;inset:0;z-index:2;pointer-events:none;grid-template-columns:repeat(16,1fr)}
.pixels i{background:var(--fond);scale:0}
.pano .pixels{grid-template-rows:repeat(8,1fr)}
.toile .pixels{grid-template-columns:repeat(20,1fr);grid-template-rows:repeat(6,1fr)}
.pq-photo .pixels{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(10,1fr)}

/* mini-diagnostic */
.diag-w{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.diag-p{margin:20px 0 0;max-width:40ch}
.soucis{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.souci{font:600 17px/1.2 "Hanken Grotesk",system-ui,sans-serif;color:var(--vert);background:#fff;border:0;box-shadow:inset 0 0 0 3px var(--vert);padding:12px 18px;min-height:48px;cursor:pointer;transition:transform 160ms var(--out),background-color 180ms ease,color 180ms ease;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.souci:active{transform:scale(.97)}
.souci[aria-pressed="true"]{background:var(--vert);color:var(--lime)}
@media (hover:hover) and (pointer:fine){.souci:hover{background:var(--pale)}.souci[aria-pressed="true"]:hover{background:var(--vert)}}
.diag-fen{width:auto}
.diag-txt{padding:20px 24px 4px;font-size:18px}
.diag-txt p{margin:0 0 14px;max-width:52ch}
.diag-txt .dl:first-child{font-family:"Geist Mono",monospace;font-size:15px;color:#437a1d}
.diag-txt b{display:block;font-family:VG5000,monospace;font-weight:400;font-size:16px;color:var(--violet)}
.diag-txt::after{content:"";display:block;width:12px;height:18px;background:var(--lime);margin:0 0 12px;animation:cligneC 1s steps(1) infinite}
@keyframes cligneC{50%{opacity:0}}
.da .dl{animation:ligneA 320ms var(--out) backwards}.db .dl{animation:ligneB 320ms var(--out) backwards}
.diag-txt .dl:nth-child(2){animation-delay:80ms}.diag-txt .dl:nth-child(3){animation-delay:160ms}.diag-txt .dl:nth-child(4){animation-delay:240ms}
@keyframes ligneA{from{opacity:0;transform:translateX(-10px)}}@keyframes ligneB{from{opacity:0;transform:translateX(-10px)}}
.diag-ctas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;padding:4px 24px 24px}

/* avis Google, tableau des scores 8 bits */
.avis2{display:grid;grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.score{background:var(--vert);color:var(--pale);border-color:var(--vert);padding:26px 26px 22px;display:flex;flex-direction:column;gap:8px}
.score .sk{margin:0;font-size:13px;letter-spacing:.06em;color:var(--lime)}
.score .note{margin:4px 0 0;font-size:72px;line-height:.9;color:#fff}
.score .etx{display:flex;gap:4px}.score .etx svg{width:22px;height:22px;fill:var(--lime)}
.score p{margin:0}.score .lien{color:var(--lime);margin-top:auto;padding-top:8px}
.avis-c{margin:0;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.avis-c .etx{display:flex;gap:3px}.avis-c .etx svg{width:14px;height:14px;fill:var(--violet)}
.avis-c blockquote{margin:0;font-size:17px}
.avis-c figcaption{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.35}
.ava{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--lav);font-size:18px}
.avis-note{font-size:13px;margin:14px 0 0;color:#437a1d}
@media (max-width:1180px){.avis2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* le grand MBV du bas, en herbe */
.geant{color:transparent;background-image:url("../img/herbe-devant3b.png"),url("../img/herbe-milieu3.png"),linear-gradient(var(--lime),var(--lime));background-repeat:repeat-x,repeat-x,no-repeat;background-size:auto 34%,auto 38%,100% 100%;background-position:0 100%,0 86%,0 0;-webkit-background-clip:text;background-clip:text;image-rendering:pixelated;cursor:default}

/* passages entre pages (version WordPress : actif quand les autres pages l'auront aussi) */
@supports not (-moz-appearance:none){@view-transition{navigation:auto}}
.head{view-transition-name:entete}.rubs{view-transition-name:rubriques}

/* défilement de la page : chaque bloc arrive, les visuels flottent à leur propre vitesse.
   Uniquement les propriétés translate / scale / opacity : n'empiète pas sur les survols, reste fluide. */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){
.sec .intro>*,.sec>.h2,.avis{animation:arrive cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 5% cover 30%}
.sec .intro>*:nth-child(2){animation-range:entry 15% cover 36%}
@keyframes arrive{from{opacity:0;translate:0 56px}}
.duo .dossier-w{animation:monteDossier cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 0% cover 28%}
.duo .dossier-w:nth-child(2){animation-range:entry 8% cover 34%}
.duo .dossier-w:nth-child(3){animation-range:entry 16% cover 40%}
@keyframes monteDossier{from{opacity:0;translate:0 120px;scale:.94}}
.scene-info .fen,.scene-caisse .caisse,.scene-wifi{animation:flotteLent linear both;animation-timeline:view();animation-range:cover}
.scene-caisse .tab,.scene-info .ordi-pose{animation:flotteVite linear both;animation-timeline:view();animation-range:cover}
@keyframes flotteLent{from{translate:0 36px}to{translate:0 -36px}}
@keyframes flotteVite{from{translate:0 80px}to{translate:0 -80px}}
.trio .mini{animation:glisseG cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 0% cover 30%}
.trio .mini:nth-child(2){animation-name:glisseD}
@keyframes glisseG{from{opacity:0;translate:-90px 0}}
@keyframes glisseD{from{opacity:0;translate:90px 0}}
.pano{animation:ouvre cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 0% cover 40%}
@keyframes ouvre{from{scale:.86;opacity:.3}}
.pano-txt{animation:arrive cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 30% cover 50%}
.toile img{scale:1.18;animation:derivePhoto linear both;animation-timeline:view();animation-range:cover}
.pq-photo img{scale:1.15;animation:derivePhoto linear both;animation-timeline:view();animation-range:cover}
@keyframes derivePhoto{from{translate:0 -7%}to{translate:0 7%}}
.route .etape{animation:planteEtape cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 30% cover 40%}
.route .etape:nth-child(3){animation-range:entry 30% cover 43%}.route .etape:nth-child(4){animation-range:entry 30% cover 46%}
.route .etape:nth-child(5){animation-range:entry 30% cover 49%}.route .etape:nth-child(6){animation-range:entry 30% cover 52%}
.route .etape:nth-child(7){animation-range:entry 30% cover 55%}.route .etape:nth-child(8){animation-range:entry 30% cover 58%}
.route .etape:nth-child(9){animation-range:entry 30% cover 61%}.route .etape:nth-child(10){animation-range:entry 30% cover 64%}
@keyframes planteEtape{from{opacity:0;translate:0 -40px}}
.offre{animation:offreA 260ms var(--out) backwards,arrive cubic-bezier(0.23,1,0.32,1) both;animation-timeline:auto,view();animation-range:normal,entry 0% cover 30%}
.t-caisse .offre{animation-name:offreB,arrive}
.offre:nth-child(2){animation-delay:40ms,0s;animation-range:normal,entry 6% cover 34%}
.offre:nth-child(3){animation-delay:80ms,0s;animation-range:normal,entry 12% cover 38%}
.pq>div{animation:arrive cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 0% cover 30%}
.pq>div:nth-child(2){animation-range:entry 8% cover 34%}.pq>div:nth-child(3){animation-range:entry 16% cover 38%}.pq>div:nth-child(4){animation-range:entry 24% cover 42%}
.cta{animation:ouvre cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 0% cover 35%}
.geant{animation:geant cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 0% cover 45%}
@keyframes geant{from{translate:-24% 0;opacity:0}}
}}

@media (prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){
.avis2>*{animation:arrive cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 0% cover 30%}
.avis2>*:nth-child(2){animation-range:entry 6% cover 34%}.avis2>*:nth-child(3){animation-range:entry 12% cover 38%}.avis2>*:nth-child(4){animation-range:entry 18% cover 42%}
.diag-w>*{animation:arrive cubic-bezier(0.23,1,0.32,1) both;animation-timeline:view();animation-range:entry 5% cover 30%}
.diag-w>*:nth-child(2){animation-range:entry 12% cover 36%}
}}

/* très grands écrans (plus de 2 460 px) : le paysage grandit avec la largeur au lieu de couper le haut des arbres */
.hero{container-type:inline-size}
.hero>.couche[src*="981be16e8c2b92dbabbc41d3793b69fc"]{height:max(320px,calc((100cqw + 96px) * 0.12500 + 0px))!important}
.hero>.couche[src*="a585ed20a0eee4394913795aef70ffe7"]{height:max(272px,calc((100cqw + 96px) * 0.10625 + 0px))!important}
.hero>.couche[src*="a0919582283a3256c8b91b67e6b056ba"]{height:max(208px,calc((100cqw + 96px) * 0.08125 + 0px))!important}
.hero>.couche[src*="e62a0a3b161db58755ea9db1e25ae8aa"]{height:max(104px,calc((100cqw + 96px) * 0.04063 + 0px))!important}
.hero>.couche[src*="194b20b42a6fe1f90db1ca4115c84d56"]{height:max(120px,calc((100cqw + 96px) * 0.04688 + 0px))!important}
.hero>.couche[src*="cdda8b36e765cbdda16156d9b74203b4"]{height:max(88px,calc((100cqw + 96px) * 0.03438 + 0px))!important}
.hero>.couche.calque{height:max(208px,calc((100cqw + 96px) * 0.08125 + 0px))!important}
.herbe-vive>i img{height:max(80px,calc((100cqw + 96px) * 0.03125 + 0px))}
.herbe-vive{height:max(96px,calc((100cqw + 96px) * 0.03125 + 16px))!important}
/* petits portables et tablettes en paysage : les 6 rubriques tiennent sur une ligne */
@media (min-width:901px) and (max-width:1240px){.rub{padding:10px 8px;gap:8px;font-size:16px}.rub .ic{width:34px;height:34px}.rub small{display:none}}
@media (max-width:900px){
.terre{top:80px}
.terre .w{filter:drop-shadow(5px 5px 0 var(--lime))}
.rubs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px}
.rubs::-webkit-scrollbar{display:none}
.rubs li{flex:none;scroll-snap-align:start}
.rub{padding:10px 12px;font-size:17px;gap:10px}.rub .ic{width:38px;height:38px}.rub small{display:none}
.w{padding-left:16px;padding-right:16px}
.nav,.statut{display:none}
.burger{display:inline-flex;margin-left:auto;width:48px;height:48px;align-items:center;justify-content:center;background:#fff;border:3px solid var(--vert);cursor:pointer}
.head .w{gap:12px;padding-top:14px;padding-bottom:14px}
.head .btn{min-height:48px;padding:0 14px;font-size:16px}
.hero{min-height:1480px}
.titre{padding-top:190px}
.pano{height:440px}.pano-txt{left:20px;right:20px;top:auto;bottom:24px;align-items:flex-start;text-align:left}.pano::after{background:linear-gradient(180deg,rgba(35,77,11,0) 40%,rgba(20,45,6,.8) 100%)}.pano-s{font-size:16px}
.pq-w{grid-template-columns:minmax(0,1fr);gap:28px}.pq-w .pq{grid-template-columns:minmax(0,1fr)}.pq-photo{aspect-ratio:4/3}
.toile{height:180px;margin-top:28px}.toile+.route{margin-top:-28px;width:calc(100% - 24px);margin-left:12px}
.infos-mag{position:relative;right:auto;top:auto;width:auto;margin-top:28px;z-index:10}
.hero .hero-w{display:flex;flex-direction:column}
.lead{font-size:18px}
.tel-txt{display:none}.tel-ico{display:inline;font-family:"Hanken Grotesk",sans-serif;font-size:16px;font-weight:700}
.compo{position:relative;right:auto;top:auto;width:100%;height:330px;margin-top:36px}
.flot.f1{right:auto!important;left:0;top:0!important}
.flot.f1 .fen{width:250px}
.fen pre{font-size:11px}
.flot.f2{right:0!important;top:150px!important}
.flot.f2 .caisse{width:180px;padding:10px 10px 8px}
.flot.f2 .caisse img{margin-top:-34px}
.flot.f3{left:auto!important;right:10px;top:40px!important}
.soleil{left:auto;right:24px;top:96px;width:88px;height:88px}
.ciel{background-size:auto 1750px!important;background-position:20% 100%!important}
.soleil{margin-top:min(0px,calc(var(--sol,0px)*.3))}
.boutique{width:240px;left:auto;right:4%;bottom:50px}

.panneau{font-size:8px;padding:3px 5px 2px;border-width:1px}
.sec{padding-top:96px}
.dossier{padding:32px 22px 26px;min-height:0}
.visu{flex-direction:column;align-items:flex-start}
.scene-info{width:100%;padding-right:0}.scene-info .fen{width:calc(100% - 60px)}.scene-caisse{width:100%}
.badge-devis{position:relative;right:auto;top:auto;display:inline-block;margin-bottom:18px;scale:1}.badge-devis .puce{font-size:22px;padding:10px 16px}
.route{height:auto;padding:24px 20px 24px 64px;display:flex;flex-direction:column;gap:22px}
.route .chemin{top:0;bottom:0;left:30px;right:auto;width:24px;height:auto;background:repeating-linear-gradient(180deg,#fff 0 24px,transparent 24px 48px) center/4px 100% no-repeat,var(--vert)}
.etape{position:relative;left:auto!important;top:auto;transform:none;flex-direction:row-reverse;justify-content:flex-end;font-size:16px}
.etape .mat{width:18px;height:4px}
.etape .pin{margin-left:-46px}
.route .van2{display:none}
.cta{padding:44px 22px 110px;margin-top:96px}
.sec>.asc,.cta>.asc{display:none}.pied .asc{width:150px!important;right:16px!important;bottom:150px!important;opacity:.6}
.offre{padding:28px 22px 24px;min-height:0}.offre.top{min-height:0}.offres{align-items:stretch}
.prix{font-size:36px}
.mascotte{right:12px;bottom:12px}
.mascotte .ordi{width:64px;height:55px}
.diag-w{grid-template-columns:minmax(0,1fr);gap:28px}
.souci{font-size:16px;padding:10px 14px}
.diag-txt{font-size:17px;padding:16px 16px 4px}.diag-ctas{padding:4px 16px 18px}
.avis2{grid-template-columns:minmax(0,1fr)}
.tut{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
.va *,.va *::after{animation:none!important}
.etape.ici .pin::after{display:none}
.van{transform:translateX(30vw)}
}

/* ===== v30 : en-tête, barres, repères, village, boutons, icônes, tickets, compteur ===== */
.va [id]{scroll-margin-top:96px}
.head .w{gap:14px}
.statut{--n:4px;gap:8px;padding:10px 14px 9px;background:#fff;border:0;box-shadow:inset 0 0 0 2px var(--vert);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.statut .st-d{text-transform:none;letter-spacing:0;font:500 13.5px/1 "Hanken Grotesk",system-ui,sans-serif;opacity:.78}
.statut .st-d::before{content:"·";margin-right:8px}
.nuit .statut{background:rgba(16,32,10,.6);color:#fff;border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.devis-h{min-height:52px;font-size:17px;padding:0 20px}
.head .tel{min-height:52px;gap:10px}
.tel-i{width:18px;height:18px;fill:currentColor;flex:none;image-rendering:pixelated}
/* boutons façon jeu : une lèvre en bas, on enfonce la touche */
.btn.px{padding-bottom:4px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2);transition:transform 120ms var(--out),box-shadow 120ms var(--out),background-color 200ms ease}
.btn.px:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.btn.px.btn-wb{box-shadow:inset 0 0 0 3px #234d0b,inset 0 -7px 0 rgba(35,77,11,.22)}
.btn.px.btn-wb:active{box-shadow:inset 0 0 0 3px #234d0b,inset 0 -4px 0 rgba(35,77,11,.22)}
@media (hover:hover) and (pointer:fine){.btn.px:hover{transform:translateY(-2px)}.btn.px:active{transform:translateY(3px)}}
/* en-tête compact qui revient quand on remonte */
.barre{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(246,253,240,.96);box-shadow:0 3px 0 var(--vert);transform:translateY(-110%);transition:transform 240ms var(--out)}
.barre.on{transform:none}
.barre-w{display:flex;align-items:center;gap:20px;height:66px}
.barre-logo{display:block;line-height:0}
.barre-nav{display:flex;gap:24px;margin-left:16px}
.barre-nav a{color:var(--vert);text-decoration:none;font-weight:600;font-size:16px;padding:6px 0;background:linear-gradient(var(--violet),var(--violet)) left bottom/0 3px no-repeat;transition:background-size 220ms var(--out)}
@media (hover:hover) and (pointer:fine){.barre-nav a:hover{background-size:100% 3px}}
.barre-st{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.barre .btn{min-height:44px;padding:0 16px 3px;font-size:15px}
.barre .burger{width:44px;height:44px;margin-left:auto}
/* barre d'appel du téléphone */
.appel-bar{display:none}
/* repères de sections */
.reperes{position:fixed;right:20px;top:50%;translate:0 -50%;z-index:40;display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.reperes a{position:relative;display:block;width:12px;height:12px;background:#fff;box-shadow:inset 0 0 0 2px var(--vert);transition:transform 160ms var(--out),background-color 160ms ease}
.reperes a::before{content:"";position:absolute;inset:-8px}
.reperes a[aria-current]{background:var(--lime);transform:scale(1.4)}
.reperes span{position:absolute;right:24px;top:50%;translate:0 -50%;white-space:nowrap;background:var(--vert);color:var(--pale);font:500 12.5px/1 "Geist Mono",monospace;letter-spacing:.04em;padding:6px 8px 5px;opacity:0;transform:translateX(4px);transition:opacity 150ms var(--out),transform 150ms var(--out);pointer-events:none}
@media (hover:hover) and (pointer:fine){.reperes a:hover span,.reperes a:focus-visible span{opacity:1;transform:none}}
@media (max-width:1180px){.reperes{display:none}}
/* village : fenêtres qui s'allument, cheminées qui fument */
.calque{pointer-events:none}
.calque img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:bottom;image-rendering:pixelated}
.nuit .hero .couche.calque{filter:none}
.nuit .calque .chem{filter:brightness(.62) saturate(1.15)}
.calque .lum{opacity:0}
.nuit .calque .lum{opacity:1}
.calque .fu{opacity:.55}.calque .fu2{display:none}
.nuit .calque .fu{opacity:.35}
/* formules en tickets de caisse */
.offre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23f6fdf0' d='M2 0h2v1h1v1h1v1H0V2h1V1h1z'/%3E%3C/svg%3E") 0 100%/18px 9px repeat-x;pointer-events:none}
.offre ul{border-top:2px dashed currentColor;padding-top:16px}
.offre .tk{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.06em;opacity:.7;margin:0}
.offre.top .tk span+span{visibility:hidden}
/* compteur façon arcade */
.arcade{--n:14px;position:relative;background:var(--vert);color:var(--pale);padding:44px 48px 48px;overflow:hidden}
.arcade::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.14) 3px 4px);pointer-events:none}
.arc-k{margin:0;font-size:13px;letter-spacing:.12em;color:var(--lime);display:flex;gap:10px;align-items:center}
.arc-k i{width:10px;height:14px;background:var(--lime)}
.cpts{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.cpts li{display:flex;flex-direction:column;gap:12px;border-left:3px dashed rgba(163,217,107,.45);padding-left:22px}
.cpts li:first-child{border-left:0;padding-left:0}
.cpt{font-size:clamp(52px,6vw,84px);line-height:.9;color:var(--lime);font-weight:400;font-variant-numeric:tabular-nums}
.cpts span.lb{font-size:17px;line-height:1.35;max-width:22ch}
@media (max-width:900px){
  .devis-h,.statut .st-d{display:none}
  .barre-w{height:58px}.barre-nav,.barre-st,.b-devis,.b-tel{display:none}
  .appel-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(246,253,240,.97);box-shadow:0 -3px 0 var(--vert);transform:translateY(110%);transition:transform 240ms var(--out)}
  .appel-on .appel-bar{transform:none}
  .appel-bar .btn{justify-content:center;min-height:52px;font-size:17px;padding:0 12px 4px}
  .mascotte{transition:translate 240ms var(--out)}
  .appel-on .mascotte{translate:0 -84px}
  .arcade{padding:32px 22px 34px}
  .cpts{grid-template-columns:1fr 1fr;gap:28px 18px}
  .cpts li{border-left:0;padding-left:0}
  .cpt{font-size:54px}
  .cpts span.lb{font-size:15.5px}
}
/* « Trois métiers » : les dossiers s'empilent pendant qu'on défile */
@media (min-width:1181px){
  .duo{grid-template-columns:minmax(0,1fr);gap:56px}
  .duo .dossier-w{position:sticky;top:90px}
  .duo .dossier-w:nth-child(2) .onglet{left:calc(33.33% - 40px)}
  .duo .dossier-w:nth-child(3) .onglet{left:calc(66.66% - 80px)}
  .duo .dossier-w+.dossier-w{filter:drop-shadow(0 -8px 0 rgba(35,77,11,.14))}
  .duo .dossier{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-content:start;min-height:520px;padding:48px 48px 40px}
  .duo .dossier>*{grid-column:1}
  .duo .dossier>.visu{grid-column:2;grid-row:1 / span 4;align-self:center;margin-top:0}
  .duo .dossier h3{font-size:clamp(36px,3vw,48px)}
}
@media (prefers-reduced-motion:reduce){.barre,.appel-bar,.mascotte{transition:none}}
@media (prefers-reduced-motion:no-preference){
  .dot:not(.ferme){animation:led 2.4s steps(1) infinite}
  @keyframes led{50%{opacity:.3}}
  .nuit .calque .lum{animation:allumeFen 10ms steps(1) both}
  .nuit .calque .l1{animation-delay:.9s}.nuit .calque .l2{animation-delay:1.7s}.nuit .calque .l3{animation-delay:2.8s}
  @keyframes allumeFen{from{opacity:0}to{opacity:1}}
  .calque .fu2{display:block}
  .calque .fu{animation:fume 5.6s steps(14) infinite}.calque .fu2{animation-delay:-2.8s}
  @keyframes fume{0%{opacity:0;transform:translateY(8px)}25%{opacity:.75}100%{opacity:0;transform:translateY(-16px)}}
  .nuit .calque .fu{animation-name:fumeN}
  @keyframes fumeN{0%{opacity:0;transform:translateY(8px)}25%{opacity:.4}100%{opacity:0;transform:translateY(-16px)}}
  @media (hover:hover) and (pointer:fine){
    .rub .ic{position:relative}
    .rubs li:nth-child(1) .rub:is(:hover,:focus-visible) svg,.rubs li:nth-child(5) .rub:is(:hover,:focus-visible) svg{animation:icHop 360ms steps(3)}
    .rubs li:nth-child(2) .rub .ic::after{content:"";position:absolute;left:33%;top:29%;width:34%;height:24%;background:var(--lime);opacity:0}
    .rubs li:nth-child(2) .rub:is(:hover,:focus-visible) .ic::after{animation:icEcran 700ms steps(1)}
    .rubs li:nth-child(3) .rub .ic::after{content:"";position:absolute;left:38%;bottom:72%;width:24%;height:14px;background:#fff;box-shadow:inset 0 0 0 2px var(--vert),inset 0 -5px 0 -3px var(--vert);transform:scaleY(0);transform-origin:50% 100%;transition:transform 120ms steps(2)}
    .rubs li:nth-child(3) .rub:is(:hover,:focus-visible) .ic::after{transform:scaleY(1);transition:transform 360ms steps(4)}
    .rubs li:nth-child(4) .rub:is(:hover,:focus-visible) svg{animation:icBalance 480ms steps(4)}
    .rubs li:nth-child(6) .rub:is(:hover,:focus-visible) svg{animation:icShake 360ms steps(6)}
    @keyframes icHop{50%{transform:translateY(-4px)}}
    @keyframes icBalance{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
    @keyframes icShake{20%,60%{transform:translateX(-2px)}40%,80%{transform:translateX(2px)}}
    @keyframes icEcran{0%,66%{opacity:.95}33%,100%{opacity:0}}
  }
  @supports (animation-timeline: view()){
    .route .van2{animation:rouleScroll linear both;animation-timeline:--route;animation-range:cover 12% cover 72%}
    @keyframes rouleScroll{from{transform:translateX(-140px)}to{transform:translateX(calc(100cqw - 110px))}}
    .offre::before{content:"";position:absolute;inset:0;z-index:3;background:var(--fond);transform-origin:50% 100%;animation:imprime steps(12) both;animation-timeline:view();animation-range:entry 15% cover 42%;pointer-events:none}
    @keyframes imprime{from{transform:scaleY(1)}to{transform:scaleY(0)}}
    @property --cpt{syntax:"<integer>";initial-value:0;inherits:false}
    .cpt.n .v{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .cpt.n::before{counter-reset:c var(--cpt);content:counter(c);animation:compte steps(var(--to)) both;animation-timeline:view();animation-range:entry 30% cover 50%}
    @keyframes compte{from{--cpt:0}to{--cpt:var(--to)}}
  }
}

/* panneau en bois planté dans le pré (remplace la carte qui flottait dans le ciel) */
.poteau{position:absolute;left:calc(63% - 300px);right:auto;top:auto;bottom:40px;width:272px;z-index:2;padding:0;margin:0;font-size:14.5px;line-height:1.4;transform-origin:50% 100%}
.poteau .planche{--n:6px;position:relative;background:#d9b57c repeating-linear-gradient(transparent 0 27px,#b88e55 27px 30px);box-shadow:inset 0 0 0 3px #5a3a17,inset 0 -7px 0 rgba(90,58,23,.3);padding:18px 20px 16px;color:#3a2410}
.poteau .planche::before{content:"";position:absolute;left:10px;top:10px;width:4px;height:4px;background:#5a3a17;box-shadow:244px 0 0 #5a3a17}
.poteau .im-k{color:#3a2410}
.poteau .im-adr{margin-top:10px!important}
.poteau .im-tel{margin-top:6px!important}
.poteau .im-tel a{color:#3a2410}.poteau .im-tel .d{font-size:20px}
.poteau .im-h{font-size:14px;margin-top:10px}
.poteau .im-h caption{border-top:2px dashed #8a6232;padding-top:10px}
.poteau .im-h tr.auj{background:rgba(255,248,225,.55);box-shadow:-8px 0 0 rgba(255,248,225,.55),8px 0 0 rgba(255,248,225,.55)}
.poteau .pieux{display:flex;justify-content:space-between;padding:0 40px}
.poteau .pieux i{width:12px;height:88px;background:#7a5226;box-shadow:inset -4px 0 0 #5a3a17}
.nuit .poteau .planche{filter:brightness(.86)}
.nuit .poteau::before{content:"";position:absolute;left:50%;top:-70px;width:320px;height:180px;translate:-50% 0;background:radial-gradient(closest-side,rgba(255,214,120,.32),rgba(255,214,120,0));pointer-events:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.poteau:hover .planche{animation:grince 700ms steps(4)}@keyframes grince{25%{rotate:-1.2deg}75%{rotate:1.2deg}}}
@media (max-width:900px){
  .poteau{position:relative;left:auto;bottom:auto;width:auto;max-width:360px;margin-top:28px}
  .poteau .planche::before{box-shadow:none}
  .poteau .pieux i{height:26px}
}

/* éléments voletants sur toute la page (règle du propriétaire : il en faut toujours à l'écran) */
.volants{display:none}
@media (prefers-reduced-motion:no-preference){
  .volants{display:block;position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
  .volants{container-type:size}.volants i{position:absolute;display:block}
  .vb{left:0;height:4px;background:var(--bc);box-shadow:inset -6px 0 rgba(35,77,11,.3),0 2px 0 rgba(35,77,11,.45);opacity:0;animation:vol var(--d) linear infinite;animation-delay:var(--dl)}
  .vs{left:0;width:6px;height:6px;background:#f4e7c4;box-shadow:5px -5px 0 -1px rgba(255,255,255,.9),-3px -6px 0 -1px rgba(255,255,255,.7);opacity:0;animation:volVent var(--d) linear infinite;animation-delay:var(--dl)}
  .nuit .vs{background:#cfcbf8;box-shadow:4px -4px 0 -1px rgba(207,203,248,.6)}
  @keyframes volVent{0%{transform:translate(-40px,0) rotate(0deg);opacity:0}8%{opacity:.85}30%{transform:translate(30cqw,var(--a)) rotate(18deg)}55%{transform:translate(55cqw,calc(var(--a)*-.6)) rotate(-12deg)}80%{transform:translate(80cqw,calc(var(--a)*.8)) rotate(22deg);opacity:.85}100%{transform:translate(104cqw,0) rotate(0deg);opacity:0}}
  .vl{display:none!important}.nuit .vl{display:block!important}
  .vl{top:100%;width:4px;height:4px;background:#f2c14e;opacity:0;animation:volMonte var(--d) linear infinite;animation-delay:var(--dl)}
  .nuit .vl{width:6px;height:6px;background:#def8c6;box-shadow:0 0 12px 4px rgba(163,217,107,.65)}
  @keyframes volMonte{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}30%{transform:translate(calc(var(--dx)*.4),-34cqh)}55%{transform:translate(calc(var(--dx)*-.2),-62cqh)}80%{transform:translate(calc(var(--dx)*.7),-90cqh);opacity:.9}100%{transform:translate(var(--dx),-112cqh);opacity:0}}
}
/* le panneau est planté dans le pré, à côté du magasin */
.hero>.poteau{bottom:30px}
.hero>.poteau .pieux i{height:66px}
@media (min-width:901px){.poteau .im-tel br,.poteau .im-tel a[href^="mailto"]{display:none}}
@media (max-width:900px){.hero>.poteau{margin:28px 16px 0;bottom:auto}.hero>.poteau .pieux i{height:26px}}
.dossier li a{color:inherit;font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}
.pourquoi-arc,.sec .arcade{margin:40px 0 56px}

/* ciel de nuit : étoiles placées au hasard qui scintillent, étoile filante, lune qui brille */
.etoiles{position:absolute;inset:0 0 38% 0;z-index:-2;background:none!important;opacity:1}
.etoiles .e{position:absolute;width:var(--s);height:var(--s);background:var(--c)}
.etoiles .e.x{box-shadow:var(--s) 0 0 rgba(255,255,255,.55),calc(var(--s)*-1) 0 0 rgba(255,255,255,.55),0 var(--s) 0 rgba(255,255,255,.55),0 calc(var(--s)*-1) 0 rgba(255,255,255,.55)}
.etoiles .filante{display:none}
.lune{overflow:visible}
.lune .h1{opacity:.16}.lune .h2{opacity:.3}
.poteau{background:none!important}
@media (prefers-reduced-motion:no-preference){
  .etoiles .e{animation:scintille var(--d) steps(1) infinite;animation-delay:var(--dl)}
  .etoiles .e.x{animation-name:scintilleX}
  @keyframes scintille{0%,100%{opacity:1}30%{opacity:.45}45%{opacity:.85}70%{opacity:.25}85%{opacity:.7}}
  @keyframes scintilleX{0%,100%{opacity:1;transform:scale(1)}35%{opacity:.6;transform:scale(.6)}60%{opacity:1;transform:scale(1.25)}80%{opacity:.4;transform:scale(.8)}}
  .etoiles .filante{display:block;position:absolute;left:12%;top:8%;width:90px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);opacity:0;transform:rotate(18deg);animation:filante 11s linear infinite 3s}
  @keyframes filante{0%{opacity:0;translate:0 0}2%{opacity:1}9%{opacity:0;translate:420px 136px}100%{opacity:0;translate:420px 136px}}
  .lune .h1{animation:halo 4.8s ease-in-out infinite alternate}
  .lune .h2{animation:halo2 4.8s ease-in-out infinite alternate}
  @keyframes halo{from{opacity:.08}to{opacity:.24}}
  @keyframes halo2{from{opacity:.22}to{opacity:.42}}
}

/* rubriques fondues dans l'en-tête (choix du propriétaire, 24/10) */
.head .terre{position:static;flex:1;min-width:0;display:flex;justify-content:center}
.head .terre .w{max-width:none;width:auto;padding:0;margin:0;filter:none}
.head .rubs{display:flex;gap:2px;margin:0;padding:4px;background:rgba(246,253,240,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;box-shadow:0 0 0 2px rgba(35,77,11,.16)}
.head .rubs li+li{border-left:0}
.head .rub{position:relative;padding:9px 10px;font-size:16px;gap:8px}
.head .rub .ic{width:28px;height:28px}
.head .rub svg{width:16px;height:16px}
.head .rub small{display:none}
.head .rub::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:3px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--out)}
.head .rub[aria-current]::after{transform:scaleX(1);background:var(--vert)}
@media (hover:hover) and (pointer:fine){.head .rub:hover::after{transform:scaleX(1)}.head .rub:hover .ic{transform:none}}
.nuit .head .rubs{background:rgba(22,28,72,.5);box-shadow:0 0 0 2px rgba(207,203,248,.22)}
.nuit .head .rub{color:#fff}.nuit .head .rub .ic{background:rgba(255,255,255,.12)}.nuit .head .rub svg{fill:#fff}
.nuit .head .rub[aria-current]::after{background:var(--lime)}
.head .statut{display:none}
.titre{padding-top:170px}
@media (max-width:1599px){.head .rub .ic{display:none}.head .rub{padding:9px 9px}}
@media (max-width:1240px){.head .tel-txt{display:none}.head .tel-ico{display:inline}}
@media (max-width:1099px){
  .head .w{flex-wrap:wrap}
  .head .terre{order:9;flex-basis:100%;justify-content:flex-start}
  .head .terre .w{width:100%}
  .head .rubs{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .head .rubs::-webkit-scrollbar{display:none}
  .head .rubs li{flex:none;scroll-snap-align:start}
  .head .rub .ic{display:grid}
  .titre{padding-top:180px}
}
@media (min-width:901px) and (max-width:1099px){.soleil{left:auto;right:32px;top:300px;width:100px;height:100px}}
@media (max-width:900px){.titre{padding-top:150px}.soleil{top:140px;right:16px;width:64px;height:64px}}

/* titres tapés lettre par lettre (une seule fois, à l'arrivée à l'écran) */
.va .h2 .mot{white-space:nowrap}
.va .h2.tape-pret .l{opacity:0}
.va .h2.tape-go .l{animation:lettre calc(var(--v,34ms) * 2) linear both;animation-delay:calc(var(--i) * var(--v,34ms))}
@keyframes lettre{0%{opacity:0}1%{opacity:1;box-shadow:inset 0 -.11em var(--violet)}99%{box-shadow:inset 0 -.11em var(--violet)}100%{opacity:1;box-shadow:none}}
.va .h2.tape-pret::after{content:"";display:inline-block;width:.42em;height:.11em;margin-left:.08em;background:var(--violet);opacity:0}
.va .h2.tape-go::after{animation:cligneC .5s steps(1) 4 both,finCurseur 1ms steps(1) forwards;animation-delay:calc(var(--n) * var(--v,34ms)),calc(var(--n) * var(--v,34ms) + 2s)}
@keyframes finCurseur{to{visibility:hidden}}

/* respiration des titres de section */
.intro p.pro-tag{max-width:none;margin-bottom:22px}
.va .h2+p,.va .h2+.pro-sous{margin-top:20px}
.pro-sous .surl{display:block;margin-top:12px}
@media (max-width:900px){.intro p.pro-tag{white-space:normal;margin-bottom:18px}.va .h2+p{margin-top:16px}}

/* menu bien visible, et qui reste en haut pendant le défilement */
.head .rubs{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 3px var(--vert),5px 5px 0 3px var(--lime)}
.nuit .head .rubs{background:#f6fdf0;box-shadow:0 0 0 3px #cfcbf8,5px 5px 0 3px var(--violet)}
.nuit .head .rub{color:var(--vert)}.nuit .head .rub .ic{background:var(--pale)}.nuit .head .rub svg{fill:var(--vert)}.nuit .head .rub[aria-current]::after{background:var(--vert)}
.barre-nav{gap:4px;margin-left:8px}
.barre-nav a{padding:8px 10px;font-size:15px;background-position:10px calc(100% - 2px);background-size:0 3px}
.barre-nav a[aria-current]{background-size:calc(100% - 20px) 3px;background-image:linear-gradient(var(--vert),var(--vert))}
@media (hover:hover) and (pointer:fine){.barre-nav a:hover{background-size:calc(100% - 20px) 3px}}
.barre .barre-st{display:none}.barre .b-devis{margin-left:auto}
@media (max-width:1240px){.barre-nav a{padding:8px 7px;font-size:14px}.barre .b-tel{display:none}}
@media (max-width:1099px){.barre-nav{display:none}}

/* ===== styles propres à cette page ===== */
@font-face{font-family:"VG5000";src:url("../img/vg5000.otf") format("opentype");font-display:swap}
@media (hover:hover) and (pointer:fine){a:hover{color:#6b5fe0}}
::selection{background:#6b5fe0;color:#fff}
.va *{box-sizing:border-box}
.va a:focus-visible, .va button:focus-visible{outline:3px solid #6b5fe0;outline-offset:3px}
.hero{position:relative;min-height:800px;overflow:hidden;isolation:isolate;background:linear-gradient(#ecf9e2 0 22%,#e8f6e1 22% 36%,#e5f2e6 36% 47%,#e4eeee 47% 56%,#e4e9f5 56% 64%,#e5e5fa 64% 100%)}
.couche{position:absolute;left:0;width:100%;display:block;image-rendering:pixelated;pointer-events:none}
.herbe{transform-origin:50% 100%;animation:vent ease-in-out infinite alternate}
@keyframes vent{from{transform:skewX(-3.5deg)}to{transform:skewX(3.5deg)}}
.herbe.v2{animation-name:vent2}
@keyframes vent2{0%{transform:skewX(-4.5deg) translateX(-3px)}45%{transform:skewX(1deg) translateX(0)}100%{transform:skewX(4deg) translateX(3px)}}
@keyframes vol{0%{transform:translate(-4vw,0) rotate(0);opacity:0}8%{opacity:1}25%{transform:translate(24vw,var(--a)) rotate(100deg)}50%{transform:translate(52vw,calc(var(--a) * -0.6)) rotate(190deg)}75%{transform:translate(78vw,var(--a)) rotate(280deg)}92%{opacity:1}100%{transform:translate(104vw,0) rotate(360deg);opacity:0}}
.nuage{position:absolute;z-index:-2;image-rendering:pixelated;animation:derive linear infinite}
@keyframes derive{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.titre{position:relative;z-index:10;padding-top:140px;max-width:640px}
.fil{font-size:14px;margin:0 0 18px;display:flex;gap:10px}
.fil a{text-decoration:none}
.h1{font-size:clamp(40px,5vw,72px);line-height:1;margin:0;text-wrap:balance;letter-spacing:-0.01em}
.lead{font-size:clamp(18px,1.4vw,21px);line-height:1.5;margin:24px 0 0;max-width:36ch}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.compo{position:absolute;top:110px;right:40px;width:600px;height:560px;z-index:8}
.obj{position:absolute;animation:flotte 7s ease-in-out infinite alternate}
@keyframes flotte{from{translate:0 0}to{translate:0 -10px}}
.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;font-weight:700;font-size:15px;background:#fff;border:3px solid var(--vert);box-shadow:6px 6px 0 rgba(35,77,11,.18)}
.ticket{position:absolute;left:50%;width:140px;margin-left:-70px;top:56px;background:#fff;padding:12px 10px 16px;font-family:"Geist Mono",monospace;font-size:10.5px;line-height:1.5;color:var(--vert);box-shadow:0 10px 20px -10px rgba(0,0,0,.3);clip-path:inset(0 0 100% 0);animation:imprimeTicket 5s steps(14) infinite}
@keyframes imprimeTicket{0%{clip-path:inset(0 0 100% 0);transform:translateY(-40px)}45%,90%{clip-path:inset(0 0 0 0);transform:translateY(0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
.ticket hr{border:0;border-top:2px dashed currentColor;margin:5px 0}
.intro{display:flex;flex-wrap:wrap;gap:24px 64px;align-items:flex-end;justify-content:space-between}
.intro p{max-width:46ch;margin:0}
/* sélecteur de métier */
.metiers{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:28px;margin-top:52px;align-items:stretch}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.liste button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;background:#fff;box-shadow:inset 0 0 0 3px var(--vert);font-family:VG5000,monospace;font-size:22px;transition:background-color 180ms ease,color 180ms ease,transform 160ms var(--out);touch-action:manipulation;user-select:none}
.liste button:active{transform:scale(0.98)}
.liste button[aria-pressed="true"]{background:var(--vert);color:var(--lime)}
.liste .fl{margin-left:auto;opacity:0;transform:translateX(-6px);transition:opacity 180ms ease,transform 220ms var(--out)}
.liste button[aria-pressed="true"] .fl{opacity:1;transform:none}
.fiche{position:relative;background:var(--lav);padding:44px;min-height:440px;overflow:hidden;--n:14px}
.fiche .logi{font-size:14px;display:inline-block;background:#fff;padding:6px 10px}
.fiche h3{font-size:clamp(32px,3vw,46px);line-height:1;margin:18px 0 0}
.fiche ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:36ch}
.fiche li{display:flex;gap:12px;align-items:baseline}
.fiche li::before{content:"";width:10px;height:10px;flex:none;background:currentColor}
.fiche img{position:absolute;right:-20px;bottom:-10px;width:46%;max-width:380px}
.fade{animation:fondu 380ms var(--out)}
@keyframes fondu{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
/* comptoir */
.comptoir{position:relative;margin-top:56px;padding:0 24px}
.etagere{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;align-items:start;position:relative;z-index:1}
.etagere{--h:150px}
.etagere figure{margin:0;display:grid;justify-items:center;gap:50px;text-align:center;position:relative}
.etagere figure::before{content:"";position:absolute;left:-12px;right:-12px;top:var(--h);height:26px;background:var(--lime);box-shadow:inset 0 -6px 0 #8cc556,0 8px 0 var(--vert);z-index:-1}
.etagere img{height:var(--h);width:100%;object-fit:contain;object-position:bottom;transition:transform 260ms var(--out)}
@media (hover:hover) and (pointer:fine){.etagere figure:hover img{transform:translateY(-8px) rotate(-2deg)}}
.etagere figcaption{font-size:15px;font-weight:600}
.planche{height:26px;background:var(--lime);box-shadow:inset 0 -6px 0 #8cc556,0 10px 0 var(--vert);margin:-50px -24px 0}
/* étapes */
.route{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.route::before{content:"";position:absolute;left:0;right:0;top:34px;height:20px;background:repeating-linear-gradient(90deg,#fff 0 20px,transparent 20px 40px) center/100% 4px no-repeat,var(--vert);z-index:0}
.pas{position:relative;z-index:2;padding-top:84px}
.pas .pin{position:absolute;top:26px;left:0;width:36px;height:36px;background:var(--lime);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--vert);display:grid;place-items:center;font-size:16px}
.pas h3{font-size:26px;line-height:1.1;margin:0}
.pas p{margin:8px 0 0;font-size:16px}
.route .van{position:absolute;top:2px;width:96px;image-rendering:pixelated;z-index:1;animation:rouler 12s var(--inout) infinite alternate}
@keyframes rouler{from{left:0}to{left:calc(100% - 96px)}}
.offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;margin-top:48px}
.offre{background:#fff;border:3px solid var(--vert);padding:32px;display:flex;flex-direction:column;gap:12px}
.offre.top{background:var(--vert);color:var(--pale);box-shadow:10px 10px 0 var(--lime)}
.prix{font-size:64px;line-height:.9}
.offre ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px;font-size:16px}
.offre li{display:flex;gap:10px}
.offre li svg{margin-top:5px}
.offre .non{font-size:14px;opacity:.8;margin-top:auto;padding-top:10px}
.savoir{margin-top:28px;background:var(--pale);padding:24px 28px;display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;--n:10px}
.savoir p{margin:0;max-width:70ch;font-size:16px}
.cta{position:relative;margin-top:140px;background:var(--lime);padding:72px 56px 120px;overflow:hidden;--n:14px}
.cta .boutique{position:absolute;right:64px;bottom:70px;width:380px;image-rendering:pixelated}
.cta .couche{bottom:-6px;height:110px;object-fit:cover;object-position:bottom}
@keyframes cligne{0%,92%{opacity:0}93%,97%{opacity:1}98%{opacity:0}}
@media (max-width:980px){.hero{min-height:1120px}
.titre{padding-top:104px}
.compo{position:relative;top:auto;right:auto;width:100%;height:400px;margin-top:28px}
.compo .sc{transform:scale(.62);transform-origin:top left;width:161%;height:645px;position:relative}
.metiers{grid-template-columns:minmax(0,1fr)}
.liste{grid-template-columns:repeat(2,minmax(0,1fr))}
.liste button{font-size:17px;padding:14px}
.fiche{padding:28px 22px 200px;min-height:0}
.fiche img{width:62%}
.etagere{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}
.etagere{--h:96px}
.planche{display:none}
.route{grid-template-columns:minmax(0,1fr);gap:8px;padding-left:56px}
.route::before{left:18px;right:auto;top:0;bottom:0;width:20px;height:auto;background:repeating-linear-gradient(180deg,#fff 0 20px,transparent 20px 40px) center/4px 100% no-repeat,var(--vert)}
.pas{padding-top:12px;padding-bottom:20px}
.pas .pin{left:-48px;top:12px}
.route .van{display:none}
.cta{padding:44px 22px 110px;margin-top:96px}
.cta .boutique{display:none}}
@media (prefers-reduced-motion:reduce){.va *{animation:none!important}
.ticket{clip-path:none}}

/* rendez-vous en ligne (v41) */
.rdv-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.rdv-txt p{max-width:42ch}
.rdv-txt .h2+p{margin-top:20px}
.rdv-etapes{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.rdv-etapes li{display:flex;align-items:center;gap:10px;opacity:.5;transition:opacity 200ms ease}
.rdv-etapes li::before{content:"";width:10px;height:10px;box-shadow:inset 0 0 0 2px var(--vert)}
.rdv-etapes li.fait{opacity:1}.rdv-etapes li.fait::before{background:var(--lime)}
.rdv-etapes li.en{opacity:1}.rdv-etapes li.en::before{background:var(--violet);box-shadow:none}
.rdv-demo{display:flex;gap:10px;align-items:flex-start;margin:28px 0 0;font-size:12px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;border:2px dashed rgba(35,77,11,.35);padding:10px 12px}
.rdv-demo i{flex:none;width:8px;height:8px;margin-top:3px;background:var(--violet)}
.rdv-box{background:#fff;box-shadow:0 0 0 3px var(--vert),8px 8px 0 3px var(--lav);padding:28px}
.rdv-box fieldset{border:0;margin:0 0 26px;padding:0;min-width:0}
.rdv-box legend{padding:0;margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:flex;gap:12px;width:100%}
.rdv-box legend span{margin-left:auto;opacity:.6}
.rdv-motifs{display:flex;flex-wrap:wrap;gap:8px}
.rdv-mo,.rdv-j,.rdv-h{font:inherit;color:var(--vert);background:var(--fond);border:0;box-shadow:inset 0 0 0 2px rgba(35,77,11,.25);cursor:pointer;transition:transform 140ms cubic-bezier(0.23,1,0.32,1),background-color 160ms ease,box-shadow 160ms ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rdv-mo:active,.rdv-j:active,.rdv-h:active{transform:scale(0.97)}
.rdv-mo{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 14px;text-align:left;min-height:56px}
.rdv-mo b{font-size:15.5px}
.rdv-mo span{font-size:11px;letter-spacing:.06em;opacity:.7}
.rdv-mo[aria-pressed="true"],.rdv-j[aria-pressed="true"],.rdv-h[aria-pressed="true"]{background:var(--vert);color:#fff;box-shadow:inset 0 0 0 2px var(--vert)}
.rdv-mo[aria-pressed="true"] span{color:var(--lime);opacity:1}
.rdv-jours{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.rdv-j{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 10px;position:relative}
.rdv-j span{font-size:10.5px;letter-spacing:.06em}
.rdv-j b{font-size:22px;line-height:1.1}
.rdv-j i{width:6px;height:6px;background:var(--lime)}
.rdv-j i.peu{background:#f0b13c}.rdv-j i.plein{background:transparent;box-shadow:inset 0 0 0 1px currentColor;opacity:.5}
.rdv-j[aria-pressed="true"] b{color:var(--lime)}
.rdv-heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.rdv-h{padding:10px 0;font-size:14px;min-height:44px}
.rdv-h[aria-disabled="true"]{opacity:.35;text-decoration:line-through;cursor:not-allowed;box-shadow:inset 0 0 0 1px rgba(35,77,11,.25)}
.rdv-vide{display:none;margin:8px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.rdv-vide.on{display:block}
.rdv-champs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rdv-champs label{display:flex;flex-direction:column;gap:6px}
.rdv-champs label.large{grid-column:1/-1}
.rdv-champs span{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.rdv-champs input{font:inherit;font-size:16px;color:var(--vert);background:var(--fond);border:0;box-shadow:inset 0 0 0 2px rgba(35,77,11,.3);padding:12px 14px;min-height:48px;border-radius:0}
.rdv-champs input:focus{outline:none;box-shadow:inset 0 0 0 3px var(--violet)}
.rdv-rgpd{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:14px;line-height:1.45}
.rdv-rgpd input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--vert);flex:none}
.rdv-bas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;border-top:2px dashed rgba(35,77,11,.25);padding-top:20px}
.rdv-recap{flex:1 1 260px;margin:0;font-size:13px;line-height:1.5;letter-spacing:.03em}
.rdv-recap span{background:var(--lime);padding:2px 6px;margin-right:10px;letter-spacing:.1em}
.rdv-err{flex-basis:100%;order:3;margin:0;font-size:12.5px;color:#b3261e;letter-spacing:.04em}
.rdv-err:empty{display:none}
.rdv-ticket{display:none}
.rdv-box.ok{background:var(--pale)}
.rdv-box.ok .rdv-form{display:none}
.rdv-box.ok .rdv-ticket{display:block;animation:rdvTicket 420ms cubic-bezier(0.23,1,0.32,1) both}
@keyframes rdvTicket{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rt-k{display:inline-block;margin:0;background:var(--vert);color:var(--lime);font-size:12px;letter-spacing:.12em;padding:6px 9px 5px}
.rt-n{margin:14px 0 0;font-size:13px;letter-spacing:.1em}
.rt-q{margin:10px 0 0;font-size:clamp(28px,3vw,40px);line-height:1.05}
.rt-m{margin:12px 0 0}
.rt-s{margin:18px 0 0;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.8;border-left:3px solid var(--lime);padding-left:10px}
.rdv-ticket .ctas{margin-top:26px}
.nuit .rdv-box{background:#fff}
@media (max-width:1099px){.rdv-g{grid-template-columns:minmax(0,1fr);gap:32px}.rdv-jours{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:900px){
  .rdv-box{padding:18px 16px;box-shadow:0 0 0 3px var(--vert),5px 5px 0 3px var(--lav)}
  .rdv-jours{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .rdv-jours::-webkit-scrollbar{display:none}
  .rdv-j{flex:0 0 58px;scroll-snap-align:start}
  .rdv-champs{grid-template-columns:minmax(0,1fr)}
  .rdv-etapes{grid-template-columns:1fr 1fr}
  .rdv-bas .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.rdv-box.ok .rdv-ticket{animation:none}}

/* notice technique (v41) */
.va .sec{position:relative}
.rep{position:absolute;left:40px;right:40px;top:64px;display:flex;align-items:center;gap:14px;margin:0;font-size:12px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--vert);pointer-events:none;user-select:none}
.rep b{font-weight:500;background:var(--vert);color:var(--lime);padding:5px 7px 4px}
.rep i{flex:1;min-width:40px;height:11px;opacity:.42;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23234d0b' d='M3 1h2v9H3zM0 4h8v2H0zM16 4h2v2h-2zM28 4h2v2h-2zM40 4h2v2h-2zM52 4h2v2h-2zM64 4h2v2h-2z'/%3E%3C/svg%3E") 0 50%/80px 11px repeat-x}
.rep .rep-c{opacity:.55}
.note-t{position:absolute;right:40px;top:96px;margin:0;font-size:11.5px;line-height:1.65;letter-spacing:.06em;text-transform:uppercase;text-align:right;color:var(--vert);opacity:.75;border-right:3px solid var(--lime);padding-right:12px;user-select:none}
.note-t b{font-weight:500;color:var(--violet)}
.fig-hero{position:absolute;left:40px;bottom:22px;z-index:9;margin:0;display:flex;flex-wrap:wrap;gap:0;align-items:center;font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--vert);pointer-events:none;user-select:none}
.fig-hero b{font-weight:500;background:var(--lime);padding:6px 8px 5px}
.fig-hero span{background:rgba(246,253,240,.88);padding:6px 10px 5px}
.fig-hero span+span{background:var(--vert);color:var(--pale)}
.leg-t{display:flex;justify-content:space-between;gap:16px;margin:12px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--vert);opacity:.75}
.leg-t span:first-child::before{content:"+ ";color:var(--violet)}
/* magasin : index des rayons */
.rayons{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:1px solid rgba(35,77,11,.18)}
.rayons li{position:relative;display:grid;grid-template-columns:44px minmax(0,auto) minmax(24px,1fr) minmax(0,auto);align-items:baseline;gap:14px;padding:20px 0 18px;border-bottom:1px solid rgba(35,77,11,.18);isolation:isolate}
.rayons li::before{content:"";position:absolute;inset:0 -14px;background:var(--lime);z-index:-1;clip-path:inset(0 100% 0 0);transition:clip-path 420ms cubic-bezier(0.23,1,0.32,1)}
.rayons .n{font-size:12px;letter-spacing:.08em;color:var(--violet)}
.rayons b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:19px;font-weight:700;letter-spacing:-0.01em}
.rayons i{align-self:center;height:11px;opacity:.35;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23234d0b' d='M3 1h2v9H3zM0 4h8v2H0zM16 4h2v2h-2zM28 4h2v2h-2zM40 4h2v2h-2zM52 4h2v2h-2zM64 4h2v2h-2z'/%3E%3C/svg%3E") 0 50%/80px 11px repeat-x}
.rayons .det{font-size:13px;text-align:right;opacity:.8;max-width:30ch}
.rayons li.office b::after{content:"LOGICIEL";margin-left:10px;font:500 11px/1 "Geist Mono",monospace;letter-spacing:.08em;background:var(--vert);color:var(--lime);padding:4px 6px 3px;vertical-align:3px}
@media (hover:hover) and (pointer:fine){.rayons li:hover::before{clip-path:inset(0 0 0 0)}}
.mag-pied{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:32px}
.mag-pied p{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
@media (max-width:1099px){.rayons{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .rep{left:16px;right:16px;top:40px}
  .rep .rep-c{display:none}
  .note-t{position:static;text-align:left;border-right:0;border-left:3px solid var(--lime);padding:0 0 0 10px;margin:0 0 24px;font-size:11px}
  .fig-hero{left:16px;right:16px;bottom:14px;font-size:10.5px}
  .fig-hero span+span{display:none}
  .leg-t{font-size:11px}.leg-t span+span{display:none}
  .rayons{margin-top:36px}
  .rayons li{grid-template-columns:36px minmax(0,1fr);row-gap:6px;padding:16px 0 14px}
  .rayons i{display:none}
  .rayons .det{grid-column:2;text-align:left;font-size:12.5px}
  .rayons b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.rayons li::before{transition:none}}
@media (min-width:901px){.va .sec:has(>.note-t){padding-top:104px}.note-t{position:static;width:max-content;max-width:100%;margin:0 0 30px auto}}
.rdv-txt .h2{font-size:clamp(36px,3.4vw,52px)}

/* marquages ASCII lot 2 (v43) */
.coin{position:absolute;inset:12px;pointer-events:none;z-index:2;--k:currentColor;opacity:.45;background:linear-gradient(var(--k),var(--k)) 0 0/14px 2px no-repeat,linear-gradient(var(--k),var(--k)) 0 0/2px 14px no-repeat,linear-gradient(var(--k),var(--k)) 100% 0/14px 2px no-repeat,linear-gradient(var(--k),var(--k)) 100% 0/2px 14px no-repeat,linear-gradient(var(--k),var(--k)) 0 100%/14px 2px no-repeat,linear-gradient(var(--k),var(--k)) 0 100%/2px 14px no-repeat,linear-gradient(var(--k),var(--k)) 100% 100%/14px 2px no-repeat,linear-gradient(var(--k),var(--k)) 100% 100%/2px 14px no-repeat}
.rdv-box,.compris-w{position:relative}
.ref-c{position:absolute;top:16px;right:40px;z-index:2;font-size:11px;letter-spacing:.1em;opacity:.6;pointer-events:none}
.offres{counter-reset:tk}.offre{counter-increment:tk}
.tk-ref::before{content:"RÉF. CTR-0" counter(tk)}
.offre>p.m:first-child::after{content:"  ·  RÉF. " var(--tk-p,"CTR") "-0" counter(tk);opacity:.55;letter-spacing:.08em;white-space:pre}
.cote-l{flex:0 1 46%;display:flex;align-items:center;gap:10px;white-space:nowrap}
.cote-l i{flex:1;height:1px;background:currentColor;position:relative;min-width:24px}
.cote-l i::before{content:"";position:absolute;top:-3px;border:3px solid transparent}
.cote-l i:first-child::before{left:0;border-left:0;border-right:6px solid currentColor}
.cote-l i:last-child::before{right:0;border-right:0;border-left:6px solid currentColor}
.cote-in{position:absolute;left:14px;right:14px;top:12px;z-index:2;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.1em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none}
.cote-in i{flex:1;height:1px;background:currentColor;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.cote-in i::before{content:"";position:absolute;top:-3px;border:3px solid transparent}
.cote-in i:first-child::before{left:0;border-left:0;border-right:6px solid currentColor}
.cote-in i:last-child::before{right:0;border-right:0;border-left:6px solid currentColor}
.arbre-asc{position:absolute;right:40px;bottom:64px;font:600 10px/1.2 "Geist Mono",ui-monospace,monospace;user-select:none;pointer-events:none}
.arbre-asc pre{margin:0;font:inherit;white-space:pre}
.arbre-asc .fond{color:rgba(207,203,248,.22);font-weight:400}
.arbre-asc .f{position:absolute;left:0;top:0;color:var(--lime)}
.arbre-asc .f2{opacity:0}
.arbre-asc .scan{position:absolute;left:-6px;right:-6px;top:0;height:28px;background:var(--lime);mix-blend-mode:difference;opacity:0}
.leg-a{display:flex;justify-content:space-between;gap:16px;margin:10px 0 0;font-size:10.5px;font-weight:400;letter-spacing:.06em;color:var(--pale);opacity:.6;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){
  .arbre-asc .f1{animation:ascA 2.4s steps(1) infinite}
  .arbre-asc .f2{animation:ascB 2.4s steps(1) infinite}
  .arbre-asc .scan{animation:ascScan 4.5s cubic-bezier(0.77,0,0.175,1) infinite}
  .etat b{animation:ascA 1.1s steps(1) infinite}
}
@keyframes ascA{50%{opacity:0}}
@keyframes ascB{50%{opacity:1}}
@keyframes ascScan{0%{transform:translateY(0);opacity:0}10%{opacity:.9}90%{opacity:.9}100%{transform:translateY(212px);opacity:0}}
.etat{display:flex;flex-wrap:wrap;gap:6px 22px;margin:28px 0 0;padding-top:14px;border-top:1px dashed rgba(163,217,107,.4);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);opacity:.85}
.etat span{display:inline-flex;align-items:center;gap:8px}
.etat i{width:7px;height:7px;background:var(--lime)}
.etat b{font-weight:400;margin-left:4px}
.rt-cb{margin-top:22px;display:flex;flex-direction:column;gap:6px}
.rt-cb i{display:block;width:min(260px,100%);height:46px;background:repeating-linear-gradient(90deg,var(--vert) 0 2px,transparent 2px 3px,var(--vert) 3px 4px,transparent 4px 7px,var(--vert) 7px 10px,transparent 10px 11px,var(--vert) 11px 12px,transparent 12px 15px,var(--vert) 15px 17px,transparent 17px 19px)}
.rt-cb p{margin:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:900px){
  .arbre-asc{right:16px;bottom:150px;font-size:5.5px}
  .arbre-asc .scan{height:16px}
  .leg-a{display:none}
  .ref-c{right:22px;top:12px;font-size:10px}
  .cote-l{display:none}
  .cote-in span{display:none}
  .etat{font-size:10.5px;gap:4px 16px}
}
.offres{--tk-p:"CAI"}

/* ancres et menu (v43) */
.va .sec,.va .cta{scroll-margin-top:96px}
.head .rubs{clip-path:none}
.rdv-box{clip-path:none}

/* logo allumé sur les écrans (v43) */
.lueur{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:0}
.lueur img{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .lueur{animation:lueurOn linear both,lueurVit 3.4s ease-in-out infinite alternate;animation-timeline:--photo,auto;animation-range:cover 50% cover 60%,normal}
  }
}
@supports not (animation-timeline: view()){.lueur{opacity:1}}
@media (prefers-reduced-motion:reduce){.lueur{opacity:1}}
@keyframes lueurOn{0%{opacity:0}35%{opacity:.75}45%{opacity:.15}60%{opacity:.9}70%{opacity:.4}100%{opacity:1}}
@keyframes lueurVit{from{filter:brightness(.8)}to{filter:brightness(1.15)}}

/* haut de page rangé (v43) */
.chips-l{position:absolute;left:0;right:0;display:flex;flex-wrap:wrap;gap:10px}
.chips-l .chip{position:static}

/* ticket qui sort par le haut de l'imprimante (v43) */
.ticket{top:auto;bottom:150px;z-index:-1;width:124px;margin-left:-62px;padding:10px 9px 12px;font-size:10px}
@keyframes imprimeTicket{0%{clip-path:inset(100% 0 0 0);transform:translateY(40px)}45%,90%{clip-path:inset(0 0 0 0);transform:translateY(0)}100%{clip-path:inset(0 0 0 0);transform:translateY(0);opacity:0}}

/* grand MBV : herbes en brins (v43) */
.geant{position:relative;background-image:url("../img/herbe-milieu3.png"),linear-gradient(var(--lime),var(--lime))!important;background-repeat:repeat-x,no-repeat!important;background-size:auto 38%,100% 100%!important;background-position:0 86%,0 0!important}
.geant .geant-vive{position:absolute;inset:0;height:auto!important;left:0;right:0;pointer-events:none}
.geant-vive>i{width:2.5%}
.geant-vive>i>b{position:absolute;top:0;bottom:0;width:4000%;font:inherit;letter-spacing:inherit;line-height:inherit;color:transparent;white-space:nowrap;background:url("../img/herbe-devant3b.png") repeat-x 0 100%/auto 34%;-webkit-background-clip:text;background-clip:text;image-rendering:pixelated}

/* réseaux sociaux (v44) */
.reseaux{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.res{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px 0 10px;background:rgba(163,217,107,.14);color:var(--lime);text-decoration:none;font-size:15px;font-weight:600;transition:background-color 200ms ease,transform 160ms var(--out)}
.res svg{width:20px;height:20px;fill:currentColor;flex:none}
@media (hover:hover) and (pointer:fine){.res:hover{background:var(--lime);color:var(--vert)}}
.res:active,.res-b:active{transform:scale(.97)}
.encart .res{background:var(--vert);color:var(--lime)}
@media (hover:hover) and (pointer:fine){.encart .res:hover{background:var(--violet);color:#fff}}
.res-intro{max-width:52ch}
.res-intro p{margin:0}
.res-btns{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0!important}
.res-b svg{width:20px;height:20px;fill:currentColor}
.res-b.r-wa{color:var(--lime)}
.posts{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.post{background:#fff;display:flex;flex-direction:column;box-shadow:0 0 0 2px var(--vert) inset;transition:transform 260ms var(--out)}
.post:nth-child(even){transform:translateY(28px)}
@media (hover:hover) and (pointer:fine){.post:hover{transform:translateY(-6px)}.post:nth-child(even):hover{transform:translateY(22px)}}
.post-h{display:flex;justify-content:space-between;align-items:center;margin:0;padding:12px 14px;font-size:11.5px;letter-spacing:.1em;border-bottom:2px solid var(--vert)}
.post-r{display:inline-flex;align-items:center;gap:8px}
.post-r svg{width:14px;height:14px;fill:currentColor}
.post-r.r-fb{color:var(--violet)}
.post-img{aspect-ratio:4/3;overflow:hidden;background:var(--pale);border-bottom:2px solid var(--vert)}
.post-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 600ms var(--out)}
@media (hover:hover) and (pointer:fine){.post:hover .post-img img{transform:scale(1.04)}}
.post-t{margin:0;padding:14px 16px 0;font-size:15px;line-height:1.5;flex:1}
.post-f{display:flex;justify-content:space-between;gap:10px;margin:0;padding:14px 16px 16px;font-size:11.5px;letter-spacing:.06em}
.post-f a{color:var(--violet);text-decoration:none}
@media (hover:hover) and (pointer:fine){.post-f a:hover{text-decoration:underline}}
.posts-note{margin:52px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.nuit .post{color:var(--vert)}
@media (max-width:1100px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}.post:nth-child(even){transform:none}}
@media (max-width:900px){
  .posts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:40px -16px 0;padding:0 16px 8px;scrollbar-width:none;overscroll-behavior-x:contain}
  .posts::-webkit-scrollbar{display:none}
  .post{flex:0 0 78%;scroll-snap-align:start}
  .posts-note{margin-top:24px}
  .res-b{min-height:48px}
}

/* page Le magasin (v44) */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mag-shop{z-index:1}
.mag-shop .panneau{position:absolute;left:41%;top:44%;font-size:13px}
.mag-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:20px}
.duo-c{position:relative;padding:40px 40px 0;display:flex;flex-direction:column;overflow:hidden}
.duo-r{background:var(--pale)}
.duo-o{background:var(--vert);color:var(--pale)}
.duo-o h3{color:var(--lime)}
.duo-t{font-size:12px;letter-spacing:.1em;margin:0 0 18px;opacity:.8}
.duo-c h3{font-size:clamp(26px,2.4vw,36px);line-height:1.05;margin:0}
.duo-c>p:not(.duo-t){margin:14px 0 0;max-width:42ch}
.duo-f{margin:32px -40px 0;aspect-ratio:16/9;overflow:hidden}
.duo-f img{width:100%;height:100%;object-fit:cover;display:block}
.duo-office{display:flex;gap:14px;margin:30px 0 0;flex-wrap:wrap;position:relative;z-index:1}
.duo-pc{width:78%;max-width:440px;margin:auto -8% -6% auto;display:block;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.duo-office span{width:78px;height:78px;display:grid;place-items:center;font:400 38px/1 "VG5000",monospace;color:var(--vert);background:var(--lime);box-shadow:6px 6px 0 rgba(163,217,107,.3)}
.duo-office span:nth-child(2){background:var(--lav)}.duo-office span:nth-child(3){background:#fff}.duo-office span:nth-child(4){background:var(--pale)}
.equipe{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.mb{border:2px solid var(--vert);background:#fff;padding:0 0 30px;box-shadow:6px 6px 0 rgba(35,77,11,.12)}
.mb-av{height:220px;display:grid;place-items:end center;border-bottom:2px solid var(--vert);background:var(--pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='7' width='2' height='2' fill='%23234d0b' opacity='.15'/%3E%3C/svg%3E")}
.mb-lav .mb-av{background-color:var(--lav)}.mb-lime .mb-av{background-color:var(--lime)}
.mb-av svg{width:150px;height:180px;display:block}
.mb-role{margin:22px 24px 0;font-size:12px;letter-spacing:.12em;color:var(--violet)}
.mb h3{margin:6px 24px 0;font-size:34px;line-height:1}
.mb>p:last-child{margin:12px 24px 0;font-size:16px}
@media (hover:hover) and (pointer:fine){.mb-av svg{transition:transform 260ms var(--out)}.mb:hover .mb-av svg{transform:translateY(-6px)}}
@media (max-width:900px){
  .mag-duo,.equipe{grid-template-columns:minmax(0,1fr);gap:20px}
  .duo-c{padding:28px 22px 0}
  .duo-f{margin:24px -22px 0}
  .duo-office span{width:58px;height:58px;font-size:28px}
  .mb-av{height:170px}.mb-av svg{width:116px;height:140px}
}

/* FAQ (v45) */
.faq-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.faq-l{display:grid;gap:12px}
.faq-l details{--n:8px;background:#fff;padding:0}
.faq-l summary{cursor:pointer;list-style:none;padding:22px 56px 22px 24px;font-size:21px;line-height:1.2;position:relative;touch-action:manipulation}
.faq-l summary::-webkit-details-marker{display:none}
.faq-l summary::after{content:"+";position:absolute;right:24px;top:50%;translate:0 -50%;font-size:26px;color:var(--violet)}
.faq-l details[open] summary::after{content:"−"}
.faq-l details[open]{background:var(--pale)}
.faq-l details p{margin:0;padding:0 24px 22px;font-size:16.5px;max-width:62ch}
@media (max-width:900px){.faq-g{grid-template-columns:minmax(0,1fr)}}
.faq-l summary{transition:background-color 200ms ease}
@media (hover:hover) and (pointer:fine){.faq-l details:not([open]) summary:hover{background:var(--pale)}}
.faq-nav{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 0;padding:0;list-style:none}
.faq-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:#fff;border:2px solid var(--vert);text-decoration:none;font-weight:600;font-size:16px;transition:background-color 200ms ease}
@media (hover:hover) and (pointer:fine){.faq-nav a:hover{background:var(--lime);color:var(--vert)}}
.faq-th{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;padding:56px 0;border-top:2px solid var(--vert)}
.faq-th:first-of-type{border-top:0}
.faq-th h2{font-size:clamp(30px,3vw,44px);line-height:1.05;margin:0}
.faq-th .n{display:block;font-size:12px;letter-spacing:.1em;color:var(--violet);margin-bottom:10px}
.faq-th .lien{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-weight:600}
.faq-th .lien svg{width:14px;height:14px;fill:currentColor}
@media (max-width:900px){.faq-th{grid-template-columns:minmax(0,1fr);gap:20px;padding:36px 0}}
.faq-q{position:absolute;right:30px;top:40px;width:330px;image-rendering:pixelated;filter:drop-shadow(10px 10px 0 rgba(35,77,11,.18))}

/* effets premium (v45) */
@property --fond{syntax:"<color>";inherits:true;initial-value:#f6fdf0}
.va{transition:--fond 900ms ease}
.pix-tr{position:fixed;inset:0;z-index:300;display:grid;grid-template:repeat(8,1fr)/repeat(12,1fr);pointer-events:none;visibility:hidden}
.pix-tr i{background:var(--vert);opacity:0}
.pix-tr i:nth-child(7n+3){background:#2f6312}.pix-tr i:nth-child(11n+5){background:var(--lime)}.pix-tr i:nth-child(13n+8){background:var(--violet)}
.pix-tr.ferme,.pix-tr.ouvre{visibility:visible;pointer-events:auto}
.pix-tr.ferme i{animation:pxOn 90ms steps(2) both}
.pix-tr.ouvre i{opacity:1;animation:pxOff 90ms steps(2) both}
@keyframes pxOn{to{opacity:1}}
@keyframes pxOff{to{opacity:0}}
.chap{position:absolute;top:calc(100% + 3px);left:max(40px,calc((100% - 1320px) / 2 + 40px));display:inline-flex;align-items:center;gap:10px;padding:6px 12px 5px 6px;background:var(--vert);color:var(--lime);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.chap b{font-weight:500;background:var(--lime);color:var(--vert);padding:2px 6px 1px}
.prog-l{position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.prog-l{animation:progres steps(60) both;animation-timeline:scroll(root)}}
@keyframes progres{to{transform:scaleX(1)}}
@media (max-width:900px){.chap{display:none}}
.barre:not(.on) .chap{visibility:hidden}
.cpt.odo{line-height:1}
.odo-w{display:inline-flex}
.odo-d{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.odo-s{display:flex;flex-direction:column;transition:transform 1700ms cubic-bezier(0.16,1,0.3,1)}
.odo-s span{display:block;height:1em;line-height:1em;text-align:center}
.vh2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tilt{position:relative;transition:transform 520ms var(--out);will-change:auto}
.tilt.tilt-on{transition:transform 140ms ease-out}
.reflet{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 300ms ease;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.42),rgba(255,255,255,0) 46%);mix-blend-mode:soft-light}
.tilt-on .reflet{opacity:1}
.post:nth-child(even){transform:none;margin-top:28px}
@media (hover:hover) and (pointer:fine){.post:hover,.post:nth-child(even):hover{transform:none}}
@media (max-width:1100px){.post:nth-child(even){margin-top:0}}
.geant-vive.attente>i{scale:1 0}
.geant-vive.pousse>i{scale:1 1;transition:scale 760ms steps(6) var(--dl,0ms)}

/* couleurs des réseaux (v47) */
.res.r-fb,.res-b.r-fb{background:#1877f2;color:#fff}
.res.r-ig,.res-b.r-ig{background:linear-gradient(45deg,#f9a12e 0%,#e1306c 45%,#833ab4 75%,#405de6 100%);color:#fff}
.res.r-wa,.res-b.r-wa{background:#25d366;color:#0b3d1f}
@media (hover:hover) and (pointer:fine){.res.r-fb:hover,.res-b.r-fb:hover{background:#0f5fd0;color:#fff}}
@media (hover:hover) and (pointer:fine){.res.r-ig:hover,.res-b.r-ig:hover{background:linear-gradient(45deg,#e8901d 0%,#c81f5a 45%,#6f2aa0 75%,#3049cf 100%);color:#fff}}
@media (hover:hover) and (pointer:fine){.res.r-wa:hover,.res-b.r-wa:hover{background:#1fb457;color:#0b3d1f}}
.encart .res.r-fb,.encart .res.r-ig,.encart .res.r-wa{box-shadow:none}
.post-r.r-fb{color:#1877f2}.post-r.r-ig{color:#e1306c}

/* téléphone simplifié (v48) : moins de décor, pas d'animations liées au défilement */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a,button,.chip,[role="button"]{touch-action:manipulation}
button,.btn,.chip,.res,.res-b{-webkit-user-select:none;user-select:none}
input,textarea,select{font-size:16px}
@media (max-width:900px){
  .mascotte,.note-t,.rep,.ref-c,.coin,.cote-in,.arbre-asc,.fig-hero,.leg-t,.chips-l,.pixels,.reflet,.pix-tr{display:none!important}
  .offre::before{content:none!important}
  .sec .intro>*,.sec>.h2,.avis,.duo .dossier-w,.scene-info .fen,.scene-caisse .caisse,.scene-wifi,.scene-caisse .tab,.scene-info .ordi-pose,.trio .mini,.pano,.pano-txt,.toile img,.pq-photo img,.route .etape,.offre,.pq>div,.cta,.geant,.avis2>*,.diag-w>*,.titre,.pano-img{animation:none!important}
  .lueur{animation:lueurVit 3.4s ease-in-out infinite alternate!important;opacity:1}
  .post:nth-child(even){margin-top:0}
  .barre{background:#f6fdf0}
}

/* tuiles qui arrivent de l'extérieur vers le centre (v50), remplace l'apparition liée au défilement */
.tuiles :is(.offres,.cpts,.pq,.avis2,.posts,.equipe,.mag-duo,.facons,.pq-g)>:not(sc-for),.tuiles :is(.offres,.posts,.avis2)>sc-for>*{animation:none!important}
.tuiles .offre::before{content:none!important}
.tu-att{opacity:0}

/* photos qui se dévoilent en pixels aux couleurs de la charte (v51) : une fois, à l'arrivée */
.pixels i{background:var(--pc,#234d0b);scale:1;animation:none}
.pixels i:nth-child(7n+1){--pc:#234d0b}.pixels i:nth-child(7n+2){--pc:#a3d96b}.pixels i:nth-child(7n+3){--pc:#6b5fe0}
.pixels i:nth-child(7n+4){--pc:#234d0b}.pixels i:nth-child(7n+5){--pc:#cfcbf8}.pixels i:nth-child(7n+6){--pc:#a3d96b}.pixels i:nth-child(7n){--pc:#def8c6}
.pix-on .pixels{display:grid}
.pix-go .pixels i{animation:pixFond 360ms steps(3,end) var(--d,0ms) both}
.pix-fin .pixels{display:none!important}
@keyframes pixFond{from{scale:1}to{scale:0}}

/* arbre ASCII du pied de page : plus grand, cadre, barre de scan violette (v63) */
@media (min-width:901px){
  .arbre-asc{bottom:100px;font-size:13px;padding:18px 20px 14px;border:3px solid var(--lime);background:rgba(17,40,5,.55);box-shadow:6px 6px 0 rgba(107,95,224,.55)}
  .arbre-asc .f{left:20px;top:18px}
  .arbre-asc .scan{left:0;right:0;top:18px;height:30px;--scan-h:282px}
}
.arbre-asc .scan{background:linear-gradient(rgba(107,95,224,0),rgba(107,95,224,.55) 70%,#6b5fe0 70%,#6b5fe0 100%);mix-blend-mode:normal}
@keyframes ascScan{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(var(--scan-h,212px));opacity:0}}

/* écran des photos : plus de halo, un petit tressautement d'écran cathodique (v67) */
.lueur.ecran{opacity:1!important;mix-blend-mode:normal;animation:none!important;clip-path:var(--clip)}
@media (prefers-reduced-motion:no-preference){
  .lueur.ecran{animation:tressaute 4.2s steps(1) infinite!important}
  .pano .lueur.ecran{animation-delay:-1.6s!important}
}
@keyframes tressaute{
  0%,86%,100%{translate:0 0;filter:none}
  87%{translate:3px 0;filter:brightness(1.25) saturate(1.3)}
  89%{translate:-2px 1px;filter:brightness(.85)}
  91%{translate:0 0;filter:none}
  94%{translate:2px -1px;filter:brightness(1.35) hue-rotate(-12deg)}
  95%{translate:0 0;filter:none}
}

/* enseigne, panneau et vitrines : plus de halos flous, des néons nets qui tressautent (v67) */
.panneau{box-shadow:0 0 0 2px #10200a,inset 0 0 0 1px color-mix(in srgb,var(--neon) 45%,transparent)!important;text-shadow:none!important;animation:neonT 7s steps(1) infinite!important}
.panneau.ferme{animation-duration:5s!important}
.vitre{box-shadow:0 0 0 4px rgba(255,214,120,.22)!important}
@keyframes neonT{0%,88%,95%,100%{opacity:1;translate:0 0}89%{opacity:.5;translate:1px 0}90%{opacity:1;translate:-1px 0}92%{opacity:.7;translate:0 1px}93%{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.panneau{animation:none!important}}

/* téléphone : menu vertical derrière le bouton à trois tirets (v69) */
.menu-tel{display:none}
@media (max-width:900px){
  .head .terre{display:none!important}
  .burger{-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:transform 120ms var(--out)}
  .burger:active{transform:scale(.94)}
  .menu-tel{display:block;position:fixed;inset:0;z-index:90;pointer-events:none;visibility:hidden;transition:visibility 0s linear 280ms}
  .menu-tel.ouvert{pointer-events:auto;visibility:visible;transition:visibility 0s}
  .mt-fond{position:absolute;inset:0;background:rgba(22,40,8,.55);opacity:0;transition:opacity 220ms ease}
  .ouvert .mt-fond{opacity:1}
  .mt-pan{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);display:flex;flex-direction:column;background:#f6fdf0;box-shadow:-6px 0 0 var(--lime);padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;transform:translateX(104%);transition:transform 280ms cubic-bezier(0.32,0.72,0,1)}
  .ouvert .mt-pan{transform:none}
  .mt-haut{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:3px solid var(--vert)}
  .mt-haut .m{font-size:12px;letter-spacing:.14em;color:var(--vert)}
  .mt-x{all:unset;box-sizing:border-box;width:48px;height:48px;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 3px var(--vert);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform 120ms var(--out)}
  .mt-x:active{transform:scale(.94)}.mt-x svg{width:16px;height:16px;fill:var(--vert)}
  .mt-l{list-style:none;margin:8px 0 0;padding:0}
  .mt-l li+li{border-top:1px solid rgba(35,77,11,.14)}
  .mt-l .rub{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 4px;font-size:18px;color:var(--vert);text-decoration:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .mt-l .rub:active{background:var(--pale)}
  .mt-l .rub .ic{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--pale)}
  .mt-l .rub svg{width:18px;height:18px;fill:var(--vert)}
  .mt-l .rub>span:last-child{display:flex;flex-direction:column;gap:2px}
  .mt-l .rub small{display:block!important;font-size:12.5px;opacity:.7;font-family:inherit}
  .mt-l .rub[aria-current] .ic{background:var(--vert)}.mt-l .rub[aria-current] svg{fill:var(--lime)}
  .mt-l .rub[aria-current]>span:last-child{font-weight:700}
  .mt-l .rub::after{content:none!important}
  .mt-act{display:grid;gap:10px;margin-top:auto;padding-top:18px}
  .mt-act .btn{justify-content:center;min-height:52px}
  .mt-h{margin:14px 0 0;font-size:11.5px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:var(--vert);opacity:.75}
  html.menu-ouvert,html.menu-ouvert body{overflow:hidden}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.mt-pan,.mt-fond,.menu-tel{transition:none}}

/* coins pixel des éléments encadrés : le cran fait exactement l'épaisseur du trait, le cadre reste continu (v70) */
:is(.btn-w,.souci,.chip,.carte,.carte-c,.obj,.planche).px{--n:3px}
:is(.statut,.burger).px{--n:2px}
.sw-tel.px{--n:8px}

/* téléphone : cibles tactiles et petits textes (v71) */
@media (max-width:900px){
  footer a,.ariane a,.fil a,a.lien{display:inline-block;padding-top:10px;padding-bottom:10px}
  input[type=checkbox]{width:24px;height:24px}
  .rdv-z .m,#rdv-z .m,.jour .m{font-size:12px}
}

/* logo de l'en-tête : plus grand, sur une plaque pixel pour ressortir sur tous les ciels (v72) */
.head .hero-w>a:first-child{flex:none;padding:10px 16px;background:#fff;box-shadow:inset 0 0 0 3px var(--vert),6px 6px 0 var(--lime);clip-path:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% 100%,calc(100% - 6px) 100%,calc(100% - 6px) calc(100% + 6px),6px calc(100% + 6px),6px 100%,0 100%,0 3px,3px 3px);clip-path:none}
.head .hero-w>a:first-child img{height:54px!important}
.nuit .head .hero-w>a:first-child{background:var(--vert);box-shadow:inset 0 0 0 3px var(--lime),6px 6px 0 rgba(163,217,107,.45)}
@media (max-width:1240px){.head .hero-w>a:first-child img{height:46px!important}}
@media (max-width:900px){.head .hero-w>a:first-child{padding:8px 12px;box-shadow:inset 0 0 0 3px var(--vert),4px 4px 0 var(--lime)}.head .hero-w>a:first-child img{height:38px!important}.nuit .head .hero-w>a:first-child{box-shadow:inset 0 0 0 3px var(--lime),4px 4px 0 rgba(163,217,107,.45)}}
.barre-logo img{height:40px!important}

/* en-tête 1100-1439 px : avec le grand logo, les rubriques passent sur une 2e ligne (v73) */
@media (min-width:1100px) and (max-width:1439px){
  .head .w{flex-wrap:wrap}
  .head .terre{order:9;flex-basis:100%;justify-content:center}
  .head .terre .w{width:100%}
  .head .rubs{width:100%;justify-content:space-between}
  .titre{padding-top:190px}
}
@media (min-width:1600px) and (max-width:1759px){.head .rub .ic{display:none}.head .rub{padding:9px 9px}}
@media (min-width:901px) and (max-width:1439px){.head .devis-h{margin-left:auto}}

/* logo de l'en-tête : plaque blanche aussi la nuit (logo vert lisible), plus petit sur téléphone pour garder le menu sur la même ligne (v73) */
.nuit .head .hero-w>a:first-child{background:#fff;box-shadow:inset 0 0 0 3px var(--vert),6px 6px 0 var(--lime)}
.nuit .head .hero-w>a:first-child .logo-j{display:inline!important}
.nuit .head .hero-w>a:first-child .logo-n{display:none!important}
@media (max-width:900px){.head .hero-w>a:first-child{padding:7px 10px}.head .hero-w>a:first-child img{height:32px!important}.nuit .head .hero-w>a:first-child{box-shadow:inset 0 0 0 3px var(--vert),4px 4px 0 var(--lime)}}
@media (max-width:379px){.head .hero-w{gap:10px}.head .hero-w>a:first-child{padding:6px 8px}.head .hero-w>a:first-child img{height:28px!important}}
/* retouches 24/10 (propriétaire) : logo du fronton plus grand, bonhomme de la porte plus grand */
.enseigne img{height:82%}
.bonhomme{left:2%;width:104%;bottom:4%;overflow:visible}

/* ===== contenu des pages simples (éditeur WordPress) ===== */
.mbv-simple{padding-top:40px}
.mbv-contenu{max-width:72ch;font-size:18px;line-height:1.7}
.mbv-contenu>*:first-child{margin-top:0}
.mbv-contenu h2{font-family:VG5000,monospace;font-weight:400;font-size:clamp(26px,3.2vw,38px);line-height:1.1;margin:56px 0 16px;text-wrap:balance}
.mbv-contenu h3{font-family:VG5000,monospace;font-weight:400;font-size:24px;line-height:1.2;margin:36px 0 10px}
.mbv-contenu p,.mbv-contenu ul,.mbv-contenu ol{margin:0 0 18px}
.mbv-contenu ul{padding-left:0;list-style:none}
.mbv-contenu ul li{position:relative;padding-left:22px;margin:6px 0}
.mbv-contenu ul li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--violet,#6b5fe0)}
.mbv-contenu a{color:var(--violet,#6b5fe0);text-underline-offset:3px}
.mbv-contenu a:hover{color:var(--vert,#234d0b)}
.mbv-contenu strong{font-weight:700}
.mbv-contenu img{max-width:100%;height:auto;border:3px solid var(--vert,#234d0b)}
.mbv-contenu table{border-collapse:collapse;width:100%;display:block;overflow-x:auto;font-size:16px}
.mbv-contenu th,.mbv-contenu td{border:2px solid var(--vert,#234d0b);padding:8px 10px;text-align:left}
.mbv-contenu blockquote{margin:24px 0;padding:16px 20px;background:var(--pale,#def8c6);box-shadow:inset 0 0 0 3px var(--vert,#234d0b)}
.mbv-liste{display:grid;gap:18px;padding:0;margin:0;list-style:none}
.mbv-liste li{padding:0!important}.mbv-liste li::before{display:none}
.mbv-liste a{display:block;padding:18px 20px;background:#fff;box-shadow:inset 0 0 0 3px var(--vert,#234d0b),5px 5px 0 var(--lime,#a3d96b);text-decoration:none;color:var(--vert,#234d0b)}
.mbv-liste a:hover{background:var(--pale,#def8c6)}
.mbv-liste b{display:block;font-family:VG5000,monospace;font-weight:400;font-size:24px;line-height:1.15}
.mbv-liste small{display:block;margin-top:4px;font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase}