/* ============================================================
   POLICES
   Pour afficher "Going" partout (même sur les ordis où elle n'est pas installée),
   place le fichier dans le dossier /fonts puis retire les commentaires ci-dessous.
   ============================================================ */
/*
@font-face{
  font-family:"Going";
  src:url("../fonts/going.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
*/

:root{
  --cream:#fffde4; --pink:#ffdad9; --blush:#fff0ea; --sand:#fef4e8;
  --rose:#a75655; --wine:#521a25; --plum:#50113c; --plum-2:#6d1c53;
  --peach:#ffc488; --peach-2:#ffb066; --brown:#3a1a0e; --ink:#4a2a22; --muted:#6e5a51;
  --panel:#f2f2f2; --white:#ffffff;
  /* Polices : "Going" et "Segoe Print" sont utilisées si installées/chargées, sinon repli Google Fonts */
  --f-title:"Going","Titan One",system-ui,sans-serif;
  --f-hand:"Segoe Print","Kalam","Comic Sans MS",cursive;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* La charte de marque reste identique en mode sombre (couleurs fixes de la maquette) */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --cream:#fffde4; } }
:root[data-theme="dark"]{ --cream:#fffde4; }

*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
html,body{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-hand);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px dashed var(--plum);outline-offset:4px;border-radius:6px}

/* ---------- NAV ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--cream);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 3px 0 var(--pink)}
.nav-inner{display:flex;align-items:center;gap:24px;padding:10px clamp(12px,2.5vw,36px) 10px 8px}
.logo{display:block;flex:none;line-height:0}
.logo svg{width:54px;height:auto;transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.logo:hover svg{transform:rotate(-12deg) scale(1.12)}
.nav-links{display:flex;flex:1;justify-content:space-between;list-style:none;margin:0;padding:0 0 0 clamp(8px,2vw,30px)}
.nav-links a{position:relative;display:inline-block;padding:6px 2px;font-size:15px;color:var(--rose);text-decoration:none;transition:transform .25s}
.nav-links a::after,.foot-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 7'%3E%3Cpath d='M0 4 Q4 0 8 4 T16 4' fill='none' stroke='%23a75655' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center/16px 7px;
  clip-path:inset(0 100% 0 0);transition:clip-path .4s ease}
.nav-links a:hover{transform:translateY(-2px)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{clip-path:inset(0 0 0 0)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;color:var(--rose)}
.burger span{display:block;width:26px;height:3px;border-radius:3px;background:currentColor;margin:5px 0;transition:transform .3s,opacity .3s}
.nav.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- BOUTONS ---------- */
.btn{
  --bg:var(--peach);--fill:var(--peach-2);--fg:var(--rose);--sh:var(--wine);
  position:relative;display:inline-flex;align-items:center;justify-content:center;isolation:isolate;
  font-family:var(--f-hand);font-size:15px;line-height:1.2;color:var(--fg);text-decoration:none;
  background:var(--bg);border:0;border-radius:999px;padding:11px 46px;cursor:pointer;
  transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s cubic-bezier(.3,1.6,.5,1),color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill);
  clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .4s ease}
.btn::after{content:"";position:absolute;top:-17px;right:14px;width:26px;height:18px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M6 36 L4 13 L18 23 L30 6 L42 23 L56 13 L54 36 Z' fill='%23ffd46b' stroke='%233a1a0e' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='4' cy='10' r='3.5' fill='%23ffd46b' stroke='%233a1a0e' stroke-width='2'/%3E%3Ccircle cx='30' cy='4' r='3.5' fill='%23ffd46b' stroke='%233a1a0e' stroke-width='2'/%3E%3Ccircle cx='56' cy='10' r='3.5' fill='%23ffd46b' stroke='%233a1a0e' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/contain;
  transform:translateY(10px) scale(0) rotate(-20deg);transition:transform .45s cubic-bezier(.3,1.9,.5,1)}
.btn:hover,.btn:focus-visible{transform:translateY(-4px) rotate(-2deg);box-shadow:0 5px 0 var(--sh)}
.btn:hover::before,.btn:focus-visible::before{clip-path:inset(0 0 0 0 round 999px)}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0) scale(1) rotate(14deg)}
.btn:active{transform:translateY(2px) rotate(0);box-shadow:0 1px 0 var(--sh);transition-duration:.08s}
.btn-plum{--bg:var(--plum);--fill:var(--plum-2);--fg:var(--white);--sh:var(--rose);font-size:13px;padding:6px 44px}

/* ---------- HERO ---------- */
.hero{min-height:calc(100svh - 70px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 20px 100px}
.brand{font-family:var(--f-title);font-size:clamp(28px,3vw,40px);color:var(--brown);letter-spacing:.02em;animation:fadeDown .7s ease both}
.stage{--mx:0;--my:0;position:relative;width:min(560px,94vw);aspect-ratio:744/315;margin-top:clamp(40px,6vw,80px)}
.piece{position:absolute;transform:translate(calc(var(--mx) * var(--d) * 1px),calc(var(--my) * var(--d) * 1px));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.piece img{width:100%}
.enter,.squish{display:block}
.p-chip{--d:14;z-index:2}
.p-chip .enter{animation:chipIn 1.15s cubic-bezier(.3,1.35,.5,1) .25s both}
.p-chip img{animation:float 5s ease-in-out 1.5s infinite}
.chip-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.squish.crunch{animation:crunch .45s cubic-bezier(.3,1.6,.5,1)}
.p-crumb{--d:26;z-index:3}
.p-crumb .enter{animation:crumbIn .75s cubic-bezier(.25,1.7,.45,1) both;animation-delay:calc(1.1s + var(--i) * 55ms)}
.p-crumb img{animation:drift var(--t,4s) ease-in-out 2s infinite alternate}
.p-duo{--d:-10;z-index:1}
.p-duo .enter{animation:duoIn .9s cubic-bezier(.3,1.6,.5,1) .6s both}
.p-duo img{transform-origin:50% 95%;animation:sway 3.4s ease-in-out 1.6s infinite}
.particle{position:absolute;pointer-events:none;z-index:4}
.headline{font-family:var(--f-title);font-weight:400;font-size:clamp(40px,6.3vw,82px);line-height:1.05;color:var(--brown);margin:clamp(50px,7vw,90px) 0 clamp(40px,5vw,64px)}
.headline .w{display:inline-block;animation:wordIn .8s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(1.25s + var(--i) * 90ms)}
.hero .btn{animation:fadeUp .6s ease 1.9s both}

@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}
@keyframes chipIn{0%{opacity:0;transform:translate(95%,-80%) rotate(240deg) scale(.45)}55%{opacity:1}100%{transform:none}}
@keyframes crumbIn{0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(0) rotate(-120deg)}100%{opacity:1;transform:none}}
@keyframes duoIn{0%{opacity:0;transform:translateY(55%) scale(.6)}100%{opacity:1;transform:none}}
@keyframes wordIn{0%{opacity:0;transform:translateY(-60px) rotate(-10deg)}100%{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes drift{from{transform:translate(0,0) rotate(0)}to{transform:translate(4px,-7px) rotate(25deg)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes crunch{0%{transform:scale(1)}30%{transform:scale(1.12,.86) rotate(-4deg)}60%{transform:scale(.94,1.06) rotate(3deg)}100%{transform:none}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px) rotate(-3deg)}70%{transform:translateY(0) scale(1.05,.95)}}

/* ---------- SAVEURS ---------- */
.band{height:30px;background:var(--pink)}
.saveurs{background:var(--rose);padding:100px 20px 130px;text-align:center}
.sec-title{font-family:var(--f-title);font-weight:400;font-size:clamp(28px,3vw,38px);letter-spacing:.01em;line-height:1.1}
.sec-sub{font-family:var(--f-title);font-size:clamp(17px,1.8vw,22px);margin-top:10px}
.saveurs .sec-title{color:#fff3ea}
.saveurs .sec-sub{color:var(--peach)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:120px 40px;max-width:1060px;margin:120px auto 100px}
.card{display:flex;flex-direction:column;align-items:center}
.bag{position:relative;display:inline-block}
.bag>img{height:210px;width:auto;max-width:none;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.card:hover .bag>img{transform:translateY(-10px) rotate(-4deg) scale(1.05)}
.plus{position:absolute;left:var(--px);bottom:5%;width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;
  transform:translateX(-55%);transition:transform .4s cubic-bezier(.3,1.8,.5,1);z-index:2}
.plus svg{width:100%;height:100%;display:block}
.plus svg circle{transition:fill .25s}
.plus:hover,.plus:focus-visible{transform:translateX(-55%) rotate(90deg) scale(1.2)}
.plus:hover svg circle{fill:var(--peach)}
.saveur{font-family:var(--f-title);font-weight:400;font-size:clamp(15px,1.35vw,18px);line-height:1.08;text-transform:uppercase;color:var(--wine);margin-top:24px}
.saveur span{display:block}
.saveur .alt{color:var(--peach)}
.fav .bag{padding:0}
.fav-frame{position:absolute;inset:-28px -34px -26px -30px;width:calc(100% + 64px);height:calc(100% + 54px);overflow:visible;pointer-events:none}
.fav-frame path{fill:none;stroke:#fff3ea;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease .2s}
.fav.in-view .fav-frame path{stroke-dashoffset:0}
.fav-label{position:absolute;left:50%;top:-66px;translate:-50% 0;white-space:nowrap;font-family:var(--f-hand);font-size:14px;letter-spacing:.06em;color:#fff3ea;text-transform:uppercase;opacity:0;transition:opacity .5s 1.3s}
.fav.in-view .fav-label{opacity:1;animation:wiggle 2.6s ease-in-out 1.8s infinite}
@keyframes wiggle{0%,100%{rotate:0deg}50%{rotate:-4deg}}

/* ---------- NOUVEAUTÉS ---------- */
.nouv{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:130px 20px 210px;
  background:linear-gradient(var(--rose) 0 50%,var(--cream) 50% 100%)}
.nouv::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-45%;right:-45%;background:var(--pink);border-radius:50%}
.nouv .sec-title{color:var(--plum)}
.nouv .sec-sub{color:var(--rose)}
.dark{position:relative;isolation:isolate;margin-top:60px;padding:170px 0 150px}
.dark::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-32%;right:-32%;background:var(--wine);border-radius:50%}
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;margin:0 auto}
.dark .bag>img{height:170px}
.dark .saveur{color:#fff3ea;margin-top:50px}
.dark .saveur .k{color:var(--rose)}
.dark .btn{--sh:var(--pink);margin-top:56px}

.leaves{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.leaf{position:absolute;top:0;left:0;opacity:0;will-change:transform,opacity}
.leaf svg{display:block;width:100%;height:100%;overflow:visible}

.shroom{position:absolute;left:0;top:0;width:92px;z-index:2;opacity:0;transition:opacity .8s;will-change:transform;cursor:pointer}
.shroom.on{opacity:1}
.shroom-svg{display:block;width:100%;height:auto;overflow:visible}
.shroom-hop.jump{animation:shroomJump .6s cubic-bezier(.3,1.6,.5,1)}
.shroom-waddle{transform-origin:50% 95%;animation:waddle .55s ease-in-out infinite alternate}
.shroom .leg{transform-box:fill-box;transform-origin:50% 0}
.shroom .leg-a{animation:step .55s ease-in-out infinite alternate}
.shroom .leg-b{animation:step .55s ease-in-out infinite alternate-reverse}
.shroom .arm{transform-box:fill-box;transform-origin:0 50%;animation:wave 1.1s ease-in-out infinite alternate}
@keyframes waddle{from{transform:rotate(-4deg) translateY(0)}to{transform:rotate(4deg) translateY(-3px)}}
@keyframes step{from{transform:rotate(22deg)}to{transform:rotate(-22deg)}}
@keyframes wave{from{transform:rotate(-15deg)}to{transform:rotate(20deg)}}
@keyframes shroomJump{0%,100%{transform:translateY(0)}45%{transform:translateY(-34px) rotate(-8deg)}75%{transform:translateY(0) scale(1.08,.9)}}
@media (max-width:640px){.shroom{width:70px}}

/* ---------- PROMESSES (animation du bas) ---------- */
.promesses{padding:180px 20px 200px}
.cluster{position:relative;width:min(700px,100%);height:260px;margin:0 auto}
.cluster .duo3{position:absolute;left:50%;top:50%;width:128px;translate:-50% -54%}
.cluster.in-view .duo3 img{transform-origin:50% 95%;animation:hop .7s cubic-bezier(.3,1.6,.5,1) .05s,sway 3.2s ease-in-out 1s infinite}
.bpos{position:absolute;left:var(--l);top:var(--t);opacity:0;transform:translate(var(--fx),var(--fy)) scale(.15);
  transition:transform .9s cubic-bezier(.3,1.5,.5,1) var(--dl),opacity .35s ease var(--dl)}
.cluster.in-view .bpos{opacity:1;transform:none}
.badge{display:block;font-family:var(--f-hand);font-size:13px;line-height:1.4;text-transform:uppercase;text-align:center;color:var(--brown);
  padding:14px 24px;border-radius:22px;background:var(--bg);rotate:var(--r);
  animation:bob var(--bt) ease-in-out infinite alternate;transition:rotate .35s cubic-bezier(.3,1.8,.5,1),scale .35s cubic-bezier(.3,1.8,.5,1)}
.badge:hover{rotate:0deg;scale:1.1}
@keyframes bob{from{translate:0 0}to{translate:0 -10px}}

/* ---------- À PROPOS ---------- */
.propos{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:150px 20px 210px}
.propos::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-25%;right:-25%;background:var(--sand);border-radius:50%}
.propos .sec-title{color:var(--plum)}
.propos h3{font-family:var(--f-title);font-weight:400;color:var(--brown);text-transform:uppercase;font-size:15px;margin:90px 0 10px}
.caps{font-size:13.5px;line-height:1.6;text-transform:uppercase;color:var(--muted);max-width:500px;margin:0 auto}
.piliers{position:relative;max-width:1180px;margin:150px auto 0}
.piliers h3{font-size:22px;margin:0 0 60px}
.piliers ul{list-style:none;padding:0;margin:0 auto;max-width:700px}
.piliers li{font-size:13.5px;line-height:1.6;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.piliers li::before{content:"• "}
.pil-duo{position:absolute;left:0;top:-40px;width:150px;transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
.pil-duo:hover{transform:rotate(-6deg) scale(1.06)}
.pil-flag{position:absolute;right:0;top:-40px;width:96px;transform-origin:25% 90%;animation:flag 3.8s ease-in-out infinite}
@keyframes flag{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg) skewY(-1.5deg)}}

/* ---------- CONTACT ---------- */
.contact{text-align:center;padding:140px 20px 60px}
.contact .sec-title{color:var(--plum)}
.contact .intro{font-size:clamp(15px,1.4vw,18px);color:var(--ink);max-width:900px;margin:44px auto 0}
.form{background:var(--panel);max-width:590px;margin:120px auto 0;padding:50px 32px 20px;text-align:left}
.field{margin:0 0 34px;max-width:495px}
.field input,.field textarea{width:100%;border:0;background:var(--white);color:var(--ink);font-family:var(--f-hand);font-size:13px;
  border-radius:999px;padding:6px 18px;transition:box-shadow .25s,transform .25s}
.field textarea{border-radius:30px;min-height:112px;resize:vertical;padding:14px 18px}
.field.msg{max-width:442px;margin:62px 0 44px 20px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink);opacity:1}
.field input:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 2.5px var(--rose);transform:translateY(-1px)}
.form .actions{text-align:center}
.form-msg{min-height:1.5em;margin-top:12px;text-align:center;font-size:14px;color:var(--plum)}
.address{margin-top:110px;font-size:15px;line-height:1.7;color:var(--ink)}

/* ---------- FOOTER ---------- */
.footer{position:relative;background:var(--plum);color:var(--cream);margin-top:210px;padding:120px 0 18px}
.foot-duo{position:absolute;right:clamp(10px,2.5vw,36px);bottom:100%;width:170px}
.foot-duo img{transform-origin:50% 100%}
.footer.in-view .foot-duo img{animation:hop .7s cubic-bezier(.3,1.6,.5,1) .2s}
.foot-duo:hover img{animation:hop .7s cubic-bezier(.3,1.6,.5,1)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1080px;margin:0 auto 90px;padding:0 20px;text-align:center;align-items:center}
.foot-brand .name{font-family:var(--f-title);font-size:clamp(32px,3.2vw,44px);letter-spacing:.01em}
.foot-brand .sub{font-size:24px;margin-top:6px}
.foot-brand .tag{display:inline-block;margin-top:14px;background:var(--cream);color:var(--plum);font-size:18px;padding:0 8px;border-radius:6px}
.foot-info h4{margin:0 0 30px;font-weight:400;font-size:17px}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links a{position:relative;display:inline-block;text-decoration:none;text-transform:uppercase;font-size:14px;line-height:1.85}
.foot-links a::after{filter:brightness(0) invert(1)}
.foot-links a:hover::after,.foot-links a:focus-visible::after{clip-path:inset(0 0 0 0)}
.social{display:flex;justify-content:center;gap:10px;margin-top:16px}
.social a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;transition:transform .35s cubic-bezier(.3,1.8,.5,1),background .25s}
.social a:hover{transform:translateY(-4px) rotate(-10deg);background:rgba(255,253,228,.15)}
.social svg{width:18px;height:18px;fill:currentColor}
.footbar{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;align-items:center;background:var(--pink);color:var(--brown);
  border-radius:12px;margin:0 clamp(12px,3.4vw,48px);padding:14px clamp(16px,4vw,60px);font-size:12px}
.footbar .mid{flex:1;text-align:center}
.footbar .legal{display:flex;gap:18px}
.footbar a{text-decoration:none}
.footbar a:hover{text-decoration:underline}
.footbar .mid a{text-decoration:underline}

/* ---------- FICHE PRODUIT ---------- */
.qv{border:0;padding:0;background:transparent;max-width:min(640px,92vw);overflow:visible}
.qv::backdrop{background:rgba(80,17,60,.5)}
.qv[open] .qv-card{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.qv-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--cream);border-radius:28px;padding:32px 36px;box-shadow:0 8px 0 var(--peach)}
.qv-card img{height:230px;width:auto;max-width:none}
.qv-k{font-family:var(--f-title);color:var(--rose);text-transform:uppercase;font-size:15px}
.qv-name{font-family:var(--f-title);font-weight:400;color:var(--plum);text-transform:uppercase;font-size:24px;line-height:1.1;margin:4px 0 14px}
.qv-desc{font-size:15px;line-height:1.55;color:var(--ink)}
.qv-meta{font-size:13px;color:var(--muted);margin:10px 0 22px}
.qv-close{position:absolute;top:10px;right:14px;width:36px;height:36px;border:0;background:none;font-size:28px;line-height:1;color:var(--plum);cursor:pointer;transition:transform .3s}
.qv-close:hover{transform:rotate(90deg)}
@keyframes pop{from{opacity:0;transform:scale(.8) rotate(-3deg)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .burger{display:block}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:center;gap:6px;padding:18px 0 24px;background:var(--cream);box-shadow:0 3px 0 var(--pink);
    clip-path:inset(0 0 100% 0);transition:clip-path .4s ease;visibility:hidden}
  .nav.open .nav-links{clip-path:inset(0 0 0 0);visibility:visible}
  .nav-links a{font-size:17px}
  .pil-duo,.pil-flag{position:static;display:inline-block;margin:0 20px 30px;vertical-align:bottom}
}
@media (max-width:800px){
  .grid{grid-template-columns:repeat(2,1fr);gap:100px 20px}
  .foot-grid{grid-template-columns:1fr}
  .footbar{flex-direction:column;text-align:center}
  .dark::before{left:-60%;right:-60%}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr;gap:90px}
  .duo-grid{grid-template-columns:1fr;gap:70px}
  .dark{padding:150px 0 140px}
  .dark::before{left:-80%;right:-80%}
  .nouv::before{left:-90%;right:-90%}
  .propos::before{left:-70%;right:-70%}
  .cluster{display:grid;grid-template-columns:1fr 1fr;gap:26px 14px;height:auto;align-items:center}
  .cluster .duo3{position:static;translate:none;grid-column:1/-1;justify-self:center;order:2}
  .bpos{position:static;--fx:0px !important;--fy:40px !important}
  .b1{order:1}.b3{order:1}.b2{order:3}.b4{order:3}
  .badge{padding:12px 14px;font-size:12px}
  .qv-card{grid-template-columns:1fr;justify-items:center;text-align:center;padding:30px 22px}
  .qv-card img{height:180px}
  .field.msg{margin-left:0}
  .foot-duo{width:130px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.001ms !important;transition-delay:0s !important}
  html{scroll-behavior:auto}
}