:root{
  /* JSL SOLAR Color Guide */
  --brand:#002B5B;           /* Bleu foncé */
  --brand-600:#001E40;       /* Variante foncée */
  --accent:#F7931E;          /* Orange solaire */
  --white:#FFFFFF;           /* Blanc */
  --bg:#F5F5F5;              /* Gris clair */
  --text:#333333;            /* Gris foncé */
  /* Layout sizes */
  --nav-brand-logo-h:44px;
  --footer-logo-h:26px;
  --footer-padding-y:1.2rem;
  --footer-font-size:1rem;
  /* Fluid spacing & radii */
  --space-1:clamp(6px,0.8vw,10px);
  --space-2:clamp(10px,1.2vw,14px);
  --space-3:clamp(14px,1.8vw,20px);
  --radius:clamp(8px,1vw,12px);
  --transition-fast:.15s;
  --transition-med:.25s;
}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:var(--brand);position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.12)}
.navbar .brand{font-weight:700}
.navbar .brand a{color:var(--white);text-decoration:none;display:flex;align-items:center;gap:.35rem}
.navbar .brand .brand-logo{height:var(--nav-brand-logo-h,28px);width:auto;display:block;background:#fff;border-radius:.35rem;padding:.15rem}
.navbar .brand .brand-text{line-height:1}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.3rem}
.nav-menu{display:flex;align-items:center;gap:.8rem}
.nav-menu a{margin-left:0;text-decoration:none;color:rgba(255,255,255,.9);padding:.35rem .5rem;border-radius:.35rem}
.nav-menu a.active,.nav-menu a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-menu .currency{display:flex;align-items:center;gap:.4rem;margin-left:.4rem}
.hero{background:linear-gradient(135deg,var(--white),#eef2ff);padding:3rem 1rem}
.hero-text{max-width:800px;margin:0 auto;text-align:center}
.hero-slider{position:relative;overflow:hidden}
.hero-slider .slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;animation:slide var(--slide-duration,16s) infinite ease-in-out;content-visibility:auto}
.hero-slider .slide{height:clamp(240px,36vh,var(--hero-h,360px));display:flex;align-items:center;justify-content:center;position:relative;padding-left:0}
@supports (height: 100dvh){.hero-slider .slide{height:clamp(240px,36dvh,var(--hero-h,360px))}}
.hero-slider .slide::before{content:"";position:absolute;inset:0;background:var(--hero-tint, rgba(0,0,0,.18));z-index:1}
.hero-slider .slide img{width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform;animation:heroImgScroll 28s linear infinite;pointer-events:none}
.hero-slider .slide:hover img{animation-play-state:paused}
@keyframes heroImgScroll{from{transform:scale(1.06) translateY(4%)}to{transform:scale(1.06) translateY(-4%)}}
@media (prefers-reduced-motion: reduce){.hero-slider .slide img{animation:none;transform:none}}
.hero-slider h1{margin:0 0 .4rem;font-size:clamp(1.4rem,4vw,2.2rem)}
.hero-slider p{margin:0 0 .8rem;opacity:.9}
@keyframes slide{0%,28%{transform:translateX(0)}33%,61%{transform:translateX(-100%)}66%,94%{transform:translateX(-200%)}100%{transform:translateX(0)}}
.container h1,.container h2,.container h3{ text-align:center }
.container h2{position:relative;display:block;margin:1.2rem 0 .8rem}
.container h2::after{content:"";display:block;width:64px;height:3px;background:var(--accent);border-radius:999px;margin:.4rem auto 0}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10rem;border:1px solid #cbd5e1;background:var(--white);color:var(--text);text-decoration:none}
.btn-primary{background:linear-gradient(135deg, #F7931E, #ffae4d);border-color:#d97f17;color:var(--white);box-shadow:0 4px 14px rgba(247,147,30,.25)}
.btn-primary{position:relative;overflow:hidden}
.btn-primary .ripple{position:absolute;width:160px;height:160px;background:rgba(255,255,255,.45);border-radius:50%;transform:translate(-50%,-50%) scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
.btn-ghost{background:transparent;border-color:rgba(0,43,91,.25);color:var(--brand)}
.btn-small{padding:.35rem .6rem;border-radius:.4rem}
.btn-danger{background:linear-gradient(135deg,#e11d48,#ef4444);border-color:#b91c1c;color:#fff;box-shadow:0 4px 14px rgba(239,68,68,.25)}
.btn-danger:hover{filter:brightness(1.03)}
.btn-block{display:block;width:100%}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,43,91,.12)}
.btn:active{transform:none;box-shadow:0 6px 12px rgba(0,43,91,.12)}
.btn-primary:hover{filter:brightness(1.03)}
.container{max-width:1400px;margin:1rem auto;padding:0 1rem;flex:1}
.container{padding-left:var(--space-2);padding-right:var(--space-2)}
.feature-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:1rem 0}
.feature{background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:.8rem;text-align:center}
.feature-title{font-weight:700;color:var(--brand)}
.feature-text{opacity:.9}
.cta-row{display:flex;justify-content:center;margin:1rem 0}
.contact-cta{background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:1rem;text-align:center;margin:1rem 0}
.slogan-cta .slogan{font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:700;color:var(--brand);text-align:center;margin:.4rem 0}
.slogan-cta .slogan .accent{color:var(--accent)}
.slogan-cta{background:linear-gradient(90deg,rgba(0,43,91,.08),rgba(0,43,91,.03));border:1px solid #e5e7eb;border-radius:.8rem;padding:1rem;margin:1rem auto}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.stagger.visible > *{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal,.stagger > *{transition:none;transform:none;opacity:1}
}
.intro{max-width:900px;margin:0 auto 1rem;text-align:center}
.intro .key-points{list-style:none;padding:0;margin:.6rem 0;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.intro .key-points li{background:#fff;border:1px solid #e5e7eb;border-radius:10rem;padding:.35rem .7rem}
.intro .key-points li span{font-weight:600;color:var(--brand)}
.about-hero{text-align:center;margin:1rem auto;padding:2rem 1.4rem;background:linear-gradient(135deg, rgba(0,43,91,.06), rgba(247,147,30,.06));border:1px solid #e5e7eb;border-radius:.8rem;position:relative;overflow:hidden}
.about-hero::before{content:"";position:absolute;inset:0;background-image:url('/static/img/jslfond.webp');background-size:cover;background-position:center;opacity:.08;filter:saturate(1.1);}
.about-hero h1{position:relative;z-index:1;background:linear-gradient(90deg, var(--brand), #0a4b94);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.2px}
.about-hero .lead{position:relative;z-index:1;opacity:.95;max-width:820px;margin:.6rem auto}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;align-items:stretch;margin:1rem 0}
.about-card{background:#fff;border:1px solid #e5e7eb;border-radius:.8rem;padding:1rem;position:relative;display:flex;flex-direction:column;height:100%}
.about-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg, var(--accent), #ffae4d);border-top-left-radius:.8rem;border-bottom-left-radius:.8rem}
.about-card .about-list{margin:.2rem 0 0 .2rem;padding-left:1rem}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin:1rem 0}
.stat{background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:1rem;text-align:center;transition:transform .15s ease, box-shadow .15s ease}
.stat .num{font-weight:800;font-size:clamp(1.1rem,2.6vw,1.8rem);background:linear-gradient(90deg, var(--brand), #0a4b94);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{opacity:.8}
.about-cta{text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:1rem;margin:1rem 0}
.categories .grid-categories{grid-template-columns:repeat(5, 1fr)}
.categories .grid-categories{-webkit-overflow-scrolling:touch}
.categories .cat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:#fff;border:1px solid #e5e7eb;border-radius:.8rem;text-decoration:none;color:inherit;text-align:center;position:relative;overflow:hidden;min-height:260px;padding:1rem;gap:.6rem;transition:transform .12s ease, box-shadow .12s ease}
.categories .cat::before{content:none}
.categories .cat::after{content:none}
.categories .cat:hover{box-shadow:0 10px 28px rgba(0,43,91,.15);transform:translateY(-4px)}
.categories .cat-title{font-weight:800;color:var(--brand);display:inline-block;padding:.5rem 1rem;border-radius:.5rem}
.categories .cat-visual{flex:1 1 auto;width:100%;position:relative;min-height:clamp(140px,15vw,220px)}
.categories .cat-visual::before{content:"";position:absolute;inset:0;background-image:var(--cat-bg);background-size:cover;background-position:center;filter:blur(18px) saturate(1.05) brightness(.98);transform:scale(1.08);}
.categories .cat-visual::after{content:"";position:absolute;inset:0;background-image:var(--cat-bg);background-size:contain;background-position:center;background-repeat:no-repeat}

/* Défilement vertical des SVG (de bas vers le haut) */
@keyframes catSvgScroll{from{background-position:center 110%}to{background-position:center -10%}}
.categories .cat-visual::before,.categories .cat-visual::after{animation:catSvgScroll 14s linear infinite;will-change:background-position}
.advantages .advantage-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.advantages .adv{background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:1rem;text-align:center}
.advantages .adv-title{font-weight:700;color:var(--brand)}
.team{margin:1.2rem 0}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;align-items:stretch}
.member{background:#fff;border:1px solid #e5e7eb;border-radius:.8rem;padding:1rem;text-align:center;transition:transform .15s ease, box-shadow .15s ease}
.member:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,43,91,.14)}
.member .avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;margin:0 auto .5rem;border:3px solid #eef2ff;box-shadow:0 6px 16px rgba(0,43,91,.12)}
.member .avatar img{width:100%;height:100%;object-fit:cover}
.member .name{font-weight:800;color:var(--brand)}
.member .role{opacity:.8}
.timeline{margin:1.2rem 0}
.tl{position:relative;margin:1rem 0;padding-left:1.2rem}
.tl::before{content:"";position:absolute;left:.4rem;top:.2rem;bottom:.2rem;width:2px;background:linear-gradient(180deg, var(--accent), #ffae4d)}
.tl-item{position:relative;padding-left:1.2rem;margin:.6rem 0}
.tl-dot{position:absolute;left:-.05rem;top:.4rem;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(247,147,30,.2)}
.tl-content{background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:.6rem .8rem}
.tl-year{font-weight:800;color:var(--brand)}
.tl-text{opacity:.9}
.process{margin:1.2rem 0}
.process-grid{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.2rem}
.process-grid::-webkit-scrollbar{height:6px}
.process-grid::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}
.step{background:#fff;border:1px solid #e5e7eb;border-radius:.8rem;padding:.9rem;text-align:center;transition:transform .15s ease, box-shadow .15s ease}
.step{flex:0 0 240px;scroll-snap-align:center}
.step:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,43,91,.14)}
.step .icon{color:var(--brand);margin-bottom:.25rem}
.step-title{font-weight:800;color:var(--brand)}
.step-text{opacity:.85}
.testimonials .testi-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.testimonials .testi{background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:1rem;text-align:center}
.testimonials .testi-author{opacity:.8;margin-top:.4rem}
.blog .blog-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.blog .blog-card{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:1rem;text-decoration:none;color:inherit}
.blog .blog-card:hover{box-shadow:0 12px 26px rgba(0,43,91,.16);transform:translateY(-4px)}
.blog .blog-title{font-weight:700;color:var(--brand)}
.products-hero{text-align:center;margin:1rem auto;padding:2rem 1.4rem;background:linear-gradient(135deg, rgba(0,43,91,.06), rgba(247,147,30,.06));border:1px solid #e5e7eb;border-radius:.8rem;position:relative;overflow:hidden}
.products-hero::before{content:"";position:absolute;inset:0;background-image:url('/static/img/jslfond.webp');background-size:cover;background-position:center;opacity:.08}
.products-hero h1{position:relative;z-index:1;background:linear-gradient(90deg, var(--brand), #0a4b94);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.2px}
.products-hero .lead{position:relative;z-index:1;opacity:.95;max-width:820px;margin:.6rem auto}
.products-toolbar{max-width:1040px;margin:0.6rem auto 1rem;padding:.6rem;border-radius:.8rem}
.products-filters{width:100%}
.filters-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center}
.filters-row .f-item{display:flex;align-items:center}
.filters-row .input{padding:.55rem .7rem;border:1px solid #cbd5e1;border-radius:.5rem;min-width:260px}
.filters-row .select{padding:.55rem .7rem;border:1px solid #cbd5e1;border-radius:.5rem}
.admin-shortcut{text-align:center;margin-top:.6rem}
.admin-quick{margin-top:.35rem;display:flex;gap:.35rem;justify-content:center;align-items:center}
.admin-quick select{padding:.25rem .4rem;border:1px solid #cbd5e1;border-radius:.35rem}
.products-grid{align-items:stretch}
.product-card .media{aspect-ratio:16/10}
.product-card .p-title{font-weight:800;color:var(--brand);margin:.3rem 0;min-height:2.2em;display:flex;align-items:center;justify-content:center}
.sku{font-size:.85em;opacity:.8;margin-top:-.1rem}
.product-card .p-meta{opacity:.8}
.product-card .p-meta{display:flex;gap:.35rem;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.6em}
.product-detail .p-meta{display:inline-flex;gap:.35rem;align-items:center;white-space:nowrap}
.status{font-weight:700}
.s-in_stock{color:#16a34a}
.s-out_of_stock{color:#dc2626}
.s-preorder{color:#ea580c}
.s-discontinued{color:#6b7280}
.empty.products-empty{max-width:1040px;margin:0 auto;padding:1rem;text-align:center}
.empty.products-empty.decorated{position:relative;overflow:hidden;background:linear-gradient(135deg, rgba(0,43,91,.06), rgba(247,147,30,.06));border:1px dashed #e5e7eb;border-radius:.8rem}
.empty.products-empty .empty-illustration{position:absolute;inset:0;background:radial-gradient(600px 200px at 20% 20%, rgba(0,43,91,.10), transparent 60%), radial-gradient(600px 200px at 80% 80%, rgba(247,147,30,.12), transparent 60%);opacity:.6;animation:emptyFloat 18s linear infinite alternate}
.load-more-wrap{text-align:center;margin:1rem 0}
.services-hero{text-align:center;margin:1rem auto;padding:2rem 1.4rem;background:linear-gradient(135deg, rgba(0,43,91,.06), rgba(247,147,30,.06));border:1px solid #e5e7eb;border-radius:.8rem;position:relative;overflow:hidden}
.services-hero::before{content:"";position:absolute;inset:0;background-image:url('/static/img/jslfond.webp');background-size:cover;background-position:center;opacity:.08}
.services-hero h1{position:relative;z-index:1;background:linear-gradient(90deg, var(--brand), #0a4b94);-webkit-background-clip:text;background-clip:text;color:transparent}
.services-hero .lead{position:relative;z-index:1;opacity:.95;max-width:820px;margin:.6rem auto}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1rem 0}
.service .service-title{font-weight:800;color:var(--brand);margin:.3rem 0}
.service .service-text{opacity:.9}
.plans{margin:1.2rem 0}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.plan{background:#fff;border:1px solid #e5e7eb;border-radius:.8rem;padding:1rem;text-align:center;transition:transform .15s ease, box-shadow .15s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,43,91,.14)}
.plan.featured{border-color:#ffb45e;box-shadow:0 10px 28px rgba(247,147,30,.12)}
.plan-head{font-weight:800;color:var(--brand);margin-bottom:.4rem}
.plan-features{list-style:none;margin:0;padding:0}
.plan-features li{padding:.25rem 0;border-top:1px dashed #e5e7eb}
.plan-features li:first-child{border-top:0}
.services-cta{text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:1rem;margin:1rem 0}
.mini-form{max-width:720px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.grid,.feature-strip,.plans-grid,.team-grid,.services-grid{gap:var(--space-2)}
.card{display:block;border:1px solid #e2e8f0;border-radius:var(--radius,.6rem);overflow:hidden;background:#fff;color:inherit;text-decoration:none;transition:transform var(--transition-fast) ease,box-shadow var(--transition-fast)}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,43,91,.18)}
.card .media{width:100%;aspect-ratio:4/3;background:#f1f5f9;overflow:hidden;position:relative;content-visibility:auto}
.promo-ribbon{position:absolute;top:.5rem;left:-.5rem;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-weight:800;padding:.2rem .6rem;transform:rotate(-12deg);box-shadow:0 6px 14px rgba(220,38,38,.28);border-top-right-radius:.35rem;border-bottom-right-radius:.35rem}
.card .media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:transparent;position:relative;z-index:1}
.card-body{padding:.8rem;text-align:center;display:flex;flex-direction:column;gap:.25rem}
.price{color:var(--accent);font-weight:700}
.footer{padding:var(--footer-padding-y,1.2rem) 0;color:#ffffff;background:var(--brand);border-top:1px solid rgba(255,255,255,.12)}
.footer .footer-inner{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;text-align:center;line-height:1.35}
.footer .foot-brand{display:flex;align-items:center;gap:.35rem;font-weight:700}
.footer .foot-brand .foot-sep{opacity:.6;margin:0 .25rem}
.footer .foot-brand .foot-mail{color:#fff;text-decoration:none}
.footer .foot-brand .foot-mail:hover{text-decoration:underline}
.footer .foot-contact,.footer .foot-links,.footer .foot-legal{opacity:.95}
.footer .foot-links a,.footer .foot-legal a{color:#fff;text-decoration:none}
.footer .foot-links a:hover,.footer .foot-legal a:hover{text-decoration:underline}
.footer .foot-brand img{height:var(--footer-logo-h,22px);width:auto;display:block;background:#ffffff;border-radius:.35rem;padding:.2rem}
.footer .foot-mail{color:#fff;text-decoration:none;opacity:.9}
.footer .foot-mail:hover{text-decoration:underline}
.footer .foot-copy{opacity:.9;font-size:var(--footer-font-size,.95rem)}
.toolbar{display:flex;justify-content:center;margin-bottom:1rem}
.currency select{padding:.45rem;border:1px solid #cbd5e1;border-radius:.4rem;margin-left:.4rem}
.search input{padding:.5rem;border:1px solid #cbd5e1;border-radius:.4rem 0 0 .4rem;outline:none}
.search button{border-radius:0 .4rem .4rem 0}
.product-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:1.2rem;align-items:start}
.product-detail .media{width:100%;aspect-ratio:16/10;border:1px solid #e2e8f0;border-radius:var(--radius,.5rem);overflow:hidden;background:#f1f5f9;position:relative}
.product-detail .info{text-align:center}
.product-detail .p-meta{opacity:.85;margin:.2rem 0}
.product-detail .media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:transparent;position:relative;z-index:1}

/* Blurred fill derived from the image to color empty areas */
.media.has-bg::before{content:"";position:absolute;inset:0;background-image:var(--ph-bg-image);background-size:cover;background-position:center;filter:blur(24px) saturate(1.05) brightness(.96);transform:scale(1.1);z-index:0}
.product-detail .desc{white-space:pre-line;text-align:center}
.form{margin-left:auto;margin-right:auto;max-width:760px;text-align:center}
.contact-form{width:100%;max-width:100%;text-align:left}
.contact-form .add-cart{justify-content:flex-start}
.contact-form .grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.floating > input{height:48px}
.floating .field-meta{display:block;text-align:right}
@media (max-width:640px){
  .contact-form .grid-two{grid-template-columns:1fr}
}
@media (min-width:1024px){
  .contact-form .grid-two{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.contact-page{padding:1rem 0;position:relative;min-height:calc(100vh - 140px)}
.full-bleed{position:relative;left:auto;right:auto;margin:0;width:100%;max-width:100%}
.full-bleed{max-width:100%}
.full-bleed > .container, .full-bleed > *{max-width:unset}
.contact-page::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,43,91,.06),rgba(0,43,91,.04)),url('/static/img/jslfond.webp');background-size:cover;background-position:center;opacity:.15;filter:saturate(1.05);animation:contactParallax 38s linear infinite alternate}
.contact-page:hover::before{animation-play-state:paused}
.contact-page:active::before{animation-play-state:running}
.contact-page:focus-within::before{animation-play-state:paused}
@keyframes contactParallax{from{background-position:center 0}to{background-position:center -120px}}
.contact-page > *{position:relative;z-index:1}
.contact-form{padding:1rem;border-radius:.8rem;border:0;background:transparent}
.contact-card{max-width:1040px;margin:0 auto;background:#fff;border:1px solid #e5e7eb;border-radius:.8rem;box-shadow:0 16px 44px rgba(0,43,91,.14);padding:1.2rem}
.contact-top{max-width:1040px;margin:0 auto .6rem;display:flex;justify-content:flex-start}
.contact-title{font-weight:800;text-align:center;margin:.2rem 0 1.1rem;background:linear-gradient(90deg,var(--brand), var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.4px;font-size:clamp(1.05rem,2.4vw,1.35rem)}
.contact-form .grid-two{gap:.8rem}
.contact-form .field{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:.6rem;padding:.5rem .75rem;position:relative;text-align:left}
.contact-form .field .lbl{display:block;font-weight:600;color:var(--brand);margin-bottom:.28rem;font-size:.95rem}
.contact-form .field input,.contact-form .field textarea{border:0;background:transparent;padding:.5rem 0;width:100%}
.contact-form .field input{min-height:52px;font-size:1.02rem}
.contact-form label:hover{border-color:#d0d7e2}
.contact-form label:focus-within{border-color:#9ac1ff;box-shadow:0 0 0 4px rgba(0,102,204,.10)}
.contact-form label:focus-within{border-image:linear-gradient(90deg, var(--accent), #ffae4d) 1; border-width:1px; box-shadow:0 0 0 6px rgba(247,147,30,.10)}
.contact-form label > input,.contact-form label > textarea{border:0;background:transparent;padding:.4rem 0 .2rem 2rem;width:100%}
.contact-form textarea{min-height:180px;resize:vertical}
.contact-form .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.grid-two .span-2{grid-column:1/-1}
.guides{background:#fff;border:1px dashed #e5e7eb;border-radius:.6rem;padding:.6rem}
.guides .guide{border:1px solid #e5e7eb;border-radius:.6rem;margin:.4rem 0;overflow:hidden}
.guide-hd{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .9rem;background:#f8fafc;border:0;cursor:pointer}
.g-title{font-weight:800;color:var(--brand);letter-spacing:.2px}
.g-ico{color:var(--accent)}
.guide.open{border-color:#ffb45e;box-shadow:0 8px 20px rgba(247,147,30,.12)}
.caret{width:10px;height:10px;border-right:2px solid #64748b;border-bottom:2px solid #64748b;transform:rotate(-45deg);transition:transform .15s ease}
.guide.open .caret{transform:rotate(45deg)}
.guide-body{padding:.7rem 1rem .85rem 1rem;display:block}
.guide:not(.open) .guide-body{display:none}
.guides ul{margin:.35rem 0 0 .9rem;line-height:1.55}
.guides li{margin:.14rem 0;list-style:none;position:relative;padding-left:1.1rem}
.guides li::before{content:"";position:absolute;left:0;top:.45rem;width:.55rem;height:.55rem;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px rgba(247,147,30,.18)}
.project-type{background:#fff;border:1px solid #e2e8f0;border-radius:.6rem;padding:.6rem}
.pt-label{font-weight:700;color:var(--brand);margin-bottom:.4rem}
.pt-options{display:flex;gap:.6rem;flex-wrap:wrap}
.pt-opt{display:block}
.pt-opt input{display:none}
.pt-card{display:flex;align-items:center;gap:.4rem;border:1px solid #e5e7eb;border-radius:999px;padding:.4rem .8rem;background:#fff;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease,border-color .12s}
.pt-icon{color:var(--brand)}
.pt-opt input:checked + .pt-card{border-color:#ffb45e;box-shadow:0 8px 18px rgba(247,147,30,.12)}
.pt-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,43,91,.10)}

/* Labels flottants */
.floating{padding-top:1rem}
.floating > .lbl{position:absolute;left:2rem;top:.9rem;color:#64748b;pointer-events:none;transition:all .15s ease;background:#fff;padding:0 .25rem}
.floating > input:placeholder-shown + .lbl,
.floating > textarea:placeholder-shown + .lbl{transform:translateY(0);font-size:.95rem;opacity:.9}
.floating > input:not(:placeholder-shown) + .lbl,
.floating > input:focus + .lbl,
.floating > textarea:not(:placeholder-shown) + .lbl,
.floating > textarea:focus + .lbl{transform:translateY(-1.1rem);font-size:.78rem;color:var(--brand)}
.form label{font-weight:600;color:var(--brand)}
.add-cart{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}
.add-cart input[type=number]{width:100px;padding:.4rem;margin:0 .5rem;border:1px solid #cbd5e1;border-radius:.4rem}
.form input,.form textarea{background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:.7rem;outline:none;transition:border-color .15s ease, box-shadow .15s ease;font-size:16px}
.form input:focus,.form textarea:focus{border-color:#9ac1ff;box-shadow:0 0 0 4px rgba(0,102,204,.12)}
.contact-form input,.contact-form textarea{border:0;box-shadow:none}
.contact-form input:invalid{box-shadow:0 0 0 2px rgba(220,53,69,.12)}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;display:inline-block;vertical-align:middle;animation:spin .8s linear infinite;margin-left:.5rem}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--brand);color:#fff;padding:.7rem 1rem;border-radius:.6rem;box-shadow:0 10px 28px rgba(0,43,91,.18);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s ease}
.toast.show{opacity:1}
.form-note{margin-top:.6rem;min-height:1.2rem;color:var(--brand)}
.field-meta{display:block;margin-top:.25rem;color:#64748b}

/* Icônes intégrées pour les champs (SVG inline) */
.contact-form input[name="name"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23002B5B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');background-repeat:no-repeat;background-size:18px;background-position:.25rem .65rem}
.contact-form input[name="email"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23002B5B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z" fill="none"/><path d="m4 6 8 6 8-6"/></svg>');background-repeat:no-repeat;background-size:18px;background-position:.25rem .65rem}
.contact-form input[name="phone"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23002B5B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.3 1.77.57 2.61a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.47-1.14a2 2 0 0 1 2.11-.45 12.29 12.29 0 0 0 2.61.57A2 2 0 0 1 22 16.92z"/></svg>');background-repeat:no-repeat;background-size:18px;background-position:.25rem .65rem}
.contact-form input[name="product_ref"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23002B5B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41 12 22l-8-8 8-8 8.59 8.59z"/><path d="M7 7h.01"/></svg>');background-repeat:no-repeat;background-size:18px;background-position:.25rem .65rem}
.contact-form textarea#msg{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23002B5B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>');background-repeat:no-repeat;background-size:18px;background-position:.25rem .8rem}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e2e8f0}
.table th,.table td{padding:.6rem;border-bottom:1px solid #e2e8f0}
.table th{text-align:left;background:#f8fafc}
.total{margin:1rem 0;font-size:1.1rem}
.cart-page{padding:1rem 0;position:relative}
.cart-page::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,43,91,.06),rgba(0,43,91,.04)),url('/static/img/jslfond.webp');background-size:cover;background-position:center;opacity:.1;filter:saturate(1.05)}
.cart-page > *{position:relative;z-index:1}
.cart-steps{max-width:1040px;margin:0 auto .6rem;display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.2rem 0}
.cart-steps .step{padding:.35rem .7rem;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:var(--brand);font-weight:700;white-space:nowrap}
.cart-steps .step.active{border-color:#ffb45e;box-shadow:0 8px 18px rgba(247,147,30,.12)}
.cart-card{max-width:1040px;margin:0 auto;background:#fff;border:1px solid #e5e7eb;border-radius:.8rem;box-shadow:0 14px 40px rgba(0,43,91,.12);padding:1rem}
.cart-table .cart-item{display:flex;align-items:center;gap:.7rem}
.cart-table .cart-media{width:84px;aspect-ratio:1/1;border:1px solid #e2e8f0;border-radius:.4rem;overflow:hidden;background:#f1f5f9;position:relative}
.cart-table .cart-info{display:flex;flex-direction:column}
.cart-table .cart-name{font-weight:700;color:var(--brand)}
.cart-summary{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.8rem;flex-wrap:wrap}
.cart-cta{display:flex;gap:.6rem}
.cart-empty{text-align:center;padding:1rem}
.cart-empty.decorated{position:relative;overflow:hidden;background:linear-gradient(135deg, rgba(0,43,91,.06), rgba(247,147,30,.06));border:1px dashed #e5e7eb;border-radius:.8rem}
.cart-empty .empty-illustration{position:absolute;inset:0;background:radial-gradient(600px 200px at 20% 20%, rgba(0,43,91,.10), transparent 60%), radial-gradient(600px 200px at 80% 80%, rgba(247,147,30,.12), transparent 60%);opacity:.6;animation:emptyFloat 18s linear infinite alternate}
@keyframes emptyFloat{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.featured-under-cart{margin-top:1.2rem}
.sticky-total{position:sticky;bottom:0;left:0;right:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(6px);border-top:1px solid #e5e7eb;padding:.6rem;padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));display:none;justify-content:space-between;align-items:center;gap:.6rem}
@media (max-width:720px){.sticky-total{display:flex}}
.cart-steps::-webkit-scrollbar{height:6px}
.cart-steps::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}
@media (max-width:480px){
  .cart-steps .step{padding:.3rem .55rem; font-size:.9rem}
}
.qty-ctrl{display:inline-flex;align-items:center;border:1px solid #e2e8f0;border-radius:.5rem;overflow:hidden}
.qty-btn{background:#f8fafc;border:0;padding:.35rem .6rem;cursor:pointer}
.qty-input{width:64px;text-align:center;border:0;padding:.35rem}
@media (max-width:640px){
  .cart-table thead{display:none}
  .cart-table tr{display:grid;grid-template-columns:1fr auto;gap:.4rem;padding:.6rem 0;border-bottom:1px solid #e5e7f0}
  .cart-table td{border:0;padding:.2rem 0}
  .cart-actions{grid-column:2}
  .cart-sub{grid-column:2}
}
.form label{display:block;margin:.5rem 0}
.form input,.form textarea{width:100%;padding:.6rem;border:1px solid #cbd5e1;border-radius:.4rem;font-size:16px}
.grid-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem}
@supports not (aspect-ratio: 1 / 1){
  .card .media{position:relative;padding-top:75%}
  .card .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .product-detail .media{position:relative;padding-top:62.5%}
  .product-detail .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-menu{position:fixed;right:1rem;top:3.2rem;background:var(--brand-600);border:1px solid rgba(255,255,255,.12);padding:.6rem;border-radius:.6rem;display:none;flex-direction:column;gap:.4rem;z-index:40}
  .nav-menu.open{display:flex}
}
@media (max-width:860px){.product-detail{grid-template-columns:1fr}}
@media (max-width:520px){.navbar .brand .brand-text{display:none}}

/* Ajustements de tailles responsives */
@media (max-width:720px){
  .hero-slider .slide{height:260px;padding-left:0}
  .card .media{aspect-ratio: 1/1}
  /* Réduire flou catégories pour limiter le coût de peinture */
  .categories .cat-visual::before{filter:blur(8px) saturate(1.02) brightness(.98);}
}
/* Catégories: défilement horizontal mobile (5 tuiles visibles en ligne) */
@media (max-width:720px){
  .categories .grid-categories{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.2rem}
  .categories .grid-categories::-webkit-scrollbar{height:6px}
  .categories .grid-categories::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}
  .categories .cat{flex:0 0 auto;min-width:240px;scroll-snap-align:center}
}
/* Mobile overflow fixes */
@media (max-width:767px){
  .full-bleed{left:auto;right:auto;margin-left:0;margin-right:0;width:100%;max-width:100%}
  .container,.grid,.grid-two,.feature-strip,.plans-grid,.team-grid,.services-grid{min-width:0}
  .navbar,.footer{max-width:100vw;overflow-x:hidden}
}
/* Header+Screen fixes v13 */
html{width:100%;max-width:100%}
.navbar{padding-left:calc(1rem + env(safe-area-inset-left,0px));padding-right:calc(1rem + env(safe-area-inset-right,0px))}
.footer .footer-inner{padding-left:calc(1rem + env(safe-area-inset-left,0px));padding-right:calc(1rem + env(safe-area-inset-right,0px))}
@media (max-width:1024px){.full-bleed{left:auto;right:auto;margin:0;width:100%;max-width:100%}}
.navbar > *{min-width:0}
img,svg,video,canvas{max-width:100%;height:auto}
@media (max-width:820px){.container{padding-left:max(1rem, env(safe-area-inset-left,0px));padding-right:max(1rem, env(safe-area-inset-right,0px))}}
@media (min-width:1280px){
  .card .media{aspect-ratio: 16/10}
  .product-detail{grid-template-columns:1.1fr 1fr}
}

/* Utilitaires d'aspect pro */
.glass{background:rgba(255,255,255,.68);border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 28px rgba(0,43,91,.10);backdrop-filter:saturate(160%) blur(10px)}
.tilt{will-change:transform;transform:perspective(900px) rotateX(0) rotateY(0);transition:transform .18s ease, box-shadow .18s ease}
.tilt:hover{box-shadow:0 16px 36px rgba(0,43,91,.18)}
.tilt .shine{pointer-events:none;position:absolute;inset:0;background:radial-gradient(600px 200px at center, rgba(255,255,255,.35), transparent 60%);opacity:.0;transition:opacity .2s ease}
.tilt:hover .shine{opacity:.35}

/* Surfaces interactives */
.feature{transition:transform .15s ease, box-shadow .15s ease}
.feature:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,43,91,.14)}
.about-card{transition:transform .15s ease, box-shadow .15s ease}
.about-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,43,91,.12)}
.stat:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,43,91,.12)}

.footer .foot-phone{color:#fff !important;text-decoration:none}
a,button{-webkit-tap-highlight-color:rgba(0,0,0,0)}
/* iOS responsive fixes v8 */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
@supports (height: 100dvh){.hero-slider .slide{height:clamp(240px,36dvh,var(--hero-h,360px))}}
.hero-slider .slide img{pointer-events:none}
.categories .grid-categories{-webkit-overflow-scrolling:touch}
.sticky-total{padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px))}
@media (max-width:900px){.nav-menu{z-index:40}}
.full-bleed{max-width:100vw}
.form input,.form textarea{font-size:16px}
a,button{-webkit-tap-highlight-color:rgba(0,0,0,0)}
@media (max-width:375px){.container h1{font-size:1.2rem}}
/* iOS safe-area v9 */
.navbar{padding-top:calc(.8rem + env(safe-area-inset-top,0px))}
.footer{padding-bottom:calc(var(--footer-padding-y,1.2rem) + env(safe-area-inset-bottom,0px))}
@media (max-width:360px){.grid{grid-template-columns:1fr}}
/* Utilities v10 */
.radius{border-radius:12px}
.shadow{box-shadow:0 4px 12px rgba(0,0,0,.1)}
.shadow-hover:hover{box-shadow:0 8px 24px rgba(0,0,0,.15)}
.text-center{text-align:center}
.text-bold{font-weight:700}
.transition{transition:all .3s ease-in-out}
.hover-scale:hover{transform:scale(1.01)}
@keyframes fadeInLite{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.fadeIn{animation:fadeInLite .6s ease}
/* Scrollbar harmonisée bleu/blanc/gris */
*{scrollbar-width:thin;scrollbar-color:var(--brand, #2563eb) var(--bg, #f1f5f9)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--brand, #2563eb);border-radius:10px}
::-webkit-scrollbar-track{background:var(--bg, #f1f5f9)}
/* Animation de révélation sur les éléments déjà prévus */
.reveal.visible{animation:fadeInLite .6s ease both}
.stagger.visible>*{animation:fadeInLite .6s ease both}
/* Titres modernes optionnels via classe .modern (respecte la charte) */
.section-title.modern,.depot-title.modern,.employe-title.modern{
  font-weight:800;letter-spacing:.3px;
  background-image:linear-gradient(90deg,var(--brand,#0b5ed7), var(--text,#475569) 55%, var(--white,#fff));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent
}
/* Carte utilitaire générique (n’impacte pas les styles existants) */
.card.util{border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 8px rgba(15,23,42,.06);transition:transform .2s, box-shadow .2s}
.card.util:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(15,23,42,.1)}
/* Responsive v11 */
@media (max-width:480px){
  .hero-slider .slide{height:clamp(220px,36dvh,var(--hero-h,320px))}
  .slogan-cta{padding:.8rem}
  .slogan-cta .slogan{font-size:clamp(1rem,5vw,1.25rem)}
  .product-detail{grid-template-columns:1fr}
  .cart-card{padding:.8rem}
  .cart-table .cart-media{width:72px}
}
@media (min-width:481px) and (max-width:767px){
  .hero-slider .slide{height:clamp(260px,40dvh,var(--hero-h,340px))}
}
@media (min-width:768px) and (max-width:1024px){
  .hero-slider .slide{height:clamp(260px,44dvh,var(--hero-h,380px))}
}
/* Safari iOS overflow hardening v15 */
html,body{max-width:100%;overflow-x:hidden}
/* Empêcher les enfants de grilles/flex de forcer la largeur */
:where(.grid,.grid-two,.product-detail,.about-grid,.services-grid,.plans-grid,.blog-grid,.stat-cards,.feature-strip)>*{min-width:0}
.container{min-width:0}
/* Forcer le wrapping et marges safe-area sur le contenu principal */
main.container{word-wrap:break-word;overflow-wrap:break-word;padding-left:calc(var(--space-2) + env(safe-area-inset-left,0px));padding-right:calc(var(--space-2) + env(safe-area-inset-right,0px))}
/* Contenir les dépassements visuels (scale/shadow) */
.hero-slider,.categories .cat-visual,.card,.about-card,.contact-page{overflow:hidden}
/* Cart page: empêcher la coupe du contenu tout en bloquant l'horizontal */
.cart-page{overflow-x:hidden;overflow-y:visible}
/* Mobile tactile: désactiver effets susceptibles d'élargir */
@media (hover:none) and (pointer:coarse){
  .card:hover,.feature:hover,.about-card:hover{transform:none !important;box-shadow:none !important}
  .categories .cat-visual::before{transform:none !important}
  /* Désactiver animation du slider et décors pour mobile */
  .hero-slider .slide{animation:none !important}
  .slogan-cta::before,.intro::before,.feature-strip::before,.advantages::before,.blog::before,.about-cta::before,.services-cta::before{animation:none !important}
}
/* Voir plus de tuiles sur mobile */
@media (max-width:720px){.categories .cat{min-width:200px}}
/* Desktop: activer la grille des catégories */
@media (min-width:721px){.categories .grid-categories{display:grid}}
/* Eviter les débordements visuels */
.cart-card,.contact-card{overflow:visible}
/* About hero: garder les décors contenus sans couper le texte */
.about-hero{overflow:hidden}
/* Home slider: contenir la largeur et la peinture pour iOS */
.hero-slider,.hero-slider .slides{width:100%;max-width:100%;overflow:hidden;contain:layout paint}
/* Hero fade v20: crossfade moderne, sans flash blanc */
.hero-slider{background:#0a2540}
.hero-slider .slides{position:relative;display:block;animation:none;content-visibility:auto}
.hero-slider .slide{position:absolute;inset:0;opacity:0;will-change:opacity,transform;backface-visibility:hidden}
@keyframes heroFade{0%{opacity:0} 4%{opacity:1} 28%{opacity:1} 33%{opacity:0} 100%{opacity:0}}
/* Delais pour 3 à 5 visuels */
.hero-slider .slide:nth-child(1){animation:heroFade var(--slide-duration,15s) infinite}
.hero-slider .slide:nth-child(2){animation:heroFade var(--slide-duration,15s) infinite;animation-delay:calc(var(--slide-duration,15s)/3)}
.hero-slider .slide:nth-child(3){animation:heroFade var(--slide-duration,15s) infinite;animation-delay:calc(2*var(--slide-duration,15s)/3)}
.hero-slider .slide:nth-child(4){animation:heroFade var(--slide-duration,15s) infinite;animation-delay:calc(3*var(--slide-duration,15s)/3)}
.hero-slider .slide:nth-child(5){animation:heroFade var(--slide-duration,15s) infinite;animation-delay:calc(4*var(--slide-duration,15s)/3)}
@media (prefers-reduced-motion: reduce){
  .hero-slider .slide{animation:none;opacity:1}
}
/* Decorative backgrounds v23 */
.slogan-cta,.intro,.feature-strip,.advantages,.blog,.about-cta,.services-cta{position:relative;overflow:hidden;content-visibility:auto;contain-intrinsic-size: 400px}
.slogan-cta::before,.intro::before,.feature-strip::before,.advantages::before,.blog::before,.about-cta::before,.services-cta::before{
  content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(600px 220px at 12% 14%, rgba(0,43,91,.10), transparent 60%),
    radial-gradient(600px 220px at 88% 86%, rgba(247,147,30,.12), transparent 60%),
    linear-gradient(120deg, rgba(0,43,91,.04), rgba(247,147,30,.04));
  animation:decorFloat 28s ease-in-out infinite alternate
}
@keyframes decorFloat{from{transform:translateY(0)}to{transform:translateY(-14px)}}
/* Assurer que le contenu passe au-dessus de la déco */
.slogan-cta > *, .intro > *, .feature-strip > *, .advantages > *, .blog > *, .about-cta > *, .services-cta > *{position:relative;z-index:1}
/* Global brand background v24 */
html{background:var(--bg)}
body{background:
  radial-gradient(900px 320px at 12% 8%, rgba(0,43,91,.07), transparent 60%),
  radial-gradient(900px 320px at 88% 92%, rgba(247,147,30,.09), transparent 60%),
  linear-gradient(180deg, rgba(0,43,91,.02), rgba(247,147,30,.02)),
  var(--bg);
  background-attachment: fixed, fixed, fixed, scroll
}
@media (prefers-reduced-motion: reduce){
  body{background-attachment: scroll, scroll, scroll, scroll}
  .slogan-cta::before,.intro::before,.feature-strip::before,.advantages::before,.blog::before,.about-cta::before,.services-cta::before{animation:none}
}
/* Hide prices globally v25 */
/* Admin help icons v26 */
.field .help{display:inline-block;margin-left:.35rem;color:var(--brand);cursor:pointer}
.field .help .tip{display:none;position:absolute;z-index:5;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem;box-shadow:0 8px 18px rgba(0,43,91,.12);max-width:320px}
.field .help:focus-within .tip,.field .help:hover .tip{display:block}
.price{display:inline-block !important}
.price .old{opacity:.7;text-decoration:line-through;margin-right:.35rem}
.price .new{color:var(--accent);font-weight:800}
.badge-disc{display:inline-block;margin-left:.35rem;background:#fee2e2;color:#b91c1c;border-radius:.4rem;padding:.1rem .35rem;font-weight:700;font-size:.85em}
.promo-until{font-size:.85em;opacity:.8;margin-top:.1rem}
.cart-sub,.cart-total,.sticky-total{display:none !important}
.cart-table thead th:nth-child(3){display:none}
/* Surfaces interactives */
.feature{transition:transform .15s ease, box-shadow .15s ease}
.feature:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,43,91,.14)}
.about-card{transition:transform .15s ease, box-shadow .15s ease}
.about-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,43,91,.12)}
.stat:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,43,91,.12)}

/* iOS safe-area v9 */
.navbar{padding-top:calc(.8rem + env(safe-area-inset-top,0px))}
.footer{padding-bottom:calc(var(--footer-padding-y,1.2rem) + env(safe-area-inset-bottom,0px))}

/* Ultra-wide / 4K support */
@media (min-width:1600px){
  .container{max-width:1800px}
  .hero-text{max-width:1200px}
  .card .media{aspect-ratio:16/9}
  .container h1{font-size:clamp(2rem, 2vw, 3rem)}
}
@media (min-width:2560px){
  .container{max-width:2200px}
  .hero{padding:6rem 2rem}
  .hero-slider h1{font-size:clamp(2.4rem,2.5vw,4rem)}
  .hero-slider p{font-size:clamp(1.2rem,1.6vw,2rem)}
  .grid, .plans-grid, .services-grid{
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr))
  }
}

html, body {
  max-width:100%;
  overflow-x:hidden !important;
}
/* iOS final clamp v19 */
.full-bleed{max-width:100% !important;width:100% !important}
main.container,.container,body,html{max-width:100%;overflow-x:hidden}