/* ═══════════════════════════════════════════════════════════════════════════════════════
   NEON ADAPTIVE LIGHT — design system Million Partners (v4, 28/10/2026)
   Lumineux et chaleureux pour travailler des heures ; vivant grâce au néon, aux halos diffus et aux bulles 3D.
   - Fond blanc cassé, cartes translucides, ombres très douces.
   - Teal = signature et action principale ; or = décision importante ; néons (cyan, bleu, violet, rose) en halos
     de 5 à 12 % d'opacité, jamais derrière un texte sans surface.
   - Ambiance adaptative : --amb-a / --amb-b / --amb-c (couleurs enregistrées, donc animables) pilotent halos et bulles.
     La marketplace les fait suivre la carte active du carrousel ; Business OS les garde stables.
   - Bulles 3D : CSS pur (dégradés radiaux + reflet), animées par transform seulement, jamais cliquables,
     désactivées si l'appareil demande moins d'animations, réduites sur petit écran.
   Les noms de jetons historiques (--teal-*, --gold-*, --paper, --ink…) sont conservés : les vues les utilisent.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────── 1. Jetons ───────────── */
@property --amb-a { syntax: '<color>'; inherits: true; initial-value: #19B5C4; }
@property --amb-b { syntax: '<color>'; inherits: true; initial-value: #8B7BFF; }
@property --amb-c { syntax: '<color>'; inherits: true; initial-value: #F4A6C8; }
:root {
  /* Identité historique */
  --teal-50: #EEF7F7; --teal-100: #D6ECED; --teal-200: #A9D4D7; --teal-400: #2F8790; --teal-500: #0F5C63; --teal-600: #0C4F55; --teal-700: #0A3F45; --teal-900: #062A2E;
  --gold-100: #F7EED8; --gold-300: #E5CB8C; --gold-500: #C9A24B; --gold-600: #A9832F; --gold-700: #7A5C1C;
  --paper: #F7F6F2; --paper-2: #EFEDE6; --ink: #0D0D0D; --ink-2: #2A2E2D; --muted: #555B59; --faint: #6E7371;
  --line: rgba(13, 13, 13, .08); --line-strong: rgba(13, 13, 13, .15);
  /* Néons (halos, bordures fines, lueurs) */
  --neon: #19B5C4; --neon-2: #8B7BFF; --neon-3: #FF6FB5; --neon-blue: #4F8BFF;
  /* Ambiance adaptative (par défaut : signature teal → violet → rose) */
  --amb-a: #19B5C4; --amb-b: #8B7BFF; --amb-c: #F4A6C8;
  /* Couleurs fonctionnelles (contraste AA sur blanc) */
  --ok: #18704A; --ok-bg: #E4F4EB; --warn: #8A5A00; --warn-bg: #FBF1DC; --bad: #A3301F; --bad-bg: #FAE7E3; --info: #0C4F55; --info-bg: #E3F1F2;
  /* Marque d'une vitrine */
  --brand: var(--teal-500); --brand-accent: var(--gold-500); --brand-ink: #FFFFFF;
  /* Surfaces */
  --surface: rgba(255, 255, 255, .86); --surface-solid: #FFFFFF;
  --glass: rgba(255, 255, 255, .7); --glass-strong: rgba(255, 255, 255, .9); --glass-border: rgba(15, 92, 99, .12);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .95);
  /* Élévations très douces, teintées */
  --e1: 0 1px 2px rgba(10, 63, 69, .05), 0 1px 1px rgba(10, 63, 69, .03);
  --e2: 0 2px 6px rgba(10, 63, 69, .05), 0 14px 32px -14px rgba(10, 63, 69, .18);
  --e3: 0 8px 24px rgba(10, 63, 69, .08), 0 34px 70px -26px rgba(10, 63, 69, .26);
  /* Lueurs néon (bordure fine + halo) */
  --glow: 0 0 0 1px color-mix(in srgb, var(--amb-a) 38%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--amb-a) 45%, transparent);
  --glow-violet: 0 0 0 1px rgba(139, 123, 255, .35), 0 12px 34px -12px rgba(139, 123, 255, .5);
  /* Le Fil */
  --fil: linear-gradient(90deg, var(--teal-500), var(--neon) 40%, var(--neon-2) 75%, var(--gold-500));
  /* Rayons, espacements, typographie */
  --r-xs: 10px; --r-sm: 14px; --r: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif; --sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-xs: .78rem; --t-sm: .9rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: clamp(1.6rem, 4.2vw, 2.2rem); --t-3xl: clamp(2.2rem, 7.5vw, 3.9rem);
  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1); --fast: 140ms; --base: 260ms; --slow: 520ms; --amb-dur: 650ms;
  --maxw: 1180px; --gutter: 16px;
  color-scheme: light;
  transition: --amb-a var(--amb-dur) ease, --amb-b var(--amb-dur) ease, --amb-c var(--amb-dur) ease;
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

/* ───────────── 2. Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0; color: var(--ink); font: 400 var(--t-md)/1.55 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh;
  /* Halos diffus, de 9 à 12 % : ils colorent la lumière sans toucher au contraste (les textes sont posés sur des surfaces). */
  background-color: var(--paper);
  background-image:
    radial-gradient(900px 560px at 4% -8%, color-mix(in srgb, var(--amb-a) 12%, transparent), transparent 65%),
    radial-gradient(820px 560px at 100% -4%, color-mix(in srgb, var(--amb-b) 10%, transparent), transparent 62%),
    radial-gradient(760px 520px at 60% 108%, color-mix(in srgb, var(--amb-c) 9%, transparent), transparent 70%),
    linear-gradient(180deg, #FBFAF7, var(--paper) 420px);
  background-repeat: no-repeat; /* pas de fond « fixed » : il forcerait à repeindre toute la page à chaque défilement */
}
h1, h2, h3, h4 { margin: 0 0 .45em; line-height: 1.12; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
h1, h2, .display { font-family: var(--serif); }
h1 { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -.02em; }
h2 { font-size: var(--t-2xl); font-weight: 500; }
h3 { font-size: var(--t-lg); font-family: var(--sans); }
h4 { font-size: var(--t-md); font-family: var(--sans); }
p { margin: 0 0 1em; }
a { color: var(--teal-600); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
small, .small { font-size: var(--t-sm); }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .15em; font-weight: 600; color: var(--teal-600); }
.eyebrow--gold { color: var(--gold-700); }
.lead { font-size: var(--t-lg); color: var(--ink-2); max-width: 40rem; }
.neon-text { background: linear-gradient(90deg, var(--teal-500), var(--neon) 45%, var(--neon-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--r-pill); }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--neon) 22%, transparent); }
::selection { background: var(--teal-100); }
hr { border: 0; height: 1px; background: var(--line); margin: var(--s5) 0; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: rgba(13, 13, 13, .18) transparent; }

/* Le Fil : trait de lumière, signature visuelle */
.fil { height: 2px; border-radius: 2px; background: var(--fil); border: 0; margin: var(--s4) 0; width: 64px; }
.fil--wide { width: 100%; opacity: .55; }

/* ───────────── 3. Bulles 3D (signature) ───────────── */
/* Couche fixe derrière le contenu : aucune interaction, aucun texte masqué (z-index négatif, pointer-events: none). */
.bubbles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.bubble { --s: 180px; --c: var(--amb-a); position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, .55) 12%, transparent 30%),
    radial-gradient(circle at 70% 78%, color-mix(in srgb, var(--c) 30%, transparent), transparent 55%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 22%, #fff 10%) 0%, color-mix(in srgb, var(--c) 12%, transparent) 58%, transparent 72%);
  box-shadow: inset -10px -14px 30px color-mix(in srgb, var(--c) 14%, transparent), inset 8px 10px 22px rgba(255, 255, 255, .6);
  opacity: .75; will-change: transform; animation: float 22s ease-in-out infinite alternate; }
.bubble:nth-child(1) { --s: 260px; left: -70px; top: 12vh; --c: var(--amb-a); animation-duration: 26s; }
.bubble:nth-child(2) { --s: 150px; right: 8vw; top: 6vh; --c: var(--amb-b); animation-duration: 21s; animation-delay: -6s; }
.bubble:nth-child(3) { --s: 90px; right: 30vw; top: 48vh; --c: var(--amb-c); animation-duration: 18s; animation-delay: -3s; }
.bubble:nth-child(4) { --s: 210px; right: -60px; bottom: 6vh; --c: var(--amb-a); animation-duration: 28s; animation-delay: -12s; }
.bubble:nth-child(5) { --s: 70px; left: 22vw; bottom: 14vh; --c: var(--amb-b); animation-duration: 16s; animation-delay: -8s; }
@keyframes float { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14px, -22px, 0) scale(1.04); } 100% { transform: translate3d(-12px, 16px, 0) scale(.98); } }
@media (max-width: 640px) { .bubble:nth-child(n+4) { display: none; } .bubble { opacity: .6; } }
/* Bulle décorative locale (carrousel, cartes) */
.orb3d { --c: var(--amb-a); position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .5) 14%, transparent 32%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 55%, #fff), color-mix(in srgb, var(--c) 92%, #000) 70%);
  box-shadow: inset -12px -16px 28px color-mix(in srgb, var(--c) 60%, #000 25%), 0 18px 40px -16px color-mix(in srgb, var(--c) 70%, transparent);
  animation: float 14s ease-in-out infinite alternate; }

/* ───────────── 4. Mise en page ───────────── */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
/* Colonnes minmax(0, 1fr) : un contenu large (tableau, sélecteur) ne peut jamais élargir la page sur mobile. */
.stack { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); } .stack--sm { gap: var(--s2); } .stack--lg { gap: var(--s6); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.split { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .split { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start; } .sticky { position: sticky; top: 88px; } }
section { margin: var(--s7) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.section-head h2 { margin: 0; }

/* ───────────── 5. Boutons ───────────── */
.btn {
  --bg: linear-gradient(135deg, #16808A, var(--teal-500) 55%, var(--teal-600)); --fg: #fff; --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 22px;
  font: 600 var(--t-sm)/1.2 var(--sans); letter-spacing: .01em; color: var(--fg); background: var(--bg); border: 1px solid var(--bd);
  border-radius: var(--r-pill); cursor: pointer; text-decoration: none; white-space: nowrap; position: relative;
  box-shadow: 0 6px 18px -8px rgba(15, 92, 99, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform var(--fast) var(--ease), box-shadow var(--base) var(--ease), background var(--base) var(--ease), filter var(--base);
}
.btn:hover { transform: translateY(-1px); color: var(--fg); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--neon) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--neon) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn[aria-busy='true'] { opacity: .6; cursor: progress; transform: none; }
.btn--gold { --bg: linear-gradient(135deg, var(--gold-300), var(--gold-500) 55%, var(--gold-600)); --fg: #1A1205; box-shadow: 0 6px 18px -8px rgba(169, 131, 47, .6), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--gold:hover { box-shadow: 0 10px 26px -8px rgba(201, 162, 75, .7), 0 0 0 1px rgba(201, 162, 75, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--ghost { --bg: rgba(255, 255, 255, .7); --fg: var(--teal-700); --bd: var(--glass-border); box-shadow: none; backdrop-filter: blur(8px); }
.btn--ghost:hover { --bd: color-mix(in srgb, var(--neon) 50%, transparent); box-shadow: var(--glow); }
.btn--quiet { --bg: transparent; --fg: var(--teal-700); box-shadow: none; padding-inline: 12px; }
.btn--quiet:hover { background: var(--teal-50); box-shadow: none; }
.btn--danger { --bg: transparent; --fg: var(--bad); --bd: rgba(163, 48, 31, .35); box-shadow: none; }
/* Bouton de vitrine : couleur principale du partenaire */
.btn--brand { --bg: var(--brand); --fg: var(--brand-ink); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn--sm { min-height: 38px; padding: 7px 15px; font-size: var(--t-xs); }
.btn--lg { min-height: 56px; padding: 15px 30px; font-size: var(--t-md); }
.btn--block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); cursor: pointer; color: var(--ink-2); transition: box-shadow var(--base), border-color var(--base); }
.icon-btn:hover { border-color: color-mix(in srgb, var(--neon) 45%, transparent); box-shadow: var(--glow); }
.icon-btn svg { width: 20px; height: 20px; }
.kbd { font: 600 .7rem/1 var(--sans); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; color: var(--muted); background: #fff; }

/* ───────────── 6. Champs ───────────── */
.field { display: grid; gap: 6px; align-content: start; }
.field > span, .label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.field small, .hint { color: var(--muted); font-size: var(--t-xs); }
input, select, textarea {
  font: inherit; color: var(--ink); width: 100%; min-height: 46px; padding: 11px 14px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--fast), box-shadow var(--base);
}
input::placeholder, textarea::placeholder { color: #8A8F8C; }
textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: rgba(15, 92, 99, .35); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(15, 92, 99, .12), 0 8px 24px -12px color-mix(in srgb, var(--neon) 55%, transparent); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--teal-500); flex: none; }
input[type=color] { padding: 4px; height: 46px; cursor: pointer; }
input[aria-invalid='true'] { border-color: var(--bad); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; }
.check input { margin-top: 1px; }
/* Choix « carte » : radio / case à cocher présentés comme des tuiles (configurateurs, onboarding) */
.choices { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.choice { position: relative; display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: rgba(255, 255, 255, .88); cursor: pointer; transition: border-color var(--fast), box-shadow var(--base), transform var(--fast) var(--ease); }
.choice:hover { transform: translateY(-1px); border-color: var(--teal-400); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice b { font-weight: 600; font-size: var(--t-sm); }
.choice span { font-size: var(--t-xs); color: var(--muted); }
.choice:has(input:checked) { border-color: var(--teal-500); box-shadow: var(--glow); background: var(--teal-50); }
.choice:has(input:checked)::after { content: '✓'; position: absolute; top: 8px; right: 10px; font-size: .8rem; font-weight: 700; color: var(--teal-600); }
.choice:has(input:focus-visible) { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.segmented { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 4px; gap: 4px; background: var(--paper-2); border-radius: var(--r-pill); border: 1px solid var(--line); }
.segmented button, .segmented a { border: 0; background: transparent; padding: 9px 15px; min-height: 36px; border-radius: var(--r-pill); font: 600 var(--t-xs)/1 var(--sans); color: var(--muted); cursor: pointer; text-decoration: none; }
.segmented [aria-pressed='true'], .segmented .is-active { background: #fff; color: var(--teal-700); box-shadow: var(--e1); }

/* ───────────── 7. Surfaces : cartes lumineuses ───────────── */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); box-shadow: var(--e2), var(--highlight); }
.card--glass { background: var(--glass); border-color: var(--glass-border); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.card--interactive { transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base); text-decoration: none; color: inherit; display: block; }
.card--interactive:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--neon) 40%, transparent); box-shadow: var(--e3), var(--glow); }
.card--tight { padding: var(--s4); }
.card h3 { margin-bottom: 4px; }
.panel { position: relative; border-radius: var(--r-lg); padding: var(--s5); background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .8)); border: 1px solid var(--glass-border); box-shadow: var(--e2), var(--highlight); }
/* Halo : bord de lumière en dégradé */
.halo { position: relative; isolation: isolate; }
.halo::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--fil); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; pointer-events: none; }

/* Tuiles d'action : « Que voulez-vous faire ? » — une carte = une action, en mots simples */
.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { --tc: var(--teal-500); position: relative; overflow: hidden; display: grid; align-content: start; gap: 6px; min-height: 132px; padding: var(--s4); border-radius: var(--r); text-decoration: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit;
  background: radial-gradient(170px 120px at 100% 0%, color-mix(in srgb, var(--tc) 13%, transparent), transparent 72%), var(--surface); border: 1px solid var(--line); box-shadow: var(--e2), var(--highlight);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base); }
.tile:hover { transform: translateY(-3px); color: var(--ink); border-color: color-mix(in srgb, var(--tc) 45%, transparent); box-shadow: var(--e3), 0 0 0 1px color-mix(in srgb, var(--tc) 25%, transparent), 0 16px 36px -14px color-mix(in srgb, var(--tc) 55%, transparent); }
.tile:active { transform: scale(.98); }
.tile-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--tc); background: color-mix(in srgb, var(--tc) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 28%, transparent); }
.tile-icon svg { width: 22px; height: 22px; }
.tile b { font: 650 1rem/1.25 var(--sans); margin-top: 6px; }
.tile span { font-size: var(--t-xs); color: var(--muted); line-height: 1.4; }
.tile .tile-count { position: absolute; top: 14px; right: 14px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); display: grid; place-items: center; font: 700 .78rem/1 var(--sans); color: #fff; background: var(--tc); box-shadow: 0 4px 14px -4px var(--tc); }
.tile--violet { --tc: #6A55E8; } .tile--pink { --tc: #C93D78; } .tile--gold { --tc: var(--gold-600); } .tile--blue { --tc: #2F6FD6; } .tile--green { --tc: #1D8A57; }

/* Indicateurs */
.metrics { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metric { position: relative; overflow: hidden; display: block; padding: var(--s4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e2), var(--highlight); min-width: 0; text-decoration: none; color: inherit; transition: border-color var(--base), box-shadow var(--base), transform var(--base) var(--ease); }
.metric::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--neon), var(--teal-500)); }
a.metric:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--neon) 40%, transparent); box-shadow: var(--e3), var(--glow); color: inherit; }
.metric b { display: block; font: 700 clamp(1.45rem, 3.8vw, 1.95rem)/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--teal-700); letter-spacing: -.02em; overflow-wrap: anywhere; }
.metric span { font-size: var(--t-xs); color: var(--muted); }
.metric--gold::before { background: linear-gradient(180deg, var(--gold-300), var(--gold-600)); }
.metric--gold b { color: var(--gold-700); }
.metric--violet::before { background: linear-gradient(180deg, var(--neon-2), #6A55E8); }
.metric--violet b { color: #4E3CC7; }

/* Badges et pastilles */
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 .74rem/1 var(--sans); letter-spacing: .02em; padding: 6px 10px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill--ok, .pill.published, .pill.verified, .pill.attributed, .pill.won, .pill.accepted, .pill.paid, .pill.confirmed, .pill.completed, .pill.link_only, .pill.connected { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pill--warn, .pill.draft, .pill.proposed, .pill.new, .pill.sent, .pill.requested, .pill.partially_paid, .pill.issued, .pill.quoted, .pill.contacted { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill--bad, .pill.rejected, .pill.conflict, .pill.failed, .pill.lost, .pill.declined, .pill.cancelled, .pill.expired, .pill.no_show, .pill.rejected_self_referral { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.pill--info, .pill.invoiced, .pill.analysis { background: var(--info-bg); color: var(--info); border-color: transparent; }
.pill--demo { background: var(--gold-100); color: var(--gold-700); border-color: transparent; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink-2); text-decoration: none; font: inherit; font-size: var(--t-sm); cursor: pointer; transition: border-color var(--fast), background var(--fast), box-shadow var(--base); }
.chip:hover { border-color: color-mix(in srgb, var(--neon) 50%, transparent); box-shadow: var(--glow); color: var(--ink); }
.chip b { font-weight: 600; } .chip small { color: var(--faint); }
.chip.is-active { background: var(--teal-500); color: #fff; border-color: var(--teal-500); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ───────────── 8. Données ───────────── */
.list { display: grid; }
.item { display: flex; gap: var(--s3); align-items: center; padding: 14px 8px; border-bottom: 1px solid var(--line); min-width: 0; text-decoration: none; color: inherit; border-radius: var(--r-xs); transition: background var(--fast); }
.item:last-child { border-bottom: 0; }
a.item:hover { background: linear-gradient(90deg, var(--teal-50), transparent); color: inherit; }
.item h4 { margin: 0 0 2px; font-weight: 600; overflow-wrap: anywhere; }
.item .meta { font-size: var(--t-xs); color: var(--muted); }
.kv { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0; }
.kv div { padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .8); border: 1px solid var(--line); }
.kv dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.kv dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; }
.table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 11px 12px; background: var(--paper); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--teal-50); }
.table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--muted); }
.empty .display { font-size: var(--t-xl); color: var(--ink); margin-bottom: 6px; }
.skeleton { border-radius: var(--r-xs); background: linear-gradient(90deg, var(--paper-2), #fff, var(--paper-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; min-height: 18px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ───────────── 9. Retours ───────────── */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r-sm); font-size: var(--t-sm); background: var(--info-bg); color: var(--info); }
.alert--ok { background: var(--ok-bg); color: var(--ok); } .alert--warn { background: var(--warn-bg); color: var(--warn); } .alert--bad { background: var(--bad-bg); color: var(--bad); }
.alert p { margin: 0; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px); padding: 13px 20px; border-radius: var(--r-pill); background: rgba(13, 13, 13, .9); color: #fff; font-size: var(--t-sm); box-shadow: var(--e3); backdrop-filter: blur(8px); animation: rise var(--base) var(--ease); }
@media (min-width: 980px) { .toast { bottom: 28px; } }
dialog { border: 0; border-radius: var(--r-lg); padding: 0; max-width: min(560px, calc(100vw - 24px)); width: 100%; box-shadow: var(--e3), 0 0 0 1px var(--glass-border); background: #fff; color: var(--ink); }
dialog::backdrop { background: rgba(6, 42, 46, .3); backdrop-filter: blur(6px); }
dialog .dialog-body { padding: var(--s5); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: currentColor; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────── 10. Navigation ───────────── */
.demo-banner { position: relative; z-index: 31; text-align: center; font-size: var(--t-xs); padding: 7px 16px; background: var(--teal-900); color: #E9F2F2; letter-spacing: .02em; }
.demo-banner strong { color: var(--gold-300); }
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(250, 249, 246, .74); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line); }
.topbar .container { display: flex; align-items: center; gap: var(--s4); min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font: 500 1.35rem/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand em { font-style: normal; color: var(--gold-600); }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; flex: none; background: radial-gradient(circle at 32% 28%, #fff 0 10%, transparent 34%), conic-gradient(from 200deg, var(--teal-500), var(--neon), var(--neon-2), var(--gold-500), var(--teal-500)); box-shadow: inset -4px -5px 10px rgba(6, 42, 46, .35), 0 6px 16px -6px color-mix(in srgb, var(--neon) 70%, transparent); }
/* Indique dans quel espace on se trouve : Marketplace, Espace pro ou Administration */
.space-tag { font: 700 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-700); background: var(--teal-50); border: 1px solid var(--teal-100); padding: 6px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.space-tag--admin { color: var(--gold-700); background: var(--gold-100); border-color: rgba(201, 162, 75, .3); }
.navlinks { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.navlinks a { padding: 10px 14px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: var(--t-sm); white-space: nowrap; }
.navlinks a:hover { background: rgba(15, 92, 99, .07); }
.navlinks a.cta { color: #fff; background: var(--teal-500); box-shadow: 0 6px 18px -8px rgba(15, 92, 99, .6); }
@media (max-width: 480px) { .topbar .container { gap: var(--s2); } .topbar .brand { font-size: 1.1rem; gap: 7px; } .topbar .brand-mark { width: 24px; height: 24px; } .navlinks a { padding: 8px 10px; font-size: .82rem; } .topbar .space-tag { display: none; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-sm); color: var(--muted); margin: var(--s4) 0; }
.crumbs a { color: var(--muted); }
.footer { margin-top: var(--s8); padding: var(--s6) 0 var(--s7); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-sm); }
.footer .container { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }

/* ───────────── 11. Intention (barre signature, Million AI) ───────────── */
.intent { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 16px; border-radius: var(--r-pill); border: 2px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, .97), rgba(255, 255, 255, .97)) padding-box, conic-gradient(from var(--angle, 0deg), var(--teal-500), var(--neon), var(--neon-2), var(--neon-3), var(--gold-500), var(--teal-500)) border-box;
  box-shadow: var(--e3), 0 16px 50px -18px color-mix(in srgb, var(--amb-a) 60%, transparent); animation: aura 9s linear infinite; }
.intent:focus-within { box-shadow: var(--e3), 0 0 0 5px rgba(15, 92, 99, .1), 0 18px 56px -14px color-mix(in srgb, var(--amb-a) 70%, transparent); }
.intent input { border: 0; background: transparent; box-shadow: none; padding: 10px 0; font-size: var(--t-md); min-width: 0; }
.intent input:focus { box-shadow: none; }
.intent .spark { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .8) 0 10%, transparent 35%), linear-gradient(135deg, var(--neon), var(--neon-2)); box-shadow: inset -3px -4px 8px rgba(40, 20, 120, .25); font-size: 14px; }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes aura { to { --angle: 360deg; } }
.intent-hints { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }

/* ───────────── 12. Million AI ───────────── */
.ai-thread { display: grid; gap: var(--s4); }
.ai-msg { max-width: 760px; }
.ai-msg--user { justify-self: end; background: var(--teal-500); color: #fff; padding: 12px 16px; border-radius: 20px 20px 6px 20px; box-shadow: var(--e1); }
.ai-msg--ai { justify-self: start; width: 100%; }
.ai-who { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 700; color: #4E3CC7; margin-bottom: 6px; }
.ai-orb { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 32% 28%, #fff 0 12%, transparent 36%), radial-gradient(circle at 50% 50%, var(--neon), var(--neon-2) 70%, #4E3CC7); box-shadow: inset -3px -4px 8px rgba(40, 20, 120, .35), 0 4px 14px -3px rgba(139, 123, 255, .6); }
.ai-orb.is-thinking { animation: breathe 1.6s var(--ease) infinite; }
@keyframes breathe { 50% { transform: scale(1.14); box-shadow: inset -3px -4px 8px rgba(40, 20, 120, .35), 0 0 0 6px rgba(139, 123, 255, .16), 0 6px 22px rgba(25, 181, 196, .5); } }
.ai-card { border-radius: var(--r-lg); background: var(--glass-strong); border: 1px solid rgba(139, 123, 255, .18); box-shadow: var(--e2), var(--highlight); padding: var(--s5); }
.ai-card + .ai-card { margin-top: var(--s3); }
.ai-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s3); padding: 0; list-style: none; font-size: .72rem; color: var(--muted); }
.ai-steps li { padding: 4px 9px; border-radius: var(--r-pill); background: var(--paper-2); }
.ai-steps li.done { background: var(--teal-50); color: var(--teal-700); }
.ai-steps li.now { background: var(--gold-100); color: var(--gold-700); font-weight: 600; }
.diff { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: var(--t-sm); table-layout: fixed; }
.diff th { text-align: left; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
.diff td { vertical-align: top; padding: 0 6px; overflow-wrap: anywhere; }
.diff .before, .diff .after { display: block; padding: 9px 11px; border-radius: 12px; }
.diff .before { background: var(--bad-bg); color: #5E1C12; text-decoration: line-through; text-decoration-color: rgba(163, 48, 31, .45); }
.diff .after { background: var(--ok-bg); color: #0F3D26; }
@media (max-width: 600px) { .diff thead { display: none; } .diff tr { display: grid; gap: 4px; margin-bottom: 10px; } .diff td:first-child { font-weight: 600; font-size: .75rem; color: var(--muted); } }
.facts { display: grid; gap: 8px; }
.fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 13px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); }
.fact b { font-weight: 600; } .fact small { grid-column: 1 / -1; color: var(--faint); }
.fact--missing { background: transparent; border-style: dashed; }

/* Graphiques */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 500 11px var(--sans); fill: var(--muted); }
.chart .grid line { stroke: var(--line); }
.chart .bar-a { fill: var(--teal-500); } .chart .bar-b { fill: var(--gold-500); } .chart .bar-c { fill: var(--neon-2); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--t-xs); color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ───────────── 13. Marketplace ───────────── */
.hero { position: relative; padding: var(--s6) 0 var(--s4); text-align: left; }
.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: italic; color: var(--teal-600); }
.hero .lead { margin-top: var(--s3); }
.hero-intent { max-width: 700px; margin-top: var(--s5); }

/* Carrousel « à la une » : carte centrale dominante, voisines visibles, défilement manuel uniquement */
.showcase { margin: var(--s5) 0 var(--s6); position: relative; }
.showcase-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); flex-wrap: wrap; }
.showcase-head h2 { margin: 0; font-size: var(--t-xl); }
/* Largeur de carte fixée en unités de fenêtre (les % d'une grille se calculent sur sa zone de contenu, réduite par le rembourrage) ;
   le rembourrage centre la première et la dernière carte. */
.carousel { --slide: 80vw; display: grid; grid-auto-flow: column; grid-auto-columns: var(--slide); gap: var(--s4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: var(--s4) calc((100% - var(--slide)) / 2) var(--s6); scroll-padding-inline: calc((100% - var(--slide)) / 2);
  margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .carousel { --slide: min(60vw, 560px); } }
.slide { --c1: var(--teal-500); --c2: var(--gold-500); scroll-snap-align: center; scroll-snap-stop: always; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-height: 340px; border-radius: var(--r-xl);
  text-decoration: none; color: var(--ink); background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--e2);
  transition: transform var(--slow) var(--ease), opacity var(--slow) var(--ease), box-shadow var(--slow) var(--ease); }
.carousel.is-ready .slide { transform: scale(.92); opacity: .72; }
.carousel.is-ready .slide.is-active { transform: none; opacity: 1; box-shadow: var(--e2), 0 0 0 1px color-mix(in srgb, var(--c2) 30%, transparent), 0 16px 30px -18px color-mix(in srgb, var(--c2) 70%, transparent); }
.slide:hover { color: var(--ink); }
.slide-visual { position: relative; height: 170px; overflow: hidden; background: radial-gradient(260px 170px at 85% 0%, color-mix(in srgb, var(--c2) 45%, #fff), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--c1) 30%, #fff), color-mix(in srgb, var(--c2) 22%, #fff)); }
.slide-visual .orb3d { --c: var(--c2); width: 120px; height: 120px; right: 26px; top: 22px; }
.slide-visual .orb3d + .orb3d { --c: var(--c1); width: 50px; height: 50px; right: 160px; top: 16px; animation-delay: -5s; }
.slide-visual .monogram { position: absolute; left: var(--s5); bottom: 18px; }
.slide-body { display: grid; gap: 6px; align-content: start; padding: var(--s4) var(--s5) var(--s5); }
.slide-body h3 { margin: 0; font: 650 1.3rem/1.2 var(--sans); }
.slide-body p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.slide-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.slide-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--t-sm); color: #fff; background: var(--c1); padding: 10px 16px; border-radius: var(--r-pill); box-shadow: 0 8px 20px -10px var(--c1); }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: var(--line-strong); cursor: pointer; transition: width var(--base) var(--ease), background var(--base); }
.carousel-dots button[aria-current='true'] { width: 26px; border-radius: 5px; background: var(--teal-500); }
.carousel-arrow { display: none; }
@media (min-width: 760px) { .carousel-arrow { display: inline-grid; } }

.steps3 { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step3 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); }
.step3 i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem/1 var(--sans); color: #fff; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 10%, transparent 35%), linear-gradient(135deg, var(--teal-500), var(--neon)); }
.step3 b { display: block; margin-bottom: 2px; } .step3 span { font-size: var(--t-sm); color: var(--muted); }
.universes { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .universes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.universe { --u1: var(--teal-500); --u2: var(--neon); position: relative; overflow: hidden; display: grid; align-content: end; gap: 2px; min-height: 120px; padding: var(--s4); border-radius: var(--r); text-decoration: none; color: var(--ink);
  background: radial-gradient(200px 140px at 100% 0%, color-mix(in srgb, var(--u2) 26%, transparent), transparent 72%), var(--surface); border: 1px solid var(--line); box-shadow: var(--e2); transition: transform var(--base) var(--ease), box-shadow var(--base); }
.universe::after { content: ''; position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 10%, transparent 34%), radial-gradient(circle, color-mix(in srgb, var(--u2) 70%, #fff), var(--u1) 75%); box-shadow: inset -4px -5px 10px rgba(0, 0, 0, .18); }
.universe:hover { transform: translateY(-3px); color: var(--ink); box-shadow: var(--e3), 0 16px 36px -16px var(--u2); }
.universe b { font: 650 1.05rem/1.2 var(--sans); }
.universe span { font-size: var(--t-xs); color: var(--muted); }

.monogram { --c1: var(--brand); --c2: var(--brand-accent); flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font: 600 1.3rem/1 var(--serif); color: #fff; background: linear-gradient(145deg, var(--c1), color-mix(in srgb, var(--c1) 60%, var(--c2))); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), var(--e2); }
.monogram--lg { width: 80px; height: 80px; border-radius: 22px; font-size: 2rem; }
.partner-card { --c1: var(--teal-500); --c2: var(--gold-500); display: grid; gap: var(--s3); padding: var(--s5); border-radius: var(--r-lg); background: radial-gradient(260px 160px at 100% 0%, color-mix(in srgb, var(--c2) 14%, transparent), transparent 70%), var(--surface); border: 1px solid var(--line); box-shadow: var(--e2), var(--highlight); text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform var(--base) var(--ease), box-shadow var(--base); }
.partner-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.partner-card:hover { transform: translateY(-3px); color: inherit; box-shadow: var(--e3), 0 16px 36px -16px var(--c2); }
.partner-card .head { display: flex; gap: var(--s3); align-items: center; min-width: 0; }
.partner-card h3 { margin: 0; font: 650 1.1rem/1.2 var(--sans); overflow-wrap: anywhere; }
.partner-card p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.partner-card .foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-xs); color: var(--muted); gap: 8px; flex-wrap: wrap; }

.offer-card { position: relative; display: grid; gap: 8px; padding: var(--s5); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e2), var(--highlight); text-decoration: none; color: inherit; transition: transform var(--base) var(--ease), box-shadow var(--base), border-color var(--base); min-width: 0; }
.offer-card:hover { transform: translateY(-3px); color: inherit; border-color: color-mix(in srgb, var(--neon) 40%, transparent); box-shadow: var(--e3), var(--glow); }
.offer-card h3 { margin: 0; font: 650 1.1rem/1.25 var(--sans); overflow-wrap: anywhere; padding-right: 36px; }
.offer-card p { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.offer-card .price { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.offer-card .price b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.offer-card .by { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--muted); }
.offer-card .by .journey-tag { grid-column: 1 / -1; justify-self: start; margin: 4px 0 0 !important; }
.offer-card .go { position: absolute; top: var(--s4); right: var(--s4); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--teal-600); border: 1px solid var(--teal-100); background: #fff; transition: transform var(--base) var(--ease), background var(--base); }
.offer-card:hover .go { transform: translateX(3px); background: var(--teal-50); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c1, var(--teal-500)); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); flex: none; }
.journey-tag { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-700); padding: 4px 8px; border-radius: var(--r-pill); background: var(--gold-100); }

.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); counter-reset: pick; }
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s4); border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--e1); animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.pick-rank { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--t-sm)/1 var(--sans); color: #fff; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 10%, transparent 35%), linear-gradient(135deg, var(--teal-500), var(--neon)); }
.pick h3 { margin: 0 0 2px; font: 650 1.1rem/1.25 var(--sans); }
.pick h3 a { color: var(--ink); text-decoration: none; } .pick h3 a:hover { color: var(--teal-600); }

/* Vitrine : thèmes par métier */
.store-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--s7) var(--s5) var(--s6); margin-top: var(--s4); color: var(--brand-ink); background: radial-gradient(900px 400px at 90% -20%, color-mix(in srgb, var(--brand-accent) 55%, transparent), transparent 60%), linear-gradient(160deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #000)); box-shadow: var(--e3); }
.store-hero h1 { color: inherit; max-width: 18ch; }
.store-hero .lead { color: inherit; opacity: .92; }
.store-hero .eyebrow { color: var(--brand-accent); }
.store-hero .btn--ghost { --fg: #fff; --bg: rgba(255, 255, 255, .12); --bd: rgba(255, 255, 255, .35); }
.store-hero .monogram { --c1: rgba(255, 255, 255, .18); --c2: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .4); }
[data-theme='atelier'] .store-hero { border-radius: 8px; background: radial-gradient(700px 300px at 10% 120%, color-mix(in srgb, var(--brand-accent) 40%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--brand) 85%, #000), var(--brand)); }
[data-theme='atelier'] .store-hero h1 { font-style: italic; letter-spacing: -.01em; }
[data-theme='studio'] .store-hero { background: linear-gradient(120deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 60%, var(--brand-accent)) 120%); }
[data-theme='studio'] .store-hero h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; }
[data-theme='garage'] .store-hero { border-radius: 12px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 14px, transparent 14px 28px), linear-gradient(160deg, #1B1F22, var(--brand)); }
[data-theme='garage'] .store-hero h1 { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.8rem, 6vw, 3rem); }
[data-theme='salon'] .store-hero { border-radius: 40px 40px 40px 10px; background: radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--brand-accent) 60%, transparent), transparent 70%), linear-gradient(200deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #000)); }
[data-theme='editorial'] .store-hero { background: radial-gradient(700px 360px at 100% -10%, color-mix(in srgb, var(--brand-accent) 20%, transparent), transparent 62%), #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--e2); }
[data-theme='editorial'] .store-hero .lead { color: var(--ink-2); }
[data-theme='editorial'] .store-hero .btn--ghost { --fg: var(--ink); --bg: transparent; --bd: var(--line-strong); }
.featured { border-radius: var(--r-lg); padding: var(--s5); background: radial-gradient(400px 200px at 100% 0%, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent 70%), #fff; border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); box-shadow: var(--e2); }

/* Page d'offre */
.offer-head h1 { font-size: clamp(2rem, 6vw, 3.2rem); max-width: 18ch; }
.action-panel { display: grid; gap: var(--s4); }
.action-panel .total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.action-panel .total b { font: 700 1.7rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--teal-700); }
.step { display: grid; gap: var(--s2); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step-title { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.step-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .74rem; font-weight: 700; background: var(--teal-50); color: var(--teal-700); flex: none; }
.slots { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.slot { display: grid; place-items: center; min-height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: #fff; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-sm); position: relative; }
.slot input { position: absolute; opacity: 0; }
.slot:has(input:checked) { background: var(--teal-500); color: #fff; border-color: var(--teal-500); box-shadow: var(--glow); }
.slot:has(input:focus-visible) { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.prose { color: var(--ink-2); max-width: 66ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.success-mark { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 10%, transparent 36%), radial-gradient(circle, var(--neon), var(--teal-600)); box-shadow: 0 0 0 6px var(--teal-50), var(--e2); }

/* ───────────── 14. Business OS ───────────── */
.os { min-height: 100vh; }
.os-top { position: sticky; top: 0; z-index: 30; background: rgba(250, 249, 246, .8); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line); }
.os-top-inner { display: flex; align-items: center; gap: var(--s3); min-height: 62px; padding: 0 var(--gutter); }
@media (max-width: 560px) { .os-top .brand-text { display: none; } .os-top-inner { gap: var(--s2); } .os-top .space-tag { display: none; } }
.pill--wrap { white-space: normal; border-radius: 12px; line-height: 1.3; }
.os-top select { width: auto; min-width: 0; flex: 0 1 auto; max-width: 46vw; min-height: 40px; padding: 6px 30px 6px 12px; border-radius: var(--r-pill); font-size: var(--t-sm); background-color: rgba(255, 255, 255, .85); }
.os-intent { flex: 1; max-width: 560px; margin-left: auto; display: none; }
@media (min-width: 900px) { .os-intent { display: block; } }
.os-intent button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 8px 6px 14px; border-radius: var(--r-pill); border: 1px solid rgba(139, 123, 255, .25); background: rgba(255, 255, 255, .85); color: var(--muted); font: 500 var(--t-sm)/1 var(--sans); cursor: pointer; box-shadow: var(--e1); text-align: left; transition: border-color var(--base), box-shadow var(--base); }
.os-intent button:hover { border-color: color-mix(in srgb, var(--neon) 50%, transparent); box-shadow: var(--glow); }
.os-intent .kbd { margin-left: auto; }
.os-ai-mobile { margin-left: auto; }
@media (min-width: 900px) { .os-ai-mobile { display: none; } }
.os-body { display: flex; }
/* Mobile : barre d'onglets en bas, 5 entrées au plus (les autres dans « Menu ») */
.rail { position: fixed; bottom: 0; left: 0; right: 0; z-index: 29; display: flex; background: rgba(255, 255, 255, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); padding: 4px 4px env(safe-area-inset-bottom); }
.rail a { flex: 1 1 0; min-width: 0; display: none; justify-items: center; gap: 3px; padding: 8px 2px 9px; text-decoration: none; color: var(--muted); font-size: .7rem; font-weight: 600; border-radius: 14px; position: relative; }
.rail a.is-primary, .rail a.rail-menu { display: grid; }
.rail a svg { width: 22px; height: 22px; }
.rail a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail a.is-active { color: var(--teal-600); }
.rail a.is-active::before { content: ''; position: absolute; top: -5px; left: 30%; right: 30%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--teal-500), var(--neon)); }
.rail .rail-group { display: none; }
.os-main { flex: 1; min-width: 0; padding: var(--s5) var(--gutter) 120px; max-width: 1100px; margin: 0 auto; width: 100%; animation: rise var(--base) var(--ease); }
@media (min-width: 980px) {
  .rail { position: sticky; top: 62px; align-self: flex-start; flex-direction: column; width: 244px; height: calc(100vh - 62px); border-top: 0; border-right: 1px solid var(--line); background: transparent; backdrop-filter: none; padding: var(--s4) var(--s3); overflow-y: auto; gap: 2px; }
  .rail a, .rail a.is-primary { display: grid; flex: none; grid-template-columns: 22px 1fr; justify-items: start; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
  .rail a.rail-menu { display: none; }
  .rail a svg { width: 20px; height: 20px; }
  .rail a:hover { background: rgba(15, 92, 99, .06); }
  .rail a.is-active { background: #fff; color: var(--teal-700); box-shadow: var(--e1); font-weight: 600; }
  .rail a.is-active::before { top: 10px; bottom: 10px; left: -12px; right: auto; width: 3px; height: auto; }
  .rail .rail-group { display: block; margin: var(--s4) 12px 4px; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
  .os-main { padding-bottom: var(--s7); }
}
/* « Où suis-je ? » : fil discret au-dessus de chaque page */
.where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--s3); font-size: var(--t-xs); color: var(--muted); }
.where a { color: var(--muted); text-decoration: none; } .where a:hover { color: var(--teal-600); }
.where b { color: var(--teal-700); font-weight: 600; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.page-head h1 { font-size: var(--t-2xl); margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.greeting { font: 500 clamp(1.9rem, 5.4vw, 2.8rem)/1.1 var(--serif); letter-spacing: -.02em; margin: 0; }
.greeting em { font-style: italic; color: var(--teal-600); }
.block-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 var(--s3); }
.block-title h2 { margin: 0; font: 650 1.05rem/1.2 var(--sans); letter-spacing: .01em; }
.block-title h2::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; vertical-align: 1px; background: radial-gradient(circle at 32% 28%, #fff 0 15%, transparent 40%), linear-gradient(135deg, var(--neon), var(--teal-500)); }
.prio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s4); border-radius: var(--r); background: var(--surface); border: 1px solid rgba(201, 162, 75, .28); box-shadow: var(--e2); }
.prio > :last-child { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) { .prio { grid-template-columns: auto minmax(0, 1fr) auto; } .prio > :last-child { grid-column: auto; justify-self: end; } }
.prio-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 5px var(--gold-100); }
.prio h4 { margin: 0; } .prio p { margin: 2px 0 0; font-size: var(--t-xs); color: var(--muted); }
.timeline { display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s3); padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.tl-item:last-child { border-bottom: 0; }
.tl-time { font: 700 var(--t-sm)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--teal-700); }
.login-wrap { min-height: calc(100vh - 34px); display: grid; place-items: center; padding: var(--s6) var(--gutter); }
.login-card { width: 100%; max-width: 480px; }
.cmdk { position: fixed; inset: 0; z-index: 70; display: grid; place-items: start center; padding: 12vh 16px 16px; background: rgba(6, 42, 46, .26); backdrop-filter: blur(6px); animation: fade var(--base) var(--ease); }
.cmdk-box { width: 100%; max-width: 660px; }
.cmdk-list { margin-top: var(--s3); display: grid; gap: 4px; padding: 8px; border-radius: var(--r); background: rgba(255, 255, 255, .96); box-shadow: var(--e3); }
.cmdk-list button { text-align: left; border: 0; background: transparent; padding: 12px 14px; border-radius: var(--r-xs); cursor: pointer; font: 500 var(--t-sm)/1.3 var(--sans); color: var(--ink-2); }
.cmdk-list button:hover, .cmdk-list button:focus { background: var(--teal-50); outline: none; }
.menu-group { margin-top: var(--s5); }
.menu-group > h2 { font: 700 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 0 var(--s3); }
.composer { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); margin-top: var(--s5); z-index: 5; padding: var(--s4) 0 var(--s2); background: linear-gradient(180deg, transparent, var(--paper) 40%); }
@media (min-width: 980px) { .composer { bottom: 0; padding-bottom: var(--s4); } }
/* Modification rapide d'une offre par une phrase */
.quick-edit { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r); background: linear-gradient(135deg, rgba(25, 181, 196, .08), rgba(139, 123, 255, .08)); border: 1px solid rgba(139, 123, 255, .2); }
.quick-edit .intent { box-shadow: var(--e2); }
/* Bouton « Votre avis » (pilotes) */
.feedback-btn { position: fixed; right: 16px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 28; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: var(--r-pill); border: 1px solid var(--glass-border); background: rgba(255, 255, 255, .94); color: var(--teal-700); font: 600 var(--t-xs)/1 var(--sans); cursor: pointer; box-shadow: var(--e2); }
.feedback-btn:hover { box-shadow: var(--e2), var(--glow); }
@media (min-width: 980px) { .feedback-btn { bottom: 20px; } }
/* Onboarding */
.ob-steps { display: flex; gap: 6px; margin-bottom: var(--s4); }
.ob-steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--line-strong); }
.ob-steps span.on { background: linear-gradient(90deg, var(--teal-500), var(--neon)); }
.ob-offer { display: grid; grid-template-columns: auto minmax(0, 1fr) 104px; gap: var(--s3); align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.ob-offer input:not([type=checkbox]) { min-height: 40px; padding: 8px 10px; }
.ob-offer small { display: block; color: var(--muted); font-size: var(--t-xs); }
.done-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.done-list li { display: flex; gap: 10px; align-items: flex-start; }
.done-list li::before { content: '✓'; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--teal-500), var(--neon)); }
.done-list li.todo::before { content: '→'; background: var(--gold-500); }

/* ───────────── 15. Mouvement ───────────── */
/* Apparition par le seul mouvement : le contenu reste visible même si l'animation ne joue pas. */
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.rise { animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  :root { transition: none; }
  .bubble, .orb3d { animation: none; }
}
/* Appareils sans flou : surfaces pleines, même lisibilité */
@supports not (backdrop-filter: blur(1px)) { .card--glass, .topbar, .os-top, .intent, .rail { background: #fff; } }
/* Écrans lents (encre électronique, économie d'énergie déclarée) : pas de bulles */
@media (update: slow) { .bubbles { display: none; } }
@media print { .topbar, .os-top, .rail, .demo-banner, .btn, .bubbles, .feedback-btn { display: none !important; } body { background: #fff; } }

/* Appareil modeste détecté par ambient.js : pas de bulles animées */
.lite .bubbles { display: none; }
.lite .orb3d { animation: none; }

/* Téléphone : le carrousel arrive plus tôt à l'ecran (accroche plus courte, deux suggestions) */
@media (max-width: 640px) { .hero { padding-top: var(--s4); } .hero .lead { font-size: 1rem; } .intent-hints .chip:nth-child(n+3) { display: none; } .showcase { margin-top: var(--s3); } }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   16. MARKETPLACE FUTURISTE (31/10/2026) — univers sur mesure, profondeur, transitions
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* Transitions entre pages (navigateurs récents) : le nom du partenaire glisse de la carte vers sa page. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@media (max-width: 520px) { .navlinks .nav-opt { display: none; } }

/* Aurore derrière l'accroche : lumière lente aux couleurs de l'ambiance, jamais sous un texte sans surface */
.hero { isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -1; top: -60px; right: -10%; width: min(560px, 80vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: .28;
  background: conic-gradient(from var(--angle, 0deg), var(--amb-a), var(--amb-b), var(--amb-c), var(--amb-a)); animation: aura 24s linear infinite; }
.hero h1 em { background: linear-gradient(90deg, var(--teal-600), color-mix(in srgb, var(--amb-a) 70%, #0A3F45) 55%, color-mix(in srgb, var(--amb-b) 70%, #2A1E66)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Carte « univers » du carrousel : une fenêtre sur l'identité du partenaire (ses couleurs, sa police de titre) */
.slide--universe { background: var(--k-surface); color: var(--k-ink); border-color: color-mix(in srgb, var(--k-ink) 12%, transparent); border-radius: max(var(--k-radius), 14px); }
.slide--universe:hover { color: var(--k-ink); }
.slide--universe .slide-body p, .slide--universe .muted { color: var(--k-muted); }
.slide--universe .slide-body h3 { font: 600 1.45rem/1.15 var(--k-display); color: var(--k-ink); }
.slide--universe .eyebrow { color: var(--k-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.slide--universe .slide-go { background: var(--k-primary); color: var(--k-on); box-shadow: 0 10px 24px -12px var(--k-glow); }
.slide--universe .pill--demo { background: color-mix(in srgb, var(--k-ink) 10%, transparent); color: var(--k-ink); }
.k-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font: 700 .64rem/1 var(--sans); letter-spacing: .12em; color: var(--k-on); background: var(--k-primary); }
.slide-visual--universe { height: 190px; background: radial-gradient(320px 200px at 85% 10%, color-mix(in srgb, var(--k-glow) 45%, transparent), transparent 70%), radial-gradient(260px 200px at 0% 100%, color-mix(in srgb, var(--k-accent) 30%, transparent), transparent 70%), var(--k-bg); }
.k-grid { position: absolute; inset: 0; opacity: .5; background: linear-gradient(color-mix(in srgb, var(--k-ink) 8%, transparent) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, color-mix(in srgb, var(--k-ink) 8%, transparent) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask: radial-gradient(circle at 70% 30%, #000, transparent 75%); mask: radial-gradient(circle at 70% 30%, #000, transparent 75%); }
.k-orb { position: absolute; right: 24px; top: 20px; width: 110px; aspect-ratio: 1; border-radius: 50%; animation: float 14s ease-in-out infinite alternate;
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .9) 0 8%, transparent 32%), radial-gradient(circle, color-mix(in srgb, var(--k-glow) 80%, #fff), color-mix(in srgb, var(--k-primary) 80%, var(--k-bg)) 78%);
  box-shadow: 0 0 50px -6px var(--k-glow), inset -10px -14px 26px color-mix(in srgb, var(--k-bg) 50%, transparent); }
.k-orb--2 { width: 42px; right: 150px; top: 26px; animation-delay: -6s; }
.k-name { position: absolute; left: var(--s5); bottom: 18px; right: 40%; font: 500 clamp(1.15rem, 4vw, 1.6rem)/1.1 var(--k-display); color: var(--k-ink); letter-spacing: .01em; text-shadow: 0 2px 20px var(--k-bg); overflow-wrap: anywhere; }
.carousel.is-ready .slide--universe.is-active { box-shadow: var(--e3), 0 0 0 1px color-mix(in srgb, var(--k-glow) 45%, transparent), 0 24px 50px -24px var(--k-glow); }

/* Profondeur : inclinaison douce sous le pointeur (ambient.js), reflet lumineux ; rien n'en dépend pour lire ou cliquer */
.offer-card, .bespoke { --rx: 0deg; --ry: 0deg; }
.offer-card.is-tilting, .bespoke.is-tilting { transform: perspective(900px) rotateX(var(--ry)) rotateY(var(--rx)) translateY(-3px); transition: transform 80ms linear; }
.offer-card::after, .slide::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--base);
  background: radial-gradient(240px 180px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 70%); mix-blend-mode: soft-light; }
.offer-card:hover::after, .slide.is-active:hover::after { opacity: 1; }
.slide.is-active .slide-visual > * { translate: var(--px, 0) var(--py, 0); transition: translate .4s var(--ease); }

/* « Votre univers, conçu sur mesure » : bandeau verre pour les professionnels */
.bespoke { position: relative; overflow: hidden; display: grid; gap: var(--s5); padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); grid-template-columns: minmax(0, 1fr);
  background: radial-gradient(500px 300px at 100% 0%, color-mix(in srgb, var(--amb-b) 18%, transparent), transparent 70%), radial-gradient(400px 260px at 0% 100%, color-mix(in srgb, var(--amb-a) 16%, transparent), transparent 70%), var(--glass-strong);
  border: 1px solid var(--glass-border); box-shadow: var(--e3), var(--highlight); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
@media (min-width: 960px) { .bespoke { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; } }
.bespoke h2 em { font-style: italic; color: var(--teal-600); }
.bespoke p { color: var(--ink-2); max-width: 54ch; }
.bespoke-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bespoke-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .72); border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.bespoke-steps i { font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .74rem/1 var(--sans); color: #fff; background: linear-gradient(135deg, var(--teal-500), #6A55E8); }

/* « Créer ma page » */
.req-hero h1 { max-width: 18ch; }
.req-wrap { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s7); }
@media (min-width: 980px) { .req-wrap { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; } .req-wrap > aside { position: sticky; top: 88px; } }
.req-form { display: grid; gap: var(--s5); }
.req-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s3); min-width: 0; }
.req-form legend { display: flex; align-items: center; gap: 10px; font: 600 1.25rem/1.2 var(--serif); margin-bottom: var(--s3); padding: 0; }
.req-form legend i { font: 700 .8rem/1 var(--sans); font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--teal-500), var(--teal-700)); }
.choices--wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.req-done h1 { font-size: var(--t-2xl); margin: 0; }
.req-steps { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 0; }
.req-steps li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.req-steps li:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px; background: var(--line-strong); }
.req-steps i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 .78rem/1 var(--sans); color: var(--muted); background: var(--paper-2); border: 1px solid var(--line-strong); }
.req-steps b { display: block; font-size: var(--t-sm); }
.req-steps span { font-size: var(--t-xs); color: var(--muted); }
.req-steps .is-done i { background: var(--teal-500); color: #fff; border-color: var(--teal-500); }
.req-steps .is-now i { background: var(--gold-500); color: #1A1205; border-color: var(--gold-500); box-shadow: 0 0 0 5px var(--gold-100); }

/* Parcours commun (offre, demande, réservation) dans l'identité d'un univers sur mesure : les jetons validés
   (--u-*, contraste garanti) remplacent ceux de la marketplace ; les composants restent les mêmes. */
body[data-universe] {
  --paper: var(--u-bg); --paper-2: color-mix(in srgb, var(--u-ink) 6%, var(--u-bg)); --ink: var(--u-ink); --ink-2: var(--u-ink); --muted: var(--u-muted); --faint: var(--u-muted);
  --line: color-mix(in srgb, var(--u-ink) 12%, transparent); --line-strong: color-mix(in srgb, var(--u-ink) 24%, transparent);
  --surface: color-mix(in srgb, var(--u-surface) 92%, transparent); --surface-solid: var(--u-surface); --glass: color-mix(in srgb, var(--u-surface) 80%, transparent); --glass-strong: color-mix(in srgb, var(--u-surface) 94%, transparent);
  --glass-border: color-mix(in srgb, var(--u-ink) 12%, transparent); --highlight: inset 0 1px 0 color-mix(in srgb, var(--u-ink) 6%, transparent);
  --teal-50: color-mix(in srgb, var(--u-primary) 10%, var(--u-surface)); --teal-100: color-mix(in srgb, var(--u-primary) 22%, var(--u-surface));
  --teal-500: var(--u-primary); --teal-600: var(--u-primary-text); --teal-700: var(--u-primary-text); --gold-700: var(--u-accent-text); --gold-100: color-mix(in srgb, var(--u-accent) 18%, var(--u-surface));
  --amb-a: var(--u-glow); --amb-b: var(--u-accent); --amb-c: var(--u-primary); --neon: var(--u-glow); --serif: var(--u-display); --sans: var(--u-text);
  background-color: var(--u-bg); background-image: radial-gradient(900px 560px at 4% -8%, color-mix(in srgb, var(--u-glow) 14%, transparent), transparent 65%), radial-gradient(820px 560px at 100% -4%, color-mix(in srgb, var(--u-accent) 10%, transparent), transparent 62%);
  color: var(--u-ink); font-family: var(--u-text);
}
body[data-universe] .topbar { background: color-mix(in srgb, var(--u-bg) 78%, transparent); }
body[data-universe] .brand, body[data-universe] .navlinks a { color: var(--u-ink); }
body[data-universe] .navlinks a.cta { background: var(--u-primary); color: var(--u-on-primary); }
body[data-universe] .space-tag { color: var(--u-ink); background: color-mix(in srgb, var(--u-ink) 8%, transparent); border-color: var(--line); }
body[data-universe] .btn { --bg: var(--u-primary); --fg: var(--u-on-primary); box-shadow: 0 8px 22px -10px var(--u-glow); }
body[data-universe] .btn--gold { --bg: var(--u-accent); --fg: var(--u-on-accent); }
body[data-universe] .btn--ghost { --bg: transparent; --fg: var(--u-ink); --bd: var(--line-strong); }
body[data-universe] .panel, body[data-universe] .kv div, body[data-universe] .choice, body[data-universe] .slot, body[data-universe] .card { background: var(--u-surface); }
body[data-universe] input, body[data-universe] select, body[data-universe] textarea { background: color-mix(in srgb, var(--u-surface) 85%, var(--u-bg)); color: var(--u-ink); }
body[data-universe] .choice:has(input:checked) { background: var(--teal-50); }
body[data-universe] .slot:has(input:checked) { background: var(--u-primary); color: var(--u-on-primary); }
body[data-universe] .action-panel .total b { color: var(--u-primary-text); }
body[data-universe] .demo-banner { background: var(--u-ink); color: var(--u-bg); }
body[data-universe] .demo-banner strong { color: inherit; }
body[data-universe] .bubbles { display: none; }
body[data-universe] .offer-card .go { background: var(--u-surface); border-color: var(--line); color: var(--u-ink); }
body[data-universe] .offer-head h1 { font-family: var(--u-display); }
body[data-universe] .alert { background: color-mix(in srgb, var(--u-accent) 14%, var(--u-surface)); color: var(--u-ink); }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   MARKETPLACE « CENTRE COMMERCIAL » (02/11/2026) — entrée (recherche, rayons, bannière), rayons illustrés, rangées de
   cartes en carrousel, vitrines. Densité : 5 cartes par rangée sur grand écran, 4 puis 3, et une carte et demie sur
   téléphone (la suivante dépasse pour inviter à glisser). Espaces mesurés dans une rangée, plus marqués entre les rayons.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.container--wide { max-width: 1400px; }
.mall-top { display: grid; gap: 10px; margin: var(--s4) 0 var(--s4); }
.mall-search { display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: var(--r-pill); background: #fff; border: 2px solid color-mix(in srgb, var(--teal-500) 28%, transparent); box-shadow: var(--e2); transition: border-color var(--fast), box-shadow var(--base); }
.mall-search:focus-within { border-color: var(--teal-500); box-shadow: var(--e3), 0 0 0 4px rgba(15, 92, 99, .12); }
.mall-search input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 10px 14px; font: 500 var(--t-md)/1.2 var(--sans); }
.mall-search input:focus { outline: none; box-shadow: none; }
.mall-search .btn { flex: none; }
.aisles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 4px; -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent); }
.aisles::-webkit-scrollbar { display: none; }
.aisle { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 14px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: var(--t-sm);
  background: var(--glass-strong); border: 1px solid var(--line); transition: border-color var(--fast), background var(--fast); }
.aisle small { color: var(--faint); font-weight: 500; }
.aisle:hover { border-color: var(--teal-400); color: var(--ink); }
.aisle.is-active { background: var(--teal-500); border-color: var(--teal-500); color: #fff; }
.aisle.is-active small { color: rgba(255, 255, 255, .85); }

/* Bannière : assez haute pour donner envie, assez basse pour laisser voir les premières cartes */
.banner { position: relative; margin: 0 0 var(--s5); }
.bn-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-xl); box-shadow: var(--e3); }
.bn-track::-webkit-scrollbar { display: none; }
.bn-track:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 3px; }
.bn-slide { scroll-snap-align: start; position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: 100%; align-items: center; gap: var(--s5); height: clamp(250px, 26vw, 330px);
  padding: 0 clamp(20px, 4vw, 56px); overflow: hidden; isolation: isolate; text-decoration: none; color: #fff;
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--c2, #8B7BFF) 70%, transparent), transparent 62%), linear-gradient(120deg, color-mix(in srgb, var(--c1, #0F5C63) 78%, #041517) 0%, var(--c1, #0F5C63) 55%, color-mix(in srgb, var(--c2, #8B7BFF) 55%, var(--c1, #0F5C63)) 100%); }
.bn-slide::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 21, 23, .55), rgba(4, 21, 23, .12) 60%, transparent); }
.bn-slide:hover { color: #fff; }
.bn-slide--explore { --c1: #0F5C63; --c2: #8B7BFF; }
.bn-slide--pro { --c1: #6B5420; --c2: #C9A24B; }
.bn-copy { display: grid; gap: 8px; justify-items: start; align-self: center; max-width: 46ch; }
.bn-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 .72rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.bn-title { font: 500 clamp(1.7rem, 3.6vw, 2.9rem)/1.04 var(--k-display, var(--serif)); letter-spacing: -.01em; }
.bn-text { font-size: clamp(.92rem, 1.3vw, 1.05rem); opacity: .92; }
.bn-meta { font-weight: 700; font-size: var(--t-sm); }
.bn-cta { margin-top: 4px; display: inline-flex; padding: 11px 20px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-sm); color: var(--ink); background: #fff; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .5); transition: transform var(--fast); }
.bn-slide:hover .bn-cta { transform: translateX(3px); }
.bn-visual { align-self: stretch; display: grid; place-items: center; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.bn-visual .art { width: 100%; max-width: 420px; height: auto; max-height: 86%; border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.bn-visual--photo { position: relative; align-self: end; height: 100%; }
.bn-visual--photo::before { content: ''; position: absolute; left: 50%; top: 52%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #FFFDE6 0 12%, #FFE45C 34%, rgba(255, 228, 92, .4) 56%, transparent 70%); }
.bn-visual--photo img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 96%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }
.bn-controls { position: absolute; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: rgba(4, 21, 23, .45); backdrop-filter: blur(8px); }
.bn-btn { width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font: 700 1.1rem/1 var(--sans); color: #fff; background: rgba(255, 255, 255, .14); }
.bn-btn:hover, .bn-btn:focus-visible { background: rgba(255, 255, 255, .3); }
.bn-pause { font-size: .7rem; letter-spacing: -.1em; }
.bn-dots { display: flex; gap: 6px; padding: 0 4px; }
.bn-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .45); }
.bn-dots button[aria-current='true'] { width: 22px; border-radius: 6px; background: #fff; }
@media (max-width: 759px) {
  .bn-slide { grid-template-columns: minmax(0, 1fr) 38%; height: 236px; gap: 10px; padding: 0 16px; }
  .bn-text { display: none; }
  .bn-title { font-size: 1.55rem; }
  .bn-cta { padding: 9px 14px; }
  .bn-visual .art { max-height: 70%; }
  .bn-controls { position: static; width: fit-content; margin: 8px auto 0; background: rgba(4, 21, 23, .72); }
  .bn-eyebrow { flex-wrap: wrap; }
}
/* La recherche est sous l'en-tête : le lien « Explorer » et l'étiquette cèdent la place sous 900 px. */
@media (max-width: 899px) { .topbar .space-tag, .navlinks a[href="/recherche"] { display: none; } }
@media (max-width: 559px) { .navlinks a.cta { padding: 9px 12px; font-size: var(--t-xs); } }
.bn-eyebrow .k-badge { white-space: nowrap; }

/* Rangées : un rayon = un titre, un carrousel, un lien « Tout voir » */
.shelf { margin: var(--s6) 0; }
.shelf--tiles { margin-top: var(--s4); }
.shelf-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.shelf-head h2 { margin: 0; font: 600 clamp(1.25rem, 2.1vw, 1.6rem)/1.2 var(--serif); letter-spacing: -.01em; }
.shelf-head p { margin: 3px 0 0; color: var(--muted); font-size: var(--t-sm); }
.shelf-all { flex: none; padding: 8px 12px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-sm); color: var(--teal-600); text-decoration: none; white-space: nowrap; }
.shelf-all:hover { background: var(--teal-50); color: var(--teal-700); }
.mrail { position: relative; }
/* Sur ordinateur, un quart de la carte suivante dépasse : on comprend que la rangée continue. */
.mrail-track { --n: 5; --gap: 14px; --peek: .25; list-style: none; margin: 0 -2px; padding: 4px 2px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--n) * var(--gap)) / (var(--n) + var(--peek))); gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin; scrollbar-color: var(--teal-200) transparent; }
.mrail-track > li { display: flex; min-width: 0; scroll-snap-align: start; }
.shelf--tiles .mrail-track { --n: 6; }
.shelf--partners .mrail-track { --n: 4; }
@media (max-width: 1279px) { .mrail-track { --n: 4; } .shelf--tiles .mrail-track { --n: 5; } .shelf--partners .mrail-track { --n: 3; } }
@media (max-width: 1023px) { .mrail-track { --n: 3; } .shelf--tiles .mrail-track { --n: 4; } }
@media (max-width: 759px) { .mrail-track { grid-auto-columns: 70%; --gap: 12px; } .shelf--tiles .mrail-track { grid-auto-columns: 42%; } .shelf--partners .mrail-track { grid-auto-columns: 80%; } }
.mrail-btn { position: absolute; z-index: 3; top: 34%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font: 600 1.7rem/1 var(--sans); color: var(--teal-700); background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--e3); transition: opacity var(--fast), transform var(--fast); }
.mrail-btn:hover { transform: translateY(-50%) scale(1.06); }
.mrail-btn:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.mrail-btn--prev { left: -12px; } .mrail-btn--next { right: -12px; }
.mrail-btn:disabled { opacity: 0; pointer-events: none; }
.shelf--tiles .mrail-btn { top: 42%; }
@media (hover: none) and (pointer: coarse) { .mrail-btn { display: none; } }

/* Carte de prestation : grande image 4:3, puis nom, partenaire, lieu, prix, action */
.svc-card, .ptn-card { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--e1); overflow: hidden;
  transition: transform var(--base) var(--ease), box-shadow var(--base), border-color var(--base); }
.svc-card:hover, .ptn-card:hover { transform: translateY(-3px); box-shadow: var(--e3); border-color: color-mix(in srgb, var(--neon) 40%, transparent); }
.svc-card:focus-within, .ptn-card:focus-within { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.svc-media, .ptn-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--teal-50); }
.svc-media .art, .svc-media img, .ptn-media .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.svc-card:hover .svc-media .art, .svc-card:hover .svc-media img, .ptn-card:hover .ptn-media .art, .ptn-card:hover .ptn-media img { transform: scale(1.04); }
.svc-media.is-broken img, .ptn-media.is-broken img { display: none; }
.svc-badge { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: var(--r-pill); font: 600 .66rem/1.4 var(--sans); letter-spacing: .04em; color: #fff; background: rgba(4, 21, 23, .55); backdrop-filter: blur(6px); }
.svc-body { flex: 1; display: grid; gap: 4px; align-content: start; padding: 12px 14px 14px; }
.svc-by { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c1, var(--teal-500)); }
.svc-title { margin: 0; font: 650 1rem/1.3 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.svc-title a { color: var(--ink); text-decoration: none; }
.svc-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.svc-title a:focus-visible { outline: none; }
.svc-price { margin: 2px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.svc-price b { font-size: 1.06rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.svc-price span { font-size: var(--t-xs); color: var(--muted); }
.svc-go { margin: auto 0 0; padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: var(--t-sm); color: var(--teal-600); }
.svc-card:hover .svc-go span:last-child, .ptn-card:hover .svc-go span:last-child { transform: translateX(3px); }
.svc-go span:last-child { transition: transform var(--fast); }
/* Vitrines des partenaires */
.ptn-media--photo { background: radial-gradient(circle at 50% 62%, #FFFDE6 0 10%, #FFE45C 30%, rgba(255, 228, 92, .25) 52%, transparent 66%), linear-gradient(150deg, var(--c1), color-mix(in srgb, var(--c2) 60%, var(--c1))); }
.ptn-media--photo img { position: absolute; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .3)); transition: transform var(--slow) var(--ease); }
.ptn-card:hover .ptn-media--photo img { transform: translateX(-50%) scale(1.04); }
.ptn-kit { color: var(--teal-600); font-weight: 700; }
.ptn-headline { margin: 0; font-size: var(--t-sm); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ptn-media--join { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--teal-50) 0 12px, #fff 12px 24px); border-bottom: 1px dashed var(--teal-200); }
.ptn-media--join span { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--teal-500), var(--neon)); box-shadow: var(--e2); }
/* Rayons illustrés */
.rtile { position: relative; display: flex; flex-direction: column; width: 100%; border-radius: var(--r); overflow: hidden; text-decoration: none; background: #fff; border: 1px solid var(--line); box-shadow: var(--e1);
  transition: transform var(--base) var(--ease), box-shadow var(--base); }
.rtile:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.rtile:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.rtile-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.rtile-media .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.rtile-label { display: grid; gap: 1px; padding: 10px 12px 12px; }
.rtile-label b { color: var(--ink); font-size: var(--t-sm); }
.rtile-label span { color: var(--muted); font-size: var(--t-xs); }
/* Mise en avant plus grande, pour rythmer la promenade */
.spotlight { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: var(--s5); margin: var(--s7) 0; min-height: 300px; padding: 0 clamp(20px, 4vw, 56px);
  border-radius: var(--r-xl); overflow: hidden; color: #fff; isolation: isolate; box-shadow: var(--e3);
  background: radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--c2) 75%, transparent), transparent 62%), linear-gradient(120deg, color-mix(in srgb, var(--c1) 80%, #041517), var(--c1)); }
.spotlight h2 { color: #fff; margin: 4px 0 6px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.spotlight .eyebrow { color: rgba(255, 255, 255, .9); }
.spotlight p { color: rgba(255, 255, 255, .92); max-width: 48ch; }
.spot-copy { padding: var(--s6) 0; }
.spot-meta { font-weight: 700; }
.spotlight .btn { --bg: #fff; --fg: var(--ink); }
.spot-visual { position: relative; align-self: end; height: 300px; display: grid; justify-items: center; }
.spot-visual::before { content: ''; position: absolute; left: 50%; top: 50%; width: 300px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #FFFDE6 0 12%, #FFE45C 34%, rgba(255, 228, 92, .35) 56%, transparent 70%); }
.spot-visual img { position: relative; height: 100%; width: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }
@media (max-width: 759px) {
  .spotlight { grid-template-columns: minmax(0, 1fr); padding: 0 18px; }
  .spot-copy { padding: var(--s5) 0 0; }
  .spot-visual { height: 240px; }
}
/* Listes complètes (« Tout voir », recherche, partenaires) */
.results { margin-top: var(--s4); }
.results-title { margin: 0; font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--serif); }
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 var(--s4); }
.sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip--sm { min-height: 34px; padding: 5px 12px; font-size: var(--t-xs); }
@media (max-width: 759px) {
  .filters { display: grid; gap: 8px; }
  .filters .chips, .filters .sort { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
  .filters .chips::-webkit-scrollbar, .filters .sort::-webkit-scrollbar { display: none; }
  .filters .chip, .filters .sort > span { flex: none; }
}
.grid-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 16px; }
.grid-cards > li { display: flex; min-width: 0; }
.grid-cards--partners { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (max-width: 520px) { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .grid-cards .svc-body { padding: 10px 10px 12px; } .grid-cards .svc-title { font-size: .92rem; } .grid-cards--partners { grid-template-columns: minmax(0, 1fr); } }
.picks-panel { margin-top: var(--s4); }
.bespoke--compact { margin: var(--s7) 0 var(--s5); }
.how { margin: var(--s5) 0; }
@media (prefers-reduced-motion: reduce) {
  .svc-card, .ptn-card, .rtile, .mrail-btn, .bn-cta, .svc-media .art, .svc-media img, .ptn-media .art, .ptn-media--photo img { transition: none; }
  .svc-card:hover, .ptn-card:hover, .rtile:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   CENTRE COMMERCIAL MAISON MILLION (03/11/2026) — accueil, recherche, partenaires (body[data-mall]).
   Typographie neutre (Inter seule, hiérarchie par la taille et la graisse, pas de capitales espacées). Ambiance :
   espresso et noyer pour la chaleur, teal profond pour les surfaces et sélections, champagne pour les finitions, ivoire
   pour les textes, quelques lueurs teal comme un éclairage indirect. Surfaces alternées (ivoire, teal, espresso).
   Entrée pleine largeur : recherche, vitrines à la une, métiers illustrés ; puis directement les rangées.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
body[data-mall] {
  --mm-espresso: #22160F; --mm-espresso-2: #2E1E15; --mm-walnut: #5E3B29; --mm-walnut-2: #7A4F37;
  --mm-teal: #0B4C52; --mm-teal-2: #0F6168; --mm-teal-3: #13797F; --mm-neon: #46E3D5;
  --mm-gold: #CDB27A; --mm-gold-2: #E5D3A6; --mm-gold-3: #A98A4E; --mm-ivory: #F7F0E3; --mm-card: #FFFDF8;
  --paper: #F6EFE2; --paper-2: #EDE3D0; --ink: #23170F; --ink-2: #3A2A20; --muted: #64554A; --faint: #76675A;
  --line: rgba(35, 23, 15, .1); --line-strong: rgba(35, 23, 15, .2); --serif: var(--sans);
  --wood: repeating-linear-gradient(97deg, rgba(255, 228, 190, .035) 0 2px, transparent 2px 7px, rgba(0, 0, 0, .05) 7px 8px, transparent 8px 15px);
  background: var(--paper); color: var(--ink); overflow-x: clip;
}
body[data-mall] h1, body[data-mall] h2, body[data-mall] h3, body[data-mall] .display { font-family: var(--sans); letter-spacing: -.015em; }
body[data-mall] .eyebrow { text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 700; }
body[data-mall] .demo-banner { background: #14504F; letter-spacing: 0; }

/* En-tête espresso, logo champagne */
body[data-mall] .topbar { background: #1E130D; border-bottom: 1px solid rgba(205, 178, 122, .22); backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-mall] .topbar .container { min-height: 60px; }
body[data-mall] .brand { color: var(--mm-ivory); font: 800 1.22rem/1 var(--sans); letter-spacing: -.02em; }
body[data-mall] .brand em { color: var(--mm-gold); font-weight: 700; }
body[data-mall] .brand-mark { width: 28px; height: 28px; background: radial-gradient(circle at 32% 28%, #FFF6DD 0 10%, transparent 34%), conic-gradient(from 200deg, var(--mm-teal-3), var(--mm-neon), var(--mm-gold), var(--mm-gold-3), var(--mm-teal-3));
  box-shadow: inset -4px -5px 10px rgba(20, 10, 4, .35), 0 0 14px -2px rgba(70, 227, 213, .45); }
body[data-mall] .space-tag { display: none; }
body[data-mall] .navlinks a { color: #E9DDC7; }
body[data-mall] .navlinks a:hover { background: rgba(247, 240, 227, .08); color: #fff; }
body[data-mall] .navlinks a.cta { color: var(--ink); background: linear-gradient(135deg, var(--mm-gold-2), var(--mm-gold) 55%, var(--mm-gold-3)); box-shadow: none; }

/* Bande d'entrée (pleine largeur sans débordement : le fond s'étend par border-image) */
body[data-mall] main.container { padding-top: 0; }
.hall { position: relative; z-index: 1; margin: 0; padding: 16px 0 20px; color: var(--mm-ivory);
  border-image: linear-gradient(180deg, #24170F, #2C1D14 calc(100% - 2px), rgba(205, 178, 122, .5) calc(100% - 2px)) fill 0 / / 0 100vmax; }
.hall--compact { padding: 14px 0 16px; }
.hall .mall-search { min-height: 54px; padding: 5px 5px 5px 0; background: var(--mm-card); border: 1px solid rgba(205, 178, 122, .6); box-shadow: 0 0 0 4px rgba(205, 178, 122, .08); }
.hall .mall-search:focus-within { border-color: var(--mm-neon); box-shadow: 0 0 0 4px rgba(70, 227, 213, .22), 0 0 26px -6px rgba(70, 227, 213, .5); }
.mall-search-ico { flex: none; width: 18px; height: 18px; margin-left: 18px; border: 2.5px solid var(--mm-teal-2); border-radius: 50%; position: relative; }
.mall-search-ico::after { content: ''; position: absolute; width: 8px; height: 2.5px; right: -7px; bottom: -4px; background: var(--mm-teal-2); border-radius: 2px; transform: rotate(45deg); }
.hall .mall-search input { padding: 10px 12px; font: 500 1.02rem/1.2 var(--sans); color: var(--ink); }
.hall .mall-search input::placeholder { color: #7D6E61; }
body[data-mall] .btn { --bg: linear-gradient(135deg, var(--mm-teal-3), var(--mm-teal) 70%); --fg: var(--mm-ivory); box-shadow: none; font-weight: 700; }
body[data-mall] .btn:hover { box-shadow: 0 0 0 1px rgba(70, 227, 213, .5), 0 10px 24px -12px rgba(70, 227, 213, .7); }
body[data-mall] .btn--gold { --bg: linear-gradient(135deg, var(--mm-gold-2), var(--mm-gold) 55%, var(--mm-gold-3)); --fg: var(--ink); }
.hall .aisles { margin-top: 10px; }
.hall .aisle { background: rgba(247, 240, 227, .06); border-color: rgba(205, 178, 122, .28); color: #EADFCB; font-size: .92rem; }
.hall .aisle small { color: var(--mm-gold); }
.hall .aisle:hover { border-color: var(--mm-neon); color: #fff; }
.hall .aisle.is-active { background: var(--mm-teal-2); border-color: var(--mm-neon); color: #fff; box-shadow: 0 0 16px -6px rgba(70, 227, 213, .7); }
.hall .aisle.is-active small { color: var(--mm-gold-2); }

.entry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; margin-top: 14px; }
.entry > :only-child { grid-column: 1 / -1; }
.entry-feature { min-width: 0; display: flex; }
.entry-feature .banner { flex: 1; margin: 0; min-height: 316px; display: flex; }
.entry-feature .bn-track { flex: 1; border-radius: 18px; box-shadow: 0 0 0 1px rgba(205, 178, 122, .38), 0 24px 50px -30px rgba(0, 0, 0, .8), 0 14px 44px -22px rgba(70, 227, 213, .35); }
.entry .bn-slide { height: auto; min-height: 316px; gap: 12px; padding: 0 0 0 clamp(18px, 2.4vw, 32px); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.entry .bn-slide::before { background: linear-gradient(90deg, rgba(20, 12, 7, .72), rgba(20, 12, 7, .28) 58%, transparent); }
.entry .bn-slide--pro { --c1: #4A2E1F; --c2: #A98A4E; }
.entry .bn-copy { gap: 6px; max-width: 30ch; padding: 22px 0 52px; }
.entry .bn-eyebrow { gap: 8px; font: 600 .86rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; opacity: 1; color: var(--mm-ivory); }
.entry .k-badge { padding: 5px 9px; font: 700 .74rem/1 var(--sans); letter-spacing: 0; color: var(--ink); background: var(--mm-gold-2); }
.entry .bn-title { font: 800 clamp(1.55rem, 2.5vw, 2.2rem)/1.08 var(--sans); letter-spacing: -.025em; }
.entry .bn-text { font-size: 1rem; font-weight: 500; opacity: .92; }
.entry .bn-meta { font-size: .95rem; font-weight: 600; color: var(--mm-gold-2); }
.entry .bn-meta b { color: #fff; font-weight: 800; }
.entry .bn-cta { padding: 11px 18px; font-size: .95rem; color: var(--ink); background: var(--mm-card); }
.entry .bn-visual .art { max-height: 92%; max-width: 92%; }
.entry .bn-visual--photo::before { background: radial-gradient(circle, rgba(255, 246, 214, .95) 0 12%, rgba(229, 211, 166, .75) 34%, rgba(70, 227, 213, .22) 56%, transparent 70%); }
.entry .bn-controls { right: 12px; bottom: 12px; background: rgba(20, 12, 7, .55); }

/* Métiers et univers : panneau en noyer, tuiles illustrées à intitulé court */
.entry-trades { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid rgba(205, 178, 122, .32);
  background: var(--wood), linear-gradient(160deg, var(--mm-walnut-2), var(--mm-walnut) 45%, #3E2619); box-shadow: inset 0 1px 0 rgba(255, 236, 200, .12), 0 22px 46px -30px rgba(0, 0, 0, .8); }
.entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
.entry-head h2 { margin: 0; font: 800 1.08rem/1.2 var(--sans); color: var(--mm-ivory); }
.entry-all { flex: none; font-weight: 700; font-size: .92rem; color: var(--mm-gold-2); text-decoration: none; white-space: nowrap; }
.entry-all:hover { color: #fff; }
.trades { --gap: 10px; flex: 1; list-style: none; margin: 0; padding: 0 0 2px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 2), minmax(146px, 1fr));
  grid-auto-columns: calc((100% - (var(--cols, 6) - 1) * var(--gap)) / var(--cols, 6)); gap: var(--gap); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(205, 178, 122, .5) transparent; }
.trades > li { display: flex; min-width: 0; scroll-snap-align: start; }
body[data-mall] .rtile { min-height: 100%; border-radius: 13px; border: 1px solid rgba(229, 211, 166, .3); background: #1B110B; box-shadow: none; }
body[data-mall] .rtile-media { flex: 1; min-height: 46px; aspect-ratio: auto; }
body[data-mall] .rtile-label { gap: 1px; padding: 8px 10px 9px; background: linear-gradient(180deg, #2B1B12, #1E130D); border-top: 1px solid rgba(229, 211, 166, .22); }
body[data-mall] .rtile-label b { color: #fff; font-size: .92rem; font-weight: 700; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-mall] .rtile-label span { color: var(--mm-gold-2); font-size: .8rem; font-weight: 600; }
body[data-mall] .rtile:hover { transform: translateY(-2px); border-color: var(--mm-neon); box-shadow: 0 0 0 1px rgba(70, 227, 213, .45), 0 12px 30px -14px rgba(70, 227, 213, .65); }
body[data-mall] .rtile:focus-visible { outline: 3px solid var(--mm-neon); }

/* Rangées */
body[data-mall] .shelf { margin: 26px 0; }
.hall + .shelf, .hall + .empty + .shelf { margin-top: 20px; }
body[data-mall] .shelf-head { margin-bottom: 10px; }
body[data-mall] .shelf-head h2 { font: 800 clamp(1.2rem, 1.9vw, 1.45rem)/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
body[data-mall] .shelf-all { color: var(--mm-teal-2); font-size: .95rem; }
body[data-mall] .shelf-all:hover { background: rgba(15, 97, 104, .08); color: var(--mm-teal); }
body[data-mall] .mrail-btn { color: var(--ink); background: var(--mm-card); border-color: rgba(169, 138, 78, .45); }
body[data-mall] .mrail-btn:focus-visible { outline-color: var(--mm-teal-2); }
/* Une rangée plus courte que l'écran : ses cartes s'élargissent pour occuper la largeur (aucune case vide, aucune offre ajoutée). */
body[data-mall] .mrail-track[style*="--count"] { --k: min(var(--n), var(--count)); --pk: calc(var(--peek) * clamp(0, var(--count) - var(--n), 1)); grid-auto-columns: calc((100% - var(--k) * var(--gap)) / (var(--k) + var(--pk))); }
@media (max-width: 759px) { body[data-mall] .mrail-track, body[data-mall] .mrail-track[style*="--count"] { grid-auto-columns: 72%; } body[data-mall] .shelf--partners .mrail-track { grid-auto-columns: 80%; } }

/* Cartes */
body[data-mall] .svc-card, body[data-mall] .ptn-card { border-radius: 14px; background: var(--mm-card); border-color: rgba(35, 23, 15, .1); box-shadow: 0 1px 2px rgba(35, 23, 15, .06), 0 10px 24px -18px rgba(35, 23, 15, .45); }
body[data-mall] .svc-card:hover, body[data-mall] .ptn-card:hover { border-color: rgba(169, 138, 78, .55); box-shadow: 0 0 0 1px rgba(70, 227, 213, .25), 0 16px 34px -18px rgba(11, 76, 82, .55); }
body[data-mall] .svc-card:focus-within, body[data-mall] .ptn-card:focus-within { outline-color: var(--mm-teal-2); }
body[data-mall] .svc-media, body[data-mall] .ptn-media { background: #E9DFCC; }
body[data-mall] .svc-badge { font: 600 .72rem/1.4 var(--sans); letter-spacing: 0; background: rgba(35, 23, 15, .62); }
body[data-mall] .svc-body { gap: 5px; padding: 12px 14px 14px; }
body[data-mall] .svc-by { font-size: .84rem; color: var(--muted); }
body[data-mall] .svc-title { font: 700 1.02rem/1.3 var(--sans); }
body[data-mall] .svc-price b { font-size: 1.12rem; font-weight: 800; }
body[data-mall] .svc-price span { font-size: .84rem; }
body[data-mall] .svc-go { font-size: .92rem; color: var(--mm-teal-2); }
body[data-mall] .ptn-kit { color: var(--mm-teal-2); }
body[data-mall] .ptn-headline { font-size: .9rem; }
body[data-mall] .ptn-media--join { background: repeating-linear-gradient(135deg, #EFE5D2 0 12px, var(--mm-card) 12px 24px); border-bottom-color: rgba(169, 138, 78, .4); }
body[data-mall] .ptn-media--join span { color: var(--ink); background: linear-gradient(135deg, var(--mm-gold-2), var(--mm-gold) 60%, var(--mm-gold-3)); }

/* Bandes de couleur pleine largeur : teal profond (budgets), espresso et noyer (vitrines) */
.band { position: relative; margin: 26px 0; padding: 4px 0 8px; color: var(--mm-ivory); }
.band > .shelf:first-child { margin-top: 20px; } .band > .shelf:last-child { margin-bottom: 18px; }
.band--teal { border-image: linear-gradient(180deg, var(--mm-teal-2), var(--mm-teal) 70%, #0A454B) fill 0 / / 0 100vmax; }
.band--espresso { border-image: linear-gradient(180deg, #2E1E15, #22160F) fill 0 / / 0 100vmax; }
body[data-mall] .band .shelf-head h2 { color: var(--mm-ivory); }
body[data-mall] .band .shelf-head p { color: rgba(247, 240, 227, .8); }
body[data-mall] .band .shelf-all { color: var(--mm-gold-2); }
body[data-mall] .band .shelf-all:hover { background: rgba(247, 240, 227, .08); color: #fff; }
body[data-mall] .band .mrail-track { scrollbar-color: rgba(205, 178, 122, .5) transparent; }

/* Pied de la promenade : accès pro en une ligne, étapes courtes */
.pro-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 28px 0 18px; padding: 16px 20px; border-radius: 16px;
  background: var(--mm-card); border: 1px solid rgba(169, 138, 78, .45); box-shadow: 0 10px 24px -20px rgba(35, 23, 15, .5); }
.pro-strip p { margin: 0; font-size: 1rem; } .pro-strip b { color: var(--ink); font-weight: 800; } .pro-strip span { color: var(--muted); }
body[data-mall] .how { margin: 0 0 var(--s5); }
body[data-mall] .step3 { background: var(--mm-card); box-shadow: none; padding: 14px 16px; }
body[data-mall] .step3 i { color: var(--mm-ivory); background: linear-gradient(135deg, var(--mm-teal-3), var(--mm-teal)); }
body[data-mall] .footer { margin-top: var(--s6); background: #1E130D; color: #D8CCB6; border-top: 1px solid rgba(205, 178, 122, .3); }
body[data-mall] .footer a { color: var(--mm-gold-2); }

/* Listes complètes */
body[data-mall] .results { margin-top: 20px; }
body[data-mall] .results-title { font: 800 clamp(1.4rem, 2.6vw, 1.9rem)/1.15 var(--sans); letter-spacing: -.02em; }
body[data-mall] .chip { background: var(--mm-card); font-weight: 600; }
body[data-mall] .chip:hover { border-color: var(--mm-teal-3); box-shadow: none; }
body[data-mall] .chip.is-active { background: var(--mm-teal-2); border-color: var(--mm-teal-2); color: #fff; }
body[data-mall] .chip.is-active small { color: var(--mm-gold-2); }
body[data-mall] .empty .display { font-family: var(--sans); font-weight: 700; }

/* Tablette : métiers sur toute la largeur, vitrines dessous */
@media (max-width: 1023px) {
  .entry { grid-template-columns: minmax(0, 1fr); }
  .entry-feature .banner, .entry .bn-slide { min-height: 260px; }
}
/* Téléphone : en-tête et entrée courts, métiers en une rangée glissante, vitrine compacte, offres vite visibles */
@media (max-width: 759px) {
  body[data-mall] .topbar .container { min-height: 54px; }
  .hall { padding: 10px 0 14px; }
  .hall .mall-search { min-height: 48px; }
  /* Bouton loupe : le champ garde la place de son texte d'aide ; l'intitulé « Rechercher » reste lu par les lecteurs d'écran. */
  .hall .mall-search .btn { position: relative; width: 44px; height: 44px; min-height: 0; padding: 0; font-size: 0; border-radius: 50%; }
  .hall .mall-search .btn::before { content: ''; position: absolute; left: 13px; top: 12px; width: 13px; height: 13px; border: 2.5px solid var(--mm-ivory); border-radius: 50%; }
  .hall .mall-search .btn::after { content: ''; position: absolute; left: 26px; top: 28px; width: 7px; height: 2.5px; background: var(--mm-ivory); border-radius: 2px; transform: rotate(45deg); }
  .mall-search-ico { display: none; }
  .hall .mall-search input { padding-left: 16px; }
  .entry { gap: 10px; margin-top: 10px; }
  .entry-trades { order: -1; padding: 10px; gap: 8px; border-radius: 14px; }
  .entry-head h2 { font-size: 1rem; }
  .trades { grid-template-rows: 118px; grid-auto-columns: 34%; --gap: 8px; }
  body[data-mall] .rtile-label { padding: 6px 9px 7px; }
  body[data-mall] .rtile-label b { font-size: .86rem; }
  .entry .bn-controls [data-bn-prev], .entry .bn-controls [data-bn-next] { display: none; }
  .entry-feature .banner, .entry .bn-slide { min-height: 158px; }
  .entry .bn-eyebrow { display: none; }
  .entry .bn-slide { grid-template-columns: minmax(0, 1fr) 40%; padding-left: 14px; }
  .entry .bn-copy { padding: 14px 0; gap: 5px; }
  .entry .bn-title { font-size: 1.35rem; }
  .entry .bn-text { display: none; }
  .entry .bn-cta { padding: 8px 12px; font-size: .88rem; }
  .entry .bn-controls { position: absolute; margin: 0; right: 8px; bottom: 8px; }
  .entry .bn-btn { width: 30px; height: 30px; }
  body[data-mall] .shelf { margin: 22px 0; }
  .pro-strip { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { body[data-mall] .rtile:hover { transform: none; } }

/* Demande atelier (vitrines automobiles) : dossier unique dans « Demandes ». */
.dossier { display: grid; gap: var(--s3); margin: var(--s3) 0; padding: var(--s4); border-radius: var(--r); background: var(--paper-2); border: 1px solid var(--line); }
.plate { display: inline-flex; align-items: center; padding: 4px 12px 4px 26px; border-radius: 6px; border: 2px solid #1C1E21; background: linear-gradient(90deg, #1F45B5 0 18px, #fff 18px); font: 700 1.05rem/1.3 var(--sans); letter-spacing: .08em; color: #0E0F11; }
.plate--foreign { padding-left: 12px; background: #fff; }
.dossier-grid { display: grid; gap: 8px; }
.dossier-row { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: var(--s3); font-size: var(--t-sm); }
@media (max-width: 560px) { .dossier-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.dossier ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.photo-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.photo-grid .photo { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #1C1E21; border: 1px solid var(--line); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid span { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(14, 15, 17, .75); color: #fff; font-size: .7rem; font-weight: 600; }
.dossier-check { border-top: 1px solid var(--line); padding-top: var(--s3); }
.dossier-check > summary { cursor: pointer; font-weight: 600; }
.dossier-check .grid2 { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: var(--s3); }
/* Atelier Diagnostic : pré-analyse reçue dans le dossier de la demande. */
.dossier-diag { display: grid; gap: 8px; padding: var(--s3); border-radius: 10px; border: 1px solid var(--line); background: var(--paper); }
.dossier-diag code { font-size: .72rem; padding: 1px 5px; border-radius: 4px; background: var(--paper-2); }