/* =========================================================
   En terre de Caractère — feuille de style principale
   Les couleurs/polices réglables sont dans theme.css (généré).
   ========================================================= */
@font-face{font-family:'Poppins';src:url(../fonts/Poppins-Regular.woff?v=2) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url(../fonts/Poppins-Medium.woff?v=2) format('woff');font-weight:500 600;font-display:swap}
@font-face{font-family:'Poppins';src:url(../fonts/Poppins-Bold.woff?v=2) format('woff');font-weight:700 900;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/Inter-Regular.woff?v=2) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/Inter-SemiBold.woff?v=2) format('woff');font-weight:500 700;font-display:swap}
@font-face{font-family:'Lora';src:url(../fonts/Lora.woff?v=2) format('woff');font-weight:400 700;font-display:swap}
@font-face{font-family:'Lora';src:url(../fonts/Lora-Italic.woff?v=2) format('woff');font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --accent:#c4562e;--accent2:#e2a93b;--green:#7fae5a;--bgA:#0f2417;--bgB:#1d3d27;--text:#f3ead2;
  --font-h:'Poppins',system-ui,sans-serif;--font-b:'Inter',system-ui,sans-serif;--font-a:'Lora',Georgia,serif;
  --fs:16px;--ts:1;--r:16px;--maxw:1200px;--fx-global:1;--shadow:0 14px 40px rgba(0,0,0,.3);
  --card:color-mix(in srgb,var(--bgA) 72%,black 28%);
  --card-a:color-mix(in srgb,var(--card) 78%,transparent);
  --line:color-mix(in srgb,var(--text) 10%,transparent);
  --line2:color-mix(in srgb,var(--text) 18%,transparent);
  --muted:color-mix(in srgb,var(--text) 62%,transparent);
  --soft:color-mix(in srgb,var(--text) 6%,transparent);
  --on-accent:#fff8ec;
  --mono:ui-monospace,'Cascadia Mono',Consolas,'Courier New',monospace;
}
:root[data-theme="light"]{
  --card:color-mix(in srgb,#fffaf0 88%,var(--bgB) 12%);
  --card-a:color-mix(in srgb,#fffaf0 80%,transparent);
  --shadow:0 12px 34px rgba(80,55,20,.14);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bgA);color:var(--sec-text,var(--text));font-family:var(--font-b);font-size:var(--fs);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:6px}
.ico{width:1.15em;height:1.15em;flex:none}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* ===== FOND ANIMÉ ===== */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(160deg,var(--bgA),var(--bgB) 55%,color-mix(in srgb,var(--bgB) 80%,var(--green) 20%))}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.b1{width:48vmax;height:48vmax;background:color-mix(in srgb,var(--green) 70%,var(--bgB));left:-12vmax;top:-10vmax;animation:f1 calc(20s*var(--fx-global)) ease-in-out infinite}
.b2{width:38vmax;height:38vmax;background:var(--accent2);opacity:.24;right:-10vmax;top:18vh;animation:f2 calc(24s*var(--fx-global)) ease-in-out infinite}
.b3{width:34vmax;height:34vmax;background:var(--accent);opacity:.2;left:20vw;bottom:-16vmax;animation:f3 calc(28s*var(--fx-global)) ease-in-out infinite}
[data-theme="light"] .blob{opacity:.28}[data-theme="light"] .b2{opacity:.22}[data-theme="light"] .b3{opacity:.14}
@keyframes f1{0%,100%{transform:translate(0,0) scale(1);border-radius:50%}33%{transform:translate(8vw,6vh) scale(1.15);border-radius:42% 58% 55% 45%/50% 42% 58% 50%}66%{transform:translate(3vw,12vh) scale(.92);border-radius:55% 45% 48% 52%/45% 55% 45% 55%}}
@keyframes f2{0%,100%{transform:translate(0,0) scale(1);border-radius:50%}40%{transform:translate(-9vw,-5vh) scale(1.2);border-radius:58% 42% 45% 55%/48% 55% 45% 52%}70%{transform:translate(-4vw,6vh) scale(.88);border-radius:46% 54% 52% 48%/55% 45% 55% 45%}}
@keyframes f3{0%,100%{transform:translate(0,0) scale(1);border-radius:50%}35%{transform:translate(7vw,-7vh) scale(1.18);border-radius:44% 56% 50% 50%/52% 44% 56% 48%}70%{transform:translate(-5vw,-3vh) scale(.9);border-radius:54% 46% 47% 53%/46% 54% 46% 54%}}
.grain{position:absolute;inset:0;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.bg-move{position:absolute;inset:-40px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.leaf{position:absolute;bottom:-60px;width:var(--s);height:var(--s);opacity:0;animation:rise calc(var(--d)*var(--fx-global)) linear infinite;animation-delay:var(--dl)}
.leaf svg{width:100%;height:100%;fill:var(--col);stroke:none;animation:sway 3s ease-in-out infinite alternate}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-115vh) rotate(540deg);opacity:0}}
@keyframes sway{to{transform:translateX(70px) rotate(25deg)}}
.fly{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent2);box-shadow:0 0 12px 4px color-mix(in srgb,var(--accent2) 70%,transparent);left:var(--x);top:var(--y);animation:fly var(--t) ease-in-out infinite alternate,twinkle 2.5s ease-in-out infinite alternate;animation-delay:var(--dl)}
[data-theme="light"] .fly{opacity:.5}
@keyframes fly{to{transform:translate(var(--dx),var(--dy))}}
@keyframes twinkle{from{opacity:.1}to{opacity:1}}
.hills{position:absolute;bottom:0;height:34vh;width:112%;left:-6%;transform-origin:bottom}
.hills.hl2 path{fill:color-mix(in srgb,var(--green) 45%,var(--bgB));fill-opacity:.55}
.hills.hl1 path{fill:var(--bgA);fill-opacity:.9}
.hills.hl1{animation:drift 9s ease-in-out infinite alternate}
.hills.hl2{animation:drift 13s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translateX(-5%) scaleY(1.15)}}
.fx-off .bg *, .fx-off .bg{animation:none!important}
@media (prefers-reduced-motion:reduce){html:not(.x-force) .bg *{animation:none!important}.marquee .mq-track{animation-duration:calc(var(--mq,35s)*1.6)!important}html:not(.x-force) .fx-i{transition:none!important;opacity:1!important;transform:none!important;filter:none!important}}

/* ===== MISE EN PAGE ===== */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.w-narrow{max-width:min(var(--maxw),780px)}.w-wide{max-width:calc(var(--maxw) + 120px)}
.sec{position:relative;color:var(--sec-text,var(--text))}
.pad-s{padding:36px 0}.pad-m{padding:72px 0}.pad-l{padding:110px 0 80px}.pad-xl{padding:150px 0 120px}
.bg-card{background:color-mix(in srgb,var(--bgA) 55%,transparent);backdrop-filter:blur(6px)}
.sec-bgimg{position:absolute;inset:0;background:var(--bgimg) center/cover no-repeat;z-index:-1;opacity:.9}
.sec-bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bgA) 70%,transparent),color-mix(in srgb,var(--bgA) 85%,transparent))}
.sec.is-hidden{opacity:.35;outline:2px dashed var(--accent2);outline-offset:-6px}
.sec.is-hidden::before{content:"Section masquée (invisible sur le site)";position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--accent2);color:#1b1206;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;z-index:3}

/* Titres */
.h1,.h2,h3,h4{font-family:var(--font-h);color:var(--sec-title,var(--text));letter-spacing:-.02em;line-height:1.08;margin:0}
.h1{font-size:calc(clamp(2.3rem,6.4vw,4.6rem)*var(--ts));font-weight:700}
.h2{font-size:calc(clamp(1.9rem,4.6vw,3.2rem)*var(--ts));font-weight:700}
.h2 .muted{display:block;color:color-mix(in srgb,var(--sec-title,var(--text)) 55%,transparent)}
.accent{font-family:var(--font-a);font-style:italic;font-weight:600;color:var(--accent2);letter-spacing:0;padding-right:.08em;background:linear-gradient(90deg,var(--accent2),color-mix(in srgb,var(--accent2) 60%,var(--accent)),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:shine-txt 6s linear infinite}
@keyframes shine-txt{to{background-position:-200% 0}}
.lead{color:var(--muted);font-size:1.08em;max-width:40rem;margin:14px auto 0}
.sec-head{margin-bottom:40px}
.al-center .sec-head{text-align:center}
.al-left .sec-head{text-align:left}.al-left .lead{margin-left:0}
.pill-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-h);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);border:1px solid color-mix(in srgb,var(--accent2) 45%,transparent);background:color-mix(in srgb,var(--accent2) 10%,transparent);padding:6px 14px;border-radius:99px;margin-bottom:18px}
.pill-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent2);box-shadow:0 0 10px var(--accent2)}

/* Cartes */
.card{background:var(--card-a);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hz-on .hz{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.hz-on .hz:hover{transform:translateY(-6px) scale(1.015);border-color:color-mix(in srgb,var(--accent2) 45%,transparent)}

/* Boutons */
.btn{--b:var(--accent);position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-h);font-weight:600;font-size:.95rem;padding:13px 24px;border-radius:calc(var(--r)*.65);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .25s,background .25s,border-color .25s;line-height:1.1;white-space:nowrap}
.btn-primary{background:var(--b);color:var(--on-accent);box-shadow:0 8px 26px color-mix(in srgb,var(--b) 45%,transparent)}
.btn-gold{background:var(--accent2);color:#1f1608;box-shadow:0 8px 26px color-mix(in srgb,var(--accent2) 40%,transparent)}
.btn-ghost{background:var(--soft);border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent2)}
.btn-sm{padding:9px 14px;font-size:.84rem;gap:6px}
.btn-lg{padding:17px 34px;font-size:1.05rem}
.btn-block{width:100%}
.btn .ico{width:1.05em;height:1.05em}
.btn:active{transform:scale(.97)}
.btn-shine .btn-primary::after,.btn-shine .btn-gold::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s}
.btn-shine .btn-primary:hover::after,.btn-shine .btn-gold:hover::after{left:130%}
.btn-lift .btn:hover{transform:translateY(-3px)}
.btn-pulse .btn-primary{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 0%,transparent),0 8px 30px color-mix(in srgb,var(--accent) 55%,transparent)}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn-row.center,.al-center .btn-row{justify-content:center}
.is-out{opacity:.6;cursor:not-allowed}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--soft);cursor:pointer}
.icon-btn .ico{width:20px;height:20px}

/* ===== NAVIGATION (pilule flottante) ===== */
.nav-wrap{position:sticky;top:12px;z-index:50;padding:0 12px;pointer-events:none}
.nav{pointer-events:auto;margin:12px auto 0;max-width:min(980px,100%);display:flex;align-items:center;gap:16px;padding:8px 8px 8px 14px;border-radius:18px;background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.glass .nav{background:color-mix(in srgb,var(--card) 62%,transparent);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-h);font-weight:500;font-size:.8rem;letter-spacing:.08em;white-space:nowrap}
.logo img{height:46px;width:auto;margin:-4px 0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));transition:transform .4s}
.logo:hover img{transform:rotate(-8deg) scale(1.06)}
.logo b{color:var(--accent2);font-weight:700}
.logo-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent2) 60%,transparent),var(--accent));color:var(--on-accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 50%,transparent)}
.logo-mark .ico{width:18px;height:18px}
.nav-links{display:flex;gap:4px;margin:0 auto}
.nav-links a{text-decoration:none;font-size:.9rem;padding:8px 12px;border-radius:10px;color:var(--muted);transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text);background:var(--soft)}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent2)}
.nav-right{display:flex;align-items:center;gap:8px}
.cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--on-accent);color:var(--accent);font-size:.75rem}
.i-moon{display:none}[data-theme="light"] .i-sun{display:none}[data-theme="light"] .i-moon{display:block}
.burger{display:none}
@media (max-width:900px){
  .burger{display:inline-grid}
  .nav{flex-wrap:wrap;row-gap:0;column-gap:8px}
  .nav-links{order:5;flex-basis:100%;flex-direction:column;max-height:0;overflow:hidden;transition:max-height .35s ease,margin .35s;margin:0}
  .nav-links.open{max-height:70vh;margin-top:8px}
  .nav-links a{padding:12px}
  .nav-right{margin-left:auto}
  .cart-lbl{display:none}
}
@media (max-width:480px){
  .nav{padding:6px 6px 6px 10px}
  .logo{gap:7px;font-size:.66rem;letter-spacing:.04em}
  .logo-mark{width:30px;height:30px}
  .icon-btn{width:36px;height:36px}
  .nav-right{gap:5px}
  .nav-right .btn-sm{padding:8px 10px}
}

/* ===== BANNIÈRE / ATELIER ===== */
.sec-hero,.sec-atelier{text-align:center}
.sec-hero.full{min-height:calc(100vh - 80px);display:flex;align-items:center}
.hero-in .lead{font-size:1.15em}
.checks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-weight:500}
.checks li{display:flex;align-items:center;gap:8px}
.checks .ico{color:var(--accent2);width:20px;height:20px}
.hero-img{margin:40px auto 0;max-width:900px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}

.appwin{margin:46px auto 0;max-width:1180px;border-radius:calc(var(--r)*1.1);background:color-mix(in srgb,var(--card) 85%,transparent);border:1px solid var(--line2);box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 0 80px color-mix(in srgb,var(--accent) 18%,transparent);overflow:hidden;text-align:center}
.appbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%;background:#e2685a}.dots i:nth-child(2){background:var(--accent2)}.dots i:nth-child(3){background:var(--green)}
.apptitle{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-right:auto}
.appctl{display:flex;gap:10px}.appctl i{width:10px;height:2px;background:var(--muted);opacity:.6}
.appbody{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:16px;padding:26px}
.acol{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:center}
.acard{padding:16px 14px;border-radius:calc(var(--r)*.8);background:var(--soft);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .3s,transform .3s}
.acard:hover{border-color:color-mix(in srgb,var(--accent2) 50%,transparent);transform:translateY(-3px)}
.acard h3{font-size:.95rem;font-weight:600}
.acard-ico{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent2);margin:4px 0}
.acard-ico .ico{width:28px;height:28px}
.acard small{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.acard-val{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--green);background:color-mix(in srgb,var(--bgA) 60%,black 40%);padding:7px 8px;border-radius:8px;width:100%;min-height:2.6em;display:grid;place-items:center;overflow-wrap:anywhere}
[data-theme="light"] .acard-val{background:color-mix(in srgb,var(--bgA) 70%,white 30%);color:color-mix(in srgb,var(--green) 70%,black)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:.72rem;color:var(--muted);cursor:pointer;margin-top:4px}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch i{width:38px;height:21px;border-radius:99px;background:var(--line2);position:relative;transition:background .25s;flex:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .25s}
.switch input:checked+i{background:var(--green)}
.switch input:checked+i::after{transform:translateX(17px)}
.switch input:focus-visible+i{outline:2px solid var(--accent2);outline-offset:2px}
.acenter{position:relative;border-radius:calc(var(--r)*.9);overflow:hidden;min-height:300px;background:var(--soft);display:grid}
.acenter img{width:100%;height:100%;object-fit:cover;transition:transform 8s ease}
.appwin:hover .acenter img{transform:scale(1.06)}
.alabel{position:absolute;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--accent2);background:color-mix(in srgb,black 55%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 40%,transparent);padding:4px 8px;border-radius:6px;backdrop-filter:blur(4px);animation:floaty 5s ease-in-out infinite}
.al0{top:12px;right:12px}.al1{top:42%;left:12px;animation-delay:-1.5s}.al2{bottom:44px;right:18px;animation-delay:-3s}.al3{bottom:12px;left:22px;animation-delay:-2s}
@keyframes floaty{50%{transform:translateY(-6px)}}
.appcta{padding:0 26px 22px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq var(--mq,35s) linear infinite}
.mq-track span{display:inline-flex;align-items:center;gap:10px;padding:0 26px;white-space:nowrap}
.mq-dup{padding:0!important;gap:0!important}
.marquee.in-app{border-top:1px solid var(--line);padding:16px 0;font-family:var(--font-h);font-weight:700;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--text) 35%,transparent)}
.marquee.in-app .ico{color:var(--accent2);opacity:.7}
.marquee.big{font-family:var(--font-h);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.4rem);text-transform:uppercase;letter-spacing:.02em}
.marquee.big .ico{color:var(--accent2)}
.marquee.big span span{color:var(--text)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (max-width:980px){.appbody{grid-template-columns:1fr}.acenter{order:-1;min-height:240px}}
@media (max-width:420px){.acol{grid-template-columns:1fr 1fr;gap:10px}.acard{padding:12px 8px}}

/* ===== PRODUITS ===== */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-14px 0 26px}
.al-left .filters{justify-content:flex-start}
.chip{padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:var(--card-a);cursor:pointer;font-size:.9rem;transition:all .25s;color:var(--muted)}
.chip:hover{color:var(--text);border-color:var(--line2)}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 6px 22px color-mix(in srgb,var(--accent) 45%,transparent)}
.search{display:flex;align-items:center;gap:10px;max-width:420px;margin:0 auto 30px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--card-a)}
.search input{flex:1;border:0;background:none;padding:13px 0;outline:none}
.search .ico{color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(220px,calc((100% - 60px)/4)),1fr));gap:20px}
.pcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--card-a);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;backdrop-filter:blur(8px)}
.pcard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent2) 70%,transparent),transparent 40%,transparent 60%,color-mix(in srgb,var(--accent) 70%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
.hz-on .pcard:hover{transform:translateY(-8px)}
.pcard:hover::before{opacity:1}
.pcard:hover{box-shadow:0 22px 50px rgba(0,0,0,.35),0 0 40px color-mix(in srgb,var(--accent) 22%,transparent)}
.pimg{position:relative;aspect-ratio:1/0.82;overflow:hidden;margin:8px 8px 0;border-radius:calc(var(--r)*.75);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent2) 25%,transparent),transparent 70%),var(--soft)}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pimg img{transform:scale(1.08) rotate(-1deg)}
.pimg-ph{display:grid;place-items:center;align-content:center;gap:8px;width:100%;height:100%;min-height:160px;color:var(--muted);font-size:.8rem}
.pimg-ph .ico{width:42px;height:42px;color:var(--accent2);opacity:.7}
.pbadge{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:5px 10px;border-radius:99px;background:color-mix(in srgb,black 55%,transparent);color:#d6f0bf;border:1px solid color-mix(in srgb,var(--green) 55%,transparent);backdrop-filter:blur(6px)}
.pbadge i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:twinkle 1.4s ease-in-out infinite alternate}
.pcat{position:absolute;top:10px;left:10px;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:8px;background:color-mix(in srgb,black 45%,transparent);color:#f3ead2;backdrop-filter:blur(6px)}
.pbody{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;text-align:center}
.pbody h3{font-size:1.02rem;font-weight:600;margin-bottom:6px}
.pdesc{font-size:.84rem;color:var(--muted);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.pprice small{display:block;font-size:.72rem;color:var(--muted)}
.pprice b{font-family:var(--font-h);font-size:1.25rem}
.empty-msg{text-align:center;color:var(--muted);margin-top:30px}

/* ===== GRILLES / CARTES ===== */
.grid{display:grid;gap:20px}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.fcard{padding:28px;text-decoration:none;display:block;text-align:left}
.fico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent2) 14%,transparent);color:var(--accent2);margin-bottom:18px}
.fico .ico{width:26px;height:26px}
.fimg{border-radius:calc(var(--r)*.7);margin-bottom:16px;aspect-ratio:16/10;object-fit:cover;width:100%}
.fcard h3{font-size:1.15rem;margin-bottom:8px}
.fcard p{margin:0;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.stat{padding:26px;text-align:center;display:flex;flex-direction:column;gap:6px}
.stat b{font-family:var(--font-h);font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;color:var(--accent2)}
.stat>span{color:var(--muted)}

/* Avis */
.rating-pill{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;padding:10px 18px;border-radius:99px;border:1px solid var(--line2);background:var(--card-a);margin:-14px auto 30px;font-size:.85rem}
.al-center .rating-pill{display:flex;width:max-content;max-width:100%}
.rating-pill>i{width:1px;height:18px;background:var(--line2)}
.stars{display:inline-flex;gap:2px}
.stars i{color:var(--line2);display:inline-flex}.stars i.on{color:var(--accent2)}
.stars .ico{width:15px;height:15px;fill:currentColor}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.tcard{margin:0;padding:22px;display:flex;flex-direction:column;gap:10px;text-align:left;position:relative}
.tcard.is-more{display:none}
.tcard.show{display:flex}
.ttop{display:flex;justify-content:space-between;align-items:center}
.ttop time{font-size:.78rem;color:var(--muted);font-style:italic}
.tq{position:absolute;top:34px;right:18px;font-family:var(--font-a);font-style:italic;font-size:5.5rem;line-height:1;color:var(--accent2);opacity:.22;pointer-events:none;user-select:none}
.tcard blockquote{position:relative;z-index:1}
.tcard blockquote{margin:0;flex:1;font-size:.95rem}
.tcard figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;font-size:.9rem;margin-top:6px}
.vbadge{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:.72rem;font-weight:600;color:#bfe5a0;border:1px solid color-mix(in srgb,var(--green) 55%,transparent);background:color-mix(in srgb,var(--green) 14%,transparent);padding:4px 9px;border-radius:8px}
[data-theme="light"] .vbadge{color:color-mix(in srgb,var(--green) 60%,black)}

/* FAQ */
.faq-split{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-split .sec-head{text-align:left}
.faq-split .lead{margin-left:0}
.faq-center{max-width:780px;margin:0 auto}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq{padding:0;overflow:hidden;box-shadow:none;transition:border-color .3s}
.faq[open]{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--card-a))}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;list-style:none;font-weight:600;font-size:.95rem;text-align:left}
.faq summary::-webkit-details-marker{display:none}
.faq[open] summary{color:var(--accent2)}
.faq summary .ico{transition:transform .3s}
.faq[open] summary .ico{transform:rotate(180deg)}
.faq-a{padding:0 20px 18px;color:var(--muted);text-align:left;animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-6px)}}
.orbit{position:relative;width:280px;height:280px;margin:20px 0 0 30px}
.orbit-core{position:absolute;inset:50%;width:64px;height:64px;margin:-32px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--accent),color-mix(in srgb,var(--accent) 40%,black));color:var(--on-accent);box-shadow:0 0 50px color-mix(in srgb,var(--accent) 60%,transparent)}
.orbit-core .ico{width:28px;height:28px}
.ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--line2);animation:spin 26s linear infinite}
.ring.r1{inset:50px}.ring.r2{animation-duration:40s;animation-direction:reverse}
.ring i{position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid color-mix(in srgb,var(--accent2) 45%,transparent);color:var(--accent2);transform:rotate(var(--a)) translateY(-90px) rotate(calc(-1*var(--a)))}
.ring.r2 i{transform:rotate(var(--a)) translateY(-140px) rotate(calc(-1*var(--a)))}
.ring i .ico{width:18px;height:18px;animation:spin 26s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.faq-split{grid-template-columns:1fr;gap:20px}.faq-side{position:static}.orbit{display:none}}

/* CTA */
.cta{padding:44px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),var(--card-a)}
.cta-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent2);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 0 40px color-mix(in srgb,var(--accent) 35%,transparent)}
.cta-ico .ico{width:30px;height:30px}
.cta h3{font-size:1.5rem}
.cta p{margin:0 0 10px;color:var(--muted)}

/* Étapes */
.steps{list-style:none;padding:0;margin:0;position:relative;display:flex;flex-direction:column;gap:30px}
.steps::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--accent),var(--accent2),transparent)}
.step{display:flex;gap:22px;align-items:flex-start;text-align:left}
.step-n{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-h);font-weight:700;background:var(--card);border:2px solid var(--accent);color:var(--accent2);position:relative;box-shadow:0 0 22px color-mix(in srgb,var(--accent) 40%,transparent)}
.step h3{font-size:1.15rem;margin:8px 0 6px}
.step p{margin:0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips span{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:5px 11px;border-radius:99px;border:1px solid var(--line2);background:var(--soft)}
.chips .ico{width:13px;height:13px;color:var(--accent2)}

/* Contact */
.ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:900px;margin:0 auto}
.ccard{padding:30px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.cc-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--accent2)}
.cc-ico .ico{width:26px;height:26px}
.ccard h3{font-size:1.05rem}
.cc-link{font-size:.85rem;text-decoration:none;color:var(--accent2);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);padding:6px 14px;border-radius:99px;overflow-wrap:anywhere}
.cc-link:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:500;color:var(--muted)}
form input:not([type=checkbox]),form textarea{width:100%;padding:12px 14px;border-radius:calc(var(--r)*.6);border:1px solid var(--line2);background:color-mix(in srgb,var(--bgA) 40%,transparent);color:var(--text);outline:none;transition:border-color .2s}
form input:focus,form textarea:focus{border-color:var(--accent2)}
.cform{padding:28px;display:flex;flex-direction:column;gap:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.frow{grid-template-columns:1fr}}
.form-msg{margin:0;font-size:.9rem;min-height:1.2em}
.form-msg.ok{color:var(--green)}.form-msg.err{color:#ff9b85}

/* Galerie */
.gallery{display:grid;gap:14px}
.gitem{margin:0;border-radius:var(--r);overflow:hidden;position:relative;background:var(--soft);aspect-ratio:1}
.gitem button{all:unset;cursor:zoom-in;display:block;width:100%;height:100%}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gitem:hover img{transform:scale(1.07)}
.gitem figcaption{position:absolute;left:10px;bottom:10px;font-size:.8rem;font-weight:600;padding:5px 10px;border-radius:8px;background:color-mix(in srgb,black 55%,transparent);color:#fff}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.86);display:grid;place-items:center;padding:30px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1100px,94vw);max-height:86vh;border-radius:12px}
.lightbox .icon-btn{position:absolute;top:18px;right:18px;color:#fff}

/* Image + texte */
.itext{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.itext.img-right .itext-img{order:2}
.itext-img{border-radius:calc(var(--r)*1.2);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);position:relative}
.itext-img img{width:100%;height:100%;object-fit:cover}
.itext-img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line2)}
.itext-txt .sec-head{text-align:left;margin-bottom:18px}
.prose{color:var(--muted)}
.prose p{margin:0 0 1em}
.sec-text .prose{padding:30px}
@media (max-width:800px){.itext{grid-template-columns:1fr;gap:30px}.itext.img-right .itext-img{order:0}.itext-img{aspect-ratio:4/3}}

/* Tarifs */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.price{padding:30px;display:flex;flex-direction:column;gap:14px;text-align:left}
.price.hl{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 60px color-mix(in srgb,var(--accent) 25%,transparent)}
.pp b{font-family:var(--font-h);font-size:2.2rem;color:var(--accent2)}.pp span{color:var(--muted);margin-left:6px}
.price ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;flex:1}
.price li{display:flex;gap:8px;align-items:center}.price li .ico{color:var(--green)}

/* Vidéo */
.video{overflow:hidden;aspect-ratio:16/9;padding:0;position:relative;max-width:960px;margin:0 auto}
.video button{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.vplay{position:relative;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);box-shadow:0 0 50px color-mix(in srgb,var(--accent) 60%,transparent);transition:transform .3s}
.video button:hover .vplay{transform:scale(1.1)}
.vplay .ico{width:40px;height:40px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .pimg-ph{height:100%}

/* Blog */
.blog{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.post{overflow:hidden;text-align:left;display:flex;flex-direction:column}
.post img{aspect-ratio:16/10;object-fit:cover;width:100%}
.post-b{padding:20px;display:flex;flex-direction:column;gap:8px}
.post time{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent2);font-weight:600}
.post h3{font-size:1.2rem}
.post p{margin:0;color:var(--muted)}
.post details summary{cursor:pointer;color:var(--accent2);font-weight:600;margin-top:6px}
.post details .prose{margin-top:12px}
.empty{padding:50px;text-align:center;color:var(--muted);display:grid;justify-items:center;gap:10px}
.empty .ico{width:36px;height:36px;opacity:.6}

/* Newsletter */
.news{padding:44px 30px;text-align:center}
.news .sec-head{margin-bottom:22px}
.news-f{display:flex;gap:10px;max-width:520px;margin:0 auto}
.news-f input[type=email]{flex:1}
@media (max-width:560px){.news-f{flex-direction:column}}

/* Séparateur */
.divider{display:flex;align-items:center;gap:16px;color:var(--accent2)}
.divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.ds-s{min-height:10px}.ds-m{min-height:30px}.ds-l{min-height:70px}
.sec-divider.pad-m{padding:20px 0}

/* ===== PIED DE PAGE ===== */
.footer{margin-top:60px;padding:56px 0 26px;background:color-mix(in srgb,var(--bgA) 70%,black 30%);border-top:1px solid var(--line);position:relative}
[data-theme="light"] .footer{background:color-mix(in srgb,var(--bgB) 70%,white 30%)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.fbrand p{color:var(--muted);font-size:.88rem;max-width:30rem}
.flogo-img{height:96px;width:auto}
.footer h4{font-size:1rem;margin-bottom:16px}
.flinks{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.88rem}
.flinks.two{grid-template-columns:1fr 1fr}
.flinks a{text-decoration:none;color:var(--muted);display:inline-flex;gap:6px}
.flinks a::before{content:"›";color:var(--accent)}
.flinks a:hover{color:var(--text)}
.pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pay span{font-size:.75rem;font-weight:600;padding:5px 10px;border-radius:8px;border:1px solid var(--line2)}
.fbottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font-size:.8rem;color:var(--muted)}
.social{display:flex;gap:8px}
.social a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);color:var(--muted)}
.social a:hover{color:var(--accent2);border-color:var(--accent2)}
@media (max-width:800px){.fgrid{grid-template-columns:1fr}}

/* ===== PANIER ===== */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;backdrop-filter:blur(3px)}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:85;background:var(--card);border-left:1px solid var(--line2);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .4s cubic-bezier(.2,.7,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.4)}
.cart.open{transform:none}
.cart-h{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line)}
.cart-h h2{font-family:var(--font-h);font-size:1.3rem;margin:0}
.cart-items{flex:1;overflow:auto;padding:12px 20px;display:flex;flex-direction:column;gap:12px}
.ci{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:12px;background:var(--soft)}
.ci img,.ci .ci-ph{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--line)}
.ci b{display:block;font-size:.9rem}.ci small{color:var(--muted)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line2);background:none;cursor:pointer;display:grid;place-items:center}
.qty .ico{width:14px;height:14px}
.cart-f{padding:18px 20px;border-top:1px solid var(--line);overflow:auto;max-height:62vh}
.cart-total{display:flex;justify-content:space-between;font-size:1.1rem;margin-bottom:8px}
.cart-total b{font-family:var(--font-h);color:var(--accent2)}
.cart-note{font-size:.78rem;color:var(--muted);margin:0 0 12px}
.order{display:flex;flex-direction:column;gap:10px}
.cart-empty{color:var(--muted);text-align:center;padding:30px 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;z-index:95;background:var(--card);border:1px solid var(--accent2);padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);transition:all .35s;font-size:.9rem;display:flex;gap:8px;align-items:center}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast .ico{color:var(--green)}

/* ===== EFFETS D'APPARITION ===== */
.fx-on [data-fx]:not([data-fx="none"]) .fx-i{opacity:0;transition:opacity calc(.8s*var(--fx-speed,1)*var(--fx-global)) ease,transform calc(.8s*var(--fx-speed,1)*var(--fx-global)) cubic-bezier(.2,.7,.2,1),filter calc(.8s*var(--fx-speed,1)*var(--fx-global)) ease}
.fx-on .stagger .fx-i{transition-delay:calc(min(var(--i,0),8)*90ms)}
.fx-on [data-fx="fade-up"] .fx-i{transform:translateY(34px)}
.fx-on [data-fx="fade-left"] .fx-i{transform:translateX(44px)}
.fx-on [data-fx="fade-right"] .fx-i{transform:translateX(-44px)}
.fx-on [data-fx="zoom"] .fx-i{transform:scale(.9)}
.fx-on [data-fx="blur"] .fx-i{filter:blur(12px)}
.fx-on [data-fx].in .fx-i{opacity:1;transform:none;filter:none}
.fx-off .accent,.fx-off .mq-track,.fx-off .ring,.fx-off .alabel,.fx-off .pbadge i,.fx-off .btn-primary{animation:none!important}
[data-parallax="1"] .sec-bgimg{inset:-12% 0;will-change:transform}

/* Aperçu dans l'éditeur */
.is-preview [data-edit]{cursor:text;border-radius:4px;transition:outline-color .2s}
.is-preview [data-edit]:hover{outline:1.5px dashed var(--accent2);outline-offset:3px}
.is-preview [data-edit][contenteditable="true"]{outline:2px solid var(--accent2);outline-offset:3px;background:color-mix(in srgb,var(--accent2) 10%,transparent)}
.is-preview .sec.ed-sel{box-shadow:inset 0 0 0 2px var(--accent2)}
.is-preview .sec:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 50%,transparent)}

/* =========================================================
   ANIMATIONS SUPPLÉMENTAIRES (v2)
   ========================================================= */
/* --- Bannière : bulles de produits, curseur machine à écrire, flèche --- */
.sec-hero .wrap{position:static}
.hero-in{position:relative;z-index:2}
.sec-hero.full{min-height:calc(100vh - 70px)}
.bubbles{position:absolute;inset:0;z-index:1;pointer-events:none}
.bub{position:absolute;width:clamp(74px,9vw,128px);aspect-ratio:1;border-radius:50%;pointer-events:auto;translate:var(--px,0) var(--py,0);transition:translate .5s cubic-bezier(.2,.7,.2,1);animation:pop .9s cubic-bezier(.2,1.4,.4,1) backwards,bob calc(5s + var(--dep)*4s) ease-in-out infinite;text-decoration:none}
.bub img{width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 3px color-mix(in srgb,var(--accent2) 45%,transparent);transition:transform .4s}
.bub:hover img{transform:scale(1.12) rotate(8deg)}
.bub span{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);white-space:nowrap;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,black 55%,transparent);color:#fff;opacity:0;transition:opacity .3s}
.bub:hover span{opacity:1}
.bu0{left:5%;top:16%;animation-delay:.2s,0s}.bu1{right:6%;top:13%;animation-delay:.35s,-1s}.bu2{left:10%;bottom:14%;animation-delay:.5s,-2s}.bu3{right:10%;bottom:18%;animation-delay:.65s,-3s}
.bu4,.bu5,.bu6,.bu7{width:clamp(52px,6vw,84px)}
.bu4{left:17%;top:7%;animation-delay:.8s,-1.5s}.bu5{right:17%;top:6%;animation-delay:.95s,-2.5s}
@media (max-width:1300px){.bu4,.bu5{display:none}}.bu6{left:1.5%;top:48%;animation-delay:1.1s,-3.5s}.bu7{right:2%;top:50%;animation-delay:1.25s,-.5s}
@keyframes pop{from{transform:scale(0) rotate(-40deg);opacity:0}}
@keyframes bob{50%{transform:translateY(-16px) rotate(4deg)}}
@media (max-width:900px){.bu4,.bu5,.bu6,.bu7{display:none}.bub{width:62px;opacity:.75}.bu0{top:3%;left:3%}.bu1{top:4%;right:3%}.bu2{bottom:3%;left:4%}.bu3{bottom:4%;right:4%}}
.typed::after{content:"";display:inline-block;width:3px;height:.9em;margin-left:4px;vertical-align:-.05em;background:var(--accent2);animation:caret 1s steps(1) infinite;-webkit-text-fill-color:initial}
@keyframes caret{50%{opacity:0}}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:28px;height:46px;border:2px solid var(--line2);border-radius:16px;z-index:3}
.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:var(--accent2);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* --- Titres mot par mot --- */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block}
.x-titles.fx-on [data-fx] .wi{transform:translateY(110%) rotate(4deg);opacity:0}
.x-titles.fx-on [data-fx].in .wi{animation:wordup .9s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(var(--w)*80ms + .1s)}
@keyframes wordup{to{transform:none;opacity:1}}
.pill-tag{position:relative;overflow:hidden}
.fx-on .pill-tag::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--accent2) 45%,transparent),transparent);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,60%{left:-60%}100%{left:130%}}

/* --- Images qui se dévoilent --- */
.fx-on [data-fx]:not([data-fx="none"]) .itext-img,.fx-on [data-fx]:not([data-fx="none"]) .gitem,.fx-on [data-fx]:not([data-fx="none"]) .post img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) calc(min(var(--i,0),8)*120ms + .15s),opacity .8s,transform .8s}
.fx-on [data-fx].in .itext-img,.fx-on [data-fx].in .gitem,.fx-on [data-fx].in .post img{clip-path:inset(0 0 0 0)}

/* --- Halo qui suit la souris --- */
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent2) 17%,transparent),transparent 65%);opacity:0;transition:opacity .35s;z-index:1}
.spot:hover::after{opacity:1}
.tilt{transform-style:preserve-3d;will-change:transform}
.tilting{transition:transform .12s ease-out!important}

/* --- Boutons : onde au clic --- */
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:ripple .65s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.magnet{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,border-color .25s}

/* --- Traînée d'épices, envol vers le panier --- */
.trail-dot{position:fixed;z-index:99;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50% 0 50% 0;background:var(--c);pointer-events:none;animation:trail .9s ease-out forwards;box-shadow:0 0 8px var(--c)}
@keyframes trail{to{transform:translate(var(--dx),26px) rotate(160deg) scale(.2);opacity:0}}
.fly-img{position:fixed;z-index:120;border-radius:50%;object-fit:cover;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 3px var(--accent2)}
.bump{animation:bump .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{40%{transform:scale(1.22) rotate(-6deg)}}

/* --- Barre de lecture et retour en haut --- */
.read-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--green),var(--accent2),var(--accent));box-shadow:0 0 12px var(--accent2)}
.to-top{position:fixed;right:18px;bottom:18px;z-index:60;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;background:var(--card);color:var(--accent2);display:grid;place-items:center;box-shadow:var(--shadow);opacity:0;transform:translateY(20px) scale(.8);transition:opacity .3s,transform .3s;pointer-events:none}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top svg.ring circle{fill:none;stroke:var(--accent2);stroke-width:3;stroke-dasharray:138;stroke-dashoffset:calc(138 - 138*var(--p,0));stroke-linecap:round}
.to-top .ico{transform:rotate(-45deg)}

/* --- Transition entre les pages --- */
.x-pageTransition.fx-on main,.x-pageTransition.fx-on .footer{animation:pagein .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes pagein{from{opacity:0;transform:translateY(14px)}}
.leaving main,.leaving .footer,.leaving .nav{opacity:0;transform:translateY(-10px);transition:opacity .28s,transform .28s}
.marquee.big{transform:skewX(var(--skew,0deg));transition:transform .4s ease-out}

/* =========================================================
   SECTION « DU CHAMP À L'ASSIETTE »
   ========================================================= */
.tf{display:flex;flex-direction:column;gap:20px;text-align:left}
.tf-pick{display:flex;gap:10px;overflow-x:auto;padding:6px 4px 14px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.tf-chip{flex:none;display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:99px;border:1px solid var(--line);background:var(--card-a);cursor:pointer;color:var(--muted);font-weight:500;font-size:.9rem;transition:all .3s;backdrop-filter:blur(6px)}
.tf-chip img,.tf-dot{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;background:var(--pc)}
.tf-chip:hover{color:var(--text);transform:translateY(-2px)}
.tf-chip.on{color:var(--text);border-color:var(--pc);background:color-mix(in srgb,var(--pc) 16%,var(--card-a));box-shadow:0 0 0 1px var(--pc),0 8px 26px color-mix(in srgb,var(--pc) 38%,transparent)}
.tf-chip.on img{animation:spin 6s linear infinite}
.tf-panel{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:26px;padding:28px;border-radius:calc(var(--r)*1.3);background:radial-gradient(ellipse at 15% 25%,color-mix(in srgb,var(--pc) 24%,transparent),transparent 55%),var(--card-a);border:1px solid color-mix(in srgb,var(--pc) 35%,var(--line));box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden}
.tf-panel[hidden]{display:none}
.tf-visual{display:flex;flex-direction:column;align-items:center;gap:16px}
.tf-orb{position:relative;width:100%;min-height:300px;display:grid;place-items:center}
.tf-orb>*{grid-area:1/1}
.tf-glow{width:62%;aspect-ratio:1;border-radius:50%;background:var(--pc);filter:blur(60px);opacity:.38;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.18);opacity:.55}}
.tf-ring{width:min(300px,84%);aspect-ratio:1;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--pc) 65%,transparent);animation:spin 28s linear infinite}
.tf-ring.r2{width:min(350px,98%);border-style:dotted;border-width:3px;animation-direction:reverse;animation-duration:44s;opacity:.55}
.tf-img{width:min(230px,64%);aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;z-index:2;display:grid;place-items:center;background:var(--soft);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 6px color-mix(in srgb,var(--pc) 32%,transparent),0 0 60px color-mix(in srgb,var(--pc) 40%,transparent)}
.tf-img img{width:100%;height:100%;object-fit:cover;animation:spin 50s linear infinite}
.tf-img .ico{width:60px;height:60px;color:var(--pc)}
.go .tf-img{animation:tfin 1s cubic-bezier(.2,1.2,.3,1) both}
@keyframes tfin{from{transform:scale(.4) rotate(-120deg);opacity:0;filter:blur(8px)}}
.tf-dust{position:relative;width:100%;height:100%;z-index:3;pointer-events:none;align-self:stretch}
.tf-dust i{position:absolute;left:var(--x);bottom:28%;width:var(--s);height:var(--s);border-radius:50%;background:var(--pc);box-shadow:0 0 10px var(--pc);opacity:0;animation:aroma var(--d) ease-in infinite;animation-delay:var(--dl)}
@keyframes aroma{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.9}100%{transform:translate(var(--dx),-210px) scale(1.3);opacity:0}}
.tf-dust b{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4px;border-radius:50% 0;background:var(--pc);animation:burst 1s cubic-bezier(.1,.8,.3,1) forwards;box-shadow:0 0 8px var(--pc)}
@keyframes burst{to{transform:translate(var(--bx),var(--by)) rotate(220deg) scale(.3);opacity:0}}
.tf-route{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}
.tf-from,.tf-to{padding:8px 14px;border-radius:12px;background:var(--soft);border:1px solid var(--line);text-align:center;max-width:46%}
.tf-from small,.tf-to small{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tf-from b,.tf-to b{font-size:.86rem;font-weight:600}
.tf-to{border-color:color-mix(in srgb,var(--pc) 55%,transparent)}
.tf-arrow{color:var(--pc);animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(5px)}}
.tf-steps h3,.tf-use h3{display:flex;align-items:center;gap:8px;font-size:1.05rem;margin-bottom:16px}
.tf-steps h3 .ico,.tf-use h3 .ico{color:var(--pc)}
.tf-steps ol{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:16px}
.tf-steps ol::before{content:"";position:absolute;left:21px;top:12px;bottom:12px;width:2px;background:linear-gradient(var(--pc),color-mix(in srgb,var(--pc) 10%,transparent));transform-origin:top;transform:scaleY(0)}
.go .tf-steps ol::before{animation:line 1.4s ease forwards .2s}
@keyframes line{to{transform:scaleY(1)}}
.tf-steps li{display:flex;gap:14px;align-items:flex-start;position:relative;transition:opacity .4s}
.go .tf-steps li,.go .tf-use li{animation:slidein .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i)*160ms + .25s)}
@keyframes slidein{from{opacity:0;transform:translateX(-18px)}}
.tf-n{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid color-mix(in srgb,var(--pc) 50%,var(--line));color:var(--pc);transition:all .4s}
.tf-n .ico{width:20px;height:20px}
.tf-n em{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.66rem;font-weight:700;background:var(--pc);color:#1a120a}
.tf-steps li b{display:block;font-family:var(--font-h);font-size:.95rem;margin-top:2px}
.tf-steps li p{margin:2px 0 0;font-size:.86rem;color:var(--muted);line-height:1.5}
.tf-steps li.cur .tf-n{background:var(--pc);color:#1a120a;transform:scale(1.12);box-shadow:0 0 0 6px color-mix(in srgb,var(--pc) 22%,transparent),0 0 26px var(--pc)}
.tf-steps li.cur b{color:var(--pc)}
.tf-use{display:flex;flex-direction:column}
.tf-use ul{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.tf-use li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--soft);border:1px solid var(--line);font-size:.9rem;transition:border-color .3s,transform .3s}
.tf-use li:hover{border-color:var(--pc);transform:translateX(4px)}
.tf-use li .ico{color:var(--pc);margin-top:2px}
.tf-meters{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.tf-meter{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--muted)}
.tf-meter i{display:flex;gap:4px}
.tf-meter b{width:24px;height:8px;border-radius:4px;background:var(--line2)}
.tf-meter b.on{background:var(--pc);box-shadow:0 0 8px color-mix(in srgb,var(--pc) 70%,transparent)}
.tf-meter.m-p b.on{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.go .tf-meter b.on{animation:fillb .4s ease backwards;animation-delay:calc(var(--k)*110ms + .7s)}
@keyframes fillb{from{transform:scaleX(0);opacity:0}}
.tf-pair small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tf-pair .chips{margin:0 0 18px}
.tf-buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.tf-buy small{display:block;font-size:.75rem;color:var(--muted)}
.tf-buy b{font-family:var(--font-h);font-size:1.35rem}
.tf-bar{display:flex;align-items:center;gap:10px}
.tf-progress{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.tf-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:4px}
.tf-prev .ico{transform:rotate(180deg)}
.i-pause{width:12px;height:12px;display:block;border-left:4px solid currentColor;border-right:4px solid currentColor}
.tf.paused .i-pause{border:0;width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
@media (max-width:1000px){.tf-panel{grid-template-columns:1fr 1fr}.tf-visual{grid-column:1/-1}}
@media (max-width:680px){.tf-panel{grid-template-columns:1fr;padding:18px}.tf-orb{min-height:250px}}

/* Bandeau animé par JavaScript (fonctionne même si Windows réduit les animations) */
.mq-js .mq-track{animation:none!important;will-change:transform}

/* =========================================================
   FOND « VILLAGE ET CHAMPS » (inspiré du logo)
   ========================================================= */
.bg{--sc-far:color-mix(in srgb,var(--green) 38%,var(--bgB));--sc-vil:color-mix(in srgb,var(--bgA) 80%,black);--sc-mid:color-mix(in srgb,var(--green) 26%,var(--bgA));--sc-fur:color-mix(in srgb,var(--green) 55%,var(--bgB));--sc-near:var(--bgA)}
:root[data-theme="light"] .bg{--sc-far:color-mix(in srgb,var(--green) 30%,var(--bgB));--sc-vil:var(--green);--sc-mid:color-mix(in srgb,var(--green) 85%,black);--sc-fur:color-mix(in srgb,var(--bgA) 75%,var(--green));--sc-near:color-mix(in srgb,var(--green) 95%,black)}
.scene{position:absolute;left:-3%;bottom:0;width:106%;height:40vh;min-height:220px;transform-origin:bottom}
.sc-far path{fill:var(--sc-far);opacity:.75}
.sc-vil{fill:var(--sc-vil)}
.sc-mid>path:first-child{fill:var(--sc-mid)}
.sc-mid .fur{fill:none;stroke:var(--sc-fur);stroke-width:7;stroke-linecap:round;opacity:.8;stroke-dasharray:1600;stroke-dashoffset:1600;animation:furrow 3.5s ease-out .3s forwards}
.sc-mid .fur:nth-child(3){animation-delay:.6s}.sc-mid .fur:nth-child(4){animation-delay:.9s}
@keyframes furrow{to{stroke-dashoffset:0}}
.sc-near path{fill:var(--sc-near);opacity:.95}
.has-scene .scene{animation:scenein 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes scenein{from{transform:translateY(30px);opacity:0}}
.birds{position:absolute;inset:0;pointer-events:none}
.bird{position:absolute;top:18%;left:-60px;width:26px;height:10px;color:var(--sc-vil);animation:fly-across 38s linear infinite}
.bird:nth-child(2){top:24%;animation-duration:46s;animation-delay:-14s;transform:scale(.7)}
.bird:nth-child(3){top:14%;animation-duration:52s;animation-delay:-30s;transform:scale(.55)}
.bird::before,.bird::after{content:"";position:absolute;top:0;width:13px;height:10px;border-top:2.5px solid currentColor;border-radius:50% 50% 0 0;animation:flap .5s ease-in-out infinite alternate}
.bird::before{left:0;transform-origin:right bottom}.bird::after{right:0;transform-origin:left bottom}
:root:not([data-theme="light"]) .bird{color:color-mix(in srgb,var(--text) 55%,transparent)}
@keyframes fly-across{0%{left:-60px;margin-top:0}50%{margin-top:-30px}100%{left:calc(100% + 60px);margin-top:10px}}
@keyframes flap{to{transform:scaleY(.4) rotate(8deg)}}
.spice{position:absolute;bottom:-60px;width:var(--s);height:var(--s);opacity:0;animation:rise calc(var(--d)*var(--fx-global)) linear infinite;animation-delay:var(--dl)}
.spice svg{width:100%;height:100%;animation:sway 3.4s ease-in-out infinite alternate;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
@media (prefers-reduced-motion:reduce){html:not(.x-force) .sc-mid .fur{stroke-dashoffset:0}}

/* Animations du paysage : nuages, fumée de cheminée, fenêtres, parallaxe */
.clouds{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;left:-30%;width:260px;height:60px;border-radius:60px;background:color-mix(in srgb,var(--text) 9%,transparent);filter:blur(6px);animation:cloud 90s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud::before{width:110px;height:90px;left:40px;top:-40px}.cloud::after{width:80px;height:70px;left:130px;top:-28px}
:root[data-theme="light"] .cloud{background:rgba(255,255,255,.7);filter:blur(3px)}
.c1{top:9%}.c2{top:20%;transform:scale(.7);animation-duration:120s;animation-delay:-50s}.c3{top:4%;transform:scale(.5);animation-duration:150s;animation-delay:-100s}
@keyframes cloud{to{left:110%}}
.sc-smoke circle{fill:color-mix(in srgb,var(--text) 35%,transparent);animation:smoke 4s ease-out infinite;transform-box:fill-box;transform-origin:center}
:root[data-theme="light"] .sc-smoke circle{fill:rgba(90,90,90,.35)}
.sc-smoke circle:nth-child(2){animation-delay:-1.3s}.sc-smoke circle:nth-child(3){animation-delay:-2.6s}
@keyframes smoke{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:.9}100%{transform:translate(18px,-46px) scale(2.6);opacity:0}}
.sc-win rect{fill:#f2c55c;opacity:0;animation:winlight 7s ease-in-out infinite}
.sc-win rect:nth-child(2n){animation-delay:-2.5s}.sc-win rect:nth-child(3n){animation-delay:-4.5s}
:root[data-theme="light"] .sc-win rect{display:none}
@keyframes winlight{0%,100%{opacity:.25}50%{opacity:1;filter:drop-shadow(0 0 4px #f2c55c)}}
.scene g{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sc-mid{animation:breeze 10s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes breeze{to{transform:translateX(-12px) scaleY(1.04)}}

/* Carte produit cliquable -> fiche « Comment c'est fait » */
.pcard.go-tf{cursor:pointer}
.pgo{position:absolute;left:50%;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:.78rem;font-weight:600;padding:7px 12px;border-radius:99px;background:color-mix(in srgb,black 60%,transparent);color:#fff;border:1px solid color-mix(in srgb,var(--accent2) 55%,transparent);backdrop-filter:blur(6px);opacity:0;transform:translate(-50%,10px);transition:opacity .3s,transform .3s}
.pgo .ico{width:14px;height:14px;color:var(--accent2)}
.pcard.go-tf:hover .pgo,.pcard.go-tf:focus-visible .pgo{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.pgo{opacity:1;transform:translate(-50%,0);font-size:.7rem;padding:5px 10px}}

/* =========================================================
   FOND PHOTO (coucher de soleil sur les champs)
   ========================================================= */
.bg-photo{position:absolute;inset:-3%;background-position:center 60%;background-size:cover;background-repeat:no-repeat}
.bg-photo.kb{animation:kenburns 45s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.08) translate(-1.5%,-1%)}100%{transform:scale(1.14) translate(1.5%,-2%)}}
.bg-shade{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bgA) calc(var(--ov) - 10%),transparent) 0%,color-mix(in srgb,var(--bgA) var(--ov),transparent) 45%,color-mix(in srgb,var(--bgA) calc(var(--ov) + 25%),transparent) 100%)}
:root[data-theme="light"] .bg-shade{background:linear-gradient(180deg,color-mix(in srgb,var(--bgA) calc(var(--ov) + 5%),transparent),color-mix(in srgb,var(--bgA) calc(var(--ov) + 20%),transparent))}
.bg-sun{position:absolute;left:24%;top:37%;width:34vmax;height:34vmax;margin:-17vmax 0 0 -17vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.55),rgba(255,170,80,.18) 35%,transparent 65%);mix-blend-mode:screen;animation:sunpulse 6s ease-in-out infinite}
@keyframes sunpulse{50%{transform:scale(1.15);opacity:.75}}
.bg-rays{position:absolute;left:24%;top:37%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;background:repeating-conic-gradient(from 0deg,rgba(255,220,150,.07) 0deg 4deg,transparent 4deg 14deg);mask-image:radial-gradient(circle,#000 0,transparent 45%);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 45%);mix-blend-mode:screen;animation:spin 120s linear infinite}
.has-photo .grain{opacity:.07}
.has-photo .fly{background:#ffd88a;box-shadow:0 0 12px 4px rgba(255,200,110,.7)}
@media (max-width:700px){.bg-photo{background-position:30% 60%}.bg-sun,.bg-rays{left:40%}}
@media (prefers-reduced-motion:reduce){html:not(.x-force) .bg-photo{animation:none}}
.pgo em{font-family:var(--font-a);font-style:italic;font-weight:600;font-size:1.08rem;letter-spacing:.01em;color:#ffe2a6;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pgo{padding:7px 14px;gap:8px}

/* =========================================================
   FORMULAIRE D'AVIS (étoiles sur 5)
   ========================================================= */
.rform{max-width:640px;margin:0 auto}
.star-pick{border:0;margin:0;padding:0;text-align:center}
.star-pick legend{font-weight:600;color:var(--muted);font-size:.9rem;margin:0 auto 6px}
.sp-row{display:inline-flex;flex-direction:row-reverse;gap:4px}
.sp-row input{position:absolute;opacity:0;pointer-events:none}
.sp-row label{cursor:pointer;color:var(--line2);transition:color .15s,transform .2s;display:inline-flex}
.sp-row label .ico{width:42px;height:42px;fill:currentColor;stroke:none}
.sp-row label:hover,.sp-row label:hover~label,.sp-row input:checked~label{color:var(--accent2)}
.sp-row label:hover{transform:scale(1.18) rotate(-8deg)}
.sp-row input:focus-visible+label{outline:2px solid var(--accent2);outline-offset:3px;border-radius:8px}
.sp-row input:checked+label{animation:starpop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes starpop{50%{transform:scale(1.35) rotate(12deg)}}
.sp-txt{display:block;margin-top:4px;font-family:var(--font-a);font-style:italic;color:var(--accent2);font-size:1.05rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rf-note{color:var(--muted);font-size:.8rem;text-align:center}
.rform .btn{align-self:center}
.sp-row:hover input:checked~label{color:var(--line2)}
.sp-row:hover label:hover,.sp-row:hover label:hover~label{color:var(--accent2)}
.rv-mention{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px auto 0;font-size:.78rem;color:var(--muted);text-align:center}
.rv-mention .ico{width:14px;height:14px;color:var(--green)}

/* =========================================================
   PHOTOS DES ÉTAPES (« Du champ à l'assiette »)
   ========================================================= */
.tf-img img{animation:none}
.tf-img>.tf-base,.tf-img>.tf-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.18) rotate(-4deg);filter:saturate(.6) blur(6px);transition:opacity .9s ease,transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1s}
.tf-img>span.tf-base{display:grid;place-items:center}
.tf-img>.on{opacity:1;transform:scale(1);filter:none;animation:kbshot 9s ease-in-out forwards}
@keyframes kbshot{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-1%)}}
.tf-flash{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 60%);opacity:0;z-index:3}
.tf-flash.go{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
.tf-cap{display:inline-flex;align-items:center;gap:10px;margin-top:-6px;padding:7px 16px 7px 7px;border-radius:99px;background:color-mix(in srgb,black 45%,transparent);border:1px solid color-mix(in srgb,var(--pc) 55%,transparent);backdrop-filter:blur(6px);font-weight:600;font-size:.9rem}
.tf-cap em{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pc);color:#1a120a;font-style:normal;font-size:.8rem;font-weight:700}
.tf-cap.pop{animation:cappop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes cappop{0%{transform:translateY(8px);opacity:0}}
.tf-steps li{cursor:pointer}
.tf-steps li:hover b{color:var(--pc)}
.tf-n.has-ph{overflow:visible;padding:0;isolation:isolate}
.tf-n.has-ph img{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none;border-radius:50%;object-fit:cover;object-position:center;filter:grayscale(.5) brightness(.75);transition:filter .4s}
.tf-steps li.cur .tf-n.has-ph{background:var(--card)}
.tf-steps li.cur .tf-n.has-ph img{filter:none}
.tf-n.has-ph em{z-index:2}
.tf-orb>.tf-cap{align-self:end;justify-self:center;z-index:4;margin:0 0 6px}

/* ---- CLS-ENGINE : avis qui defilent + bouton de langue ---- */
.tmarq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ttrack{display:flex;gap:18px;width:max-content;animation:tmq var(--mq,40s) linear infinite}
.tmarq:hover .ttrack{animation-play-state:paused}
.ttrack .tcard{width:min(340px,80vw);flex:none;opacity:1!important;transform:none!important}
@keyframes tmq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ttrack{animation:none;flex-wrap:wrap;width:auto}}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);color:var(--text);font:700 .8rem var(--font-h);letter-spacing:.08em;text-decoration:none;transition:border-color .2s,color .2s,transform .2s}
.lang-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}

/* ---- Statut / compatibilite / tableau ---- */
.st-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 24px;border-radius:var(--radius,14px);border:1px solid color-mix(in srgb,var(--sc) 45%,transparent);background:color-mix(in srgb,var(--sc) 12%,transparent);text-align:left}
.st-ok{--sc:#22c55e}.st-maint{--sc:#f59e0b}.st-issue{--sc:#f97316}.st-down{--sc:#ef4444}
.st-dot{width:14px;height:14px;border-radius:50%;background:var(--sc);box-shadow:0 0 0 0 var(--sc);animation:stp 2s infinite;flex:none}
@keyframes stp{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.st-msg{flex:1;min-width:200px}.st-msg b{font:700 1.15rem var(--font-h)}.st-msg p{margin:.25em 0 0;opacity:.8}
.st-upd{opacity:.75}
.st-block{margin-top:36px;text-align:left}
.st-bhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.st-bhead h3{margin:0;font:700 1.3rem var(--font-h)}
.st-search{min-width:220px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.st-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px}
.st-it{display:flex;flex-direction:column;gap:2px;min-width:0}.st-it small,.st-it em{opacity:.65;font-size:.82rem}
.st-badge{flex:none;padding:4px 10px;border-radius:999px;font:700 .72rem var(--font-h);letter-spacing:.04em;text-transform:uppercase}
.st-b-ok{background:#22c55e22;color:#4ade80}.st-b-maint{background:#f59e0b22;color:#fbbf24}.st-b-soon{background:#60a5fa22;color:#93c5fd}.st-b-no{background:#ef444422;color:#f87171}
.st-tl{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line)}
.st-up{position:relative;padding:0 0 22px 18px}.st-up:before{content:"";position:absolute;left:-26px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.st-up time{margin-left:10px;opacity:.6;font-size:.85rem}.st-up b{display:block;margin-top:6px}.st-up p{margin:.3em 0 0;opacity:.8}
.st-tag{padding:3px 9px;border-radius:999px;font:700 .7rem var(--font-h);text-transform:uppercase}
.st-t-new{background:#22c55e22;color:#4ade80}.st-t-fix{background:#f59e0b22;color:#fbbf24}.st-t-info{background:#60a5fa22;color:#93c5fd}
.st-item.is-off{display:none}
.tbl-wrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;text-align:left}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--line)}.tbl th{font:700 .85rem var(--font-h);text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}