/* extrait de index.html (catalogue STIM NC) */
/* ─── TOKENS ─────────────────────────────────────────────── */
:root{
--ink:#0a1820;
--ink-2:#13242d;
--paper:#f6f2ea;
--paper-2:#efe7d6;
--paper-3:#e6dcc6;
--line:#d6cab1;
--line-soft:#e5dcc6;
--muted:#635d4d;
--muted-2:#4a443a;
--lagoon:#1d97a3; --lagoon:oklch(0.62 0.10 205);
--lagoon-deep:#004654; --lagoon-deep:oklch(0.36 0.07 215);
--lagoon-pale:#cfebec; --lagoon-pale:oklch(0.92 0.03 200);
--coral:#da6d5d; --coral:oklch(0.66 0.14 30);
--ocre:#ce9042; --ocre:oklch(0.70 0.12 70);
--olive:#577d58; --olive:oklch(0.55 0.07 145);
--r-sm:6px; --r:10px; --r-lg:18px;
--shadow-sm:0 1px 2px rgba(10,24,32,.05);
--shadow:0 8px 30px -12px rgba(10,24,32,.18);
--shadow-lg:0 30px 60px -30px rgba(10,24,32,.35);
--serif:"Instrument Serif", "Instrument Serif Fallback", "Times New Roman", serif;
--sans:"Inter", "Inter Fallback", system-ui, sans-serif;
--mono:"Space Mono", "Space Mono Fallback", ui-monospace, monospace;
}
/* ── MODE SOMBRE (visiteurs + admin) ─────────────────────────── */
html.dark{
--ink:#ece6da;
--ink-2:#d8d0c0;
--paper:#0a1a4a;
--paper-2:#102255;
--paper-3:#162c66;
--line:#2a3f7a;
--line-soft:#1d3066;
--muted:#a8b0d0;
--muted-2:#c8cce0;
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--shadow:0 8px 30px -12px rgba(0,0,0,.6);
--shadow-lg:0 30px 60px -30px rgba(0,0,0,.8);
}
html.dark body{background:var(--paper);color:var(--ink)}
html.dark header.site{background:rgba(10,26,74,.92);border-bottom-color:var(--line-soft)}
html.dark .util{background:#060f33;color:#a8b0d0;border-bottom-color:rgba(255,255,255,.04)}
html.dark .brand-mark{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
html.dark .card{background:var(--paper-2);border-color:var(--line-soft)}
html.dark .card-img,html.dark .card-img-placeholder{background:#fff}
/* Badge stock : reste lisible sur fond blanc en dark mode */
html.dark .card-stock{color:#1a2a32}
html.dark .card-stock.rupture{color:var(--coral)}
html.dark .sb-card{background:var(--paper-2);color:var(--ink)}
html.dark .prod-modal-box,html.dark .sheet,html.dark .adpanel,html.dark .admin-users-box{background:var(--paper)}
html.dark input,html.dark textarea,html.dark select{background:var(--paper-2);color:var(--ink);border-color:var(--line)}
html.dark .mob-search-bar{background:var(--paper-2)}
html.dark .toast{background:var(--ink);color:var(--paper)}
html.dark img.sheet-img,html.dark .sheet-thumb{background:#fff}
/* Surfaces toujours foncées : garder texte clair en mode sombre */
html.dark .hero{color:#f6f2ea}
html.dark .hero h1,html.dark .hero-title{color:#f6f2ea}
html.dark .hero-lede{color:rgba(246,242,234,.95);text-shadow:0 1px 4px rgba(0,0,0,.5)}
html.dark .hero-photo::after{background:linear-gradient(180deg,rgba(10,26,74,.35) 0%,rgba(10,26,74,.60) 50%,rgba(10,26,74,.92) 100%),linear-gradient(90deg,rgba(10,26,74,.65) 0%,rgba(10,26,74,.25) 60%,rgba(10,26,74,.10) 100%)}
html.dark .btn-ghost{border-color:rgba(246,242,234,.45)}
html.dark .btn-ghost:hover{background:rgba(246,242,234,.08)}
html.dark .hero-eyebrow{color:var(--accent)}
html.dark .hero-brands a,html.dark .hero-brands span{color:rgba(246,242,234,.9);border-color:rgba(246,242,234,.3)}
html.dark .hero-stats *{color:rgba(246,242,234,.9)}
html.dark .hero-stats .stat-k{color:var(--accent)}
.util span:not(.dot){ color:var(--lagoon); opacity:.80 }
html.dark .util a,html.dark .util span:not(.dot){color:#cfc7b3}
html.dark footer{background:#060f33}
html.dark footer,html.dark footer *{color:rgba(246,242,234,.9)}
body[data-univers="dive"] {--accent:var(--lagoon);--accent-deep:var(--lagoon-deep)}
body[data-univers="comp"] {--accent:var(--ocre);--accent-deep:#784900; --accent-deep:oklch(0.45 0.10 70)}
body[data-univers="gas"] {--accent:var(--olive);--accent-deep:#1e3b1f; --accent-deep:oklch(0.32 0.06 145)}
body[data-univers="bonplan"]{--accent:var(--coral);--accent-deep:#8c352a; --accent-deep:oklch(0.45 0.12 30)}
body[data-univers="about"] {--accent:#4c759f; --accent:oklch(0.55 0.08 250);--accent-deep:#284972; --accent-deep:oklch(0.40 0.08 255)}
/* ── Dark mode : surcharge accent par univers pour lisibilité ── */
html.dark body[data-univers="dive"] {--accent:#17bac8; --accent:oklch(0.72 0.12 205);--accent-deep:#1d97a3; --accent-deep:oklch(0.62 0.10 205)}
html.dark body[data-univers="comp"] {--accent:#fab45f; --accent:oklch(0.82 0.13 70); --accent-deep:#d49648; --accent-deep:oklch(0.72 0.12 70)}
html.dark body[data-univers="gas"] {--accent:#85bf86; --accent:oklch(0.75 0.10 145);--accent-deep:#6c9e6d; --accent-deep:oklch(0.65 0.09 145)}
html.dark body[data-univers="bonplan"]{--accent:#ff9381; --accent:oklch(0.78 0.14 30); --accent-deep:#dd7767; --accent-deep:oklch(0.68 0.13 30)}
html.dark body[data-univers="about"] {--accent:#73a3d5; --accent:oklch(0.70 0.09 250);--accent-deep:#5783b5; --accent-deep:oklch(0.60 0.09 252)}
*{box-sizing:border-box;margin:0;padding:0}
/* Supprime le surlignage bleu de sélection partout */
::selection{background:transparent;color:inherit}
::-moz-selection{background:transparent;color:inherit}
/* Supprime le caret bleu sur les éléments interactifs non-texte */
.util a,.util-item,.sc,.univ-tab,.filter-chip,.brand-pill,.card,
.crumb-link,.icon-btn,.btn,.bo{caret-color:transparent}
html{background:var(--paper);color:var(--ink);overflow-x:clip;scroll-behavior:smooth;overscroll-behavior-y:none}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5;overflow-x:clip;max-width:100vw;font-variant-numeric:slashed-zero tabular-nums;font-feature-settings:"zero" 1,"tnum" 1,"ss19" 1}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
/* ─── UTILITY BAR ────────────────────────────────────────── */
.skip-link{position:absolute;top:-100px;left:12px;z-index:10000;background:var(--accent-deep);color:#fff;padding:12px 22px;border-radius:0 0 10px 10px;font-family:var(--sans);font-size:14px;font-weight:600;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:0;outline:3px solid #fff;outline-offset:-3px}
/* Beaucoup d'éléments retirent l'outline par défaut (y compris en style inline) sans le remplacer :
au clavier, on ne voit plus où on est. :focus-visible (clavier uniquement, pas la souris) le restitue partout,
y compris par-dessus les outline:none en style inline (d'où le !important). */
:focus-visible{outline:3px solid var(--accent) !important;outline-offset:2px !important}
.util{background:var(--ink);color:#cfc7b3;font-size:12px;border-bottom:1px solid rgba(255,255,255,.05);position:fixed;top:var(--admin-offset,0px);left:0;right:0;width:100%;z-index:90}
.util-inner{max-width:1480px;margin:0 auto;padding:6px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.util a,.util-item{
display:inline-flex;align-items:center;gap:6px;
padding:4px 14px;border-radius:999px;
font-size:11px;font-family:var(--mono);letter-spacing:.6px;
background:
linear-gradient(180deg,
rgba(255,255,255,.38) 0%,
rgba(255,255,255,.14) 44%,
rgba(255,255,255,0) 54%,
rgba(0,0,0,.04) 100%
),
linear-gradient(180deg,
rgba(255,255,255,.12) 0%,
rgba(255,255,255,.05) 100%
);
border:1px solid rgba(255,255,255,.16);
border-top-color:rgba(255,255,255,.44);
border-bottom-color:rgba(0,0,0,.18);
box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 4px rgba(0,0,0,.12);
text-decoration:none;
transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,filter .15s;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
/* Couleur & overflow pour le reflet glissant */
.util a,.util-item{
color:var(--lagoon);
overflow:hidden;
position:relative;
user-select:none;-webkit-user-select:none;
}
.util a svg,.util-item svg{ color:inherit; pointer-events:none; }
/* Reflet glissant identique aux cards et brand-pills */
.util a::before,.util-item::before{
content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.48) 50%,transparent 100%);
transform:skewX(-12deg);
transition:left .45s cubic-bezier(.2,.7,.3,1);
z-index:5;pointer-events:none;opacity:0;
}
.util a:hover::before,.util-item:hover::before{left:160%;opacity:1}
/* Hover uniforme : tous les éléments réagissent pareil */
.util a:hover,.util-item:hover{
transform:translateY(-2px);
color:#fff;opacity:1;
box-shadow:0 6px 16px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.60),inset 0 -2px 4px rgba(0,0,0,.14);
border-color:rgba(255,255,255,.44);
border-top-color:rgba(255,255,255,.88);
}
.util .dot{width:5px;height:5px;border-radius:50%;background:#76d6a8;box-shadow:0 0 8px #76d6a8;display:inline-block;margin-right:2px}
.util-left,.util-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* ─── HEADER ─────────────────────────────────────────────── */
header.site{position:fixed;top:calc(var(--util-h,36px) + var(--admin-offset,0px));left:0;right:0;width:100%;z-index:80;background:rgba(246,242,234,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);transition:box-shadow .25s ease, background .25s ease}
.hdr-services{border-top:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.hdr-services::-webkit-scrollbar{display:none}
.hdr-services-inner{max-width:1480px;margin:0 auto;padding:8px 32px;display:flex;gap:10px;flex-wrap:nowrap;width:max-content;min-width:100%;box-sizing:border-box}
.hdr-svc-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;border:1px dashed var(--lagoon);color:var(--lagoon-deep);background:transparent;font-family:var(--mono);font-size:11px;letter-spacing:.4px;cursor:pointer;white-space:nowrap;transition:background .15s,border-style .15s;flex-shrink:0}
.hdr-svc-btn:hover{background:color-mix(in srgb,var(--lagoon) 12%,transparent);border-style:solid}
html.dark .hdr-svc-btn{color:var(--lagoon)}
.hdr-new-btn{border-color:var(--coral);color:var(--coral)}
.hdr-new-btn:hover{background:color-mix(in srgb,var(--coral) 12%,transparent)}
html.dark .hdr-new-btn{color:var(--coral)}
body.admin-mode{--admin-offset:36px}
body{padding-top:var(--stack-h,120px)}
header.site.scrolled{box-shadow:0 6px 24px -10px rgba(10,24,32,.35);background:rgba(246,242,234,.98)}
html.dark header.site.scrolled{box-shadow:0 6px 24px -8px rgba(0,0,0,.6);background:rgba(10,26,74,.98)}
.hdr-inner{max-width:1480px;margin:0 auto;padding:18px 32px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:14px;cursor:pointer}
.brand-mark{width:200px;height:138px;border-radius:14px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.brand-mark img{width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.brand-name{font-family:var(--serif);font-size:30px;line-height:.95;letter-spacing:-.5px}
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase;margin-top:3px}
nav.universes{display:flex;justify-content:center;gap:4px;position:relative}
.univ-tab{padding:11px 22px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--muted-2);transition:all .2s;display:inline-flex;align-items:center;gap:9px;position:relative;white-space:nowrap;overflow:hidden;user-select:none;-webkit-user-select:none}
.univ-more, .univ-more-menu{display:none}
.univ-more-menu{position:fixed;background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:200;flex-direction:column;min-width:180px}
.univ-more-menu.open{display:flex}
.univ-more-menu button{text-align:left;padding:10px 12px;border-radius:8px;background:none;border:none;font-size:13.5px;color:var(--ink);width:100%}
.univ-more-menu button:hover{background:var(--paper-2)}
/* Onglet désactivé (« Nous connaître », page en préparation) :
masqué pour les visiteurs, visible et grisé en mode admin pour prévisualisation. */
.univ-tab-disabled{display:none}
body.admin-mode .univ-tab-disabled{display:inline-flex;opacity:.55;border:1px dashed var(--line)}
body.admin-mode .univ-tab-disabled::after{content:"préparation";position:absolute;top:-2px;right:6px;font-size:7px;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-deep);opacity:.8}
body.admin-mode .univ-tab-disabled:hover{opacity:.85}
.univ-tab .tab-short{display:none}
/* Miroir glissant sur les onglets */
.univ-tab::before{
content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.44) 50%,transparent 100%);
transform:skewX(-10deg);
transition:left .42s cubic-bezier(.2,.7,.3,1);
z-index:5;pointer-events:none;opacity:0;
}
.univ-tab:hover::before:not(.on){left:160%;opacity:1}
.univ-tab:not(.on):hover::before{left:160%;opacity:1}
.univ-tab:hover{color:var(--ink);background:var(--paper-2)}
.univ-tab.on{background:var(--ink);color:var(--paper)}
/* Onglet Bon Plan : couleur corail toujours visible */
.univ-tab[data-u="bonplan"]{color:#fff;background:var(--coral);font-weight:600;box-shadow:0 3px 10px rgba(231,111,81,.35)}
.univ-tab[data-u="bonplan"]:hover{background:#d9573a;color:#fff}
.univ-tab[data-u="bonplan"].on{background:#c14a2f;color:#fff;box-shadow:0 4px 14px rgba(193,74,47,.5)}
.univ-tab[data-u="bonplan"] .num{color:#fff;opacity:.85}
.univ-tab .num{font-family:var(--mono);font-size:10px;opacity:.55}
.hdr-actions{display:flex;align-items:center;gap:8px}
.search-pill{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted-2);font-size:13px;min-width:240px;background:transparent;transition:all .15s;position:relative}
.search-pill:hover{border-color:var(--ink);color:var(--ink)}
.search-pill input{flex:1;border:0;background:transparent;outline:none;font:inherit;color:inherit}
.search-pill input::placeholder{color:var(--muted)}
.search-pill .kbd{font-family:var(--mono);font-size:10px;background:var(--paper-2);padding:2px 6px;border-radius:4px;color:var(--muted)}
/* Suggestions de recherche */
.search-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:200;max-height:360px;overflow-y:auto;display:none}
.search-suggest.on{display:block}
.search-suggest-item{padding:10px 14px;cursor:pointer;font-size:14px;display:flex;justify-content:space-between;align-items:center;color:var(--ink);gap:12px}
.search-suggest-item:hover,.search-suggest-item.active{background:var(--paper-2)}
.search-suggest-item .ssi-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-suggest-item .ssi-type{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;flex-shrink:0}
.search-suggest-item mark{background:transparent;color:var(--accent);font-weight:600}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--muted-2);transition:all .15s}
.icon-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* ─── HERO ───────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);isolation:isolate;width:100%;max-width:100%;box-sizing:border-box}
/* Animation d'entrée en cascade */
@keyframes heroRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-eyebrow{animation:heroRise .7s cubic-bezier(.2,.7,.3,1) .05s both}
.hero h1{animation:heroRise .8s cubic-bezier(.2,.7,.3,1) .15s both}
.hero-lede{animation:heroRise .8s cubic-bezier(.2,.7,.3,1) .30s both}
.hero-cta-row{animation:heroRise .8s cubic-bezier(.2,.7,.3,1) .42s both}
.hero-stats{animation:heroRise .8s cubic-bezier(.2,.7,.3,1) .54s both}
@media (prefers-reduced-motion: reduce){
.hero-eyebrow,.hero h1,.hero-lede,.hero-cta-row,.hero-stats{animation:none}
}
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transform:scale(1.04)}
.hero-photo::after{content:"";position:absolute;inset:0;background:
linear-gradient(180deg,rgba(10,24,32,.15) 0%,rgba(10,24,32,.45) 50%,rgba(10,24,32,.85) 100%),
linear-gradient(90deg,rgba(10,24,32,.5) 0%,rgba(10,24,32,.1) 60%,transparent 100%);}
/* Hero grid : pleine largeur, padding latéral en vw uniquement */
.hero-grid{position:relative;z-index:2;width:100%;padding:6vw 4vw 8vw;display:flex;flex-direction:column;align-items:stretch;min-height:80vh;justify-content:flex-end;box-sizing:border-box}
.hero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:12px;margin-bottom:2.5vw;align-self:flex-start;font-weight:700}
.hero-eyebrow::before{content:"";width:36px;height:1px;background:var(--accent)}
/* Titre : scale pur viewport, pas de max-width */
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,10vw,140px);line-height:.88;letter-spacing:-3px;margin:0 0 3vw;width:100%;display:block;
text-shadow:
0 1px 0 rgba(255,255,255,.18),
0 -1px 0 rgba(0,0,0,.20),
0 2px 4px rgba(0,0,0,.60),
0 5px 16px rgba(0,0,0,.45),
0 12px 40px rgba(0,0,0,.30),
2px 3px 8px rgba(0,0,0,.35),
-1px -1px 0 rgba(255,255,255,.06);
}
.hero h1 em{font-style:italic;color:var(--accent);font-weight:400;
text-shadow:
0 1px 0 rgba(255,255,255,.20),
0 2px 6px color-mix(in srgb,var(--accent) 70%,black),
0 6px 20px color-mix(in srgb,var(--accent) 50%,black),
0 14px 44px rgba(0,0,0,.35),
1px 2px 4px rgba(0,0,0,.40);
}
html.dark .hero h1 em{
text-shadow:
0 2px 8px color-mix(in srgb,var(--accent) 55%,transparent),
0 6px 24px color-mix(in srgb,var(--accent) 35%,transparent),
0 14px 44px rgba(0,0,0,.40);
}
.hero-lede{font-size:clamp(14px,1.6vw,18px);line-height:1.65;color:rgba(246,242,234,.82);max-width:70ch;margin-bottom:2.5vw;width:100%}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:2.5vw;align-self:flex-start}
.btn{padding:13px 22px;border-radius:999px;font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;cursor:pointer;user-select:none;-webkit-user-select:none}
/* Miroir glissant sur tous les boutons .btn */
.btn::before{
content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.52) 50%,transparent 100%);
transform:skewX(-12deg);
transition:left .48s cubic-bezier(.2,.7,.3,1);
z-index:5;pointer-events:none;opacity:0;
}
.btn:hover::before{left:160%;opacity:1}
.btn-primary{background:var(--paper)}
.btn-primary:hover{transform:translateY(-2px);background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.9)}
.btn-ghost{border-color:rgba(246,242,234,.28)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(246,242,234,.08)}
.hero-stats{border-top:1px solid rgba(246,242,234,.16);padding-top:2vw;margin-top:0;display:grid;grid-template-columns:repeat(3,auto);gap:0;width:auto;column-gap:4vw;align-self:flex-start}
.stat-k{font-family:var(--serif);font-size:clamp(28px,3.5vw,52px);line-height:1;letter-spacing:-1.5px}
.stat-k em{font-style:italic;color:var(--accent)}
.stat-l{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(246,242,234,.6);margin-top:6px}
.hero-figure{display:none}
.hero-meta{position:absolute;bottom:24px;right:32px;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;color:rgba(246,242,234,.5);display:flex;gap:22px;z-index:3}
.hero-meta .dotline::before{content:"●";color:var(--accent);margin-right:6px;font-size:8px;vertical-align:middle}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 60%,transparent 40%,rgba(10,24,32,.25) 100%);pointer-events:none;z-index:1}
/* ── SCROLL TO TOP ──────────────────────────────────────── */
#scroll-top{position:fixed;bottom:28px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:90;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:opacity .2s,transform .2s}
#scroll-top:hover{transform:translateY(-2px)}
#scroll-top.visible{display:flex}
/* ── MAINTENANCE OVERLAY ─────────────────────────────────── */
.maint-overlay{position:absolute;inset:0;background:rgba(10,24,32,.75);backdrop-filter:blur(4px);z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:inherit}
.maint-overlay span{font-family:var(--mono);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(246,242,234,.9);text-align:center}
.maint-overlay svg{width:36px;height:36px;opacity:.7}
/* ── / MAINTENANCE ───────────────────────────────────────── */
.brand-dropdown-wrap{position:relative;display:inline-block}
.brand-dropdown-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 12px;border-radius:999px;color:var(--paper);font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer}
.brand-dropdown-btn:hover{background:rgba(246,242,234,.16)}
.brand-dropdown-btn svg{transition:transform .2s;flex-shrink:0}
.brand-dropdown-btn.open svg{transform:rotate(180deg)}
.brand-dropdown-list{position:fixed;min-width:220px;max-height:60vh;max-height:60dvh;overflow-y:auto;background:rgba(12,26,38,.97);backdrop-filter:blur(16px);border:1px solid rgba(246,242,234,.15);border-radius:20px;padding:8px;display:none;z-index:9999;box-shadow:0 16px 48px rgba(0,0,0,.5)}
.brand-dropdown-list.open{display:block;animation:fade .15s ease}
.brand-dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:999px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(246,242,234,.8);transition:all .12s}
.brand-dropdown-item:hover{background:rgba(246,242,234,.1);color:#fff}
.brand-dropdown-item .bdi-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* ── / HERO BRAND DROPDOWN ─────────────────────────────── */
.strip{background:var(--paper-2);border-bottom:1px solid var(--line-soft);position:sticky;top:calc(var(--util-h,0px) + var(--hdr-h,83px) + var(--admin-offset,0px));z-index:60}
.strip-inner{max-width:1480px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);user-select:none;-webkit-user-select:none}
.strip-inner b{color:var(--ink);font-weight:500}
.strip-inner .sep{opacity:.4}
.crumb-link{cursor:pointer;transition:color .15s,opacity .15s;user-select:none;-webkit-user-select:none}
.crumb-link:hover{color:var(--accent);opacity:1}
.strip-inner b.crumb-link:hover{color:var(--accent)}
/* Destinataire visible sur les boutons mail */
.mail-recip{display:block;font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;text-align:center;margin-top:4px;opacity:.85;color:var(--accent);pointer-events:none;line-height:1}
.btn-ghost .mail-recip,.btn-dark .mail-recip{color:rgba(246,242,234,.75)}
.btn-primary .mail-recip{color:rgba(10,24,32,.55)}
.strip-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.filter-chip{padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--muted-2);font-family:var(--sans);font-weight:500;text-transform:none;letter-spacing:.1px;overflow:hidden;position:relative;user-select:none;-webkit-user-select:none}
.chip-short{display:none}
.sort-select{padding:5px 28px 5px 12px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--muted-2);font-family:var(--sans);font-weight:500;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .2s}
.sort-select:hover{border-color:var(--ink)}
.brand-view-cta{margin-left:12px;padding:5px 14px;background:var(--ink);color:var(--paper);border:none;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:opacity .2s}
.brand-view-cta:hover{opacity:.85}
/* Miroir glissant sur les filter-chips */
.filter-chip::before{
content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.40) 50%,transparent 100%);
transform:skewX(-10deg);
transition:left .40s cubic-bezier(.2,.7,.3,1);
z-index:5;pointer-events:none;opacity:0;
}
.filter-chip:hover::before{left:160%;opacity:1}
.filter-chip:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.filter-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* ─── MAIN LAYOUT ─────────────────────────────────────────── */
main{max-width:1480px;margin:0 auto;padding:48px 32px 80px;display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:flex-start}
/* Sidebar */
aside.sb{position:sticky;top:140px;align-self:flex-start;max-height:calc(100vh - 160px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;transform:translateZ(0);will-change:transform;isolation:isolate}
aside.sb::-webkit-scrollbar{display:none}
.sb h4{font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;padding-left:14px}
.sb-list{display:flex;flex-direction:column;gap:1px}
.sc{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;cursor:pointer;font-size:14px;color:var(--muted-2);transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,background .15s,border-color .15s;position:relative;overflow:hidden;
backdrop-filter:blur(8px) saturate(1.1);
-webkit-backdrop-filter:blur(8px) saturate(1.1);
transform:translateZ(0);
isolation:isolate;
}
.sc-thumb{width:30px;height:30px;border-radius:8px;flex-shrink:0;overflow:hidden;background:rgba(255,255,255,.60);display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:1px solid rgba(10,24,32,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.90)}
.sc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sc-thumb-emoji{background:rgba(255,255,255,.60)}
.sc-lbl{flex:1;line-height:1.2;user-select:none;-webkit-user-select:none;position:relative;z-index:6}
.sc-cnt{font-family:var(--mono);font-size:11.5px;opacity:.75;letter-spacing:.5px;font-weight:600;font-variant-numeric:slashed-zero tabular-nums;font-feature-settings:"zero" 1,"tnum" 1;user-select:none;-webkit-user-select:none}
.sc.on .sc-thumb{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.14)}
/* Miroir glissant sur les items sidebar */
.sc::before{
content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.14) 50%,transparent 100%);
transform:skewX(-10deg);
transition:left .45s cubic-bezier(.2,.7,.3,1);
z-index:5;pointer-events:none;opacity:0;
}
.sc:hover::before{left:160%;opacity:1}
.sc:hover{
transform:translateY(-1px);
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(10,24,32,.05) 100%);
border-color:rgba(10,24,32,.14);border-top-color:rgba(255,255,255,.98);
box-shadow:0 18px 48px rgba(10,24,32,.28),0 6px 16px rgba(10,24,32,.18),
inset 0 3px 0 rgba(255,255,255,1),
inset 0 14px 32px rgba(255,255,255,.90),
inset 5px 0 20px rgba(255,255,255,.24),
inset -5px 0 20px rgba(255,255,255,.24),
inset 0 -6px 14px rgba(0,0,0,.14),
inset 0 -2px 0 rgba(0,0,0,.09);
color:var(--ink);
}
.sc.on{
background:
radial-gradient(ellipse 90% 55% at 50% -5%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 68%),
linear-gradient(180deg,var(--ink) 0%,#000e18 100%);
border:1px solid rgba(0,0,0,.22);border-top-color:rgba(255,255,255,.30);
box-shadow:0 5px 16px rgba(10,24,32,.28),inset 0 1.5px 0 rgba(255,255,255,.26),inset 0 3px 8px rgba(255,255,255,.06),inset 0 -1.5px 3px rgba(0,0,0,.14);
transform:none;color:var(--paper);
}
.sc.on .sc-cnt{color:var(--accent);opacity:.95}
.sc.service{font-style:italic;color:var(--muted);font-family:var(--serif);font-size:16px}
.sc.service.on{color:var(--paper);font-style:italic}
.sb-card{margin-top:24px;background:var(--ink);color:var(--paper);border-radius:14px;padding:20px;position:relative;overflow:hidden}
body[data-univers="comp"] .sb-card,
body[data-univers="gas"] .sb-card,
body[data-univers="bonplan"] .sb-card,
body[data-univers="location"] .sb-card,
body[data-univers="about"] .sb-card{display:none}
/* Encarts photos page "Qui sommes-nous" */
.about-para{margin-bottom:6px}
.about-img-insert{margin:28px 0 24px;border-radius:14px;overflow:hidden;max-width:820px;box-shadow:0 8px 28px rgba(20,40,60,.18);border:1px solid var(--line-soft)}
.about-img-insert img{width:100%;height:340px;object-fit:cover;display:block !important;visibility:visible !important;opacity:1 !important}
.about-img-insert figcaption{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding:10px 14px;background:var(--paper-2);border-top:1px solid var(--line-soft)}
/* Mode sombre : encarts sombres */
html.dark .about-img-insert{box-shadow:0 8px 32px rgba(0,0,0,.35);border-color:rgba(255,255,255,.08)}
html.dark .about-img-insert img{background:#050e18}
html.dark .about-img-insert figcaption{color:rgba(246,242,234,.55);background:rgba(0,0,0,.25);border-top-color:rgba(255,255,255,.06)}
@media(max-width:760px){.about-img-insert{max-width:100%}.about-img-insert img{max-height:260px}}
body[data-univers="about"] main{
display:block !important;
grid-template-columns:none !important;
width:100% !important;
min-width:0 !important;
}
body[data-univers="about"] main > *{
min-width:0;max-width:100%;box-sizing:border-box;
}
/* Univers "Qui sommes-nous" : atmos pleine largeur, hauteur auto */
body[data-univers="about"] .atmos{
height:auto !important;min-height:auto !important;
padding:70px 5vw;
background:var(--paper-2) !important;
display:block !important;
}
/* Mode sombre uniquement : fond bleu nuit */
html.dark body[data-univers="about"] .atmos{
background:linear-gradient(135deg,#0e1f2e 0%,#152436 60%,#1a2d40 100%) !important;
}
body[data-univers="about"] .atmos-img{display:none !important}
body[data-univers="about"] .atmos-text{
position:static !important;
height:auto !important;
max-width:960px;
width:100% !important;
padding:0 !important;
margin:0 auto;
display:block !important;
}
body[data-univers="about"] .atmos-text h3{
max-width:none;font-size:clamp(28px,3.5vw,48px);margin-bottom:28px;
color:var(--ink);
}
body[data-univers="about"] .atmos-text p{
max-width:none !important;
font-size:clamp(13.5px,1.15vw,15.5px);
line-height:1.8;
color:var(--muted-2);
}
body[data-univers="about"] .atmos-text p strong{
color:var(--ink);font-weight:700;display:inline;
font-size:1.02em;
}
/* Mode sombre : texte clair */
html.dark body[data-univers="about"] .atmos-text p{ color:rgba(246,242,234,.88); }
html.dark body[data-univers="about"] .atmos-text p strong{ color:#fff; }
html.dark body[data-univers="about"] .atmos-text h3{ color:#fff; }
/* Titres de section (premier strong de chaque paragraphe) : gardent l'espacement */
body[data-univers="about"] .about-para > strong:first-child{
display:block;margin-top:26px;margin-bottom:4px;font-size:1.08em;
}
/* Page "Qui sommes-nous" en mode clair : SUPPRIMER les ombres de texte (créaient un flou) */
body[data-univers="about"] .atmos-text p,
body[data-univers="about"] .atmos-text h3,
body[data-univers="about"] .atmos-text h3 em,
body[data-univers="about"] .atmos-text .label,
body[data-univers="about"] .atmos-text p strong{
text-shadow:none !important;
}
/* Mode sombre : on remet une ombre douce sur les titres pour la profondeur */
html.dark body[data-univers="about"] .atmos-text h3{
text-shadow:0 2px 12px rgba(0,0,0,.4) !important;
}
body[data-univers="about"] .strip,
body[data-univers="about"] aside.sb,
body[data-univers="about"] .section-head,
body[data-univers="about"] #grid,
body[data-univers="about"] .price-from-line,
body[data-univers="about"] .section-count{display:none !important}
.sb-card .label{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.sb-card h5{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.4px;line-height:1.1;margin-bottom:10px}
.sb-card p{font-size:12.5px;color:rgba(246,242,234,.7);line-height:1.5;margin-bottom:14px}
.sb-card a{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.sb-card a::after{content:"→"}
/* Section head */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--line-soft)}
.section-head h2{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1;letter-spacing:-1.3px}
.section-head .section-title-wrap{display:flex;flex-direction:column;gap:8px}
.price-from-line{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);display:none}
.price-from-line.on{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.price-from-line.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.price-from-line strong{color:var(--accent-deep);font-weight:700;letter-spacing:.5px;font-size:13px}
.price-from-line .pf-note{text-transform:none;letter-spacing:.2px;font-size:11px;opacity:.8}
.price-from-line.on{flex-wrap:wrap;row-gap:2px}
html.dark .price-from-line strong{color:var(--accent)}
.section-head h2 em{font-style:italic;color:var(--accent-deep)}
html.dark .section-head h2 em{color:var(--accent)}
.section-head .meta{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);text-align:right}
.section-head .meta b{display:block;color:var(--ink);font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;letter-spacing:-.5px;margin-bottom:4px}
.price-from-hl{color:var(--accent);font-weight:600}
.price-from-hl strong{font-weight:700;letter-spacing:.5px}
/* ─── PRODUCT GRID ───────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 18px}
/* Mode edition de texte (admin) */
body.tx-on [data-tx]{outline:1px dashed rgba(0,150,199,.65);outline-offset:2px;border-radius:3px;cursor:text;transition:background .12s}
body.tx-on [data-tx]:hover{background:rgba(0,150,199,.10)}
body.tx-on [data-tx]:focus{outline:2px solid var(--accent);background:rgba(0,150,199,.14)}
body.tx-on a[data-tx],body.tx-on button[data-tx]{pointer-events:auto}
/* Mode aperçu visiteur : neutralise l'habillage admin sans déconnecter */
body.preview-mode .admin-bar{display:none !important}
body.preview-mode{--admin-offset:0px}
body.preview-mode .card-admin-overlay{display:none !important}
body.preview-mode .admin-add-btn{display:none !important}
body.preview-mode.tx-on [data-tx]{outline:none !important;cursor:auto}
#preview-exit{display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9998;background:var(--ink);color:var(--paper);border:none;padding:11px 22px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35);align-items:center;gap:8px}
.card{position:relative;background:transparent;border-radius:var(--r-lg);overflow:visible;cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.3,1);animation:cardFade .45s ease both}
@keyframes cardFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.btn{transition:transform .15s ease, box-shadow .25s ease;overflow:hidden;position:relative}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion: reduce){
.card, .card *, .btn, html{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
.card:hover{transform:translateY(-6px)}
.card-img{aspect-ratio:4/4.4;background:var(--paper);border-radius:var(--r-lg);overflow:hidden;position:relative;border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);transition:box-shadow .35s ease,border-color .35s ease}
.card:hover .card-img{box-shadow:0 18px 44px rgba(15,30,40,.22);border-color:rgba(10,24,32,.16)}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18px;transition:transform .55s cubic-bezier(.2,.7,.3,1);background:#fff;transform-origin:center 42%}
.card:hover .card-img img{transform:scale(1.14)}
/* Loupe : reflet glossy qui glisse au survol */
.card-img::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.14) 50%,transparent 100%);transform:skewX(-18deg);transition:left .65s cubic-bezier(.2,.7,.3,1);z-index:3;pointer-events:none;opacity:0}
.card:hover .card-img::before{left:160%;opacity:1}
.card-img-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:60px;color:var(--paper-3);background:linear-gradient(160deg,var(--paper-2),var(--paper-3))}
.card-tag{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;padding:5px 10px;border-radius:8px;background:var(--ink);color:var(--paper);z-index:2}
.card-tag.promo{background:var(--coral);color:#fff}
.card-tag.new{background:#06b6c7;color:#fff;border:none;font-weight:700;box-shadow:0 4px 12px rgba(6,182,199,.45);position:absolute;display:inline-flex;align-items:center;gap:4px;animation:newGlow 2.4s ease-in-out infinite}
.card-tag.new::before{content:"✦";font-size:11px;line-height:1;animation:newSparkle 2.4s ease-in-out infinite}
.card-tag.new::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid #06b6c7;opacity:.5;animation:newPulse 2s ease-in-out infinite}
@keyframes newPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.12);opacity:0}}
@keyframes newGlow{0%,100%{box-shadow:0 4px 12px rgba(6,182,199,.45)}50%{box-shadow:0 4px 20px rgba(6,182,199,.75),0 0 8px rgba(6,182,199,.50)}}
@keyframes newSparkle{0%,100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(1.3) rotate(90deg);opacity:.7}}
@media (prefers-reduced-motion: reduce){
.card-tag.new,.card-tag.new::after,.card-tag.new::before{animation:none}
}
.card-stock{position:absolute;bottom:14px;right:14px;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--ink);z-index:2;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;max-width:calc(100% - 28px)}
.card-antifog{position:absolute;bottom:-6px;left:-6px;width:130px;height:130px;z-index:2}
.card-antifog-big{bottom:14px;left:14px;width:280px;height:280px}
.card-compare-toggle{position:absolute;top:14px;right:14px;z-index:3;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:#1a2a32;cursor:pointer;user-select:none;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);padding:4px 9px 4px 7px;border-radius:999px}
.card-compare-toggle input{width:13px;height:13px;accent-color:#1a2a32;cursor:pointer;margin:0}
.card-stock .ds{width:6px;height:6px;border-radius:50%;background:var(--olive);display:inline-block}
.card-stock.rupture{color:var(--coral)}
.card-stock.rupture .ds{background:var(--coral)}
.card-stock.bientot .ds{background:var(--ocre)}
.card-stock.commande .ds{background:#a89460}
.card-img.rupture::after{content:"";position:absolute;inset:0;background:rgba(246,242,234,.55);backdrop-filter:saturate(0.2)}
.card-body{padding:16px 4px 4px;display:flex;flex-direction:column;gap:6px}
.card-brand{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.card-name{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.1;letter-spacing:-.4px;color:var(--ink);text-wrap:pretty;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card-desc{font-size:13px;color:var(--muted-2);line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.card-quote-add{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s}
.card-quote-add:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Bouton "Voir le produit" pleine largeur (remplace la flèche) */
.card-cta{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;padding:10px 14px;border-radius:10px;border:1px solid var(--accent-deep);color:var(--accent-deep);background:transparent;transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;cursor:pointer}
.card:hover .card-cta{background:var(--accent-deep);color:#fff;box-shadow:0 8px 22px rgba(10,24,32,.18);transform:translateY(-1px)}
.card-cta svg{transition:transform .22s ease}
.card:hover .card-cta svg{transform:translateX(3px)}
html.dark .card-cta{border-color:var(--accent);color:var(--accent)}
html.dark .card:hover .card-cta{background:var(--accent);color:var(--ink)}
/* Bouton adresse Maps : couleurs explicites (les variables --ink/--paper sont permutées dans les zones sombres) */
.btn-map{background:var(--accent-deep)!important;color:#fff!important;border:1px solid var(--accent-deep)!important;font-size:13px;font-weight:600;text-decoration:none;margin-top:4px;box-shadow:0 6px 16px rgba(10,24,32,.25)}
.btn-map svg{transition:transform .25s ease;stroke:#fff}
.btn-map:hover{transform:translateY(-2px);background:var(--accent)!important;border-color:var(--accent)!important;box-shadow:0 10px 24px rgba(10,24,32,.34)}
.btn-map:hover svg{transform:scale(1.12)}
/* Editorial insert */
.card.editorial{background:var(--ink);color:var(--paper);padding:30px;border-radius:var(--r-lg);display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:auto;position:relative;overflow:hidden}
.card.editorial::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;opacity:.25;z-index:0}
.card.editorial > *{position:relative;z-index:1}
.card.editorial .ed-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--accent);text-transform:uppercase;margin-bottom:14px}
.card.editorial .ed-title{font-family:var(--serif);font-size:32px;line-height:1.05;letter-spacing:-.8px;margin-bottom:14px}
.card.editorial .ed-title em{font-style:italic;color:var(--accent)}
.card.editorial .ed-desc{font-size:13.5px;color:rgba(246,242,234,.78);line-height:1.55;margin-bottom:20px;flex:1}
.card.editorial .ed-link{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--paper)}
.card.editorial .ed-link::after{content:"→";color:var(--accent)}
/* ─── ATMOSPHERIC BAND ───────────────────────────────────── */
.atmos{position:relative;margin:80px -32px 0;height:340px;overflow:hidden;border-radius:0}
.atmos-img{position:absolute;inset:0;background-size:cover;background-position:center}
.atmos-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,24,32,.7) 0%,rgba(10,24,32,.35) 50%,rgba(10,24,32,.7) 100%)}
.atmos-text{position:relative;z-index:2;color:var(--paper);height:100%;max-width:1200px;width:100%;margin:0 auto;padding:0 5vw;display:flex;flex-direction:column;justify-content:center}
.atmos-text .label{font-family:var(--mono);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;
text-shadow:0 1px 3px rgba(0,0,0,.50),0 0 20px rgba(0,0,0,.30);
}
.atmos-text h3{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.5vw,60px);line-height:1.05;letter-spacing:-1px;max-width:20ch;
text-shadow:
0 1px 0 rgba(255,255,255,.18),
0 -1px 0 rgba(0,0,0,.22),
0 2px 4px rgba(0,0,0,.60),
0 5px 16px rgba(0,0,0,.45),
0 12px 40px rgba(0,0,0,.30),
2px 3px 8px rgba(0,0,0,.35),
-1px -1px 0 rgba(255,255,255,.06);
}
.atmos-text h3 em{font-style:italic;color:var(--accent);
text-shadow:
0 1px 0 rgba(255,255,255,.20),
0 2px 6px color-mix(in srgb,var(--accent) 70%,black),
0 6px 20px color-mix(in srgb,var(--accent) 50%,black),
0 14px 44px rgba(0,0,0,.35),
1px 2px 4px rgba(0,0,0,.40);
}
.atmos-text p{font-size:clamp(13px,1.3vw,16px);color:rgba(246,242,234,.85);margin-top:12px;max-width:52ch;line-height:1.6;
text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
}
/* ─── QUOTE BAND ─────────────────────────────────────────── */
.quote-band{max-width:1480px;margin:80px auto 0;padding:0 32px}
.quote-card{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:32px;padding:56px;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.quote-card::before{content:"“";position:absolute;font-family:var(--serif);font-size:340px;color:var(--accent);opacity:.10;top:-90px;left:-10px;line-height:1}
.quote-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-deep);margin-bottom:16px}
.quote-card h3{font-family:var(--serif);font-size:44px;font-weight:400;line-height:1.05;letter-spacing:-1px;margin-bottom:18px}
.quote-card h3 em{font-style:italic;color:var(--accent-deep)}
.quote-card p{font-size:15px;color:var(--muted-2);line-height:1.65;max-width:46ch;margin-bottom:24px}
.quote-side{display:flex;flex-direction:column;gap:14px}
.qs-row{display:flex;align-items:center;gap:14px;padding:14px 16px;overflow:hidden;position:relative;
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(10,24,32,.05) 100%);
backdrop-filter:blur(12px) saturate(1.2);
-webkit-backdrop-filter:blur(12px) saturate(1.2);
border:1px solid rgba(10,24,32,.08);
border-top-color:rgba(255,255,255,.92);
border-radius:999px;
box-shadow:
0 12px 36px rgba(10,24,32,.20),0 4px 12px rgba(10,24,32,.14),
inset 0 3px 0 rgba(255,255,255,1),
inset 0 12px 28px rgba(255,255,255,.75),
inset 5px 0 18px rgba(255,255,255,.18),
inset -5px 0 18px rgba(255,255,255,.18),
inset 0 -5px 12px rgba(0,0,0,.12),
inset 0 -2px 0 rgba(0,0,0,.07);
transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .15s;
}
/* Miroir glissant sur les qs-rows */
.qs-row::before{
content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.46) 50%,transparent 100%);
transform:skewX(-10deg);
transition:left .48s cubic-bezier(.2,.7,.3,1);
z-index:5;pointer-events:none;opacity:0;
}
a.qs-row:hover::before{left:160%;opacity:1}
a.qs-row:hover{
transform:translateY(-3px);
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(10,24,32,.05) 100%);
border-color:rgba(10,24,32,.14);
border-top-color:rgba(255,255,255,.98);
box-shadow:
0 18px 48px rgba(10,24,32,.28),0 6px 16px rgba(10,24,32,.18),
inset 0 3px 0 rgba(255,255,255,1),
inset 0 14px 32px rgba(255,255,255,.90),
inset 5px 0 20px rgba(255,255,255,.24),
inset -5px 0 20px rgba(255,255,255,.24),
inset 0 -6px 14px rgba(0,0,0,.14),
inset 0 -2px 0 rgba(0,0,0,.09);
color:var(--ink);
}
.qs-glyph{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.qs-row b{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.2px;display:block}
.qs-row span{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
/* ─── FOOTER ─────────────────────────────────────────────── */
footer{background:var(--ink);color:var(--paper);margin-top:100px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;background-image:var(--footer-bg)}
.ft-inner{position:relative;z-index:2;max-width:1480px;margin:0 auto;padding:80px 32px 32px}
.ft-mega{font-family:var(--serif);font-weight:400;font-size:clamp(60px,9vw,160px);line-height:.9;letter-spacing:-3px;margin-bottom:50px}
.ft-mega em{font-style:italic;color:var(--accent)}
/* Bande de confiance / certifications */
.trust-band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 50px;padding:26px 0;border-top:1px solid rgba(246,242,234,.16);border-bottom:1px solid rgba(246,242,234,.16)}
.trust-badge{display:flex;align-items:center;gap:14px}
.trust-badge svg{width:34px;height:34px;flex-shrink:0;color:var(--accent);stroke:var(--accent)}
.trust-badge b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:-.2px;color:var(--paper);line-height:1.15}
.trust-badge span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(246,242,234,.55);margin-top:3px}
@media(max-width:860px){.trust-band{grid-template-columns:repeat(2,1fr);gap:20px 16px}}
@media(max-width:480px){.trust-band{grid-template-columns:1fr;gap:16px;margin-bottom:36px}}
.ft-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-top:36px;border-top:1px solid rgba(246,242,234,.16)}
.ft-cols h4{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(246,242,234,.55);margin-bottom:18px;font-weight:500}
.ft-cols ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ft-cols a{color:rgba(246,242,234,.82);font-size:14px;transition:color .15s}
.ft-cols a:hover{color:var(--accent)}
.ft-contact b{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.4px;display:block;margin-bottom:4px}
.ft-contact p{font-size:13px;color:rgba(246,242,234,.78);line-height:1.65}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;margin-top:48px;border-top:1px solid rgba(246,242,234,.16);font-family:var(--mono);font-size:11px;color:rgba(246,242,234,.5);letter-spacing:1px;text-transform:uppercase}
/* ─── BON PLAN ───────────────────────────────────────────── */
.bp-grid{display:flex;flex-direction:column;gap:32px}
.bp-card{
background:var(--paper);border:1px solid var(--line-soft);border-radius:24px;
overflow:visible; /* pas de clipping sur le ribbon */
display:flex;flex-direction:row;
min-height:420px;box-shadow:var(--shadow-sm);
position:relative;
transition:transform .3s cubic-bezier(.2,.7,.3,1)
}
.bp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bp-inner{border-radius:24px;overflow:hidden;display:flex;flex-direction:row;width:100%}
.bp-photos{
background:#fff;flex:1.1;
display:grid;grid-template-columns:1fr 1fr;
border-right:1px solid var(--line-soft);position:relative;min-height:300px
}
.bp-photos.single{grid-template-columns:1fr;flex:1}
.bp-photos.multi > div{padding:14px;border-left:none}
.bp-photos.multi > div:nth-child(2n){border-left:1px solid var(--line-soft)}
.bp-photos.multi > div:nth-child(n+3){border-top:1px solid var(--line-soft)}
.bp-photos.multi img{max-height:135px}
.bp-photos > div{padding:12px;display:flex;align-items:center;justify-content:center;background:#fff;position:relative}
.bp-photos > div + div{border-left:1px solid var(--line-soft)}
.bp-photos img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.bp-ph{width:100%;min-height:200px;align-self:stretch;border-radius:12px;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 85% -10%,color-mix(in srgb,var(--accent) 55%,transparent) 0%,transparent 55%),linear-gradient(160deg,#10242f 0%,#0a1820 100%);color:#f6f2ea;font-family:var(--serif);font-size:clamp(34px,7vw,52px);letter-spacing:-1px}
.bp-ph em{color:var(--accent);font-style:normal}
.bp-card:hover .bp-photos img{transform:scale(1.04)}
/* Ribbon positionné sur bp-card (pas bp-photos) → jamais clippé */
.bp-ribbon{
position:absolute;top:20px;left:20px;z-index:10;
background:var(--coral);color:#fff;
font-family:var(--serif);font-style:italic;font-size:34px;letter-spacing:-.5px;
padding:14px 22px;border-radius:14px;line-height:1;
box-shadow:0 12px 24px -8px rgba(193,18,28,.4);
transform:rotate(-3deg);pointer-events:none
}
.bp-ribbon small{display:block;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;margin-top:4px;opacity:.9}
.bp-pin{position:absolute;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);background:rgba(246,242,234,.92);backdrop-filter:blur(4px);padding:4px 10px;border-radius:999px}
.bp-photos > div:first-of-type .bp-pin{left:14px}
.bp-photos > div:last-of-type .bp-pin{right:14px}
.bp-photos.single > div .bp-pin{left:14px;right:auto}
.bp-body{flex:1;padding:44px;display:flex;flex-direction:column;justify-content:center;gap:14px;background:var(--paper)}
.bp-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--coral);display:inline-flex;align-items:center;gap:10px}
.bp-eyebrow::before{content:"";width:24px;height:1px;background:var(--coral)}
.bp-card h3{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.05;letter-spacing:-.8px;color:var(--ink)}
.bp-card h3 em{font-style:italic;color:var(--coral)}
.bp-desc{font-size:15px;color:var(--muted-2);line-height:1.6}
.bp-meta{display:flex;gap:24px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line-soft);margin-top:8px}
.bp-meta-it{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bp-meta-it b{color:var(--ink);font-family:var(--serif);font-style:italic;font-size:20px;font-weight:400;display:block;letter-spacing:-.3px;text-transform:none;margin-top:2px}
.bp-cta-row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.bp-empty{padding:80px 40px;text-align:center;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:22px}
/* ─── PRODUCT DETAIL MODAL ───────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(10,24,32,.65);backdrop-filter:blur(10px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto;box-sizing:border-box;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.scrim.on{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--paper);width:100%;max-width:min(1020px,calc(100vw - 32px));max-height:90vh;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:minmax(0,1fr);animation:rise .35s cubic-bezier(.2,.7,.3,1);box-shadow:var(--shadow-lg)}
@keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.sheet-img{background:#fff;position:relative;min-height:320px;max-height:55vw;display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden;cursor:zoom-in}
.sheet-img img{max-width:100%;max-height:min(400px,45vw);object-fit:contain}
.sheet-zoom-lens{position:absolute;width:160px;height:160px;border-radius:50%;border:3px solid #fff;box-shadow:0 10px 30px rgba(10,24,32,.35),0 0 0 1px rgba(10,24,32,.08);background-repeat:no-repeat;background-color:#fff;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:6}
.sheet-img-placeholder{font-family:var(--serif);font-size:160px;color:var(--paper-3);font-style:italic}
/* ── Repli image : logo de marque (fond adapté à la luminosité du logo) ── */
.brand-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16%;
background:linear-gradient(157deg,#173550 0%,#0c2034 100%)}
.brand-fallback.light{background:linear-gradient(157deg,#eef2f6 0%,#dbe3ea 100%)}
.brand-fallback img{max-width:100%;max-height:78%;object-fit:contain;
filter:drop-shadow(0 2px 7px rgba(0,0,0,.28));pointer-events:none}
.sheet-img .brand-fallback{padding:10%}
.sheet-img .brand-fallback img{max-height:62%}
.sheet-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;background:var(--paper);box-shadow:var(--shadow-sm);z-index:5;display:inline-flex;align-items:center;justify-content:center}
.sheet-body{padding:52px 48px;display:flex;flex-direction:column;gap:18px;background:var(--paper);min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;word-break:break-word}
.sheet-brand{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.sheet-body h2{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.05;letter-spacing:-.8px}
.sheet-desc{font-size:14.5px;color:var(--muted-2);line-height:1.7}
.sheet-spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;margin:6px 0}
.sheet-spec div{padding:14px 16px;background:var(--paper)}
.sheet-spec dt{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sheet-spec dd{font-size:14px;font-weight:500}
.tech-compare{margin-top:8px;padding-top:18px;border-top:1px solid var(--line-soft)}
.tech-compare-title{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.tcc-compare-toggle{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);cursor:pointer;user-select:none;background:var(--paper);padding:3px 8px 3px 6px;border-radius:999px;border:1px solid var(--line-soft)}
.tcc-compare-toggle input{width:13px;height:13px;accent-color:var(--accent);cursor:pointer;margin:0}
.tech-compare-goto{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--accent-deep);color:var(--accent-deep);border-radius:999px;padding:6px 13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.tech-compare-goto:hover{background:var(--accent-deep);color:#fff}
html.dark .tech-compare-goto{border-color:var(--accent);color:var(--accent)}
html.dark .tech-compare-goto:hover{background:var(--accent);color:var(--ink)}
.compare-group-block{margin-bottom:24px}
.compare-group-block:last-child{margin-bottom:0}
.compare-group-title{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:16px;margin-bottom:10px;color:var(--ink)}
.compare-group-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-soft);color:var(--muted);font-family:var(--mono);font-size:10px;font-weight:800}
.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;border:1px solid var(--line-soft)}
.compare-table{border-collapse:collapse;width:100%;min-width:420px}
.compare-table th,.compare-table td{padding:10px 14px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top;font-size:13px;color:var(--ink)}
.compare-table thead th{border-bottom:2px solid var(--line-soft);vertical-align:bottom;background:var(--paper-2)}
.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table tbody tr:nth-child(even) td{background:var(--paper-2)}
.compare-th-label,.compare-row-label{position:sticky;left:0;z-index:2;background:var(--paper);font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap;min-width:120px;box-shadow:1px 0 0 var(--line-soft)}
.compare-table tbody tr:nth-child(even) .compare-row-label{background:var(--paper-2)}
.compare-table td:not(.compare-row-label),.compare-table th:not(.compare-th-label){min-width:170px}
.compare-col-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:relative;padding-right:22px}
.compare-remove-btn{position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-soft);background:var(--paper);color:var(--muted);cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.compare-remove-btn:hover{background:var(--paper-2);color:var(--ink)}
.compare-thumb-sm{width:44px;height:44px;border-radius:8px;background:#fff;border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.compare-thumb-sm img{width:100%;height:100%;object-fit:contain}
.compare-col-name{font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.3}
.compare-empty{padding:40px 20px;text-align:center;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:17px}
.tcc-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px}
.tcc-spec{min-width:0}
.tcc-label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.tcc-val{display:block;font-size:12px;color:var(--muted-2);line-height:1.4}
.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:18px;border-top:1px solid var(--line-soft);margin-top:6px}
.sheet-price{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--muted-2)}
.sheet-cta{display:flex;gap:10px}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#000}
.btn-line{border:1px solid var(--line);color:var(--ink)}
.btn-line:hover{background:var(--paper-2)}
/* ─── ADMIN ──────────────────────────────────────────────── */
.admin-scrim{position:fixed;inset:0;background:rgba(10,24,32,.7);backdrop-filter:blur(12px);z-index:200;display:none;align-items:center;justify-content:center}
.admin-scrim.on{display:flex;animation:fade .2s}
.admin-box{background:var(--paper);border-radius:20px;padding:48px 44px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);animation:rise .3s cubic-bezier(.2,.7,.3,1)}
.admin-box h3{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.6px;margin-bottom:6px}
.admin-box p{font-size:13px;color:var(--muted-2);margin-bottom:28px;line-height:1.5}
.admin-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.admin-field label{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.admin-field input{padding:12px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;background:var(--paper);color:var(--ink);outline:none;transition:border-color .15s}
.admin-field input:focus{border-color:var(--ink)}
.admin-error{font-size:12.5px;color:var(--coral);margin-bottom:12px;min-height:18px}
.admin-actions{display:flex;gap:10px;margin-top:8px}
.admin-bar{position:fixed;top:0;left:0;right:0;z-index:79;background:var(--ink);color:var(--paper);padding:9px 32px;display:none;align-items:center;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:1.2px}
.admin-bar.on{display:flex}
.admin-bar .ab-dot{width:7px;height:7px;border-radius:50%;background:#76d6a8;box-shadow:0 0 8px #76d6a8}
.admin-bar .ab-logout{margin-left:auto;padding:5px 12px;color:rgba(246,242,234,.75);cursor:pointer}
body.admin-mode{padding-top:calc(var(--stack-h,120px) + 36px)}
.admin-bar .ab-logout:hover{border-color:var(--paper);color:var(--paper)}
.card-admin-overlay{position:absolute;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:space-between;padding:10px;background:linear-gradient(180deg,rgba(10,24,32,.72) 0%,transparent 40%,transparent 60%,rgba(10,24,32,.72) 100%);border-radius:var(--r-lg)}
body.admin-mode .card-img .card-admin-overlay{display:flex}
body.admin-mode .card:hover{transform:none}
.ca-top{display:flex;gap:6px;width:100%}
.ca-btn{flex:1;padding:5px 0;color:var(--paper);font-size:11px;font-family:var(--mono);cursor:pointer}
.stock-sel{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:6px 10px;color:#f6f2ea;cursor:pointer;width:100%}
.stock-sel:focus{outline:none;border-color:var(--paper)}
body.admin-mode .icon-btn[data-role="admin"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Boutons effets eau et son */
#hdr-wave, #hdr-sound{font-size:15px;line-height:1}
.icon-btn.fx-off{opacity:.4;filter:grayscale(1)}
#admin-btn{opacity:.28;transform:scale(.85);background:transparent !important;border-color:transparent !important;box-shadow:none !important;transition:opacity .2s,transform .2s}
#admin-btn:hover{opacity:.65;transform:scale(.92)}
body.admin-mode #admin-btn{opacity:1;transform:scale(1);background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important;box-shadow:0 0 0 2px rgba(255,255,255,.4) !important}
/* ─── PRODUCT EDIT MODAL ─────────────────────────────────── */
.prod-modal{position:fixed;inset:0;background:rgba(10,24,32,.7);backdrop-filter:blur(10px);z-index:250;display:none;align-items:flex-start;justify-content:center;padding:40px 24px;overflow-y:auto}
.prod-modal.on{display:flex;animation:fade .2s}
.prod-modal-box{background:var(--paper);border-radius:20px;width:100%;max-width:620px;overflow:hidden;box-shadow:var(--shadow-lg);animation:rise .3s cubic-bezier(.2,.7,.3,1)}
.pm-head{padding:22px 28px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between}
.pm-head h3{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.4px}
.pm-body{padding:24px 28px;display:flex;flex-direction:column;gap:16px;max-height:60vh;max-height:60dvh;overflow-y:auto}
.pm-foot{padding:18px 28px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:flex-end;gap:10px}
.fgroup{display:flex;flex-direction:column;gap:6px}
.fgroup label{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.fgroup input,.fgroup select,.fgroup textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px;background:var(--paper);color:var(--ink);outline:none;transition:border-color .15s}
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus{border-color:var(--ink)}
.fgroup textarea{resize:vertical;min-height:72px}
.hint{font-size:11px;color:var(--muted);margin-top:3px}
.pm-prev{max-height:100px;border-radius:8px;object-fit:contain;display:none;margin-top:6px;border:1px solid var(--line-soft)}
.bdg-row{display:flex;gap:8px;flex-wrap:wrap}
.bo{padding:6px 14px;border-radius:6px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.8px;cursor:pointer;color:var(--muted-2);transition:all .15s}
.bo:hover{border-color:var(--ink);color:var(--ink)}
.bo.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bo.active-promo{background:var(--coral);color:#fff;border-color:var(--coral)}
.bo.active-dispo{background:var(--olive);color:#fff;border-color:var(--olive)}
.bo.active-rupture{background:var(--coral);color:#fff;border-color:var(--coral)}
.bo.active-bientot{background:var(--ocre);color:#000;border-color:var(--ocre)}
.bo.active-commande{background:#a89460;color:#fff;border-color:#a89460}
.btn-danger-sm{padding:6px 14px;border-radius:6px;border:1px solid var(--coral);color:var(--coral);font-family:var(--mono);font-size:11px;cursor:pointer;background:transparent;transition:all .15s}
.btn-danger-sm:hover{background:var(--coral);color:#fff}
.admin-add-btn{display:none;margin-top:24px;padding:13px;border:2px dashed var(--line);border-radius:var(--r-lg);text-align:center;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);transition:all .2s}
.admin-add-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}
body.admin-mode .admin-add-btn{display:block}
#toast{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 26px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;z-index:400;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
/* ─── MOBILE SEARCH ──────────────────────────────────────── */
.mob-search-btn{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);align-items:center;justify-content:center;color:var(--muted-2);transition:all .15s}
.mob-search-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mob-search-bar{display:none;position:fixed;top:0;left:0;right:0;z-index:110;background:var(--paper);border-bottom:1px solid var(--line-soft);padding:14px 18px;gap:12px;align-items:center;box-shadow:var(--shadow)}
.mob-search-bar.on{display:flex;animation:fade .15s}
.mob-search-bar input{flex:1;border:0;background:transparent;outline:none;font:inherit;font-size:15px;color:var(--ink)}
.mob-search-bar input::placeholder{color:var(--muted)}
.mob-search-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--muted-2);flex-shrink:0;cursor:pointer}
/* ── Grands écrans : élargir le contenu et densifier la grille ── */
@media (min-width:1440px){
.util-inner, .hdr-inner, .strip-inner, .quote-band, .ft-inner{max-width:1560px}
main{max-width:1560px; padding-left:24px; padding-right:24px; grid-template-columns:240px 1fr; gap:42px}
.grid{grid-template-columns:repeat(5,1fr); gap:22px 16px}
}
@media (min-width:1700px){
.util-inner, .hdr-inner, .strip-inner, .quote-band, .ft-inner{max-width:1760px}
main{max-width:1760px; grid-template-columns:260px 1fr; gap:48px}
.grid{grid-template-columns:repeat(6,1fr); gap:24px 18px}
}
@media (min-width:2000px){
.util-inner, .hdr-inner, .strip-inner, .quote-band, .ft-inner{max-width:1960px}
main{max-width:1960px; grid-template-columns:280px 1fr; gap:56px}
.grid{grid-template-columns:repeat(7,1fr)}
}
@media (min-width:2560px){
.util-inner, .hdr-inner, .strip-inner, .quote-band, .ft-inner{max-width:2360px}
main{max-width:2360px}
.grid{grid-template-columns:repeat(7,1fr); gap:28px 22px}
}
/* ════════ RESPONSIVE AVANCÉ ════════ */
/* Écrans ultra-larges 4K+ : 8 colonnes */
@media (min-width:3200px){
.util-inner, .hdr-inner, .strip-inner, .quote-band, .ft-inner, main{max-width:3000px}
.grid{grid-template-columns:repeat(8,1fr); gap:32px 26px}
html{font-size:18px}
}
/* Encoche iPhone / safe-area : décale le contenu hors de la barre système */
@supports (padding:max(0px)){
.util{ padding-top:env(safe-area-inset-top); }
.util-inner{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
.hdr-inner{ padding-left:max(32px, env(safe-area-inset-left)); padding-right:max(32px, env(safe-area-inset-right)); }
.ft-inner{ padding-left:max(32px, env(safe-area-inset-left)); padding-right:max(32px, env(safe-area-inset-right)); padding-bottom:max(32px, env(safe-area-inset-bottom)); }
#scroll-top{ bottom:max(24px, env(safe-area-inset-bottom)); right:max(24px, env(safe-area-inset-right)); }
.mob-search-bar{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
}
/* Champs texte < 16px = zoom automatique iOS au focus (et la page reste zoomée après).
On force 16px minimum sur les vrais champs texte mobiles. Le tri (select) ne déclenche
pas ce zoom (picker natif), mais on l'aligne aussi à 16px par cohérence et lisibilité,
vu qu'il grandit déjà à 44px de haut sur cette même largeur d'écran. */
@media (max-width:768px){
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], input[type="url"], input[type="password"],
input:not([type]), textarea, .sort-select{ font-size:16px !important; }
}
/* Contraste élevé (accessibilité système) */
@media (prefers-contrast:more){
.univ-tab, .btn, .filter-chip, .icon-btn{ border-width:2px !important; }
.card{ border-width:1.5px !important; }
:root{ --muted:#444; --muted-2:#333; }
html.dark{ --muted:#bbb; --muted-2:#ccc; }
}
/* Économie de données : ne pas charger les fonds photo lourds */
@media (prefers-reduced-data:reduce){
.hero-photo, .atmos-img{ background-image:none !important; background:linear-gradient(135deg,#0e1f2e,#1a2d40) !important; }
}
/* Très petits écrans en hauteur (paysage extrême) : compacter le hero */
@media (max-height:380px){
.hero{ min-height:auto !important; padding:20px 0 !important; }
.hero h1{ font-size:clamp(28px,8vw,48px) !important; }
}
/* Appareils tactiles : cibles de clic plus grandes (≥44px Apple HIG) */
@media (hover:none) and (pointer:coarse){
.univ-tab{ min-height:42px; }
.icon-btn{ min-width:42px; min-height:42px; }
.sc{ min-height:40px; }
.btn{ min-height:42px; }
.filter-chip{ min-height:44px; display:inline-flex; align-items:center; }
.sort-select{ min-height:44px; }
}
/* Orientation portrait sur grand écran (tablette debout) : grille adaptée */
@media (min-width:768px) and (max-width:1100px) and (orientation:portrait){
.grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:1100px){
.mob-search-btn{display:inline-flex}
/* Bon plan — mobile/tablette */
.bp-card{min-height:auto}
.bp-inner{flex-direction:column}
.bp-photos{border-right:0;border-bottom:1px solid var(--line-soft);min-height:260px;grid-template-columns:1fr 1fr}
.bp-photos img{max-height:100%}
.bp-ribbon{font-size:22px;padding:8px 14px;top:12px;left:12px}
.bp-body{padding:28px 24px;flex:none;width:100%}
.bp-card h3{font-size:28px}
}
.admin-users-scrim{position:fixed;inset:0;background:rgba(10,24,32,.7);backdrop-filter:blur(10px);z-index:200;display:none;align-items:center;justify-content:center;padding:40px 24px}
.admin-users-scrim.on{display:flex;animation:fade .2s}
.admin-users-box{background:var(--paper);border-radius:20px;width:100%;max-width:820px;overflow:hidden;box-shadow:var(--shadow-lg);animation:rise .3s cubic-bezier(.2,.7,.3,1)}
.admin-users-head{padding:28px 32px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between}
.admin-users-head h3{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.4px}
.admin-users-body{max-height:420px;overflow-y:auto}
.admin-users-body table{width:100%;border-collapse:collapse;font-size:13.5px}
.admin-users-body tr{border-bottom:1px solid var(--line-soft)}
.admin-users-body tr:last-child{border-bottom:0}
.admin-users-body th{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);padding:10px 14px;text-align:left;background:var(--paper-2)}
/* ─── ADMIN PANEL ────────────────────────────────────────── */
.adpanel-overlay{position:fixed;inset:0;z-index:260;background:var(--paper-2);overflow-y:auto;display:none}
.adpanel-overlay.on{display:block;animation:fade .2s}
.adpanel-hdr{background:var(--ink);color:var(--paper);padding:36px 48px 32px;position:relative}
.adpanel-badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border:1px solid rgba(246,242,234,.3);border-radius:999px;color:var(--ocre);margin-bottom:16px}
.adpanel-hdr h1{font-family:"Exo 2","Inter",sans-serif;font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:-.5px;margin-bottom:10px}
.adpanel-hdr p{font-size:14px;color:rgba(246,242,234,.7);max-width:50ch}
.adpanel-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;color:rgba(246,242,234,.7);font-size:20px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.adpanel-close:hover{border-color:var(--paper);color:var(--paper);background:rgba(246,242,234,.1)}
.adpanel-body{max-width:1100px;margin:0 auto;padding:40px 48px 80px;display:flex;flex-direction:column;gap:32px}
.adcard{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 2px 16px rgba(10,24,32,.06)}
html.dark .adcard{background:var(--paper-3);box-shadow:0 2px 16px rgba(0,0,0,.35)}
.adcard-head{padding:24px 32px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:14px}
.adcard-head h2{font-family:var(--sans);font-size:20px;font-weight:600;color:var(--ink)}
.adcard-icon{font-size:24px;line-height:1}
.adcard-body{padding:28px 32px;display:flex;flex-direction:column;gap:20px}
/* Users */
.aduser-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:999px;border:1px solid var(--line-soft);background:var(--paper)}
.aduser-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;color:#fff}
.aduser-info{flex:1;min-width:0}
.aduser-name{font-weight:600;font-size:14px;color:var(--ink)}
.aduser-email{font-family:var(--mono);font-size:11px;color:var(--muted)}
.aduser-role{font-family:var(--mono);font-size:10px;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;border-radius:4px;white-space:nowrap}
.aduser-role.super{background:var(--ink);color:var(--paper)}
.aduser-role.admin{background:var(--paper-2);color:var(--muted-2)}
.aduser-del{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;font-size:14px;background:transparent;transition:all .15s;flex-shrink:0}
.aduser-del:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.aduser-add{display:flex;gap:10px;margin-top:4px}
.aduser-add input{flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;outline:none;transition:border-color .15s}
.aduser-add input:focus{border-color:var(--ink)}
/* Themes */
.theme-grid{display:flex;gap:10px;flex-wrap:wrap}
.theme-btn{padding:8px 18px;border-radius:8px;border:2px solid transparent;cursor:pointer;font-weight:600;font-size:13px;color:#fff;transition:all .15s;white-space:nowrap}
.theme-btn:hover{filter:brightness(1.1)}
.theme-btn.active{box-shadow:0 0 0 3px var(--ink)}
/* Sector colors */
.sector-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cat-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){ .cat-admin-grid{grid-template-columns:1fr;gap:18px} }
.sector-item{display:flex;flex-direction:column;gap:6px}
.sector-item label{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.sector-color-wrap{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:8px;background:var(--paper)}
.sector-color-wrap input[type=color]{width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;padding:0;background:none}
.sector-hex{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
/* Fonts */
.font-row{display:flex;gap:12px;flex-wrap:wrap}
.font-group{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px}
.font-group label{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.font-group select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:var(--paper);outline:none;cursor:pointer}
.font-preview{padding:10px 14px;border:1px solid var(--line-soft);border-radius:8px;background:var(--paper-2);font-size:16px;margin-top:4px;min-height:44px}
/* Hero photos */
.adm-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hero-item{display:flex;flex-direction:column;gap:8px}
.hero-item label{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.hero-thumb{height:80px;border-radius:8px;background-size:cover;background-position:center;border:1px solid var(--line-soft);position:relative;overflow:hidden}
.hero-thumb::after{content:'';position:absolute;inset:0;background:rgba(10,24,32,.25)}
.hero-item input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:10px;outline:none;background:var(--paper)}
.hero-item input:focus{border-color:var(--ink)}
/* Tabs */
.tab-fixed-list{display:flex;flex-direction:column;gap:8px}
.tab-fixed-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line-soft);border-radius:20px;background:var(--paper)}
.tab-fixed-icon{font-size:18px}
.tab-fixed-label{font-weight:600;font-size:14px;color:var(--ink);flex:1}
.tab-fixed-badge{font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:2px 7px;border-radius:4px;background:var(--paper-2);color:var(--muted);text-transform:uppercase}
.adpanel-section-label{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
/* Tableau de bord admin */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.dash-stat{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;padding:16px 18px;text-align:center}
.dash-stat-num{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1;color:var(--ink)}
.dash-stat-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:8px}
.dash-stat.warn .dash-stat-num{color:var(--coral)}
.dash-stat.ok .dash-stat-num{color:var(--olive)}
.dash-alert{background:var(--paper-2);border-left:3px solid var(--coral);border-radius:8px;padding:12px 16px;margin-bottom:10px}
.dash-alert.ok{border-left-color:var(--olive)}
.dash-alert-title{font-weight:600;font-size:13.5px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.dash-alert-list{font-size:12.5px;color:var(--muted-2);line-height:1.7;max-height:160px;overflow-y:auto}
.dash-alert-list .di{display:inline-block;background:var(--paper);border:1px solid var(--line-soft);border-radius:5px;padding:2px 8px;margin:2px 3px 2px 0;font-family:var(--mono);font-size:11px;cursor:pointer;transition:all .15s}
.dash-alert-list .di:hover{background:var(--ink);color:var(--paper)}
@media(max-width:760px){
.adpanel-hdr,.adpanel-body{padding-left:20px;padding-right:20px}
.sector-grid{grid-template-columns:repeat(2,1fr)}
.adm-photo-grid{grid-template-columns:1fr}
}
/* ─── HISTORIQUE RÉCENT ─────────────────────────────────── */
.recent-bar{background:var(--paper-2);border-top:1px solid var(--line-soft);padding:14px 20px}
.recent-bar-label{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.recent-strip{display:flex;gap:10px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.recent-strip::-webkit-scrollbar{display:none}
.recent-thumb{flex-shrink:0;width:64px;cursor:pointer;transition:transform .15s}
.recent-thumb:hover{transform:translateY(-2px)}
.recent-thumb img{width:64px;height:64px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--line-soft);padding:6px}
.recent-thumb .rt-name{font-size:10px;color:var(--muted-2);line-height:1.3;margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}
/* ─── PRODUITS SIMILAIRES ───────────────────────────────── */
.sheet-similar{border-top:1px solid var(--line-soft);padding-top:20px;margin-top:8px}
.sheet-similar-label{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.similar-grid{display:flex;gap:10px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch;touch-action:pan-x;scroll-snap-type:x proximity;scroll-behavior:smooth}
.similar-grid::-webkit-scrollbar{display:none}
.similar-grid .sim-card{scroll-snap-align:start}
.similar-wrap{position:relative}
.similar-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;box-shadow:var(--shadow-sm);color:var(--ink);transition:background .15s,color .15s,opacity .15s;padding:0}
.similar-arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.similar-arrow-left{left:-10px}
.similar-arrow-right{right:-10px}
@media (hover:none){ .similar-arrow{display:none} }
.sim-card{flex-shrink:0;width:110px;cursor:pointer;transition:transform .15s}
.sim-card:hover{transform:translateY(-2px)}
.sim-img{width:110px;height:90px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid var(--line-soft);padding:8px;display:block}
.sim-brand{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.sim-name{font-size:12px;font-weight:500;color:var(--ink);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* ─── BRAND FILTER ───────────────────────────────────────── */
.brand-link{
cursor:pointer;background:none;border:0;padding:0 2px;
color:var(--accent);font:inherit;display:inline;
border-bottom:1px solid currentColor;
transition:color .15s,background .15s,border-radius .15s;
border-radius:2px
}
.brand-link:hover{
background:rgba(246,242,234,.18);
border-bottom-color:transparent;
border-radius:4px
}
/* ── Marques : vignettes individuelles aspect bouton premium ───── */
.hero-brands{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;margin-bottom:28px;padding:0;background:transparent;box-shadow:none;border-radius:0;align-items:center;justify-content:flex-start;max-width:100%;width:100%}
.brand-pill{padding:8px 22px;border:none;background:transparent;color:rgba(246,242,234,.78);font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;white-space:nowrap;position:relative;display:inline-flex;align-items:center;justify-content:center;opacity:0;animation:pillFade .5s ease-out forwards;user-select:none;-webkit-user-select:none}
.brand-pill:nth-child(1){animation-delay:.05s}.brand-pill:nth-child(2){animation-delay:.10s}
.brand-pill:nth-child(3){animation-delay:.15s}.brand-pill:nth-child(4){animation-delay:.20s}
.brand-pill:nth-child(5){animation-delay:.25s}.brand-pill:nth-child(6){animation-delay:.30s}
.brand-pill:nth-child(7){animation-delay:.35s}.brand-pill:nth-child(8){animation-delay:.40s}
.brand-pill:nth-child(9){animation-delay:.45s}.brand-pill:nth-child(10){animation-delay:.50s}
/* ── Curseur : forcer héritage sur tous les enfants des interactifs ── */
.sc *, .univ-tab *, .filter-chip *, .brand-pill *,
.crumb-link *, .strip-inner *,
.icon-btn *, .btn *,
.sort-select *{
cursor:inherit;
user-select:none;
-webkit-user-select:none;
}
/* Le conteneur hero-brands ne doit jamais montrer le curseur texte */
.hero-brands{cursor:default}
.hero-brands .brand-pill{cursor:pointer}
@keyframes pillFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Vignette bouton : carte blanche surélevée avec gradient subtil */
.brand-pill.has-logo{
width:150px;
overflow:hidden;
position:relative;
}
/* Reflet glissant (même principe que les cards) */
.brand-pill.has-logo::before{
content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.52) 50%,transparent 100%);
transform:skewX(-12deg);
transition:left .55s cubic-bezier(.2,.7,.3,1);
z-index:5;pointer-events:none;opacity:0;border-radius:inherit;
}
.brand-pill.has-logo:hover::before{left:160%;opacity:1}
.brand-pill.has-logo:active{
box-shadow:
0 4px 12px rgba(0,0,0,.22),
0 1px 3px rgba(0,0,0,.14),
inset 0 2px 0 rgba(255,255,255,.55),
inset 0 4px 10px rgba(255,255,255,.08);
}
.brand-pill.has-logo.on img{mix-blend-mode:normal}
.brand-pill.has-logo:hover img{transform:scale(1.04)}
/* Logos verticaux ou avec symbole → plus hauts */
.brand-pill.has-logo img[alt="SHEARWATER"],
.brand-pill.has-logo img[alt="SCUBAPRO"]{height:48px;max-width:110px}
.brand-pill.has-logo img[alt="BEUCHAT"]{height:32px}
/* CRESSI ratio très large */
.brand-pill.has-logo img[alt="CRESSI"]{height:30px}
.brand-pill.has-logo img[alt="AQUALUNG MILITARY"]{height:34px}
/* Logos non cliquables (Aqualung Military) */
.brand-pill.extra{cursor:default}
.brand-pill.extra:hover{transform:none}
.brand-pill.extra:hover img{transform:none}
.chip-clear{font-family:var(--mono);font-size:10px;letter-spacing:.8px;color:var(--coral);background:none;border:1px solid rgba(193,18,28,.4);border-radius:999px;padding:2px 8px;cursor:pointer;margin-left:6px;transition:all .15s;vertical-align:middle}
.chip-clear:hover{background:var(--coral);color:#fff;border-color:var(--coral)}
.ba-toggle{position:fixed;bottom:24px;right:24px;z-index:90;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;display:inline-flex;gap:10px;align-items:center;box-shadow:var(--shadow-lg);cursor:pointer}
.ba-toggle .pill{background:var(--accent);color:var(--ink);padding:3px 8px;border-radius:999px;font-weight:600}
/* ─── RESPONSIVE ─────────────────────────────────────────── */
/* ── Tablette large 1280px ── */
@media (max-width:1280px){
.hdr-inner{padding:16px 24px;gap:20px}
.hero-grid{padding:80px 32px 90px}
.util-inner{padding:8px 24px}
.adpanel-body{padding:32px 24px 60px}
}
/* ── Tablette 1100px ── */
@media (max-width:1100px){
/* Util bar */
.util-left span:first-child{display:none} /* cache horaires sur tablette */
/* Header */
.search-pill{display:none}
.hdr-inner{padding:14px 18px;grid-template-columns:auto 1fr auto;gap:14px}
nav.universes{grid-column:1/-1;order:3;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:18px;overscroll-behavior-x:contain}
nav.universes::-webkit-scrollbar{display:none}
nav.universes .univ-tab{scroll-snap-align:start;flex-shrink:0}
/* Hero */
.hero-grid{padding:72px 32px 80px;min-height:520px}
.hero h1{font-size:clamp(44px,9vw,80px)}
.hero-lede{font-size:16px}
.hero-stats{gap:20px}
.stat-k{font-size:36px}
/* Sticky strip */
.strip-inner{padding:0 16px;flex-wrap:wrap;gap:6px}
/* Main layout */
main{grid-template-columns:1fr;gap:0;padding:0 0 60px;max-width:100%;box-sizing:border-box;min-width:0;width:100%}
aside.sb{
position:sticky;top:calc(var(--stack-h,120px) + var(--strip-h,46px) + var(--admin-offset,0px) - 2px);z-index:55;
width:100%;max-width:100%;box-sizing:border-box;
display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;
gap:6px;
padding:10px 18px;
margin-top:-1px;
background:var(--paper-2);
border-top:1px solid var(--line-soft);
border-bottom:1px solid var(--line-soft);
min-height:auto;
overflow-x:auto; overflow-y:hidden;
scrollbar-width:none; -ms-overflow-style:none;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
scroll-padding-left:18px;
overscroll-behavior-x:contain;
mask-image:linear-gradient(to right, #000 0%, #000 calc(100% - 30px), transparent 100%);
-webkit-mask-image:linear-gradient(to right, #000 0%, #000 calc(100% - 30px), transparent 100%);
}
aside.sb::-webkit-scrollbar{display:none}
aside.sb .sc{scroll-snap-align:start}
.sb h4{display:none !important}
.sb-card{display:none}
.sb-list{display:flex;flex-direction:row;gap:6px;flex-wrap:nowrap}
.sc{
flex-shrink:0;flex:none;
white-space:nowrap;
padding:7px 14px;
border-radius:999px;
font-size:12.5px;gap:6px;
border:1px solid var(--line);
background:var(--paper)
}
.sc.on{background:var(--ink);border-color:var(--ink)}
.sc-cnt{display:none}
.sc-thumb{display:none}
.sc.service{border-style:dashed}
section{padding:24px 20px 0}
/* Grid */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px}
.grid .card{min-width:0;max-width:100%}
/* Sheet modal */
.sheet{grid-template-columns:1fr;max-width:520px}
.sheet-img{min-height:300px;padding:24px}
.sheet-body{padding:36px 32px}
/* Footer */
.ft-cols{grid-template-columns:1fr 1fr;gap:24px}
.quote-card{grid-template-columns:1fr;padding:32px}
.quote-card h3{font-size:30px;letter-spacing:-.5px;overflow-wrap:break-word}
.quote-card p{font-size:14px;max-width:none}
/* Admin panel */
.adpanel-hdr,.adpanel-body{padding-left:20px;padding-right:20px}
.sector-grid{grid-template-columns:repeat(3,1fr)}
}
/* ── Mobile 768px ── */
@media (max-width:768px){
/* Util bar : une seule ligne compacte, icônes seules (texte accessible via aria-label/title) */
.util-inner{padding:7px 14px;gap:16px;flex-wrap:nowrap;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start}
.util-inner::-webkit-scrollbar{display:none}
.util-left, .util-right{gap:14px;flex-wrap:nowrap;white-space:nowrap;flex-shrink:0}
.util .ut-label{display:none}
.util a, .util .vf-btn{padding:4px;min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center}
.vf-controls{flex-shrink:0}
/* Header */
.hdr-inner{padding:12px 14px;gap:10px}
.brand-name{font-size:24px}
.brand-sub{display:none}
.univ-tab{padding:9px 14px;font-size:13px;flex-shrink:0}
.univ-tab .tab-full{display:none}
.univ-tab .tab-short{display:inline}
nav.universes{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start}
/* Onglets univers : seuls les 3 premiers restent visibles, le reste dans « Plus »
(uniquement sur mobile — demande STIM du 16/07) */
nav.universes .univ-tab[data-u="bonplan"],
nav.universes .univ-tab[data-u="location"],
nav.universes .univ-tab[data-u="about"]{display:none}
.univ-more{display:inline-flex}
/* Hero */
.hero-grid{padding:56px 20px 64px;min-height:480px;grid-template-columns:1fr}
.hero h1{font-size:clamp(38px,12vw,60px);letter-spacing:-1.5px}
.hero-lede{font-size:15px;margin-bottom:24px}
.hero-brands{padding:0;gap:8px;background:transparent;box-shadow:none}
.brand-pill{font-size:9px;padding:4px 10px}
.brand-pill.has-logo{padding:0 12px;height:54px;width:124px;min-width:124px;max-width:124px;flex:0 0 124px;border-radius:999px}
.brand-pill.has-logo img{height:34px;max-width:130px}
.brand-pill.has-logo img[alt="SHEARWATER"],
.brand-pill.has-logo img[alt="SCUBAPRO"]{height:44px;max-width:100px}
.brand-pill.has-logo img[alt="BEUCHAT"]{height:30px;max-width:130px}
.brand-pill.has-logo img[alt="CRESSI"]{height:30px;max-width:170px}
.brand-pill.has-logo img[alt="BEST DIVER"],
.brand-pill.has-logo img[alt="AQUALUNG MILITARY"]{max-width:160px}
.hero-stats{grid-template-columns:repeat(3,1fr);gap:14px;padding-top:20px;max-width:100%}
.stat-k{font-size:28px}
.stat-l{font-size:9px;letter-spacing:1px}
.hero-cta-row{gap:10px}
.btn{padding:11px 18px;font-size:13px}
.hero-meta{display:none}
/* Strip */
.strip-inner{padding:0 14px;gap:8px}
.strip-right{gap:6px}
.filter-chip{font-size:10px;padding:5px 10px}
/* Main — padding latéral symétrique */
main{padding:0 0 40px}
section{padding:20px 16px 0}
aside.sb{padding:8px 16px;flex-wrap:nowrap;align-items:center}
.sc{padding:5px 10px;font-size:11.5px}
.section-head{flex-direction:row;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:14px}
.section-head h2{font-size:26px;letter-spacing:-.8px;white-space:nowrap}
.section-head .meta{text-align:right;flex-shrink:0}
.section-head .meta b{font-size:18px;margin-bottom:2px}
.section-head .meta span{font-size:9px;letter-spacing:1px}
/* Grid — 3 colonnes sur mobile (cartes adaptatives) */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px}
.card-img{aspect-ratio:1/1;border-radius:10px}
.card-img img{padding:14px}
.card-body{padding:8px 2px 2px;gap:3px}
.card-brand{font-size:8px;letter-spacing:1px}
.card-name{font-size:13px;letter-spacing:-.2px;-webkit-line-clamp:2}
.card-desc{display:none}
.card-foot{margin-top:6px;padding-top:6px;gap:6px}
.card-cta{font-size:9.5px;padding:8px 6px;letter-spacing:.6px}
.card-quote-add{width:26px;height:26px}
.card-quote-add svg{width:12px;height:12px}
.card-stock{font-size:7px;padding:2px 4px;bottom:5px;top:auto;right:5px;gap:3px;letter-spacing:.6px}
.card-tag{font-size:7px;padding:2px 4px;top:5px;left:5px;right:auto;letter-spacing:.6px}
.card-compare-toggle{font-size:6.5px;padding:2px 5px 2px 3px;top:5px;right:5px;gap:3px}
.card-compare-toggle input{width:10px;height:10px}
.card-stock .ds{width:5px;height:5px}
.card-antifog{width:74px;height:74px;bottom:2px;left:2px}
.card-antifog-big{width:150px;height:150px;bottom:10px;left:10px}
/* Sheet */
.sheet{max-width:100%;border-radius:16px 16px 0 0;margin-top:auto;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column}
.sheet-close{position:fixed;top:14px;right:14px;z-index:110;background:rgba(255,255,255,.96);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.scrim{padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,24,32,.75)}
.sheet-img{min-height:220px;padding:20px;flex:0 0 auto}
.sheet-body{padding:24px 20px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet-body h2{font-size:30px}
.sheet-spec{grid-template-columns:1fr}
.sheet-foot{flex-direction:column;align-items:flex-start;gap:14px}
.sheet-cta{width:100%}
.sheet-cta .btn{flex:1;justify-content:center}
/* Atmos */
.atmos{height:240px;margin:40px -14px 0}
/* Footer */
.ft-cols{grid-template-columns:1fr;gap:24px}
.quote-card{padding:24px 18px}
.quote-card h3{font-size:25px;line-height:1.1}
/* Admin panel */
.adpanel-hdr,.adpanel-body{padding-left:14px;padding-right:14px}
.adpanel-hdr h1{font-size:28px}
.sector-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.aduser-role{display:none}
.aduser-add{flex-direction:column}
.tab-fixed-row input{max-width:100%!important}
/* Admin bar */
.admin-bar{flex-wrap:nowrap;gap:6px;padding:8px 12px;font-size:10px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.admin-bar::-webkit-scrollbar{display:none}
.admin-bar > span{display:none}
.ab-logout{margin-left:0!important;margin-right:4px!important;white-space:nowrap;flex-shrink:0}
/* Prod modal */
.prod-modal{padding:0;align-items:flex-end}
.prod-modal-box{border-radius:16px 16px 0 0;max-width:100%}
.pm-body{max-height:55vh;max-height:55dvh}
}
/* ── Petit mobile 480px ── */
@media (max-width:768px) and (orientation:portrait){
.util{ transition:transform .3s cubic-bezier(.4,0,.2,1); font-size:9px; }
header.site{ transition:transform .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease; }
html.hdr-hidden .util{ transform:translateY(-100%); }
html.hdr-hidden header.site{ transform:translateY(calc(-100% - var(--util-h,36px))); }
.strip{ transition:top .3s cubic-bezier(.4,0,.2,1); }
html.hdr-hidden .strip{ top:var(--admin-offset,0px) !important; }
html.hdr-hidden aside.sb{ transition:top .3s cubic-bezier(.4,0,.2,1); top:calc(var(--strip-h,46px) + var(--admin-offset,0px) - 2px) !important; }
/* Barre util réduite */
.util-inner{padding:4px 16px}
/* Header compact : logo plus petit, padding minimal */
.hdr-inner{padding:6px 16px;gap:10px}
.brand-name{font-size:19px}
.univ-tab{padding:6px 12px;font-size:12px}
/* Héros très réduit : on ne veut pas qu'il occupe tout l'écran à l'ouverture */
.hero-grid{min-height:auto;padding:24px 20px 28px}
.hero h1{font-size:clamp(28px,7vh,42px);letter-spacing:-1px}
.hero-lede{font-size:13px;margin-bottom:16px;max-width:560px}
.hero-eyebrow{margin-bottom:10px}
.hero-cta{margin-bottom:18px}
.hero-stats{padding-top:14px}
/* Vignettes marques compactes */
.hero-brands{gap:7px}
.brand-pill.has-logo{height:46px;width:108px;min-width:108px;max-width:108px;flex:0 0 108px}
/* Barre tri/stock compacte */
.strip-inner{padding:7px 20px}
/* Barre catégories compacte */
aside.sb{padding:6px 16px}
.sc{padding:6px 12px;font-size:12px}
/* Zone articles : on remonte et on densifie */
section{padding:14px 20px 0}
main{padding-top:14px}
/* Fiche produit : profiter de la largeur paysage */
.sheet{max-height:92vh;max-height:92dvh}
.sheet-body{padding:20px 22px}
}
/* ── Très petit 360px (bas de gamme Android) ── */
@media (max-width:360px){
.hdr-inner{padding:10px 10px;gap:8px}
.hero-grid{padding:32px 14px 44px;min-height:380px}
.hero h1{font-size:32px;letter-spacing:-1px}
.hero-lede{font-size:13px}
main{padding:16px 10px}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 3px}
.card-img{aspect-ratio:1;border-radius:7px}
.card-name{font-size:11px}
.card-body{padding:6px 1px 1px}
.card-foot{gap:4px}
.card-quote-add{width:22px;height:22px}
.card-quote-add svg{width:10px;height:10px}
.card-cta{font-size:8.5px;padding:6px 4px;letter-spacing:.3px}
.sheet-body{padding:18px 14px}
}
/* ═══ PAYSAGE MOBILE (écran large mais peu haut) ═══
En-têtes compactés au maximum pour laisser un maximum de place aux articles. */
@media (orientation:landscape) and (max-height:560px){
/* Fiche produit en paysage : image à gauche, texte à droite qui défile de son
côté (plutôt qu'empilés — l'image en haut prenait trop de hauteur disponible
et écrasait l'espace de défilement du texte, remarque STIM du 16/07). */
.sheet{max-height:92vh;max-height:92dvh;display:grid;grid-template-columns:minmax(160px,34%) 1fr}
.sheet-img{height:100%;min-height:0;max-height:92vh;max-height:92dvh}
.sheet-body{height:100%;max-height:92vh;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* ── Masquage des en-têtes au scroll vers le bas (réapparition au scroll haut) ── */
/* util + header glissent vers le haut quand on descend, reviennent quand on remonte */
.util{ transition:transform .3s cubic-bezier(.4,0,.2,1); }
header.site{ transition:transform .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease; }
html.hdr-hidden .util{ transform:translateY(-100%); }
html.hdr-hidden header.site{ transform:translateY(calc(-100% - var(--util-h,36px))); }
/* quand les en-têtes sont cachés, la barre tri remonte tout en haut de l'écran */
.strip{ transition:top .3s cubic-bezier(.4,0,.2,1); }
html.hdr-hidden .strip{ top:var(--admin-offset,0px) !important; }
html.hdr-hidden aside.sb{ transition:top .3s cubic-bezier(.4,0,.2,1); top:calc(var(--strip-h,46px) + var(--admin-offset,0px) - 2px) !important; }
}
/* Portrait mobile : même logique de masquage au scroll */
@media (max-width:480px){
.chip-short{display:inline}
.chip-full{display:none}
/* Sous 480px, le bloc titre+prix et le compteur d'articles se marchaient dessus
(pastille "à partir de" écrasée à ~140px, texte éclaté mot par mot) — on empile
les deux au lieu de les garder côte à côte. */
.section-head{flex-direction:column;align-items:flex-start;gap:10px}
.section-head .meta{text-align:left}
.section-title-wrap{width:100%}
.hero-grid{padding:44px 16px 52px;min-height:420px}
.hero h1{font-size:clamp(34px,13vw,52px);letter-spacing:-1.2px}
.hero-lede{font-size:14px;margin-bottom:20px}
.hero-stats{gap:10px}
.stat-k{font-size:24px;letter-spacing:-1px}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px}
.card-img{aspect-ratio:1/1;border-radius:8px}
.card-img img{padding:16px}
.card-name{font-size:12px;letter-spacing:-.2px}
.univ-tab{padding:8px 12px;font-size:12px}
/* Test : icônes réduites (34px) à la demande de STIM — sous la recommandation
tactile de 44px (Apple HIG), à valider à l'usage avant de généraliser. */
.icon-btn{width:34px;height:34px;min-width:34px!important;min-height:34px!important;font-size:15px}
.brand-name{font-size:21px}
/* Bandeau flottant compact sur petit écran */
.hdr-inner{padding:10px 14px;gap:10px}
.brand-mark{width:140px;height:96px}
/* 6 icônes dans hdr-actions (recherche, ondes, son, thème, panier, admin) : on autorise le retour à la ligne pour ne jamais déborder sur petit écran (le min-width tactile empêche de les rétrécir) */
.hdr-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
#quote-cart-count{min-width:15px!important;height:15px!important;font-size:9px!important;top:-4px!important;right:-4px!important}
.hero-brands{padding:0;gap:6px}
.brand-pill{font-size:8px;padding:3px 8px;letter-spacing:.8px}
.brand-pill.has-logo{padding:0 10px;height:46px;width:104px;min-width:104px;max-width:104px;flex:0 0 104px;border-radius:999px}
.brand-pill.has-logo img{height:28px;max-width:110px}
.brand-pill.has-logo img[alt="SHEARWATER"],
.brand-pill.has-logo img[alt="SCUBAPRO"]{height:38px;max-width:80px}
.brand-pill.has-logo img[alt="BEUCHAT"]{height:26px;max-width:110px}
.brand-pill.has-logo img[alt="CRESSI"]{height:26px;max-width:140px}
.brand-pill.has-logo img[alt="BEST DIVER"],
.brand-pill.has-logo img[alt="AQUALUNG MILITARY"]{max-width:130px}
.bp-ribbon{font-size:18px;padding:6px 10px}
.bp-body{padding:20px 16px}
.bp-card h3{font-size:22px}
.section-head h2{font-size:22px}
.section-head .meta b{font-size:15px}
}
/* Paysage très bas (petits téléphones à l'horizontale) : encore plus compact */
@media (orientation:landscape) and (max-height:430px){
/* Héros entièrement masqué : en paysage bas, on va droit aux articles */
.hero{display:none}
/* Header ultra-compact */
.hdr-inner{padding:4px 14px}
.brand-name{font-size:16px}
.util-inner{padding:3px 14px}
.univ-tab{padding:5px 11px;font-size:11.5px}
/* Barres tri + catégories collées en haut, très fines */
.strip-inner{padding:5px 16px;font-size:10px}
aside.sb{padding:5px 14px}
.sc{padding:5px 11px;font-size:11.5px}
/* La grille d'articles démarre tout en haut */
main{padding-top:10px}
section{padding:10px 18px 0}
/* Plus de cartes visibles d'un coup en paysage : grille large */
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
.card-img{aspect-ratio:1.1}
.card-name{font-size:12px}
.card-body{padding:8px 2px 2px}
/* Fiche produit : pleine hauteur dispo */
.sheet{max-height:94vh;max-height:94dvh}
.sheet-body{padding:16px 18px}
}
/* Respect de la préférence "réduire les animations" */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; scroll-behavior:auto !important;
}
}
/* Impression : version épurée (fiche / catalogue / devis) */
@media print{
.util, header.site, .admin-bar, #scroll-top, .mob-search-bar, .hero-brands,
.recent-bar, .quote-band, .adpanel-overlay, .scrim, .admin-scrim, .admin-users-scrim,
#export-html-link-zone, .brand-dropdown-list, .sb, .atmos, #toast,
.hdr-actions, .universes{ display:none !important; }
body{ background:#fff !important; color:#000 !important; }
.hero{ min-height:auto !important; padding:0 0 12px !important; background:#fff !important; }
.hero *{ color:#000 !important; }
main{ display:block !important; }
.grid{ display:block !important; }
.card{ break-inside:avoid; page-break-inside:avoid; border:1px solid #ccc !important; margin-bottom:8px; }
a[href^="mailto"]::after{ content:" (" attr(href) ")"; font-size:10px; color:#555; }
footer{ background:#fff !important; color:#000 !important; margin-top:20px !important; }
footer *{ color:#000 !important; }
footer::before{ display:none !important; }
}
/* Mode impression "fiche produit uniquement" */ @media print {
body.print-sheet > *:not(#scrim){ display:none !important; }
body.print-sheet #scrim{ position:static !important; background:#fff !important; display:block !important; padding:0 !important; overflow:visible !important; }
body.print-sheet #scrim .sheet{ box-shadow:none !important; border:none !important; max-width:100% !important; max-height:none !important; height:auto !important; overflow:visible !important; margin:0 !important; }
body.print-sheet .sheet-close, body.print-sheet .sheet-cta, body.print-sheet .sheet-similar, body.print-sheet #scroll-top{ display:none !important; }
body.print-sheet .sheet-img{ max-height:280px !important; }
body.print-sheet *{ color:#000 !important; }
body.print-sheet #sheet-name{ font-size:22px !important; }
body.print-sheet .sheet-brand{ font-size:11px !important; letter-spacing:1.4px; }
body.print-sheet::after{ content:"STIM NC · 215 rue Roger Gervolino · Nouméa · +687 25 30 50 · stim@stim.nc"; display:block !important; margin-top:24px; padding-top:12px; border-top:1px solid #ccc; font-family:monospace; font-size:10px; color:#666 !important; text-align:center; }
}
/* ═══════════════════════════════════════════════════════════════
GLASS DESIGN SYSTEM — version nettoyée
Règles : pas de doublons, !important limité au strict nécessaire,
backdrop-filter uniquement sur fonds sombres/complexes
═══════════════════════════════════════════════════════════════ */
/* ─── Macros glass réutilisées via commentaire ──────────────────
GLASS SOMBRE (hero, admin) : fond rgba(255,255,255,.18-22) + blur(14px)
GLASS CLAIR (header, grid): fond rgba(255,255,255,.50-65) sans blur
DOME : radial-gradient ellipse top center
─────────────────────────────────────────────────────────────── */
/* ════ 1. BOUTONS MARQUES (hero — fond sombre) ════════════════ */
.brand-pill.has-logo{
height:64px;min-width:100px;max-width:160px;
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
padding:0 18px;box-sizing:border-box;
/* Glossy bleu atoll — gel bombé translucide */
background:
/* reflet spéculaire net (le « brillant » du gel) */
linear-gradient(to bottom,
rgba(255,255,255,.78) 0%,
rgba(255,255,255,.42) 30%,
rgba(255,255,255,.08) 47%,
rgba(255,255,255,0) 54%
),
/* lumière renvoyée en bas (bombé) */
radial-gradient(125% 85% at 50% 134%,
rgba(130,228,255,.42) 0%, rgba(130,228,255,0) 58%
),
/* corps bleu atoll translucide */
linear-gradient(180deg,
rgba(0,175,220,.24) 0%,
rgba(0,95,165,.15) 50%,
rgba(0,80,150,.30) 100%
);
border:1px solid rgba(0,170,220,.60);
border-top-color:rgba(255,255,255,.96);
border-bottom-color:rgba(0,40,100,.46);
border-radius:999px;
backdrop-filter:blur(12px) saturate(1.5);
-webkit-backdrop-filter:blur(12px) saturate(1.5);
box-shadow:
0 13px 34px rgba(0,110,190,.48),
0 3px 9px rgba(0,0,0,.20),
inset 0 2.5px 0 rgba(255,255,255,1),
inset 0 12px 24px -6px rgba(175,238,255,.48),
inset 0 -10px 18px -6px rgba(0,20,60,.36),
inset 0 -2px 0 rgba(0,30,70,.32);
transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,background .2s;
cursor:pointer;
}
.brand-pill.has-logo:hover{
transform:translateY(-4px);
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
border-color:rgba(255,255,255,.45);border-top-color:rgba(255,255,255,.85);
box-shadow:0 28px 64px rgba(0,0,0,.48),0 8px 20px rgba(0,0,0,.28),
inset 0 3px 0 rgba(255,255,255,1),
inset 0 16px 36px rgba(255,255,255,.62),
inset 5px 0 20px rgba(255,255,255,.10),
inset -5px 0 20px rgba(255,255,255,.10),
inset 0 -7px 16px rgba(0,0,0,.28),
inset 0 -2px 0 rgba(0,0,0,.22);
}
.brand-pill.has-logo:active{
transform:translateY(-1px);
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
}
.brand-pill.has-logo.on{
/* Neutre argenté au clic — presque translucide */
background:
linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
rgba(255,255,255,.16) 42%,
rgba(255,255,255,0) 52%,
rgba(0,0,0,.02) 100%
),
linear-gradient(180deg,
rgba(200,210,220,.12) 0%,
rgba(140,160,180,.16) 100%
);
border-color:rgba(180,200,220,.55);
border-top-color:rgba(255,255,255,.82);
border-bottom-color:rgba(80,100,130,.35);
box-shadow:
0 8px 28px rgba(0,0,0,.28),
0 3px 8px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 -2px 4px rgba(0,0,0,.16);
transform:none;
}
.brand-pill.has-logo img{
height:44px;max-height:44px;max-width:120px;width:auto;
display:block;object-fit:contain;border-radius:4px;
mix-blend-mode:normal;pointer-events:none;
transition:transform .22s ease,filter .25s ease;
}
.brand-pill.has-logo img[alt="SHEARWATER"],.brand-pill.has-logo img[alt="SCUBAPRO"]{max-height:52px;max-width:90px}
.brand-pill.has-logo img[alt="BEUCHAT"]{max-height:34px;max-width:130px}
.brand-pill.has-logo img[alt="CRESSI"]{max-height:36px;max-width:150px}
.brand-pill.has-logo img[alt="BEST DIVER"]{max-height:40px;max-width:140px}
.brand-pill.has-logo img[alt="AQUALUNG MILITARY"]{max-height:36px;max-width:140px}
.brand-pill:not(.has-logo){
color:rgba(246,242,234,.92);font-weight:600;
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
border-radius:30px;padding:8px 22px;
backdrop-filter:blur(14px) saturate(1.4);
-webkit-backdrop-filter:blur(14px) saturate(1.4);
border:1px solid rgba(255,255,255,.26);border-top-color:rgba(255,255,255,.55);
box-shadow:0 20px 52px rgba(0,0,0,.40),0 6px 16px rgba(0,0,0,.24),
inset 0 3px 0 rgba(255,255,255,1),
inset 0 14px 32px rgba(255,255,255,.50),
inset 5px 0 18px rgba(255,255,255,.07),
inset -5px 0 18px rgba(255,255,255,.07),
inset 0 -6px 14px rgba(0,0,0,.24),
inset 0 -2px 0 rgba(0,0,0,.18);
}
@media(max-width:860px){
.brand-pill.has-logo{height:54px;min-width:80px;max-width:130px;border-radius:999px}
.brand-pill.has-logo img{max-height:36px;max-width:100px}
.brand-pill.has-logo img[alt="SHEARWATER"],.brand-pill.has-logo img[alt="SCUBAPRO"]{max-height:44px;max-width:74px}
.brand-pill.has-logo img[alt="BEUCHAT"]{max-height:28px;max-width:104px}
.brand-pill.has-logo img[alt="CRESSI"]{max-height:28px;max-width:120px}
}
@media(max-width:480px){
.brand-pill.has-logo{height:46px;min-width:68px;max-width:110px;border-radius:999px}
.brand-pill.has-logo img{max-height:28px;max-width:84px}
.brand-pill.has-logo img[alt="SHEARWATER"],.brand-pill.has-logo img[alt="SCUBAPRO"]{max-height:38px;max-width:62px}
.card-antifog{width:64px;height:64px;bottom:2px;left:2px}
.card-antifog-big{width:104px;height:104px;bottom:8px;left:8px}
.brand-mark{width:96px;height:66px}
}
@media(hover:hover){
.brand-pill.has-logo:hover{
transform:translateY(-4px);
background:
linear-gradient(180deg,
rgba(255,255,255,.78) 0%,
rgba(255,255,255,.40) 42%,
rgba(255,255,255,0) 52%,
rgba(0,40,80,.10) 100%
),
linear-gradient(180deg,
rgba(0,195,240,.26) 0%,
rgba(0,90,170,.30) 100%
);
border-color:rgba(0,190,240,.70);
border-top-color:rgba(255,255,255,.88);
border-bottom-color:rgba(0,40,120,.50);
box-shadow:
0 14px 40px rgba(0,100,180,.50),
0 5px 12px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.90),
inset 0 -2px 4px rgba(0,20,60,.28);
}
.brand-pill.has-logo.on:hover{transform:none}
}
/* ════ 5. BOUTONS ADMIN (fond sombre — backdrop utile) ═════════ */
.brand-dropdown-btn{
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
border:1px solid rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.55);
box-shadow:0 5px 16px rgba(0,0,0,.18),inset 0 1.5px 0 rgba(255,255,255,.58),inset 0 -1.5px 3px rgba(0,0,0,.07);
transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s;
}
.brand-dropdown-btn:hover{
transform:translateY(-1px);border-color:rgba(255,255,255,.46);border-top-color:rgba(255,255,255,.78);
box-shadow:0 8px 22px rgba(0,0,0,.25),inset 0 1.5px 0 rgba(255,255,255,.74);
}
.admin-bar .ab-logout{
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.26);border-top-color:rgba(255,255,255,.52);
border-radius:999px;box-shadow:0 20px 52px rgba(0,0,0,.40),0 6px 16px rgba(0,0,0,.24),
inset 0 3px 0 rgba(255,255,255,1),
inset 0 14px 32px rgba(255,255,255,.50),
inset 5px 0 18px rgba(255,255,255,.07),
inset -5px 0 18px rgba(255,255,255,.07),
inset 0 -6px 14px rgba(0,0,0,.24),
inset 0 -2px 0 rgba(0,0,0,.18);
transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s;
}
.admin-bar .ab-logout:hover{transform:translateY(-1px);color:var(--paper);box-shadow:0 6px 16px rgba(0,0,0,.22),inset 0 1.5px 0 rgba(255,255,255,.70)}
.adpanel-close{
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.24);border-top-color:rgba(255,255,255,.50);
box-shadow:0 20px 52px rgba(0,0,0,.40),0 6px 16px rgba(0,0,0,.24),
inset 0 3px 0 rgba(255,255,255,1),
inset 0 14px 32px rgba(255,255,255,.50),
inset 5px 0 18px rgba(255,255,255,.07),
inset -5px 0 18px rgba(255,255,255,.07),
inset 0 -6px 14px rgba(0,0,0,.24),
inset 0 -2px 0 rgba(0,0,0,.18);
transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s;
}
.adpanel-close:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(0,0,0,.24),inset 0 1.5px 0 rgba(255,255,255,.66)}
.ca-btn{
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(10,24,32,.05) 100%);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.26);border-top-color:rgba(255,255,255,.52);
border-radius:999px;
box-shadow:0 20px 52px rgba(0,0,0,.40),0 6px 16px rgba(0,0,0,.24),
inset 0 3px 0 rgba(255,255,255,1),
inset 0 14px 32px rgba(255,255,255,.50),
inset 5px 0 18px rgba(255,255,255,.07),
inset -5px 0 18px rgba(255,255,255,.07),
inset 0 -6px 14px rgba(0,0,0,.24),
inset 0 -2px 0 rgba(0,0,0,.18);
transition:transform .15s,box-shadow .15s,background .12s;
}
.ca-btn:hover{
transform:translateY(-1px);
background:radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(10,24,32,.05) 100%);
box-shadow:0 6px 16px rgba(0,0,0,.24),inset 0 1.5px 0 rgba(255,255,255,.65);
}
.ca-btn.danger:hover{background:radial-gradient(ellipse 90% 55% at 50% -5%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 68%),linear-gradient(180deg,rgba(193,18,28,.7) 0%,rgba(193,18,28,.9) 100%)}
.stock-sel{
background:rgba(10,24,32,.55);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.26);border-top-color:rgba(255,255,255,.50);
border-radius:999px;
box-shadow:inset 0 1.5px 0 rgba(255,255,255,.48),inset 0 -1px 2px rgba(0,0,0,.10);
}
/* ════ 7. TAGS PRODUIT ═════════════════════════════════════════ */
.card-tag,.card-stock{border-radius:999px}
.card-tag,.card-tag.promo{box-shadow:0 3px 10px rgba(10,24,32,.18),inset 0 1px 0 rgba(255,255,255,.18)}
.card-tag.new{
border-radius:8px;
background:radial-gradient(ellipse 90% 55% at 50% -5%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 68%),linear-gradient(180deg,#06b6c7 0%,#0489a8 100%);
box-shadow:0 4px 14px rgba(6,182,199,.40),inset 0 1.5px 0 rgba(255,255,255,.38);
}
/* ════ 8. CATÉGORIES SIDEBAR ══════════════════════════════════ */
.sc{
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(10,24,32,.05) 100%);
border:1px solid rgba(10,24,32,.08);border-top-color:rgba(255,255,255,.92);
box-shadow:0 3px 10px rgba(10,24,32,.07),inset 0 1.5px 0 rgba(255,255,255,.88),inset 0 3px 8px rgba(255,255,255,.20),inset 0 -1px 2px rgba(0,0,0,.04);
transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,background .15s,border-color .15s;
}
/* .sc:hover duplicate supprimé — règle inline utilisée */
.sc.on{
background:
radial-gradient(ellipse 90% 55% at 50% -5%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 68%),
linear-gradient(180deg,var(--ink) 0%,#000e18 100%);
border-color:rgba(0,0,0,.22);border-top-color:rgba(255,255,255,.30);
box-shadow:0 5px 16px rgba(10,24,32,.28),inset 0 1.5px 0 rgba(255,255,255,.26),inset 0 -1.5px 3px rgba(0,0,0,.14);
transform:none;color:var(--paper);
}
/* Indicateur de position : liseré accent à gauche de la catégorie active */
.sc::after{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:var(--accent);border-radius:0 3px 3px 0;transform:translateY(-50%);transition:height .3s cubic-bezier(.2,.7,.3,1);box-shadow:0 0 8px var(--accent)}
.sc.on::after{height:62%}
/* ════ 9. CORRECTIFS DIVERS ═══════════════════════════════════ */
/* MATERIEL DE PLONGEE bold */
/* MATERIEL DE PLONGEE bold → déjà dans .hero-eyebrow{} ligne 168 */
/* tab-fixed-row flex-wrap portrait mobile */
.tab-fixed-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line-soft);border-radius:16px;background:var(--paper)}
/* Sidebar mobile : inclure admin-offset dans le top */
@media(max-width:860px){
.strip{top:calc(var(--util-h,0px) + var(--hdr-h,60px) + var(--admin-offset,0px))}
aside.sb{top:calc(var(--stack-h,120px) + var(--strip-h,46px) + var(--admin-offset,0px))}
/* Sidebar horizontale : liseré actif passe en bas */
.sc::after{left:50%;top:auto;bottom:0;width:0;height:3px;transform:translateX(-50%);border-radius:3px 3px 0 0;transition:width .3s cubic-bezier(.2,.7,.3,1)}
.sc.on::after{height:3px;width:54%}
}
/* ════ 10. DARK MODE ══════════════════════════════════════════ */
/* Admin bar : fond fixe indépendant de --ink */
html.dark .admin-bar{background:#060e14;border-bottom:1px solid rgba(255,255,255,.08)}
html.dark .admin-bar,html.dark .admin-bar *{color:#f6f2ea}
/* Admin panel header */
html.dark .adpanel-hdr{background:#0a1a4a;color:#f6f2ea}
html.dark .adpanel-hdr h1{color:#f6f2ea}
html.dark .adpanel-hdr p{color:rgba(246,242,234,.65)}
/* Admin login modal */
html.dark .admin-box{background:var(--paper);color:var(--ink)}
html.dark .admin-box h3{color:var(--ink)}
html.dark .admin-box p{color:rgba(246,242,234,.65)}
html.dark .admin-field label{color:rgba(246,242,234,.55)}
html.dark .admin-field input{background:#102255;border-color:rgba(246,242,234,.18);color:var(--ink)}
/* Hero CTAs dark mode (--ink et --paper s'inversent) */
html.dark .btn-primary{
background:
radial-gradient(ellipse 90% 55% at 50% -5%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 66%),
linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(246,242,234,.65) 100%);
color:var(--paper); /* paper = sombre en dark → texte foncé sur fond clair */
}
html.dark .btn-ghost{color:var(--ink)} /* ink = clair en dark → texte clair sur fond sombre */
html.dark .btn-dark,html.dark #btn-dark{
background:radial-gradient(ellipse 90% 55% at 50% -5%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 68%),linear-gradient(180deg,rgba(246,242,234,.20) 0%,rgba(246,242,234,.08) 100%);
border-color:rgba(246,242,234,.30);border-top-color:rgba(246,242,234,.55);
color:var(--ink);
box-shadow:0 4px 14px rgba(0,0,0,.25),inset 0 1.5px 0 rgba(246,242,234,.45);
}
/* Sidebar catégories dark mode → glass sombre */
html.dark .sc{
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
border-color:rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.24);
box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 1.5px 0 rgba(255,255,255,.22),inset 0 -1px 2px rgba(0,0,0,.14);
color:var(--muted-2);
}
html.dark .sc:hover{
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
border-color:rgba(255,255,255,.22);border-top-color:rgba(255,255,255,.38);
color:var(--ink);transform:translateY(-1px);
}
html.dark .sc.on{
background:
radial-gradient(ellipse 90% 55% at 50% -5%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 68%),
linear-gradient(180deg,rgba(246,242,234,.18) 0%,rgba(246,242,234,.08) 100%);
border-color:rgba(246,242,234,.28);border-top-color:rgba(246,242,234,.50);
box-shadow:0 5px 16px rgba(0,0,0,.35),inset 0 1.5px 0 rgba(255,255,255,.32),inset 0 -1.5px 3px rgba(0,0,0,.18);
color:var(--ink);
}
html.dark .sc-cnt{color:var(--accent);opacity:.85}
html.dark .sc-thumb{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14)}
/* Tabs + chips dark mode */
html.dark .univ-tab{
background:rgba(246,242,234,.13);
border:1px solid rgba(246,242,234,.22);
border-top-color:rgba(246,242,234,.38);
box-shadow:0 4px 14px rgba(0,0,0,.30),inset 0 1.5px 0 rgba(246,242,234,.30);
color:rgba(246,242,234,.75);
}
html.dark .univ-tab:hover{
background:rgba(246,242,234,.22);
border-color:rgba(246,242,234,.36);
border-top-color:rgba(246,242,234,.55);
color:#f6f2ea;
transform:translateY(-2px);
box-shadow:0 8px 22px rgba(0,0,0,.36),inset 0 1.5px 0 rgba(246,242,234,.48);
}
html.dark .univ-tab.on{
background:rgba(246,242,234,.90);
border-color:rgba(246,242,234,.70);
border-top-color:#fff;
box-shadow:0 6px 20px rgba(0,0,0,.35),inset 0 1.5px 0 #fff,inset 0 4px 12px rgba(255,255,255,.30);
color:#0a1820;
}
html.dark .univ-tab[data-u="bonplan"],
html.dark .univ-tab[data-u="bonplan"]:hover,
html.dark .univ-tab[data-u="bonplan"].on{
background:radial-gradient(ellipse 90% 55% at 50% -5%,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 68%),linear-gradient(180deg,#e7714a 0%,#c14a2f 100%);
border-color:rgba(231,111,81,.50);border-top-color:rgba(255,255,255,.45);
}
html.dark .filter-chip{
background:rgba(246,242,234,.13);
border:1px solid rgba(246,242,234,.20);
border-top-color:rgba(246,242,234,.34);
box-shadow:0 3px 10px rgba(0,0,0,.26),inset 0 1.5px 0 rgba(246,242,234,.26);
color:rgba(246,242,234,.72);
}
html.dark .filter-chip:hover{
background:rgba(246,242,234,.20);
border-color:rgba(246,242,234,.32);
color:#f6f2ea;
}
html.dark .filter-chip.on{
background:rgba(246,242,234,.88);
border-color:rgba(246,242,234,.70);
border-top-color:#fff;
box-shadow:0 5px 16px rgba(0,0,0,.32),inset 0 1.5px 0 #fff;
color:#0a1820;
}
html.dark .sort-select{background:rgba(30,40,55,.55);border-color:rgba(255,255,255,.14);color:var(--muted-2)}
html.dark .icon-btn,html.dark .mob-search-btn,html.dark .mob-search-close{
background:radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
border-color:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.30);
}
html.dark .bo{
background:radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
border-color:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.28);
}
html.dark .sheet-close{
background:radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
border-color:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.28);
}
/* Quote-card + atmos dark mode */
html.dark .quote-card{background:rgba(19,31,41,.92);border-color:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.4)}
html.dark .quote-eyebrow{color:var(--accent)}
html.dark .quote-card h3{color:var(--ink)}
html.dark .quote-card h3 em{color:var(--accent-deep)}
html.dark .quote-card p{color:rgba(194,200,196,.88)}
html.dark .qs-row{
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
border-color:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.30);
box-shadow:0 6px 18px rgba(0,0,0,.28),inset 0 1.5px 0 rgba(255,255,255,.26),inset 0 -1.5px 3px rgba(0,0,0,.14);
color:var(--ink);
}
html.dark a.qs-row:hover{
background:
radial-gradient(ellipse 78% 38% at 50% 2%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 55% 22% at 50% 96%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%),
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 100%);
border-color:rgba(255,255,255,.26);border-top-color:rgba(255,255,255,.46);
box-shadow:0 12px 28px rgba(0,0,0,.35),inset 0 1.5px 0 rgba(255,255,255,.38),inset 0 -1.5px 3px rgba(0,0,0,.18);
}
html.dark .qs-row b{color:var(--ink)}
html.dark .qs-row span{color:var(--muted-2)}
html.dark .atmos-img::after{background:linear-gradient(90deg,rgba(5,12,18,.82) 0%,rgba(5,12,18,.55) 50%,rgba(5,12,18,.82) 100%)}
html.dark .atmos-text,html.dark .atmos-text h3{color:var(--ink)}
html.dark .atmos-text p{color:rgba(246,242,234,.80)}
/* Section head titles */
html.dark .section-head h2,html.dark .section-head .meta b{color:var(--ink)}
html.dark .section-head .meta{color:var(--muted)}
/* Boutons marque uniform size — dark mode (les brand-pills héritent du glass sombre de l'hero) */
html.dark .brand-pill:not(.has-logo){color:rgba(246,242,234,.92)}
/* ════ TÉLÉPHONE — bleu atoll sur tout le site ══════════════════
Fond clair → icône lagoon
Fond sombre → icône lagoon (lisible) ou coral si besoin
══════════════════════════════════════════════════════════════ */
/* Tous les glyphes contact → bleu atoll */
a.qs-row .qs-glyph{
background:var(--lagoon);
color:#fff;
box-shadow:0 4px 14px rgba(29,151,163,.30),inset 0 1px 0 rgba(255,255,255,.25);
box-shadow:0 4px 14px oklch(0.62 0.10 205 / .30),inset 0 1px 0 rgba(255,255,255,.25);
}
html.dark a.qs-row .qs-glyph{
background:var(--lagoon);
color:#fff;
box-shadow:0 4px 14px rgba(29,151,163,.40),inset 0 1px 0 rgba(255,255,255,.30);
box-shadow:0 4px 14px oklch(0.62 0.10 205 / .40),inset 0 1px 0 rgba(255,255,255,.30);
}
/* Util bar — numéro de tel : même style que les autres éléments */
/* Texte qs-row — couleurs par défaut */
/* ════════════════════════════════════════════════════════════════
GEL / CANDY BUTTONS — habillage brillant translucide
Réf. bouton « gel » : reflet net en haut, corps coloré translucide,
pilule bombée. Teinte = couleur actuelle de chaque bouton (color-mix),
poussée vers un MAXIMUM de transparence. N'affecte que l'apparence.
════════════════════════════════════════════════════════════════ */
:where(
.btn,.univ-tab,.filter-chip,
.icon-btn,.mob-search-btn,.mob-search-close,.sheet-close,
.bo,.btn-danger-sm,.brand-view-cta
){
--t: var(--ink); /* teinte du corps (héritée par bouton) */
--o: .14; /* opacité du corps — bas = très transparent */
--gloss: .70; /* intensité du reflet supérieur */
background:
/* 1 · reflet spéculaire net (le « brillant » du gel) */
linear-gradient(to bottom,
rgba(255,255,255,var(--gloss)) 0%,
rgba(255,255,255,calc(var(--gloss)*.58)) 30%,
rgba(255,255,255,.10) 46%,
rgba(255,255,255,0) 53%),
/* 2 · lumière renvoyée en bas */
radial-gradient(120% 80% at 50% 128%,
rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 60%),
/* 3 · corps coloré translucide */
linear-gradient(to bottom,
color-mix(in srgb, var(--t) calc(var(--o)*100%), transparent) 0%,
color-mix(in srgb, var(--t) calc(var(--o)*58%), transparent) 50%,
color-mix(in srgb, var(--t) calc(var(--o)*122%), transparent) 100%)
!important;
border: 1px solid color-mix(in srgb, var(--t) 32%, transparent) !important;
border-top-color: rgba(255,255,255,.82) !important;
box-shadow:
0 6px 16px color-mix(in srgb, var(--t) 28%, transparent),
0 1px 3px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 7px 12px -5px rgba(255,255,255,.50),
inset 0 -7px 13px -5px color-mix(in srgb, var(--t) 32%, transparent)
!important;
backdrop-filter: blur(7px) saturate(1.35);
-webkit-backdrop-filter: blur(7px) saturate(1.35);
transition: transform .18s cubic-bezier(.2,.7,.3,1), filter .18s, box-shadow .2s !important;
}
:where(
.btn,.univ-tab,.filter-chip,
.icon-btn,.mob-search-btn,.mob-search-close,.sheet-close,
.bo,.btn-danger-sm,.brand-view-cta
):hover{ filter: brightness(1.04) saturate(1.02); }
/* ── Teintes par bouton (= couleurs actuelles) ─────────────────── */
/* Boutons clairs translucides (sur fond sombre du héros) */
.btn-primary{ --t:#f6f2ea; --o:.50; color:#fff !important }
/* Bouton "Écrire à l'équipe STIM" sur fond clair — fond encre plein */
.quote-card .btn-primary, .quote-band .btn-primary{ --t:var(--ink); --o:1; color:var(--paper) !important }
/* Bouton "Se connecter" de la modale admin (fond clair) — fond encre plein, texte clair */
.admin-box .btn-primary{ --t:var(--ink); --o:1; color:var(--paper) !important }
.btn-ghost { --t:#f6f2ea; --o:.16; color:#fff !important }
/* Boutons sombres / neutres */
.btn-dark,.brand-view-cta{ --t:var(--ink); --o:.46 }
.btn-line { --t:var(--ink); --o:.14 }
/* Verres neutres — contraste renforcé en mode clair */
.univ-tab,.filter-chip,
.icon-btn,.mob-search-btn,.mob-search-close,.sheet-close{ --t:var(--ink); --o:.32 }
.univ-tab.on,.filter-chip.on,.bo.active{ --t:var(--ink); --o:.85 }
/* Boutons colorés — chaque couleur conservée */
.btn-danger-sm { --t:var(--coral); --o:.34 }
.univ-tab[data-u="bonplan"],
.univ-tab[data-u="bonplan"]:hover,
.univ-tab[data-u="bonplan"].on { --t:var(--coral); --o:1; color:#1a0a00 !important }
html.dark .univ-tab[data-u="bonplan"],
html.dark .univ-tab[data-u="bonplan"]:hover,
html.dark .univ-tab[data-u="bonplan"].on { color:#fff !important }
.bo.active-promo,.bo.active-rupture,.bo.active-commande{ --t:var(--coral); --o:.44 }
.bo.active-dispo { --t:var(--olive); --o:.44 }
.bo.active-bientot{ --t:var(--ocre); --o:.46 }
.bo.active-commande{ --t:#a89460; --o:.46 }
/* ═══ EFFET EAU — goutte vue de DESSUS (réf. waterdrop top-down) ═══
Impact → couronne soulevée → jet de rebond central → ondes concentriques.
Tout est radial/concentrique (vue verticale), aucune projection vers l'avant. */
.ripple-layer{
position:fixed; pointer-events:none; z-index:9999;
left:0; top:0; transform:translate(-50%,-50%);
}
/* Creux d'impact : dépression sombre initiale au point de chute */
.rd-dip{
position:absolute; left:0; top:0; border-radius:50%;
transform:translate(-50%,-50%) scale(0);
background:radial-gradient(circle at 50% 42%,
rgba(8,40,70,.42) 0%, rgba(18,55,85,.22) 44%, rgba(35,75,105,.07) 66%, transparent 76%);
box-shadow:
inset 0 6px 14px rgba(0,22,45,.42),
inset 0 -3px 8px rgba(120,195,238,.14);
filter:blur(1px);
animation:rdDip var(--dipDur,.9s) cubic-bezier(.3,.4,.4,1) forwards;
will-change:transform,opacity; backface-visibility:hidden;
}
@keyframes rdDip{
0%{ transform:translate(-50%,-50%) scale(.12); opacity:0 }
22%{ opacity:.8 }
55%{ transform:translate(-50%,-50%) scale(.6); opacity:.7 }
100%{ transform:translate(-50%,-50%) scale(1); opacity:0 }
}
/* Couronne soulevée : l'anneau d'eau qui se lève autour de l'impact (vu de dessus = anneau clair bombé) */
.rd-crown{
position:absolute; left:0; top:0; border-radius:50%;
transform:translate(-50%,-50%) scale(0);
border:solid;
border-width:var(--cw,6px);
/* anneau bleu net (dessus plus clair pour le relief) */
border-top-color:rgba(70,165,215,.42);
border-left-color:rgba(55,150,205,.32);
border-right-color:rgba(45,140,200,.30);
border-bottom-color:rgba(60,155,208,.34);
box-shadow:
0 0 6px rgba(40,140,195,.16),
inset 0 2px 5px rgba(190,225,245,.20),
inset 0 -3px 7px rgba(12,60,100,.22);
animation:rdCrown var(--crownDur,1.05s) cubic-bezier(.18,.6,.3,1) forwards;
will-change:transform,opacity; backface-visibility:hidden;
}
@keyframes rdCrown{
0%{ transform:translate(-50%,-50%) scale(.06); opacity:0; border-width:calc(var(--cw,6px) * 1.4) }
16%{ opacity:.45 }
/* le bleu de la couronne tient jusqu'au bout de l'expansion */
85%{ opacity:.40; border-width:calc(var(--cw,6px) * .55) }
100%{ transform:translate(-50%,-50%) scale(1); opacity:0; border-width:calc(var(--cw,6px) * .35) }
}
/* Jet de rebond central (colonne de Rayleigh) — vu de dessus = disque qui rejaillit puis retombe */
/* Petit point de rebond central — discret, juste une étincelle au centre */
.rd-jet{
position:absolute; left:0; top:0; border-radius:50%;
transform:translate(-50%,-50%) scale(0);
background:radial-gradient(circle at 50% 38%,
rgba(80,170,218,.40) 0%,
rgba(110,185,228,.18) 45%,
transparent 72%);
filter:blur(.4px);
animation:rdJet var(--jetDur,1.0s) cubic-bezier(.25,.5,.35,1) var(--jetDelay,.14s) forwards;
will-change:transform,opacity; backface-visibility:hidden;
}
@keyframes rdJet{
0%{ transform:translate(-50%,-50%) scale(0); opacity:0 }
35%{ transform:translate(-50%,-50%) scale(.9); opacity:.7 }
100%{ transform:translate(-50%,-50%) scale(1.3); opacity:0 }
}
/* Gouttelette qui se détache au sommet du jet (le "pinch-off" de Rayleigh, vu de dessus = petit point clair) */
.rd-pinch{
position:absolute; left:0; top:0; border-radius:50%;
transform:translate(-50%,-50%) scale(0);
background:radial-gradient(circle at 42% 36%, rgba(120,195,238,.95) 0%, rgba(185,222,245,.6) 45%, color-mix(in srgb, var(--accent,#0096c7) 30%, transparent) 100%);
box-shadow:inset 1px 1px 2px rgba(120,195,238,.7), 0 1px 3px rgba(20,55,85,.30);
animation:rdPinch var(--pinchDur,.7s) ease-out var(--pinchDelay,.55s) forwards;
will-change:transform,opacity; backface-visibility:hidden;
}
@keyframes rdPinch{
0%{ transform:translate(-50%,-50%) scale(0); opacity:0 }
40%{ transform:translate(-50%,-50%) scale(1); opacity:.95 }
100%{ transform:translate(-50%,-50%) scale(.7); opacity:0 }
}
/* Ondes concentriques avec LENTILLE DE RÉFRACTION : déforment le contenu du site
à leur passage. Le backdrop-filter est masqué en anneau fin → seul le bord de
l'onde dévie/grossit ce qu'il y a derrière, comme une vraie ride à la surface. */
.rd-ring{
position:absolute; left:0; top:0; border-radius:50%;
transform:translate(-50%,-50%) scale(var(--startScale,0));
/* floutage de l'arrière-plan, sur la bande de l'onde */
backdrop-filter:blur(1.1px) contrast(1.02) saturate(1.1);
-webkit-backdrop-filter:blur(1.1px) contrast(1.02) saturate(1.1);
/* BLEU dans la bande elle-même (background) = même endroit que le floutage.
Le trait bleu suit donc exactement la zone qui déforme le fond, et grandit avec l'onde. */
background:radial-gradient(circle,
transparent 0%, transparent 47%,
rgba(130,205,242,.15) 49%, /* liseré clair (crête éclairée) */
rgba(60,165,214,.26) 52%, /* cœur du trait bleu */
rgba(55,155,208,.20) 55%, /* corps bleu */
rgba(30,110,165,.12) 59%, /* flanc profond (relief) */
transparent 64%);
/* le masque montre exactement cette bande (bleu + floutage ensemble) */
-webkit-mask:radial-gradient(circle,
transparent 0%, transparent 45%,
#000 49%, #000 60%, transparent 66%, transparent 100%);
mask:radial-gradient(circle,
transparent 0%, transparent 45%,
#000 49%, #000 60%, transparent 66%, transparent 100%);
box-shadow:
/* fin halo bleu autour de la bande */
0 0 8px rgba(35,138,198,.18);
animation:rdRing var(--dur,3.4s) cubic-bezier(.18,.5,.2,1) var(--delay,0s) forwards;
will-change:transform, opacity;
backface-visibility:hidden;
}
@keyframes rdRing{
/* le bleu (background) suit le scale ; l'opacité monte en douceur puis tient jusqu'au bout */
0%{ transform:translate(-50%,-50%) scale(var(--startScale,0)); opacity:0 }
22%{ opacity:var(--maxOp,.5) }
88%{ opacity:var(--maxOp,.5) }
100%{ transform:translate(-50%,-50%) scale(1); opacity:0 }
}
@media (prefers-reduced-motion: reduce){
/* On garde l'effet visible mais on supprime les animations CSS prolongées */
.rd-ring{ animation-duration: 0.15s !important; animation-iteration-count: 1 !important; }
.rd-dip { animation-duration: 0.1s !important; }
}
/* === Indicateurs de scroll (flèches montrant qu'on peut faire défiler) === */
.scroll-arrow{
position:absolute;
width:30px; height:30px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--paper);
background:color-mix(in srgb, var(--paper) 88%, transparent);
border:1px solid var(--line);
box-shadow:0 2px 8px rgba(0,0,0,.16);
color:var(--ink);
z-index:30; pointer-events:none;
opacity:0; transition:opacity .25s ease;
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.scroll-arrow svg{ width:15px; height:15px; display:block; }
/* visible seulement quand il reste du contenu à faire défiler dans cette direction */
.scroll-arrow.show{ opacity:.92; }
.scroll-arrow.sa-pulse{ animation:saPulse 1.5s ease-in-out infinite; }
@keyframes saPulse{
0%,100%{ opacity:.5; }
50%{ opacity:.95; }
}
html.dark .scroll-arrow{ background:var(--paper); background:color-mix(in srgb, var(--paper) 85%, transparent); }
@media (prefers-reduced-motion: reduce){
.scroll-arrow.sa-pulse{ animation:none; }
}
/* === Boutons contrôle visiteur (footer) === */
.ft-bottom{gap:16px;flex-wrap:wrap}
.vf-controls{display:flex;gap:8px;flex-wrap:wrap}
.vf-btn{
font-family:var(--mono);font-size:10px;letter-spacing:.6px;
padding:6px 13px;border-radius:999px;cursor:pointer;
background:
linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.10) 46%,rgba(255,255,255,0) 54%,rgba(0,0,0,.04) 100%),
color-mix(in srgb, var(--accent,#0096c7) 16%, transparent);
border:1px solid color-mix(in srgb, var(--accent,#0096c7) 30%, transparent);
border-top-color:rgba(255,255,255,.5);
color:var(--accent,#0096c7);
box-shadow:0 2px 6px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.4);
transition:transform .18s,box-shadow .18s,opacity .18s,background .2s;
}
.vf-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.55)}
.vf-btn.vf-off{
background:rgba(120,130,140,.10);
border-color:rgba(120,130,140,.28);border-top-color:rgba(255,255,255,.3);
color:var(--muted,#8a9298);opacity:.7;
}
html.dark .vf-btn{color:rgba(246,242,234,.85);border-color:rgba(246,242,234,.25)}
html.dark .vf-btn.vf-off{color:rgba(246,242,234,.45)}
/* === Curseur goutte d'eau sur TOUT le site, liens compris (souris uniquement) === */
@media (hover:hover) and (pointer:fine){
html[data-cursor="on"],
html[data-cursor="on"] body,
html[data-cursor="on"] *,
html[data-cursor="on"] a,
html[data-cursor="on"] button,
html[data-cursor="on"] input,
html[data-cursor="on"] textarea,
html[data-cursor="on"] select,
html[data-cursor="on"] label,
html[data-cursor="on"] [onclick]{
cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDM0IDM0Ij4KPGcgdHJhbnNmb3JtPSJyb3RhdGUoLTM1IDE3IDE3KSI+CjxwYXRoIGQ9Ik0xNyA0IEwyMCAxMSBRMjYgMTggMjYgMjMgQTkgOSAwIDEgMSA4IDIzIFE4IDE4IDE0IDExIFoiIGZpbGw9IiM3ZmNlZjIiIGZpbGwtb3BhY2l0eT0iMC40MiIgc3Ryb2tlPSIjOWZkNmYwIiBzdHJva2Utb3BhY2l0eT0iMC40NSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KPHBhdGggZD0iTTE3IDggTDE5IDEyIFEyNCAxOCAyNCAyMyBBNyA3IDAgMSAxIDEwIDIzIFExMCAxOCAxNSAxMiBaIiBmaWxsPSIjYWVlMGY4IiBmaWxsLW9wYWNpdHk9IjAuMzUiLz4KPGVsbGlwc2UgY3g9IjE0IiBjeT0iMjAiIHJ4PSIyLjQiIHJ5PSI0IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjY4Ii8+CjxlbGxpcHNlIGN4PSIyMCIgY3k9IjI0IiByeD0iMS4zIiByeT0iMS42IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjUwIi8+CjxwYXRoIGQ9Ik0xMSAyMiBBNiA2IDAgMCAwIDE3IDI4IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjQ1IiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjwvZz4KPC9zdmc+') 10 6, auto !important;
}
}
/* Hero réduit (13/10) : hauteur ~ -40% */
.hero-grid{min-height:clamp(360px,48vh,460px) !important;padding:3vw 4vw 3.5vw !important}
.hero h1{font-size:clamp(34px,6.6vw,92px) !important;margin:0 0 1.6vw !important}
.hero-eyebrow{margin-bottom:1.4vw !important}
.hero-lede{margin-bottom:1.6vw !important}
.hero-cta-row{margin-bottom:1.6vw !important}
@media (max-width:768px){
.hero-grid{min-height:0 !important;padding:18px 16px 22px !important}
.hero h1{font-size:clamp(32px,10vw,48px) !important;margin:0 0 10px !important}
.hero-eyebrow{margin-bottom:8px !important}
.hero-lede{margin-bottom:12px !important;font-size:13.5px !important;line-height:1.5 !important}
.hero-cta-row{margin-bottom:12px !important;gap:8px !important;flex-wrap:nowrap !important}
.hero-cta-row .btn{padding:11px 14px !important;font-size:13px !important;white-space:nowrap}
.hero-brands{margin-top:8px !important;margin-bottom:14px !important;gap:6px !important}
.hero-brands .brand-pill.has-logo{height:44px !important}
}
@media print{.hero-grid{min-height:0 !important}}
/* Header : évite que les icônes (panier, thème, admin) sortent de l'écran entre 1025 et 1599px */
@media (min-width:1025px) and (max-width:1599px){
.hdr-inner{gap:12px !important}
.universes .univ-tab{font-size:12.5px !important}
.brand-sub{display:none !important}
.brand-mark{width:140px !important;height:96px !important}
.universes .univ-tab{padding:10px 14px !important}
.search-pill{min-width:0 !important;width:clamp(120px,11vw,190px) !important}
.hdr-actions{gap:6px !important;min-width:0}
.search-pill{flex:0 0 auto !important;box-sizing:border-box}
.search-pill input{min-width:0 !important;width:100% !important;text-overflow:ellipsis}
.search-pill .kbd{display:none}
.hdr-actions .icon-btn{flex:0 0 auto !important;min-width:34px}
}
@media (min-width:1025px) and (max-width:1279px){
.brand-mark{width:104px !important;height:72px !important}
.search-pill{width:96px !important}
.hdr-actions{gap:4px !important;min-width:max-content !important}
.hdr-actions .icon-btn{width:34px !important;min-width:34px !important}
.universes .univ-tab{padding:9px 10px !important}
}
.photo-set{display:flex;align-items:center;justify-content:center;width:100%;height:100%;gap:0;padding:6px;box-sizing:border-box}
.card-img .photo-set{position:absolute;inset:0;background:#fff}
.card-img .photo-set img{position:static !important;inset:auto !important}
.card:hover .card-img .photo-set img{transform:none}
.photo-set img,.card-img .photo-set img,#sheet-img .photo-set img{flex:1 1 0;min-width:0;width:34% !important;height:auto !important;max-height:100% !important;object-fit:contain !important;padding:0 !important;margin:0 -3% !important;background:none !important;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.photo-set img:nth-child(2){width:38% !important;position:relative;z-index:2}
.photo-set.ps-sheet{padding:18px}
.card-quote-add{position:relative}.card-quote-add::after{content:"";position:absolute;inset:-9px}