/* Panel marchand : reprend les composants du portail (portal.css) et ajoute la
   mise en page à colonne de navigation, les cartes de réglages et le tableau DNS. */
/* Admin : fond neutre et cartes blanches, sans halos ni transparence. */
body.pfr-standalone { background: #f4f4f2; }
#pfr { background: #f4f4f2; }
#pfr .glass { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 2px rgba(20, 20, 18, .06); border-color: #e4e4e0; }
#pfr .login { max-width: 480px; margin: 8vh auto 0; padding: 28px; display: grid; gap: 16px; }
#pfr .who { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 13px; }
#pfr .panel-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { #pfr .panel-layout { grid-template-columns: minmax(0, 1fr); } }
#pfr .side-nav { padding: 10px; display: grid; gap: 4px; position: sticky; top: 16px; }
@media (max-width: 860px) { #pfr .side-nav { position: static; display: flex; overflow-x: auto; } }
#pfr .nav-item { padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--muted); }
#pfr .nav-item.on { background: var(--glass-strong); color: var(--fg); box-shadow: 0 0 0 1px var(--line) inset; }
#pfr .nav-item.off { color: var(--faint); opacity: .7; }
#pfr .panel-main { display: grid; gap: 18px; min-width: 0; }
#pfr .panel-card { padding: 24px; display: grid; gap: 18px; min-width: 0; }
@media (max-width: 520px) { #pfr .panel-card { padding: 18px 16px; } }
#pfr .card-head { display: flex; justify-content: space-between; gap: 14px; align-items: start; flex-wrap: wrap; }
#pfr .card-head h2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#pfr .card-head .hint { margin-top: 4px; max-width: 70ch; }
#pfr .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#pfr .grid2 .span2 { grid-column: 1 / -1; }
@media (max-width: 640px) { #pfr .grid2 { grid-template-columns: minmax(0, 1fr); } }
#pfr .preview { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; padding: 14px 16px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
#pfr .preview b { font-weight: 600; }
#pfr .warn-text { color: var(--warn); font-weight: 500; }
#pfr .at { display: flex; align-items: center; gap: 10px; }
#pfr .at span { color: var(--muted); font-size: 13px; white-space: nowrap; }
#pfr .howto { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
#pfr .howto li { list-style: decimal; }
#pfr .dns { display: grid; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
#pfr .dns-row { display: grid; grid-template-columns: 70px minmax(120px, .8fr) minmax(0, 2fr) 130px; gap: 12px; padding: 12px 14px; align-items: start; border-top: 1px solid var(--line); font-size: 13px; }
#pfr .dns-row.head { border-top: 0; background: var(--field); color: var(--muted); font-size: 12px; letter-spacing: .03em; }
#pfr .dns-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) {
  #pfr .dns-row { grid-template-columns: 60px minmax(0, 1fr); }
  #pfr .dns-row.head { display: none; }
  #pfr .dns-row > span:nth-child(3) { grid-column: 1 / -1; }
}
#pfr .copy { display: inline-flex; gap: 8px; align-items: start; text-align: left; background: none; border: 0; padding: 0; margin: 0; color: var(--fg); overflow-wrap: anywhere; word-break: break-all; }
#pfr .copy svg { flex: none; margin-top: 1px; color: var(--muted); }
#pfr .copy:hover svg { color: var(--accent); }
#pfr .copy.copied svg { color: var(--accent); }
#pfr .copy.val { font-size: 12px; max-height: 7.5em; overflow: auto; }
#pfr .chip.bad .dot { background: var(--danger); }
#pfr .row-gap { display: flex; gap: 10px; flex-wrap: wrap; }
#pfr .link.danger { color: var(--danger); text-decoration-color: currentColor; }
#pfr .shop-select { width: auto; }
#pfr .brand-logo { width: 34px; height: 34px; flex: none; display: block; }

/* Navigation et apparence du portail */
#pfr button.nav-item { text-align: left; background: none; border: 0; margin: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; }
#pfr button.nav-item:hover:not(.on) { color: var(--fg); background: var(--glass); }
#pfr .look-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1080px) { #pfr .look-grid { grid-template-columns: minmax(0, 1fr); } }
#pfr .look-controls { display: grid; gap: 18px; }
#pfr .swatches { display: flex; flex-wrap: wrap; gap: 10px; }
#pfr .swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); padding: 0; margin: 0; cursor: pointer; position: relative; box-shadow: 0 0 0 0 transparent; transition: box-shadow .15s; }
#pfr .swatch.sel { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--fg); }
#pfr .swatch.custom { display: grid; place-items: center; overflow: hidden; background: conic-gradient(#f0a48b, #f2c46d, #d8f26b, #8fe3c3, #9db8f2, #c3b1f5, #f0a48b); }
#pfr .swatch.custom input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
#pfr .hex { max-width: 140px; text-transform: lowercase; }
#pfr .contrast { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin: 0; }
#pfr .contrast .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#pfr .contrast.ok .dot { background: var(--accent); }
#pfr .contrast.warn { color: var(--warn); }
#pfr .contrast.warn .dot { background: var(--warn); }
#pfr .preview-card { position: sticky; top: 16px; }
#pfr .frame-wrap { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--field); height: 680px; margin: 0 auto; width: 100%; transition: width .3s; }
#pfr .frame-wrap.mobile { width: 390px; max-width: 100%; }
#pfr .frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Retours */
#pfr .ret-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
#pfr .ret-tabs button { display: inline-flex; gap: 8px; align-items: center; }
#pfr .ret-tabs .count { font-size: 11.5px; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: var(--glass-strong); color: var(--muted); }
#pfr .ret-search { flex: 1; max-width: 360px; min-width: 220px; }
#pfr .ret-table { padding: 8px; gap: 0; }
#pfr .ret-row { display: grid; grid-template-columns: 130px 110px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 170px; gap: 12px; padding: 12px 14px; align-items: center; border-radius: 14px; font-size: 13.5px; cursor: pointer; }
#pfr .ret-table:has([data-sel]) .ret-row { grid-template-columns: 28px 130px 110px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 170px; }
#pfr .ret-row:hover:not(.head) { background: var(--glass); }
#pfr .ret-row:focus-visible { outline: 2px solid var(--accent); }
#pfr .ret-row.head { cursor: default; color: var(--muted); font-size: 12px; letter-spacing: .03em; }
#pfr .ret-row small { display: block; color: var(--muted); font-size: 12px; }
#pfr .ret-row .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pfr .ret-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
@media (max-width: 900px) {
  #pfr .ret-row, #pfr .ret-table:has([data-sel]) .ret-row { grid-template-columns: minmax(0, 1fr) auto; }
  #pfr .ret-row.head { display: none; }
  #pfr .ret-row > span:nth-child(n+3):not(:last-child) { display: none; }
}
#pfr .empty { padding: 28px 16px; text-align: center; max-width: none; }
#pfr h2.big { font-size: 24px; }
#pfr .fiche-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1080px) { #pfr .fiche-grid { grid-template-columns: minmax(0, 1fr); } }
#pfr .ret-line .thumb { width: 56px; aspect-ratio: 1; flex: none; }
#pfr .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 13.5px; }
#pfr .kv > span { color: var(--muted); }
#pfr .kv b { font-weight: 500; }
#pfr .input.inline { width: auto; padding: 6px 10px; display: inline-block; }
#pfr .run { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
#pfr .run .field { max-width: 160px; }
#pfr .quote { font-style: italic; }

/* Coquille : barre latérale à la Trybe */
body.pfr-standalone #pfr { padding: 0; }
#pfr .shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
#pfr .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  padding: 18px 14px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 70%, transparent); }
#pfr .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; font-size: 18px; letter-spacing: -.02em; }
#pfr .side-brand b { font-weight: 700; }
#pfr .merchant-card, #pfr .user-card { padding: 12px; display: grid; gap: 6px; border-radius: 16px; }
#pfr .merchant-card b, #pfr .user-card b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
#pfr .merchant-card small, #pfr .user-card small { color: var(--muted); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; }
#pfr .merchant-card .input { padding: 8px 10px; font-size: 13px; }
#pfr .sidebar .side-nav { display: grid; gap: 2px; padding: 0; position: static; background: none; border: 0; box-shadow: none; }
#pfr .sidebar .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; width: 100%; }
#pfr .sidebar .nav-item svg { flex: none; opacity: .85; }
#pfr .nav-sec { margin: 12px 0 4px; padding: 0 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
#pfr .user-card { margin-top: auto; }
#pfr .user-card .row-gap { display: grid; gap: 2px; }
#pfr .shell .panel-main { padding: 26px max(16px, 2.4vw) 48px; max-width: 1240px; width: 100%; }
#pfr .m-bar, #pfr .m-scrim { display: none; }
/* Mobile : la barre latérale devient un tiroir ouvert par le bouton du haut. */
@media (max-width: 900px) {
  #pfr .shell { grid-template-columns: minmax(0, 1fr); }
  #pfr .m-bar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40; padding: 10px 16px; background: var(--ink); border-bottom: 1px solid var(--line); }
  #pfr .m-bar b { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
  #pfr .m-burger { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--fg); cursor: pointer; }
  #pfr .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(300px, 86vw); height: 100dvh; background: var(--ink); transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
  #pfr .menu-open .sidebar { transform: none; visibility: visible; }
  #pfr .sidebar .side-nav { grid-template-columns: minmax(0, 1fr); }
  #pfr .nav-item { min-height: 44px; }
  #pfr .menu-open .m-scrim { display: block; position: fixed; inset: 0; z-index: 50; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(0, 0, 0, .55); }
  #pfr .shell .panel-main { padding: 18px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { #pfr .sidebar { transition: none; } }
body.menu-lock { overflow: hidden; }

/* Connexion et 2FA */
#pfr .login.wide { max-width: 620px; }
#pfr .mfa-setup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
@media (max-width: 560px) { #pfr .mfa-setup { grid-template-columns: minmax(0, 1fr); } }
#pfr .mfa-setup .qr { background: #fff; border-radius: 14px; padding: 6px; line-height: 0; justify-self: start; }
#pfr .mfa-setup .qr svg { width: 180px; height: 180px; }
#pfr .secret { display: block; padding: 10px 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); word-break: break-all; font-size: 14px; }
#pfr .code-in { font-size: 22px; letter-spacing: .3em; max-width: 220px; }
#pfr .codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--line); }
#pfr .codes span { font-size: 15px; letter-spacing: .06em; }

/* Accueil */
#pfr .home-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
#pfr .home-grid > .kpis:only-child { grid-column: 1 / -1; }
@media (max-width: 1100px) { #pfr .home-grid { grid-template-columns: minmax(0, 1fr); } }
#pfr .progress { height: 6px; border-radius: 999px; background: var(--field); overflow: hidden; }
#pfr .progress i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s; }
#pfr .steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#pfr .steps-list li { list-style: none; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 6px; border-radius: 12px; }
#pfr .steps-list li.done .st b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
#pfr .steps-list .tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; border: 1.5px solid var(--line); color: var(--muted); }
#pfr .steps-list li.done .tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#pfr .steps-list .st { display: grid; gap: 4px; min-width: 0; }
#pfr .steps-list .st small { color: var(--muted); font-size: 12.5px; }
#pfr .btn.sm { padding: 7px 12px; font-size: 12.5px; }
#pfr .golive { display: grid; gap: 8px; }
#pfr .golive .input { max-width: 140px; padding: 7px 10px; }
#pfr .kpis { display: grid; gap: 18px; min-width: 0; }
#pfr .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { #pfr .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#pfr .tile { padding: 16px; border-radius: 18px; display: grid; gap: 4px; text-align: left; color: var(--fg); margin: 0; }
#pfr .tile small { color: var(--muted); font-size: 12px; }
#pfr .tile b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#pfr .tile .v { font-size: 12px; }
#pfr .link-tile { cursor: pointer; }
#pfr .link-tile:hover { border-color: var(--accent-line); }
#pfr .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { #pfr .two { grid-template-columns: minmax(0, 1fr); } }
#pfr .bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#pfr .bars li { list-style: none; position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; font-size: 13.5px; border-radius: 10px; overflow: hidden; }
#pfr .bars li i { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); z-index: -1; border-radius: 10px; }
#pfr .bars li b { font-variant-numeric: tabular-nums; }

/* Intégrations */
#pfr .integ-title { display: flex; gap: 14px; align-items: center; }
#pfr .logo-box { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--field); border: 1px solid var(--line); font-weight: 700; font-size: 18px; flex: none; }
#pfr .logo-box.shopify { background: #95bf47; color: #fff; border-color: transparent; }
#pfr .section-title { margin-top: 8px; }
#pfr .soon { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
#pfr .soon .panel-card { gap: 4px; opacity: .75; }

/* Politique, équipe, sécurité */
#pfr .policy { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
#pfr .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#pfr .grid3 .span3 { grid-column: 1 / -1; }
@media (max-width: 800px) { #pfr .grid3 { grid-template-columns: minmax(0, 1fr); } }
#pfr .reasons { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
#pfr .reason { display: grid; grid-template-columns: minmax(0, 1fr) 90px 170px; gap: 12px; padding: 10px 14px; align-items: center; border-top: 1px solid var(--line); font-size: 13.5px; }
#pfr .reason.head { border-top: 0; background: var(--field); color: var(--muted); font-size: 12px; }
#pfr .reason small { display: block; color: var(--muted); font-size: 12px; }
#pfr .reason input, #pfr .member input { width: 18px; height: 18px; accent-color: var(--accent); }
#pfr .members { display: grid; }
#pfr .member { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }
#pfr .member:first-child { border-top: 0; }
#pfr .member small { display: block; color: var(--muted); font-size: 12.5px; }
#pfr .member.off { opacity: .55; }
#pfr .side-brand img { width: 30px; height: 30px; display: block; flex: none; }
/* Le contenu part du haut : la colonne principale ne répartit pas sa hauteur entre ses blocs. */
#pfr .shell .panel-main { align-content: start; align-self: start; }
#pfr .merchant-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
#pfr .merchant-pick button { text-align: left; padding: 16px; border-radius: 16px; margin: 0; display: grid; gap: 4px; color: var(--fg); cursor: pointer; }
#pfr .merchant-pick button:hover { border-color: var(--accent-line); }
#pfr .merchant-pick small { color: var(--muted); font-size: 12.5px; }

#pfr .merchant-id { display: flex; gap: 10px; align-items: center; min-width: 0; }
#pfr .merchant-id img, #pfr .merchant-id .initial { width: 38px; height: 38px; border-radius: 50%; object-fit: contain; background: #fff; flex: none; display: grid; place-items: center; }
#pfr .merchant-id .initial { background: var(--accent); color: var(--on-accent); font-weight: 700; }
#pfr .merchant-id > div { min-width: 0; }
#pfr .logo-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
#pfr .logo-prev { width: 72px; height: 72px; border-radius: 16px; object-fit: contain; background: #fff; display: grid; place-items: center; }
#pfr .logo-prev.empty { background: var(--field); border: 1px dashed var(--line); color: var(--faint); font-size: 11px; text-align: center; }
#pfr .file-btn { position: relative; overflow: hidden; cursor: pointer; }
#pfr .file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

#pfr .statement { white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; padding: 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); margin: 8px 0 0; }
#pfr details summary { cursor: pointer; }
#pfr .link-copy { font-size: 12px; padding: 6px 8px; border-radius: 8px; background: var(--field); border: 1px solid var(--line); overflow-wrap: anywhere; }
#pfr .logo-box.brand-shopify { background: #fff; border-color: transparent; }
#pfr .logo-box.brand-shopify img { display: block; width: 26px; height: 30px; }
#pfr a.nav-item { text-decoration: none; }
#pfr a.nav-item:hover { color: var(--fg); background: var(--glass); }

/* Palettes nommées de l'apparence (accent et fond) */
#pfr .palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
#pfr .pal { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--field); color: var(--fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer; min-width: 0; }
#pfr .pal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pfr .pal i { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(128, 128, 128, .45); }
#pfr .pal:hover { border-color: var(--faint); }
#pfr .pal.sel { border-color: var(--fg); background: var(--glass-strong); box-shadow: 0 0 0 1px var(--fg) inset; }
#pfr .pal.custom i { background: conic-gradient(#f0a48b, #f2c46d, #d8f26b, #8fe3c3, #9db8f2, #c3b1f5, #f0a48b); }
#pfr .pal.custom input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }

#pfr .switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
#pfr .switch input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

#pfr .perms { display: grid; font-size: 13.5px; }
#pfr .perm { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
#pfr .perm.head { border-top: 0; color: var(--muted); font-size: 12.5px; }
#pfr .perm .yes { font-weight: 600; }
#pfr .perm .no { color: var(--faint); }

/* Contrat transporteur et fenêtre des tarifs */
#pfr .contracts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
#pfr .contract { display: grid; gap: 4px; padding: 14px; text-align: left; border-radius: 16px; border: 1px solid var(--line); background: var(--field); color: var(--fg); font: inherit; cursor: pointer; margin: 0; }
#pfr .contract b { font-weight: 600; }
#pfr .contract small { color: var(--muted); font-size: 12.5px; }
#pfr .contract.sel { border-color: var(--accent-line); background: var(--accent-soft); }
#pfr .contract[disabled] { opacity: .55; cursor: not-allowed; }
#pfr .switch.wrap { white-space: normal; align-items: flex-start; font-weight: 500; }
#pfr .modal-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); overflow-y: auto; }
#pfr .modal { width: min(820px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; display: grid; gap: 16px; background: var(--ink); outline: none; }
#pfr .tariff-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
#pfr .tariff { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
#pfr .tariff th, #pfr .tariff td { padding: 10px 12px; text-align: right; white-space: nowrap; border-top: 1px solid var(--line); }
#pfr .tariff thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: 12.5px; }
#pfr .tariff th:first-child { text-align: left; font-weight: 500; }

/* Modèle d'e-mail */
#pfr .tpl-body { font-family: var(--mono); font-size: 13px; line-height: 1.5; }
#pfr .tpl-var { cursor: pointer; margin: 0; }
#pfr .tpl-var:hover { color: var(--fg); border-color: var(--faint); }
#pfr .tpl-preview { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--field); display: grid; gap: 10px; font-size: 14px; }
#pfr .tpl-preview b { font-weight: 600; }
#pfr .tpl-preview pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--muted); }
#pfr .lang-map .perm { grid-template-columns: minmax(0, 1.6fr) minmax(70px, .6fr) minmax(170px, 1fr); }
#pfr .logo-box.brand-carrier { background: #fff; border-color: transparent; flex: none; }
#pfr .logo-box.brand-carrier img { display: block; width: 30px; height: 30px; }
#pfr .fiche-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
#pfr .m-list { display: grid; gap: 10px; }
#pfr .m-row { display: grid; grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; }
@media (max-width: 860px) { #pfr .m-row { grid-template-columns: auto minmax(0, 1fr) auto; } #pfr .m-row > .v { display: none; } }
#pfr .m-off { opacity: .55; }
#pfr .m-order { display: grid; gap: 2px; }
#pfr .m-order .link { text-decoration: none; padding: 0 4px; }
#pfr .m-grow { min-width: 0; flex: 1; }
#pfr .m-grow b { display: block; font-weight: 600; }
#pfr .m-grow small { display: block; }
#pfr .m-question { display: grid; gap: 14px; }
#pfr .m-qhead { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#pfr .m-option { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
#pfr .m-example { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#pfr .m-example img, #pfr .fiche-photos img { object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
#pfr .fiche-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
#pfr .rule-group { display: grid; gap: 10px; margin-top: 8px; }
#pfr .rule-group h3, #pfr .sub h3 { margin: 0; font-size: 15px; font-weight: 600; }
#pfr .rule-row { display: grid; grid-template-columns: auto minmax(120px, 1.4fr) repeat(4, minmax(0, 1fr)) auto auto; gap: 14px; align-items: center; }
@media (max-width: 1180px) { #pfr .rule-row { grid-template-columns: auto minmax(0, 1fr) auto; } #pfr .rule-row .rule-col { display: none; } }
#pfr .rule-name { font-weight: 600; overflow-wrap: anywhere; }
#pfr .rule-col { display: grid; font-size: 13px; min-width: 0; }
#pfr .rule-col small { font-size: 12px; }
#pfr .rule-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
#pfr .chip-btn { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
#pfr .chip-btn.sel { background: var(--accent-soft); border-color: var(--accent-line); color: var(--fg); }
#pfr .rule-cond { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
#pfr .rule-if { min-width: 40px; color: var(--muted); }
#pfr .rule-val { width: 110px; }
#pfr .rule-val.wide { width: auto; flex: 1 1 220px; }
#pfr .sub > .link, #pfr .panel-card > .link { justify-self: start; }
#pfr .up-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
#pfr .up-row img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: #fff; display: block; }
#pfr .up-row small { display: block; }
#pfr .up-search { display: flex; gap: 10px; }
#pfr .loading { justify-content: center; min-height: 50vh; }
#pfr .loading.boot { position: fixed; inset: 0; min-height: 0; padding: 0; }
#pfr .stat-tiles { margin: 14px 0 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
#pfr .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
#pfr .stat-chart { position: relative; }
#pfr .stat-chart svg { display: block; width: 100%; height: auto; }
#pfr .stat-chart .grid { stroke: var(--line); stroke-width: 1; }
#pfr .stat-chart .axis { fill: var(--muted); font-size: 11px; }
#pfr .stat-chart .bar { fill: var(--accent); }
#pfr .stat-chart .hit { fill: transparent; cursor: default; }
#pfr .stat-chart .hit:hover { fill: var(--accent-soft); }
#pfr .stat-tip { position: absolute; pointer-events: none; padding: 6px 10px; border-radius: 10px; background: var(--ink); border: 1px solid var(--line); color: var(--fg); font-size: 12.5px; white-space: nowrap; }
#pfr .stat-table summary { cursor: pointer; color: var(--muted); font-size: 13px; }
#pfr .stat-table table { margin-top: 8px; width: 100%; }
@media (max-width: 700px) {
  #pfr .card-head { flex-wrap: wrap; }
  #pfr .card-head > div { min-width: 0; flex: 1 1 200px; }
  #pfr .stat-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) { #pfr .m-bar img { width: 28px; height: 28px; flex: none; display: block; } }
@media (max-width: 700px) {
  #pfr .grid2, #pfr .grid3 { grid-template-columns: minmax(0, 1fr); }
  #pfr .policy, #pfr .policy > * { min-width: 0; max-width: 100%; }
}
#pfr .shell .panel-main { grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (max-width: 700px) {
  #pfr .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pfr .reason { grid-template-columns: minmax(0, 1fr) 62px 74px; gap: 8px; font-size: 13px; }
}
@media (max-width: 700px) {
  #pfr .panel-card { grid-template-columns: minmax(0, 1fr); }
  #pfr .panel-card > *, #pfr .grid3 > *, #pfr .grid2 > * { min-width: 0; }
  #pfr .switch { white-space: normal; }
}
/* Grand écran : le contenu reste centré dans l'espace à droite de la barre latérale. */
#pfr .shell .panel-main { margin-inline: auto; }
#pfr .stat-grid.wide { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
@media (max-width: 700px) { #pfr .stat-grid.wide { grid-template-columns: minmax(0, 1fr); } }
#pfr .home-chart { grid-column: 1 / -1; }
@media (min-width: 1400px) { #pfr .kpis .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Échange sur le site : ce qui part, ce qui arrive, le supplément */
#pfr .xc { border-color: var(--accent-line, var(--line)); }
#pfr .xc-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; }
#pfr .xc-tile { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--field); min-width: 0; }
#pfr .xc-tile.in { border-color: var(--accent); }
#pfr .xc-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
#pfr .xc-item .thumb { width: 72px; height: 72px; border-radius: 14px; background: #fff; overflow: hidden; display: grid; place-items: center; }
#pfr .xc-item .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
#pfr .xc-item b { display: block; }
#pfr .xc-price { font-size: 18px; font-variant-numeric: tabular-nums; }
#pfr .xc-arrow { align-self: center; font-size: 26px; color: var(--accent); }
#pfr .xc-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#pfr .xc-sum > div { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); }
#pfr .xc-sum small { color: var(--muted); }
#pfr .xc-sum b { font-size: 20px; font-variant-numeric: tabular-nums; }
#pfr .xc-sum .up { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #111); }
#pfr .xc-sum .up small, #pfr .xc-sum .up .v { color: inherit; opacity: .8; }
#pfr .xc-sum .up b { font-size: 26px; }
@media (max-width: 720px) { #pfr .xc-swap { grid-template-columns: minmax(0, 1fr); } #pfr .xc-arrow { justify-self: center; transform: rotate(90deg); } #pfr .xc-sum { grid-template-columns: minmax(0, 1fr); } }

/* Accueil : les ventes additionnelles sur toute la largeur */
#pfr .tile-up { grid-column: 1 / -1; background: var(--accent); border-color: var(--accent); color: var(--on-accent, #111); }
#pfr .tile-up small, #pfr .tile-up .v { color: inherit; opacity: .8; }
#pfr .tile-up b { font-size: 32px; }
#pfr .ws-rule-card { display: grid; gap: 10px; }
#pfr .btn.danger-btn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
#pfr .input:disabled { opacity: .55; cursor: not-allowed; background: var(--glass); }
#pfr .ws-sim { display: grid; gap: 10px; margin-top: 8px; }
#pfr .toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 14px; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 14px; }
#pfr .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#pfr .toggle-track { flex: none; width: 44px; height: 26px; border-radius: 13px; background: rgba(120,120,128,.32); position: relative; transition: background .2s; }
#pfr .toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
#pfr .toggle input:checked + .toggle-track { background: var(--accent); }
#pfr .toggle input:checked + .toggle-track::after { transform: translateX(18px); }
#pfr .toggle input:focus-visible + .toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }
#pfr .toggle small { display: block; color: var(--muted, #6b7280); font-size: 13px; margin-top: 2px; }
#pfr .card-head h2 .chip { vertical-align: middle; margin-left: 8px; font-size: 12px; }
#pfr .ex-row .field { display: grid; gap: 4px; }
/* Connexion : deux panneaux (formulaire clair, présentation sombre). */
#pfr .auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; padding: 20px; box-sizing: border-box; }
#pfr .auth-main { display: flex; flex-direction: column; padding: 12px 20px; min-width: 0; }
#pfr .auth-form { flex: 1; display: grid; align-content: center; justify-items: center; padding: 32px 0; }
#pfr .auth .login { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; width: 100%; max-width: 420px; }
#pfr .auth .login.wide { max-width: 560px; }
#pfr .auth .login h1 { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.02em; }
#pfr .auth .login .input { min-height: 50px; }
#pfr .auth .login .actions .btn.primary { min-width: 180px; }
#pfr .auth-foot { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 0; font-size: 12.5px; color: #6f6d66; }
#pfr .auth-foot svg { width: 14px; height: 14px; flex: none; }
#pfr .auth-show { position: relative; overflow: hidden; border-radius: 28px; color: #f4f1ea; display: grid; align-items: center;
  background: radial-gradient(120% 80% at 100% 0%, rgba(216, 242, 107, .16), transparent 55%),
              radial-gradient(rgba(216, 242, 107, .16) 1px, transparent 1.2px) 0 0 / 14px 14px, #141412; }
#pfr .auth-show::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 18, 0) 40%, rgba(20, 20, 18, .85)); }
#pfr .auth-show-in { position: relative; z-index: 1; padding: clamp(28px, 5vw, 64px); display: grid; gap: 18px; max-width: 640px; }
#pfr .auth-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #d8f26b; }
#pfr .auth-show h2 { margin: 0; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.025em; color: #f4f1ea; }
#pfr .auth-sub { margin: 0; color: rgba(244, 241, 234, .66); font-size: 15px; line-height: 1.5; max-width: 46ch; }
#pfr .auth-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
#pfr .auth-tile { display: grid; gap: 4px; padding: 14px 16px; align-content: start; border-radius: 16px; background: rgba(255, 252, 245, .045); border: 1px solid rgba(255, 252, 245, .08); }
#pfr .auth-tile b { font-size: 14.5px; font-weight: 600; color: #f4f1ea; margin-top: 8px; }
#pfr .auth-tile small { font-size: 12.5px; color: rgba(244, 241, 234, .55); line-height: 1.4; }
#pfr .auth-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(216, 242, 107, .12); color: #d8f26b; }
@media (max-width: 900px) {
  #pfr .auth { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  #pfr .auth { gap: 24px; min-height: 0; }
  #pfr .auth-main { padding: 4px 0; }
  #pfr .auth-form { align-content: start; padding: 8vh 0 28px; }
  #pfr .auth-foot { justify-content: flex-start; }
  /* Présentation en bas, en carrousel horizontal de petites cartes. */
  #pfr .auth-show { border-radius: 22px; }
  #pfr .auth-show::after { display: none; }
  #pfr .auth-show-in { padding: 22px 0 20px; gap: 10px; }
  #pfr .auth-kicker, #pfr .auth-show h2, #pfr .auth-sub { padding: 0 20px; }
  #pfr .auth-show h2 { font-size: 26px; }
  #pfr .auth-sub { font-size: 13.5px; }
  #pfr .auth-tiles { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    padding: 4px 20px 8px; margin-top: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #pfr .auth-tiles::-webkit-scrollbar { display: none; }
  #pfr .auth-tile { flex: 0 0 62%; scroll-snap-align: start; padding: 12px 14px; }
  #pfr .auth-tile b { font-size: 13.5px; margin-top: 6px; }
  #pfr .auth-tile small { font-size: 12px; }
  #pfr .auth-ico { width: 28px; height: 28px; }
}
@media (max-height: 980px) and (min-width: 901px) {
  #pfr .auth-show-in { padding: 32px 40px; gap: 12px; }
  #pfr .auth-show h2 { font-size: clamp(28px, 3vw, 38px); }
  #pfr .auth-tiles { gap: 10px; margin-top: 4px; }
  #pfr .auth-tile { padding: 12px 14px; gap: 2px; }
  #pfr .auth-tile b { margin-top: 6px; font-size: 14px; }
  #pfr .auth-ico { width: 28px; height: 28px; }
}