/* MonLaveur – styles principaux */

/* Layout : une idée par écran. Accueil = titre + carte de France. Réservation = étapes guidées, une question à la fois, barre d'action en bas. */
:root {
  --bg: #D9EDFB; --card: #FFFFFF; --sky: #C4E3F8; --sky2: #95CDF2; --ink: #0B2540; --muted: #3F5A73; --line: #B9D9F0;
  --accent: #1E7FC4; --accent-dk: #155F95; --on: #FFFFFF; --grad: linear-gradient(135deg, #56B4EE 0%, #1E7FC4 100%);
  --hero: linear-gradient(135deg, #6CC4F5 0%, #2E8FD4 55%, #1A5F99 100%); --herotext: #FFFFFF; --bar: #1E7FC4; --bartext: #FFFFFF; --band: #0B2540; --bandtext: #FFFFFF;
  --barg: linear-gradient(90deg, #1A6FB0 0%, #2E8FD4 55%, #4FB0EA 100%); --pageg: linear-gradient(180deg, #DCEFFC 0%, #B9DDF7 100%); --bandg: linear-gradient(135deg, #0B2540 0%, #1A4A78 100%);
  --mw: #D3E6F5; --ml: #F6F9FC; --mls: #DCE6EF; --mrd: #E1E8EF; --mr: #C9DFF1; --mb: #B7C5D2; --mlab: #6F8193; --msea: #7E9DB8; --mhalo: rgba(246,249,252,0.92);
  --star: #F2A516; --ok: #127A57; --okbg: #E7F5EF;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

body[data-pal="ocean"] { --mw: #CBD9EC; --ml: #F5F8FC; --mls: #D8E2EE; --mrd: #DEE5EE; --mr: #C2D4EA; --mb: #B3C1D3; --mlab: #66788E; --msea: #7590B3; --mhalo: rgba(245,248,252,0.92); --barg: linear-gradient(90deg, #061F4D 0%, #0B3D91 55%, #2E6BD8 100%); --pageg: linear-gradient(180deg, #DCE7F5 0%, #B6CBE9 100%); --bandg: linear-gradient(135deg, #061F4D 0%, #0E3A8E 100%); --bg: #D6E3F3; --sky: #C3D6EE; --sky2: #9DBCE3; --ink: #081B33; --muted: #3D506A; --line: #B5CAE5; --accent: #1550C0; --accent-dk: #0E3A8E;
  --grad: linear-gradient(135deg, #4C86E8 0%, #1550C0 100%); --hero: linear-gradient(135deg, #2E6BD8 0%, #0B3D91 55%, #061F4D 100%); --bar: #0B3D91; --band: #061F4D; }
body[data-pal="lagon"] { --mw: #C8EAE4; --ml: #F6FBFA; --mls: #D7EBE7; --mrd: #DEEBE8; --mr: #BFE3DC; --mb: #AFC9C5; --mlab: #637F7C; --msea: #6E9F98; --mhalo: rgba(246,251,250,0.92); --barg: linear-gradient(90deg, #0B6E68 0%, #0D9E8E 55%, #45D1C0 100%); --pageg: linear-gradient(180deg, #D8F3EE 0%, #ADE4DA 100%); --bandg: linear-gradient(135deg, #0A2928 0%, #0B5C57 100%); --bg: #D3F1EC; --sky: #BDE9E2; --sky2: #8ED9CD; --ink: #0A2928; --muted: #3A5D5B; --line: #A9DFD6; --accent: #0D9E8E; --accent-dk: #087A6E;
  --grad: linear-gradient(135deg, #45D1C0 0%, #0D9E8E 100%); --hero: linear-gradient(135deg, #4FD6C5 0%, #0FA393 55%, #0B6E68 100%); --bar: #0D9E8E; --band: #0A2928; }
body[data-pal="mono"] { --mw: #DCDCD7; --ml: #F8F8F6; --mls: #E2E2DE; --mrd: #E6E6E2; --mr: #D2D2CC; --mb: #B9B9B2; --mlab: #777777; --msea: #8A8A84; --mhalo: rgba(248,248,246,0.92); --barg: linear-gradient(90deg, #000000 0%, #2B2B2B 55%, #4A4A4A 100%); --pageg: linear-gradient(180deg, #EFEFEA 0%, #D2D2CB 100%); --bandg: linear-gradient(135deg, #000000 0%, #333333 100%); --bg: #E8E8E3; --sky: #DADAD4; --sky2: #C2C2BA; --ink: #111111; --muted: #4F4F4F; --line: #CDCDC6; --accent: #111111; --accent-dk: #000000;
  --grad: linear-gradient(135deg, #555555 0%, #111111 100%); --hero: linear-gradient(135deg, #3A3A3A 0%, #111111 60%, #000000 100%); --bar: #111111; --band: #000000; }
body[data-pal="nuit"] { --mw: #0A1520; --ml: #162A3F; --mls: #1F3A56; --mrd: #22405F; --mr: #10263A; --mb: #3C5A7A; --mlab: #9FB2C6; --msea: #5F7D9C; --mhalo: rgba(22,42,63,0.9); --barg: linear-gradient(90deg, #08121C 0%, #13263A 55%, #24476E 100%); --pageg: linear-gradient(180deg, #0D1B2A 0%, #183452 100%); --bandg: linear-gradient(135deg, #08121C 0%, #1A3048 100%); --bg: #0D1B2A; --card: #13263A; --sky: #1A3048; --sky2: #2A4A6E; --ink: #F3EEE4; --muted: #B4C1CE; --line: #2B4766; --accent: #E2B95F; --accent-dk: #F0D08E; --on: #0D1B2A;
  --grad: linear-gradient(135deg, #F2D592 0%, #D1A345 100%); --hero: linear-gradient(135deg, #24476E 0%, #132B45 60%, #0B1826 100%); --herotext: #F3EEE4; --bar: #0A1622; --bartext: #F3EEE4; --band: #08121C; --bandtext: #F3EEE4;
  --okbg: #1A3A33; --ok: #6FD3A8; color-scheme: dark; }
.pal { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.pal small { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.sw2 { width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.sw2[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
button, input { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; margin: 0; }
.app { min-height: 100%; display: flex; flex-direction: column; }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bar); border-bottom: 1px solid var(--line); }
.bar { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; font-weight: 800; font-size: 19px; white-space: nowrap; }
.mark { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); color: var(--on); display: flex; align-items: center; justify-content: center; }
.right { margin-left: auto; display: flex; gap: 8px; }
.link { border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--muted); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.link:hover { background: var(--sky); color: var(--ink); }
.btn { height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn:hover { border-color: #C5D4E2; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on); }
.btn.pri:hover { background: var(--accent-dk); }
.btn.big { height: 56px; padding: 0 30px; font-size: 16px; border-radius: 16px; }
.btn:disabled, .btn.pri:disabled { background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }

/* Accueil */
.hero { background: linear-gradient(180deg, var(--sky) 0%, var(--bg) 100%); }
.hero .in { max-width: 1200px; margin: 0 auto; padding: 56px 24px 48px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; font-weight: 800; margin-top: 12px; }
.hero p { color: var(--muted); font-size: 18px; margin: 18px 0 28px; max-width: 34ch; }
.trust { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.trust b { color: var(--ink); }
.mapwrap { height: 520px; }
.section { max-width: 1200px; margin: 0 auto; padding: 56px 24px; }
.section h2 { font-size: 28px; font-weight: 800; text-align: center; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.s3 { text-align: center; padding: 8px 16px; }
.s3 .n { width: 52px; height: 52px; border-radius: 26px; background: var(--sky); color: var(--accent); font-weight: 800; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
.s3 h3 { font-size: 18px; margin-top: 14px; }
.s3 p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.proband { max-width: 1152px; margin: 0 auto 56px; border-radius: 24px; background: var(--band); color: var(--bandtext); padding: 36px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.proband h2 { font-size: 24px; }
.proband p { margin: 6px 0 0; opacity: 0.75; }

/* Carte */
.map { color: #0B2540; position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; background: #A9D3F0; box-shadow: 0 24px 50px rgba(12,34,54,0.12); cursor: grab; touch-action: none; user-select: none; }
.map.drag { cursor: grabbing; }
.mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapsvg text { font-family: var(--font); paint-order: stroke; stroke: rgba(255,255,255,0.9); stroke-linejoin: round; pointer-events: none; }
.cl { color: #0B2540; position: absolute; transform: translate(-12px, -50%); height: 32px; padding: 0 4px 0 10px; border-radius: 16px; border: 0; background: #FFF; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; box-shadow: 0 4px 12px rgba(12,34,54,0.22); }
.cl i { width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }
.cl b { min-width: 24px; height: 24px; border-radius: 12px; background: var(--sky); color: var(--accent-dk); font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.cl:hover, .cl.on { background: var(--accent); color: #FFF; z-index: 2; }
.cl:hover b, .cl.on b { background: #FFF; }
.cl:hover i, .cl.on i { background: #FFF; }
.mtools { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; background: #FFF; border-radius: 12px; box-shadow: 0 2px 10px rgba(12,34,54,0.18); overflow: hidden; z-index: 5; }
.mtools button { width: 40px; height: 40px; border: 0; background: #FFF; color: #0B2540; font-size: 18px; font-weight: 600; cursor: pointer; }
.mtools button + button { border-top: 1px solid var(--line); }
.mhint { position: absolute; left: 14px; bottom: 14px; z-index: 5; background: rgba(255,255,255,0.96); border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 10px rgba(12,34,54,0.12); }

/* Étapes */
.flow { flex: 1; display: flex; flex-direction: column; }
.prog { border-bottom: 1px solid var(--line); }
.prog .in { max-width: 760px; margin: 0 auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.prog small { font-size: 13px; font-weight: 600; color: var(--muted); }
.track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 3px; background: var(--grad); transition: width 0.25s; }
.q { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 24px 120px; display: flex; flex-direction: column; gap: 28px; }
.q.wide { max-width: 1100px; }
.q h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; }
.q .sub { color: var(--muted); margin: 8px 0 0; }
.opts { display: grid; gap: 14px; }
.o2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.o4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { text-align: left; border: 2px solid var(--line); background: var(--card); color: var(--ink); border-radius: 20px; padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s, background 0.15s; }
.opt:hover { border-color: var(--sky2); }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--sky); }
.opt .ico { width: 52px; height: 52px; border-radius: 16px; background: var(--sky); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.opt[aria-pressed="true"] .ico { background: var(--card); }
.opt b { font-size: 18px; }
.opt span { color: var(--muted); font-size: 14px; }
.opt .pr { color: var(--ink); font-weight: 700; font-size: 15px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 42px; padding: 0 18px; border-radius: 21px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on); }
.chip:disabled { color: #A8B6C3; text-decoration: line-through; cursor: not-allowed; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { height: 76px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.day b { font-size: 22px; color: var(--ink); }
.day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on); }
.day[aria-pressed="true"] b { color: var(--on); }
.day:disabled { opacity: 0.4; cursor: not-allowed; }
.lbl { font-size: 15px; font-weight: 700; }
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
.split .mapwrap { height: 460px; }
.actbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--bar); border-top: 1px solid var(--line); padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)); }
.actbar .in { max-width: 760px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.actbar .sum { font-size: 14px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Laveurs */
.pros { display: flex; flex-direction: column; gap: 14px; }
.pc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; border: 1.5px solid var(--line); border-radius: 20px; padding: 18px 20px; background: var(--card); }
.pc:hover { border-color: var(--sky2); }
.mono { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; flex-shrink: 0; }
.c0 { background: #DDEEFB; color: #1F6A9E; } .c1 { background: #E0F3EC; color: #0E6B4C; } .c2 { background: #EEE9FA; color: #5B3E9A; } .c3 { background: #FBEDE0; color: #8A4A12; }
.pname { font-weight: 800; font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pmeta { color: var(--muted); font-size: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pmeta svg { color: var(--star); }
.tag { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; }
.tag.sp { background: #FFF3DC; color: #8A5A00; }
.tag.ex { border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.tag.ver { background: var(--sky); color: var(--accent-dk); }
.pright { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pright .p { font-size: 22px; font-weight: 800; }
.empty { border: 1.5px dashed var(--sky2); border-radius: 20px; padding: 28px; text-align: center; color: var(--muted); }

/* Vitrine */
.vit { flex: 1; }
.vhead { background: linear-gradient(180deg, var(--sky2) 0%, var(--sky) 60%, var(--bg) 100%); }
.vhead .in { max-width: 960px; margin: 0 auto; padding: 28px 24px 32px; display: flex; flex-direction: column; gap: 18px; }
.back { align-self: flex-start; border: 0; background: var(--card); color: var(--ink); border-radius: 12px; padding: 8px 14px; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.vid { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.vid .mono { width: 88px; height: 88px; border-radius: 26px; font-size: 30px; box-shadow: 0 8px 20px rgba(12,34,54,0.12); }
.vid h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; }
.vbody { max-width: 960px; margin: 0 auto; padding: 8px 24px 120px; display: flex; flex-direction: column; gap: 36px; }
.vbody h2 { font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.video { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 18px; background: var(--grad); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video .play { width: 56px; height: 56px; border-radius: 28px; background: var(--card); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.video .t { position: absolute; left: 12px; bottom: 12px; right: 12px; color: var(--on); font-size: 13px; font-weight: 700; }
.price { border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 20px; }
.prow + .prow { border-top: 1px solid var(--line); }
.prow b { display: block; }
.prow small { color: var(--muted); font-size: 13px; }
.prow .d { color: var(--muted); font-size: 14px; }
.prow .p { font-weight: 800; font-size: 18px; min-width: 70px; text-align: right; }
.prow.on { background: var(--sky); }
.infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.info { background: var(--sky); border-radius: 16px; padding: 16px 18px; }
.info small { font-size: 12px; font-weight: 700; color: var(--accent-dk); text-transform: uppercase; letter-spacing: 0.05em; }
.info div { font-weight: 600; margin-top: 4px; }
.rev { border-top: 1px solid var(--line); padding: 16px 0; }
.rev p { margin: 6px 0 0; color: var(--muted); }
.rev small { color: var(--muted); }

/* Paiement & confirmation */
.card { border: 1.5px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.line { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.line span:first-child { color: var(--muted); }
.line.tot { border-top: 1px solid var(--line); padding-top: 12px; font-weight: 800; font-size: 18px; }
.line.tot span:first-child { color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; }
.field input { height: 52px; border-radius: 14px; border: 1.5px solid var(--line); padding: 0 16px; font-size: 16px; background: var(--card); color: var(--ink); }
.field input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.note { font-size: 13px; color: var(--muted); }
.done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.done .c { width: 84px; height: 84px; border-radius: 42px; background: var(--okbg); color: var(--ok); display: flex; align-items: center; justify-content: center; }
.tl { display: flex; flex-direction: column; text-align: left; }
.tl div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; position: relative; }
.tl div::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--line); }
.tl div:last-child::before { display: none; }
.tl i { width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--sky2); background: var(--card); position: relative; z-index: 1; }
.tl .d i { background: var(--ok); border-color: var(--ok); }
.tl b { display: block; }
.tl span { color: var(--muted); font-size: 14px; }

/* Côté pro */
.edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.erow { display: grid; grid-template-columns: auto minmax(0, 1fr) 110px; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.erow:first-of-type { border-top: 0; }
.sw { width: 48px; height: 28px; border-radius: 14px; border: 0; padding: 3px; cursor: pointer; display: flex; }
.sw span { width: 22px; height: 22px; border-radius: 11px; background: #FFF; display: block; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.money { display: flex; align-items: center; gap: 6px; height: 46px; border: 1.5px solid var(--line); color: var(--ink); border-radius: 12px; padding: 0 12px; }
.money input { width: 100%; border: 0; font-size: 16px; font-weight: 700; text-align: right; background: none; }
.money input:focus { outline: none; }
.preview { position: sticky; top: 92px; border-radius: 24px; border: 1.5px solid var(--line); overflow: hidden; }
.preview .ph { background: linear-gradient(180deg, var(--sky2), var(--card)); padding: 22px; display: flex; gap: 14px; align-items: center; }
.preview .pb { padding: 6px 22px 22px; }
.minirow { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.minirow:first-child { border-top: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--sky); border-radius: 12px; padding: 10px 14px; font-weight: 700; color: var(--accent-dk); font-size: 14px; word-break: break-all; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--accent); color: var(--on); padding: 12px 18px; border-radius: 12px; font-size: 14px; z-index: 50; }
.foot { border-top: 1px solid var(--line); }
.foot .in { max-width: 1200px; margin: 0 auto; padding: 22px 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }


.top { color: var(--bartext); }
.top .logo { color: var(--bartext); }
.top .mark { background: var(--card); color: var(--accent); }
.top .link { color: var(--bartext); opacity: 0.9; }
.top .link:hover { background: rgba(255,255,255,0.16); color: var(--bartext); }
.top .pal { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.top .pal small { color: var(--bartext); }
.hero { background: var(--hero); color: var(--herotext); }
.hero .eyebrow, .hero p, .hero .trust, .hero .trust b { color: var(--herotext); }
.hero .eyebrow { opacity: 0.85; } .hero p { opacity: 0.92; }
.hero .btn.pri { background: var(--card); border-color: var(--card); color: var(--accent-dk); }
.hero .btn.pri:hover { filter: brightness(0.96); }
.s3 .n { background: var(--card); }
.prog { background: var(--sky); border-bottom-color: var(--line); }
.vhead { background: var(--hero); color: var(--herotext); }
.vhead h1, .vhead p, .vhead .pmeta, .vhead .pmeta b { color: var(--herotext) !important; }
.vhead .pmeta svg { color: var(--star); }
.foot { background: var(--band); color: var(--bandtext); border-top: 0; }
.foot .in { color: var(--bandtext); opacity: 0.85; }
.actbar { background: var(--card); border-top-color: var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,0.06); }

body { background: var(--pageg); background-attachment: fixed; }
.top { background: var(--barg); }
.btn.pri { background: var(--grad); border-color: transparent; }
.btn.pri:hover { background: var(--grad); filter: brightness(1.07); }
.chip[aria-pressed="true"], .day[aria-pressed="true"] { background: var(--grad); border-color: transparent; }
.opt[aria-pressed="true"] { background: linear-gradient(135deg, var(--card) 0%, var(--sky) 100%); }
.opt .ico, .opt[aria-pressed="true"] .ico { background: var(--grad); color: var(--on); }
.s3 .n { background: var(--grad); color: var(--on); }
.prog { background: linear-gradient(90deg, var(--sky) 0%, var(--sky2) 100%); }
.track { background: var(--card); }
.proband, .foot { background: var(--bandg); }
.info { background: linear-gradient(135deg, var(--sky) 0%, var(--sky2) 100%); }
.pc { background: linear-gradient(135deg, var(--card) 60%, var(--sky) 100%); }
.card { background: linear-gradient(160deg, var(--card) 55%, var(--sky) 100%); }
.mono { background-image: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); }
.btn:disabled, .btn.pri:disabled { background: var(--line); filter: none; }

.map { background: var(--mw); box-shadow: 0 20px 44px rgba(12,34,54,0.14); }
.mapsvg .mw { fill: var(--mw); }
.mapsvg .ml path { fill: var(--ml); stroke: var(--mls); vector-effect: non-scaling-stroke; }
.mapsvg .mrd path { stroke: var(--mrd); }
.mapsvg .mr path { stroke: var(--mr); }
.mapsvg .mb path { stroke: var(--mb); }
.mapsvg text { stroke: var(--mhalo); }
.mapsvg .tc { fill: var(--mlab); }
.mapsvg .tk { fill: var(--mlab); text-transform: uppercase; }
.mapsvg .ts { fill: var(--msea); }
.mapsvg .dot { fill: var(--ml); stroke: var(--mlab); }
.cl { height: 28px; padding: 0 3px 0 10px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 8px rgba(12,34,54,0.16); }
.cl i { width: 6px; height: 6px; }
.cl b { min-width: 20px; height: 20px; font-size: 11px; background: var(--sky); color: var(--accent-dk); }
.cl:hover, .cl.on { background: var(--ink); color: var(--bg); }
.cl:hover b, .cl.on b { background: var(--accent); color: var(--on); }
.cl:hover i, .cl.on i { background: var(--accent); }
.mhint { font-weight: 500; color: #0B2540; }

/* Style repris du site Juker Detailing */
:root { --bg: #F2F8FD; --card: #FFFFFF; --sky: #E6F2FB; --sky2: #CFE5F6; --ink: #10263D; --muted: #4E6478; --line: #E1ECF5;
  --accent: #2E86C1; --accent-dk: #1F6A9E; --on: #FFFFFF; --grad: #2E86C1; --barg: #F6FAFE; --bartext: #10263D;
  --herog: linear-gradient(180deg, #2E86C1 0%, #2F89C5 40%, #4D9FD9 68%, #A9D2F0 88%, #F2F8FD 100%); --pageg: #F2F8FD; --bandg: #10263D; }
h1, h2, h3 { font-weight: 900; letter-spacing: -0.015em; }
body { background: var(--bg); }
.top { background: var(--barg); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(16,38,61,0.03); }
.top .logo, .top .link { color: var(--bartext); }
.top .link { font-weight: 600; opacity: 1; }
.top .link:hover { background: var(--sky); }
.top .mark { background: var(--sky); color: var(--accent); }
.logo { font-weight: 900; }
.btn { font-weight: 800; }
.btn.pri, .btn.pri:hover { background: var(--accent); filter: none; }
.btn.pri:hover { background: var(--accent-dk); }
.chip[aria-pressed="true"], .day[aria-pressed="true"] { background: var(--accent); }
.opt .ico, .opt[aria-pressed="true"] .ico { background: var(--sky); color: var(--accent); }
.opt[aria-pressed="true"] { background: var(--card); box-shadow: 0 10px 24px rgba(46,134,193,0.16); }
.s3 .n { background: var(--accent); color: #FFF; }
.prog { background: var(--card); }
.track { background: var(--sky); }
.track i { background: var(--accent); }
.pc, .card { background: var(--card); }
.info { background: var(--sky); }
.foot, .proband { background: var(--bandg); }
.pill-eb { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 17px; border: 1.5px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); color: #FFF; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.jhero { position: relative; overflow: hidden; background: var(--herog); color: #FFF; }
.jhero::before { content: ""; position: absolute; right: -140px; top: -170px; width: 460px; height: 460px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.jhero::after { content: ""; position: absolute; left: -120px; bottom: -40px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.jhero .in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 72px 24px 96px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.jhero h1 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.08; margin: 20px 0 0; }
.jhero p { font-size: 18px; line-height: 1.75; margin: 22px 0 32px; max-width: 46ch; color: #FFF; }
.jhero .btn.white { background: #FFF; border-color: #FFF; color: var(--accent); height: 54px; padding: 0 32px; border-radius: 10px; box-shadow: 0 10px 24px rgba(16,38,61,0.15); }
.jhero .btn.white:hover { background: #F2F8FD; }
.stats { margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.35); display: flex; gap: 34px; flex-wrap: wrap; }
.stats b { display: block; font-size: 38px; font-weight: 900; line-height: 1; }
.stats span { display: block; margin-top: 10px; font-size: 14px; opacity: 0.92; }
.wcard { position: relative; background: #FFF; color: var(--ink); border-radius: 22px; padding: 28px 30px; box-shadow: 0 24px 50px rgba(16,38,61,0.18); }
.wcard .eb { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.frow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.frow:last-child { border-bottom: 0; }
.frow .pr { color: var(--accent); font-weight: 900; font-size: 17px; }
.badge100 { position: absolute; right: -18px; bottom: -22px; background: var(--accent); color: #FFF; border: 2px solid rgba(255,255,255,0.75); border-radius: 14px; padding: 12px 18px; text-align: center; box-shadow: 0 14px 28px rgba(16,38,61,0.22); }
.badge100 b { display: block; font-size: 24px; font-weight: 900; line-height: 1.1; }
.badge100 span { font-size: 12px; font-weight: 600; }
.wcard .mapwrap { height: 420px; margin-top: 16px; }
.wcard .map { box-shadow: none; border-radius: 16px; }
.vbody2 { max-width: 1200px; margin: -40px auto 0; padding: 0 24px 120px; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; }
.vsec { background: #FFF; border-radius: 22px; padding: 28px 30px; box-shadow: 0 8px 26px rgba(16,38,61,0.06); }
.vsec .eb { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.vsec h2 { font-size: 26px; margin: 8px 0 18px; }
.socials { display: flex; gap: 8px; }
.socials span { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); background: #FFF; }
@media (max-width: 900px) {
  .jhero .in { grid-template-columns: minmax(0, 1fr); padding: 48px 24px 80px; gap: 40px; }
  .badge100 { right: 12px; }
}
@media (max-width: 640px) {
  .jhero .in, .vbody2 { padding-left: 16px; padding-right: 16px; }
  .wcard, .vsec { padding: 22px 18px; }
  .stats { gap: 22px; } .stats b { font-size: 30px; }
  .top .link { display: none; }
  .wcard .mapwrap { height: 340px; }
}

/* Inspirations Airbnb / Booking / Planity */
.sbar { margin-top: 30px; background: #FFF; border-radius: 16px; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0; box-shadow: 0 18px 40px rgba(16,38,61,0.2); max-width: 600px; }
.sf2 { display: flex; flex-direction: column; padding: 8px 16px; border-right: 1px solid var(--line); min-width: 0; }
.sf2 label { font-size: 12px; font-weight: 800; color: var(--ink); }
.sf2 select { border: 0; background: none; font: inherit; font-size: 15px; color: var(--muted); padding: 2px 0; cursor: pointer; width: 100%; }
.sf2 select:focus { outline: none; }
.sf2:nth-child(2) { border-right: 0; }
.sbar .btn { height: 54px; border-radius: 12px; }
.heroline { margin-top: 18px; font-size: 14px; opacity: 0.92; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 56px 24px 0; }
.shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.shead .eb { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.shead h2 { font-size: 28px; margin-top: 6px; }
.shead p { margin: 6px 0 0; color: var(--muted); }
.cities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.city { border: 0; padding: 0; text-align: left; background: #FFF; border-radius: 18px; overflow: hidden; cursor: pointer; box-shadow: 0 8px 22px rgba(16,38,61,0.07); transition: transform 0.15s, box-shadow 0.15s; }
.city:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,38,61,0.12); }
.city .img { height: 110px; background: linear-gradient(160deg, #8CC8EF 0%, #2E86C1 100%); position: relative; overflow: hidden; }
.city .img::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.city .img span { position: absolute; left: 14px; bottom: 12px; color: #FFF; font-weight: 900; font-size: 18px; z-index: 1; }
.city .bd { padding: 12px 14px 14px; font-size: 13px; color: var(--muted); }
.city .bd b { color: var(--ink); }
.svcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.svc2 { border: 0; text-align: left; background: #FFF; border-radius: 18px; padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 22px rgba(16,38,61,0.06); color: var(--ink); }
.svc2:hover { box-shadow: 0 14px 30px rgba(16,38,61,0.12); }
.svc2 .ico { width: 50px; height: 50px; border-radius: 14px; background: var(--sky); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.svc2 b { font-size: 18px; font-weight: 900; }
.svc2 span { font-size: 14px; color: var(--muted); }
.svc2 .pr { color: var(--accent); font-weight: 800; }
.guar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.g { background: #FFF; border-radius: 18px; padding: 22px; }
.g .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: #FFF; display: flex; align-items: center; justify-content: center; }
.g b { display: block; margin-top: 12px; font-size: 16px; font-weight: 900; }
.g span { font-size: 14px; color: var(--muted); }
.reviews { display: grid; grid-template-columns: 260px repeat(3, minmax(0, 1fr)); gap: 16px; }
.rscore { background: var(--accent); color: #FFF; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.rscore b { font-size: 48px; font-weight: 900; line-height: 1; }
.rscore span { margin-top: 8px; opacity: 0.9; font-size: 14px; }
.rc { background: #FFF; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.rc .st { color: var(--star); display: flex; gap: 2px; }
.rc p { margin: 0; font-size: 15px; color: var(--ink); }
.rc small { color: var(--muted); font-size: 13px; }
.sorts { display: flex; gap: 8px; flex-wrap: wrap; }
.score { display: inline-flex; align-items: center; gap: 8px; }
.score b { background: var(--accent); color: #FFF; font-size: 13px; font-weight: 900; padding: 4px 8px; border-radius: 8px 8px 8px 2px; }
.score span { font-size: 13px; font-weight: 800; color: var(--ink); }
.trips { display: flex; flex-direction: column; gap: 14px; }
.trip { background: #FFF; border-radius: 20px; padding: 20px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; box-shadow: 0 8px 22px rgba(16,38,61,0.06); }
.trip .when { width: 70px; text-align: center; background: var(--sky); border-radius: 14px; padding: 10px 0; color: var(--accent-dk); font-weight: 800; font-size: 13px; }
.trip .when b { display: block; font-size: 24px; color: var(--ink); font-weight: 900; }
.trip .st2 { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 8px; background: var(--okbg); color: var(--ok); }
.trip .st2.past { background: var(--sky); color: var(--muted); }
.trip .acts2 { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ref { font-size: 13px; color: var(--muted); }
.ref b { color: var(--ink); letter-spacing: 0.06em; }
@media (max-width: 1000px) { .cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } .svcs, .guar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reviews { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .sbar { grid-template-columns: minmax(0, 1fr); padding: 6px; }
  .sf2 { border-right: 0; border-bottom: 1px solid var(--line); }
  .sf2:nth-child(2) { border-bottom: 0; }
  .wrap { padding: 40px 16px 0; }
  .cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svcs, .guar { grid-template-columns: minmax(0, 1fr); }
  .trip { grid-template-columns: auto minmax(0, 1fr); }
  .trip .acts2 { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 900px) {
  .hero .in, .split, .edit { grid-template-columns: minmax(0, 1fr); }
  .hero .in { padding-top: 36px; gap: 28px; }
  .mapwrap, .split .mapwrap { height: 400px; }
  .steps3, .infos { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; }
}
@media (max-width: 900px) { .pal small { display: none; } }
@media (max-width: 640px) {
  .bar { padding: 0 16px; gap: 8px; }
  .pal { gap: 4px; padding: 3px 5px; }
  .sw2 { width: 22px; height: 22px; }
  .right .link { display: none; }
  .logo { font-size: 17px; }
  .hero .in, .section, .q, .vhead .in, .vbody, .prog .in { padding-left: 16px; padding-right: 16px; }
  .o2, .o4, .f2 { grid-template-columns: minmax(0, 1fr); }
  .days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc { grid-template-columns: auto minmax(0, 1fr); }
  .pright { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .prow { grid-template-columns: minmax(0, 1fr) auto; }
  .prow .d { display: none; }
  .proband { margin: 0 16px 40px; padding: 28px 24px; }
  .actbar { padding-left: 16px; padding-right: 16px; }
  .actbar .sum { display: none; }
  .actbar .in .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Version sans blanc : tout en tons bleus */
:root { --bg: #BFE0F7; --card: #E2F1FC; --sky: #CBE6F9; --sky2: #A7D3F3; --line: #AFD3EE; --muted: #2F4C66; --ink: #0E2740;
  --barg: linear-gradient(90deg, #1C68A6 0%, #2E86C1 55%, #4BA7E3 100%); --bartext: #FFFFFF;
  --herog: linear-gradient(180deg, #2E86C1 0%, #3290CC 45%, #5AAEE6 75%, #A3D2F3 92%, #C6E4F9 100%);
  --mw: #B4D6F0; --ml: #DCEDFA; --mls: #C4DDF1; --mrd: #C9E0F3; --mr: #A9CFEC; --mb: #93B4D0; --mlab: #3E5D7A; --msea: #4F7EA6; --mhalo: rgba(220,237,250,0.9); }
html { background: #A9D4F3; }
body { background: linear-gradient(180deg, #CBE7FA 0%, #A9D4F3 100%); background-attachment: scroll; min-height: 100%; }
.top { background: var(--barg); border-bottom: 0; }
.top .logo, .top .link { color: #FFFFFF; }
.top .link:hover { background: rgba(255,255,255,0.16); color: #FFFFFF; }
.top .mark { background: rgba(255,255,255,0.2); color: #FFFFFF; }
.top .btn.pri, .top .btn.pri:hover { background: #10263D; border-color: #10263D; }
.btn, .chip, .day, .opt, .pc, .card, .field input, .money, .back, .tl i { background-color: var(--card); }
.wcard, .city, .svc2, .g, .rc, .trip, .vsec, .sbar, .prog, .actbar, .preview { background: var(--card); }
.jhero .btn.white { background: var(--card); border-color: var(--card); }
.jhero .btn.white:hover { background: var(--sky); }
.opt[aria-pressed="true"] { background: var(--sky); }
.s3 { background: var(--card); border-radius: 18px; padding: 24px 18px; }
.mtools button, .cl, .mhint { background: #E2F1FC; }
.cl b { background: #B9DCF5; }
.city .bd b, .svc2 b, .g b { color: var(--ink); }
.empty { background: var(--card); }

/* Couleurs basiques */
body { --bg1: #F4F4F4; --bg2: #E9E9E9; --bg: #F4F4F4; --card: #FFFFFF; --sky: #EDEDED; --sky2: #DADADA; --line: #E0E0E0; --ink: #1A1A1A; --muted: #5C5C5C; --accent: #1A1A1A; --accent-dk: #000000; --on: #FFFFFF; --barg: #1A1A1A; --herog: linear-gradient(180deg, #1A1A1A 0%, #1A1A1A 62%, #E9E9E9 100%); --band: #1A1A1A; --bandg: #1A1A1A; --grad: #1A1A1A; --cityg: linear-gradient(160deg, #6B6B6B 0%, #2B2B2B 100%); --mw: #DCDCDC; --ml: #F7F7F7; --mls: #E2E2E2; --mrd: #E8E8E8; --mr: #D2D2D2; --mb: #B5B5B5; --mlab: #6B6B6B; --msea: #8A8A8A; --mhalo: rgba(247,247,247,0.92); }
body[data-pal="noir"] { --bg1: #F4F4F4; --bg2: #E9E9E9; --bg: #F4F4F4; --card: #FFFFFF; --sky: #EDEDED; --sky2: #DADADA; --line: #E0E0E0; --ink: #1A1A1A; --muted: #5C5C5C; --accent: #1A1A1A; --accent-dk: #000000; --on: #FFFFFF; --barg: #1A1A1A; --herog: linear-gradient(180deg, #1A1A1A 0%, #1A1A1A 62%, #E9E9E9 100%); --band: #1A1A1A; --bandg: #1A1A1A; --grad: #1A1A1A; --cityg: linear-gradient(160deg, #6B6B6B 0%, #2B2B2B 100%); --mw: #DCDCDC; --ml: #F7F7F7; --mls: #E2E2E2; --mrd: #E8E8E8; --mr: #D2D2D2; --mb: #B5B5B5; --mlab: #6B6B6B; --msea: #8A8A8A; --mhalo: rgba(247,247,247,0.92); }
body[data-pal="rouge"] { --bg1: #F4F4F4; --bg2: #E9E9E9; --bg: #F4F4F4; --card: #FFFFFF; --sky: #FBE9E9; --sky2: #DADADA; --line: #E0E0E0; --ink: #1A1A1A; --muted: #5C5C5C; --accent: #D32F2F; --accent-dk: #B71C1C; --on: #FFFFFF; --barg: #D32F2F; --herog: linear-gradient(180deg, #D32F2F 0%, #D32F2F 62%, #E9E9E9 100%); --band: #1A1A1A; --bandg: #1A1A1A; --grad: #D32F2F; --cityg: linear-gradient(160deg, #6B6B6B 0%, #2B2B2B 100%); --mw: #DCDCDC; --ml: #F7F7F7; --mls: #E2E2E2; --mrd: #E8E8E8; --mr: #D2D2D2; --mb: #B5B5B5; --mlab: #6B6B6B; --msea: #8A8A8A; --mhalo: rgba(247,247,247,0.92); }
body[data-pal="bleu"] { --bg1: #F4F4F4; --bg2: #E9E9E9; --bg: #F4F4F4; --card: #FFFFFF; --sky: #EAF3FE; --sky2: #DADADA; --line: #E0E0E0; --ink: #1A1A1A; --muted: #5C5C5C; --accent: #3B94F0; --accent-dk: #2179D6; --on: #FFFFFF; --barg: #3B94F0; --herog: linear-gradient(180deg, #3B94F0 0%, #3B94F0 62%, #E9E9E9 100%); --band: #1A1A1A; --bandg: #1A1A1A; --grad: #3B94F0; --cityg: linear-gradient(160deg, #6B6B6B 0%, #2B2B2B 100%); --mw: #DCDCDC; --ml: #F7F7F7; --mls: #E2E2E2; --mrd: #E8E8E8; --mr: #D2D2D2; --mb: #B5B5B5; --mlab: #6B6B6B; --msea: #8A8A8A; --mhalo: rgba(247,247,247,0.92); }
body[data-pal="vert"] { --bg1: #F4F4F4; --bg2: #E9E9E9; --bg: #F4F4F4; --card: #FFFFFF; --sky: #E8F3E9; --sky2: #DADADA; --line: #E0E0E0; --ink: #1A1A1A; --muted: #5C5C5C; --accent: #2E7D32; --accent-dk: #1B5E20; --on: #FFFFFF; --barg: #2E7D32; --herog: linear-gradient(180deg, #2E7D32 0%, #2E7D32 62%, #E9E9E9 100%); --band: #1A1A1A; --bandg: #1A1A1A; --grad: #2E7D32; --cityg: linear-gradient(160deg, #6B6B6B 0%, #2B2B2B 100%); --mw: #DCDCDC; --ml: #F7F7F7; --mls: #E2E2E2; --mrd: #E8E8E8; --mr: #D2D2D2; --mb: #B5B5B5; --mlab: #6B6B6B; --msea: #8A8A8A; --mhalo: rgba(247,247,247,0.92); }
body[data-pal="orange"] { --bg1: #F4F4F4; --bg2: #E9E9E9; --bg: #F4F4F4; --card: #FFFFFF; --sky: #FDF0E4; --sky2: #DADADA; --line: #E0E0E0; --ink: #1A1A1A; --muted: #5C5C5C; --accent: #EF6C00; --accent-dk: #E65100; --on: #FFFFFF; --barg: #EF6C00; --herog: linear-gradient(180deg, #EF6C00 0%, #EF6C00 62%, #E9E9E9 100%); --band: #1A1A1A; --bandg: #1A1A1A; --grad: #EF6C00; --cityg: linear-gradient(160deg, #6B6B6B 0%, #2B2B2B 100%); --mw: #DCDCDC; --ml: #F7F7F7; --mls: #E2E2E2; --mrd: #E8E8E8; --mr: #D2D2D2; --mb: #B5B5B5; --mlab: #6B6B6B; --msea: #8A8A8A; --mhalo: rgba(247,247,247,0.92); }
body { background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%); color: var(--ink); }
.top .btn.pri, .top .btn.pri:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--accent-dk); }
body[data-pal="noir"] .top .btn.pri, body:not([data-pal]) .top .btn.pri { color: #1A1A1A; }
.city .img { background: var(--cityg); }
.map { color: var(--ink); }
.mtools button, .cl, .mhint { background: #FFFFFF; color: var(--ink); }
.cl b { background: var(--sky); color: var(--accent); }
.cl:hover, .cl.on { background: var(--accent); color: #FFFFFF; }
.top .pal { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); }
.top .pal small { color: #FFFFFF; }
.sw2 { border-color: rgba(255,255,255,0.9); }
.sw2[aria-pressed="true"] { box-shadow: 0 0 0 2px #FFFFFF; }
.jhero .pill-eb, .jhero p, .jhero .stats, .jhero .heroline { color: #FFFFFF; }
.jhero p, .jhero .stats { text-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.tag.ver { background: var(--sky); color: var(--accent-dk); }
.opt[aria-pressed="true"] { background: var(--sky); }
.opt[aria-pressed="true"] .ico { background: var(--accent); color: #FFFFFF; }
.s3 { background: #FFFFFF; }
.prog, .actbar { background: #FFFFFF; }
.wcard { background: #FFFFFF; }

/* Accueil aéré */
.jhero.hc .in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 96px 24px 120px; }
.hcol { max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.jhero.hc h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.06; margin-top: 22px; }
.jhero.hc p { font-size: 19px; margin: 20px auto 0; max-width: 56ch; }
.jhero.hc .sbar { width: 100%; max-width: 680px; margin-top: 34px; text-align: left; }
.band1, .band2 { padding: 80px 0; }
.band1 { background: #FFFFFF; }
.band2 { background: transparent; }
.wrap2 { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.shead .eb, .mapsec .eb { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.shead.c { justify-content: center; text-align: center; }
.mapsec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.mapsec h2 { font-size: 32px; margin-top: 8px; }
.mapsec .lead { color: var(--muted); font-size: 17px; margin: 14px 0 0; max-width: 40ch; }
.stats.dark { color: var(--ink); border-top-color: var(--line); }
.stats.dark b { color: var(--accent); }
.stats.dark span { color: var(--muted); opacity: 1; }
.band1 .s3, .band2 .s3 { background: #FFFFFF; }
.band1 .city, .band1 .svc2, .band1 .g, .band1 .rc { background: var(--bg1); box-shadow: none; }
.city .img { background: linear-gradient(160deg, var(--accent) 0%, var(--accent-dk) 100%); }
@media (max-width: 480px) { .top .pal { display: none; } }
@media (max-width: 900px) { .mapsec { grid-template-columns: minmax(0, 1fr); gap: 32px; } .jhero.hc .in { padding: 64px 24px 88px; } }
@media (max-width: 640px) { .band1, .band2 { padding: 56px 0; } .wrap2 { padding: 0 16px; } .jhero.hc .in { padding: 48px 16px 72px; } }

/* Carte sophistiquée */
:root { --mw2: #EFEFEF; }
body[data-pal="bleu"] { --mw: #D3E3F5; --mw2: #E9F1FB; --ml: #FAFBFC; --mls: #DDE5EE; --mrd: #E3E9F0; --mr: #C4D9EF; --mb: #AFBDCC; --mlab: #5E6E80; --msea: #6F8FB3; }
.mapsvg .mglow path { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 9; stroke-linejoin: round; }
.mapsvg .mglow2 path { fill: none; stroke: rgba(255,255,255,0.8); stroke-width: 3.5; stroke-linejoin: round; }
.mapsvg .ml path { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.06)); }
.map { border-radius: 18px; }
.mc { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.mc .halo { position: absolute; left: -7px; top: -7px; width: 44px; height: 44px; border-radius: 22px; background: var(--accent); opacity: 0.14; transition: transform 0.25s, opacity 0.25s; }
.mc .core { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 15px; background: var(--accent); color: #FFF; border: 2.5px solid #FFF; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.22); transition: transform 0.2s; }
.mc .nm { position: absolute; left: 35px; top: 4px; white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--ink); background: rgba(255,255,255,0.92); padding: 3px 8px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); opacity: 0.95; }
.mc.hov .halo, .mc:hover .halo, .mc.on .halo { transform: scale(1.5); opacity: 0.22; }
.mc.hov .core, .mc:hover .core, .mc.on .core { transform: scale(1.12); }
.mc.on .core { background: var(--ink); }
.mc:focus-visible .core { outline: 2px solid var(--ink); outline-offset: 2px; }
.mc::after { content: ""; position: absolute; left: -7px; top: -7px; width: 44px; height: 44px; border-radius: 22px; border: 2px solid var(--accent); opacity: 0; animation: mpulse 2.6s ease-out infinite; }
@keyframes mpulse { 0% { transform: scale(0.7); opacity: 0.5; } 100% { transform: scale(1.9); opacity: 0; } }
.mp { position: absolute; transform: translate(-50%, -100%); height: 30px; padding: 0 11px; border: 0; border-radius: 15px; background: #FFF; color: var(--ink); font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.2); white-space: nowrap; transition: transform 0.15s; }
.mp::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.mp:hover, .mp.on { background: var(--accent); color: #FFF; transform: translate(-50%, -100%) scale(1.08); z-index: 3; }
.mpopc { position: absolute; z-index: 6; width: 240px; transform: translateY(-100%); background: #FFF; border-radius: 16px; padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.22); display: flex; flex-direction: column; gap: 10px; animation: popin 0.18s ease-out; }
.mpopc.below { transform: none; }
@keyframes popin { from { opacity: 0; margin-top: 6px; } to { opacity: 1; margin-top: 0; } }
.mpopc .x { position: absolute; right: 8px; top: 6px; width: 28px; height: 28px; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; border-radius: 8px; }
.mpopc .x:hover { background: var(--bg1); }
.pophead { display: flex; gap: 10px; align-items: center; padding-right: 22px; }
.pophead b { font-weight: 900; }
.eb2 { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.popgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; background: var(--bg1); border-radius: 12px; padding: 8px 4px; }
.popgrid b { display: block; font-size: 15px; font-weight: 900; }
.popgrid span { font-size: 11px; color: var(--muted); }
.poprow { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.poprow b { color: var(--ink); }
.mpopc .btn.sm { height: 38px; font-size: 13px; padding: 0 12px; }
.mscale { position: absolute; right: 14px; bottom: 14px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11px; font-weight: 700; color: var(--mlab); background: rgba(255,255,255,0.85); padding: 5px 8px; border-radius: 8px; }
.mscale i { display: block; height: 6px; border: 2px solid var(--mlab); border-top: 0; }
.mtools button { display: flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .mc::after { animation: none; } .mpopc { animation: none; } }

/* Carte du monde style OpenStreetMap */
.map.osm { background: #AAD3DF; border-radius: 16px; }
.mapsvg .osea { fill: #AAD3DF; }
.mapsvg .oland { fill: #F2EFE9; stroke: #B9A9C9; stroke-width: 0.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map.zr .mapsvg .oland { stroke-dasharray: 5 3; stroke-width: 1.1; }
.mapsvg .oriv { fill: none; stroke: #AAD3DF; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapsvg .oroad0 { fill: none; stroke: #DC8A96; stroke-width: 3.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }
.mapsvg .oroad { fill: none; stroke: #E892A2; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }
.map.zr .mapsvg .oroad { opacity: 0.9; }
.map.zd .mapsvg .oroad0 { opacity: 1; }
.map.zd .mapsvg .oroad { stroke-width: 2; opacity: 1; }
.mapsvg text { font-family: var(--font); paint-order: stroke; stroke-linejoin: round; pointer-events: none; }
.mapsvg .osealab { fill: #4A78A8; stroke: rgba(170,211,223,0.85); font-style: italic; font-weight: 600; }
.mapsvg .ocountry { fill: #7C6A92; stroke: rgba(242,239,233,0.9); font-weight: 800; }
.mapsvg .ocity { fill: #FFFFFF; stroke: #333333; }
.mapsvg .ocitylab { fill: #2B2B2B; stroke: rgba(255,255,255,0.9); font-weight: 600; }
.mapsvg .ocitylab.b { font-weight: 800; }
.mviews { position: absolute; left: 14px; top: 14px; z-index: 5; display: flex; background: #FFF; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); overflow: hidden; }
.mviews button { border: 0; background: #FFF; padding: 9px 14px; font-size: 13px; font-weight: 800; color: var(--ink); cursor: pointer; }
.mviews button + button { border-left: 1px solid #E6E6E6; }
.mviews button:hover { background: #F2F2F2; }
.mpin { position: absolute; transform: translate(-50%, -100%); border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.mpin .av { width: 40px; height: 40px; border-radius: 20px; border: 3px solid #FFF; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; }
.mpin .pr { margin-top: -6px; background: #FFF; color: var(--ink); font-size: 11px; font-weight: 900; padding: 2px 7px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); position: relative; }
.mpin:hover .av, .mpin.on .av { border-color: var(--accent); transform: scale(1.1); }
.mpin.on .pr, .mpin:hover .pr { background: var(--accent); color: #FFF; }
.carte-page { flex: 1; display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.carte-side { padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; background: #FFF; border-right: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 68px); position: sticky; top: 68px; }
.carte-side h1 { font-size: 28px; }
.carte-list { display: flex; flex-direction: column; gap: 6px; }
.csearch { display: flex; flex-direction: column; gap: 6px; position: relative; }
.csearch label { font-size: 13px; font-weight: 800; color: var(--ink); }
.cbox { display: flex; align-items: center; gap: 8px; border: 2px solid var(--accent); border-radius: 14px; padding: 4px 4px 4px 12px; background: #FFF; color: var(--accent); box-shadow: 0 6px 18px rgba(33,121,214,0.12); }
.cbox input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; padding: 10px 0; color: var(--ink); background: transparent; }
.cbox button { border: 0; border-radius: 10px; background: var(--accent); color: #FFF; font: inherit; font-weight: 800; padding: 10px 16px; cursor: pointer; }
.csug { display: flex; flex-direction: column; background: #FFF; border-radius: 12px; overflow: hidden; }
.csug:not(:empty) { border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.csug button { text-align: left; border: 0; border-bottom: 1px solid var(--line); background: #FFF; padding: 11px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.csug button:last-child { border-bottom: 0; }
.csug button:hover { background: #EAF3FE; }
.csug i { font-style: normal; font-size: 12px; color: #8A8A8A; margin-left: 6px; }
.ctitle { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #6B6B6B; margin-top: 4px; }
.cline { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); background: #FFF; border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.cline:hover { border-color: var(--accent); }
.cline b { color: var(--accent); font-size: 13px; }
.carte-map { position: relative; height: calc(100vh - 68px); position: sticky; top: 68px; }
.carte-map .map { border-radius: 0; height: 100%; }
@media (max-width: 900px) { .carte-page { grid-template-columns: minmax(0, 1fr); } .carte-side { position: static; max-height: none; order: 1; } .carte-list { flex-direction: row; flex-wrap: wrap; } .cline { padding: 9px 12px; } .cline b { display: none; } .carte-map { height: 70vh; position: relative; top: 0; } .mviews button { padding: 8px 10px; font-size: 12px; } }

/* Dégradé du bas, en miroir du haut */
.jfoot { position: relative; overflow: hidden; color: #FFFFFF; text-align: center; background: linear-gradient(180deg, var(--bg2) 0%, var(--accent) 42%, var(--accent) 100%); }
.jfoot::before { content: ""; position: absolute; left: -140px; bottom: -170px; width: 460px; height: 460px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.jfoot::after { content: ""; position: absolute; right: -120px; top: 40%; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.jfoot .in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 150px 24px 90px; display: flex; flex-direction: column; align-items: center; }
.jfoot h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 18px; color: #FFFFFF; }
.jfoot p { font-size: 18px; margin: 14px 0 0; color: #FFFFFF; opacity: 0.95; }
.jfbtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.jfoot .btn.white { background: #FFFFFF; border-color: #FFFFFF; color: var(--accent-dk); }
.jfoot .btn.ghostw { background: transparent; border: 2px solid rgba(255,255,255,0.8); color: #FFFFFF; }
.jfoot .btn.ghostw:hover { background: rgba(255,255,255,0.12); }
.foot { background: var(--accent-dk); }
@media (max-width: 640px) { .jfoot .in { padding: 110px 16px 64px; } .jfbtns .btn { width: 100%; white-space: normal; } }

/* Dégradé très progressif : du bleu au blanc */
.jhero.hc { background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 50%, #FFFFFF 100%); background: linear-gradient(180deg, var(--accent) 0%, color-mix(in oklab, var(--accent), #FFFFFF 0.0%) 44.0%, color-mix(in oklab, var(--accent), #FFFFFF 1.3%) 48.0%, color-mix(in oklab, var(--accent), #FFFFFF 5.0%) 52.0%, color-mix(in oklab, var(--accent), #FFFFFF 10.9%) 56.0%, color-mix(in oklab, var(--accent), #FFFFFF 18.8%) 60.0%, color-mix(in oklab, var(--accent), #FFFFFF 28.3%) 64.0%, color-mix(in oklab, var(--accent), #FFFFFF 38.9%) 68.0%, color-mix(in oklab, var(--accent), #FFFFFF 50.0%) 72.0%, color-mix(in oklab, var(--accent), #FFFFFF 61.1%) 76.0%, color-mix(in oklab, var(--accent), #FFFFFF 71.7%) 80.0%, color-mix(in oklab, var(--accent), #FFFFFF 81.2%) 84.0%, color-mix(in oklab, var(--accent), #FFFFFF 89.1%) 88.0%, color-mix(in oklab, var(--accent), #FFFFFF 95.0%) 92.0%, color-mix(in oklab, var(--accent), #FFFFFF 98.7%) 96.0%, color-mix(in oklab, var(--accent), #FFFFFF 100.0%) 100.0%); }
.jhero.hc .in { padding-bottom: 260px; }
.jhero.hc .heroline { text-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.jhero.hc::after { display: none; }
.jfoot { background: linear-gradient(180deg, color-mix(in oklab, var(--accent), #FFFFFF 100.0%) 0.0%, color-mix(in oklab, var(--accent), #FFFFFF 98.7%) 4.3%, color-mix(in oklab, var(--accent), #FFFFFF 95.0%) 8.6%, color-mix(in oklab, var(--accent), #FFFFFF 89.1%) 12.9%, color-mix(in oklab, var(--accent), #FFFFFF 81.2%) 17.1%, color-mix(in oklab, var(--accent), #FFFFFF 71.7%) 21.4%, color-mix(in oklab, var(--accent), #FFFFFF 61.1%) 25.7%, color-mix(in oklab, var(--accent), #FFFFFF 50.0%) 30.0%, color-mix(in oklab, var(--accent), #FFFFFF 38.9%) 34.3%, color-mix(in oklab, var(--accent), #FFFFFF 28.3%) 38.6%, color-mix(in oklab, var(--accent), #FFFFFF 18.8%) 42.9%, color-mix(in oklab, var(--accent), #FFFFFF 10.9%) 47.1%, color-mix(in oklab, var(--accent), #FFFFFF 5.0%) 51.4%, color-mix(in oklab, var(--accent), #FFFFFF 1.3%) 55.7%, color-mix(in oklab, var(--accent), #FFFFFF 0.0%) 60.0%, var(--accent) 100%); }
@media (max-width: 640px) { .jhero.hc .in { padding-bottom: 200px; } }
.band2 { background: var(--bg1); }

/* Tout en blanc au milieu */
body, body[data-pal] { --bg1: #FFFFFF; --bg2: #FFFFFF; --bg: #FFFFFF; }
html, body { background: #FFFFFF; }
.band1, .band2 { background: #FFFFFF; }
.band1 .city, .band1 .svc2, .band1 .g, .band1 .rc, .band2 .city, .band2 .svc2, .band2 .g, .band2 .rc, .s3, .trip { background: #FFFFFF; border: 1px solid #ECECEC; box-shadow: 0 10px 28px rgba(0,0,0,0.06); }
.popgrid { background: #F6F6F6; }

/* Formulaire de recherche façon Airbnb */
.jhero.hc .in.hsplit { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); justify-items: stretch; text-align: left; gap: 64px; align-items: center; padding-top: 64px; }
.htext { display: flex; flex-direction: column; align-items: flex-start; }
.htext h1 { font-size: clamp(32px, 4.4vw, 54px) !important; margin-top: 20px !important; }
.htext p { margin-left: 0 !important; }
.htext .heroline { margin-top: 22px; }
.scard { background: #FFFFFF; color: #222222; border-radius: 20px; padding: 30px 28px 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.22); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.scard h2 { font-size: 32px; line-height: 1.08; font-weight: 900; color: #222222; margin: 0; }
.scard > p { margin: 2px 0 8px !important; font-size: 16px !important; color: #6A6A6A !important; line-height: 1.45 !important; max-width: none !important; }
.fld { border: 1px solid #B0B0B0; border-radius: 12px; padding: 10px 14px 8px; display: flex; flex-direction: column; transition: border-color 0.15s, box-shadow 0.15s; }
.fld:focus-within { border-color: #222222; box-shadow: 0 0 0 1px #222222; }
.fld.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; }
.fld.two > div { padding: 10px 14px 8px; display: flex; flex-direction: column; min-width: 0; }
.fld.two > div + div { border-left: 1px solid #DDDDDD; }
.fld label { font-size: 12px; font-weight: 700; color: #222222; }
.fld input, .fld select { border: 0; background: transparent; font: inherit; font-size: 16px; color: #222222; padding: 4px 0 2px; width: 100%; outline: none; }
.fld input::placeholder { color: #6A6A6A; }
.fld select { cursor: pointer; }
.sgo { margin-top: 6px; height: 54px; border: 0; border-radius: 12px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dk) 100%); color: #FFFFFF; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; transition: filter 0.15s; }
.sgo:hover { filter: brightness(1.06); }
.serr { min-height: 0; font-size: 13px; color: #C62828; font-weight: 600; }
@media (max-width: 960px) { .jhero.hc .in.hsplit { grid-template-columns: minmax(0, 1fr); gap: 36px; } .htext { order: -1; } }
@media (max-width: 640px) { .scard { padding: 24px 18px 18px; } .scard h2 { font-size: 26px; } }

/* Les réponses à vos questions */
.faqw { max-width: 860px; }
.ftabs { display: flex; justify-content: center; gap: 6px; margin: -4px auto 24px; background: #F2F2F2; border-radius: 999px; padding: 5px; width: fit-content; }
.ftab { border: 0; background: transparent; border-radius: 999px; padding: 10px 20px; font: inherit; font-size: 14px; font-weight: 800; color: var(--muted); cursor: pointer; }
.ftab[aria-selected="true"] { background: #FFFFFF; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.faq { display: flex; flex-direction: column; gap: 12px; }
.fq { background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.04); transition: box-shadow 0.15s; }
.fq[open] { box-shadow: 0 10px 28px rgba(0,0,0,0.08); border-color: color-mix(in oklab, var(--accent), #FFFFFF 70%); }
.fq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-size: 17px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.fq summary::-webkit-details-marker { display: none; }
.fq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
.pm { width: 30px; height: 30px; flex-shrink: 0; border-radius: 15px; background: color-mix(in oklab, var(--accent), #FFFFFF 86%); position: relative; transition: transform 0.2s, background 0.2s; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--accent); border-radius: 1px; transform: translate(-50%, -50%); }
.pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.2s; }
.fq[open] .pm { background: var(--accent); }
.fq[open] .pm::before, .fq[open] .pm::after { background: #FFFFFF; }
.fq[open] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.fq p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 70ch; }
.fmore { text-align: center; margin: 26px 0 0; color: var(--muted); }
.lnk { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .fq summary { font-size: 16px; padding: 18px; } .fq p { padding: 0 18px 18px; } }

/* ---------- Site du laveur ---------- */
.ps { container-type: inline-size; background: #FFFFFF; color: #0B2540; text-align: left; }
.ps-nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 18px; padding: 14px 28px; background: rgba(255,255,255,0.97); border-bottom: 1px solid #ECECEC; }
.ps-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-right: auto; min-width: 0; }
.ps-brand b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-logo { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: #FFFFFF; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.ps-nav nav { display: flex; gap: 18px; }
.ps-nav nav button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: #3F5A73; cursor: pointer; padding: 4px 0; }
.ps-nav nav button:hover { color: var(--accent); }
.ps-cta { flex: none; border: 0; border-radius: 999px; background: var(--accent); color: #FFFFFF; font: inherit; font-weight: 800; font-size: 14px; padding: 10px 18px; cursor: pointer; }
.ps-hero { position: relative; color: #FFFFFF; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dk) 100%); background-size: cover; background-position: center; padding: 88px 28px 96px; overflow: hidden; }
.ps-hero::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -160px; top: -220px; background: rgba(255,255,255,0.08); }
.ps-bgv, .ps-bgi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.ps-ov { position: absolute; inset: 0; }
.ps-hero.media::before { display: none; }
.ps-hero.media { min-height: 480px; display: flex; align-items: center; }
.ps-hero.media .ps-hin { width: 100%; }
.ps [data-ce] { border-radius: 6px; outline: 2px dashed transparent; outline-offset: 3px; cursor: text; transition: outline-color 0.15s; }
.ps [data-ce]:hover { outline-color: rgba(59,148,240,0.55); }
.ps .ps-hero [data-ce]:hover, .ps .ps-foot [data-ce]:hover { outline-color: rgba(255,255,255,0.75); }
.ps [data-ce]:focus { outline: 2px solid var(--accent); }
.ps .ps-hero [data-ce]:focus, .ps .ps-foot [data-ce]:focus { outline: 2px solid #FFFFFF; }
.sbody input.srange, .sf input.srange { width: 100%; accent-color: var(--accent); border: 0; padding: 0; background: transparent; }
.stip { flex: 1; min-width: 180px; }
.haslogo { background-color: #FFFFFF !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; background-origin: content-box !important; padding: 3px !important; box-sizing: border-box !important; color: transparent !important; box-shadow: inset 0 0 0 1px #DCE6F2 !important; }
.scadre { margin-top: 12px; border: 1px solid #D6E6F5; border-radius: 12px; padding: 12px; background: #F8FBFF; display: grid; gap: 8px; }
.scadre .sch { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.scadre .shint { margin: 0; }
.scr label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.scr input.srange { width: 100%; accent-color: var(--accent); border: 0; padding: 0; background: transparent; min-height: 28px; }
.scf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.scsw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #C9D6E2; cursor: pointer; padding: 0; }
.scsw.no { background: repeating-linear-gradient(45deg, #FFFFFF 0 5px, #E3ECF5 5px 10px); }
.scsw[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ps-hin { position: relative; max-width: 980px; margin: 0 auto; }
.ps-chip { display: inline-block; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; }
.ps-hero h1 { font-size: clamp(32px, 6cqi, 60px); font-weight: 800; margin: 18px 0 10px; line-height: 1.05; color: #FFFFFF; overflow-wrap: anywhere; }
.ps-hero p { font-size: 19px; max-width: 42ch; margin: 0 0 26px; opacity: 0.95; }
.ps-hbtns { display: flex; gap: 12px; flex-wrap: wrap; }
.ps-btn { border-radius: 999px; padding: 14px 24px; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; border: 2px solid #FFFFFF; }
.ps-btn.w { background: #FFFFFF; color: var(--accent-dk); }
.ps-btn.o { background: transparent; color: #FFFFFF; }
.ps-trust { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 28px; font-size: 14px; font-weight: 700; opacity: 0.95; }
.ps-sec { padding: 72px 28px; scroll-margin-top: 70px; }
.ps-sec.alt { background: #F4F9FE; }
.ps-w { max-width: 980px; margin: 0 auto; }
.ps-eb { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ps h2 { font-size: clamp(26px, 4cqi, 36px); font-weight: 800; margin: 8px 0 24px; color: #0B2540; }
.ps-story .ps-w { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 44px; align-items: center; }
.ps-portrait { aspect-ratio: 4 / 5; border-radius: 24px; background: linear-gradient(160deg, #EAF3FE, #C4E3F8); background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; position: relative; overflow: hidden; }
.ps-portrait .ini { width: 96px; height: 96px; border-radius: 50%; background: var(--accent); color: #FFFFFF; display: grid; place-items: center; font-size: 34px; font-weight: 800; }
.ps-portrait small { font-weight: 700; color: #3F5A73; }
.ps-portrait.has small { position: absolute; left: 12px; bottom: 12px; background: #FFFFFF; border-radius: 999px; padding: 6px 12px; color: #0B2540; }
.ps-story p { font-size: 17px; line-height: 1.7; color: #3F5A73; margin: 0 0 14px; }
.ps-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ps-vid { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ps-vph, .ps-vid video { aspect-ratio: 4 / 5; width: 100%; border-radius: 20px; background: linear-gradient(160deg, var(--accent), var(--accent-dk)); display: flex; align-items: center; justify-content: center; object-fit: cover; }
.ps-vid video { background: #0B2540; }
.ps-vph .play { width: 60px; height: 60px; border-radius: 50%; background: #FFFFFF; color: var(--accent); display: grid; place-items: center; }
.ps-vt { font-weight: 800; }
.ps-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.ps-price { background: #FFFFFF; border: 1px solid #E3ECF5; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 24px rgba(11,37,64,0.06); }
.ps-price.sel { border: 2px solid var(--accent); }
.ps-price b { font-size: 18px; }
.ps-price .amt { font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.ps-price .du { color: #3F5A73; font-weight: 700; }
.ps-price p { margin: 4px 0 0; color: #3F5A73; font-size: 14px; flex: 1; }
.ps-price button { margin-top: 10px; border: 2px solid var(--accent); background: #FFFFFF; color: var(--accent); border-radius: 12px; padding: 11px; font: inherit; font-weight: 800; cursor: pointer; }
.ps-price.sel button { background: var(--accent); color: #FFFFFF; }
.ps-note { color: #3F5A73; font-size: 14px; margin: 14px 0 0; }
.ps-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ps-steps li { background: #FFFFFF; border: 1px solid #E3ECF5; border-radius: 20px; padding: 22px; }
.ps-steps .n { width: 40px; height: 40px; border-radius: 50%; background: #EAF3FE; color: var(--accent); display: grid; place-items: center; font-weight: 800; margin-bottom: 12px; }
.ps-steps b { display: block; font-size: 16px; margin-bottom: 6px; }
.ps-steps p { margin: 0; color: #3F5A73; font-size: 14px; line-height: 1.55; }
.ps-infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ps-info { border-radius: 18px; background: #F4F9FE; padding: 20px; }
.ps-info small { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 6px; }
.ps-info div { font-weight: 700; }
.ps-revs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ps-rev { background: #FFFFFF; border: 1px solid #E3ECF5; border-radius: 18px; padding: 20px; }
.ps-rev .st { color: #F5A623; letter-spacing: 2px; }
.ps-rev small { color: #8A9AAB; }
.ps-rev p { margin: 8px 0 0; color: #3F5A73; }
.ps-empty { border: 2px dashed #C9DDF0; border-radius: 18px; padding: 26px; color: #3F5A73; text-align: center; background: #FFFFFF; grid-column: 1 / -1; }
.ps-foot { background: linear-gradient(135deg, var(--accent), var(--accent-dk)); color: #FFFFFF; text-align: center; padding: 64px 28px; }
.ps-foot h2 { color: #FFFFFF; }
.ps-foot small { display: block; margin-top: 18px; opacity: 0.8; }
@container (max-width: 760px) {
  .ps-nav nav { display: none; } .ps-nav { padding: 12px 16px; } .ps-hero { padding: 56px 18px 64px; } .ps-hero p { font-size: 16px; } .ps-sec { padding: 48px 18px; }
  .ps-story .ps-w { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ps-portrait { max-width: 220px; } .ps-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-steps, .ps-infos, .ps-revs { grid-template-columns: minmax(0, 1fr); }
}
@container (min-width: 761px) and (max-width: 1000px) { .ps-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vit2 { flex: 1; padding-bottom: 90px; }
.vit2 .vback { padding: 14px 24px; background: #FFFFFF; }
.vit2 .ps-nav { top: 68px; }
.vit2 .ps-sec { scroll-margin-top: 150px; }
.sitebar ~ .ps .ps-sec { scroll-margin-top: 200px; }
.sitebar { position: sticky; top: 68px; z-index: 6; background: #0B2540; color: #FFFFFF; display: flex; align-items: center; gap: 10px; padding: 10px 24px; flex-wrap: wrap; }
.sitebar span { font-weight: 800; margin-right: auto; }
.sitebar + .ps .ps-nav { top: 122px; }
/* ---------- Atelier de création ---------- */
.studio { flex: 1; width: 100%; max-width: 1500px; margin: 0 auto; padding: 28px 24px 120px; display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 28px; align-items: start; }
.sed { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sed h1 { font-size: 30px; font-weight: 800; margin: 0; }
.sbox { background: #FFFFFF; border: 1px solid #E6EDF4; border-radius: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.sbox summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.sbox summary::-webkit-details-marker { display: none; }
.sbox summary .n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #EAF3FE; color: var(--accent); display: grid; place-items: center; font-size: 13px; }
.sbox summary::after { content: "+"; margin-left: auto; font-size: 22px; line-height: 1; color: var(--accent); }
.sbox[open] summary::after { content: "–"; }
.sbody { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.sf label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.sbody input:not([type=file]):not([type=number]), .sbody textarea, .sf input { width: 100%; border: 1px solid #D5E3F0; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink); background: #FFFFFF; box-sizing: border-box; }
.sbody textarea { resize: vertical; line-height: 1.5; }
.sbody input:focus, .sbody textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.sfrow { display: flex; gap: 8px; flex-wrap: wrap; }
.sfile { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--accent); color: var(--accent); border-radius: 10px; padding: 9px 12px; font-weight: 800; font-size: 13px; cursor: pointer; background: #F4F9FE; white-space: nowrap; }
.sfile input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.svrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.sx { border: 0; background: #F1F4F7; border-radius: 8px; width: 36px; height: 38px; cursor: pointer; font-size: 18px; color: #3F5A73; }
.sadd { border: 1px dashed #B9D9F0; background: #FFFFFF; border-radius: 10px; padding: 10px; font: inherit; font-weight: 800; color: var(--accent); cursor: pointer; }
.sprice { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #EEF3F8; }
.sprice:first-child { border-top: 0; padding-top: 0; }
.sprow { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px; gap: 10px; align-items: center; }
.sprice .sinc { font-size: 13px !important; color: var(--muted) !important; }
.sstep { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #EEF3F8; }
.sstep:first-child { border-top: 0; padding-top: 0; }
.shint { font-size: 13px; color: var(--muted); margin: 0; }
.sprev { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stool { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg { display: flex; background: #FFFFFF; border: 1px solid #E6EDF4; border-radius: 10px; overflow: hidden; }
.seg button { border: 0; background: #FFFFFF; font: inherit; font-size: 13px; font-weight: 800; padding: 8px 14px; cursor: pointer; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #FFFFFF; }
.stool .sp { margin-left: auto; }
.sframe { background: #FFFFFF; border: 1px solid #DCE6F0; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(11,37,64,0.12); margin: 0 auto; width: 100%; }
.sframe.mob { width: 390px; max-width: 100%; border-radius: 28px; }
.schrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F3F6F9; border-bottom: 1px solid #E3EAF1; }
.schrome i { width: 10px; height: 10px; border-radius: 50%; background: #D9DEE4; }
.schrome span { margin-left: 10px; flex: 1; min-width: 0; background: #FFFFFF; border-radius: 8px; padding: 5px 10px; font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sscroll { height: calc(100vh - 230px); min-height: 480px; overflow-y: auto; }
@media (max-width: 1000px) { .studio { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 120px; } .sprev { position: static; } .sscroll { height: 75vh; } }

/* ---------- Carte JMap ---------- */
.jmbox { position: relative; background: #A9D3F5; }
.jmbox.jm-dark { background: #16263A; }
.jmcanvas, .jmcanvas.jm { position: absolute; inset: 0; }
.jm-card[hidden], .jm-pin[hidden] { display: none; }
.carte-page .csearch { display: none; }
.jm { position: relative; overflow: hidden; touch-action: none; outline: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.jmbox:not(.full) .jm { touch-action: pan-y; }
.jm.jm-drag { cursor: grabbing; }
.jm:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.jm-c { display: block; }
.jm-pins { position: absolute; inset: 0; pointer-events: none; }
.jm-pin, .jm-cl { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; }
.jm-pin { border: 0; background: none; padding: 0; font: inherit; }
.jm-pin .jp { position: relative; display: inline-flex; align-items: center; gap: 6px; transform: translate(-50%, calc(-100% - 7px)); background: #FFFFFF; color: #0B2540; border-radius: 999px; padding: 3px 10px 3px 3px; box-shadow: 0 3px 12px rgba(11,37,64,0.28); font-weight: 800; font-size: 13px; white-space: nowrap; transition: transform 0.15s, background 0.15s; }
.jm-pin .jp::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #FFFFFF; border-bottom: 0; }
.jm-pin .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #FFFFFF; background: var(--accent); }
.jm-pin .av.c1 { background: #12A37A; } .jm-pin .av.c2 { background: #E8833A; } .jm-pin .av.c3 { background: #7E5BD8; }
.jm-pin:hover .jp, .jm-pin.on .jp { background: var(--accent); color: #FFFFFF; transform: translate(-50%, calc(-100% - 7px)) scale(1.08); }
.jm-pin:hover .jp::after, .jm-pin.on .jp::after { border-top-color: var(--accent); }
.jm-pin:hover .av, .jm-pin.on .av { background: #FFFFFF; color: var(--accent); }
.jm-pin.on { z-index: 3; }
.jm-pin:focus-visible .jp { outline: 3px solid #0B2540; outline-offset: 2px; }
.jm-cl { border-radius: 50%; background: var(--accent); color: #FFFFFF; border: 3px solid #FFFFFF; box-shadow: 0 4px 14px rgba(33,121,214,0.45); display: grid; place-items: center; padding: 0; }
.jm-ctl { position: absolute; z-index: 5; }
.jm-ctl button { font: inherit; cursor: pointer; }
.jm-search { top: 14px; left: 14px; width: min(400px, calc(100% - 28px)); background: #FFFFFF; border-radius: 14px; box-shadow: 0 4px 18px rgba(11,37,64,0.18); display: flex; align-items: center; flex-wrap: wrap; }
.jm-si { padding: 0 4px 0 14px; color: var(--accent); display: grid; place-items: center; }
.jm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 14px 12px 14px 6px; font: inherit; font-size: 15px; color: #0B2540; }
.jm-sug { flex-basis: 100%; display: flex; flex-direction: column; border-top: 1px solid #EEF2F6; }
.jm-sug:empty { display: none; }
.jm-sug button { display: flex; align-items: baseline; gap: 8px; text-align: left; border: 0; background: #FFFFFF; padding: 11px 16px; color: #0B2540; }
.jm-sug button:last-child { border-radius: 0 0 14px 14px; }
.jm-sug button:hover, .jm-sug button:focus-visible { background: #EAF3FE; outline: 0; }
.jm-sug small { color: #6B7A89; font-size: 12px; }
.jm-views { top: 14px; right: 14px; display: flex; background: #FFFFFF; border-radius: 12px; box-shadow: 0 3px 12px rgba(11,37,64,0.16); overflow: hidden; }
.jmbox:not(.full) .jm-views { top: 12px; left: 12px; right: auto; }
.jm-views button { border: 0; background: #FFFFFF; padding: 9px 13px; font-weight: 800; font-size: 13px; color: #0B2540; }
.jm-views button + button { border-left: 1px solid #EEF2F6; }
.jm-views button:hover { background: #EAF3FE; }
.jm-zoom, .jm-side { right: 14px; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 12px; box-shadow: 0 3px 12px rgba(11,37,64,0.16); overflow: hidden; }
.jm-zoom { bottom: 34px; }
.jm-side { bottom: 132px; }
.jm-zoom button, .jm-side button { width: 42px; height: 42px; border: 0; background: #FFFFFF; color: #0B2540; display: grid; place-items: center; }
.jm-zoom button + button, .jm-side button + button { border-top: 1px solid #EEF2F6; }
.jm-zoom button:hover, .jm-side button:hover { background: #EAF3FE; color: var(--accent); }
.jmbox:not(.full) .jm-side { display: none; }
.jm-scale { position: absolute; left: 14px; bottom: 12px; z-index: 4; font-size: 11px; font-weight: 700; color: #3C4043; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.jm-scale i { display: block; height: 6px; border: 2px solid #3C4043; border-top: 0; background: rgba(255,255,255,0.6); }
.jm-attr { position: absolute; right: 14px; bottom: 8px; z-index: 4; font-size: 10px; color: #5F6368; background: rgba(255,255,255,0.75); padding: 1px 6px; border-radius: 4px; pointer-events: none; }
.jm-card { position: absolute; left: 14px; bottom: 34px; z-index: 6; width: min(370px, calc(100% - 28px)); background: #FFFFFF; border-radius: 18px; box-shadow: 0 12px 36px rgba(11,37,64,0.25); padding: 16px; display: flex; flex-direction: column; gap: 12px; color: #0B2540; }
.jm-card .x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #F1F4F7; font-size: 18px; cursor: pointer; color: #3C4043; }
.jc-head { display: flex; gap: 12px; align-items: center; padding-right: 30px; }
.jc-head .mono { width: 46px; height: 46px; border-radius: 14px; font-size: 15px; flex: none; }
.jc-head b { font-size: 17px; }
.jc-row { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.jc-row span { background: #F4F8FC; border-radius: 999px; padding: 5px 10px; }
.jc-act { display: flex; gap: 8px; }
.jc-act .btn { flex: 1; justify-content: center; }
.jm-dark .jm-search, .jm-dark .jm-views, .jm-dark .jm-zoom, .jm-dark .jm-side, .jm-dark .jm-views button, .jm-dark .jm-zoom button, .jm-dark .jm-side button, .jm-dark .jm-sug button { background: #2B2F35; color: #E8EAED; border-color: #3A3F46; }
.jm-dark .jm-search input { color: #E8EAED; }
.jm-dark .jm-scale { color: #E8EAED; } .jm-dark .jm-scale i { border-color: #E8EAED; background: rgba(0,0,0,0.3); }
.jm-dark .jm-attr { background: rgba(0,0,0,0.45); color: #C9CDD2; }
.jm-coop { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: rgba(11,37,64,0.45); color: #FFFFFF; font-weight: 800; font-size: 16px; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.jm-coop.on { opacity: 1; }
@media (max-width: 640px) {
  .full .jm-views { top: 70px; left: 14px; right: auto; }
  .jm-views button { padding: 8px 10px; font-size: 12px; }
  .jm-card { bottom: 14px; }
}

/* ---------- Coach IA ---------- */
.co-promo { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 22px; border-radius: 18px; background: linear-gradient(135deg, #EAF3FE 0%, #FFFFFF 100%); border: 1px solid #CFE3FA; }
.co-promo > div { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 240px; }
.co-promo b { font-size: 18px; }
.co-promo span { color: var(--muted); }
.co-badge { align-self: flex-start; background: var(--accent); color: #FFFFFF !important; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.coach { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 24px 24px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.co-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 88px; }
.co-side h1 { font-size: 30px; font-weight: 800; margin: 2px 0 0; }
.co-me { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid #E6EDF4; border-radius: 14px; background: #FFFFFF; }
.co-me .mono { width: 42px; height: 42px; border-radius: 12px; flex: none; }
.co-lbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7A89; margin-top: 4px; }
.co-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.co-topic { border: 1px solid #D5E3F0; background: #FFFFFF; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; color: #0B2540; cursor: pointer; }
.co-topic:hover { border-color: var(--accent); background: #EAF3FE; }
.co-tool { border: 1px solid #E6EDF4; border-radius: 16px; background: #FFFFFF; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.co-tool p { margin: 0; }
.co-file { align-self: flex-start; }
.co-thumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.co-thumbs:empty { display: none; }
.co-thumbs figure { margin: 0; width: 64px; }
.co-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.co-thumbs figcaption { font-size: 11px; color: #6B7A89; text-align: center; }
.co-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.co-lab { font-size: 13px; font-weight: 800; }
.co-row select { border: 1px solid #D5E3F0; border-radius: 10px; padding: 8px 10px; font: inherit; font-weight: 700; background: #FFFFFF; color: #0B2540; }
.co-chat { display: flex; flex-direction: column; gap: 10px; min-width: 0; height: calc(100vh - 120px); min-height: 520px; background: #FFFFFF; border: 1px solid #E6EDF4; border-radius: 20px; box-shadow: 0 10px 30px rgba(11,37,64,0.06); padding: 16px; }
.co-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px; }
.co-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 860px; }
.co-msg.me { align-self: flex-end; }
.co-msg.me .co-bub { background: var(--accent); color: #FFFFFF; border-radius: 18px 18px 4px 18px; }
.co-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dk)); color: #FFFFFF; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.co-bub { background: #F4F8FC; border-radius: 18px 18px 18px 4px; padding: 12px 16px; line-height: 1.55; font-size: 15px; color: #0B2540; min-width: 0; overflow-wrap: anywhere; }
.co-bub p { margin: 0 0 8px; } .co-bub p:last-child { margin-bottom: 0; }
.co-bub ul, .co-bub ol { margin: 4px 0 8px; padding-left: 20px; } .co-bub li { margin: 3px 0; }
.co-bub h4 { margin: 10px 0 6px; font-size: 15px; }
.co-bub code { background: #E3ECF5; border-radius: 4px; padding: 1px 4px; }
.co-think { color: #6B7A89; font-style: italic; animation: coPulse 1.4s ease-in-out infinite; }
@keyframes coPulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .co-think { animation: none; } }
.co-err { color: #C62828; font-weight: 700; font-size: 14px; margin: 8px 0 0; }
.co-off { align-self: center; max-width: 520px; text-align: center; font-size: 14px; color: #5B6F83; background: #FFF8E6; border: 1px solid #F4DFA6; border-radius: 12px; padding: 10px 14px; }
.co-input { display: flex; gap: 8px; align-items: flex-end; border: 2px solid #D5E3F0; border-radius: 16px; padding: 8px; background: #FFFFFF; }
.co-input:focus-within { border-color: var(--accent); }
.co-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; font: inherit; font-size: 15px; padding: 8px 6px; color: #0B2540; background: transparent; max-height: 160px; }
#coStop[hidden] { display: none; }
.co-foot { margin: 0; font-size: 12px; color: #6B7A89; text-align: center; }
@media (max-width: 900px) { .coach { grid-template-columns: minmax(0, 1fr); padding: 16px; } .co-side { position: static; } .co-chat { height: 75vh; } }

/* ---------- Bouton IA (espace laveur) ---------- */
.ai-fab { display: none; position: fixed; top: calc(80px + env(safe-area-inset-top, 0px)); right: 24px; z-index: 30; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; text-align: left; color: #FFFFFF;
  background: linear-gradient(120deg, #6D5BF5 0%, #3B94F0 55%, #22C1C3 100%); box-shadow: 0 10px 28px rgba(76,90,230,0.38); transition: transform 0.15s, box-shadow 0.15s; }
body.zpro .ai-fab { display: inline-flex; }
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(76,90,230,0.48); }
.ai-fab:focus-visible { outline: 3px solid #0B2540; outline-offset: 3px; }
.ai-orb { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.22); display: grid; place-items: center; flex: none; }
.ai-ico { animation: aiTw 2.6s ease-in-out infinite; }
@keyframes aiTw { 50% { transform: scale(1.12) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .ai-ico { animation: none; } }
.ai-txt { display: flex; flex-direction: column; line-height: 1.2; }
.ai-txt b { font-size: 16px; font-weight: 800; }
.ai-txt small { font-size: 12px; opacity: 0.92; }
@media (max-width: 700px) {
  .ai-fab { top: auto; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); right: 16px; padding: 6px 14px 6px 6px; }
  .ai-txt small { display: none; }
  .ai-orb { width: 36px; height: 36px; }
}
.co-iatag { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 8px; font-size: 13px; font-weight: 800; color: #FFFFFF; padding: 4px 10px; border-radius: 999px; background: linear-gradient(120deg, #6D5BF5 0%, #3B94F0 60%, #22C1C3 100%); }
.co-av { background: linear-gradient(135deg, #6D5BF5 0%, #3B94F0 60%, #22C1C3 100%) !important; }
.co-badge { background: linear-gradient(120deg, #6D5BF5 0%, #3B94F0 60%, #22C1C3 100%) !important; }

/* ---------- Coach en onglets ---------- */
.coach2 { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 18px; }
.co-head h1 { font-size: clamp(28px, 4vw, 36px); font-weight: 800; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.co-head .sub { margin-top: 6px; }
.co-iatag svg { margin-right: 2px; }
.co-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.co-tab { flex: 1 0 150px; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid #DCE6F0; background: #FFFFFF; border-radius: 14px; padding: 12px 14px; font: inherit; color: #0B2540; cursor: pointer; }
.co-tab b { font-size: 15px; } .co-tab small { font-size: 12px; color: #6B7A89; }
.co-tab:hover { border-color: var(--accent); }
.co-tab[aria-selected="true"] { border-color: transparent; background: linear-gradient(120deg, #6D5BF5 0%, #3B94F0 60%, #22C1C3 100%); color: #FFFFFF; box-shadow: 0 8px 20px rgba(76,90,230,0.25); }
.co-tab[aria-selected="true"] small { color: rgba(255,255,255,0.88); }
.co-panel { display: flex; flex-direction: column; gap: 12px; }
.coach2 .co-chat { height: 62vh; min-height: 460px; }
.co-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.co-sugg[hidden] { display: none; }
.co-chip { border: 1px solid #D5E3F0; background: #FFFFFF; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; color: #0B2540; cursor: pointer; }
.co-chip:hover { border-color: var(--accent); background: #EAF3FE; }
.co-tool2 { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.co-left { display: flex; flex-direction: column; gap: 12px; }
.co-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; background: #FFFFFF; border: 1px solid #E6EDF4; border-radius: 16px; padding: 16px; }
.co-step > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.co-step > div > b { font-size: 16px; }
.co-step p { margin: 0; }
.co-n { width: 30px; height: 30px; border-radius: 50%; background: #EAF3FE; color: var(--accent-dk); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.co-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.co-act { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 1px solid #DCE6F0; background: #F8FBFE; border-radius: 12px; padding: 12px; font: inherit; color: #0B2540; cursor: pointer; }
.co-act b { font-size: 14px; } .co-act small { font-size: 12px; color: #6B7A89; }
.co-act:hover:not(:disabled) { border-color: var(--accent); background: #EAF3FE; }
.co-act:disabled { opacity: 0.5; cursor: not-allowed; }
.co-row select { min-width: 0; max-width: 100%; flex: 1 1 160px; }
.co-row { min-width: 0; }
.co-flist { display: flex; flex-direction: column; gap: 6px; }
.co-flist div { display: flex; justify-content: space-between; border-bottom: 1px dashed #E3ECF5; padding-bottom: 6px; }
.co-flist b { color: var(--accent-dk); }
.co-res { position: sticky; top: 88px; background: #FFFFFF; border: 1px solid #E6EDF4; border-radius: 18px; box-shadow: 0 10px 30px rgba(11,37,64,0.06); display: flex; flex-direction: column; min-height: 320px; }
.co-res-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #EEF3F8; }
.co-res-h b { flex: 1; font-size: 16px; }
.co-res-h .co-av { width: 30px; height: 30px; }
.co-res-b { padding: 14px 18px; line-height: 1.6; font-size: 15px; color: #0B2540; overflow-wrap: anywhere; max-height: 62vh; overflow-y: auto; }
.co-res-b p { margin: 0 0 8px; } .co-res-b ul, .co-res-b ol { margin: 4px 0 10px; padding-left: 20px; } .co-res-b li { margin: 3px 0; } .co-res-b h4 { margin: 12px 0 6px; }
.co-empty { color: #6B7A89; text-align: center; padding: 50px 10px; }
.co-res-f { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #EEF3F8; flex-wrap: wrap; }
.co-res-f[hidden], #coStop2[hidden] { display: none; }
.co-off { margin: 0; }
@media (max-width: 900px) { .co-tool2 { grid-template-columns: minmax(0, 1fr); } .co-res { position: static; } .co-tab { flex-basis: 132px; } .coach2 { padding: 18px 16px 110px; } }
@media (max-width: 420px) { .co-acts { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Espace pro ---------- */
body.pmode .ai-fab { display: none !important; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--accent-dk); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.top .ai-link { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.18); }
.top .link[aria-current="page"] { background: rgba(255,255,255,0.24); }
.top .pro-exit { background: rgba(255,255,255,0.14); color: #FFFFFF; border-color: rgba(255,255,255,0.4); }
.pro-wrap { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 24px 48px; display: flex; flex-direction: column; gap: 20px; }
.pro-hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pro-hello h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; margin: 6px 0 0; }
.pro-hello .sub { margin: 6px 0 0; }
.pro-kpis { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pro-kpi { background: #FFFFFF; border: 1px solid #E6EDF4; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.pro-kpi small { color: #6B7A89; font-weight: 700; font-size: 13px; }
.pro-kpi b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pro-ex { position: absolute; top: -12px; right: 8px; }
.pro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pro-card { background: #FFFFFF; border: 1px solid #E6EDF4; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.pro-ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pro-ch h2 { font-size: 18px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.pro-r, .pro-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pro-r { padding: 8px 0; border-top: 1px solid #EEF3F8; }
.pro-d { width: 52px; height: 52px; border-radius: 12px; background: #EAF3FE; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.pro-d b { font-size: 18px; } .pro-d small { font-size: 11px; color: #6B7A89; }
.pro-ri { display: flex; flex-direction: column; min-width: 0; } .pro-ri small { color: #6B7A89; }
.pro-st { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pro-st.new { background: #FFF1D6; color: #9A5B00; } .pro-st.ok { background: #E3F6EC; color: #137A45; } .pro-st.done { background: #EEF2F6; color: #44566A; }
.pro-ai { background: linear-gradient(160deg, #F3F0FF 0%, #EAF3FE 60%, #E6FAFA 100%); border-color: #D9D3FB; }
.pro-tip { margin: 0; line-height: 1.55; }
.pro-aiacts { display: flex; gap: 8px; flex-wrap: wrap; }
.pro-url { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--accent-dk); }
.pro-rev { padding: 6px 0; border-top: 1px solid #EEF3F8; } .pro-rev small { color: #6B7A89; }
.pro-stars { color: #F5A623; letter-spacing: 1px; }
.pro-list { display: flex; flex-direction: column; gap: 10px; }
.pro-ra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pro-tabbar { display: none; }
@media (max-width: 860px) {
  .pro-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pro-grid { grid-template-columns: minmax(0, 1fr); }
  .pro-row { grid-template-columns: 52px minmax(0, 1fr); } .pro-row .pro-ra { grid-column: 1 / -1; justify-content: flex-start; }
  .pro-wrap { padding: 20px 16px 110px; }
  body.pmode .pro-tabbar:not([hidden]) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #FFFFFF; border-top: 1px solid #E3ECF5; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 20px rgba(0,0,0,0.06); }
  .pro-tabbar button { border: 0; background: none; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: #6B7A89; padding: 4px 0; cursor: pointer; }
  .pro-tabbar button[aria-current="page"] { color: var(--accent-dk); }
  .pro-tabbar button.ai { color: #6D5BF5; }
  body.pmode .top .pro-exit { display: inline-flex; }
  .pe-long { display: none; }
  .top .ai-link { display: none; }
  .co-tab { flex: 0 0 auto; padding: 10px 14px; } .co-tab small { display: none; }
}

/* ---------- Historique du coach ---------- */
.coach3 { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 0; align-items: start; }
.coach3 .coach2 { max-width: none; margin: 0; }
.co-hwrap { position: sticky; top: 76px; padding: 28px 0 24px 24px; max-height: calc(100vh - 76px); overflow-y: auto; }
.co-hdet { background: #FFFFFF; border: 1px solid #E6EDF4; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.co-hdet > summary { list-style: none; display: flex; flex-direction: column; cursor: default; margin-bottom: 10px; }
.co-hdet > summary::-webkit-details-marker { display: none; }
.co-hdet > summary span { font-weight: 800; font-size: 16px; } .co-hdet > summary small { color: #6B7A89; font-size: 12px; }
.co-new { width: 100%; justify-content: center; margin-bottom: 10px; }
.co-hist { display: flex; flex-direction: column; gap: 2px; }
.co-hg { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #8A97A5; margin: 10px 4px 4px; }
.co-hi { display: flex; flex-direction: column; gap: 1px; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; font: inherit; color: #0B2540; cursor: pointer; }
.co-hi b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-hi small { font-size: 11.5px; color: #8A97A5; }
.co-hi:hover { background: #F1F6FC; }
.co-hi.on { background: #EAF3FE; box-shadow: inset 3px 0 0 var(--accent); }
.co-hempty { color: #8A97A5; font-size: 13px; margin: 6px 4px; }
.co-hclear { align-self: flex-start; margin-top: 12px; font-size: 12px; color: #8A97A5; }
@media (max-width: 900px) {
  .coach3 { grid-template-columns: minmax(0, 1fr); }
  .co-hwrap { position: static; max-height: none; padding: 16px 16px 0; }
  .co-hdet > summary { cursor: pointer; margin-bottom: 0; }
  .co-hdet[open] > summary { margin-bottom: 10px; }
  .co-hdet > summary span::after { content: " ▾"; color: var(--accent); }
  .co-hist { max-height: 260px; overflow-y: auto; }
}

.city .img { height: 140px; }
.city .img::after { display: none; }
.city .img .cart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.4s ease; }
.city:hover .img .cart { transform: scale(1.05); }
.city .img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 100%); pointer-events: none; }
.city .img span { z-index: 2; text-shadow: 0 2px 8px rgba(0,0,0,0.35); font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .city:hover .img .cart { transform: none; } }

.cal { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; max-width: 520px; }
.cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-h b { font-size: 17px; }
.cal-nav { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.cal-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-w { text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); padding-bottom: 4px; }
.cal-d { aspect-ratio: 1; max-width: 100%; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font: inherit; font-size: 15px; font-weight: 800; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; }
.cal-d small { font-size: 9px; font-weight: 700; color: var(--muted); }
.cal-d:hover:not(:disabled) { border-color: var(--accent); }
.cal-d[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.cal-d[aria-pressed="true"] small { color: #FFFFFF; }
.cal-d.today { border-color: var(--accent); }
.cal-d:disabled { opacity: 0.35; cursor: not-allowed; border-style: dashed; }

.ou-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ou-search { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ou-search label { font-weight: 800; font-size: 14px; }
.ou-box { display: flex; align-items: center; gap: 8px; border: 2px solid var(--accent); border-radius: 14px; padding: 0 12px; background: var(--card); color: var(--accent); box-shadow: 0 6px 18px rgba(33,121,214,0.12); }
.ou-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 14px 0; font: inherit; font-size: 16px; color: var(--ink); }
.ou-sug { display: flex; flex-direction: column; background: var(--card); border-radius: 12px; overflow: hidden; }
.ou-sug:not(:empty) { border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(11,37,64,0.12); }
.ou-sug button { display: flex; justify-content: space-between; gap: 10px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: var(--card); padding: 12px 14px; font: inherit; color: var(--ink); cursor: pointer; }
.ou-sug button:last-child { border-bottom: 0; }
.ou-sug button:hover, .ou-sug button:focus-visible { background: #EAF3FE; outline: 0; }
.ou-sug small { color: var(--muted); }
.ou-ok { margin: 0; font-weight: 800; color: #137A45; }
.cal-sel { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-weight: 800; font-size: 16px; background: var(--card); color: var(--ink); max-width: 60%; }

/* ---------- Administration ---------- */
body.amode .top, body.amode .foot, body.amode .ai-fab, body.amode .pro-tabbar { display: none !important; }
.adm-login { flex: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: linear-gradient(160deg, #EAF3FE 0%, #FFFFFF 70%); }
.adm-lcard { width: min(420px, 100%); background: #FFFFFF; border: 1px solid #E3ECF5; border-radius: 22px; box-shadow: 0 20px 50px rgba(11,37,64,0.12); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.adm-lcard h1 { font-size: 26px; margin: 4px 0 0; }
.adm-logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-dk)); color: #FFFFFF; display: grid; place-items: center; font-weight: 900; font-size: 18px; flex: none; }
.adm { flex: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; background: #F6F8FB; }
.adm-side { position: sticky; top: 0; height: 100vh; background: #0F2238; color: #DCE6F0; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px; }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.adm-brand b { color: #FFFFFF; font-size: 17px; display: block; } .adm-brand small { color: #93A7BD; font-size: 12px; }
.adm-nav { display: flex; flex-direction: column; gap: 4px; }
.adm-nav button { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: transparent; color: #C9D6E3; font: inherit; font-weight: 700; font-size: 14px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.adm-nav button:hover { background: rgba(255,255,255,0.07); color: #FFFFFF; }
.adm-nav button[aria-current="page"] { background: rgba(59,148,240,0.22); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--accent); }
.adm-nav button.ai { color: #C6BDFB; }
.adm-badge { margin-left: auto; background: #F5A623; color: #1B1B1B; font-size: 11px; font-weight: 900; border-radius: 999px; padding: 1px 7px; }
.adm-sfoot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.adm-sfoot .linkbtn { color: #93A7BD; font-size: 13px; }
.adm-main { padding: 28px 28px 48px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.adm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.adm-head h1 { font-size: 28px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-head .sub { margin: 4px 0 0; }
.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.adm-kpi { background: #FFFFFF; border: 1px solid #E3ECF5; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-kpi small { color: #5B6F83; font-weight: 700; font-size: 13px; }
.adm-kpi b { font-size: 28px; font-weight: 800; color: #0B2540; font-variant-numeric: tabular-nums; }
.adm-kpi span { font-size: 12.5px; color: #6B7A89; font-weight: 700; }
.adm-kpi span.up { color: #137A45; } .adm-kpi span.down { color: #B3261E; } .adm-kpi span.warn { color: #9A5B00; }
.adm-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.adm-card { background: #FFFFFF; border: 1px solid #E3ECF5; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.adm-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.adm-ch h2 { font-size: 17px; font-weight: 800; margin: 0; }
.adm-chart { position: relative; }
.adm-chart svg { width: 100%; height: auto; display: block; }
.adm-gl { stroke: #EEF2F6; stroke-width: 1; }
.adm-ax { fill: #6B7A89; font-size: 11px; font-family: inherit; }
.adm-val { fill: #0B2540; font-size: 12px; font-weight: 800; font-family: inherit; }
.adm-area { fill: rgba(59,148,240,0.14); } .adm-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.adm-end { fill: var(--accent); stroke: #FFFFFF; stroke-width: 2; }
.adm-bar { fill: #B7D6F6; } .adm-bar.last { fill: var(--accent); } .adm-bar:hover { fill: var(--accent-dk); }
.adm-tipbox { position: absolute; pointer-events: none; background: #0F2238; color: #FFFFFF; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.adm-tipbox[hidden] { display: none; }
.adm-todo { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #EEF2F6; }
.adm-todo:first-of-type { border-top: 0; }
.adm-todo div { display: flex; flex-direction: column; } .adm-todo small { color: #6B7A89; }
.adm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .adm-dot.warn { background: #F5A623; } .adm-dot.ok { background: #20A464; }
.adm-cities { display: flex; flex-direction: column; gap: 10px; }
.adm-crow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 14px; }
.adm-crow b { text-align: right; font-variant-numeric: tabular-nums; }
.adm-cbar { height: 10px; background: #EEF2F6; border-radius: 999px; overflow: hidden; } .adm-cbar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.adm-pend { border-color: #F4DFA6; background: #FFFCF2; }
.adm-prow { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #F4E9C8; }
.adm-prow .mono { width: 42px; height: 42px; border-radius: 12px; } .adm-prow div { display: flex; flex-direction: column; min-width: 0; } .adm-prow small { color: #6B7A89; }
.adm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.adm-search { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #D5E3F0; border-radius: 12px; padding: 0 12px; color: #6B7A89; flex: 1 1 260px; max-width: 420px; }
.adm-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 11px 0; font: inherit; background: transparent; color: #0B2540; }
.adm-filt { display: flex; background: #FFFFFF; border: 1px solid #D5E3F0; border-radius: 12px; overflow: hidden; }
.adm-filt button { border: 0; background: #FFFFFF; padding: 9px 14px; font: inherit; font-weight: 700; font-size: 13px; color: #44566A; cursor: pointer; }
.adm-filt button[aria-pressed="true"] { background: var(--accent); color: #FFFFFF; }
.adm-table { background: #FFFFFF; border: 1px solid #E3ECF5; border-radius: 18px; overflow-x: auto; }
.adm-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.adm-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #6B7A89; padding: 12px 14px; border-bottom: 1px solid #E3ECF5; background: #FAFCFE; white-space: nowrap; }
.adm-table td { padding: 10px 14px; border-bottom: 1px solid #EEF2F6; vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-pn { display: flex; gap: 10px; align-items: center; } .adm-pn .mono { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; flex: none; } .adm-pn div { display: flex; flex-direction: column; } .adm-pn small { color: #6B7A89; font-size: 12px; }
.adm-st { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.adm-st.ok { background: #E3F6EC; color: #137A45; } .adm-st.sus { background: #FDE7E5; color: #B3261E; } .adm-st.prem { background: #EEE9FF; color: #5B45D6; } .adm-st.free { background: #EEF2F6; color: #44566A; }
.adm-empty { text-align: center; color: #6B7A89; padding: 30px !important; }
.adm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.adm-fields .field textarea { width: 100%; border: 1px solid #D5E3F0; border-radius: 10px; padding: 10px 12px; font: inherit; resize: vertical; }
.adm-mod { font-size: 11px; font-weight: 800; color: #5B45D6; background: #EEE9FF; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.adm-tip { margin: 0; display: flex; align-items: center; gap: 8px; color: #5B45D6; font-weight: 700; font-size: 14px; background: #F3F0FF; border-radius: 12px; padding: 10px 14px; }
.adm-ai { display: flex; flex-direction: column; gap: 14px; }
.adm-chat { height: 64vh; min-height: 440px; }
.adm-log { font-size: 13px; color: #137A45; display: flex; flex-direction: column; gap: 4px; }
.adm-log:empty { display: none; }
@media (max-width: 1000px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-grid2, .adm-fields { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; overflow-x: auto; }
  .adm-brand small, .adm-sfoot { display: none; }
  .adm-nav { flex-direction: row; gap: 2px; }
  .adm-nav button { white-space: nowrap; padding: 8px 10px; font-size: 13px; }
  .adm-main { padding: 18px 16px 40px; }
  .adm-crow { grid-template-columns: 96px minmax(0, 1fr) 76px; font-size: 13px; }
  .adm-prow { grid-template-columns: 42px minmax(0, 1fr); } .adm-prow .adm-acts { grid-column: 1 / -1; }
}