/* Polices Geist et Geist Mono (licence SIL OFL 1.1), hébergées sur le site : aucune ressource externe. */
/* Clash Display (Fontshare, licence libre ITF) : uniquement pour le logotype ManaProcess du pied de page */
@font-face { font-family: "Clash Display"; src: url(../fonts/clash-display-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Polices des thèmes (licence SIL OFL 1.1), hébergées sur le site. */
@font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/bangers-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Monoton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/monoton-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(../fonts/orbitron-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/dancing-script-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/pacifico-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tilt Neon'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/tilt-neon-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/bebas-neue-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Righteous'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/righteous-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/russo-one-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Racing Sans One'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/racing-sans-one-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bungee'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/bungee-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sniglet'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/sniglet-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Medipac MAD — interface « console d'officine »
 * D'après les maquettes fournies : fond nuit, colonne de navigation à gauche,
 * cartes vitrées, accents cyan, icônes de catégorie en carrés colorés.
 * Thème sombre par défaut ; thème clair via data-theme="light" (bouton soleil).
 */
:root {
  --bg: #060d16;
  --bg-2: #08121d;
  --panel: #0b1622;
  --card: #0c1825;
  --card-2: #0f1e2e;
  --glass: rgba(140, 185, 230, .05);
  --glass-2: rgba(140, 185, 230, .09);
  --field: rgba(2, 7, 14, .55);
  --line: rgba(150, 195, 235, .11);
  --line-2: rgba(150, 195, 235, .2);
  --ink: #eef5fb;
  --ink-2: #a3b4c6;
  --ink-3: #7d91a6; /* texte discret : contraste AA (6:1) sur le fond */
  --cyan-txt: var(--cyan); /* cyan utilisé en texte (lisible sur fond sombre) */
  --danger-txt: #ff6b6b; --warn-txt: #ffb547; --blue-txt: var(--blue); /* couleurs d'état en texte */
  --cyan: #2ee6d6;
  --cyan-2: #19b9ee;
  --blue: #4c8dff;
  --grad: linear-gradient(100deg, #34ecdb 0%, #20b8f2 100%);
  --on-grad: #04151c;
  --glow: rgba(46, 230, 214, .35);
  --ok: #3ee39b;
  --warn: #ffb547;
  --danger: #ff6b6b;
  --header-bg: rgba(6, 13, 22, .86);
  --studio: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #eef2f7 55%, #dde4ec 100%);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .7);
  --big-card: linear-gradient(135deg, #0c4a5e 0%, #0a2a3d 42%, #0a1826 100%);

  --f-sans: "Geist", "Inter var", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --header-h: 76px;
  --side-w: 222px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef3f8;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --card: #ffffff;
  --card-2: #f4f8fb;
  --glass: rgba(15, 45, 80, .035);
  --glass-2: rgba(15, 45, 80, .07);
  --field: #f3f7fa;
  --line: rgba(15, 45, 80, .1);
  --line-2: rgba(15, 45, 80, .18);
  --ink: #0b1b2a;
  --ink-2: #4a5f73;
  --ink-3: #5a6d82; /* contraste AA sur fond clair */
  --cyan-txt: #0a766d; /* cyan en texte, assombri pour le fond clair (4,9:1) */
  --danger-txt: #c0392b; --warn-txt: #9a5b00; --blue-txt: #1f55b8; /* assombries pour le fond clair (AA) */
  --cyan: #0aa99b;
  --cyan-2: #0a8fc4;
  --blue: #2f6fe0;
  --grad: linear-gradient(100deg, #19d3c1 0%, #1aa3e6 100%);
  --on-grad: #ffffff;
  --glow: rgba(10, 169, 155, .25);
  --header-bg: rgba(255, 255, 255, .88);
  --shadow: 0 20px 50px -24px rgba(15, 45, 80, .35);
  --big-card: linear-gradient(135deg, #d9f6f3 0%, #e6f1fb 55%, #ffffff 100%);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
::selection { background: rgba(46, 230, 214, .3); }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h3 { font-size: 1.05rem; letter-spacing: -0.015em; font-weight: 650; line-height: 1.2; }
p { margin: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.num { text-align: right; }
.narrow { max-width: 960px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-size: .82rem; color: var(--cyan-txt); letter-spacing: .01em; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -20%), rgba(46, 230, 214, .1), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.glow:hover::before { opacity: 1; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font: 600 .93rem/1 var(--f-sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .2s, background-color .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-grad { background: var(--grad); color: var(--on-grad); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 10px 30px -10px var(--glow); }
.btn-grad:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 12px 36px -8px var(--glow); }
.btn-glass { background: var(--glass); border-color: var(--line-2); color: var(--ink); }
.btn-glass:hover { border-color: var(--cyan-txt); }
.btn-outline { background: transparent; border-color: var(--cyan-txt); color: var(--ink); }
.btn-outline:hover { background: rgba(46, 230, 214, .08); }
.btn-lg { min-height: 50px; padding: 0 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: .86rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; }
.btn-link { background: none; border: 0; color: var(--ink-3); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; align-self: center; }
.btn-link:hover { color: var(--danger); }
.link-arrow { font-weight: 550; color: var(--cyan-txt); text-decoration: none; white-space: nowrap; font-size: .93rem; display: inline-flex; align-items: center; gap: 8px; }
.link-arrow::after { content: "→"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--header-h);
  background: var(--header-bg); backdrop-filter: saturate(140%) blur(18px); border-bottom: 1px solid var(--line);
}
.header-in {
  height: 100%; display: flex; align-items: center; gap: 20px;
  padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px));
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo svg { width: 40px; height: 40px; stroke: none; filter: drop-shadow(0 0 16px rgba(46, 230, 214, .35)); }
.logo-word { font-weight: 750; font-size: 1.7rem; letter-spacing: -0.05em; }
.logo-tag { font: 600 .7rem/1 var(--f-mono); padding: 5px 8px; border-radius: 7px; color: var(--cyan-txt); border: 1px solid rgba(46, 230, 214, .4); background: rgba(46, 230, 214, .07); }
.main-nav { display: flex; gap: 6px; margin-left: 40px; }
.main-nav a { position: relative; text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--ink); padding: 10px 16px; border-radius: 12px; transition: background-color .15s; }
.main-nav a:hover { background: var(--glass-2); }
.main-nav a.is-active { background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.main-nav a.is-active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -3px; height: 3px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 12px var(--glow); }
.search {
  flex: 1; min-width: 0; max-width: 360px; margin-left: auto;
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 16px; border-radius: 14px;
  background: var(--field); border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s;
}
.search:focus-within, .search.is-scan { border-color: var(--cyan-txt); box-shadow: 0 0 0 4px rgba(46, 230, 214, .12); }
.search-ico { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-2); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .93rem; outline: none; }
.search input::placeholder { color: var(--ink-3); }
.scan-btn { width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.scan-btn:hover, .search.is-scan .scan-btn { color: var(--cyan-txt); background: rgba(46, 230, 214, .1); }
.scan-btn svg { width: 20px; height: 20px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-round {
  position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--glass); color: var(--ink); display: grid; place-items: center; cursor: pointer; text-decoration: none; flex-shrink: 0;
}
.icon-round:hover, .icon-round.is-active { border-color: var(--cyan-txt); }
.icon-round svg { width: 21px; height: 21px; }
#theme-btn { border: 0; background: transparent; color: var(--cyan-txt); }
#theme-btn .ico-moon { display: none; }
:root[data-theme="light"] #theme-btn .ico-sun { display: none; }
:root[data-theme="light"] #theme-btn .ico-moon { display: block; }
#notif-btn { border: 0; background: transparent; }
.badge-dot {
  position: absolute; top: 2px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: #ff3b5c; color: #fff; font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--bg);
}
.badge-cyan { background: var(--grad); color: var(--on-grad); top: -6px; right: -6px; }
.cart-btn {
  position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px 0 14px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line-2); text-decoration: none; transition: border-color .15s;
}
.cart-btn:hover, .cart-btn.is-active { border-color: var(--cyan-txt); }
.cart-btn > svg { width: 22px; height: 22px; }
.cart-txt { display: flex; flex-direction: column; line-height: 1.1; }
.cart-txt strong { font-size: .95rem; font-weight: 600; }
.cart-txt small { font-size: .72rem; color: var(--ink-2); }
.bump { animation: bump .4s ease; }
@keyframes bump { 40% { transform: scale(1.3); } }
.menu-btn { display: none; }

/* Notifications */
.notif-wrap { position: relative; }
.notif-panel {
  position: absolute; right: -60px; top: calc(100% + 12px); width: 320px; z-index: 60;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; animation: fade .2s ease;
}
.notif-title { font-weight: 650; margin-bottom: 8px; }
.notif-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.notif-panel li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.notif-panel li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 8px var(--glow); }
.notif-panel li.is-read::before { background: var(--line-2); box-shadow: none; }
.notif-panel strong { display: block; font-size: .9rem; }
.notif-panel span { font-size: .82rem; color: var(--ink-2); }
.notif-panel a { color: var(--cyan-txt); }

/* ---------- Ossature ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); }
.sidebar {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); align-self: start;
  height: calc(100vh - var(--header-h)); overflow-y: auto; scrollbar-width: none;
  padding: 20px 14px 18px max(14px, env(safe-area-inset-left, 0px)); border-right: 1px solid var(--line); background: var(--bg-2);
  display: flex; flex-direction: column; gap: 6px;
}
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.side-nav a {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 14px; text-decoration: none;
  font-size: .98rem; font-weight: 500; color: var(--ink); border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s;
}
.side-nav a svg { width: 24px; height: 24px; flex-shrink: 0; }
.side-nav a:hover { background: var(--glass-2); }
.side-nav a.is-active {
  background: linear-gradient(100deg, rgba(46, 230, 214, .28), rgba(25, 185, 238, .14));
  border-color: rgba(46, 230, 214, .65); box-shadow: 0 0 22px -4px var(--glow), inset 0 0 18px rgba(46, 230, 214, .12);
}
.side-nav a.is-active svg { color: var(--cyan-txt); }
/* Survol du menu : chaque bouton prend sa couleur (bordure, fond teinté, icône et texte) */
.side-nav a { --nav-c: #2ee6d6; }
.side-nav a[href="#accueil"] { --nav-c: #2ee6d6; }
.side-nav a[href="#favoris"] { --nav-c: #ff4f8f; }
.side-nav a[href="#commandes"] { --nav-c: #ffae2e; }
.side-nav a[href="#renouvellement"] { --nav-c: #3fd77a; }
.side-nav a[href="#historique"] { --nav-c: #a78bfa; }
.side-nav a[href="#kits"] { --nav-c: #19b9ee; }
.side-nav a[href="#bonsplans"] { --nav-c: #ff7a45; }
.side-nav a[href="#nouveautes"] { --nav-c: #f472d0; }
.side-nav a[href="#aide"] { --nav-c: #4f8dff; }
.side-nav a[href="#admin"] { --nav-c: #ff5d6c; }
.side-nav a[href="#installer"] { --nav-c: #9be15d; }
.side-nav a[href="#parametres"] { --nav-c: #c084fc; }
html[data-theme="light"] .side-nav a { --nav-ink: color-mix(in srgb, var(--nav-c) 72%, #000); }
.side-nav a:not(.is-active):not(.nav-themes):hover, .side-nav a:not(.is-active):not(.nav-themes):focus-visible {
  background: color-mix(in srgb, var(--nav-c) 14%, transparent); border-color: color-mix(in srgb, var(--nav-c) 70%, transparent);
  color: var(--nav-ink, var(--nav-c)); box-shadow: 0 0 18px -6px var(--nav-c); outline: none;
}
.side-nav a:not(.is-active):not(.nav-themes):hover svg, .side-nav a:not(.is-active):not(.nav-themes):focus-visible svg { color: var(--nav-ink, var(--nav-c)); transform: scale(1.08); }
.side-nav a svg { transition: transform .2s, color .15s; }
.side-count { margin-left: auto; font-size: .72rem; color: var(--on-grad); background: var(--grad); border-radius: 999px; padding: 2px 7px; }
.side-sep { border: 0; border-top: 1px solid var(--line); margin: 14px 8px; }
.side-mobile { display: none; }
.side-promo {
  margin-top: auto; position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; text-decoration: none;
  border: 1px solid rgba(46, 230, 214, .45); background: linear-gradient(180deg, #0b3443, #0a1724 70%); box-shadow: 0 0 26px -10px var(--glow);
}
.side-promo img { width: 100%; aspect-ratio: 172 / 150; object-fit: cover; mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
.side-promo-txt { padding: 0 18px 18px; margin-top: -26px; position: relative; display: flex; flex-direction: column; gap: 6px; color: #eef5fb; }
.side-promo-txt strong { font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em; }
.side-promo-txt > span:not(.btn) { color: #b9c9d8; font-size: .92rem; margin-bottom: 8px; }
.side-promo .btn { align-self: stretch; }
.side-backdrop { display: none; }

main#app {
  min-width: 0; padding-top: 18px;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.view { padding-bottom: 40px; }
.block { margin-top: 28px; }
.block-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------- Héros ---------- */
.hero { position: relative; min-height: 340px; display: grid; align-items: center; isolation: isolate; }
.hero-photo {
  position: absolute; z-index: -1; top: -18px; right: calc(-1 * max(24px, env(safe-area-inset-right, 0px))); bottom: -6px; width: 66%;
  mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.hero-photo::after {
  content: ""; position: absolute; left: 12%; top: -10%; bottom: -10%; width: 2px; transform: rotate(18deg); transform-origin: top;
  background: linear-gradient(transparent, var(--cyan) 30%, var(--cyan-2) 70%, transparent); box-shadow: 0 0 16px var(--cyan);
}
.hero-copy { position: relative; max-width: 620px; padding-block: 8px 20px; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.45rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1.02; }
.lead { font-size: 1.12rem; color: var(--ink); max-width: 56ch; }
.lead strong { font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.hero-side { position: absolute; right: 0; top: 16px; width: 196px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hero-side li {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px;
  background: rgba(8, 22, 34, .72); border: 1px solid rgba(46, 230, 214, .35); backdrop-filter: blur(12px);
  font-size: .86rem; color: #c9d7e4; line-height: 1.25; box-shadow: 0 0 22px -12px var(--glow);
}
.hero-side strong { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
.hs-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; color: var(--cyan-txt); border: 1px solid rgba(46, 230, 214, .4); background: rgba(46, 230, 214, .1); }
.hs-ico svg { width: 22px; height: 22px; }

/* Bandeau de chiffres */
.stats { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.stats .stats-a { margin: 0; display: flex; align-items: center; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); padding: 14px 6px; }
.stats .stats-a > div { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico dd" "ico dt"; column-gap: 12px; align-items: center; padding: 4px 14px; min-width: 0; }
.stats .stats-a > div + div { border-left: 1px solid var(--line); }
.stats .dd { grid-area: dd; margin: 0; font-size: 1.45rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.stats .dt { grid-area: dt; font-size: .85rem; color: var(--ink-2); }
.st-ico { grid-area: ico; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.st-ico svg { width: 24px; height: 24px; }
.st-green { background: linear-gradient(140deg, #19c48a, #0e8f70); }
.st-blue { background: linear-gradient(140deg, #2f86f0, #1d58c9); }
.st-cyan { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.stats-b {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 96% 30%, rgba(46, 230, 214, .32), transparent 45%), linear-gradient(100deg, var(--card) 45%, #0b3a4c 75%, #0e6b78 100%) !important;
}
:root[data-theme="light"] .stats-b { background: radial-gradient(ellipse at 96% 30%, rgba(10, 169, 155, .25), transparent 45%), linear-gradient(100deg, #fff 45%, #d9f3f2 100%) !important; }
.stats-b .st-support dd { font-size: .98rem; font-weight: 600; letter-spacing: -0.01em; }
.stats-b .st-support { max-width: 220px; }

/* ---------- Catégories ---------- */
.cat-zone { display: flex; flex-direction: column; gap: 12px; }
.cat-top { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(160px, auto); gap: 12px; }
.cat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cat {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
  border-radius: var(--r); border: 1px solid var(--line-2); background: linear-gradient(160deg, var(--card-2), var(--card) 70%);
  padding: 16px 18px; min-height: 160px; transition: border-color .25s, transform .25s, box-shadow .25s;
}
.cat:hover { border-color: rgba(46, 230, 214, .6); transform: translateY(-2px); box-shadow: 0 0 26px -10px var(--glow); }
.cat-num { font: 500 .8rem var(--f-mono); color: var(--ink-2); position: relative; z-index: 1; }
.cat-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); position: relative; z-index: 1; }
.cat-ico svg { width: 22px; height: 22px; stroke-width: 1.9; }
.cat h3 { font-size: 1.12rem; position: relative; z-index: 1; }
.cat p { font-size: .86rem; color: var(--ink-2); line-height: 1.3; position: relative; z-index: 1; max-width: 22ch; }
.cat-img { position: absolute; z-index: 0; pointer-events: none; object-fit: contain; }
.cat-img.is-crop { object-fit: cover; mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.cat-pill {
  position: relative; z-index: 1; align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--cyan-txt); padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(46, 230, 214, .45); background: rgba(46, 230, 214, .06);
}
.cat-go {
  position: absolute; z-index: 1; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--ink); color: var(--ink); background: rgba(6, 13, 22, .45); transition: background-color .2s, color .2s, border-color .2s;
}
:root[data-theme="light"] .cat-go { background: rgba(255, 255, 255, .7); }
.cat-go svg { width: 18px; height: 18px; stroke-width: 2.2; }
.cat:hover .cat-go { background: var(--cyan); border-color: var(--cyan-txt); color: var(--on-grad); }
/* Petites cartes du haut : texte à gauche, image à droite */
.cat-top .cat:not(.cat-big) { padding-right: 46%; }
.cat-top .cat:not(.cat-big) .cat-ico { margin: 2px 0 6px; }
.cat-top .cat:not(.cat-big) .cat-img { right: 6px; top: 8px; width: 46%; height: 78%; }
/* Cartes en ligne : icône et titre côte à côte, image en bas à gauche */
.cat-row .cat { min-height: 140px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 12px; row-gap: 4px; align-items: start; padding: 14px 16px; }
.cat-row .cat-num { grid-row: 1; grid-column: 1; padding-top: 4px; }
.cat-row .cat-ico { grid-row: 1 / 3; grid-column: 2; }
.cat-row .cat h3 { grid-row: 1; grid-column: 3; font-size: 1rem; }
.cat-row .cat p { grid-row: 2; grid-column: 3; font-size: .8rem; max-width: none; }
.cat-row .cat-pill { grid-row: 3; grid-column: 3; justify-self: end; margin-right: 50px; font-size: .78rem; }
.cat-row .cat-img { left: 8px; bottom: 4px; width: 42%; height: 52%; }
/* Grande carte */
.cat-big {
  grid-row: span 2; padding: 22px 24px; border: 1.5px solid rgba(46, 230, 214, .8); background: var(--big-card);
  box-shadow: 0 0 34px -8px var(--glow), inset 0 0 40px -20px rgba(46, 230, 214, .4);
}
.cat-big .cat-ico { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; background: rgba(6, 20, 32, .5) !important; border: 1.5px solid rgba(46, 230, 214, .7); color: var(--cyan-txt); box-shadow: none; }
.cat-big .cat-ico svg { width: 26px; height: 26px; }
.cat-big .cat-label { margin-top: 14px; font-size: .9rem; color: var(--cyan-txt); position: relative; z-index: 1; }
.cat-big h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.03em; max-width: 12ch; }
.cat-big p { font-size: .95rem; max-width: 24ch; margin-top: 4px; }
.cat-big .cat-img { right: 8px; bottom: 6px; width: 62%; height: 82%; }
.cat-big .btn { position: relative; z-index: 1; align-self: flex-start; margin-top: 18px; }
.cat-big .cat-go, .cat-big .cat-pill { display: none; }
/* Couleurs des icônes de catégorie */
.c-lit { background: linear-gradient(140deg, #21b5f0, #1774d6); }
.c-mobilite { background: linear-gradient(140deg, #8b5cf6, #5b2fd6); }
.c-coussins { background: linear-gradient(140deg, #19c48a, #0c8a64); }
.c-vie-courante { background: linear-gradient(140deg, #f7913d, #d9551a); }
.c-incontinence { background: linear-gradient(140deg, #ff5a6e, #d42a49); }
.c-sondes { background: linear-gradient(140deg, #3b8cff, #1d58d6); }
.c-stomie { background: linear-gradient(140deg, #a26bff, #6d3bdc); }
.c-soins { background: linear-gradient(140deg, #22c98e, #0d8f68); }
.c-chaussures { background: linear-gradient(140deg, #3f8cff, #2257cf); }
.c-electronique { background: linear-gradient(140deg, #22c7e0, #0e86b3); }
.c-nutrition { background: linear-gradient(140deg, #ffb444, #e07a12); }
.c-respiratoire { background: linear-gradient(140deg, #3fb7ff, #1a7fd6); }
.c-allaitement { background: linear-gradient(140deg, #ff6fb1, #d63a86); }

/* Packs */
.kits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kit { position: relative; border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--line-2); }
.kit:hover { border-color: rgba(46, 230, 214, .5); }
.kit-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.kit-badge { flex-shrink: 0; font: 600 .72rem/1 var(--f-mono); padding: 6px 9px; border-radius: 999px; background: var(--grad); color: var(--on-grad); }
.kit h3 { font-size: 1.12rem; }
.kit p.kit-for { color: var(--ink-2); font-size: .86rem; margin-top: 4px; }
.kit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kit li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); }
.kit li small { display: block; font-size: .74rem; color: var(--ink-3); }
.kit li span:last-child { font-family: var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.kit-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.kit-price strong { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.04em; }
.kit-price small { color: var(--ink-3); font-size: .78rem; width: 100%; font-family: var(--f-mono); }

/* Bandeau d'appel */
.cta {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 28px; border-radius: var(--r-lg);
  border: 1px solid rgba(46, 230, 214, .4); background: radial-gradient(ellipse at 90% 50%, rgba(46, 230, 214, .16), transparent 55%), var(--card);
}
.cta p { color: var(--ink-2); max-width: 62ch; margin-top: 6px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Pages internes ---------- */
.page-head { margin-bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.catalog { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.filters { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 16px); display: flex; flex-direction: column; gap: 24px; }
.filter-title { font-size: .7rem; font-weight: 500; color: var(--ink-3); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .08em; }
.chips-col { display: flex; flex-direction: column; gap: 2px; }
.chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; border: 1px solid transparent; background: transparent; color: var(--ink-2); font: inherit; font-size: .9rem; padding: 8px 11px; border-radius: var(--r-sm); cursor: pointer; }
.chip:hover { background: var(--glass); color: var(--ink); }
.chip.is-active { background: var(--glass-2); color: var(--ink); border-color: rgba(46, 230, 214, .45); }
.chip small { font-family: var(--f-mono); color: var(--ink-3); font-size: .72rem; }
.chip.is-active small { color: var(--cyan-txt); }
.switch { display: flex; align-items: center; gap: 11px; font-size: .9rem; color: var(--ink-2); padding: 7px 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.sw { width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; flex-shrink: 0; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-2); transition: transform .2s, background .2s; }
.switch input:checked + .sw { background: var(--grad); }
.switch input:checked + .sw::after { transform: translateX(14px); background: var(--on-grad); }
.switch input:focus-visible + .sw { outline: 2px solid var(--cyan); outline-offset: 2px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar p { font-size: .82rem; }
.sort { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--ink-3); }
select, .field input, textarea, .quick-row input {
  font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; transition: border-color .15s, box-shadow .15s;
}
select:focus, .field input:focus, textarea:focus, .quick-row input:focus { border-color: var(--cyan-txt); box-shadow: 0 0 0 4px rgba(46, 230, 214, .12); outline: none; }
select option { background: var(--panel); }
::placeholder { color: var(--ink-3); }
.subchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.subchip { font: inherit; font-size: .82rem; color: var(--ink-2); background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.subchip:hover { color: var(--ink); border-color: var(--line-2); }
.subchip.is-active { color: var(--on-grad); background: var(--grad); border-color: transparent; font-weight: 600; }
.cat-infos { margin-bottom: 16px; border: 1px solid rgba(46, 230, 214, .3); background: rgba(46, 230, 214, .05); border-radius: var(--r); padding: 14px 18px; }
.cat-infos summary { cursor: pointer; font-weight: 600; color: var(--cyan-txt); font-size: .92rem; }
.cat-infos[open] summary { margin-bottom: 8px; }
.info-block { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.info-block:first-of-type { border-top: 0; }
.info-block h4 { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; }
.info-block p { color: var(--ink-2); font-size: .88rem; white-space: pre-line; }
.table-wrap { overflow-x: auto; }
.vtable { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 440px; }
.vtable th { text-align: left; font: 500 .64rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-2); }
.vtable td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.vtable .num { text-align: right; }

/* Cartes produit */
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { position: relative; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; overflow: hidden; transition: border-color .25s, transform .25s; }
.card:hover { border-color: rgba(46, 230, 214, .45); transform: translateY(-2px); }
.card-visual, .d-visual { position: relative; aspect-ratio: 4 / 3; max-width: 100%; width: 100%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; overflow: hidden; background: var(--studio); }
.photo { width: 84%; height: 84%; object-fit: contain; transition: transform .4s cubic-bezier(.2, .8, .2, 1); mix-blend-mode: multiply; }
.card:hover .photo { transform: scale(1.05); }
.photo-ico { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: rgba(11, 17, 27, .06); }
.photo-ico svg { width: 38px; height: 38px; color: #4a6077; stroke-width: 1.5; }
.card-flags { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.flag { font: 600 .66rem/1 var(--f-mono); padding: 5px 7px; border-radius: 6px; background: rgba(5, 10, 18, .85); color: #eef5fb; }
.flag-lppr { color: #6ff5e8; }
.flag-loc { color: #a9c3ff; }
.fav-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(5, 10, 18, .75); color: #fff;
}
.fav-btn svg { width: 18px; height: 18px; }
.fav-btn.is-on { color: #ff4d6d; }
.fav-btn.is-on svg { fill: currentColor; }
.card-body { padding: 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-ref { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); display: flex; justify-content: space-between; gap: 8px; }
.card-name { font: 600 1rem/1.3 var(--f-sans); letter-spacing: -0.015em; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); cursor: pointer; }
.card-name:hover { color: var(--cyan-txt); }
.card-sub { font-size: .82rem; color: var(--ink-2); margin-top: -4px; }
.card-price { margin-top: auto; padding: 11px 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.cp-label { font: 500 .64rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.card-price strong { font-size: 1.12rem; font-weight: 600; }
.cp-none { color: var(--ink-2); font-size: .95rem !important; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-var { font-size: .74rem; color: var(--ink-3); }
.btn-cart { gap: 6px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--field); }
.qty button { width: 30px; height: 34px; border: 0; background: transparent; color: var(--ink-2); font-size: 1.05rem; cursor: pointer; }
.qty button:hover { color: var(--cyan-txt); background: var(--glass); }
.qty input { width: 38px; height: 34px; border: 0; text-align: center; font: 500 .9rem var(--f-mono); color: var(--ink); background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.empty { grid-column: 1 / -1; padding: 44px 24px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-2); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.empty svg { width: 36px; height: 36px; color: var(--cyan-txt); }
.empty .hero-cta { margin: 0; justify-content: center; }

/* Saisie par CIP */
.quick { display: flex; flex-direction: column; gap: 18px; }
.quick-table { overflow-x: auto; }
.quick-row { display: grid; grid-template-columns: 190px minmax(160px, 1fr) 90px 110px 36px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 620px; }
.quick-row-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding-top: 0; }
.quick-row input { font-family: var(--f-mono); width: 100%; padding: 8px 10px; }
.q-name { font-size: .9rem; line-height: 1.3; }
.q-name.is-error { color: var(--danger); }
.q-total { font-family: var(--f-mono); text-align: right; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { background: rgba(255, 107, 107, .1); color: var(--danger); }
.icon-btn svg { width: 17px; height: 17px; }
.quick-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.paste { border-top: 1px solid var(--line); padding-top: 16px; }
.paste summary { cursor: pointer; font-weight: 600; color: var(--cyan-txt); }
.paste[open] { display: flex; flex-direction: column; gap: 10px; }
.paste label { font-size: .88rem; }
.paste textarea { width: 100%; resize: vertical; }
.paste .btn { align-self: flex-start; }

/* Lignes (panier) */
.lines { display: flex; flex-direction: column; }
.panel.lines { padding-block: 6px; }
.line { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto 36px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line-ico { width: 60px; height: 60px; border-radius: 12px; border: 1px solid var(--line); background: var(--studio); display: grid; place-items: center; overflow: hidden; }
.line-ico .photo { width: 88%; height: 88%; }
.line-ico .photo-ico { width: 100%; height: 100%; border-radius: 0; background: none; }
.line-ico .photo-ico svg { width: 26px; height: 26px; }
.line-ico .kit-badge { font-size: .62rem; }
.line-name { font: 600 .98rem/1.3 var(--f-sans); background: none; border: 0; padding: 0; text-align: left; color: var(--ink); cursor: pointer; }
.line-name:hover { color: var(--cyan-txt); }
.line-meta { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); margin-top: 4px; }
.line-codes { display: flex; flex-wrap: wrap; margin-top: 4px; }
.line-total { font-family: var(--f-mono); text-align: right; min-width: 92px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.summary { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 16px); display: flex; flex-direction: column; gap: 16px; }
.summary h2 { font-size: 1.2rem; }
.totals { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; font-size: .9rem; }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; text-align: right; font-family: var(--f-mono); }
.totals .t-strong { color: var(--ink); font-weight: 600; font-size: 1.02rem; padding-top: 12px; border-top: 1px solid var(--line-2); }
.totals dd.t-strong { font-size: 1.15rem; }
.order-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: .86rem; font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea { font-weight: 400; width: 100%; }
.hint { font-weight: 400; color: var(--ink-3); font-size: .78rem; }
.copy-area { width: 100%; font-size: .78rem; resize: vertical; }
.form-error { color: var(--danger); font-size: .88rem; }
.form-error:empty { display: none; }
.form-ok { padding: 16px; border-radius: 12px; background: rgba(46, 230, 214, .07); border: 1px solid rgba(46, 230, 214, .3); display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.form-ok h2 { font-size: 1.1rem; color: var(--cyan-txt); }
.form-ok .ok-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.order-form textarea { resize: vertical; min-height: 56px; font: inherit; }
.envoi-info { margin: 0; line-height: 1.45; }
.envoi-info b { color: var(--ink); word-break: break-all; }

/* Accès, aide, paramètres, commandes */
.account-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.account-layout > div { display: flex; flex-direction: column; gap: 14px; }
.perks { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); }
.perks li { display: flex; gap: 12px; align-items: baseline; }
.perks li::before { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg) translateY(-3px); flex-shrink: 0; }
.form-card { display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.span-2 { grid-column: span 2; }
.field input.is-invalid, .field select.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255, 107, 107, .1); }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details[open] summary { color: var(--cyan-txt); margin-bottom: 8px; }
.faq p { color: var(--ink-2); }
.settings { display: flex; flex-direction: column; gap: 14px; }
.set-block { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.set-block .form-grid { width: 100%; }
.set-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--field); border: 1px solid var(--line-2); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 8px 18px; border-radius: 9px; cursor: pointer; font-weight: 500; color: var(--ink-2); }
.seg input:checked + span { background: var(--grad); color: var(--on-grad); }
.seg input:focus-visible + span { outline: 2px solid var(--cyan); }
.orders { display: flex; flex-direction: column; gap: 12px; }
.order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.order h3 { font-size: 1rem; }
.order p { color: var(--ink-2); font-size: .86rem; }
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Modèles de commande récurrente */
.modeles { margin-bottom: 26px; }
.modeles-head { display: grid; gap: 4px; margin-bottom: 12px; }
.modeles-head h2, .orders-titre { font-size: 1.15rem; }
.orders-titre { margin: 0 0 12px; }
.modeles-list { display: grid; gap: 12px; }
.modele { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: var(--r); padding: 16px 18px; }
.modele h3 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.modele h3 svg { width: 18px; height: 18px; color: var(--cyan-txt); flex-shrink: 0; }
.modele-apercu { color: var(--ink-2); font-size: .86rem; margin: 4px 0 2px; }
.modele-meta { color: var(--ink-3); font-size: .8rem; }
.modele-vide { padding: 14px 18px; border: 1px dashed var(--line-2); border-radius: var(--r); }
.modele-form { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.modele-form input { flex: 1; min-width: 180px; }
#cart-modele-zone .modele-form { border-top: 0; padding-top: 0; }
@media (max-width: 760px) { .modele { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fiche produit ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(2, 6, 12, .6); backdrop-filter: blur(4px); z-index: 70; animation: fade .2s ease; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(600px, 100%); overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line-2);
  padding: calc(env(safe-area-inset-top, 0px) + 20px) max(22px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) 24px;
  box-shadow: -30px 0 80px rgba(0, 0, 0, .45); animation: slide .3s cubic-bezier(.2, .8, .2, 1);
}
.drawer-close { position: sticky; top: 0; float: right; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); cursor: pointer; display: grid; place-items: center; z-index: 3; }
.drawer-close:hover { border-color: var(--cyan-txt); }
.drawer-close svg { width: 17px; height: 17px; }
.d-visual { cursor: default; border: 1px solid var(--line); border-radius: var(--r); margin: 8px 0 20px; clear: both; }
.d-visual .fav-btn { top: 12px; right: 12px; }
.d-photo { width: 78%; height: 78%; }
.d-thumbs { display: flex; gap: 8px; margin: -10px 0 18px; overflow-x: auto; }
.d-thumb { flex-shrink: 0; width: 64px; height: 52px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--studio); padding: 4px; cursor: pointer; }
.d-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.d-thumb.is-on { border-color: var(--cyan-txt); box-shadow: 0 0 0 2px rgba(46, 230, 214, .3); }
.d-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.d-head h2 { font-size: 1.65rem; }
.d-meta { font-size: .74rem; color: var(--ink-3); }
.d-sec { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.d-sec h3 { font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.d-sec > p { color: var(--ink-2); }
.d-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.d-points { margin: 0; padding-left: 18px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; font-size: .92rem; }
.d-points li::marker { color: var(--cyan-txt); }
.d-comptoir { padding: 14px 16px; border-radius: 12px; background: rgba(46, 230, 214, .06); border: 1px solid rgba(46, 230, 214, .25); font-size: .93rem; color: var(--ink); }
.d-comptoir + .d-comptoir { margin-top: 8px; }
.btn-copy-all { display: inline-flex; align-items: center; gap: 7px; font: 500 .8rem var(--f-sans); color: var(--cyan-txt); background: rgba(46, 230, 214, .07); border: 1px solid rgba(46, 230, 214, .3); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.btn-copy-all:hover { background: rgba(46, 230, 214, .14); }
.btn-copy-all svg { width: 14px; height: 14px; stroke-width: 2; }
.vlist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vgroup { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan-txt); background: rgba(46, 230, 214, .06); padding: 8px 14px; border-bottom: 1px solid var(--line); }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main price" "main buy"; gap: 6px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); align-items: center; }
.vrow:last-child { border-bottom: 0; }
.vrow.is-hl { background: rgba(46, 230, 214, .08); box-shadow: inset 3px 0 0 var(--cyan); }
.v-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v-l { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.v-a { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .8rem; color: var(--ink-2); }
.v-a b { color: var(--ink); font-weight: 600; }
.v-codes { display: flex; flex-wrap: wrap; margin-top: 4px; }
.v-price { grid-area: price; text-align: right; display: flex; flex-direction: column; }
.v-price strong { font-size: 1rem; font-weight: 600; }
.v-price small { font-size: .66rem; color: var(--ink-3); }
.v-buy { grid-area: buy; display: flex; gap: 6px; justify-content: flex-end; }
.v-buy .qty button { width: 28px; height: 32px; }
.v-buy .qty input { width: 40px; height: 32px; }
.v-buy .btn-sm { min-height: 34px; width: 42px; padding: 0; }

/* Codes copiables */
.code {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px 2px 0; padding: 3px 7px 3px 6px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--field); font: 500 .74rem/1.2 var(--f-mono); color: var(--ink); cursor: copy; user-select: none; transition: border-color .15s, background-color .15s, color .15s;
}
.code:hover { border-color: var(--cyan-txt); background: rgba(46, 230, 214, .08); }
.code-l { font-size: .6rem; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.code-v { letter-spacing: .02em; user-select: all; }
.code svg { width: 12px; height: 12px; color: var(--ink-3); stroke-width: 2; }
.code:hover svg { color: var(--cyan-txt); }
.code.is-copied { border-color: var(--ok); color: var(--ok); }
.code.is-copied svg { color: var(--ok); }
.code-off { cursor: default; color: var(--ink-3); user-select: text; }
.code-off:hover { border-color: var(--line-2); background: var(--field); }
.vtable .code { margin: 0 4px 2px 0; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 20px; }
.footer-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) minmax(0, 1fr); gap: 24px 40px; padding-block: 32px 22px; align-items: start; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand .logo-word { font-size: 1.4rem; }
.footer-brand p { max-width: 34ch; font-size: .92rem; color: var(--ink-2); }
/* Accroche du pied de page, écrite à la main */
.footer-brand .footer-accroche { max-width: 26ch; font: 600 1.42rem/1.3 "Dancing Script", cursive; color: var(--ink); letter-spacing: .005em; }
.footer-brand .mono { color: var(--ink-3); }
.footer-title { font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
#footer-univers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; color: var(--ink-2); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--cyan-txt); }
.footer-legal { border-top: 1px solid var(--line); padding-block: 14px 22px; font-size: .78rem; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.footer-legal p { margin: 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 88px); transform: translateX(-50%); z-index: 90;
  background: var(--panel); color: var(--ink); border: 1px solid rgba(46, 230, 214, .45); padding: 11px 18px 11px 14px; border-radius: 12px;
  font-size: .9rem; font-weight: 500; box-shadow: var(--shadow); max-width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; animation: rise .3s cubic-bezier(.2, .8, .2, 1);
}
.toast::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); color: var(--on-grad); font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.toast-link { color: var(--cyan-txt); font-weight: 600; text-decoration: none; white-space: nowrap; }
.toast-link:hover { text-decoration: underline; }

@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes rise { from { transform: translate(-50%, -10px); opacity: 0; } }

/* ---------- Adaptation aux écrans ---------- */
@media (max-width: 1360px) {

  .main-nav { margin-left: 8px; }
  .main-nav a { padding: 10px 12px; }
  .hero-side { width: 176px; }
  .kits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {

  .main-nav { display: none; }
  .menu-btn { display: grid; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 75; top: 0; left: 0; bottom: 0; height: auto; width: min(290px, 86vw);
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px); transform: translateX(-105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); box-shadow: var(--shadow);
  }
  .sidebar.is-open { transform: none; }
  /* Hauteur de l'écran (pas celle de son contenu) : le menu défile en lui-même, sans entraîner la page */
  .sidebar { bottom: auto; height: 100vh; height: 100dvh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .side-mobile { display: flex; }
  .side-backdrop { display: block; position: fixed; inset: 0; z-index: 74; background: rgba(2, 6, 12, .55); }
  .side-backdrop[hidden] { display: none; }
  .cat-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-big { grid-column: span 2; grid-row: auto; min-height: 300px; }
  .cat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {

  .hero { min-height: 0; }
  .hero-photo { width: 100%; opacity: .32; }
  .hero-side { position: static; width: auto; flex-direction: row; flex-wrap: wrap; margin-top: 4px; }
  .hero-side li { flex: 1 1 180px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .catalog { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .filters { position: static; gap: 12px; }
  .chips-col { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .chip { white-space: nowrap; border-color: var(--line); border-radius: 999px; }
  .filter-block:last-child { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; }
  .filter-block:last-child .filter-title { width: 100%; margin-bottom: 4px; }
  .cart-layout, .account-layout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .footer-in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .footer-brand { grid-column: span 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
  .footer-brand .footer-logo { margin-bottom: 0; }
}
@media (max-width: 760px) {
  .footer-in { grid-template-columns: minmax(0, 1fr); }
  .footer-brand { grid-column: auto; }
  .footer-logo .logo-sym { height: 50px; }
  .footer-logo .logo-nom { --h: 44px; }

  :root { --header-h: 118px; }
  .header-in { flex-wrap: wrap; height: auto; padding-block: 10px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); gap: 10px 8px; }
  .site-header { height: auto; }
  .search { order: 5; max-width: none; flex-basis: 100%; margin-left: 0; }
  /* Une seule ligne : le logo rétrécit, les actions restent à droite (la recherche passe dessous) */
  .header-in > .logo { flex: 1 1 auto; min-width: 0; }
  .header-in > .menu-btn, .header-actions { flex-shrink: 0; }
  .header-actions { margin-left: auto; gap: 4px; }
  .logo-word { font-size: 1.35rem; }
  .logo svg { width: 34px; height: 34px; }
  .cart-txt { display: none; }
  .cart-btn { height: 44px; padding: 0 12px; }
  .icon-round { width: 40px; height: 40px; }
  #notif-btn, #theme-btn { width: 34px; }
  .logo-nom { --h: 30px; }
  .notif-panel { right: -100px; width: min(320px, 88vw); }
  .stats .stats-a { flex-wrap: wrap; row-gap: 12px; }
  .stats .stats-a > div { flex: 1 1 140px; }
  .stats .stats-a > div + div { border-left: 0; }
  .cat-top, .cat-row { grid-template-columns: minmax(0, 1fr); }
  .cat-big { grid-column: auto; min-height: 0; padding-bottom: 196px; }
  .cat-big .cat-img { width: 66%; height: 180px; right: 8px; bottom: 8px; }
  .cat-big h3, .cat-big p { max-width: none; }
  .kits-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .line { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "ico info del" "ico qty total"; gap: 10px 12px; }
  .line-ico { grid-area: ico; width: 48px; height: 48px; align-self: start; }
  .line-info { grid-area: info; }
  .line .qty { grid-area: qty; justify-self: start; }
  .line-total { grid-area: total; min-width: 0; }
  .line .icon-btn { grid-area: del; justify-self: end; }
  .order { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {

  .site-header .logo-sym, .site-header .logo-tag { display: none; }
  .logo-nom { --h: 27px; }
  .hero h1 { font-size: 2rem; }
  .hero-cta .btn { flex: 1 1 100%; }
  .vrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "price" "buy"; }
  .v-price { text-align: left; flex-direction: row; gap: 8px; align-items: baseline; }
  .v-buy { justify-content: flex-start; }
  .header-actions .user-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Pages Catalogue et Packs (maquettes 2 et 3)
   ===================================================================== */
/* En-tête de page avec photo */
.page-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 236px; grid-template-areas: "copy side" "kpi side"; gap: 18px 20px; padding-top: 4px; margin-bottom: 20px; }
.page-hero .hero-photo { top: -18px; bottom: auto; height: 260px; width: 62%; }
.page-hero-copy { grid-area: copy; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.page-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1; }
.lead-sm { font-size: 1.08rem; color: var(--ink-2); max-width: 60ch; }
:root:not([data-theme="light"]) .lead-sm { color: #c3d1de; }
.checklist, .hero-side-wide { grid-area: side; align-self: start; }
.checklist {
  list-style: none; margin: 0; padding: 8px 16px; border-radius: var(--r); background: rgba(8, 22, 34, .78); border: 1px solid rgba(46, 230, 214, .35);
  backdrop-filter: blur(12px); box-shadow: 0 0 22px -12px var(--glow);
}
.checklist li { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: .88rem; color: #dbe6ef; line-height: 1.25; }
.checklist li + li { border-top: 1px solid rgba(150, 195, 235, .12); }
.checklist li::before { content: "✓"; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #23d6a2, #12a37e); color: #fff; font-size: .75rem; font-weight: 700; }
.hero-side-wide { position: static; width: auto; }
.hero-side-wide li { padding: 12px 14px; }
.kpi5 { grid-area: kpi; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kpi5 > div { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico dd" "ico dt"; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(10, 24, 37, .82); border: 1px solid var(--line-2); backdrop-filter: blur(10px); min-width: 0; }
:root[data-theme="light"] .kpi5 > div, :root[data-theme="light"] .checklist { background: rgba(255, 255, 255, .9); }
:root[data-theme="light"] .checklist li { color: var(--ink); }
.kpi5 .dd { grid-area: dd; margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.kpi5 .dd.k-txt { font-size: .92rem; font-weight: 600; letter-spacing: -0.01em; }
.kpi5 .dt { grid-area: dt; font-size: .8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-ico { grid-area: ico; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; }
.k-ico svg { width: 22px; height: 22px; }
.k-cyan { color: var(--cyan-txt); background: rgba(46, 230, 214, .12); border: 1px solid rgba(46, 230, 214, .4); }
.k-violet { color: #b9a2ff; background: rgba(139, 92, 246, .16); border: 1px solid rgba(139, 92, 246, .5); }
.k-blue { color: #8fb8ff; background: rgba(76, 141, 255, .14); border: 1px solid rgba(76, 141, 255, .5); }

/* Barre d'outils du catalogue */
.cat-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.big-search {
  flex: 1 1 360px; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 18px; border-radius: 14px;
  background: var(--field); border: 1.5px solid rgba(46, 230, 214, .55); box-shadow: 0 0 18px -8px var(--glow); cursor: text;
}
.big-search:focus-within { border-color: var(--cyan-txt); box-shadow: 0 0 0 4px rgba(46, 230, 214, .12); }
.big-search svg { width: 22px; height: 22px; color: var(--cyan-txt); flex-shrink: 0; }
.big-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .95rem; outline: none; }
.tool-btn { height: 50px; border-radius: 14px; }
.tool-btn[aria-expanded="true"] { border-color: var(--cyan-txt); }
.tool-count { background: var(--grad); color: var(--on-grad); border-radius: 999px; font-size: .7rem; padding: 2px 7px; }
.view-toggle { display: flex; padding: 4px; gap: 4px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--glass); height: 50px; }
.view-toggle button { width: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.view-toggle button svg { width: 20px; height: 20px; }
.view-toggle button[aria-pressed="true"] { background: rgba(46, 230, 214, .14); color: var(--cyan-txt); }
.cat-toolbar .sort select { height: 50px; border-radius: 14px; min-width: 210px; padding: 0 14px; }
.filters-panel { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; position: relative; }
.fp-col { display: flex; flex-direction: column; }
.fp-wide { flex: 1; min-width: 260px; }
.filters-panel .btn-link { position: absolute; right: 18px; top: 16px; }
.cat-count { font-size: .82rem; margin-bottom: 10px; }

/* Familles dans la colonne de gauche */
.side-title { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 6px 10px 8px; }
.side-families { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
.fam-nav { display: flex; flex-direction: column; gap: 2px; }
.fam-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--ink); font: inherit; font-size: .86rem; text-align: left; cursor: pointer;
}
.fam-nav button svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--ink-2); }
.fam-nav button span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-nav button small { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-2); }
.fam-nav button:hover { background: var(--glass-2); }
.fam-nav button.is-active { background: linear-gradient(100deg, rgba(46, 230, 214, .22), rgba(25, 185, 238, .1)); border-color: rgba(46, 230, 214, .65); box-shadow: 0 0 16px -6px var(--glow); }
.fam-nav button.is-active svg, .fam-nav button.is-active small { color: var(--cyan-txt); }
.side-promo-pack { background: linear-gradient(160deg, #0a3a4b, #0a1724 75%); padding-top: 18px; }
.promo-box { display: grid; place-items: center; height: 96px; color: var(--cyan-txt); filter: drop-shadow(0 0 14px var(--glow)); }
.promo-box svg { width: 72px; height: 72px; stroke-width: 1.3; }
.side-promo-pack .side-promo-txt { margin-top: 0; }

/* Cartes produit sombres (maquette 2) */
.products { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: linear-gradient(180deg, #0f1f30, #0b1724); border-color: var(--line-2); border-radius: 18px; }
:root[data-theme="light"] .card { background: #fff; }
.card:hover { border-color: rgba(46, 230, 214, .55); box-shadow: 0 0 28px -12px var(--glow); }
.card-visual { aspect-ratio: 16 / 10; background: radial-gradient(ellipse at 50% 42%, #48627c 0%, #26394d 45%, #101d2b 100%); }
:root[data-theme="light"] .card-visual { background: var(--studio); }
.card-visual .photo { width: 80%; height: 82%; mix-blend-mode: normal; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
:root[data-theme="light"] .card-visual .photo { mix-blend-mode: multiply; filter: none; }
.photo.is-opaque { background: #fff; border-radius: 12px; padding: 6%; width: 66%; height: 74%; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35)); }
.card-visual .photo-ico { background: rgba(255, 255, 255, .08); }
.card-visual .photo-ico svg { color: #cfe0ee; }
.card-flags { top: 12px; left: 12px; gap: 6px; }
.flag { font: 600 .74rem/1 var(--f-sans); padding: 6px 10px; border-radius: 8px; }
.flag-lppr { background: rgba(6, 30, 32, .85); color: #5ff2df; border: 1px solid rgba(46, 230, 214, .7); }
.flag-loc { background: #1f6fe0; color: #fff; border: 1px solid #4b8dff; }
.fav-btn { top: 10px; right: 10px; width: 38px; height: 38px; background: transparent; color: #fff; }
.fav-btn svg { width: 24px; height: 24px; stroke-width: 1.7; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5)); }
:root[data-theme="light"] .fav-btn { color: var(--ink); }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(6, 13, 22, .6); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px);
}
.car-btn svg { width: 16px; height: 16px; stroke-width: 2.2; }
.car-prev { left: 10px; }
.car-next { right: 10px; }
.car-btn:hover { border-color: var(--cyan-txt); color: var(--cyan-txt); }
.car-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; }
.car-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.car-dots i.on { background: var(--cyan); }
.card-body { padding: 14px 16px 16px; gap: 8px; }
.card-ref { font-family: var(--f-sans); font-size: .82rem; color: var(--ink-2); }
.card-ref span:last-child { font-family: var(--f-mono); color: var(--ink-3); }
.card-name { font-size: 1.15rem; font-weight: 650; }
.card-price { background: rgba(2, 8, 15, .45); border-color: var(--line-2); }
:root[data-theme="light"] .card-price { background: var(--field); }
.card-price strong { font-size: 1.3rem; }
.card-foot { gap: 8px; }
.card-var { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-sans); font-size: .85rem; color: var(--ink-2); margin-right: auto; }
.card-var svg { width: 16px; height: 16px; }
.ref-btn { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; border: 1px solid rgba(46, 230, 214, .5); background: transparent; color: var(--cyan-txt); display: grid; place-items: center; cursor: pointer; }
.ref-btn svg { width: 19px; height: 19px; }
.ref-btn:hover { background: rgba(46, 230, 214, .1); }
.card-foot .btn { min-height: 42px; padding: 0 18px; }
/* Affichage en liste */
.products.is-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.products.is-list .card { flex-direction: row; }
.products.is-list .card-visual { width: 220px; flex-shrink: 0; aspect-ratio: auto; min-height: 150px; }
.products.is-list .card-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto auto auto 1fr; column-gap: 20px; align-items: start; }
.products.is-list .card-ref, .products.is-list .card-name, .products.is-list .card-sub { grid-column: 1; }
.products.is-list .card-price { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.products.is-list .card-foot { grid-column: 2; grid-row: 3 / 5; align-self: end; flex-wrap: wrap; }
.products.is-list .fav-btn { right: auto; left: 180px; }

/* Filtres de familles des packs */
.kit-filters { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.kf {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: border-color .2s, background-color .2s;
}
.kf svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--ink-2); }
.kf span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kf strong { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf small { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-2); }
.kf:hover { border-color: rgba(46, 230, 214, .5); }
.kf.is-active { border-color: rgba(46, 230, 214, .8); background: linear-gradient(120deg, rgba(46, 230, 214, .22), rgba(25, 185, 238, .08)); box-shadow: 0 0 18px -6px var(--glow); }
.kf.is-active svg, .kf.is-active small { color: var(--cyan-txt); }

/* Cartes de pack (maquette 3) */
.packs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pack {
  --t: #2ee6d6; --t2: #19b9ee; --t-ink: #04151c; --t-bg: rgba(46, 230, 214, .16);
  position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--t) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 22%, #0b1622) 0%, #0b1622 46%, color-mix(in srgb, var(--t) 12%, #0b1622) 100%);
  box-shadow: 0 0 30px -14px var(--t);
}
:root[data-theme="light"] .pack { background: linear-gradient(180deg, color-mix(in srgb, var(--t) 18%, #fff), #fff 50%); }
.pack.t-violet { --t: #8b6bff; --t2: #5b3fe0; --t-ink: #fff; }
.pack.t-orange { --t: #ffae2e; --t2: #ff8a1a; --t-ink: #2a1600; }
.pack.t-pink { --t: #ff4f8f; --t2: #e8327a; --t-ink: #fff; }
.pack-top { position: relative; height: 190px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--t) 30%, #2b4157) 0%, #142334 70%); }
.pack-top img { max-width: 86%; max-height: 86%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.pack-top img.is-crop { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; mask-image: radial-gradient(closest-side, #000 70%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); }
.pack-count { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--t); background: rgba(6, 13, 22, .7); font-size: .85rem; font-weight: 500; color: #fff; }
.pack-count b { font-size: 1.15rem; font-weight: 700; }
.pack-top .fav-btn { top: 12px; right: 12px; }
.pack-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pack-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.pack-ico { grid-row: span 2; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; border: 1.5px solid var(--t); color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent); }
.pack-ico svg { width: 22px; height: 22px; }
.pack h3 { font-size: 1.22rem; }
.pack-for { font-size: .85rem; color: var(--ink-2); }
.pack-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pack-items li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pack-items li:last-child { border-bottom: 0; }
.pack-thumb { width: 36px; height: 36px; border-radius: 9px; background: var(--studio); display: grid; place-items: center; overflow: hidden; border: 0; padding: 0; cursor: pointer; }
.pack-thumb img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.pack-thumb svg { width: 18px; height: 18px; color: #4a6077; }
.pack-items .pi-name { font-size: .86rem; line-height: 1.25; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); cursor: pointer; font-family: inherit; }
.pack-items .pi-name:hover { color: var(--t); }
.pack-items .pi-qty { font-family: var(--f-mono); font-size: .8rem; color: var(--t); }
.pack-more { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--t) 60%, transparent); background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--t);
  font: 650 .95rem var(--f-sans); cursor: pointer; box-shadow: 0 6px 18px -10px var(--t); transition: background-color .2s, transform .2s, box-shadow .2s, color .2s; }
.pack-more .pm-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--t); color: #fff; flex-shrink: 0; }
.pack-more .pm-ico svg { width: 16px; height: 16px; stroke-width: 2.2; }
.pack-more .pm-fleche { transition: transform .2s; }
.pack-more:hover, .pack-more:focus-visible { background: var(--t); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px -10px var(--t); outline: none; }
.pack-more:hover .pm-ico, .pack-more:focus-visible .pm-ico { background: rgba(255, 255, 255, .22); }
.pack-more:hover .pm-fleche { transform: translateX(4px); }
.pack-price strong { display: block; font-size: 1.75rem; font-weight: 650; letter-spacing: -0.04em; }
.pack-price small { font-family: var(--f-mono); font-size: .78rem; color: var(--t); }
.pack-buy { display: flex; gap: 10px; align-items: center; margin-top: auto; }
.pack-buy .qty { height: 46px; border-radius: 12px; }
.pack-buy .qty button, .pack-buy .qty input { height: 44px; }
.pack-add { flex: 1; min-height: 46px; border-radius: 999px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 .92rem var(--f-sans); color: var(--t-ink); background: linear-gradient(100deg, var(--t), var(--t2)); box-shadow: 0 10px 26px -12px var(--t); }
.pack-add svg { width: 18px; height: 18px; }
.pack-add:hover { filter: brightness(1.08); }
.pack-drawer-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pack-drawer-list .vrow { grid-template-areas: "main price"; }

@media (max-width: 1360px) {

  .packs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {

  .page-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "side" "kpi"; }
  .page-hero .hero-photo { width: 100%; opacity: .3; }
  .checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .checklist li + li { border-top: 0; }
  .hero-side-wide { flex-direction: row; flex-wrap: wrap; }
  .products.is-list .card-body { grid-template-columns: minmax(0, 1fr); }
  .products.is-list .card-price, .products.is-list .card-foot { grid-column: 1; grid-row: auto; }
}
@media (max-width: 760px) {

  .packs-grid { grid-template-columns: minmax(0, 1fr); }
  .kit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist { grid-template-columns: minmax(0, 1fr); }
  .cat-toolbar .sort { flex: 1 1 100%; }
  .cat-toolbar .sort select { flex: 1; min-width: 0; }
  .products.is-list .card { flex-direction: column; }
  .products.is-list .card-visual { width: 100%; aspect-ratio: 16 / 10; }
  .products.is-list .fav-btn { left: auto; right: 10px; }
}

/* ---------- Retouches d'après les captures ---------- */
:root { --side-w: 252px; }
.cat-img.is-crop { object-fit: contain; mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.cat-pill { white-space: nowrap; }
.cat-top .cat:not(.cat-big) { padding-right: 44%; }
.products { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card-var { white-space: nowrap; }
.fam-nav button { font-size: .84rem; padding: 8px 9px; gap: 10px; }
.pack-top img.is-crop { object-fit: contain; mask-image: radial-gradient(closest-side, #000 75%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 75%, transparent); }
.kf { gap: 8px; padding: 10px; }
.kf svg { width: 22px; height: 22px; }
.kf strong { font-size: .8rem; white-space: normal; line-height: 1.15; overflow: visible; }
.page-hero { grid-template-columns: minmax(0, 1fr) 262px; }
.hero-photo img { object-position: 40% 30%; }
@media (max-width: 1360px) {
 :root { --side-w: 236px; } }
.pack-top img.is-crop { width: auto; height: 86%; max-width: 92%; }
.kpi5 > div { padding: 10px 12px; column-gap: 10px; }
.k-ico { width: 38px; height: 38px; }
.kpi5 .dt { white-space: normal; font-size: .76rem; line-height: 1.2; }
.kpi5 .dd { font-size: 1.2rem; }

/* Photos HD : la grille du cadre a une hauteur définie, pour que la photo tienne entière (sinon les photos hautes débordent) */
.card-visual, .d-visual, .line-ico, .pack-thumb, .pack-top { grid-template-columns: 100%; grid-template-rows: 100%; }
.line-ico > img, .pack-thumb > img { justify-self: center; align-self: center; max-width: 100%; max-height: 100%; }
.card-visual > .photo, .d-visual > .photo, .card-visual > img, .d-visual > img { justify-self: center; align-self: center; max-width: 100%; max-height: 100%; }

/* Logo officiel MédiPac Polynésie : symbole + nom ; variante claire du nom en mode sombre */
.logo { gap: 9px; }
.logo-sym { height: 38px; width: auto; flex-shrink: 0; }
/* Nom du logo : « MédiPac » en image haute définition, « POLYNESIE » en texte (police du logo, net sur téléphone) */
.logo-nom { --h: 34px; height: var(--h); display: inline-flex; flex-direction: column; justify-content: space-between; align-items: stretch; width: auto; flex-shrink: 0; }
.logo-nom-mot { display: block; height: calc(var(--h) * .72); width: auto; }
.logo-nom-poly { display: flex; align-items: center; gap: .45em; padding: 0 .35em; color: #fff; font: 400 calc(var(--h) * .21) / 1 "League Gothic", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; letter-spacing: .28em; text-indent: .28em; white-space: nowrap; }
.logo-nom-poly::before, .logo-nom-poly::after { content: ""; flex: 1; height: max(1px, calc(var(--h) * .025)); background: currentColor; border-radius: 1px; }
:root[data-theme="light"] .logo-nom-poly { color: #1b2a3a; }
.footer-logo { margin-bottom: 6px; }
.footer-logo .logo-sym { height: 62px; }
.footer-logo .logo-nom { --h: 54px; }
@media (max-width: 760px) {

  .logo-sym { height: 32px; }
  .logo-nom { --h: 27px; }
}
@media (max-width: 420px) {

  .site-header .logo-tag { display: none; }
}

/* Sans attribut style="" dans le HTML généré (compatible avec la politique de sécurité CSP) */
.card-visual-wrap { position: relative; }

/* Photos HD des catégories et des packs : entières, sans masque, sans chevaucher le texte */
.cat-row .cat { grid-template-columns: 36% minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 12px; row-gap: 4px; min-height: 176px; }
.cat-row .cat-num { position: absolute; top: 12px; left: 14px; padding: 0; }
.cat-row .cat-img { position: static; grid-column: 1; grid-row: 1 / 5; width: 100%; height: 124px; align-self: end; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); }
.cat-row .cat-ico { grid-column: 2; grid-row: 1; width: 34px; height: 34px; }
.cat-row .cat-ico svg { width: 19px; height: 19px; }
.cat-row .cat h3 { grid-column: 2; grid-row: 2; }
.cat-row .cat p { grid-column: 2; grid-row: 3; }
.cat-row .cat-pill { grid-column: 2; grid-row: 4; justify-self: start; margin-right: 0; }
.cat-top .cat-img, .cat-big .cat-img { filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .45)); }
:root[data-theme="light"] .cat-img { filter: drop-shadow(0 10px 14px rgba(15, 30, 50, .18)); }
.pack-top { padding: 46px 14px 10px; box-sizing: border-box; }
.pack-top > img { max-width: 92%; max-height: 100%; }

/* ==========================================================================
   Animation d'arrivée : les trois croix du logo s'assemblent, onde lumineuse,
   MédiPac se dévoile avec un reflet, puis le site entre en cascade.
   ========================================================================== */
.intro { display: none; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; cursor: pointer; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #0e2a3f 0%, #071422 45%, #03070d 100%);
}
html.intro-on { overflow: hidden; }
.intro::before {
  content: ""; position: absolute; inset: -20%;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(46, 230, 214, .10) 25%, transparent 32% 70%, rgba(26, 167, 240, .10) 76%, transparent 84%);
  animation: introRayons 6s linear infinite;
}
.intro-scene { position: relative; display: grid; justify-items: center; gap: 18px; }
.intro-croix { width: min(300px, 62vw); height: auto; overflow: visible; filter: drop-shadow(0 18px 40px rgba(26, 167, 240, .35)); }
.ic { transform-box: fill-box; transform-origin: center; stroke: #c9f36a; stroke-width: 2.5; stroke-linejoin: round; opacity: 0; animation: introCroix 1s cubic-bezier(.18, 1.35, .4, 1) forwards; }
.ic-1 { --dx: -260px; --dy: 140px; animation-delay: .15s; }
.ic-2 { --dx: 0px; --dy: -260px; animation-delay: .32s; }
.ic-3 { --dx: 260px; --dy: 160px; animation-delay: .49s; }
.intro-onde {
  position: absolute; left: 50%; top: min(115px, 24vw); width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%;
  border: 2px solid rgba(110, 245, 232, .9); box-shadow: 0 0 40px rgba(46, 230, 214, .8), inset 0 0 30px rgba(46, 230, 214, .5);
  opacity: 0; transform: scale(.2); animation: introOnde 1.1s cubic-bezier(.1, .7, .3, 1) 1.05s forwards; pointer-events: none;
}
.intro-eclats { position: absolute; left: 50%; top: min(115px, 24vw); width: 0; height: 0; pointer-events: none; }
.intro-eclats i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #9ff7ee; box-shadow: 0 0 12px #2ee6d6;
  opacity: 0; animation: introEclat .9s cubic-bezier(.1, .8, .3, 1) 1.08s forwards;
}
.intro-eclats i:nth-child(3n) { background: #8fd36f; box-shadow: 0 0 12px #5ab552; }
.intro-eclats i:nth-child(3n+1) { background: #8cc8ff; box-shadow: 0 0 12px #2b8be6; }
.intro-eclats i:nth-child(1) { --a: 0deg; } .intro-eclats i:nth-child(2) { --a: 30deg; } .intro-eclats i:nth-child(3) { --a: 60deg; }
.intro-eclats i:nth-child(4) { --a: 90deg; } .intro-eclats i:nth-child(5) { --a: 120deg; } .intro-eclats i:nth-child(6) { --a: 150deg; }
.intro-eclats i:nth-child(7) { --a: 180deg; } .intro-eclats i:nth-child(8) { --a: 210deg; } .intro-eclats i:nth-child(9) { --a: 240deg; }
.intro-eclats i:nth-child(10) { --a: 270deg; } .intro-eclats i:nth-child(11) { --a: 300deg; } .intro-eclats i:nth-child(12) { --a: 330deg; }
.intro-mot { --intro-l: min(420px, 78vw); position: relative; display: block; width: var(--intro-l); clip-path: inset(-60px 100% -60px -60px); animation: introMot .75s cubic-bezier(.6, 0, .2, 1) 1.15s forwards; }
.intro-mot img { display: block; width: 100%; height: auto; animation: introBrille 1.2s ease-out 1.75s both; }
/* « POLYNESIE » en texte vectoriel (police League Gothic, celle du logo), net à toute taille ; traits de part et d'autre */
@font-face { font-family: "League Gothic"; src: url(../fonts/league-gothic-latin-maj.woff2) format("woff2"); font-weight: 400; font-display: block; }
.intro-poly { display: flex; align-items: center; gap: .55em; margin-top: calc(var(--intro-l) * .012); padding: 0 calc(var(--intro-l) * .02); color: #fff; font: 400 calc(var(--intro-l) * .066) / 1 "League Gothic", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; letter-spacing: .3em; text-indent: .3em; white-space: nowrap; animation: introBrille 1.2s ease-out 1.75s both; }
.intro-poly::before, .intro-poly::after { content: ""; flex: 1; height: max(1.5px, calc(var(--intro-l) * .005)); background: #fff; border-radius: 2px; }

.intro-ligne {
  margin: 0; font: 500 .82rem/1 var(--f-mono); letter-spacing: .32em; text-transform: uppercase; color: #9fb7c9;
  opacity: 0; transform: translateY(10px); animation: introLigne .7s ease 1.7s forwards;
}
html.intro-fin .intro { animation: introSortie .75s cubic-bezier(.7, 0, .3, 1) forwards; pointer-events: none; }
html.intro-fin .intro-scene { animation: introSceneSortie .75s cubic-bezier(.7, 0, .3, 1) forwards; }

@keyframes introRayons { to { transform: rotate(360deg); } }
@keyframes introCroix {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(-200deg) scale(.25); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes introOnde { 0% { opacity: .95; transform: scale(.2); } 100% { opacity: 0; transform: scale(4.2); } }
@keyframes introEclat {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(10px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(190px) scale(.3); }
}
@keyframes introMot { to { clip-path: inset(-60px -60px -60px -60px); } }
@keyframes introBrille {
  0% { filter: brightness(1) drop-shadow(0 0 0 rgba(46, 230, 214, 0)); }
  35% { filter: brightness(1.55) drop-shadow(0 0 22px rgba(110, 245, 232, .85)); }
  100% { filter: brightness(1) drop-shadow(0 0 10px rgba(46, 230, 214, .25)); }
}
@keyframes introLigne { to { opacity: 1; transform: none; } }
@keyframes introSortie { to { opacity: 0; visibility: hidden; } }
@keyframes introSceneSortie { to { transform: scale(1.35); filter: blur(10px); opacity: 0; } }

/* Le site, caché pendant l'animation, entre en cascade */
html.intro-on .site-header, html.intro-on #sidebar, html.intro-on .view[data-view="accueil"] .hero > *,
html.intro-on .view[data-view="accueil"] > :not(.hero), html.intro-on .view:not([data-view="accueil"]) { opacity: 0; }
html.site-entree .site-header { animation: entreeHaut .8s cubic-bezier(.2, .9, .2, 1) both; }
html.site-entree #sidebar { animation: entreeGauche .8s cubic-bezier(.2, .9, .2, 1) .1s both; }
html.site-entree .hero-copy > * { animation: entreeMontee .85s cubic-bezier(.2, .9, .2, 1) both; }
html.site-entree .hero-copy > :nth-child(1) { animation-delay: .15s; }
html.site-entree .hero-copy > :nth-child(2) { animation-delay: .25s; }
html.site-entree .hero-copy > :nth-child(3) { animation-delay: .38s; }
html.site-entree .hero-copy > :nth-child(4) { animation-delay: .5s; }
html.site-entree .hero-photo { animation: entreeZoom 1.5s cubic-bezier(.2, .8, .2, 1) both; }
html.site-entree .hero-side { animation: entreeDroite .9s cubic-bezier(.2, .9, .2, 1) .45s both; }
html.site-entree .view[data-view="accueil"] .stats { animation: entreeMontee .8s cubic-bezier(.2, .9, .2, 1) .55s both; }
html.site-entree .view[data-view="accueil"] > :not(.hero) { animation: entreeMontee .8s cubic-bezier(.2, .9, .2, 1) .55s both; }
html.site-entree .view:not([data-view="accueil"]) { animation: entreeMontee .8s cubic-bezier(.2, .9, .2, 1) .2s both; }
html.site-entree #univers-grid { animation: none; }
html.site-entree #univers-grid .cat { animation: entreeCarte .75s cubic-bezier(.2, .9, .2, 1) both; }
html.site-entree .cat-top .cat:nth-child(1) { animation-delay: .6s; }
html.site-entree .cat-top .cat:nth-child(2) { animation-delay: .68s; }
html.site-entree .cat-top .cat:nth-child(3) { animation-delay: .76s; }
html.site-entree .cat-top .cat:nth-child(4) { animation-delay: .84s; }
html.site-entree .cat-top .cat:nth-child(5) { animation-delay: .92s; }
html.site-entree .cat-row .cat:nth-child(1) { animation-delay: 1s; }
html.site-entree .cat-row .cat:nth-child(2) { animation-delay: 1.06s; }
html.site-entree .cat-row .cat:nth-child(3) { animation-delay: 1.12s; }
html.site-entree .cat-row .cat:nth-child(4) { animation-delay: 1.18s; }
html.site-entree .cat-row .cat:nth-child(n+5) { animation-delay: 1.24s; }
html.site-entree .titre-logo { animation: entreeLogo 1.1s cubic-bezier(.2, 1.3, .4, 1) .45s both; }
@keyframes entreeHaut { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes entreeGauche { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes entreeDroite { from { opacity: 0; transform: translateX(40px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes entreeMontee { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes entreeZoom { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: none; } }
@keyframes entreeCarte { from { opacity: 0; transform: translateY(34px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes entreeLogo { from { opacity: 0; transform: scale(.6) rotate(-6deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Logo Médipac dans le titre de l'accueil */
.titre-de { white-space: nowrap; }
.titre-logo { display: inline-block; height: 1.02em; width: auto; vertical-align: -0.16em; margin-left: .12em; filter: drop-shadow(0 6px 18px rgba(46, 230, 214, .25)); }
:root[data-theme="light"] .titre-logo { filter: none; }

@media (prefers-reduced-motion: reduce) {

  html.intro-on .intro { display: none; }
  html.site-entree * { animation: none !important; }
}

/* ==========================================================================
   Atelier de personnalisation
   ========================================================================== */
.atelier { position: relative; overflow: hidden; border-color: rgba(46, 230, 214, .45); }
.atelier::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(139, 92, 246, .22), transparent 65%);
}
.atelier-tete { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.atelier-ico {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: conic-gradient(from 200deg, #2ee6d6, #1aa7f0, #8b5cf6, #ff4d8d, #f7913d, #2ee6d6); animation: atelierTourne 8s linear infinite;
  box-shadow: 0 10px 30px -10px rgba(139, 92, 246, .8);
}
.atelier-ico svg { width: 28px; height: 28px; stroke-width: 1.8; animation: atelierTourne 8s linear infinite reverse; }
@keyframes atelierTourne { to { transform: rotate(360deg); } }
.atelier-go { position: relative; overflow: hidden; margin: 18px 0 16px; width: 100%; justify-content: center; }
.atelier-go::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); animation: atelierReflet 3.2s ease-in-out infinite;
}
html.ed-on .atelier-go { background: linear-gradient(90deg, #8b5cf6, #ff4d8d); }
@keyframes atelierReflet { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.atelier-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.atelier-stats div { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: rgba(255, 255, 255, .02); }
.atelier-stats strong { display: block; font: 700 1.6rem/1.1 var(--f-mono); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.atelier-stats span { font-size: .78rem; color: var(--ink-2); }
.atelier-niveau { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
.atelier-barre { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; --p: 0%; }
.atelier-barre::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, #2ee6d6, #8b5cf6, #ff4d8d); transition: width .8s cubic-bezier(.2, 1.2, .3, 1); }
.atelier-niveau small { font: 500 .74rem var(--f-mono); color: var(--ink-2); white-space: nowrap; }
.atelier-succes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.atelier-succes li { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; padding: 9px 10px; border-radius: 12px; border: 1px dashed var(--line-2); opacity: .55; filter: grayscale(1); }
.atelier-succes li b { font-size: .8rem; line-height: 1.2; }
.atelier-succes li small { grid-column: 2; font-size: .7rem; color: var(--ink-3); }
.atelier-succes li.is-on { opacity: 1; filter: none; border-style: solid; border-color: rgba(255, 209, 102, .55); background: linear-gradient(135deg, rgba(255, 209, 102, .12), rgba(255, 77, 141, .06)); }
.ed-med { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--ink-3); }
.ed-med svg { width: 18px; height: 18px; }
.atelier-succes li.is-on .ed-med { background: radial-gradient(circle at 35% 30%, #ffe39a, #f2a93b); color: #5a3a00; box-shadow: 0 0 16px rgba(255, 209, 102, .6); }
.atelier-titre { margin: 18px 0 4px; font-size: .95rem; }
.atelier code { font: 500 .78rem var(--f-mono); color: var(--cyan-txt); }

/* Barre d'outils du mode édition */
#ed-ui {
  position: fixed; left: 50%; bottom: 16px; z-index: 9000; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 24px); padding: 8px 10px 8px 14px; border-radius: 999px; border: 1px solid rgba(46, 230, 214, .5);
  background: rgba(8, 16, 28, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #eef5fb;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 40px -14px #2ee6d6;
  transform: translate(-50%, 160%); transition: transform .5s cubic-bezier(.2, 1.3, .3, 1);
}
#ed-ui.is-on { transform: translate(-50%, 0); }
#ed-ui svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; }
.ed-pulse { width: 10px; height: 10px; border-radius: 50%; background: #ff4d8d; box-shadow: 0 0 0 0 rgba(255, 77, 141, .7); animation: edPulse 1.6s infinite; }
@keyframes edPulse { 70% { box-shadow: 0 0 0 10px rgba(255, 77, 141, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 141, 0); } }
.ed-titre { font-size: .86rem; margin-right: 4px; }
.ed-chips { display: inline-flex; gap: 6px; }
.ed-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); font: 600 .8rem var(--f-mono); }
.ed-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.ed-seg button, .ed-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font: 600 .8rem var(--f-sans, inherit); color: inherit;
  padding: 7px 11px; border-radius: 99px; background: transparent; transition: background-color .2s, transform .15s;
}
.ed-seg button.is-on { background: linear-gradient(90deg, #2ee6d6, #1aa7f0); color: #04121c; }
.ed-btn { background: rgba(255, 255, 255, .07); }
.ed-btn:hover { background: rgba(255, 255, 255, .14); }
.ed-btn:active, .ed-seg button:active { transform: scale(.94); }
.ed-btn.is-on { background: #ffd166; color: #3a2700; }
.ed-btn.ed-fin { background: linear-gradient(90deg, #2ee6d6, #1aa7f0); color: #04121c; }
.ed-bond { animation: edBond .5s cubic-bezier(.2, 1.6, .4, 1); display: inline-block; }
@keyframes edBond { 40% { transform: scale(1.5); color: #ffd166; } }
html.ed-on body { padding-bottom: 80px; }
html.ed-on:not(.ed-naviguer) body { cursor: crosshair; }

/* Cadre animé autour de l'élément survolé */
#ed-cadre {
  position: fixed; z-index: 8999; pointer-events: none; left: var(--l); top: var(--t); width: var(--w); height: var(--h); border-radius: 10px; opacity: 0;
  transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease, opacity .15s;
  background:
    linear-gradient(90deg, #2ee6d6 50%, transparent 0) repeat-x top / 12px 2px,
    linear-gradient(90deg, #2ee6d6 50%, transparent 0) repeat-x bottom / 12px 2px,
    linear-gradient(0deg, #2ee6d6 50%, transparent 0) repeat-y left / 2px 12px,
    linear-gradient(0deg, #2ee6d6 50%, transparent 0) repeat-y right / 2px 12px,
    rgba(46, 230, 214, .08);
  animation: edFourmis .6s linear infinite; box-shadow: 0 0 24px -6px rgba(46, 230, 214, .8);
}
#ed-cadre.is-on { opacity: 1; }
@keyframes edFourmis { to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px, 0 0; } }
.ed-badge {
  position: absolute; right: -12px; top: -12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff4d8d, #8b5cf6); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); animation: edBadge 1.2s ease-in-out infinite;
}
.ed-badge svg { width: 14px; height: 14px; stroke-width: 2.2; }
@keyframes edBadge { 50% { transform: translateY(-3px) rotate(-8deg); } }

/* Bulle d'édition */
#ed-bulle {
  position: fixed; z-index: 9001; left: var(--l); top: var(--t); width: var(--w); padding: 14px; border-radius: 18px;
  background: rgba(10, 20, 34, .96); color: #eef5fb; border: 1px solid rgba(139, 92, 246, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .75), 0 0 50px -16px #8b5cf6; transform-origin: 50% 0; animation: edBulle .35s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes edBulle { from { opacity: 0; transform: scale(.7) translateY(-8px); } }
.ed-b-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: .9rem; }
.ed-b-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #ff4d8d, #8b5cf6); }
.ed-b-ico svg { width: 15px; height: 15px; stroke-width: 2.2; color: #fff; }
#ed-bulle textarea {
  width: 100%; box-sizing: border-box; resize: none; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(46, 230, 214, .55);
  background: rgba(255, 255, 255, .05); color: inherit; font: 500 .95rem/1.4 inherit; outline: none; box-shadow: 0 0 0 3px rgba(46, 230, 214, .12);
}
.ed-b-orig { margin: 8px 0 0; font-size: .78rem; color: #9fb7c9; display: grid; gap: 2px; }
.ed-b-orig small { font: 500 .66rem var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: #6f8aa0; }
.ed-b-info { margin: 8px 0 12px; font-size: .74rem; color: #8aa3b7; }
.ed-b-info kbd { font: 500 .68rem var(--f-mono); padding: 1px 5px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .2); }
.ed-b-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ed-b-actions svg { width: 15px; height: 15px; stroke-width: 2.2; }
.ed-b-apercu { height: 150px; border-radius: 12px; background: repeating-conic-gradient(rgba(255, 255, 255, .06) 0 25%, transparent 0 50%) 0 0 / 16px 16px; display: grid; place-items: center; overflow: hidden; }
.ed-b-apercu img { max-width: 92%; max-height: 92%; object-fit: contain; }
.ed-ajout-fiche {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: -10px 0 18px; padding: 12px; cursor: pointer;
  border-radius: 14px; border: 2px dashed rgba(46, 230, 214, .6); background: rgba(46, 230, 214, .06); color: var(--cyan-txt); font: 600 .9rem inherit;
  animation: edBadge 2s ease-in-out infinite;
}
.ed-ajout-fiche svg { width: 18px; height: 18px; stroke-width: 2.2; }
html.ed-on:not(.ed-naviguer) [data-sans-photo] { outline: 2px dashed rgba(46, 230, 214, .7); outline-offset: 6px; border-radius: 14px; }

/* Confettis et annonces */
#ed-confettis { position: fixed; inset: 0; pointer-events: none; z-index: 9100; }
#ed-confettis i {
  position: absolute; left: var(--x); top: var(--y); width: 8px; height: 12px; border-radius: 2px; background: var(--c);
  animation: edConfetti 1s cubic-bezier(.15, .7, .3, 1) forwards;
}
#ed-confettis i:nth-child(3n) { border-radius: 50%; width: 8px; height: 8px; }
@keyframes edConfetti {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) rotate(var(--r)) scale(1); opacity: 0; }
}
#ed-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9050; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.ed-t {
  padding: 10px 16px; border-radius: 14px; background: rgba(10, 20, 34, .94); color: #eef5fb; border: 1px solid rgba(46, 230, 214, .45);
  font-size: .86rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); animation: edToast .45s cubic-bezier(.2, 1.4, .4, 1);
}
.ed-t-medaille { display: flex; align-items: center; gap: 12px; border-color: rgba(255, 209, 102, .7); background: linear-gradient(135deg, rgba(40, 30, 6, .96), rgba(30, 12, 30, .96)); }
.ed-t-medaille small { display: block; font: 600 .66rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #ffd166; }
.ed-t-med { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffe39a, #f2a93b); color: #5a3a00; animation: edMedaille .9s cubic-bezier(.2, 1.6, .4, 1); }
.ed-t-med svg { width: 22px; height: 22px; }
.ed-t-fin { opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
@keyframes edToast { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes edMedaille { 0% { transform: scale(0) rotate(-180deg); } 70% { transform: scale(1.2) rotate(10deg); } }
html.ed-origine body::after {
  content: "Site d'origine"; position: fixed; top: 86px; left: 50%; transform: translateX(-50%); z-index: 8990; pointer-events: none;
  padding: 6px 14px; border-radius: 99px; background: #ffd166; color: #3a2700; font: 700 .78rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 760px) {

  #ed-ui { border-radius: 20px; bottom: 10px; }
  .ed-titre, .ed-btn span { display: none; }
  .atelier-stats strong { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {

  .atelier-ico, .atelier-ico svg, .atelier-go::after, #ed-cadre, .ed-badge, .ed-ajout-fiche, .ed-pulse { animation: none; }
}
/* Ajustements de l'atelier */
#ed-ui { width: max-content; }
.atelier > * { align-self: stretch; }
.atelier-stats, .atelier-succes, .atelier-niveau { width: 100%; }
.atelier-barre { display: block; min-width: 120px; }
.atelier-niveau small { order: -1; }
/* Saisie par code LPP */
.q-lpp { display: grid; gap: 6px; }
.q-lpp-tag { display: inline-block; font-size: .66rem; letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; color: #6ff5e8; background: rgba(46, 230, 214, .1); border: 1px solid rgba(46, 230, 214, .35); }
.q-lpp select { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(46, 230, 214, .5); background: var(--card, #0d1724); color: inherit; font: inherit; font-size: .86rem; }

/* Articles : ajout, retrait, corbeille */
.atelier-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ed-articles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ed-retirer { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.ed-retirer input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: inherit; font: inherit; }
#ed-listes-articles h4 { margin: 14px 0 6px; font-size: .82rem; color: var(--ink-2); font-weight: 600; }
.ed-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ed-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); animation: edToast .4s cubic-bezier(.2, 1.4, .4, 1); }
.ed-liste li > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.ed-liste li b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-liste li small { font-size: .72rem; color: var(--ink-3); }
.ed-l-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(46, 230, 214, .1); color: var(--cyan-txt); flex-shrink: 0; }
.ed-corbeille .ed-l-ico { background: rgba(255, 77, 141, .12); color: #ff7aa8; }
.ed-l-ico svg, .ed-liste .ed-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.atelier .ed-btn { color: var(--ink); background: rgba(127, 127, 127, .12); }
.atelier .ed-btn.ed-fin { color: #04121c; }
.ed-retirer-fiche {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: -8px 0 18px; padding: 10px; cursor: pointer;
  border-radius: 14px; border: 1.5px solid rgba(255, 77, 141, .55); background: rgba(255, 77, 141, .08); color: #ff7aa8; font: 600 .86rem inherit;
}
.ed-retirer-fiche svg { width: 17px; height: 17px; stroke-width: 2; }

/* Assistant « Nouvel article » */
#ed-assistant {
  position: fixed; inset: 0; z-index: 9200; display: grid; place-items: center; padding: 16px;
  background: rgba(2, 6, 12, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: edFondu .25s ease;
}
#ed-assistant.is-fin { opacity: 0; transition: opacity .25s; }
@keyframes edFondu { from { opacity: 0; } }
.ed-as-boite {
  width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; border-radius: 22px; color: #eef5fb;
  background: linear-gradient(160deg, rgba(14, 26, 44, .98), rgba(10, 16, 28, .98)); border: 1px solid rgba(139, 92, 246, .55);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 60px -20px #8b5cf6; animation: edBulle .4s cubic-bezier(.2, 1.4, .4, 1);
}
.ed-as-boite.ed-secoue { animation: edSecoue .45s; }
@keyframes edSecoue { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.ed-as-tete { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.ed-as-tete b { flex: 1; }
.ed-as-fermer { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .08); color: inherit; font-size: 1.3rem; line-height: 1; }
.ed-as-etapes { list-style: none; display: flex; gap: 8px; padding: 0; margin: 16px 0; counter-reset: e; }
.ed-as-etapes li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #8aa3b7; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); transition: background-color .3s, color .3s; }
.ed-as-etapes li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .76rem var(--f-mono); background: rgba(255, 255, 255, .08); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.ed-as-etapes li.is-on { color: #fff; background: linear-gradient(90deg, rgba(46, 230, 214, .18), rgba(139, 92, 246, .18)); }
.ed-as-etapes li.is-on span { background: linear-gradient(135deg, #2ee6d6, #8b5cf6); color: #04121c; transform: scale(1.15); }
.ed-as-etapes li.is-fait span { background: #2ee6d6; color: #04121c; }
.ed-as-corps { animation: edEtape .35s ease; }
@keyframes edEtape { from { opacity: 0; transform: translateX(16px); } }
.as-grille { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
.as-photo { display: grid; gap: 8px; align-content: start; }
.as-photo img, .as-photo-vide { width: 100%; aspect-ratio: 1; border-radius: 16px; object-fit: contain; background: repeating-conic-gradient(rgba(255, 255, 255, .05) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.as-photo-vide { display: grid; place-items: center; color: #6f8aa0; border: 2px dashed rgba(255, 255, 255, .15); }
.as-photo-vide svg { width: 40px; height: 40px; }
.as-champs { display: grid; gap: 10px; }
#ed-assistant label { display: grid; gap: 5px; font-size: .78rem; color: #9fb7c9; }
#ed-assistant input, #ed-assistant select, #ed-assistant textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04); color: #eef5fb; font: 500 .9rem inherit; outline: none;
}
#ed-assistant input:focus, #ed-assistant select:focus, #ed-assistant textarea:focus { border-color: #2ee6d6; box-shadow: 0 0 0 3px rgba(46, 230, 214, .15); }
#ed-assistant select option { background: #0d1724; }
.as-large { margin-top: 12px; }
.as-aide { font-size: .78rem; color: #8aa3b7; margin: 0 0 10px; }
.as-refs { display: grid; gap: 8px; margin-bottom: 10px; }
.as-ref { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr .9fr 1.2fr auto; gap: 6px; align-items: center; animation: edToast .35s cubic-bezier(.2, 1.4, .4, 1); }
.as-suppr { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 77, 141, .15); color: #ff7aa8; font-size: 1.1rem; }
.as-apercu { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.as-carte { border-radius: 18px; overflow: hidden; border: 1px solid rgba(46, 230, 214, .5); background: rgba(255, 255, 255, .03); box-shadow: 0 0 30px -10px #2ee6d6; animation: edCarte 3s ease-in-out infinite; }
@keyframes edCarte { 50% { transform: translateY(-5px) rotate(-.6deg); } }
.as-carte-vis { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(46, 230, 214, .15), transparent 70%); }
.as-carte-vis img { max-width: 80%; max-height: 82%; object-fit: contain; }
.as-carte-vis .as-photo-vide { width: 60%; aspect-ratio: 1; border-radius: 14px; }
.as-neuf { position: absolute; top: 10px; left: 10px; font: 700 .64rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: linear-gradient(90deg, #ff4d8d, #8b5cf6); color: #fff; }
.as-carte-txt { padding: 12px 14px 14px; }
.as-carte-txt small { color: #8aa3b7; font-size: .74rem; }
.as-carte-txt h3 { margin: 4px 0 8px; font-size: 1.02rem; }
.as-prix { margin: 0; font: 700 1.05rem var(--f-mono); color: #2ee6d6; }
.as-recap { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.as-recap li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.as-recap b { font: 600 .68rem var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: #6f8aa0; }
.ed-as-erreur { min-height: 1.2em; margin: 10px 0 0; color: #ff7aa8; font-size: .84rem; }
.ed-as-pied { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ed-as-pied .ed-btn, .as-photo .ed-btn, .ed-as-corps > .ed-btn { color: #eef5fb; }
.ed-as-pied .ed-btn.ed-fin { color: #04121c; padding: 10px 18px; font-size: .9rem; }
.ed-as-pied svg, .as-photo .ed-btn svg, .ed-as-corps > .ed-btn svg { width: 16px; height: 16px; stroke-width: 2.2; }
@media (max-width: 760px) {

  .atelier-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-grille, .as-apercu { grid-template-columns: minmax(0, 1fr); }
  .as-photo { grid-template-columns: 110px 1fr; align-items: center; }
  .as-ref { grid-template-columns: 1fr 1fr; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
  .as-ref [data-r="l"], .as-ref select { grid-column: span 2; }
  .ed-as-etapes li { font-size: 0; gap: 0; justify-content: center; }
}

/* ==========================================================================
   Thèmes : galerie des Paramètres
   ========================================================================== */
.themes-bloc > * { align-self: stretch; }
.themes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.chanson-bloc { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.chanson-bloc h3 { margin: 0 0 6px; font-size: 1rem; }
.chanson-bloc p { margin: 0 0 8px; }
.chanson-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chanson-import { position: relative; cursor: pointer; }
.chanson-import input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.chanson-import:focus-within { outline: 2px solid var(--accent, #4fd8ff); outline-offset: 2px; }
.chanson-message:empty { display: none; }
.chanson-message { margin-top: 8px !important; color: var(--ok, #22b573); }
.chanson-message.is-erreur { color: var(--danger, #ff5d6c); }
.theme-tuile {
  position: relative; display: grid; gap: 4px; text-align: left; padding: 8px 8px 10px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--glass); color: var(--ink); font: inherit; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), border-color .2s, box-shadow .2s;
}
.theme-tuile:hover { transform: translateY(-3px) rotate(-.5deg); border-color: var(--line-2); }
.theme-tuile[aria-pressed="true"] { border-color: var(--cyan-txt); box-shadow: 0 0 0 3px var(--glow); }
.theme-tuile[aria-pressed="true"]::after {
  content: "✓"; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cyan); color: var(--on-grad); font-weight: 800; font-size: .8rem; animation: edMedaille .5s cubic-bezier(.2, 1.6, .4, 1);
}
.theme-tuile b { font-size: .9rem; padding: 0 4px; }
.theme-tuile small { font-size: .72rem; color: var(--ink-3); padding: 0 4px; line-height: 1.25; }
.theme-musique { position: absolute; top: 12px; left: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8rem; }
.theme-apercu { position: relative; height: 74px; border-radius: 11px; overflow: hidden; margin-bottom: 4px; }
.theme-apercu i { position: absolute; display: block; }
.ta-sombre { background: linear-gradient(135deg, #0c4a5e, #060d16); }
.ta-sombre i:nth-child(1) { left: 10px; top: 14px; width: 54%; height: 9px; border-radius: 5px; background: #eef5fb; }
.ta-sombre i:nth-child(2) { left: 10px; top: 30px; width: 40%; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #34ecdb, #20b8f2); }
.ta-sombre i:nth-child(3) { right: 10px; bottom: 10px; width: 34px; height: 20px; border-radius: 10px; background: #2ee6d6; }
.ta-clair { background: linear-gradient(135deg, #d9f6f3, #ffffff); }
.ta-clair i:nth-child(1) { left: 10px; top: 14px; width: 54%; height: 9px; border-radius: 5px; background: #0b1b2a; }
.ta-clair i:nth-child(2) { left: 10px; top: 30px; width: 40%; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #19d3c1, #1aa3e6); }
.ta-clair i:nth-child(3) { right: 10px; bottom: 10px; width: 34px; height: 20px; border-radius: 10px; background: #0aa99b; }
.ta-neon { background: linear-gradient(#14052e, #07010f 60%); }
.ta-neon::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -10px; height: 36px; transform: perspective(60px) rotateX(50deg);
  background: linear-gradient(rgba(255, 43, 214, .8) 1px, transparent 1px) 0 0 / 14px 8px, linear-gradient(90deg, rgba(0, 240, 255, .7) 1px, transparent 1px) 0 0 / 14px 8px; }
.ta-neon i:nth-child(1) { left: 50%; top: 10px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: linear-gradient(#ffd14d, #ff2bd6); box-shadow: 0 0 18px #ff2bd6; }
.ta-neon i:nth-child(2) { left: 10px; top: 12px; width: 30%; height: 4px; border-radius: 2px; background: #00f0ff; box-shadow: 0 0 8px #00f0ff; }
.ta-neon i:nth-child(3) { right: 10px; top: 20px; width: 22%; height: 4px; border-radius: 2px; background: #ff2bd6; box-shadow: 0 0 8px #ff2bd6; }
.ta-polynesie { background: linear-gradient(#ffd8a8 0%, #ff9a76 30%, #52c7c2 60%, #0a8fa8 100%); }
.ta-polynesie i:nth-child(1) { left: 50%; top: 14px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 16px #ffe07a; }
.ta-polynesie i:nth-child(2) { left: 0; right: 0; bottom: 0; height: 18px; background: radial-gradient(circle at 10px -4px, transparent 12px, #fdf6e9 13px) 0 0 / 20px 18px repeat-x; }
.ta-polynesie i:nth-child(3) { left: 8px; bottom: 8px; width: 26px; height: 40px; background: linear-gradient(100deg, transparent 45%, #1d6b45 46% 54%, transparent 55%); }
.ta-techno { background: #030503; background-image: linear-gradient(rgba(57, 255, 20, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 255, 20, .15) 1px, transparent 1px); background-size: 12px 12px; }
.ta-techno i { bottom: 10px; width: 8px; border-radius: 2px; background: linear-gradient(#00e5ff, #39ff14); box-shadow: 0 0 8px #39ff14; animation: taEq 1s ease-in-out infinite alternate; }
.ta-techno i:nth-child(1) { left: 30%; height: 30px; } .ta-techno i:nth-child(2) { left: 45%; height: 46px; animation-delay: -.4s; } .ta-techno i:nth-child(3) { left: 60%; height: 22px; animation-delay: -.7s; }
@keyframes taEq { to { transform: scaleY(.4); transform-origin: bottom; } }
.ta-nuit { background: radial-gradient(circle at 50% 120%, #ff3cac55, transparent 60%), linear-gradient(#1a0629, #0c0414); }
.ta-nuit i:nth-child(1) { left: 50%; top: 8px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, transparent 30%), repeating-linear-gradient(0deg, #9aa 0 2px, #dde 2px 6px), #ccd; box-shadow: 0 0 14px #fff8; }
.ta-nuit i:nth-child(2) { left: 18%; top: 30px; width: 18px; height: 60px; transform: rotate(25deg); background: linear-gradient(#ff3cac99, transparent); }
.ta-nuit i:nth-child(3) { right: 18%; top: 30px; width: 18px; height: 60px; transform: rotate(-25deg); background: linear-gradient(#2b86c599, transparent); }
.ta-manga { background: #fbfaf4 radial-gradient(#0002 1.2px, transparent 1.4px) 0 0 / 7px 7px; border: 2px solid #111; }
.ta-manga::after { content: "ドン!"; position: absolute; right: 8px; top: 8px; font: 1.3rem/1 Bangers, sans-serif; color: #e60012; -webkit-text-stroke: 1px #111; transform: rotate(8deg); }
.ta-manga i:nth-child(1) { left: 0; right: 0; top: 0; bottom: 0; background: repeating-conic-gradient(from 0deg at 20% 60%, #0000 0 4deg, #0001 4deg 6deg); }
.ta-manga i:nth-child(2) { left: 10px; bottom: 12px; width: 52%; height: 10px; background: #111; transform: skewX(-12deg); }
.ta-manga i:nth-child(3) { left: 10px; bottom: 28px; width: 30%; height: 8px; background: #e60012; transform: skewX(-12deg); }

/* Changement de thème en douceur */
html.theme-change, html.theme-change body, html.theme-change .panel, html.theme-change .card, html.theme-change .site-header, html.theme-change .sidebar {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease !important;
}

/* Décor de fond commun aux ambiances */
.decor { display: none; }

/* ==========================================================================
   Thème Néon : enseignes lumineuses, nuit synthwave
   ========================================================================== */

 

/* ==========================================================================
   Thème Polynésie : lagon, sable, tiare et vagues
   ========================================================================== */

/* ==========================================================================
   Thème Techno : écrans, scanlines, égaliseur et platine
   ========================================================================== */

  

/* ==========================================================================
   Thème Boîte de nuit : boule à facettes, projecteurs, piste de danse
   ========================================================================== */

/* ==========================================================================
   Thème Manga japonais : encre, trames, bulles et lignes de vitesse
   ========================================================================== */

/* Platine (musique propre à chaque thème) */
#platine {
  position: fixed; left: 16px; bottom: 16px; z-index: 8800; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: rgba(8, 8, 14, .86); color: #f3f3ff; border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8), 0 0 30px -12px var(--cyan); transform: translateY(160%); transition: transform .5s cubic-bezier(.2, 1.3, .3, 1);
}
#platine.is-on { transform: none; }
.pl-disque { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: none; }
.pl-vinyle {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--cyan) 0 16%, #111 17% 19%, transparent 20%), repeating-radial-gradient(circle, #151515 0 2px, #222 2px 3px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 4px 14px rgba(0, 0, 0, .6);
}
.pl-vinyle i { position: absolute; left: 50%; top: 6px; width: 2px; height: 14px; margin-left: -1px; background: rgba(255, 255, 255, .5); border-radius: 1px; }
#platine.is-joue .pl-vinyle { animation: plTourne 1.8s linear infinite; }
@keyframes plTourne { to { transform: rotate(360deg); } }
.pl-icone { position: absolute; inset: 0; display: grid; place-items: center; }
.pl-icone::before { content: ""; width: 0; height: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; filter: drop-shadow(0 0 4px #000); }
#platine.is-joue .pl-icone::before { width: 12px; height: 14px; border: 0; margin: 0; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%); }
.pl-infos { display: grid; gap: 1px; min-width: 150px; }
.pl-infos b { font-size: .86rem; }
.pl-infos small { font-size: .7rem; color: #b9b9cf; }
.pl-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; margin-top: 3px; }
.pl-eq i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(var(--cyan-2), var(--cyan)); transform: scaleY(var(--h, .15)); transform-origin: bottom; transition: transform .08s; }
.pl-volume input { width: 80px; accent-color: var(--cyan-txt); }
@media (max-width: 760px) {
 #platine { left: 10px; bottom: 10px; } .pl-volume, .pl-infos small { display: none; } .pl-infos { min-width: 0; } }

/* Ajustements des thèmes */
#platine { left: auto; right: 16px; }
@media (max-width: 760px) {
 #platine { right: 10px; left: auto; } }

/* En-têtes de page sans bulles sur la photo : texte et chiffres clés à gauche, photo libre à droite */
.page-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "kpi"; min-height: 242px; align-content: start; }
.kpi5 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; }
@media (max-width: 760px) {
 .kpi5 { max-width: none; } }

/* Thèmes à fond sombre coloré (Néon, Techno, Boîte de nuit) : pas de fusion « multiply »,
   qui noircissait les photos sur le fond violet ou noir (fiche produit, vignettes, packs) */

/* La platine s'efface quand une fiche produit est ouverte */
body:has(#drawer:not([hidden])) #platine { transform: translateY(160%); }
/* Accueil : la bande « 24h · Support dédié » est retirée, les chiffres clés prennent toute la largeur */
.stats { grid-template-columns: minmax(0, 1fr); }
/* Chiffres clés cliquables */
[data-stat] { cursor: pointer; border-radius: 14px; transition: background .2s, transform .2s, box-shadow .2s; }
[data-stat]:hover { background: rgba(46, 230, 214, .08); transform: translateY(-2px); }
.kpi5 > [data-stat]:hover { border-color: var(--cyan-txt); box-shadow: 0 10px 24px -14px var(--cyan); }
[data-stat]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
:root[data-theme="light"] [data-stat]:hover { background: rgba(10, 169, 155, .08); }
.marques-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 18px; }
.marque-btn { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s, transform .2s; }
.marque-btn:hover, .marque-btn:focus-visible { border-color: var(--cyan-txt); transform: translateY(-2px); outline: none; }
.marque-btn b { font-size: .95rem; font-weight: 600; }
/* Logos des marques : plaque claire quel que soit le thème (logos conçus pour fond blanc) */
.marque-logo { display: flex; align-items: center; justify-content: center; height: 60px; margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid rgba(15, 23, 42, .08); overflow: hidden; }
.marque-logo img { display: block; max-width: 100%; max-height: 42px; width: auto; height: auto; object-fit: contain; }
.marque-logo.sans-logo { background: linear-gradient(135deg, var(--cyan), var(--violet, #7c5cff)); border: 0; color: #fff; font-weight: 700; font-size: 1.3rem; letter-spacing: .06em; }
/* En-tête du catalogue filtré par marque : sans thème, le logo seul (le nom reste lu par les lecteurs d'écran) ;
   avec un thème, le nom seul, dans la typographie du thème. */
.cat-marque-logo { display: inline-flex; align-items: center; vertical-align: middle; height: 1.5em; padding: .14em .36em; border-radius: 10px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.cat-marque-logo img { display: block; max-height: 100%; max-width: 7em; width: auto; height: auto; object-fit: contain; }
html:not([data-ambiance]) .cat-marque-logo + .cat-marque-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html[data-ambiance] .cat-marque-logo { display: none; }
.marque-btn small { font-size: .78rem; color: var(--ink-2); }
/* Platine réduite : seul le disque reste (lecture / pause), une flèche la ré-agrandit */
.pl-taille { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #f3f3ff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .2s, transform .3s; }
.pl-taille:hover, .pl-taille:focus-visible { background: rgba(255, 255, 255, .16); outline: none; }
.pl-taille svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#platine .pl-infos, #platine .pl-volume { transition: opacity .25s; }
#platine.is-reduite { gap: 0; padding: 6px; }
#platine.is-reduite .pl-infos, #platine.is-reduite .pl-volume { display: none; }
#platine.is-reduite .pl-taille { position: absolute; left: -10px; top: -8px; width: 24px; height: 24px; background: rgba(8, 8, 14, .92); transform: rotate(180deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
#platine.is-reduite .pl-taille svg { width: 13px; height: 13px; }
#platine.is-reduite.is-joue { box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8), 0 0 calc(18px + var(--niveau, 0) * 40px) -6px var(--cyan); }
@media (max-width: 760px) {
 .pl-taille { width: 26px; height: 26px; } }
/* Saisie rapide : moteur de recherche */
.quick-search { position: relative; margin-bottom: 18px; }
.quick-results { margin-top: 10px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); max-height: 420px; overflow-y: auto; }
.qr-ligne { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 14px; }
.qr-ligne + .qr-ligne { border-top: 1px solid var(--line); }
.qr-img { width: 52px; height: 52px; border-radius: 10px; background: var(--studio); display: grid; place-items: center; overflow: hidden; }
.qr-img img { width: 88%; height: 88%; object-fit: contain; }
.qr-nom { display: grid; gap: 2px; min-width: 0; }
.qr-nom b { font-weight: 600; font-size: .95rem; }
.qr-nom small { color: var(--ink-2); font-size: .82rem; }
.qr-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.qr-prix { font-size: .9rem; white-space: nowrap; }
.qr-vide, .qr-plus { padding: 14px; margin: 0; }
@media (max-width: 760px) {

  .qr-ligne { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .qr-img { width: 44px; height: 44px; }
  .qr-prix { display: none; }
}
/* Galerie des thèmes dans le panneau latéral */
.themes-tiroir { margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) {
 .themes-tiroir { grid-template-columns: minmax(0, 1fr); } }
/* Installation en webapp */
.install-etapes { margin: 18px 0; padding-left: 22px; display: grid; gap: 12px; line-height: 1.5; }
.install-etapes li::marker { color: var(--cyan-txt); font-weight: 700; }
.install-carte { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); }
.install-carte img { border-radius: 16px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.install-carte div { display: grid; gap: 2px; }
.install-carte small { color: var(--ink-2); }
/* En application installée : marges des zones système (encoche, barre d'état) */
html.en-app body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* Bouton Menu : visible partout ; sur grand écran il rentre et ressort la colonne de gauche */
.menu-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 16px 0 13px; border-radius: 999px; font: 600 .9rem var(--f-sans); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn[aria-expanded="false"] svg { color: var(--cyan-txt); }
@media (max-width: 760px) {
 .menu-btn { padding: 0; width: 44px; justify-content: center; } .menu-txt { display: none; } }
@media (min-width: 1181px) {

  .shell { transition: grid-template-columns .35s cubic-bezier(.2, .8, .2, 1); }
  .sidebar { min-width: 0; overflow: hidden; transition: opacity .25s, padding .35s; }
  html.menu-replie { --side-w: 0px; }
  html.menu-replie .sidebar { opacity: 0; visibility: hidden; padding-left: 0; padding-right: 0; border-right-width: 0; }
}
@media (min-width: 761px) and (max-width: 1440px) {
 .menu-btn { padding: 0; width: 46px; justify-content: center; } .menu-txt { display: none; } }
@media (max-width: 560px) {
 .kpi5 .k-ico { display: none; } .kpi5 > div { grid-template-columns: 1fr; grid-template-areas: "dd" "dt"; } }

/* ==========================================================================
   Néon, version enrichie : ciel étoilé, montagnes, enseigne de pharmacie,
   cadres en tube néon qui circulent, allumage du titre, pulsation au rythme
   ========================================================================== */
@property --neon-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* Allumage du titre quand le thème est appliqué ou la page ouverte */

/* Cadres en tube néon : dégradé qui circule autour des cartes */

/* Boutons et menu en tubes néon */

/* Au rythme de la musique */

/* Néon : scène d'horizon basse, pour ne pas traverser le contenu */

.site-header .search { min-width: 190px; }

/* ==========================================================================
   Techno, version enrichie : salle de contrôle, sol en perspective, lasers,
   égaliseur pleine largeur qui suit la musique, stroboscope au rythme, HUD
   ========================================================================== */
@property --tk-angle { syntax: "<angle>"; initial-value: -28deg; inherits: false; }

/* En-tête : barre lumineuse qui court */

/* Curseur de terminal après les sur-titres « // … » */

/* Coins de viseur (HUD) sur les panneaux et chiffres clés */

/* Cartes : reflet qui balaie au survol, cadre qui s'allume */

/* Boutons : effet terminal, glitch au survol */

/* Titre : glitch RGB plus marqué, scintillement léger en continu */

/* ==========================================================================
   Techno : animation « moniteur » à la place de la photo de l'accueil
   (électrocardiogramme, croix 3D, radar, égaliseur, données qui défilent)
   ========================================================================== */
.tk-scene { display: none; }

/* Radar : anneaux et balayage */

 

/* Croix de pharmacie en 3D qui tourne */

 

/* Électrocardiogramme qui se trace et défile */

/* Égaliseur qui suit la musique */

  
 

/* Bandeau de mesures (HUD) */

/* Données qui défilent */

@media (max-width: 980px) {
 .tk-hud, .tk-code { display: none; }   }
.main-nav a { white-space: nowrap; }

/* ==========================================================================
   Renouvellement MAD : suivi des délais de renouvellement avec compte à rebours
   ========================================================================== */
.renouv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.renouv-stats > div { padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); display: grid; gap: 2px; }
.renouv-stats dt { font-size: .82rem; color: var(--ink-2); }
.renouv-stats dd { margin: 0; font-size: 1.8rem; font-weight: 650; letter-spacing: -0.03em; }
.rs-due dd { color: var(--danger-txt); } .rs-bientot dd { color: var(--warn-txt); } .rs-ok dd { color: var(--cyan-txt); }
.renouv-list { display: grid; gap: 12px; }
.renouv { display: grid; grid-template-columns: 96px minmax(0, 1fr) 230px; gap: 18px; align-items: center; padding: 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); border-left: 4px solid var(--cyan); }
.renouv-bientot { border-left-color: var(--warn-txt); } .renouv-due { border-left-color: var(--danger-txt); }
.renouv-img { width: 96px; height: 96px; border-radius: 14px; border: 0; padding: 0; background: var(--studio); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.renouv-img img { width: 88%; height: 88%; object-fit: contain; }
.renouv-corps { display: grid; gap: 6px; min-width: 0; }
.renouv-corps h3 { font-size: 1.05rem; margin: 0; }
.renouv-corps h3 small { font-weight: 400; color: var(--ink-2); font-size: .86rem; }
.renouv-etat { margin: 0; font: 600 .74rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan-txt); }
.renouv-bientot .renouv-etat { color: var(--warn-txt); } .renouv-due .renouv-etat { color: var(--danger-txt); }
.renouv-dates { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.renouv-dates b { color: var(--ink); font-weight: 600; }
.renouv-barre { height: 6px; border-radius: 3px; background: var(--glass-2); overflow: hidden; margin-top: 2px; }
.renouv-barre i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--avance, 0)); background: linear-gradient(90deg, var(--cyan), #ffb547 85%, #ff6b6b); border-radius: 3px; }
.renouv-note input { width: 100%; font-size: .84rem; padding: 7px 10px; }
.renouv-cote { display: grid; gap: 8px; justify-items: stretch; text-align: center; }
.renouv-cr { display: grid; gap: 2px; padding: 10px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--line); }
.cr-j { font-size: .9rem; color: var(--ink-2); }
.cr-j b { font-size: 1.9rem; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.cr-h { font-size: 1rem; color: var(--cyan-txt); letter-spacing: .06em; }
.cr-env { font-size: .76rem; color: var(--ink-2); }
.cr-due { font-weight: 700; color: var(--danger-txt); font-size: .95rem; padding: 8px 0; }
.renouv-bientot .cr-h { color: var(--warn-txt); }
.renouv-due .renouv-cr { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .35); animation: renouvPouls 2s ease-in-out infinite; }
@keyframes renouvPouls { 50% { box-shadow: 0 0 0 4px rgba(255, 107, 107, .12); } }
.renouv-masques { margin: 4px 2px 0; }
.renouv-ajout { margin-top: 18px; }
.renouv-ajout summary { cursor: pointer; font-weight: 600; color: var(--cyan-txt); }
.renouv-ajout form { margin-top: 14px; }
.renouv-fiche { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--glass-2); }
.renouv-fiche p { margin: 0 0 4px; }
.renouv-cr-fiche { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 6px 12px; margin-top: 4px; }
.renouv-cr-fiche .cr-j b { font-size: 1.3rem; }
@media (max-width: 860px) {

  .renouv { grid-template-columns: 72px minmax(0, 1fr); }
  .renouv-img { width: 72px; height: 72px; }
  .renouv-cote { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
  .renouv-cote .btn-link { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
 .renouv-stats dd { font-size: 1.4rem; } .renouv-stats > div { padding: 10px 12px; } }

/* ==========================================================================
   Conseils associés à la vente
   ========================================================================== */
.pack.t-blue, .cv-c.t-blue { --t: #4f8dff; --t2: #2f6ae8; --t-ink: #fff; }
.pack.t-teal, .cv-c.t-teal { --t: #19c2a8; --t2: #0e9e88; --t-ink: #02221d; }
.pack.t-red, .cv-c.t-red { --t: #ff6b5e; --t2: #e8473a; --t-ink: #fff; }
.pack.t-amber, .cv-c.t-amber { --t: #f5c03a; --t2: #e0a514; --t-ink: #2a1d00; }
.pack.t-green, .cv-c.t-green { --t: #3fd77a; --t2: #22b45c; --t-ink: #02200d; }
.cv-c { --t: var(--cyan); --t2: var(--cyan-2); --t-ink: var(--on-grad); }
.cv-c.t-violet { --t: #8b6bff; --t2: #5b3fe0; --t-ink: #fff; }
.cv-c.t-orange { --t: #ffae2e; --t2: #ff8a1a; --t-ink: #2a1600; }
.cv-c.t-pink { --t: #ff4f8f; --t2: #e8327a; --t-ink: #fff; }
.pack-resume { margin: 2px 0 0; font: 500 .76rem var(--f-mono); color: var(--ink-2); letter-spacing: .02em; }
.cv-titre-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; margin-right: 10px; vertical-align: middle;
  background: linear-gradient(140deg, var(--t), var(--t2)); color: var(--t-ink); flex-shrink: 0; }
.cv-titre-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#drawer .d-head h2 { display: flex; align-items: center; }
#drawer .d-head .btn-copy-all { margin-top: 10px; }
.cv-sec h3 { display: flex; align-items: center; gap: 8px; }
.cv-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--glass-2); color: var(--cyan-txt); }
.cv-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-liste { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cv-liste li { position: relative; padding: 10px 12px 10px 34px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); line-height: 1.45; font-size: .93rem; }
.cv-liste li::before { content: ""; position: absolute; left: 13px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.cv-questions .cv-liste li::before { content: "?"; width: auto; height: auto; background: none; box-shadow: none; top: 9px; left: 13px; font-weight: 800; color: var(--cyan-txt); }
.cv-vigilance .cv-ico { color: var(--warn-txt); background: rgba(255, 181, 71, .12); }
.cv-vigilance .cv-liste li { border-color: rgba(255, 181, 71, .3); background: rgba(255, 181, 71, .06); }
.cv-vigilance .cv-liste li::before { background: #ffb547; box-shadow: 0 0 8px #ffb547; }
.cv-pec p { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--line-2); line-height: 1.5; font-size: .93rem; }
.cv-pourquoi { margin: 2px 0 4px; font-size: .84rem; color: var(--ink-2); line-height: 1.4; }
.cv-ajout { margin-top: 6px; gap: 6px; }
.cv-ajout svg { width: 16px; height: 16px; }
.cv-fiche { display: grid; gap: 8px; margin-top: 8px; }
.cv-chip { display: flex; align-items: center; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s, transform .2s; }
.cv-chip:hover, .cv-chip:focus-visible { border-color: var(--t); transform: translateY(-1px); outline: none; }
.cv-chip > span:last-child { display: grid; gap: 1px; }
.cv-chip b { font-size: .93rem; }
.cv-chip small { font-size: .78rem; color: var(--ink-2); }

/* ==========================================================================
   Animations d'accueil propres à chaque thème (à la place de la photo)
   ========================================================================== */
.nx-scene, .po-scene, .nu-scene, .mg-scene { display: none; position: absolute; inset: 0; overflow: hidden; }

/* ---------- Néon : enseigne de pharmacie, soleil synthwave, sol quadrillé ---------- */

 

/* ---------- Polynésie : coucher de soleil sur le lagon ---------- */

 

  

 

 

/* ---------- Boîte de nuit : boule à facettes, faisceaux, piste ---------- */

   

  
 

/* ---------- Manga : planches de BD, lignes de vitesse, onomatopées ---------- */

  background: radial-gradient(circle, #fff 0 30%, transparent 31%); clip-path: polygon(50% 0, 61% 30%, 98% 20%, 72% 48%, 100% 74%, 64% 70%, 54% 100%, 42% 72%, 4% 84%, 30% 52%, 0 26%, 38% 32%); animation: mgBoum 1.6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes mgBoum { 0% { transform: scale(.4) rotate(-10deg); } 30% { transform: scale(1.12) rotate(4deg); } 60%, 100% { transform: scale(1) rotate(0); } }

  
@media (max-width: 980px) {
 .po-mot, .mg-bulle, .nx-sous { display: none; } }

/* Bandeau « Prise en charge CPS et aide au choix » du catalogue : bien en évidence */
.cat-infos { position: relative; margin-bottom: 18px; padding: 0; border: 1.5px solid transparent; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(110deg, var(--cyan), var(--cyan-2), #8b6bff) border-box;
  box-shadow: 0 14px 34px -20px var(--cyan); }
.cat-infos summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; color: var(--ink); font-size: 1rem;
  background: linear-gradient(100deg, rgba(46, 230, 214, .14), rgba(25, 185, 238, .06) 60%, transparent); }
.cat-infos summary::-webkit-details-marker { display: none; }
.cat-infos summary:hover { background: linear-gradient(100deg, rgba(46, 230, 214, .22), rgba(25, 185, 238, .1) 60%, transparent); }
.cat-infos summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.cat-infos[open] summary { margin-bottom: 0; border-bottom: 1px solid var(--line-2); }
.ci-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); box-shadow: 0 8px 20px -8px var(--cyan); animation: ciPouls 2.6s ease-in-out infinite; }
.ci-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ciPouls { 50% { box-shadow: 0 0 0 6px rgba(46, 230, 214, .15), 0 8px 20px -8px var(--cyan); } }
.ci-txt { display: grid; gap: 6px; min-width: 0; }
.ci-txt b { font-size: 1.08rem; font-weight: 700; }
.ci-sujets { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-sujet { font-size: .76rem; padding: 3px 9px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ci-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--grad); color: var(--on-grad); font-weight: 700; font-size: .9rem; white-space: nowrap; box-shadow: 0 8px 18px -10px var(--cyan); }
.ci-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.ci-masquer { display: none; }
.cat-infos[open] .ci-voir { display: none; } .cat-infos[open] .ci-masquer { display: inline; }
.cat-infos[open] .ci-btn svg { transform: rotate(180deg); }
.ci-corps { padding: 6px 18px 16px; animation: ciOuvre .3s ease; }
@keyframes ciOuvre { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 760px) {

  .cat-infos summary { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .ci-btn { grid-column: 1 / -1; justify-content: center; }
  .ci-ico { width: 40px; height: 40px; }
}

/* Bouton « Thèmes » du menu, en couleurs */
.nav-themes .nt-ico { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; }
.nav-themes .nt-ico svg { width: 24px; height: 24px; }
.nav-themes .nt-palette { fill: rgba(255, 255, 255, .06); stroke: currentColor; }
.nav-themes .nt-p1 { fill: #ff4f8f; stroke: none; } .nav-themes .nt-p2 { fill: #ffae2e; stroke: none; } .nav-themes .nt-p3 { fill: #3fd77a; stroke: none; } .nav-themes .nt-p4 { fill: #4f8dff; stroke: none; }
.nav-themes .nt-txt { font-weight: 700; background: linear-gradient(90deg, #ff4f8f, #ffae2e 35%, #3fd77a 65%, #4f8dff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: ntArcEnCiel 6s linear infinite; }
@keyframes ntArcEnCiel { to { background-position: 200% 0; } }
.side-nav a.nav-themes { border: 1px solid transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(100deg, #ff4f8f, #ffae2e, #3fd77a, #4f8dff) border-box; }
.side-nav a.nav-themes:hover { background: linear-gradient(color-mix(in srgb, var(--bg-2) 88%, #fff), color-mix(in srgb, var(--bg-2) 88%, #fff)) padding-box, linear-gradient(100deg, #ff4f8f, #ffae2e, #3fd77a, #4f8dff) border-box; }
.side-nav a.nav-themes:hover .nt-ico svg { animation: ntTourne .8s ease; }
@keyframes ntTourne { 50% { transform: rotate(-18deg) scale(1.1); } }

/* Signature « Réalisé par Mana&process », comme sur les autres programmes ManaProcess */
.footer-credit { margin: 0; }
.footer-credit a { text-decoration: none; }
.footer-credit a:hover .mp-wordmark { text-decoration: underline; text-underline-offset: 3px; }
.mp-wordmark { font-family: "Clash Display", var(--f-sans); font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; color: #f1f5f9; }
:root[data-theme="light"] .mp-wordmark { color: #0f172a; }
.mp-amp { color: #f9a9d4; font-weight: 700; }
:root[data-theme="light"] .mp-amp { color: #ec7fbb; }

/* ==========================================================================
   Statistiques de ventes (assets/js/admin.js)
   ========================================================================== */
.st-barre-outils { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.st-actions { display: flex; gap: 8px; }
.st-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.st-kpi { display: grid; gap: 4px; padding: 16px 18px; }
.st-kpi span { font-size: .78rem; color: var(--ink-2); }
.st-kpi b { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.st-kpi small { font-size: .78rem; color: var(--ink-3); }
.st-evo { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.st-evo.up { background: rgba(63, 215, 122, .16); color: #2fbf69; }
.st-evo.down { background: rgba(255, 93, 108, .14); color: #ff5d6c; }
.st-bloc { padding: 18px 20px; margin-bottom: 16px; }
.st-bloc h2 { font-size: 1.05rem; margin: 0 0 4px; }
.st-bloc > .muted.small { margin: 0 0 10px; }
.st-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-2col .st-bloc { margin-bottom: 16px; }
.st-graph { display: block; width: 100%; height: auto; margin-top: 6px; }
.st-axe { stroke: var(--line); stroke-width: 1; }
.st-barre { fill: color-mix(in srgb, var(--cyan) 45%, transparent); }
.st-barre-cour { fill: var(--cyan); }
.st-val { fill: var(--ink-2); font-size: 12px; text-anchor: middle; font-weight: 600; }
.st-lib { fill: var(--ink-3); font-size: 11px; text-anchor: middle; }
.st-barres { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.st-bl { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.st-bl b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-bl small { color: var(--ink-3); font-weight: 400; }
.st-jauge { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: var(--glass-2); overflow: hidden; }
.st-jauge i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); }
.st-table-wrap { overflow-x: auto; margin-top: 8px; }
.st-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.st-table th { text-align: left; font-weight: 500; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.st-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.st-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-table th.num { text-align: right; }
.st-table .nowrap { white-space: nowrap; }
.st-vide { padding: 24px; text-align: center; }
@media (max-width: 1100px) { .st-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .st-2col { grid-template-columns: minmax(0, 1fr); } .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Thème Football : pelouse tondue, lignes du terrain, projecteurs, ballon, foule
   ========================================================================== */
.ta-football { background: repeating-linear-gradient(90deg, #1f8f3a 0 18px, #23a043 18px 36px); }
.ta-football i:nth-child(1) { left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px solid #fff; border-radius: 50%; }
.ta-football i:nth-child(2) { left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; }
.ta-football i:nth-child(3) { left: 18%; bottom: 14px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #111 0 22%, transparent 24%), radial-gradient(circle at 20% 25%, #111 0 12%, transparent 14%), radial-gradient(circle at 80% 70%, #111 0 12%, transparent 14%), #fff; animation: fbRoule 3s linear infinite; }
.ta-karaoke { background: radial-gradient(ellipse at 50% 0%, #ff4fd866, transparent 60%), linear-gradient(#2a0a45, #12051f); }
.ta-karaoke::after { content: "♪ ♫"; position: absolute; right: 10px; top: 8px; font: 1.1rem/1 Righteous, sans-serif; color: #4fd8ff; }
.ta-karaoke i:nth-child(1) { left: 50%; top: 14px; width: 16px; height: 22px; margin-left: -8px; border-radius: 8px; background: linear-gradient(#ddd, #888); }
.ta-karaoke i:nth-child(2) { left: 50%; top: 36px; width: 3px; height: 40px; margin-left: -1.5px; background: #aaa; }
.ta-karaoke i:nth-child(3) { left: 12px; right: 12px; bottom: 10px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ff4fd8 0 60%, #ffffff44 60%); }

@keyframes fbRoule { to { transform: translateX(80px) rotate(720deg); } }

 

 

/* ==========================================================================
   Thème Karaoké : scène, rideaux, projecteur, notes, paroles qui défilent
   ========================================================================== */

 

  
  

/* ---------- Animations d'accueil : Football et Karaoké ---------- */
.fb-scene, .ka-scene { display: none; position: absolute; inset: 0; overflow: hidden; }

 

  

   

 

  

 

   

@media (max-width: 980px) {
 .fb-score, .ka-vu { display: none; }   }
/* Ambiances sombres : les fiches produits prennent la couleur de carte du thème (au lieu du bleu marine d'origine) */

/* ==========================================================================
   Thème Supercopter (hommage) : hélicoptère d'intervention, canyon au crépuscule, viseur de cockpit
   ========================================================================== */
.ta-supercopter { background: linear-gradient(#1b2a3d 0%, #c76b3a 70%, #3a1d14 100%); }
.ta-supercopter i:nth-child(1) { left: 0; right: 0; bottom: 0; height: 30px; background: #1d0f0a; clip-path: polygon(0 100%, 0 40%, 15% 20%, 30% 50%, 50% 10%, 70% 45%, 85% 25%, 100% 50%, 100% 100%); }
.ta-supercopter i:nth-child(2) { left: 20%; top: 18px; width: 70px; height: 28px; background: #0c1118; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20150%2060%22%3E%3Cpath%20d%3D%22M6%2030%20h36%20l10%20-8%20h40%20q14%200%2020%2010%20l6%206%20q2%204%20-4%204%20H70%20l-8%206%20H40%20l-6%20-6%20H18%20z%20M118%2038%20l22%20-4%20v6%20l-22%202z%20M62%2016%20h8%20v6%20h-8z%20M30%2052%20h40%20v2%20h-40z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M10%2014%20H130%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20150%2060%22%3E%3Cpath%20d%3D%22M6%2030%20h36%20l10%20-8%20h40%20q14%200%2020%2010%20l6%206%20q2%204%20-4%204%20H70%20l-8%206%20H40%20l-6%20-6%20H18%20z%20M118%2038%20l22%20-4%20v6%20l-22%202z%20M62%2016%20h8%20v6%20h-8z%20M30%2052%20h40%20v2%20h-40z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M10%2014%20H130%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E") center / contain no-repeat; animation: scVol 4s ease-in-out infinite alternate; }
.ta-supercopter i:nth-child(3) { right: 12px; top: 10px; width: 26px; height: 26px; border: 2px solid #ffb347; border-radius: 50%; }

@keyframes scVol { to { transform: translate(14px, -4px) rotate(-4deg); } }

/* Accueil : vue du cockpit */
.sc-scene, .mq-scene, .a8-scene, .rt-scene { display: none; position: absolute; inset: 0; overflow: hidden; }

  

 

  

/* ==========================================================================
   Thème Magnum (hommage) : Hawaï années 80, chemise à fleurs, voiture rouge, couchant
   ========================================================================== */
.ta-magnum { background: linear-gradient(#ff9a5a 0%, #ff5e62 45%, #1fb5ad 46%, #128a85 100%); }
.ta-magnum i:nth-child(1) { left: 0; right: 0; top: 0; height: 46%; background: #ffd9c2; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cg%20transform%3D%22translate%2830%2030%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-12%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%22-4%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2210%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-7%22%20cy%3D%2210%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-11%22%20cy%3D%22-4%22%20r%3D%229%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2890%2085%29%20scale%28.7%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-12%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%22-4%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2210%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-7%22%20cy%3D%2210%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-11%22%20cy%3D%22-4%22%20r%3D%229%22/%3E%3C/g%3E%3Cpath%20d%3D%22M70%2020%20q20%2010%2030%20-6%20q-4%2018%20-30%206z%20M10%2090%20q18%20-6%2028%2010%20q-20%204%20-28%20-10z%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 40px; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cg%20transform%3D%22translate%2830%2030%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-12%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%22-4%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2210%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-7%22%20cy%3D%2210%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-11%22%20cy%3D%22-4%22%20r%3D%229%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2890%2085%29%20scale%28.7%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-12%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%22-4%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2210%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-7%22%20cy%3D%2210%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-11%22%20cy%3D%22-4%22%20r%3D%229%22/%3E%3C/g%3E%3Cpath%20d%3D%22M70%2020%20q20%2010%2030%20-6%20q-4%2018%20-30%206z%20M10%2090%20q18%20-6%2028%2010%20q-20%204%20-28%20-10z%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 40px; opacity: .45; }
.ta-magnum i:nth-child(2) { left: 14%; bottom: 10px; width: 64px; height: 24px; background: #c8102e; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20240%2066%22%3E%3Cpath%20d=%22M8%2047%20L9%2038%20Q11%2032%2022%2031%20L80%2028%20L102%2019%20Q106%2017%20112%2017%20L138%2017%20Q144%2017%20148%2020%20L174%2030%20L222%2033%20Q233%2035%20235%2042%20L235%2047%20Q235%2051%20230%2051%20L206%2051%20A16%2016%200%200%200%20174%2051%20L68%2051%20A16%2016%200%200%200%2036%2051%20L13%2051%20Q8%2051%208%2047%20Z%20M52%2034%20a14%2014%200%201%200%200.01%200%20Z%20M190%2034%20a14%2014%200%201%200%200.01%200%20Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20240%2066%22%3E%3Cpath%20d=%22M8%2047%20L9%2038%20Q11%2032%2022%2031%20L80%2028%20L102%2019%20Q106%2017%20112%2017%20L138%2017%20Q144%2017%20148%2020%20L174%2030%20L222%2033%20Q233%2035%20235%2042%20L235%2047%20Q235%2051%20230%2051%20L206%2051%20A16%2016%200%200%200%20174%2051%20L68%2051%20A16%2016%200%200%200%2036%2051%20L13%2051%20Q8%2051%208%2047%20Z%20M52%2034%20a14%2014%200%201%200%200.01%200%20Z%20M190%2034%20a14%2014%200%201%200%200.01%200%20Z%22/%3E%3C/svg%3E") center / contain no-repeat; animation: mqRoule 3s ease-in-out infinite alternate; }
.ta-magnum i:nth-child(3) { right: 16%; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 16px #ffe7a0; }
@keyframes mqRoule { to { transform: translateX(40px); } }

/* Accueil : route côtière au couchant */

 

/* ==========================================================================
   Thème Années 80 : design Memphis, couleurs pop, cassette et VHS
   ========================================================================== */
.ta-annees80 { background: #fff6e8; }
.ta-annees80 i:nth-child(1) { left: 10px; top: 12px; width: 60px; height: 16px; background: #ff3e9e; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%2040%22%3E%3Cpath%20d%3D%22M5%2020%20q15%20-18%2030%200%20t30%200%20t30%200%20t30%200%20t30%200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%2040%22%3E%3Cpath%20d%3D%22M5%2020%20q15%20-18%2030%200%20t30%200%20t30%200%20t30%200%20t30%200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center / contain no-repeat; }
.ta-annees80 i:nth-child(2) { right: 14px; top: 10px; width: 26px; height: 26px; background: #00c2c7; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M20%204%20L36%2034%20H4z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M20%204%20L36%2034%20H4z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") center / contain no-repeat; animation: a8Tourne 6s linear infinite; }
.ta-annees80 i:nth-child(3) { left: 30%; bottom: 10px; width: 44%; height: 28px; border-radius: 4px; background: #222; box-shadow: inset 0 0 0 4px #ffd400; }

 

 

@keyframes a8Tourne { to { transform: rotate(360deg); } }

  

/* Accueil : cassette, égaliseur et formes Memphis */

 

   

@media (max-width: 980px) {
 .sc-hud span, .mq-dossier { display: none; }  }
/* Retouches Magnum et Années 80 */


/* Tuile de la galerie : Maison de retraite */
.ta-retraite { background: #fbeee6; }
.ta-retraite::before { content: ""; position: absolute; inset: 0; background: #e8708f; opacity: .28; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cg%20transform%3D%22translate%2820%2020%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-7%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%22-2%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%224%22%20cy%3D%226%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%226%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22-6.6%22%20cy%3D%22-2%22%20r%3D%225%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2860%2060%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-7%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%22-2%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%224%22%20cy%3D%226%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%226%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22-6.6%22%20cy%3D%22-2%22%20r%3D%225%22/%3E%3C/g%3E%3Cpath%20d%3D%22M50%2018%20q8%20-6%2014%202%20q-8%204%20-14%20-2z%20M10%2058%20q8%20-6%2014%202%20q-8%204%20-14%20-2z%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 36px 36px; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cg%20transform%3D%22translate%2820%2020%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-7%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%22-2%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%224%22%20cy%3D%226%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%226%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22-6.6%22%20cy%3D%22-2%22%20r%3D%225%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2860%2060%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-7%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%22-2%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%224%22%20cy%3D%226%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%226%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22-6.6%22%20cy%3D%22-2%22%20r%3D%225%22/%3E%3C/g%3E%3Cpath%20d%3D%22M50%2018%20q8%20-6%2014%202%20q-8%204%20-14%20-2z%20M10%2058%20q8%20-6%2014%202%20q-8%204%20-14%20-2z%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 36px 36px; }
.ta-retraite i:nth-child(1) { left: 12px; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; background: repeating-radial-gradient(circle at 40% 40%, #9b87c9 0 3px, #b9a8e0 3px 6px); }
.ta-retraite i:nth-child(2) { left: 40%; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: #e0a93b; box-shadow: 30px 8px 0 #5cb8a0, 14px 30px 0 #e8708f; }
.ta-retraite i:nth-child(3) { right: 12px; bottom: 10px; width: 30px; height: 22px; border-radius: 0 0 12px 12px; background: #fff; border: 2px solid #4a3328; }

/* Image d'accueil (chambre lumineuse) : légèrement atténuée en mode sombre */
.hero-photo picture { display: block; width: 100%; height: 100%; }
/* Mode sombre : image atténuée, fondue à gauche comme avant */
:root:not([data-theme="light"]) .hero-accueil img { filter: brightness(.82) saturate(1.05); }
/* Mode clair sans thème : l'image (vagues claires à gauche) passe sous le texte, bord à bord */
html[data-theme="light"]:not([data-ambiance]) .hero-accueil { left: calc(-1 * max(24px, env(safe-area-inset-left, 0px))); width: auto; -webkit-mask-image: none; mask-image: none; }
html[data-theme="light"]:not([data-ambiance]) .hero-accueil::after { display: none; }
html[data-theme="light"]:not([data-ambiance]) .hero-accueil img { object-position: 100% 50%; }
/* Mode sombre sans thème : même taille qu'en mode clair, fondu progressif sous le texte */
:root:not([data-theme="light"]):not([data-ambiance]) .hero-accueil { left: calc(-1 * max(24px, env(safe-area-inset-left, 0px))); width: auto; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%); mask-image: linear-gradient(to right, transparent 0%, #000 46%); }
:root:not([data-theme="light"]):not([data-ambiance]) .hero-accueil::after { display: none; }
:root:not([data-theme="light"]):not([data-ambiance]) .hero-accueil img { object-position: 100% 50%; }
/* Écran moyen : la photo reste nette (le texte passe sur les vagues claires en mode clair,
   sur la partie fondue en mode sombre) ; seuls les téléphones l'atténuent sous le texte */
@media (max-width: 980px) {
  html:not([data-ambiance]) .hero-accueil { opacity: 1; }
  :root:not([data-theme="light"]):not([data-ambiance]) .hero-accueil { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%); mask-image: linear-gradient(to right, transparent 0%, #000 55%); }
}
@media (max-width: 640px) {
  /* Téléphone : le texte passe au-dessus, la photo devient un bandeau pleine largeur dessous (plus de texte sur la photo) */
  html:not([data-ambiance]) .hero { grid-template-columns: minmax(0, 1fr); }
  html:not([data-ambiance]) .hero-accueil {
    position: relative; order: 2; z-index: 0; top: auto; right: auto; bottom: auto; left: auto; opacity: 1;
    width: auto; height: 200px; margin: 4px calc(-1 * max(24px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(24px, env(safe-area-inset-left, 0px)));
    -webkit-mask-image: none; mask-image: none;
  }
  html:not([data-ambiance]) .hero-accueil::after { display: none; }
  html:not([data-ambiance]) .hero-accueil img { object-position: 50% 55%; filter: none; }
  html:not([data-ambiance]) .hero-copy { order: 1; padding-bottom: 8px; }
}

/* Fiche patient (conseils de vente) : saisie dans le panneau, aperçu en pages A4, PDF, impression */
.cv-patient { border: 1.5px dashed var(--line-2); border-radius: 14px; padding: 14px 16px; background: var(--glass-2); display: grid; gap: 10px; }
.cv-patient h3 { margin: 0; }
.cv-patient .muted { margin: 0; }
.cv-patient .btn svg { width: 18px; height: 18px; }

.fp-modal { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: rgba(8, 14, 24, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fp-modal[hidden] { display: none; }
.fp-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); }
.fp-barre-titre { display: grid; gap: 2px; }
.fp-barre-titre b { font-size: 1rem; }
.fp-barre-titre small { font-size: .78rem; color: var(--ink-3); }
.fp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-actions .btn svg { width: 17px; height: 17px; }
.fp-fermer { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.fp-fermer:hover { background: var(--glass-2); }
.fp-defile { flex: 1; overflow: auto; padding: 24px 16px 40px; }
.fp-pages { width: 794px; margin: 0 auto; display: grid; gap: 22px; }

/* La page A4 (794 × 1123 px à 96 ppp) : mêmes règles à l'écran, dans le PDF et à l'impression */
.fp-page { position: relative; width: 794px; height: 1123px; padding: 46px 54px 0; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: #0f172a; font: 14.5px/1.45 var(--f-sans); border-radius: 4px; box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .55); text-align: left; }
.fp-page * { color: inherit; }
.fp-page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, #0aa99b, #19b9ee 60%, #6d8bff); }
.fp-corps { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.fp-tete { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 2px solid #0aa99b; flex-shrink: 0; }
.fp-signature { margin: 0; font: 600 36px/1.1 "Dancing Script", cursive; color: #0e7490; letter-spacing: .005em; }
.fp-date { font-size: 12.5px; color: #475569; }
.fp-titre { flex-shrink: 0; padding: 14px 18px 12px; border-radius: 12px; background: linear-gradient(120deg, #e6faf7, #e8f4ff); }
.fp-sur { margin: 0; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #0e7490; font-weight: 600; }
.fp-titre h1 { margin: 3px 0 4px; font-size: 27px; line-height: 1.15; letter-spacing: -0.02em; color: #0f172a; }
.fp-patient { margin: 0 0 2px; font-size: 14px; }
.fp-intro { margin: 0; color: #334155; }
/* Fiche bilingue français / reo tahiti : la traduction suit chaque phrase, en couleur */
.fp-intro.fp-reo { margin-top: 4px; }
.fp-reo { display: block; color: #0e7490; font-style: italic; }
.fp-reo-titre { font-weight: 500; font-size: 13px; color: #0e7490; }
.fp-signature-reo { margin: -2px 0 0; font: 600 19px/1.1 "Dancing Script", cursive; color: #0e7490; }
.fp-reo-choix { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.fp-reo-choix input { margin-top: 3px; }
.fp-reo-choix .hint { display: block; font-size: .78rem; color: var(--ink-3); }
.fp-bloc { flex-shrink: 0; }
.fp-bloc h2 { margin: 0 0 8px; font-size: 16px; padding: 2px 0 2px 10px; border-left: 4px solid #0aa99b; color: #0f172a; }
.fp-bloc ul { margin: 0; padding-left: 20px; }
.fp-bloc li { margin: 3px 0; }
.fp-bloc p { margin: 0; }
.fp-produits { list-style: none; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.fp-produit { display: flex; gap: 10px; align-items: center; border: 1px solid #e2e8f0; border-radius: 10px; padding: 7px 9px; margin: 0 !important; background: #fff; }
.fp-photo { width: 58px; height: 58px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: #f6f8fa; }
.fp-photo img { max-width: 52px; max-height: 52px; object-fit: contain; }
.fp-produit div { display: grid; gap: 2px; font-size: 14px; }
.fp-usage { font-size: 13px; color: #334155; line-height: 1.35; }
.fp-var { font-size: 11.5px; color: #64748b; }
.fp-liste { list-style: none; padding: 0 !important; display: grid; gap: 6px; }
.fp-liste li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0 !important; }
.fp-puce { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #dff7f3; margin-top: 1px; }
.fp-puce svg { width: 13px; height: 13px; fill: none; stroke: #0aa99b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fp-astuce { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px; border-radius: 12px; background: #fff8e6; border: 1px solid #f6dd9a; }
.fp-astuce h2 { border: 0 !important; padding: 0 !important; margin: 0 0 3px !important; color: #9a6400 !important; }
.fp-astuce-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #ffe7a6; }
.fp-astuce-ico svg { width: 22px; height: 22px; fill: none; stroke: #9a6400; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fp-alerte { padding: 12px 16px; border-radius: 12px; background: #fff1ec; border: 1px solid #ffc9b5; }
.fp-alerte h2 { display: flex; align-items: center; gap: 8px; border: 0 !important; padding: 0 !important; color: #b4421a !important; }
.fp-alerte h2 svg { width: 18px; height: 18px; fill: none; stroke: #b4421a; stroke-width: 2; stroke-linejoin: round; flex-shrink: 0; }
.fp-alerte ul { padding-left: 20px; }
.fp-alerte li::marker { color: #e0683a; }
.fp-notes .fp-lignes { display: grid; gap: 22px; padding-top: 14px; }
.fp-notes .fp-lignes i { display: block; border-bottom: 1px dashed #b6c2cf; }
.fp-note p { padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 10px; white-space: pre-line; }
.fp-pied { flex-shrink: 0; margin-top: 10px; padding: 9px 0 22px; border-top: 1px solid #cbd5e1; font-size: 11.5px; color: #475569; }
.fp-pied-haut { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #0f172a; margin-bottom: 3px; }
.fp-pied-haut p { margin: 0 !important; }
.fp-urgence b { color: #b4421a; }
.fp-pied p { margin: 1px 0; }
/* Hauteur réservée dès la mise en pages : « Page 1 / 2 » est écrit après, sans rien décaler */
.fp-num { text-align: right; min-height: 1.45em; }
@media (max-width: 640px) {
  .fp-barre { padding: 10px 12px; }
  .fp-actions .btn { padding-inline: 10px; }
}
@media print {
  @page { size: A4 portrait; margin: 0; }
  html.impression-fiche, html.impression-fiche body { background: #fff !important; overflow: visible !important; }
  html.impression-fiche body > :not(#fiche-patient) { display: none !important; }
  html.impression-fiche #fiche-patient { position: static; display: block; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.impression-fiche .fp-barre { display: none; }
  html.impression-fiche .fp-defile { overflow: visible; padding: 0; }
  html.impression-fiche .fp-pages { display: block; width: auto; zoom: 1 !important; }
  html.impression-fiche .fp-page { box-shadow: none; border-radius: 0; margin: 0; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html.impression-fiche .fp-page:last-child { break-after: auto; page-break-after: auto; }
}

/* ==========================================================================
   Conseils personnalisés par la pharmacie : barre, pastille, éditeur
   ========================================================================== */
.cv-barre { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin: 4px 0 16px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 16px; background: var(--glass-2); }
.cv-barre .btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
.cv-barre p { flex: 1 1 260px; margin: 0; }
.cv-barre-fichier { display: flex; gap: 8px; flex-wrap: wrap; }
.cv-barre-fichier label { cursor: pointer; }
.kf.kf-perso:not(.is-active) { border-color: color-mix(in srgb, #f5c03a 60%, transparent); }
.kf.kf-perso svg { color: #e0a514; }
.pack-perso { position: absolute; left: 14px; bottom: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: #f5c03a; color: #2a1d00; font: 700 .72rem var(--f-sans); letter-spacing: .02em; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); }
.cv-outils { display: flex; flex-wrap: wrap; gap: 8px; }
#drawer .d-head .cv-outils .btn-copy-all { margin-top: 10px; }
.cv-supprimer { color: #ff6b5e !important; }
.cv-perso-note { margin: 8px 0 0; font-size: .8rem; color: #e0a514; font-weight: 600; }
.ce-form { display: grid; gap: 6px; }
.ce-sec { display: grid; gap: 10px; }
.ce-sec h3 { margin: 0; }
.ce-sec .muted { margin: 0; }
.ce-choix { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ce-choix legend { font-size: .86rem; font-weight: 600; margin-bottom: 6px; padding: 0; }
.ce-couleur, .ce-icone { position: relative; cursor: pointer; }
.ce-couleur input, .ce-icone input { position: absolute; opacity: 0; pointer-events: none; }
.ce-couleur span[aria-hidden] { display: block; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, var(--t), var(--t2)); border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line); }
.ce-couleur input:checked + span { border-color: var(--panel); box-shadow: 0 0 0 2px var(--t); }
.ce-couleur input:focus-visible + span, .ce-icone input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ce-icone span:not(.sr-only) { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); }
.ce-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ce-icone input:checked + span { border-color: var(--cyan-txt); background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan-txt); }
.ce-liste { display: grid; gap: 8px; }
.ce-ligne { display: grid; grid-template-columns: 52px minmax(0, 1fr) 32px; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ce-photo { width: 52px; height: 52px; border-radius: 10px; background: var(--studio, #f6f8fa); display: grid; place-items: center; overflow: hidden; }
.ce-photo img { max-width: 90%; max-height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.ce-ligne-corps { display: grid; gap: 6px; min-width: 0; }
.ce-ligne-corps b { font-size: .9rem; line-height: 1.25; }
.ce-ligne-corps small { font-size: .76rem; color: var(--ink-3); }
.ce-ligne-champs { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.ce-ligne label { display: grid; gap: 3px; font-size: .74rem; color: var(--ink-2); }
.ce-ligne input { width: 100%; min-width: 0; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--ink); font: inherit; font-size: .86rem; }
.ce-retirer { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 1.2rem; cursor: pointer; }
.ce-retirer:hover { color: #ff6b5e; border-color: #ff6b5e; }
.ce-vide { margin: 0; }
.ce-trouves { display: grid; gap: 6px; max-height: 320px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ce-trouve { display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; gap: 10px; align-items: center; padding: 6px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.ce-trouve:hover, .ce-trouve:focus-visible { background: var(--glass-2); outline: none; }
.ce-trouve b { display: block; font-size: .88rem; }
.ce-trouve small { font-size: .75rem; color: var(--ink-3); }
.ce-plus { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); font-weight: 700; }
.ce-actions { display: flex; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 0; padding: 12px 0 4px; background: linear-gradient(transparent, var(--panel) 30%); }

/* Se déconnecter (mode portail) : rouge au survol */
.side-nav a.nav-deconnexion { --nav-c: #ff5a5a; }
.side-nav a.nav-deconnexion[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Fiche patient : matériel complémentaire */
.fp-complements .fp-sous { margin: -4px 0 8px; font-size: 13px; color: #475569; }
.fp-complements .fp-produit { border-style: dashed; border-color: #94d9d2; background: #f6fdfc; }
/* Choix du matériel complémentaire (tiroir des conseils) */
.fp-choix { border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 12px; padding: 10px 12px; margin: 4px 0 12px; display: grid; gap: 8px; }
.fp-choix legend { font-size: .85rem; font-weight: 600; padding: 0 6px; }
.fp-choix-ligne { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .88rem; line-height: 1.35; }
.fp-choix-ligne input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--cyan, #19b9ee); }
.fp-choix-ligne span { display: grid; gap: 2px; }
.fp-choix-ligne small { color: var(--ink-3); }

/* Numéro de version (pied de page) */
.footer-version { font-size: .78rem; color: var(--ink-3); }

/* ---------- Deux espaces : pharmacie / administration MAD ---------- */
.side-admin { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.side-admin .side-title { margin: 4px 16px 6px; }
.side-nav a[href="#admin-commandes"] { --nav-c: #ffae2e; }
.side-nav a.nav-apercu { --nav-c: #19b9ee; }
.side-nav a.nav-bdc { --nav-c: #3fd77a; }
/* Pages d'administration : seulement le menu d'administration, en-tête épuré */
html.vue-admin .sidebar > .side-nav:not(.side-admin),
html.vue-admin .sidebar > .side-sep,
html.vue-admin .sidebar > .side-families,
html.vue-admin .sidebar > .side-promo,
html.vue-admin .sidebar > [data-side],
html.vue-admin .main-nav,
html.vue-admin .search,
html.vue-admin .cart-btn { display: none !important; }
html.espace-admin .side-nav:not(.side-admin) .nav-deconnexion { display: none !important; }
/* Aperçu de l'espace pharmacie par l'équipe */
.bandeau-apercu { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 18px; padding: 10px 14px;
  border-radius: var(--r); border: 1px dashed var(--cyan); background: var(--glass); font-size: .92rem; }

/* Commandes reçues */
.cr-outils { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(140px, 1fr)) auto; gap: 10px 14px; align-items: end; padding: 14px; margin-bottom: 10px; }
.cr-outils .field { margin: 0; }
.cr-resume { margin: 0 0 10px; }
.cr-liste { display: grid; gap: 8px; }
.cr-cmd { padding: 0; overflow: hidden; }
.cr-cmd > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 96px minmax(160px, 1.6fr) minmax(120px, 1fr) 110px minmax(150px, auto); gap: 6px 14px; align-items: center; padding: 12px 14px; }
.cr-cmd > summary::-webkit-details-marker { display: none; }
.cr-cmd > summary:hover { background: var(--glass-2); }
.cr-cmd[open] > summary { border-bottom: 1px solid var(--line); }
.cr-date, .cr-qui { display: grid; gap: 1px; min-width: 0; }
.cr-date small, .cr-qui small { color: var(--ink-3); font-size: .78rem; }
.cr-qui b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-nb { color: var(--ink-2); font-size: .88rem; }
.cr-montant { text-align: right; font-weight: 600; }
.cr-statuts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.cr-statut { font-size: .72rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.cr-statut.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.cr-statut.ko { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.cr-detail { padding: 12px 14px 14px; display: grid; gap: 8px; }
.cr-coord, .cr-note { margin: 0; font-size: .9rem; }
@media (max-width: 860px) {
  .cr-outils { grid-template-columns: 1fr 1fr; }
  .cr-outils .cr-q, .cr-outils .st-actions { grid-column: 1 / -1; }
  .cr-cmd > summary { grid-template-columns: 1fr auto; }
  .cr-nb { grid-column: 1; }
  .cr-statuts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Produits du mois medipacbdc (tiroir du conseil, administration) ---------- */
.bdc-liste { display: grid; gap: 8px; margin-top: 8px; }
.bdc-produit { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); }
.bdc-photo { width: 56px; height: 56px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.bdc-photo img { max-width: 50px; max-height: 50px; object-fit: contain; }
.bdc-sans-photo { background: var(--glass-2); color: var(--ink-3); }
.bdc-sans-photo svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bdc-infos { display: grid; gap: 2px; min-width: 0; }
.bdc-infos b { font-size: .92rem; line-height: 1.3; }
.bdc-infos small { font-size: .78rem; color: var(--ink-2); }
.bdc-phrase { color: var(--ink-2); }
.bdc-epingle { color: var(--cyan-txt); font-weight: 600; }
.bdc-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bdc-actions strong { font-size: .92rem; }
.bdc-voir { font-size: .8rem; }
.bdc-absent { opacity: .75; border-style: dashed; }
.cv-bdc-pied { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: .86rem; }
.cv-bdc-lien { font-weight: 600; }
.fp-choix-sous { margin: 6px 0 0; font-size: .78rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.sug-outils { grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr); }
.sug-bloc { display: grid; gap: 8px; margin-bottom: 12px; }
.sug-bloc h2 { margin: 0; }
.sug-phrase { margin: -2px 0 6px 68px; }
.bdc-actions .btn + .btn { margin-top: 0; }
@media (max-width: 640px) {
  .bdc-produit { grid-template-columns: 48px minmax(0, 1fr); }
  .bdc-photo { width: 48px; height: 48px; }
  .bdc-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
  .sug-outils { grid-template-columns: 1fr; }
  .sug-phrase { margin-left: 0; }
}


/* En-têtes Catalogue et Conseils associés à la vente : photos à vagues claires à gauche, sous le texte */
.hero-vagues img { object-position: 100% 50%; }
[data-photo-entete="hero-bonsplans"] img { object-position: 100% 0%; } /* visages en haut de la photo */
:root:not([data-theme="light"]) .hero-vagues img { filter: brightness(.82) saturate(1.05); }
html[data-theme="light"]:not([data-ambiance]) :is(.page-hero, .page-head-photo) .hero-vagues { left: calc(-1 * max(24px, env(safe-area-inset-left, 0px))); width: auto; -webkit-mask-image: none; mask-image: none; }
html[data-theme="light"]:not([data-ambiance]) .hero-vagues::after { display: none; }
:root:not([data-theme="light"]):not([data-ambiance]) :is(.page-hero, .page-head-photo) .hero-vagues { left: calc(-1 * max(24px, env(safe-area-inset-left, 0px))); width: auto; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%); mask-image: linear-gradient(to right, transparent 0%, #000 46%); }
:root:not([data-theme="light"]):not([data-ambiance]) :is(.page-hero, .page-head-photo) .hero-vagues::after { display: none; }
@media (max-width: 980px) {
  :is(.page-hero, .page-head-photo) .hero-vagues { opacity: 1; }
  :root:not([data-theme="light"]) :is(.page-hero, .page-head-photo) .hero-vagues { width: 80%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 50%); mask-image: linear-gradient(to right, transparent 0%, #000 50%); }
}
@media (max-width: 640px) {
  :is(.page-hero, .page-head-photo) .hero-vagues, :root:not([data-theme="light"]) :is(.page-hero, .page-head-photo) .hero-vagues, :root:not([data-theme="light"]):not([data-ambiance]) :is(.page-hero, .page-head-photo) .hero-vagues { left: calc(-1 * max(24px, env(safe-area-inset-left, 0px))); width: auto; -webkit-mask-image: none; mask-image: none; }
  :is(.page-hero, .page-head-photo) .hero-vagues::after { display: none; }
  html[data-theme="light"] :is(.page-hero, .page-head-photo) .hero-vagues { opacity: .6; }
  :root:not([data-theme="light"]) :is(.page-hero, .page-head-photo) .hero-vagues { opacity: .5; }
}
/* Mode clair : voile doux sous le texte (le paragraphe déborde sur la photo en grand écran) */
html[data-theme="light"]:not([data-ambiance]) :is(.page-hero, .page-head-photo) .hero-vagues::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(240, 247, 250, .9) 0%, rgba(240, 247, 250, .75) 38%, rgba(240, 247, 250, 0) 66%); }
@media (max-width: 640px) {
  html[data-theme="light"] :is(.page-hero, .page-head-photo) .hero-vagues { opacity: .5; }
  html[data-theme="light"]:not([data-ambiance]) :is(.page-hero, .page-head-photo) .hero-vagues::before { background: rgba(240, 247, 250, .45); }
}
@media (min-width: 981px) { [data-view="kits"] .page-hero .lead-sm { max-width: 50ch; } }

/* « Prise en charge CPS et aide au choix » : textes structurés, lisibles au comptoir */
.info-block { padding: 16px 0; }
.info-block h4 { font-size: 1.05rem; }
.il { display: grid; gap: 10px; max-width: 78ch; }
.info-block .il-p, .il li, .il dd { color: var(--ink); font-size: .95rem; line-height: 1.6; }
.il-titre { margin: 6px 0 0; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan-txt); }
.il-liste, .il-etapes { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.il-etapes li::marker { font-weight: 700; color: var(--cyan-txt); }
.il-def { margin: 0; display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; }
.il-def dt { font-weight: 700; font-size: .92rem; }
.il-def dd { margin: 0; }
.info-block .il-alerte { margin: 0; padding: 10px 12px; border-left: 4px solid #f59e0b; border-radius: 8px; background: color-mix(in srgb, #f59e0b 12%, transparent); color: var(--ink); }
.info-block .il-exemple { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--glass-2); color: var(--ink); font-family: var(--f-mono); font-size: .88rem; }
.il-table td, .il-table th { font-size: .9rem; line-height: 1.45; vertical-align: top; }
/* Calculateur de l'échelle de Norton */
.norton { display: grid; gap: 12px; }
.norton-grille { display: grid; gap: 8px; }
.norton-ligne { display: grid; grid-template-columns: 150px repeat(4, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.norton-crit { font-weight: 700; font-size: .9rem; align-self: center; }
.norton-choix { border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); padding: 8px 10px; font: inherit; font-size: .86rem; text-align: left; cursor: pointer; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.norton-choix b { font-family: var(--f-mono); color: var(--ink-3); }
.norton-choix:hover { border-color: var(--cyan-txt); }
.norton-choix[aria-checked="true"] { border-color: var(--cyan-txt); background: color-mix(in srgb, var(--cyan) 16%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); }
.norton-choix[aria-checked="true"] b { color: var(--cyan-txt); }
.norton-options { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9rem; }
.norton-options label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.norton-resultat { padding: 12px 14px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--line); }
.norton-resultat p { margin: 0; }
.norton-score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 1.05rem; }
.norton-score b { font-size: 1.3rem; }
.norton-risque { padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.r-faible { background: color-mix(in srgb, #22c55e 18%, transparent); color: #15803d; }
.r-moyen { background: color-mix(in srgb, #eab308 20%, transparent); color: #a16207; }
.r-eleve { background: color-mix(in srgb, #f97316 20%, transparent); color: #c2410c; }
.r-tres-eleve { background: color-mix(in srgb, #ef4444 20%, transparent); color: #b91c1c; }
:root:not([data-theme="light"]) .r-faible { color: #4ade80; }
:root:not([data-theme="light"]) .r-moyen { color: #facc15; }
:root:not([data-theme="light"]) .r-eleve { color: #fb923c; }
:root:not([data-theme="light"]) .r-tres-eleve { color: #f87171; }
.norton-conseil { margin-top: 6px !important; font-size: .98rem; }
@media (max-width: 760px) {
  .norton-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .norton-crit { grid-column: 1 / -1; }
  .il-def { grid-template-columns: 1fr; gap: 2px; }
  .il-def dd { margin-bottom: 6px; }
}

/* En-têtes avec photo des autres pages (Bons plans, Nouveautés, Renouvellement, Mes commandes) */
.page-head-photo { position: relative; isolation: isolate; min-height: 210px; padding: 4px 0 26px; justify-content: center; }
.page-head-photo .hero-photo { top: -18px; bottom: 0; height: auto; width: 62%; }
@media (min-width: 981px) { .page-head-photo > p { max-width: 44ch; } }

/* Mode liste : la photo ne dicte plus la hauteur de la carte (photos hautes : sondes, flacons…).
   Elle tient dans 160 px de haut et le fond occupe toute la hauteur de la ligne. */
.products.is-list .card-visual-wrap { flex-shrink: 0; align-self: stretch; display: flex; }
.products.is-list .card-visual { height: auto; min-height: 170px; }
.products.is-list .card-visual > .photo, .products.is-list .card-visual > img { width: auto; height: auto; max-width: 82%; max-height: 160px; object-fit: contain; }
@media (max-width: 640px) {
  .products.is-list .card-visual-wrap { display: block; }
  .products.is-list .card-visual { min-height: 0; }
  .products.is-list .card-visual > .photo, .products.is-list .card-visual > img { max-height: 190px; }
}

/* ---------- Comparateur ---------- */
.cmp-btn { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(5, 10, 18, .6); color: #fff; font: 600 .7rem var(--f-sans); letter-spacing: .02em; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s, background .2s; }
.cmp-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.card:hover .cmp-btn, .card:focus-within .cmp-btn, .cmp-btn.is-on, .is-list .cmp-btn { opacity: 1; }
@media (hover: none) { .cmp-btn { opacity: 1; } }
.cmp-btn:hover { border-color: var(--cyan-txt); }
.cmp-btn.is-on { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.cmp-barre { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateX(-50%); z-index: 95; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 10px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow); max-width: calc(100% - 24px); animation: rise .3s cubic-bezier(.2, .8, .2, 1); }
.cmp-barre[hidden] { display: none; }
.cmp-barre-liste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cmp-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--line); font-size: .8rem; max-width: 220px; }
.cmp-item img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; flex-shrink: 0; }
.cmp-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-item button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; }
.cmp-item button:hover { color: var(--danger); }
.cmp-aide { align-self: center; }
.cmp-barre-actions { display: flex; gap: 12px; align-items: center; }
.cmp-wrap { overflow: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; }
.cmp-table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.cmp-table th, .cmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; min-width: 160px; color: var(--ink-2); }
.cmp-table thead th { vertical-align: bottom; background: var(--glass-2); }
.cmp-table tbody th { position: sticky; left: 0; background: var(--panel); min-width: 120px; max-width: 150px; font: 500 .68rem/1.35 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); z-index: 1; }
.cmp-table thead th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 120px; }
.cmp-table tr:nth-child(even) td { background: color-mix(in srgb, var(--glass-2) 50%, transparent); }
.cmp-prod { display: grid; gap: 6px; color: var(--ink); font-weight: 400; }
.cmp-photo { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: #fff; border-radius: 10px; overflow: hidden; }
.cmp-photo .photo, .cmp-photo .photo-ico { width: 86%; height: 86%; object-fit: contain; }
.cmp-prod .line-name { text-align: left; font-weight: 600; }
.cmp-meilleur b { color: var(--cyan-txt); }
.cmp-liste { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-pied td { border-bottom: 0; }

/* ---------- Guide des tailles ---------- */
.cat-guide { --ci-pouls: none; }
.guides-corps { display: grid; gap: 18px; }
.guide-bloc h4 { margin: 0 0 8px; font-size: 1rem; }
.guide { display: grid; gap: 12px; }
.guide-form { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.guide-form .field { min-width: 150px; flex: 0 1 200px; }
.guide-form .field input, .guide-form .field select { min-height: 40px; }
.guide-res { padding: 12px 14px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--line); display: grid; gap: 8px; }
.guide-res p { margin: 0; }
.guide-chiffre { font-size: 1.15rem; }
.guide-chiffre b { font-family: var(--f-mono); color: var(--cyan-txt); }
.guide-refs { display: grid; gap: 6px; }
.guide-ref { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.guide-ref.is-courant { border-color: var(--cyan-txt); box-shadow: inset 3px 0 0 var(--cyan); }
.guide-ref img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 8px; }
.guide-ref .line-name { text-align: left; font-weight: 600; font-size: .9rem; }
.guide-ref small { display: block; color: var(--ink-2); font-size: .8rem; }
.guide-ref .v-codes { margin: 2px 0 0; }
.guide-ref-prix { text-align: right; display: grid; gap: 4px; justify-items: end; }
.guide-ref-prix b { font-family: var(--f-mono); }
.guide-plus { font-size: .82rem; color: var(--ink-3); }
.guide-regle { font-size: .86rem; color: var(--ink-2); }
.guide-sous { margin: 4px 0 0; font: 600 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 480px) { .guide-ref { grid-template-columns: 44px minmax(0, 1fr); } .guide-ref-prix { grid-column: 1 / -1; justify-items: start; } }

/* ---------- Parc en location (puces NFC) ---------- */
.parc-racine { display: grid; gap: 18px; }
.parc-scan { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.parc-scan h2 { margin: 4px 0 8px; font-size: 1.35rem; letter-spacing: -0.02em; }
.parc-scan code { font-family: var(--f-mono); font-size: .82em; background: var(--glass-2); padding: 1px 6px; border-radius: 6px; }
.parc-scan-etat { margin: 10px 0 0; font: 600 .86rem var(--f-mono); color: var(--cyan-txt); letter-spacing: .02em; }
.parc-scan-actions { display: grid; gap: 14px; justify-items: stretch; }
.parc-btn-scan { position: relative; min-height: 56px; font-size: 1rem; overflow: visible; }
.parc-onde { position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(46, 230, 214, .55); opacity: 0; pointer-events: none; }
.parc-btn-scan.is-scan .parc-onde { animation: parc-onde 1.4s ease-out infinite; }
@keyframes parc-onde { 0% { transform: scale(.96); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
.parc-simul { display: grid; gap: 6px; font-size: .82rem; color: var(--ink-2); }
.parc-simul-ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.parc-simul-ligne select { flex: 1 1 200px; min-width: 0; min-height: 40px; }
.parc-inconnue h3 { margin: 0 0 6px; }
.parc-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
.parc-stats > div { padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); display: grid; gap: 2px; }
.parc-stats dt { font-size: .8rem; color: var(--ink-2); }
.parc-stats dd { margin: 0; font-size: 1.7rem; font-weight: 650; letter-spacing: -0.03em; }
.parc-stats dd small { font-size: .72rem; font-weight: 500; color: var(--danger-txt); letter-spacing: 0; }
.ps-dispo dd { color: var(--cyan-txt); } .ps-loue dd { color: var(--blue-txt); } .ps-retour dd { color: var(--warn-txt); } .ps-maint dd { color: var(--danger-txt); }
.parc-liste { display: grid; gap: 12px; }
.parc-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); border-left: 4px solid var(--cyan); }
.parc-item-loue { border-left-color: var(--blue, #5b8cff); } .parc-item-retour { border-left-color: var(--warn-txt); } .parc-item-maint { border-left-color: var(--danger-txt); }
.parc-img { width: 84px; height: 84px; border: 0; padding: 0; border-radius: 14px; background: var(--studio); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.parc-img-in, .parc-fiche-img { display: grid; place-items: center; width: 100%; height: 100%; }
.parc-img img, .parc-fiche-img img { width: 88%; height: 88%; object-fit: contain; }
.parc-corps { display: grid; gap: 4px; min-width: 0; }
.parc-corps h3 { margin: 0; font-size: 1.02rem; }
.parc-corps h3 small, .parc-fiche-tete .muted { font-weight: 400; color: var(--ink-2); font-size: .84rem; }
.parc-id { margin: 0; font-size: .74rem; letter-spacing: .08em; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.parc-puce { display: inline-block; font: 600 .66rem var(--f-mono); letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(46, 230, 214, .5); color: var(--cyan-txt); }
.parc-puce-off { border-color: var(--line-2); color: var(--ink-3); }
.parc-etat { display: inline-block; width: fit-content; font: 600 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(46, 230, 214, .12); color: var(--cyan-txt); }
.parc-etat-loue { background: rgba(91, 140, 255, .14); color: var(--blue-txt); }
.parc-etat-retour { background: rgba(255, 181, 71, .14); color: var(--warn-txt); }
.parc-etat-maint { background: rgba(255, 107, 107, .14); color: var(--danger-txt); }
.parc-loc { margin: 0; font-size: .86rem; color: var(--ink-2); } .parc-loc b { color: var(--ink); font-weight: 600; }
.parc-retard { color: var(--danger-txt); font-weight: 600; }
.parc-cote { display: grid; gap: 8px; }
.parc-fiche { display: grid; gap: 18px; }
.parc-retour-lien { padding-left: 0; }
.parc-fiche-tete { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; }
.parc-fiche-img { width: 150px; height: 150px; border-radius: 18px; background: var(--studio); }
.parc-fiche-tete h2 { margin: 2px 0 6px; font-size: 1.6rem; letter-spacing: -0.02em; }
.parc-fiche-badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0 0; }
.parc-fiche-outils { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.parc-form h3, .parc-encours h3, .parc-journal h3 { margin: 0 0 12px; font-size: 1.15rem; }
.parc-acc { border: 0; padding: 0; margin: 0; display: grid; gap: 0; }
.parc-acc legend { font-size: .9rem; color: var(--ink-2); padding: 0; margin-bottom: 4px; }
.parc-form-actions, .parc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.parc-actions { margin-top: 16px; }
.parc-sec { margin: 0; }
.parc-encours-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.parc-cr { padding: 8px 14px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.parc-cr b { font-size: 1.6rem; font-weight: 700; color: var(--cyan-txt); letter-spacing: -0.03em; }
.parc-cr-bientot b { color: var(--warn-txt); } .parc-cr-retard b { color: var(--danger-txt); }
.parc-fiche-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.parc-fiche-dl > div { display: grid; gap: 2px; }
.parc-fiche-dl dt { font-size: .78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.parc-fiche-dl dd { margin: 0; font-size: .95rem; }
.parc-journal ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.parc-journal li { display: grid; grid-template-columns: 24px 130px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: .9rem; padding: 8px 10px; border-radius: var(--r-sm); background: var(--glass); }
.pj-ico { color: var(--cyan-txt); text-align: center; } .pj-t { font-size: .76rem; color: var(--ink-3); }
.parc-pied { margin: 0; font-size: .84rem; }
.parc-pied .btn-link { padding: 0; min-height: 0; }
.parc-bon { display: none; }
@media (max-width: 900px) {
  .parc-scan { grid-template-columns: 1fr; }
  .parc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parc-stats .ps-occ { grid-column: span 2; }
}
@media (max-width: 640px) {
  .parc-item { grid-template-columns: 64px minmax(0, 1fr); }
  .parc-img { width: 64px; height: 64px; }
  .parc-cote { grid-column: 1 / -1; }
  .parc-fiche-tete { grid-template-columns: 1fr; }
  .parc-fiche-img { width: 120px; height: 120px; }
  .parc-fiche-dl { grid-template-columns: 1fr; }
  .parc-journal li { grid-template-columns: 20px minmax(0, 1fr); }
  .parc-journal li span:last-child { grid-column: 2; }
}
@media print {
  body.imprimer-bon * { visibility: hidden !important; }
  body.imprimer-bon .parc-bon, body.imprimer-bon .parc-bon * { visibility: visible !important; }
  body.imprimer-bon .parc-bon { display: block; position: fixed; inset: 0; width: 100%; padding: 18mm; background: #fff; color: #111; font: 12pt/1.5 Georgia, "Times New Roman", serif; }
  body.imprimer-bon .parc-bon header p { margin: 0; font-size: 10pt; color: #555; }
  body.imprimer-bon .parc-bon h2 { margin: 4mm 0 8mm; font-size: 18pt; }
  body.imprimer-bon .parc-bon table { width: 100%; border-collapse: collapse; margin-bottom: 8mm; }
  body.imprimer-bon .parc-bon th, body.imprimer-bon .parc-bon td { text-align: left; vertical-align: top; padding: 2.5mm 3mm; border-bottom: 1px solid #ccc; }
  body.imprimer-bon .parc-bon th { width: 38mm; color: #555; font-weight: 600; }
  body.imprimer-bon .parc-bon-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; margin-top: 18mm; }
  body.imprimer-bon .parc-bon-sign div { border-top: 1px solid #333; padding-top: 3mm; font-size: 10pt; color: #555; min-height: 25mm; }
}
@media (max-width: 380px) {
  /* Très petit écran : le choix clair/sombre reste disponible dans le menu (Thèmes) */
  .site-header #theme-btn { display: none; }
  .logo-nom { --h: 24px; }
}