/* =========================================================================
   Design 3.0 — Navbar + Footer (chargé sur tout le site)
   Composants autonomes : préfixe de classes propre, n'altère pas Bootstrap.
   Le state "dark" du toggle est piloté par la classe .active (ajoutée par
   modemarchand.min.js sur #switchTheme), pas par .dark.
   ========================================================================= */
:root{
  --green:#2C6E49;--green-700:#23583A;--green-50:#EDF4EF;--green-100:#DCEAE1;
  --ink:#181D1A;--body:#3C433E;--muted:#7A837D;
  --line:#E8EAE8;--line-2:#F0F2F0;--bg:#F5F6F5;--surface:#FFFFFF;
  --gold:#C9921F;--d3-red:#C0392B;--discord:#5865F2;--discord-700:#4752C4;
  --radius:14px;--radius-sm:10px;
  --shadow:0 1px 2px rgba(24,29,26,.04),0 8px 24px rgba(24,29,26,.05);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
[data-theme="dark"]{
  --ink:#EDEFEC;--body:#B9C1BA;--muted:#828B83;--bg:#10130F;--surface:#191D17;
  --line:#2A2F28;--line-2:#232820;--green:#46A073;--green-700:#2C6E49;
  --green-50:#1E2A22;--green-100:#2B3D31;--d3-red:#F0685B;
}

/* Sticky footer : pousse le footer en bas de page quand le contenu est court */
body{min-height:100vh;display:flex;flex-direction:column}
body > .ft{margin-top:auto}
/* Fond de page aligné sur la maquette (raccord navbar/footer) */
[data-theme="dark"] body{background:var(--bg)}

.d3 .icon,.nav-wrap .icon,.ft .icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-wrap .icon-sm,.ft .icon-sm,.d3 .icon-sm{width:15px;height:15px}
.nav-wrap svg,.ft svg{display:block}

/* ===== NAVBAR ===== */
.nav-wrap{font-family:var(--font);background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;transition:background .25s,border-color .25s}
.nav-wrap a{text-decoration:none;color:inherit}
.nav-wrap button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.nav-inner{width:100%;height:62px;display:flex;align-items:center;gap:22px;padding:0 32px}
.nav-wrap .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);font-size:16px;letter-spacing:-.02em;flex-shrink:0}
.nav-wrap .brand .mark{width:32px;height:32px;border-radius:9px;background:var(--green);display:grid;place-items:center}
.b-nav{display:flex;align-items:center;gap:4px}
.b-nav a{font-size:13.5px;font-weight:600;color:var(--body);padding:8px 14px;border-radius:9px;transition:.14s;white-space:nowrap}
.b-nav a:hover{background:var(--line-2);color:var(--ink)}
.b-nav a.active{background:var(--green);color:#fff}
.b-nav a.active:hover{background:var(--green-700);color:#fff}
.nav-wrap .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-wrap .btn-ghost{padding:9px 15px;border-radius:10px;font-weight:600;font-size:14px;color:var(--body);white-space:nowrap}
.nav-wrap .btn-ghost:hover{background:var(--line-2);color:var(--ink)}
.nav-wrap .btn-solid{padding:9px 16px;border-radius:10px;font-weight:700;font-size:14px;background:var(--green);color:#fff;white-space:nowrap}
.nav-wrap .btn-solid:hover{background:var(--green-700)}
.nav-wrap .ibtn{position:relative;width:38px;height:38px;border-radius:10px;color:var(--muted);display:grid;place-items:center;transition:.14s}
.nav-wrap .ibtn:hover{background:var(--line-2);color:var(--ink)}
.nav-wrap .ibtn.kdo-btn{color:var(--green);background:var(--green-50)}
.nav-wrap .ibtn.kdo-btn:hover{background:var(--green-100);color:var(--green-700)}
.nav-wrap .ibtn.kdo-btn svg{animation:kdoWiggle 3s ease-in-out infinite;transform-origin:50% 60%}
.nav-wrap .ibtn.kdo-btn::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;animation:kdoGlow 3s ease-out infinite}
@keyframes kdoWiggle{0%,82%,100%{transform:rotate(0) scale(1)}86%{transform:rotate(-9deg) scale(1.08)}90%{transform:rotate(7deg) scale(1.08)}94%{transform:rotate(-4deg) scale(1.04)}97%{transform:rotate(2deg) scale(1)}}
@keyframes kdoGlow{0%{box-shadow:0 0 0 0 rgba(44,110,73,.45)}70%{box-shadow:0 0 0 9px rgba(44,110,73,0)}100%{box-shadow:0 0 0 0 rgba(44,110,73,0)}}
@media(prefers-reduced-motion:reduce){.nav-wrap .ibtn.kdo-btn svg,.nav-wrap .ibtn.kdo-btn::after{animation:none}}
.nav-wrap .ibtn .dot{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--d3-red);color:#fff;font-size:11px;font-weight:700;line-height:1;display:grid;place-items:center;border:2px solid var(--surface)}
.nav-wrap .ibtn .newb{position:absolute;top:-7px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:8px;font-weight:800;line-height:1.5;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;border-radius:20px;border:2px solid var(--surface);white-space:nowrap}
.nav-wrap .divider{width:1px;height:24px;background:var(--line);flex-shrink:0;margin:0 4px}
.nav-wrap .brand-sep{height:28px;margin:0 6px}
/* theme toggle — state piloté par .active (#switchTheme) */
.nav-wrap .toggle{width:52px;height:28px;border-radius:20px;background:var(--line-2);border:1px solid var(--line);position:relative;flex-shrink:0;transition:.2s}
.nav-wrap .toggle .t-ico{position:absolute;top:0;bottom:0;width:26px;display:grid;place-items:center;z-index:1}
.nav-wrap .toggle .t-ico svg{width:14px;height:14px;stroke-width:2.2}
.nav-wrap .toggle .t-ico.sun{left:0;color:var(--gold)}
.nav-wrap .toggle .t-ico.moon{right:0;color:#9098A2}
.nav-wrap .toggle .knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(24,29,26,.2);z-index:2;transition:left .22s cubic-bezier(.4,1.3,.6,1)}
.nav-wrap .toggle.active{background:var(--green-700);border-color:var(--green-700)}
.nav-wrap .toggle.active .knob{left:26px}
.nav-wrap .toggle.active .t-ico.sun{color:#FFD479}
.nav-wrap .toggle.active .t-ico.moon{color:#fff}
/* account dropdown */
.nav-wrap .dd{position:relative}
.nav-wrap .acct{display:flex;align-items:center;gap:7px;padding:4px 5px;border-radius:10px;transition:.14s}
.nav-wrap .acct:hover{background:var(--line-2)}
.nav-wrap .acct .av{width:32px;height:32px;border-radius:9px;background:var(--green-100) center/cover;flex-shrink:0}
.nav-wrap .acct .cx{color:var(--muted)}
.nav-wrap .menu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:7px;display:none;z-index:50}
.nav-wrap .menu.open{display:block;animation:d3pop .14s ease}
@keyframes d3pop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.nav-wrap .menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13.5px;color:var(--body);font-weight:500}
.nav-wrap .menu a:hover{background:var(--green-50);color:var(--green-700)}
.nav-wrap .menu a .mi{width:18px;color:var(--muted);display:grid;place-items:center}
.nav-wrap .menu a:hover .mi{color:var(--green)}
.nav-wrap .menu a.danger{color:var(--d3-red)}
.nav-wrap .menu a.danger:hover{background:#FDF3F2}
.nav-wrap .menu a.danger .mi{color:var(--d3-red)}
.nav-wrap .menu .hr{height:1px;background:var(--line);margin:6px 4px}
.nav-wrap .menu .badge-r{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100);border-radius:20px;padding:1px 7px}
[data-theme="dark"] .nav-wrap .menu .badge-r{color:#9FD9B9}
@media(max-width:1040px){.nav-inner{gap:14px;padding:0 16px}.nav-wrap .brand .bword{display:none}}
@media(max-width:900px){.b-nav a{padding:7px 11px;font-size:13px}.b-nav{gap:2px}}
@media(max-width:820px){.b-nav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.b-nav::-webkit-scrollbar{display:none}.b-nav a{flex-shrink:0}}
@media(max-width:560px){.nav-inner{gap:8px;padding:0 12px}.nav-wrap .right{gap:4px}.nav-wrap .ibtn{width:36px;height:36px}.nav-wrap .brand-sep{display:none}.nav-wrap .btn-ghost{display:none}}

/* ===== FOOTER ===== */
.ft{font-family:var(--font);background:var(--surface);border-top:1px solid var(--line)}
.ft a{text-decoration:none;color:inherit}
.ft .dico{width:22px;height:22px;fill:currentColor}
.ft-bar{width:100%;display:flex;align-items:center;gap:14px 22px;padding:16px 32px;flex-wrap:wrap}
.ft-disc{display:flex;align-items:center;gap:12px}
.ft-disc .dmark{width:40px;height:40px;border-radius:11px;background:var(--green-50);color:var(--discord);display:grid;place-items:center;flex-shrink:0}
.ft-disc .dmark .dico{width:22px;height:22px}
.ft-disc .txt b{display:block;color:var(--ink);font-size:14px;font-weight:800}
.ft-disc .txt span{font-size:12.5px;color:var(--muted)}
.disc-btn{display:inline-flex;align-items:center;gap:8px;background:var(--discord);border:1.5px solid var(--discord);font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:10px;transition:background-color .15s,border-color .15s;white-space:nowrap}
.disc-btn:hover{background:var(--discord-700);border-color:var(--discord-700)}
.ft .disc-btn,.ft .disc-btn:hover,.ft .disc-btn:focus,.ft .disc-btn:visited,[data-theme="dark"] .ft .disc-btn,[data-theme="dark"] .ft .disc-btn:hover{color:#fff!important}
.ft .disc-btn .dico,[data-theme="dark"] .ft .disc-btn .dico{fill:#fff!important}
.disc-btn .dico{width:18px;height:18px}
.ft-copy{margin-left:auto;text-align:right;font-size:12px;color:var(--muted);line-height:1.55}
.ft-copy b{color:var(--body);font-weight:600}
@media(max-width:860px){.ft-copy{margin-left:0;text-align:left;width:100%;order:3}}

/* ===== PROFILE MODAL (design 3.0) =====
   On conserve tous les hooks JS (#profile-banner/#profile-image/#profile-username/
   #profile-online/#feedback/#thumbs/.reviews-counter/.grade/#presentation-tab/
   #review-tab/.reviews-content). Le nav d'onglets est masqué : les 2 panes sont
   affichés simultanément (sidebar + colonne présentation/avis). */
/* Ouverture/fermeture fluide (fondu + léger zoom/glissement), scopé au profil */
#profileModal.fade .modal-dialog{transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s ease;transform:scale(.97) translateY(12px);opacity:0;will-change:transform,opacity}
#profileModal.show .modal-dialog{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){#profileModal.fade .modal-dialog{transition:opacity .2s ease;transform:none}}
/* Ratio fidèle maquette : carte large, hauteur fixe (ne saute pas au chargement/scroll des avis) */
#profileModal .modal-dialog{max-width:1080px;width:96%;height:calc(100vh - 40px);margin:20px auto}
#profileModal .modal-content{font-family:var(--font);height:100%;max-height:100%;border:none;border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:0 24px 70px rgba(24,29,26,.22);display:flex;flex-direction:column}
#profileModal .x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.25);z-index:6;border:none;cursor:pointer}
#profileModal .x:hover{background:rgba(0,0,0,.4)}
#profileModal .x svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
#profileModal .modal-body{padding:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#profileModal .container-profile-banner{display:block;flex:0 0 auto}
#profileModal #profile-banner.banner{display:block;width:100%;height:170px;background-color:var(--green-50);background-position:center;background-repeat:no-repeat;background-size:100% 100%;flex-shrink:0}
#profileModal .cols{display:grid;grid-template-columns:268px 1fr;flex:1 1 auto;min-height:0;overflow:hidden}
/* sidebar */
#profileModal .side{background:var(--green-50);border-right:1px solid var(--green-100);padding:22px 22px 26px;text-align:center;overflow-y:auto;min-height:0}
#profileModal .av-wrap{display:flex;justify-content:center;background:none;border:none}
#profileModal #profile-image.av{width:96px;height:96px;border-radius:24px;background:var(--green-100) center/cover;position:relative;border:4px solid var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.12)}
#profileModal .av .on{position:absolute;bottom:3px;right:3px;width:16px;height:16px;border-radius:50%;background:var(--green);border:3px solid var(--surface);animation:d3pulse 1.6s infinite}
@keyframes d3pulse{0%{box-shadow:0 0 0 0 rgba(44,110,73,.7)}70%{box-shadow:0 0 0 9px rgba(44,110,73,0)}100%{box-shadow:0 0 0 0 rgba(44,110,73,0)}}
@media(prefers-reduced-motion:reduce){#profileModal .av .on{animation:none}}
#profileModal .name,#profileModal #profile-username{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-top:12px;display:block}
#profileModal #profile-username.text-danger{color:var(--d3-red)}
#profileModal .online-lbl{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px;margin-top:2px}
#profileModal .online-lbl .d{width:7px;height:7px;border-radius:50%;background:currentColor}
#profileModal .online-lbl.on-y{color:var(--green)}
#profileModal .online-lbl.on-n{color:var(--muted)}
#profileModal .badges{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:14px}
#profileModal .badges:empty{display:none}
#profileModal .badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;background:#fff;border:1px solid var(--green-100);color:var(--green-700)}
#profileModal .badge svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#profileModal .badge.prem{color:var(--gold);border-color:#F0E2C0}
#profileModal .sstats{display:flex;flex-direction:column;gap:8px;margin-top:18px}
#profileModal .sstat{background:#fff;border:1px solid var(--green-100);border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:9px;font-size:13px;text-align:left}
#profileModal .sstat svg{width:16px;height:16px;flex-shrink:0}
#profileModal .sstat .k{color:var(--muted)}
#profileModal .sstat .v{margin-left:auto;font-weight:800;color:var(--ink)}
#profileModal .sstat .v.green{color:var(--green)}
#profileModal .sstat .v.red{color:var(--d3-red)}
/* main */
#profileModal .main{padding:22px 24px;min-width:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#profileModal #profile{display:none}
#profileModal .tab-content{display:flex;flex-direction:column;min-height:0;flex:1}
#profileModal .tab-pane{display:block!important;opacity:1!important}
#profileModal #presentation-tab{margin-bottom:12px;flex:0 0 auto}
#profileModal #review-tab{display:flex!important;flex-direction:column;flex:1;min-height:0}
#profileModal .d3-h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px}
#profileModal .d3-h3 svg{width:15px;height:15px;color:var(--green)}
#profileModal .d3-h3 .cnt{margin-left:auto;font-size:11px;background:var(--green-50);color:var(--green-700);border-radius:20px;padding:2px 9px}
#profileModal #profile-presentation{font-size:14.5px;color:var(--body);line-height:1.65}
/* Sur PC : la présentation a une HAUTEUR FIXE (scroll interne si trop longue) afin
   d'uniformiser la mise en page entre profils — la zone d'avis (flex:1) prend le
   reste et reste donc identique d'un profil à l'autre, avec toujours ≥ 2 lignes. */
@media(min-width:681px){
  #profileModal #presentation-tab{flex:0 0 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
  #profileModal #profile-presentation{height:14vh;overflow-y:auto;padding-right:6px}
  #profileModal .reviews-content.reviews-container{min-height:260px}
}
/* reviews → grille .rv-list (les cartes .rv sont définies plus bas, site-wide).
   Le REST emballe chaque carte dans un <div class="col-*"> : on neutralise la
   largeur Bootstrap pour laisser la grille CSS gérer la disposition. */
#profileModal .reviews-content.reviews-container{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:11px;align-content:start;align-items:start;flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;padding-right:4px;zoom:1;margin:0}
#profileModal .reviews-content.reviews-container > div{align-self:start}
#profileModal .reviews-content.reviews-container > div{width:auto!important;max-width:none!important;flex:none!important;padding:0!important;margin:0!important}
/* État vide des avis (design 3.0) */
#profileModal .no-comment{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:200px;padding:30px 24px}
#profileModal .pm-empty{text-align:center;max-width:300px;display:flex;flex-direction:column;align-items:center}
#profileModal .pm-empty-ic{width:74px;height:74px;border-radius:20px;background:var(--green-50);color:var(--green);display:grid;place-items:center;margin-bottom:14px}
#profileModal .pm-empty-ic svg{width:34px;height:34px}
#profileModal .pm-empty h4{font-size:17px;font-weight:800;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
#profileModal .pm-empty p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55}
/* Overlay de chargement des avis (DA refonte) */
#profileModal #review-tab{position:relative}
#profileModal .d3-reviews-loading{position:absolute;left:0;right:0;top:36px;bottom:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:13px;background:var(--surface);z-index:4;color:var(--muted);font-size:13.5px;font-weight:600;font-family:var(--font)}
#profileModal .d3-reviews-loading.show{display:flex}
#profileModal .d3-spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--green-100);border-top-color:var(--green);animation:d3spin .7s linear infinite}
@keyframes d3spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#profileModal .d3-spinner{animation-duration:1.6s}}
@media(max-width:680px){
  #profileModal .cols{grid-template-columns:1fr}
  #profileModal .side{border-right:none;border-bottom:1px solid var(--green-100)}
  #profileModal .reviews-content.reviews-container{grid-template-columns:1fr!important;max-height:38vh}
}

/* ===== CARTE D'AVIS .rv (design 3.0) — site-wide : modale + page /compte/avis ===== */
.rv{font-family:var(--font);border:1px solid var(--line);border-radius:12px;padding:13px 13px 9px;min-width:0;position:relative;background:var(--surface)}
.rv .btn-delete{position:absolute;top:9px;right:9px;color:var(--d3-red);cursor:pointer;z-index:2}
.rv-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 11px}
.rv-type{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 10px;border-radius:20px}
.rv-date{font-size:10.5px;color:var(--muted);white-space:nowrap}
.rv-type svg{width:12px;height:12px}
.rv-type.vente{background:var(--green);color:#fff}
.rv-type.achat{background:var(--green-100);color:var(--green-700)}
.rv-top{display:flex;align-items:center;gap:10px}
.rv-av{width:38px;height:38px;border-radius:10px;background:var(--green-100) center/cover;flex-shrink:0;display:block}
.rv-id{flex:1;min-width:0;color:inherit}
.rv-id b{display:block;color:var(--ink);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-id .d{font-size:11.5px;color:var(--muted)}
.rv-thumb{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.rv-thumb svg{width:14px;height:14px}
.rv-thumb.up{background:var(--green-50);color:var(--green)}
.rv-thumb.down{background:#FDF3F2;color:var(--d3-red)}
.rv-txt{font-size:13px;color:var(--body);overflow-wrap:anywhere;max-height:88px;overflow:auto;margin-top:20px}
.rv-deleted{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:var(--d3-red);padding:2px 8px;border-radius:20px}
.rv.neg{border-color:#E6A89F;background:#FCEAE6}
.rv.neg .rv-thumb.down{background:var(--d3-red);color:#fff}
[data-theme="dark"] .rv.neg{border-color:#5A2620;background:#2A1714}
[data-theme="dark"] .rv-thumb.down{background:#2A1714}

/* =========================================================================
   VERSIONS MOBILES (design 3.0) — navbar (catbar + burger + drawer), footer
   ========================================================================= */
/* Masqués par défaut (desktop) ; affichés en ≤768px. */
.catbar,.nav-wrap .nav-actions,.d3-overlay,.d3-drawer{display:none}
.nav-wrap .burger{width:42px;height:40px;border-radius:11px;background:var(--green);color:#fff;display:grid;place-items:center;border:none;cursor:pointer;flex-shrink:0}
.nav-wrap .burger:active{background:var(--green-700)}

@media(min-width:769px){
  .catbar,.nav-wrap .nav-actions,.d3-overlay,.d3-drawer{display:none!important}
}

@media(max-width:768px){
  /* top bar */
  .nav-inner{height:58px;gap:8px;padding:0 14px}
  .nav-wrap .b-nav,.nav-wrap .brand-sep,.nav-wrap .right{display:none!important}
  .nav-wrap .brand .bword{display:inline}
  .nav-wrap .nav-actions{margin-left:auto;display:flex;align-items:center;gap:7px}
  .nav-wrap .nav-actions .ibtn{width:40px;height:40px;border-radius:11px}
  .nav-wrap .nav-actions .btn-ghost{padding:8px 11px;font-size:13px}
  .nav-wrap .nav-actions .btn-solid{padding:8px 12px;font-size:13px}
  /* barre catégories */
  .catbar{display:flex;gap:8px;padding:9px 14px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:58px;z-index:29;overflow-x:auto;scrollbar-width:none;font-family:var(--font)}
  .catbar::-webkit-scrollbar{display:none}
  .catbar a{flex-shrink:0;font-size:13.5px;font-weight:600;color:var(--body);background:var(--line-2);padding:7px 14px;border-radius:9px;white-space:nowrap;text-decoration:none}
  .catbar a:active{background:var(--line)}
  .catbar a.active{background:var(--green);color:#fff}
  /* overlay + drawer */
  .d3-overlay{display:block;position:fixed;inset:0;background:rgba(16,19,15,.45);opacity:0;visibility:hidden;transition:.25s;z-index:1080}
  .d3-overlay.open{opacity:1;visibility:visible}
  .d3-drawer{display:flex;position:fixed;top:0;right:0;bottom:0;width:86%;max-width:360px;background:var(--bg);z-index:1085;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,.8,.3,1);flex-direction:column;box-shadow:-12px 0 40px rgba(16,19,15,.18);font-family:var(--font)}
  .d3-drawer.open{transform:none}
  .d3-drawer a{text-decoration:none;color:inherit}
  .d3-drawer .dr-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
  .d3-drawer .dr-head .ttl{font-weight:800;color:var(--ink);font-size:15px}
  .d3-drawer .dr-close{margin-left:auto;width:38px;height:38px;border-radius:11px;background:var(--line-2);color:var(--body);display:grid;place-items:center;border:none;cursor:pointer}
  .d3-drawer .dr-close:active{background:var(--line)}
  .d3-drawer .dr-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}
  .d3-drawer .profcard{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
  .d3-drawer .profcard .av{width:48px;height:48px;border-radius:14px;background:var(--green-100) center/cover;flex-shrink:0}
  .d3-drawer .profcard .pi{flex:1;min-width:0}
  .d3-drawer .profcard .pi b{color:var(--ink);font-size:16px;font-weight:800;display:block}
  .d3-drawer .profcard .pi .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
  .d3-drawer .grade{font-size:10.5px;font-weight:700;color:var(--green-700);background:var(--green-50);border:1px solid var(--green-100);padding:2px 7px;border-radius:20px}
  .d3-drawer .profcard .cx{color:var(--muted)}
  .d3-drawer .dr-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:2px 2px 8px}
  .d3-drawer .list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .d3-drawer .list a{display:flex;align-items:center;gap:13px;padding:13px 15px;font-size:14.5px;color:var(--body);font-weight:500;border-bottom:1px solid var(--line-2)}
  .d3-drawer .list a:last-child{border-bottom:none}
  .d3-drawer .list a:active{background:var(--line-2)}
  .d3-drawer .list a .mi{width:38px;height:38px;border-radius:11px;background:var(--green-50);color:var(--green);display:grid;place-items:center;flex-shrink:0}
  .d3-drawer .list a.danger{color:var(--d3-red)}
  .d3-drawer .list a.danger .mi{background:#FDF3F2;color:var(--d3-red)}
  .d3-drawer .list a .badge-r{margin-left:auto;font-size:11px;font-weight:700;border-radius:20px;padding:1px 8px}
  .d3-drawer .theme-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 15px}
  .d3-drawer .theme-row .ti{width:38px;height:38px;border-radius:11px;background:var(--green-50);color:var(--green);display:grid;place-items:center;flex-shrink:0}
  .d3-drawer .theme-row .tt{flex:1}
  .d3-drawer .theme-row .tt b{color:var(--ink);font-size:14.5px;display:block}
  .d3-drawer .theme-row .tt span{font-size:12px;color:var(--muted)}
  .d3-drawer .toggle{width:56px;height:30px;border-radius:20px;background:var(--line-2);border:1px solid var(--line);position:relative;flex-shrink:0;transition:.2s;cursor:pointer}
  .d3-drawer .toggle .t-ico{position:absolute;top:0;bottom:0;width:28px;display:grid;place-items:center;z-index:1}
  .d3-drawer .toggle .t-ico svg{width:15px;height:15px;stroke-width:2.2}
  .d3-drawer .toggle .t-ico.sun{left:0;color:var(--gold)}
  .d3-drawer .toggle .t-ico.moon{right:0;color:#9098A2}
  .d3-drawer .toggle .knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(24,29,26,.2);z-index:2;transition:left .22s cubic-bezier(.4,1.3,.6,1)}
  .d3-drawer .toggle.dark{background:var(--green-700);border-color:var(--green-700)}
  .d3-drawer .toggle.dark .knob{left:28px}
  .d3-drawer .toggle.dark .t-ico.sun{color:#FFD479}
  .d3-drawer .toggle.dark .t-ico.moon{color:#fff}

  /* ===== FOOTER mobile : empilé ===== */
  .ft-bar{flex-direction:column;align-items:stretch;gap:14px;padding:18px 16px 22px}
  .ft-disc{margin-bottom:0}
  .disc-btn{width:100%;justify-content:center;font-size:15px;padding:13px}
  .ft-copy{margin-left:0;text-align:center;padding-top:16px;border-top:1px solid var(--line-2);order:0}
}

/* ===== MODALE PROFIL — version mobile (≤680px) : onglets empilés ===== */
@media(max-width:680px){
  #profileModal .modal-dialog{width:100%;max-width:480px;height:calc(100dvh - 24px);margin:12px auto}
  /* conteneurs : overflow visible pour laisser l'avatar chevaucher la bannière,
     et passage en flex colonne pour que seul le panneau scrolle */
  #profileModal .modal-body{overflow:visible}
  #profileModal .cols{display:flex;flex-direction:column;overflow:visible}
  /* bannière + avatar chevauchant */
  #profileModal #profile-banner.banner{height:108px}
  #profileModal .side{flex:0 0 auto;background:var(--surface);border-right:none;border-bottom:1px solid var(--line-2);padding:0 18px 14px;text-align:center;overflow:visible}
  #profileModal .av-wrap{margin-top:-43px;position:relative;z-index:2}
  #profileModal #profile-image.av{width:86px;height:86px;border-radius:22px;margin:0 auto}
  /* stats en 3 colonnes (valeur au-dessus, libellé dessous) */
  #profileModal .sstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
  #profileModal .sstat{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:10px 6px;background:var(--bg)}
  #profileModal #thumbs.sstat,#profileModal #thumbs.sstat.d-block{flex-direction:column!important;align-items:center;gap:2px}
  #profileModal .sstat svg{display:none}
  #profileModal .sstat .v{margin-left:0;font-size:18px;order:-1}
  #profileModal .sstat .k{font-size:11px}
  #profileModal #thumbs.sstat .thumb-lbl{margin-left:0;font-size:18px;order:-1}
  /* zone principale : onglets + panneau scrollable */
  #profileModal .main{flex:1 1 auto;min-height:0;padding:0;overflow:hidden}
  #profileModal #profile{display:flex;gap:6px;padding:12px 18px 0;border:none;margin:0;flex:0 0 auto}
  #profileModal #profile .nav-item{flex:1;margin:0}
  #profileModal #profile .nav-link{display:block;width:100%;padding:10px;margin:0;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:700;font-size:13.5px;color:var(--muted);background:none;text-align:center}
  #profileModal #profile .nav-link:hover{border-color:transparent;border-bottom-color:var(--line)}
  #profileModal #profile .nav-link.active{color:var(--green);border-color:transparent;border-bottom-color:var(--green);background:none}
  #profileModal .tab-content{flex:1 1 auto;min-height:0}
  #profileModal .tab-pane{display:none!important;opacity:1!important;padding:16px 18px}
  #profileModal .tab-pane.active{display:block!important}
  #profileModal #presentation-tab.tab-pane.active{display:block!important;height:100%;overflow-y:auto;margin-bottom:0}
  #profileModal #review-tab.tab-pane.active{display:flex!important;height:100%}
  #profileModal .d3-h3{display:none}
  #profileModal .reviews-content.reviews-container{grid-template-columns:1fr!important;max-height:none}
  #profileModal .d3-reviews-loading{top:0}
}

/* =========================================================================
   PAGE OFFRES /annonces (design 3.0) — scopée .d3-offers
   ========================================================================= */
.d3-offers{font-family:var(--font)}
.d3-offers a{text-decoration:none;color:inherit}
.d3-offers button{font-family:inherit;cursor:pointer;border:none;background:none}
.d3-offers .icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.d3-offers .icon-sm{width:15px;height:15px}
.d3-offers .wrap{max-width:1200px;margin:0 auto;padding:22px 24px 60px}
.d3-offers .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.d3-offers .head h1{font-size:22px;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.d3-offers .head .count{color:var(--muted);font-size:14px}
.d3-offers .btn-publish{padding:11px 16px;border-radius:var(--radius-sm);background:var(--green);color:#fff;font-weight:700;font-size:14px;line-height:1;display:flex;align-items:center;gap:8px}
.d3-offers .btn-publish:hover{background:var(--green-700)}
/* filterbar */
.d3-offers .filterbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-bottom:20px}
.d3-offers .filterbar>*{flex-shrink:0}
@media(max-width:1140px){.d3-offers .filterbar{flex-wrap:wrap}}
.d3-offers .seg{display:flex;gap:4px;background:var(--bg);border-radius:10px;padding:4px}
.d3-offers .seg a{padding:7px 13px;border-radius:8px;font-weight:600;font-size:13px;color:var(--muted)}
.d3-offers .seg a.active{background:var(--green);color:#fff}
.d3-offers .dd{position:relative}
.d3-offers .dd-btn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;background:#fff;white-space:nowrap}
[data-theme="dark"] .d3-offers .dd-btn{background:var(--surface)}
.d3-offers .dd-btn:hover,.d3-offers .dd.open .dd-btn{border-color:var(--green)}
.d3-offers .dd-btn .cur{display:inline-flex;align-items:center;white-space:nowrap}
.d3-offers .dd-btn .chev{color:var(--muted);transition:.15s;margin-left:auto;flex-shrink:0}
.d3-offers .dd.open .dd-btn .chev{transform:rotate(180deg)}
.d3-offers .oic{width:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:6px}
.d3-offers .oic img{height:17px;width:auto}.d3-offers .oic svg{width:16px;height:16px;color:var(--muted)}
.d3-offers .dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:215px;max-height:320px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 12px 30px rgba(24,29,26,.13);padding:6px;z-index:40;display:none}
.d3-offers .dd-search{position:sticky;top:-6px;z-index:1;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:-2px 0 6px;font-family:var(--font);font-size:13px;color:var(--ink);background:var(--surface);outline:none}
.d3-offers .dd-search:focus{border-color:var(--green)}
.d3-offers .dd-search::placeholder{color:var(--muted)}
.d3-offers .dd-group{padding:8px 10px 4px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.d3-offers .dd-group:first-of-type{padding-top:2px}
.d3-offers .dd.dd-sort .dd-menu{left:auto;right:0}
.d3-offers .dd.open .dd-menu{display:block}
.d3-offers .dd-opt{display:flex;align-items:center;width:100%;padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;white-space:nowrap}
.d3-offers .dd-opt:hover{background:var(--green-50)}
.d3-offers .dd-opt .oinner{display:flex;align-items:center;gap:10px}
.d3-offers .dd-opt.active{color:var(--green)}
.d3-offers .dd-opt .chk{margin-left:auto;color:var(--green);display:none}
.d3-offers .dd-opt.active .chk{display:flex}
.d3-offers .toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--body);cursor:pointer}
.d3-offers .toggle .tlab{display:inline-flex;align-items:center;gap:5px}
.d3-offers .toggle .fsec{width:14px;height:14px;flex-shrink:0}
.d3-offers .toggle .fsec-on{display:none;color:var(--green)}.d3-offers .toggle .fsec-off{color:var(--d3-red)}
.d3-offers .toggle:has(.switch.on) .fsec-on{display:block}.d3-offers .toggle:has(.switch.on) .fsec-off{display:none}
.d3-offers .toggle .fdot{width:9px;height:9px;border-radius:50%;background:#C2C8C3;flex-shrink:0}
.d3-offers .toggle:has(.switch.on) .fdot{background:var(--green);animation:d3dotPulse 1.6s ease-out infinite}
@keyframes d3dotPulse{0%{box-shadow:0 0 0 0 rgba(44,110,73,.6)}70%{box-shadow:0 0 0 7px rgba(44,110,73,0)}100%{box-shadow:0 0 0 0 rgba(44,110,73,0)}}
@media(prefers-reduced-motion:reduce){.d3-offers .toggle .fdot{animation:none}}
.d3-offers .switch{position:relative;display:inline-block;width:36px;height:21px;border-radius:20px;background:var(--line);flex-shrink:0;vertical-align:middle}
.d3-offers .switch.on{background:var(--green)}
.d3-offers .switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s}
.d3-offers .switch.on::after{left:17px}
.d3-offers .dd-sort{margin-left:auto}
/* grid + cartes offre */
.d3-offers .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:14px}
.d3-offers .offer{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:.15s;cursor:pointer}
.d3-offers .offer:hover{border-color:var(--green-100);box-shadow:0 8px 22px rgba(44,110,73,.10);transform:translateY(-2px)}
.d3-offers .o-left{flex:1;min-width:0;padding:15px 16px;display:flex;flex-direction:column}
.d3-offers .o-seller{display:flex;align-items:center;gap:11px}
.d3-offers .av{width:44px;height:44px;border-radius:12px;background:var(--green-100);flex-shrink:0;position:relative}
.d3-offers .av img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.d3-offers .av .on,.d3-offers .av .off{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surface)}
.d3-offers .av .on{background:var(--green);animation:d3pulseOn 1.5s ease-out infinite}
.d3-offers .av .off{background:#C2C8C3}
@keyframes d3pulseOn{0%{box-shadow:0 0 0 0 rgba(44,110,73,.85)}70%{box-shadow:0 0 0 9px rgba(44,110,73,0)}100%{box-shadow:0 0 0 0 rgba(44,110,73,0)}}
@media(prefers-reduced-motion:reduce){.d3-offers .av .on{animation:none}}
.d3-offers .who{min-width:0}
.d3-offers .who b{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--ink);font-size:15px}
.d3-offers .o-name{color:var(--ink)}
.d3-offers .secu{display:inline-flex;align-items:center;align-self:center;margin-left:auto;gap:4px;font-size:11px;font-weight:800;color:var(--green-700);background:var(--green-50);border:1px solid var(--green-100);padding:2px 8px;border-radius:20px;flex-shrink:0;animation:d3secuPulse 2.2s ease-out infinite}
.d3-offers .secu svg{width:12px;height:12px}
@keyframes d3secuPulse{0%{box-shadow:0 0 0 0 rgba(44,110,73,.45)}70%{box-shadow:0 0 0 7px rgba(44,110,73,0)}100%{box-shadow:0 0 0 0 rgba(44,110,73,0)}}
@media(prefers-reduced-motion:reduce){.d3-offers .secu{animation:none}}
.d3-offers .revs{display:flex;gap:11px;margin-top:3px}
.d3-offers .rev{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700}
.d3-offers .rev svg{width:13px;height:13px}.d3-offers .rev.pos{color:var(--green)}.d3-offers .rev.neg{color:var(--d3-red)}
.d3-offers .o-grade{flex-shrink:0;align-self:center;width:34px;height:34px;padding:4px;object-fit:contain;box-sizing:border-box;position:relative;z-index:2}
/* Effet doré sur les badges de grade : de fins traits dorés orientés tout
   autour, qui grossissent puis rétrécissent en décalé (extrémités dégradées
   + léger glow pour un rendu doux). */
.d3-offers .o-grade-wrap{position:relative;display:inline-flex;align-self:center;flex-shrink:0;
	--gold:#C9740A;   /* orange foncé — light mode (mieux visible sur blanc) */
	--glow:190,105,15;/* couleur du glow (RGB) */
	--gi:1}           /* opacité de crête (réglée par palier de grade) */
[data-theme="dark"] .d3-offers .o-grade-wrap{--gold:#FFE27A;--glow:255,214,110;--aura:70,160,118}
/* aura vert clair derrière le badge, qui pulse doucement */
.d3-offers .o-grade-wrap{--aura:76,166,120}
.d3-offers .o-grade-wrap::before{content:"";position:absolute;left:50%;top:50%;width:var(--aura-s,150%);height:var(--aura-s,150%);transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
	background:radial-gradient(circle,rgba(var(--aura),.30),rgba(var(--aura),0) 66%);
	animation:ogAura calc(2.8s * var(--dmul,1)) ease-in-out infinite}
@keyframes ogAura{
	0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.85)}
	50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
.d3-offers .og-spark{position:absolute;z-index:3;width:1.5px;height:var(--tlen,14px);border-radius:2px;pointer-events:none;transform-origin:center;opacity:0;
	background:linear-gradient(to bottom,transparent,var(--gold) 30% 70%,transparent);
	filter:drop-shadow(0 0 1.5px rgba(var(--glow),.6));
	animation:var(--kf,ogSparkA) calc(var(--dur,4.2s) * var(--dmul,1)) ease-in-out infinite}
/* 3 séquences multi-pics : grand / petit / moyen dans un ordre différent, pour
   que chaque trait change de taille au fil du temps (pas figé au départ). */
@keyframes ogSparkA{
	0%,22%,52%,82%,100%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.12);opacity:0}
	10%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1);opacity:var(--gi)}
	40%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.42);opacity:calc(var(--gi)*.65)}
	70%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.78);opacity:calc(var(--gi)*.9)}}
@keyframes ogSparkB{
	0%,24%,56%,86%,100%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.12);opacity:0}
	12%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.4);opacity:calc(var(--gi)*.6)}
	44%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1);opacity:var(--gi)}
	74%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.55);opacity:calc(var(--gi)*.75)}}
@keyframes ogSparkC{
	0%,22%,54%,84%,100%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.12);opacity:0}
	10%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.7);opacity:calc(var(--gi)*.85)}
	42%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.32);opacity:calc(var(--gi)*.55)}
	72%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1);opacity:var(--gi)}}
/* positions éparpillées (en % du badge), angles, séquences, durées et décalages variés */
.d3-offers .og-spark.s1{left:50%;top:-15%;--rot:6deg;--kf:ogSparkA;--dur:4s;animation-delay:0s}
.d3-offers .og-spark.s2{left:95%;top:2%;--rot:55deg;--kf:ogSparkB;--dur:4.6s;animation-delay:.6s}
.d3-offers .og-spark.s3{left:113%;top:46%;--rot:96deg;--kf:ogSparkC;--dur:3.8s;animation-delay:.2s}
.d3-offers .og-spark.s4{left:95%;top:92%;--rot:135deg;--kf:ogSparkB;--dur:5s;animation-delay:.9s}
.d3-offers .og-spark.s5{left:50%;top:113%;--rot:-8deg;--kf:ogSparkC;--dur:4.2s;animation-delay:.4s}
.d3-offers .og-spark.s6{left:5%;top:92%;--rot:45deg;--kf:ogSparkA;--dur:4.8s;animation-delay:1.1s}
.d3-offers .og-spark.s7{left:-13%;top:46%;--rot:90deg;--kf:ogSparkB;--dur:3.9s;animation-delay:.55s}
.d3-offers .og-spark.s8{left:5%;top:4%;--rot:130deg;--kf:ogSparkC;--dur:4.5s;animation-delay:.15s}
/* Niveaux : plus le grade descend, plus les traits sont courts et l'aura petite
   (t6 = meilleur grade = pleine taille, inchangé). */
.d3-offers .og-t1{--gi:.55;--tlen:3px;--aura-s:96%;--dmul:1}
.d3-offers .og-t2{--gi:.66;--tlen:4.5px;--aura-s:106%;--dmul:1.05}
.d3-offers .og-t3{--gi:.76;--tlen:6.5px;--aura-s:117%;--dmul:1.15}
.d3-offers .og-t4{--gi:.85;--tlen:9px;--aura-s:128%;--dmul:1.3}
.d3-offers .og-t5{--gi:.93;--tlen:11.5px;--aura-s:139%;--dmul:1.45}
.d3-offers .og-t6{--gi:1;--tlen:14px;--aura-s:150%;--dmul:1.6}
@media(prefers-reduced-motion:reduce){.d3-offers .og-spark{display:none}.d3-offers .o-grade-wrap::before{animation:none;opacity:.6}}
.d3-offers .o-meta{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:13px;flex-wrap:wrap}
.d3-offers .o-fees{flex:0 0 100%;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:-6px}
.d3-offers .o-fees svg{width:14px;height:14px;color:var(--gold,#C9921F);stroke:currentColor;stroke-width:1.9;fill:none}
.d3-offers .mm{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink)}
.d3-offers .mm svg{color:var(--green);width:15px;height:15px}
.d3-offers .mm .flame{width:15px;height:15px;fill:#E0451F;stroke:none;margin-left:1px}
.d3-offers .mm.off{color:var(--muted)}.d3-offers .mm.off svg{color:var(--muted)}
.d3-offers .pays{display:flex;align-items:center;gap:7px;margin-left:auto}.d3-offers .pays img{height:20px;width:auto}
.d3-offers .o-rail{width:178px;flex-shrink:0;background:var(--green-50);border-left:1px solid var(--green-100);padding:16px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:6px}
.d3-offers .price{font-size:23px;font-weight:800;color:var(--ink);letter-spacing:-.02em;text-align:center;line-height:1.1;margin-bottom:9px}
.d3-offers .price small{font-size:13px;font-weight:600;color:var(--muted)}
.d3-offers .rail-stock{text-align:center;font-size:12px;color:var(--muted);margin-bottom:16px}
.d3-offers .rail-stock b{color:var(--ink)}
.d3-offers .rail-server{display:block;margin-top:7px;text-align:center;font-weight:600;color:var(--body)}
/* préfixe des dropdowns (Je reçois / Je donne) */
.d3-offers .dd-btn .pre{color:var(--muted);flex-shrink:0}
/* bloc taux d'échange (carte) */
.d3-offers .xrate{padding-top:11px;margin-top:13px}
.d3-offers .xr1{border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 12px}
.d3-offers .xr1 .row{display:flex;align-items:center;justify-content:space-between;min-height:24px;flex-wrap:nowrap;margin:0;--bs-gutter-x:0}
.d3-offers .xr1 .row > *{width:auto;max-width:none;padding:0;margin-top:0}
.d3-offers .xr1 .lbl{font-size:11px;font-weight:700;color:var(--muted)}
.d3-offers .xr1 .row.you .lbl{color:var(--green-700)}
.d3-offers .xr1 .val{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;white-space:nowrap}
.d3-offers .xr1 .val b{min-width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:800;color:var(--ink);white-space:nowrap;flex-shrink:0}
.d3-offers .xr1 .val span{min-width:70px;text-align:left;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d3-offers .xr1 .lbl{flex-shrink:0}
.d3-offers .xr1 .sep{display:flex;align-items:center;gap:8px;margin:3px 0}
.d3-offers .xr1 .sep::before,.d3-offers .xr1 .sep::after{content:"";flex:1;height:1px;background:var(--line-2)}
.d3-offers .xr1 .sep svg{width:13px;height:13px;color:var(--green)}
/* échange : taux juste sous le vendeur, temps de réponse en bas */
.d3-offers .offer[data-mm-exchange] .xrate{order:1;margin-top:0;padding-top:13px}
.d3-offers .offer[data-mm-exchange] .o-meta{order:2;margin-top:auto;padding-top:13px}
.d3-offers .btn-tx{width:100%;padding:11px;border-radius:var(--radius-sm);background:var(--green);color:#fff;font-weight:700;font-size:13.5px;line-height:1;display:flex;align-items:center;justify-content:center;gap:7px}
.d3-offers .btn-tx:hover{background:var(--green-700)}
/* empty state */
.d3-offers .empty-state{position:relative;text-align:center;padding:60px 24px 64px;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:var(--green-50);border:1px solid var(--green-100);border-radius:24px}
.d3-offers .empty-state::before{content:"";position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:540px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 62%);opacity:.9;pointer-events:none}
[data-theme="dark"] .d3-offers .empty-state::before{background:radial-gradient(circle,rgba(70,160,115,.18),transparent 62%)}
.d3-offers .es-art{position:relative;margin-bottom:24px}
.d3-offers .es-icon{position:relative;z-index:2;width:94px;height:94px;border-radius:28px;background:linear-gradient(150deg,#46A073,var(--green-700));color:#fff;display:grid;place-items:center;box-shadow:0 16px 36px rgba(44,110,73,.32);animation:d3esFloat 3.4s ease-in-out infinite}
.d3-offers .es-icon svg{width:44px;height:44px}
@keyframes d3esFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.d3-offers .es-spark{position:absolute;border-radius:50%;z-index:1}
.d3-offers .es-spark.s1{width:14px;height:14px;background:#E2A93A;top:-4px;right:-12px;animation:d3esPulse 2.2s ease-in-out infinite}
.d3-offers .es-spark.s2{width:9px;height:9px;background:var(--green-100);bottom:8px;left:-16px;animation:d3esPulse 2.2s ease-in-out infinite .6s}
.d3-offers .es-spark.s3{width:7px;height:7px;background:var(--green);top:22px;right:-24px;animation:d3esPulse 2.2s ease-in-out infinite 1.1s}
@keyframes d3esPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.4);opacity:1}}
@media(prefers-reduced-motion:reduce){.d3-offers .es-icon,.d3-offers .es-spark{animation:none}}
.d3-offers .empty-state h2{position:relative;font-size:23px;color:var(--ink);font-weight:800;letter-spacing:-.02em;margin-bottom:9px}
.d3-offers .empty-state p{position:relative;font-size:15px;color:var(--body);max-width:420px;margin-bottom:20px}
.d3-offers .es-reset{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:11px}
.d3-offers .es-reset:hover{background:var(--green-700)}
.d3-offers .es-loading{display:flex;justify-content:center;padding:24px}
.d3-offers .es-loading .d3-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--green-100);border-top-color:var(--green);animation:d3spin .7s linear infinite}
/* mobile */
/* outils mobiles (cachés en desktop) */
.d3-offers .f-tools,.d3-offers .sheet-wrap{display:none}
@media(max-width:760px){
  .d3-offers .grid{grid-template-columns:1fr}
  .d3-offers .wrap{padding:16px 14px 48px}
  /* filterbar desktop → seul le segment reste, les filtres passent dans le sheet */
  .d3-offers .filterbar{background:none;border:none;box-shadow:none;padding:0;display:block;margin-bottom:14px}
  .d3-offers .filterbar .dd,.d3-offers .filterbar .toggle{display:none!important}
  .d3-offers .seg{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:12px}
  .d3-offers .seg a{flex:1;text-align:center;padding:9px}
  /* barre outils */
  .d3-offers .f-tools{display:flex;gap:8px;margin-bottom:16px}
  .d3-offers .f-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font-weight:700;font-size:13.5px;color:var(--ink);box-shadow:var(--shadow)}
  .d3-offers .f-btn svg{width:17px;height:17px;color:var(--green)}
  .d3-offers .f-badge{min-width:19px;height:19px;padding:0 5px;border-radius:20px;background:var(--green);color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
  .d3-offers .f-sort{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow);padding:0 12px}
  .d3-offers .f-sort>svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
  .d3-offers .f-sort select{flex:1;border:none;background:none;font-family:var(--font);font-size:13px;font-weight:600;color:var(--body);outline:none;padding:11px 0}
  /* bottom sheet */
  .d3-offers .sheet-wrap{position:fixed;inset:0;z-index:1090;display:none}
  .d3-offers .sheet-wrap.open{display:block}
  .d3-offers .sheet-back{position:absolute;inset:0;background:rgba(24,29,26,.45);animation:d3ffade .2s ease}
  @keyframes d3ffade{from{opacity:0}to{opacity:1}}
  .d3-offers .sheet{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--surface);border-radius:22px 22px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));animation:d3fslide .28s cubic-bezier(.2,.8,.2,1);max-height:90%;overflow-y:auto}
  @keyframes d3fslide{from{transform:translateY(100%)}to{transform:none}}
  .d3-offers .sheet-handle{width:42px;height:4px;border-radius:4px;background:var(--line);margin:5px auto 14px}
  .d3-offers .sheet-head{display:flex;align-items:center;font-size:17px;font-weight:800;color:var(--ink);margin-bottom:16px}
  .d3-offers .sheet-head .x{margin-left:auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--muted);background:var(--bg)}
  .d3-offers .fsec{margin-bottom:18px}
  .d3-offers .fsec h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}
  .d3-offers .chips{display:flex;flex-wrap:wrap;gap:8px}
  .d3-offers .chips-grp{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--green-700);margin:4px 0 6px}
  .d3-offers .chip-opt{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink)}
  .d3-offers .chip-opt img{height:16px;width:auto}
  .d3-offers .chip-opt.active{border-color:var(--green);background:var(--green-50);color:var(--green-700)}
  /* listes filtres scrollables + recherche (plus lisible que des chips en masse) */
  .d3-offers .sheet-search{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;font-family:var(--font);color:var(--ink);background:var(--surface);margin-bottom:8px;outline:none}
  .d3-offers .sheet-search:focus{border-color:var(--green)}
  .d3-offers .sheet-search::placeholder{color:var(--muted)}
  .d3-offers .sheet-list{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:12px}
  .d3-offers .sheet-opt{display:flex;align-items:center;gap:8px;padding:12px 13px;font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-2)}
  .d3-offers .sheet-opt:last-child{border-bottom:none}
  .d3-offers .sheet-opt > span{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
  .d3-offers .sheet-opt img{height:18px;width:auto;flex-shrink:0}
  .d3-offers .sheet-opt .ck{width:16px;height:16px;color:var(--green);opacity:0;flex-shrink:0}
  .d3-offers .sheet-opt.active{color:var(--green-700);background:var(--green-50)}
  .d3-offers .sheet-opt.active .ck{opacity:1}
  .d3-offers .sheet-grp{position:sticky;top:0;padding:8px 13px 5px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--bg)}
  .d3-offers .opt-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line-2)}
  .d3-offers .opt-row>span{font-size:14px;font-weight:600;color:var(--ink)}
  .d3-offers .btn-apply{width:100%;margin-top:8px;padding:13px;border-radius:var(--radius-sm);background:var(--green);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px}
  /* cartes : 1 colonne, rail en bas (row) */
  .d3-offers .offer{flex-direction:column}
  .d3-offers .o-rail{width:auto;border-left:none;border-top:1px solid var(--green-100);flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .d3-offers .o-rail .rail-info{text-align:left;display:flex;flex-direction:column;gap:6px}
  .d3-offers .price{text-align:left;margin-bottom:0}
  .d3-offers .rail-stock{text-align:left;margin-bottom:0}
  .d3-offers .rail-server{text-align:left;margin-top:4px}
  .d3-offers .btn-tx{width:auto;margin-left:auto;padding:11px 18px}
  /* échange : rail row aussi */
  .d3-offers .offer[data-mm-exchange] .o-meta{margin-top:8px}
}

/* =========================================================================
   Toasts notifications (design 3.0) — nouveau message / paiement / transaction
   Classes préfixées mmtoast* pour ne pas entrer en conflit avec Bootstrap .toast
   ========================================================================= */
#toast-containerNotify{position:fixed;right:18px;bottom:18px;left:auto;top:auto;z-index:1090;display:flex;flex-direction:column;gap:9px;width:280px;max-width:calc(100vw - 36px);padding:0;pointer-events:none}
#toast-containerNotify .mmtoast{pointer-events:auto}
.mmtoast{position:relative;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 34px rgba(24,29,26,.20);padding:9px 11px;cursor:pointer;animation:mmtoastIn .3s cubic-bezier(.4,.8,.3,1)}
.mmtoast::after{content:"";position:absolute;inset:0;border-radius:11px;pointer-events:none;animation:mmtoastGlow 3s ease-out infinite}
.mmtoast:nth-child(2)::after{animation-delay:.5s}
.mmtoast:nth-child(3)::after{animation-delay:1s}
.mmtoast:nth-child(4)::after{animation-delay:1.5s}
.mmtoast.mmtoast-out{animation:mmtoastOut .25s ease forwards}
@keyframes mmtoastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes mmtoastOut{to{opacity:0;transform:translateX(40px)}}
@keyframes mmtoastGlow{0%{box-shadow:0 0 0 0 rgba(44,110,73,.4)}70%{box-shadow:0 0 0 10px rgba(44,110,73,0)}100%{box-shadow:0 0 0 0 rgba(44,110,73,0)}}
.mmtoast .mt-av{width:34px;height:34px;border-radius:9px;background:var(--green-50) center/cover no-repeat;flex-shrink:0;display:grid;place-items:center;color:var(--green);animation:mmtavWiggle 3s ease-in-out infinite;transform-origin:50% 60%}
.mmtoast .mt-av svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes mmtavWiggle{0%,80%,100%{transform:rotate(0) scale(1)}85%{transform:rotate(-8deg) scale(1.08)}90%{transform:rotate(7deg) scale(1.08)}95%{transform:rotate(-3deg) scale(1.03)}}
.mmtoast .mt-body{flex:1;min-width:0}
.mmtoast .mt-body b{display:block;color:var(--ink);font-size:13px;font-weight:700;line-height:1.3;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.mmtoast .mt-body span{display:block;color:var(--muted);font-size:11.5px;line-height:1.35;margin-top:1px;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.mmtoast .mt-dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex-shrink:0;margin-right:2px;animation:mmtdotPulse 1.6s ease-out infinite}
@keyframes mmtdotPulse{0%{box-shadow:0 0 0 0 rgba(44,110,73,.55);transform:scale(1)}55%{transform:scale(1.25)}70%{box-shadow:0 0 0 6px rgba(44,110,73,0)}100%{box-shadow:0 0 0 0 rgba(44,110,73,0);transform:scale(1)}}
.mmtoast .mt-close{flex-shrink:0;width:22px;height:22px;border-radius:6px;color:var(--muted);display:grid;place-items:center;background:none;border:none;cursor:pointer}
.mmtoast .mt-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mmtoast .mt-close:hover{background:var(--line-2);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.mmtoast .mt-av,.mmtoast::after,.mmtoast .mt-dot{animation:none}}
@media(max-width:480px){#toast-containerNotify{left:14px;right:14px;width:auto}}
/* Toast : chip type de transaction (achat / vente / échange / support) — remplace l'ancien libellé "Kamas <serveur>" */
.mmtoast .mt-type{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex-shrink:0;padding:0}
.mmtoast .mt-type svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mmtoast .mt-type-buy{background:var(--green-50);color:var(--green-700)}
.mmtoast .mt-type-sell{background:#FBF1E2;color:#B26A0F}
.mmtoast .mt-type-exchange{background:var(--line-2);color:var(--ink)}
.mmtoast .mt-type-admin{background:var(--line-2);color:var(--body)}
[data-theme="dark"] .mmtoast .mt-type-sell{background:#3A2E16;color:#E3B765}

/* ============================================================
   Popup "Demande de transaction" — design 3.0 (offres-demande)
   Scopé .dform3 ; dialog ciblé par .dform-dialog (posée dans html_deal.php).
   ============================================================ */
/* dialog épinglé : ne bouge pas au scroll (position fixe, ancré en haut → pas de recentrage) */
.modal-deal .dform-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-width:480px;width:calc(100% - 24px);max-height:95vh}
.modal-deal.fade .dform-dialog,.modal-deal.fade.show .dform-dialog{transform:translate(-50%,-50%)!important}
.modal-deal .dform-dialog .modal-content{border:none;border-radius:20px;box-shadow:0 24px 70px rgba(24,29,26,.32);max-height:95vh;overflow-y:auto;overflow-x:hidden}
.modal-deal .dform-dialog .modal-content > div.float-end{display:none}
.dform3{position:relative;padding:0;background:var(--surface);border-radius:20px}
.dform3 *{box-sizing:border-box}
.dform3 .df-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--muted);background:rgba(0,0,0,.04);border:none;cursor:pointer;z-index:3;padding:0}
.dform3 .df-x:hover{background:rgba(0,0,0,.08)}
.dform3 .df-x svg{width:15px;height:15px;display:block}
.dform3 .df-pad{padding:28px 28px 22px}
.dform3 .df-seller{display:flex;align-items:center;gap:12px}
.dform3 .df-av{width:52px;height:52px;border-radius:14px;background:var(--green-100) center/cover no-repeat;flex-shrink:0;position:relative}
.dform3 .df-av .on{position:absolute;bottom:-1px;right:-1px;width:13px;height:13px;border-radius:50%;background:var(--green);border:2px solid var(--surface);animation:dfPulseOn 1.5s ease-out infinite}
@keyframes dfPulseOn{0%{box-shadow:0 0 0 0 rgba(44,110,73,.8)}70%{box-shadow:0 0 0 8px rgba(44,110,73,0)}100%{box-shadow:0 0 0 0 rgba(44,110,73,0)}}
.dform3 .df-who b{display:flex;align-items:center;gap:7px;color:var(--ink);font-size:16px;font-weight:800}
.dform3 .df-grade-ic{height:18px;width:auto}
.dform3 .df-prem{width:15px;height:15px;border-radius:4px;background:var(--gold)}
.dform3 .df-revs{display:flex;gap:11px;margin-top:3px}
.dform3 .df-rev{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700}
.dform3 .df-rev svg{width:13px;height:13px}
.dform3 .df-rev.pos{color:var(--green)}.dform3 .df-rev.neg{color:var(--d3-red)}
.dform3 .df-fl{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:20px 0 9px}
.dform3 .df-fl .i{color:var(--muted);margin-left:4px;font-weight:500}
.dform3 .df-info{color:var(--muted);margin-left:4px;cursor:pointer}
/* dropdown moyen de paiement */
.dform3 .df-paysel{position:relative}
.dform3 .df-paysel-btn{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-size:14.5px;font-weight:600;color:var(--ink);background:var(--surface);cursor:pointer}
.dform3 .df-paysel.open .df-paysel-btn,.dform3 .df-paysel-btn:hover{border-color:var(--green)}
.dform3 .df-paysel-cur{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.dform3 .df-paysel-cur img{height:18px}
.dform3 .df-paysel-cur .df-ph{color:var(--muted);font-weight:600}
.dform3 .df-paysel-cur .df-pp-price{margin-left:auto;color:var(--muted);font-weight:700;font-size:13px}
.dform3 .df-chev{width:16px;height:16px;color:var(--muted);transition:.15s;flex-shrink:0}
.dform3 .df-paysel.open .df-chev{transform:rotate(180deg)}
.dform3 .df-paysel-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px rgba(24,29,26,.18);padding:6px;z-index:5;display:none}
.dform3 .df-paysel.open .df-paysel-menu{display:block}
.dform3 .df-pay-pick{display:flex;align-items:center;width:100%;padding:10px 11px;border-radius:9px;text-align:left;border:none;background:none;cursor:pointer}
.dform3 .df-pay-pick:hover{background:var(--green-50)}
.dform3 .df-pp-inner{display:flex;align-items:center;gap:9px;flex:1;font-size:14px;font-weight:600;color:var(--ink)}
.dform3 .df-pp-inner img{height:18px}
.dform3 .df-pp-inner .df-pp-price{margin-left:auto;color:var(--muted);font-weight:700}
.dform3 .df-pay-pick.active .df-pp-inner{color:var(--green)}
/* quantité */
.dform3 .df-qbox{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dform3 .df-qbox:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-50)}
.dform3 .df-qbox input{flex:1;border:none;outline:none;padding:14px 15px;font-family:inherit;font-size:17px;font-weight:700;color:var(--ink);text-align:right;background:none;min-width:0}
.dform3 .df-unit{display:flex;align-items:center;gap:5px;padding:0 14px;background:var(--bg);border-left:1px solid var(--line);font-weight:700;color:var(--body);font-size:14px}
.dform3 .df-unit img{height:15px}
/* sécurité */
.dform3 .df-secure{display:flex;align-items:center;gap:11px;margin-top:18px;padding:13px 15px;border:1px solid var(--green-100);background:var(--green-50);border-radius:10px;cursor:pointer}
.dform3 .df-secure:hover{border-color:var(--green)}
.dform3 .df-unsecure{cursor:pointer}
.dform3 .df-unsecure:hover{border-color:var(--red)}
.dform3 .df-sec-check{width:22px;height:22px;border-radius:6px;background:var(--green);display:grid;place-items:center;flex-shrink:0;color:#fff}
.dform3 .df-sec-check svg{width:14px;height:14px}
.dform3 .df-sec-txt{font-size:13.5px;font-weight:600;color:var(--ink)}
.dform3 .df-sec-free{color:var(--green-700);font-weight:700}
.dform3 .df-sec-lock{margin-left:auto;color:var(--green-700);width:16px;height:16px;flex-shrink:0}
.dform3 .df-unsecure{display:flex;align-items:center;gap:11px;margin-top:18px;padding:13px 15px;border:1px solid #F2D6D6;background:#FDF3F2;border-radius:10px;color:var(--red);font-size:13.5px;font-weight:700}
.dform3 .df-unsecure svg{width:19px;height:19px;flex-shrink:0}
.dform3 .df-unsec-lock{margin-left:auto;width:16px;height:16px}
/* récap */
.dform3 .df-recap{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:18px}
.dform3 .df-r{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--line-2)}
.dform3 .df-r .k{color:var(--muted)}
.dform3 .df-r .v{color:var(--ink);font-weight:700}
.dform3 .df-r.tot{background:var(--green-50);border-bottom:none;padding:15px 16px}
.dform3 .df-r.tot .k{color:var(--green-700);font-weight:700}
.dform3 .df-r.tot .v{color:var(--green-700);font-size:23px;font-weight:800}
.dform3 .df-hidden{display:none!important}
/* footer */
.dform3 .df-foot{padding:6px 28px 28px}
.dform3 .df-send{width:100%;padding:15px;border-radius:10px;background:var(--green);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer}
.dform3 .df-send:hover{background:var(--green-700)}
.dform3 .df-min-warn{margin-top:10px;padding:9px 12px;border:1px solid #F2D6D6;background:#FDF3F2;border-radius:8px;color:var(--red);font-size:12.5px;font-weight:700}
.dform3 .df-send:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.dform3 .df-send:disabled:hover{background:var(--line)}
.dform3 .df-send svg{width:15px;height:15px}
@media(max-width:560px){
.dform3 .df-pad{padding:22px 18px 16px}
.dform3 .df-foot{padding:6px 18px 22px}
}
/* Adaptation à la hauteur d'écran : on réduit les éléments pour qu'il n'y ait JAMAIS de scroll interne */
@media(max-height:800px){
.dform3 .df-pad{padding:20px 26px 14px}
.dform3 .df-foot{padding:4px 26px 18px}
.dform3 .df-fl{margin:14px 0 7px}
.dform3 .df-av{width:46px;height:46px}
.dform3 .df-paysel-btn{padding:11px 14px}
.dform3 .df-qbox input{padding:11px 15px;font-size:16px}
.dform3 .df-secure,.dform3 .df-unsecure{margin-top:13px;padding:11px 14px}
.dform3 .df-recap{margin-top:13px}
.dform3 .df-r{padding:10px 15px}
.dform3 .df-r.tot{padding:12px 15px}
.dform3 .df-r.tot .v{font-size:21px}
.dform3 .df-send{padding:13px;font-size:15px}
}
@media(max-height:680px){
.dform3 .df-pad{padding:15px 24px 11px}
.dform3 .df-foot{padding:4px 24px 14px}
.dform3 .df-seller{gap:10px}
.dform3 .df-av{width:42px;height:42px}
.dform3 .df-who b{font-size:15px}
.dform3 .df-revs{margin-top:2px}
.dform3 .df-fl{margin:11px 0 6px;font-size:13px}
.dform3 .df-paysel-btn{padding:9px 13px;font-size:14px}
.dform3 .df-qbox input{padding:9px 13px;font-size:15px}
.dform3 .df-unit{padding:0 12px}
.dform3 .df-secure,.dform3 .df-unsecure{margin-top:10px;padding:9px 12px;font-size:12.5px}
.dform3 .df-recap{margin-top:10px}
.dform3 .df-r{padding:8px 14px;font-size:12.5px}
.dform3 .df-r.tot{padding:9px 14px}
.dform3 .df-r.tot .v{font-size:19px}
.dform3 .df-send{padding:11px;font-size:14.5px}
.dform3 .df-x{top:10px;right:10px;width:32px;height:32px}
}
@media(max-height:580px){
.dform3 .df-pad{padding:12px 22px 9px}
.dform3 .df-foot{padding:3px 22px 12px}
.dform3 .df-av{width:38px;height:38px}
.dform3 .df-fl{margin:9px 0 5px;font-size:12.5px}
.dform3 .df-paysel-btn{padding:8px 12px}
.dform3 .df-qbox input{padding:8px 12px;font-size:14px}
.dform3 .df-secure,.dform3 .df-unsecure{margin-top:8px;padding:8px 11px}
.dform3 .df-recap{margin-top:8px}
.dform3 .df-r{padding:7px 13px;font-size:12px}
.dform3 .df-r.tot .v{font-size:18px}
.dform3 .df-send{padding:10px;font-size:14px}
}