:root{--blue:#2150e8;--blue-deep:#173dbb;--blue-dark:#122969;--navy:#17223c;--cream:#f4f2ec;--cream-dark:#eae7df;--white:#fff;--muted:#6f7482;--line:#d9dadc;--lime:#d5f09b;--shadow:0 24px 64px rgba(18,38,91,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--navy);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}body:has(dialog[open]){overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,Arial,sans-serif;letter-spacing:-.06em}h1 em,h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.06em}.page-shell{width:min(100% - 100px,1500px);margin-inline:auto}.skip-link{position:absolute;top:-100px;left:20px;z-index:100;background:#fff;padding:12px}.skip-link:focus{top:10px}.announcement{height:33px;background:var(--blue-dark);color:#fff;display:flex;gap:9px;align-items:center;justify-content:center;text-align:center;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em}.announcement-dot{width:6px;height:6px;background:var(--lime);border-radius:50%}.site-header{background:var(--cream);position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(20,40,91,.1)}.header-inner{height:82px;display:flex;justify-content:space-between;align-items:center;gap:30px}.brand{display:inline-flex;align-items:center;gap:9px;font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:28px;letter-spacing:-.085em;white-space:nowrap}.brand-mark{width:32px;height:32px;background:var(--blue);color:#fff;border-radius:8px;display:grid;place-items:center;font-size:28px;line-height:1;position:relative;letter-spacing:-.1em;padding-right:5px;padding-bottom:4px}.brand-mark span{position:absolute;color:var(--lime);font-size:10px;right:4px;top:5px}.brand-period{color:var(--blue)}.desktop-nav{display:flex;align-items:center;gap:35px;color:#3f4a62;font-size:13px;font-weight:700}.desktop-nav a:hover,.underlined-link:hover,.text-link:hover{color:var(--blue)}.header-actions{display:flex;align-items:center;gap:20px}.header-selection{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}.header-selection strong{font:700 11px Manrope,Arial,sans-serif;width:22px;height:22px;display:grid;place-items:center;background:#e5e9f7;color:var(--blue);border-radius:50%}.button{border:0;display:inline-flex;justify-content:space-between;align-items:center;gap:27px;font-size:13px;font-weight:800;min-height:55px;padding:0 23px;border-radius:4px;transition:background .2s,transform .2s,color .2s}.button:hover{transform:translateY(-2px)}.button-small{min-height:42px;padding:0 17px;gap:20px}.button-dark{background:var(--navy);color:#fff}.button-dark:hover{background:var(--blue)}.menu-toggle{display:none;border:0;background:transparent;width:36px;padding:7px}.menu-toggle span{display:block;width:100%;height:2px;background:var(--navy);margin:6px 0}.mobile-nav{display:none}
.hero{display:grid;grid-template-columns:1fr .95fr;min-height:675px;position:relative;overflow:hidden}.hero-copy{background:var(--blue);color:#fff;margin-left:calc((100vw - min(100vw - 100px,1500px)) / -2);padding:104px 50px 42px max(50px,calc((100vw - min(100vw - 100px,1500px)) / 2));display:flex;flex-direction:column;align-items:flex-start;position:relative}.hero-copy:after{content:'✦';position:absolute;color:#7795f4;opacity:.3;font-size:260px;line-height:1;top:80px;right:-65px;pointer-events:none}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:11px}.eyebrow-line{height:1px;width:29px;background:var(--lime)}.hero h1{position:relative;z-index:1;font-size:clamp(65px,7.2vw,116px);line-height:1.02;margin:42px 0 29px;white-space:nowrap}.hero h1 em{color:var(--lime)}.hero-lead{position:relative;z-index:1;font-size:16px;line-height:1.7;max-width:440px;color:#dce5ff}.hero-cta{display:flex;align-items:center;gap:26px;margin-top:30px;position:relative;z-index:1}.button-light{background:#fff;color:var(--blue-dark)}.button-light:hover{background:var(--lime)}.text-link{color:#fff;font-size:13px;font-weight:700;white-space:nowrap}.text-link:hover{color:var(--lime)}.hero-aside{display:flex;gap:22px;align-items:center;font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin-top:auto;padding-top:45px;color:#c7d6ff}.hero-aside span:first-child{border:1px solid rgba(255,255,255,.5);padding:11px}.hero-art{position:relative;background:#e9e8e0;margin-right:calc((100vw - min(100vw - 100px,1500px)) / -2);min-height:675px;overflow:hidden;display:flex;align-items:center;justify-content:center}.hero-art:before{content:'';position:absolute;width:650px;height:650px;border-radius:50%;background:#f5f3eb;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-orbit{position:absolute;width:500px;height:500px;border:1px solid rgba(46,72,132,.13);border-radius:50%;left:50%;top:51%;transform:translate(-50%,-50%)}.orbit-two{width:650px;height:650px}.hero-watermark{position:absolute;font:bold 220px Manrope,Arial,sans-serif;letter-spacing:-.22em;color:#dde0de;left:10px;top:3px;line-height:1}.hero-watermark span{position:relative;left:23px}.hero-box{position:absolute;width:35%;max-width:280px;filter:drop-shadow(0 30px 28px rgba(23,39,89,.17))}.hero-box-front{width:40%;max-width:320px;z-index:4;bottom:60px;left:31%;transform:rotate(-3deg)}.hero-box-back{z-index:2;left:6%;bottom:80px;transform:rotate(-15deg)}.hero-box-side{z-index:3;left:58%;bottom:80px;transform:rotate(14deg)}.art-caption{position:absolute;bottom:29px;right:45px;font-size:9px;line-height:1.5;letter-spacing:.13em;font-weight:800;color:#52607d;text-align:right;z-index:5}.ticker{background:var(--blue-dark);overflow:hidden;color:#eef2ff}.ticker-inner{min-width:max-content;height:55px;display:flex;align-items:center;gap:45px;padding-inline:45px;font-size:10px;font-weight:800;letter-spacing:.23em}.ticker i{font-style:normal;color:var(--lime);font-size:15px}
.section{padding-block:120px}.section-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}.eyebrow-blue{color:var(--blue)}.section h2,.pro-section h2,.request-section h2,.faq-section h2{font-size:clamp(48px,5.4vw,88px);line-height:1.08;margin:25px 0 0}.section h2 em,.request-section h2 em,.faq-section h2 em{color:var(--blue)}.section-intro{padding-bottom:5px;max-width:380px;justify-self:end}.section-intro p:first-child{font-size:16px;line-height:1.75}.provisional-note,.approach-caveat{font-size:12px;line-height:1.6;color:var(--muted);border-left:2px solid var(--blue);padding-left:14px}.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:75px 0 25px;border-bottom:1px solid var(--line)}.filter-list{display:flex;gap:30px;flex-wrap:wrap}.filter{border:0;background:none;color:#7e8490;font-size:13px;font-weight:800;padding:0 0 18px;border-bottom:2px solid transparent}.filter.active{color:var(--blue);border-color:var(--blue)}.filter:hover{color:var(--blue)}.filter sup{font-size:9px;margin-left:3px}.result-count{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;margin-bottom:18px}.product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.product-card{background:#fff;min-width:0;position:relative;display:flex;flex-direction:column;border:1px solid #eeeef0;transition:transform .2s,box-shadow .2s}.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.product-media{height:320px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--media)}.product-media:before{content:'';width:250px;height:250px;border:1px solid rgba(29,59,140,.16);border-radius:50%;position:absolute}.product-media:after{content:'';width:190px;height:190px;border:1px solid rgba(29,59,140,.1);border-radius:50%;position:absolute}.product-media img{width:75%;height:90%;object-fit:contain;z-index:1;transition:transform .3s}.product-card:hover .product-media img{transform:scale(1.07) rotate(-2deg)}.product-index{position:absolute;top:18px;left:18px;font-size:10px;font-weight:800;letter-spacing:.1em;color:#43516c;z-index:2}.product-quick{position:absolute;top:13px;right:13px;border:1px solid rgba(20,47,99,.2);background:rgba(255,255,255,.7);border-radius:50%;width:33px;height:33px;font-size:19px;line-height:1;z-index:3;color:var(--blue)}.product-info{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column}.product-family{color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0 0 9px}.product-info h3{font-size:18px;letter-spacing:-.04em;margin:0 0 7px}.product-notes{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 20px}.product-actions{display:flex;align-items:center;justify-content:space-between;margin-top:auto;border-top:1px solid #ecedf0;padding-top:14px}.product-detail,.product-select{border:0;background:none;font-size:11px;font-weight:800;padding:0}.product-detail{text-decoration:underline;text-underline-offset:3px}.product-select{color:var(--blue)}.product-select[aria-pressed=true]{color:#39653a}.collection-footer{display:flex;justify-content:space-between;gap:25px;align-items:center;border-top:1px solid var(--line);padding-top:35px;margin-top:40px}.collection-footer p{font-size:15px;margin:0}.underlined-link{font-size:13px;font-weight:800;border-bottom:1px solid;padding-bottom:5px;white-space:nowrap}
.pro-section{background:#182b5b;color:#fff;padding:125px 0;position:relative;overflow:hidden}.pro-section:before{content:'✦';position:absolute;font-size:600px;line-height:1;left:-240px;bottom:-270px;color:#243a72;opacity:.36}.pro-grid{display:grid;grid-template-columns:1fr .9fr;gap:9%;position:relative}.pro-section h2{margin-bottom:35px}.pro-section h2 em{color:var(--lime)}.pro-copy>p:not(.eyebrow){font-size:16px;line-height:1.75;color:#c2cce1;max-width:480px;margin-bottom:35px}.button-outline-light{border:1px solid rgba(255,255,255,.65);color:#fff}.button-outline-light:hover{background:#fff;color:var(--blue-dark)}.pro-features{padding-top:30px}.pro-features article{display:grid;grid-template-columns:35px 1fr 16px;gap:18px;padding:28px 0;border-top:1px solid rgba(255,255,255,.25)}.pro-features article:last-child{border-bottom:1px solid rgba(255,255,255,.25)}.feature-no{font-size:10px;color:var(--lime);padding-top:8px}.pro-features h3{font-size:20px;letter-spacing:-.04em;margin:0 0 8px}.pro-features p{font-size:13px;line-height:1.6;color:#bdc7dd;margin:0}.approach-overline{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;font-size:10px;letter-spacing:.15em;font-weight:800;color:var(--blue)}.approach-grid{display:grid;grid-template-columns:1fr .8fr;gap:11%;padding-top:55px}.approach-grid h2{margin:0}.approach-grid>div>p:first-child{font-size:18px;line-height:1.7;max-width:510px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:50px 0 30px}.facts div{border-top:2px solid var(--blue);padding-top:15px;display:flex;flex-direction:column;gap:10px}.facts span{font-size:10px;color:var(--blue);font-weight:800}.facts strong{font:800 clamp(16px,2vw,24px) Manrope,Arial,sans-serif;letter-spacing:-.05em}.facts small{font-size:10px;color:var(--muted);line-height:1.4}.approach-caveat{max-width:500px}.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:0 0 30px;max-width:520px}.price-card{border-top:2px solid var(--gold);padding-top:15px;display:flex;flex-direction:column;gap:8px}.price-card .price-no{font-size:10px;color:var(--gold);font-weight:800}.price-card strong{font:800 12px/1.3 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.price-value{font:800 clamp(24px,3.2vw,34px) Manrope,Arial,sans-serif;letter-spacing:-.05em;color:var(--white)}.price-card small{font-size:10px;color:var(--muted);line-height:1.4}.price-ttc{font-size:.42em;font-weight:800;letter-spacing:.1em;color:var(--gold);vertical-align:super;margin-left:4px}@media (max-width:720px){.price-grid{grid-template-columns:1fr;max-width:none}}
.request-section{padding:120px 0;background:#e7e9e7}.request-grid{display:grid;grid-template-columns:.85fr 1fr;gap:12%;align-items:start}.request-copy>p:not(.eyebrow){font-size:15px;line-height:1.7;max-width:420px;margin:30px 0 35px}.selection-list{max-width:460px;min-height:140px;border-top:1px solid #bfc7ca;margin-bottom:25px}.selection-empty{font-size:13px;color:var(--muted);padding:25px 0}.selection-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #cbd0d0;font-size:14px;font-weight:700}.selection-item button{border:0;background:none;color:var(--blue);font-size:20px}.request-card{background:#fff;padding:35px 42px 40px;box-shadow:var(--shadow)}.request-card-top{display:flex;justify-content:space-between;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.15em}.request-card h3{font-size:clamp(33px,3vw,49px);line-height:1.15;margin:30px 0 15px}.request-card>p{font-size:12px;line-height:1.6;color:var(--muted);max-width:420px;margin-bottom:27px}.request-card label{display:block;font-size:11px;font-weight:800;margin-bottom:7px}.request-card label span{color:var(--blue)}.request-card label .optional{font-weight:400;color:var(--muted)}.request-card input,.request-card textarea{width:100%;border:1px solid #d9dce2;background:#f8f9fa;color:var(--navy);border-radius:2px;padding:13px 12px;outline:none;font-size:13px;display:block;margin-bottom:19px}.request-card input:focus,.request-card textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(33,80,232,.13)}.request-card textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.button-submit{background:var(--blue);color:#fff;width:100%;margin-top:6px}.button-submit:hover{background:var(--blue-dark)}.form-note{font-size:10px;line-height:1.5;color:var(--muted);margin:13px 0 0}.form-status{font-size:12px;font-weight:700;color:#365e3e;margin:12px 0 0}.faq-section{display:grid;grid-template-columns:.75fr 1fr;gap:10%;padding-block:120px}.faq-section h2{margin-top:25px}.faq-items{border-top:1px solid var(--line)}.faq-items details{border-bottom:1px solid var(--line)}.faq-items summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:15px;font-weight:800;padding:24px 0}.faq-items summary::-webkit-details-marker{display:none}.faq-items summary span{font-size:24px;font-weight:400;color:var(--blue);transition:transform .2s}.faq-items details[open] summary span{transform:rotate(45deg)}.faq-items p{font-size:13px;line-height:1.7;color:var(--muted);max-width:620px;padding-right:35px;margin-bottom:24px}.site-footer{background:#131c32;color:#fff;padding:65px 0 24px}.footer-top,.footer-bottom{display:flex;justify-content:space-between;gap:25px}.brand-footer{color:#fff}.footer-top p{font-size:13px;line-height:1.7;color:#b5bfd0;margin:19px 0 0}.back-top{font-size:12px;font-weight:800;border-bottom:1px solid #8e9bb5;height:fit-content;padding-bottom:8px}.footer-bottom{border-top:1px solid #354158;margin-top:65px;padding-top:18px;font-size:10px;color:#97a2b6;line-height:1.5}
dialog{border:0;padding:0;max-width:min(900px,calc(100vw - 32px));width:100%;box-shadow:0 45px 100px rgba(0,0,0,.25);color:var(--navy)}dialog::backdrop{background:rgba(8,16,42,.7)}.dialog-layout{display:grid;grid-template-columns:1fr 1fr}.dialog-art{background:#e6e8e8;display:grid;place-items:center;min-height:470px}.dialog-art img{max-height:420px}.dialog-body{padding:55px 50px;position:relative}.dialog-close{position:absolute;z-index:2;right:18px;top:14px;border:0;background:none;font-size:30px;line-height:1;color:var(--navy)}.dialog-number{display:block;color:var(--blue);font-size:10px;font-weight:800;margin-bottom:65px}.dialog-body h2{font-size:45px;line-height:1.1;margin:15px 0}.dialog-family{color:var(--blue);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.dialog-notes{font-size:15px;line-height:1.6}.dialog-facts{display:flex;gap:7px;flex-wrap:wrap;margin:30px 0}.dialog-facts span{border:1px solid var(--line);border-radius:30px;padding:7px 9px;font-size:10px;font-weight:800}.dialog-disclaimer{font-size:11px;color:var(--muted);line-height:1.5}.button-dialog{background:var(--blue);color:#fff;margin-top:15px}.button-dialog:hover{background:var(--blue-dark)}:focus-visible{outline:3px solid #9cbdff;outline-offset:3px}
@media(max-width:1250px){.page-shell{width:min(100% - 60px,1500px)}.hero-copy{margin-left:-30px;padding-left:30px}.hero-art{margin-right:-30px}.hero h1{font-size:clamp(60px,6.5vw,95px)}.product-grid{grid-template-columns:repeat(4,1fr)}.desktop-nav{gap:20px}.header-actions{gap:13px}}
@media(max-width:900px){.page-shell{width:min(100% - 40px,1500px)}.desktop-nav,.header-actions .button-small{display:none}.header-inner{height:68px}.header-actions{margin-left:auto}.menu-toggle{display:block}.mobile-nav:not([hidden]){display:flex;flex-direction:column;padding:12px 20px 25px;gap:18px;box-shadow:0 20px 24px rgba(20,35,75,.13)}.mobile-nav a{font-size:14px;font-weight:800}.hero{grid-template-columns:1fr}.hero-copy{margin:0 -20px;padding:72px 20px 50px;min-height:500px}.hero-copy:after{right:0}.hero-art{margin:0 -20px;min-height:480px}.hero-art:before{width:560px;height:560px}.hero-box-front{bottom:28px}.hero-box-back,.hero-box-side{bottom:38px}.section{padding-block:85px}.section-heading,.approach-grid,.pro-grid,.request-grid,.faq-section{grid-template-columns:1fr;gap:45px}.section-intro{justify-self:start}.filter-bar{margin-top:50px}.product-grid{grid-template-columns:repeat(3,1fr)}.pro-section{padding:85px 0}.pro-features{padding:0}.request-section,.faq-section{padding-block:85px}}
@media(max-width:620px){.announcement{font-size:9px;height:32px;letter-spacing:.08em}.brand{font-size:24px}.brand-mark{width:29px;height:29px;font-size:25px}.header-selection span{display:none}.hero-copy{min-height:490px;padding-top:62px}.hero h1{font-size:clamp(56px,12vw,80px);margin:33px 0 22px}.hero-lead{font-size:14px}.hero-cta{flex-wrap:wrap;gap:18px}.hero-aside{font-size:9px}.hero-art{min-height:400px}.hero-art:before{width:470px;height:470px}.hero-orbit{width:350px;height:350px}.orbit-two{width:460px;height:460px}.hero-box-front{width:50%;left:27%;bottom:27px}.hero-box-back{width:42%;left:0;bottom:38px}.hero-box-side{width:42%;left:62%;bottom:40px}.art-caption{font-size:7px;right:20px;bottom:12px}.section h2,.pro-section h2,.request-section h2,.faq-section h2{font-size:clamp(47px,11vw,65px)}.section-heading{gap:28px}.section-intro p:first-child{font-size:14px}.filter-bar{align-items:flex-end;margin-top:43px}.filter-list{gap:15px}.filter{font-size:11px;padding-bottom:12px}.result-count{font-size:10px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.product-media{height:215px}.product-media img{width:85%}.product-info{padding:13px 10px 15px}.product-info h3{font-size:16px}.product-family{font-size:8px}.product-notes{font-size:10px}.product-actions{gap:6px}.product-detail,.product-select{font-size:9px}.collection-footer{align-items:flex-start;flex-direction:column}.collection-footer p{font-size:13px}.pro-features article{padding:22px 0}.approach-grid{padding-top:32px}.approach-grid>div>p:first-child{font-size:16px}.facts{gap:8px}.facts strong{font-size:17px}.request-card{padding:25px 18px}.form-row{grid-template-columns:1fr;gap:0}.faq-section{gap:25px}.faq-items summary{font-size:14px}.footer-top,.footer-bottom{flex-direction:column}.footer-bottom{margin-top:45px}.dialog-layout{grid-template-columns:1fr}.dialog-art{min-height:230px}.dialog-art img{max-height:220px}.dialog-body{padding:28px 24px}.dialog-number{margin-bottom:12px}.dialog-body h2{font-size:34px}.dialog-close{right:10px;top:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* ============================================================
   Blue Magix — integration des visuels reels (13 references)
   Les packagings sont sombres et neon : on les pose sur un fond
   profond plutot que sur les pastels de la version provisoire.
   ============================================================ */

:root{
  --bm-navy:#070b1c;
  --bm-navy-2:#0d1430;
}

.product-media{
  background:
    radial-gradient(120% 90% at 50% 0%, #1b2550 0%, var(--bm-navy) 62%, #04060f 100%);
  height:400px;
}
/* les cercles decoratifs servaient aux placeholders SVG : deconge */
.product-media:before,.product-media:after{display:none}

.product-media img{
  width:74%;
  height:90%;
  object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));
}
.product-card:hover .product-media img{transform:scale(1.06) translateY(-4px)}

.product-index{
  background:rgba(4,6,15,.62);
  border:1px solid rgba(120,160,255,.3);
  color:#cfe0ff;
}

.product-quick{
  background:rgba(4,6,15,.62);
  border:1px solid rgba(120,160,255,.34);
  color:#eaf1ff;
}
.product-quick:hover{background:#1d3b8c;color:#fff}

.product-specs{
  display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px;
}
.product-specs span{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);border:1px solid var(--line);
  border-radius:30px;padding:4px 9px;
}

/* modale : carton + blister */
.dialog-art{
  background:linear-gradient(180deg,#111a3d 0%,#070b1c 100%);
  display:flex;align-items:center;justify-content:center;gap:18px;padding:22px 18px;
}
.dialog-art img{max-height:430px;max-width:46%;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.5))}
.dialog-art .dialog-front{max-height:430px}

@media (max-width:720px){
  .dialog-art img,.dialog-art .dialog-front{max-height:230px;max-width:44%}
}

/* bandeau legal */
.legal-banner{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  margin:0 0 26px;padding:14px 16px;
  background:#f4f6fd;border:1px solid var(--line);border-left:3px solid var(--blue);
  font-size:11.5px;line-height:1.6;color:var(--muted);
}
.legal-banner strong{
  font-size:13px;color:var(--blue);letter-spacing:.06em;white-space:nowrap;
}

/* ============================================================
   Hero : photo de gamme reelle (plus de boites SVG empilees)
   ============================================================ */

.hero-art{background:#05070f;padding:0}
.hero-art:before,.hero-orbit,.hero-watermark,.hero-box{display:none !important}

.hero-picture{display:block;width:100%;height:100%}
.hero-picture img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
}
@media (max-width:860px){
  .hero-picture img{object-position:center}
}


/* ============================================================
   AMBIANCE — le produit dans son univers (planche de 8)
   ============================================================ */
.ambiance{background:var(--bm-navy);color:#fff;padding:90px 0}
.ambiance-grid-wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:center}
.ambiance .eyebrow{color:#7f9bf5}
.ambiance h2{font-size:clamp(28px,3.6vw,50px);line-height:1.08;margin:16px 0 20px}
.ambiance h2 em{font-style:italic;color:#8fb0ff}
.ambiance p{color:#b9c8ef;font-size:14px;line-height:1.7;margin:0 0 26px}
.ambiance-list{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ambiance-list li{
  font-size:12.5px;color:#aebfe8;padding:11px 14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(140,170,255,.14);
  border-radius:3px;
}
.ambiance-list strong{color:#fff;font-weight:700;margin-right:8px}
.ambiance-grid{
  width:100%;display:block;border-radius:4px;
  box-shadow:0 34px 70px rgba(0,0,0,.6);
}

/* ============================================================
   SAVEUR VEDETTE — affiche carree
   ============================================================ */
.spotlight{background:#f4f3ee;padding:90px 0}
.spotlight-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.spotlight img{
  width:100%;display:block;border-radius:5px;
  box-shadow:0 28px 56px rgba(10,18,45,.22);
}
.spotlight h2{font-size:clamp(28px,3.6vw,50px);line-height:1.08;margin:16px 0 20px}
.spotlight h2 em{font-style:italic;color:var(--blue)}
.spotlight p{font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 28px;max-width:420px}
.spotlight-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
.spotlight-facts div{border-top:1px solid var(--line);padding-top:12px}
.spotlight-facts span{
  display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;
}
.spotlight-facts strong{font-size:17px;color:var(--navy);font-weight:800}

/* empilement mobile */
@media (max-width:860px){
  .ambiance{padding:62px 0}
  .ambiance-grid-wrap,.spotlight-wrap{grid-template-columns:1fr;gap:32px}
  .spotlight{padding:62px 0}
  .spotlight-facts{gap:10px}
  .spotlight-facts strong{font-size:15px}
}

/* ============================================================
   BLUEMAGIX — IDENTITE NOIRE / NEON
   Noir profond #050509 · bleu electrique #00BFFF · violet neon #8A2BE2
   or discret #D9A441
   Surcharge explicite plutot que permutation de variables : une
   variable comme --navy sert a la fois de couleur de texte et de
   fond de bouton, la permuter inverserait des blocs sans le vouloir.
   ============================================================ */

:root{
  --ink:#050509;          /* noir profond */
  --ink-2:#0b0b14;        /* noir leve, cartes */
  --ink-3:#12121e;        /* surfaces elevees */
  --cyan:#00BFFF;         /* bleu electrique */
  --violet:#8A2BE2;       /* violet neon */
  --gold:#D9A441;         /* or discret */
  --txt:#f4f6fb;          /* texte principal sur fond sombre */
  --txt-soft:#9aa3b8;     /* texte secondaire */
  --hair:rgba(255,255,255,.11);
  --hair-strong:rgba(255,255,255,.2);
  --glow-cyan:0 0 0 1px rgba(0,191,255,.34),0 8px 26px rgba(0,191,255,.2);
}

body{background:var(--ink);color:var(--txt)}

/* ---------- en-tete ---------- */
.site-header{background:rgba(5,5,9,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.site-header .brand{color:#fff}
.brand-mark{background:linear-gradient(140deg,var(--cyan),var(--violet));color:#050509}
.brand-mark span{color:var(--gold)}
.brand-period{color:var(--cyan)}
.desktop-nav{color:var(--txt-soft)}
.desktop-nav a:hover,.underlined-link:hover,.text-link:hover{color:var(--cyan)}
.header-selection strong{background:rgba(0,191,255,.16);color:var(--cyan)}
.announcement{background:#08080f;color:var(--txt-soft);border-bottom:1px solid var(--hair)}
.announcement-dot{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.menu-toggle span{background:var(--txt)}
.mobile-nav:not([hidden]){background:#08080f;box-shadow:0 24px 30px rgba(0,0,0,.6)}
.skip-link{background:var(--ink);color:var(--cyan);border:1px solid var(--cyan)}

/* ---------- hero ---------- */
.hero-copy{background:linear-gradient(155deg,#08080f 0%,#0a1424 52%,#140a26 100%)}
.hero-copy:after{color:var(--violet);opacity:.2}
.hero h1 em{color:var(--cyan)}
.eyebrow-line{background:var(--gold)}
.hero-lead{color:#c3cee0}
.hero-aside{color:#93a3c0}
.hero-aside span:first-child{border-color:var(--hair-strong)}
.hero-art{border-left:1px solid var(--hair)}

/* ---------- bandeau defilant ---------- */
.ticker{background:#08080f;border-block:1px solid var(--hair);color:#aebbd4}
.ticker i{color:var(--cyan)}

/* ---------- typographie de section ---------- */
.section h2 em,.request-section h2 em,.faq-section h2 em{color:var(--cyan)}
.eyebrow-blue{color:var(--cyan)}
.eyebrow{color:var(--txt-soft)}

/* ---------- catalogue ---------- */
.product-card{background:var(--ink-2);border-color:var(--hair)}
.product-card:hover{border-color:rgba(0,191,255,.42);box-shadow:0 22px 54px rgba(0,0,0,.6),0 0 0 1px rgba(0,191,255,.2)}
.product-index{color:#9fb4d8;background:rgba(5,5,9,.6);border:1px solid var(--hair)}
.product-quick{background:rgba(5,5,9,.55);border-color:var(--hair-strong);color:var(--cyan)}
.product-quick:hover{background:var(--cyan);color:#050509;box-shadow:var(--glow-cyan)}
.product-family{color:var(--cyan)}
.product-specs span{color:var(--cyan);border-color:var(--hair)}
.product-actions{border-top-color:var(--hair)}
.product-detail{color:var(--txt-soft)}
.product-select{color:var(--cyan)}
.product-select[aria-pressed=true]{color:var(--gold)}
.filter{color:#7b8399}
.filter.active{color:var(--cyan);border-color:var(--cyan)}
.filter:hover{color:var(--cyan)}
.filter-bar{border-bottom-color:var(--hair)}
.result-count{color:var(--txt-soft)}
.legal-banner{background:rgba(0,191,255,.05);border-color:var(--hair);color:var(--txt-soft)}
.legal-banner strong{color:var(--gold)}
.collection-footer{border-top-color:var(--hair)}

/* ---------- boutons : lueur bleue discrete ---------- */
.button{transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.button-dark{background:var(--ink-3);color:#fff;border:1px solid var(--hair-strong)}
.button-dark:hover{background:var(--cyan);color:#050509;box-shadow:var(--glow-cyan);border-color:transparent}
.button-light{background:#fff;color:#050509}
.button-light:hover{background:var(--cyan);box-shadow:var(--glow-cyan)}
.button-submit{background:linear-gradient(135deg,var(--cyan),#3ad4ff);color:#050509;font-weight:800}
.button-submit:hover{box-shadow:var(--glow-cyan);transform:translateY(-2px)}
.button-dialog{background:linear-gradient(135deg,var(--cyan),#3ad4ff);color:#050509}
.button-dialog:hover{box-shadow:var(--glow-cyan)}
.button-sub{background:linear-gradient(135deg,var(--cyan),#3ad4ff);color:#050509}
.button-sub:hover{box-shadow:var(--glow-cyan);transform:translateY(-2px)}
.button-outline-light{border-color:rgba(255,255,255,.4);color:#fff}
.button-outline-light:hover{background:var(--cyan);color:#050509;border-color:transparent;box-shadow:var(--glow-cyan)}

/* ---------- sections sombres ---------- */
.pro-section{background:linear-gradient(160deg,#07070e 0%,#0d1024 55%,#170a26 100%);border-block:1px solid var(--hair)}
.pro-section:before{color:var(--violet);opacity:.14}
.pro-section h2 em{color:var(--cyan)}
.pro-copy>p:not(.eyebrow){color:#b3c0d8}
.pro-features article{border-color:var(--hair)}
.feature-no{color:var(--gold)}
.pro-features p{color:#a3b0c9}

.approach-overline{border-top-color:var(--hair);color:var(--cyan)}
.facts div{border-top-color:var(--cyan)}
.facts span{color:var(--gold)}
.facts small{color:var(--txt-soft)}
.approach-caveat,.provisional-note{color:var(--txt-soft);border-left-color:var(--gold)}

.request-section{background:#08080f;border-block:1px solid var(--hair)}
.selection-list{border-top-color:var(--hair)}
.selection-item{border-bottom-color:var(--hair)}
.selection-item button{color:var(--cyan)}
.selection-empty{color:var(--txt-soft)}
.request-card{background:var(--ink-2);border:1px solid var(--hair);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.request-card-top{color:var(--gold)}
.request-card>p,.form-note{color:var(--txt-soft)}
.request-card label span{color:var(--cyan)}
.request-card label .optional{color:var(--txt-soft)}
.request-card input,.request-card textarea{background:#0d0d17;border-color:var(--hair);color:var(--txt)}
.request-card input:focus,.request-card textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,191,255,.2)}
.form-status{color:var(--gold)}

/* ---------- FAQ / pied de page ---------- */
.faq-items,.faq-items details{border-color:var(--hair)}
.faq-items summary span{color:var(--cyan)}
.faq-items p{color:var(--txt-soft)}
.site-footer{background:#050509;border-top:1px solid var(--hair)}
.footer-bottom{border-top-color:var(--hair);color:var(--txt-soft)}
.footer-top p{color:var(--txt-soft)}
.back-top{border-bottom-color:var(--hair-strong)}

/* ---------- modale ---------- */
dialog{color:var(--txt);background:var(--ink-2);border:1px solid var(--hair);box-shadow:0 50px 110px rgba(0,0,0,.7)}
dialog::backdrop{background:rgba(3,3,7,.82);backdrop-filter:blur(3px)}
.dialog-close{color:var(--txt)}
.dialog-number,.dialog-family{color:var(--cyan)}
.dialog-facts span{border-color:var(--hair-strong)}
.dialog-disclaimer{color:var(--txt-soft)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ============================================================
   FUMEE D'AMBIANCE
   Le fond statique est toujours present : c'est lui qui s'affiche
   si le canvas ne demarre pas. Le canvas ne fait que l'animer.
   ============================================================ */

body{
  background:
    radial-gradient(58% 42% at 18% 8%,  rgba(0,191,255,.13) 0%, rgba(0,191,255,0) 62%),
    radial-gradient(52% 46% at 84% 22%, rgba(138,43,226,.13) 0%, rgba(138,43,226,0) 64%),
    radial-gradient(46% 38% at 50% 96%, rgba(217,164,65,.055) 0%, rgba(217,164,65,0) 60%),
    #050509;
  background-attachment:fixed;
}

#bm-smoke{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;   /* jamais d'interception : boutons et liens restent cliquables */
  opacity:.85;
  transition:opacity .45s ease;
}
/* fixe : la fumee ne se reinitialise pas au defilement */

/* le contenu reste au-dessus */
.site-header,.announcement,main,footer,.mobile-nav{position:relative;z-index:1}

/* fiche produit ouverte : la fumee se fait tres discrete */
body:has(dialog[open]) #bm-smoke{opacity:.18}

/* mouvement reduit : ni canvas, ni halo anime */
@media (prefers-reduced-motion:reduce){
  #bm-smoke{display:none}
  body{background-attachment:scroll}
}

/* ============================================================
   HERO refait : bandeau pleine largeur
   L'image heroes est un banner 2,36:1. Dans l'ancienne colonne
   carree elle etait rognee (logo coupe, boites coupees), ce que la
   cahier des charges interdit. Elle occupe maintenant toute la
   largeur et garde son ratio ; le texte passe dessous.
   ============================================================ */

.hero{display:block;padding:0;min-height:0}
.hero-band{
  width:100%;
  background:#050509;
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.hero-band picture{display:block;width:100%}
.hero-band img{
  width:100%;
  height:auto;              /* ratio preserve : jamais de rognage */
  object-fit:contain;
  display:block;
}
.hero-panel{padding-block:0}
.hero-copy{
  background:none;
  margin:0;
  padding:64px 0 58px;
  max-width:100%;
}
.hero h1{font-size:clamp(58px,6.6vw,104px);line-height:1.02;margin:34px 0 24px;white-space:normal}
.hero h1 em{color:var(--cyan)}
.hero-copy:after{top:20px;right:auto;left:-40px;opacity:.13}
.hero-lead{max-width:560px}
.hero-cta{margin-top:26px}
.hero-aside{margin-top:0;padding-top:34px;color:#8fa0bd}
.hero-aside span:first-child{border-color:var(--hair-strong);color:var(--cyan)}

/* plus de colonne art : les regles hero-art orphelines sont neutralisees */
.hero-art,.hero-picture,.hero-orbit,.hero-watermark,.hero-box{display:none !important}

@media (max-width:860px){
  .hero-copy{padding:44px 0 40px}
  .hero h1{font-size:clamp(50px,13vw,72px);margin:26px 0 20px}
  .hero-lead{font-size:14px;max-width:none}
  .hero-aside{padding-top:26px}
}

/* ============================================================
   01 / LE SYSTEME — batterie + cartouche
   ============================================================ */
.system{padding-block:96px}
.system-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:8%;align-items:center}
.system h2{font-size:clamp(40px,4.6vw,72px);line-height:1.08;margin:22px 0 24px}
.system h2 em{color:var(--cyan)}
.system-lead{font-size:16px;line-height:1.75;color:var(--txt-soft);max-width:520px;margin-bottom:38px}
.system-parts{display:grid;gap:2px;margin-bottom:30px}
.system-parts article{
  display:grid;grid-template-columns:46px 1fr;gap:18px;
  padding:22px 0;border-top:1px solid var(--hair);
}
.system-parts article:last-child{border-bottom:1px solid var(--hair)}
.part-no{font:800 12px Manrope,Arial,sans-serif;color:var(--gold);padding-top:5px;letter-spacing:.1em}
.system-parts h3{font-size:20px;letter-spacing:-.04em;margin:0 0 7px}
.system-parts p{font-size:13.5px;line-height:1.65;color:var(--txt-soft);margin:0}
.system-caveat{
  font-size:12px;line-height:1.65;color:var(--txt-soft);
  border-left:2px solid var(--gold);padding-left:14px;max-width:520px;
}
.system-visual{margin:0}
.system-visual img{
  width:100%;height:auto;display:block;border-radius:6px;
  background:radial-gradient(90% 70% at 50% 40%,#141a35 0%,#050509 72%);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.system-visual figcaption{
  margin-top:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-soft);text-align:center;
}

/* ============================================================
   ANALYSES — etat reel des documents, sans rien inventer
   ============================================================ */
.analyses{padding-block:96px;border-top:1px solid var(--hair);
  background:linear-gradient(180deg,#07070e 0%,#0b0a16 100%)}
.analyses-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:8%;align-items:start}
.analyses h2{font-size:clamp(38px,4.2vw,66px);line-height:1.08;margin:22px 0 0}
.analyses h2 em{color:var(--gold);font-style:italic}
.analyses-lead{font-size:15px;line-height:1.75;color:var(--txt-soft);max-width:620px;margin:0 0 28px}
.analyses-list{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:1px}
.analyses-list li{
  display:grid;grid-template-columns:16px 1fr;gap:14px;align-items:start;
  padding:17px 0;border-top:1px solid var(--hair);
  font-size:13px;line-height:1.65;color:var(--txt-soft);
}
.analyses-list li:last-child{border-bottom:1px solid var(--hair)}
.analyses-list strong{color:var(--txt);font-weight:700}
.dot{width:9px;height:9px;border-radius:50%;margin-top:6px;
  background:var(--cyan);box-shadow:0 0 0 3px rgba(0,191,255,.16)}
.dot-wait{background:transparent;border:1px solid var(--gold);box-shadow:none}
.analyses-foot{font-size:11.5px;line-height:1.6;color:#7e879c;margin:0}

@media (max-width:860px){
  .system,.analyses{padding-block:62px}
  .system-grid,.analyses-grid{grid-template-columns:1fr;gap:34px}
  .system h2,.analyses h2{font-size:clamp(32px,9vw,46px)}
  .system-lead,.analyses-lead{font-size:14px}
  .system-visual{order:-1}
}

/* ============================================================
   SAVEUR VEDETTE — passe en sombre
   La section gardait le fond ivoire de la version claire : texte
   gris clair sur creme, donc illisible. Neutralise ici.
   ============================================================ */
.spotlight{background:#08080f;border-top:1px solid var(--hair)}
.spotlight h2 em{color:var(--cyan)}
.spotlight p{color:var(--txt-soft)}
.spotlight-facts{border-top-color:var(--hair)}
.spotlight-facts span{color:var(--txt-soft)}
.spotlight-facts strong{color:var(--txt)}
.spotlight img{box-shadow:0 30px 64px rgba(0,0,0,.65);border:1px solid var(--hair)}

/* ============================================================
   CIBLES TACTILES
   Le cahier des charges exige des boutons reellement cliquables.
   Mesure au controle : les filtres faisaient 28-31 px de haut et les
   actions de carte 14-17 px. Apple recommande 44 px, Android 48.
   On remonte les zones cliquables sans changer le dessin.
   ============================================================ */

.product-detail,.product-select{
  padding:10px 2px;
  min-height:34px;
  display:inline-flex;align-items:center;
}
.product-quick{width:38px;height:38px}

@media (pointer:coarse),(max-width:860px){
  /* filtres : zone cliquable confortable, texte inchange */
  .filter{padding:14px 2px 16px;min-height:44px}
  .product-detail,.product-select{min-height:44px;padding:12px 3px}
  .product-quick{width:44px;height:44px;top:8px;right:8px}
  .button{min-height:52px}
  .button-small{min-height:44px}
  .faq-items summary{min-height:52px}
  .selection-item button{min-width:44px;min-height:44px;
    display:grid;place-items:center;margin:-10px -8px -10px 0}
  .menu-toggle{width:44px;height:44px;padding:11px}
}

/* ============================================================
   CORRECTIONS
   1. .analyses-list li etait en display:grid : <strong> et le texte
      qui le suit devenaient chacun un element de grille, donc un mot
      par ligne. On repasse par un conteneur unique pour le texte.
   2. .spotlight img gardait la hauteur de l'attribut HTML (1254px)
      alors que la largeur passait a 100% : image deformationnee en
      640x1254 pour une image carree. height:auto est obligatoire.
   ============================================================ */

.analyses-list li{grid-template-columns:16px 1fr;align-items:start}
.ana-txt{display:block;font-size:13px;line-height:1.65;color:var(--txt-soft)}
.ana-txt strong{color:var(--txt);font-weight:700}

.spotlight img{width:100%;height:auto;display:block}
.system-visual img{width:100%;height:auto;display:block}
.ambiance-grid{height:auto}

/* meme correction preventive partout ailleurs ou une largeur est
   imposee en CSS sur une image porteuse d'attributs width/height */
img{max-width:100%}

/* ---------- pied de page : liens legaux ---------- */
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 14px;max-width:62%}
.footer-legal a{color:var(--txt-soft);font-size:10px;text-decoration:none;letter-spacing:.02em}
.footer-legal a:hover{color:var(--cyan)}
@media (max-width:620px){
  .footer-bottom{flex-direction:column;gap:14px}
  .footer-legal{max-width:none}
}


/* ---------- fiche technique du kit B16 + A16 (section 04, fond sombre) ----------
   Les couleurs reprennent celles du bloc "sections sombres" : --cyan pour la
   regle de tete comme pour .facts, --gold pour les libelles, --hair pour les
   separateurs. Reutiliser --line/--muted rendrait un texte gris clair
   illisible sur le fond de la section.                                */
.kit-sheet{margin:0 0 32px;max-width:520px;border-top:2px solid var(--cyan);padding-top:16px}
.kit-overline{margin:0 0 7px;font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--gold)}
.kit-sheet h3{margin:0 0 20px;font:800 clamp(19px,2.4vw,26px) Manrope,Arial,sans-serif;letter-spacing:-.04em;color:var(--txt)}
.kit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.kit-block{margin:0;display:flex;flex-direction:column;gap:10px}
.kit-block dt{font:800 12px/1.3 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-soft)}
.kit-block dd{margin:0;display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--hair);padding-top:9px}
.kit-block dd span{font-size:10px;color:var(--gold)}
.kit-block dd strong{font:800 15px/1.3 Manrope,Arial,sans-serif;letter-spacing:-.03em;color:var(--txt)}
.kit-content{margin:20px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;border-top:1px solid var(--hair);padding-top:13px}
.kit-content span{font-size:10px;color:var(--txt-soft)}
.kit-content strong{font:800 12px/1.3 Manrope,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
@media (max-width:720px){.kit-grid{grid-template-columns:1fr}}


/* ============================================================
   HERO — affiche portrait 9:16
   L'ancien hero etait un bandeau 2,36:1. Une image 9:16 ne peut pas
   etre bandee sans deformation ni rognage : le logo du haut ou la rangee
   de sachets du bas disparaitrait. Elle occupe donc une colonne entiere
   a droite sur desktop, entiere etjamais rognee (object-fit: contain).
   Le hero n'a aucun fond propre : le degrade du body doit continuer a
   transparaitre sur la colonne de texte.
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:1fr clamp(360px,32vw,520px);
  padding:0;
  min-height:660px;
  background:none;
}
.hero-visual{
  order:2;
  position:relative;
  overflow:hidden;
  background:#050509;
  display:flex;align-items:center;justify-content:center;
  min-height:660px;
}
.hero-visual picture{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.hero-visual img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;      /* image entiere : ni rognee ni deformee */
  object-position:center;
}
.hero-panel{
  order:1;
  width:auto;max-width:none;margin:0;   /* neutralise .page-shell */
  padding:0 max(48px,calc((100vw - min(100vw - 100px,1500px)) / 2));
  display:flex;align-items:center;
}
.hero-copy{
  background:none;margin:0;max-width:660px;
  padding:74px 0 70px;
}
.hero-band{display:none}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-visual{order:1;min-height:0;max-height:78vh}
  .hero-visual img{height:auto;max-height:78vh}
  .hero-panel{
    order:2;
    width:min(100% - 40px,1500px);margin-inline:auto;
    padding:0;
  }
  .hero-copy{padding:48px 0 44px;max-width:none}
}

/* ============================================================
   PRODUITS — la boite suit l'image
   Avant : .product-media en height:400px fixee, image posee en
   contain dedans. Elle n'etait pas rognee mais n'occupait que 40 a 50 %
   de la boite : les deux tiers de la carte etaient vides.
   La regle mobile height:215px etait dead code, ecrasee par height:400px
   plus bas dans le fichier.
   Apres : plus de hauteur fixe. La hauteur vient de l'image
   (width:100% + height:auto), donc plus de vide et toujours aucun rognage.
   ============================================================ */
.product-media{
  height:auto;
  padding:14px 10px;
  display:flex;align-items:center;justify-content:center;
}
.product-media img{
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
@media (max-width:620px){
  .product-media{padding:10px 7px}
}