/* ════════════════════════════════════════
   THÈME CLAIR (défaut)
   ════════════════════════════════════════ */
:root{
  /* Couleurs thématiques — surchargées par chaque page */
  --accent-light:     #2d6a9f;
  --accent-dark:      #5b9fd4;
  --highlight-light:  #e8f2fa;
  --highlight-dark:   #1a2e40;
  --badge-bg-light:   #e8f2fa;
  --badge-bg-dark:    #1a2e40;
  --badge-txt-light:  #1a4a7a;
  --badge-txt-dark:   #7ec8f5;
  --badge-border-light:#b5d4f4;
  --badge-border-dark:#2d5a7a;
  --unit-color-light: #7ec8f5;
  --unit-color-dark:  #7ec8f5;

  /* Tokens résolus — utilisés dans tout le CSS */
  --accent:     var(--accent-light);
  --ink:        #1a1a2e;
  --paper:      #f5f0e8;
  --card-bg:    #ffffff;
  --muted:      #7a7a8a;
  --line:       #d5cfc3;
  --highlight:  var(--highlight-light);
  --green:      #2d7a5a;
  --badge-bg:   var(--badge-bg-light);
  --badge-txt:  var(--badge-txt-light);
  --badge-border:var(--badge-border-light);
  --unit-color: var(--unit-color-light);
  --shadow:     var(--line);
  --grid-color: rgba(0,0,0,.04);
  --grid-color2:rgba(0,0,0,.025);

  /* Topbar */
  --topbar-h:    58px;
  --topbar-bg:   #ffffff;
  --dropdown-bg: #ffffff;
}

/* ════════════════════════════════════════
   THÈME SOMBRE
   — automatique si le système est en dark
   — ou forcé via html[data-theme="dark"]
   ════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]){
    --accent:     var(--accent-dark);
    --ink:        #e8e4dc;
    --paper:      #141418;
    --card-bg:    #1e1e24;
    --muted:      #8a8a9a;
    --line:       #2e2e38;
    --highlight:  var(--highlight-dark);
    --green:      #4aaa7a;
    --badge-bg:   var(--badge-bg-dark);
    --badge-txt:  var(--badge-txt-dark);
    --badge-border:var(--badge-border-dark);
    --unit-color: var(--unit-color-dark);
    --shadow:     rgba(0,0,0,.4);
    --grid-color: rgba(255,255,255,.03);
    --grid-color2:rgba(255,255,255,.015);
    --topbar-bg:  #1a1a22;
    --dropdown-bg:#22222e;
  }
}

/* Forçage manuel dark */
html[data-theme="dark"]{
  --accent:     var(--accent-dark);
  --ink:        #e8e4dc;
  --paper:      #141418;
  --card-bg:    #1e1e24;
  --muted:      #8a8a9a;
  --line:       #2e2e38;
  --highlight:  var(--highlight-dark);
  --green:      #4aaa7a;
  --badge-bg:   var(--badge-bg-dark);
  --badge-txt:  var(--badge-txt-dark);
  --badge-border:var(--badge-border-dark);
  --unit-color: var(--unit-color-dark);
  --shadow:     rgba(0,0,0,.4);
  --grid-color: rgba(255,255,255,.03);
  --grid-color2:rgba(255,255,255,.015);
  --topbar-bg:  #1a1a22;
  --dropdown-bg:#22222e;
}

/* Forçage manuel light */
html[data-theme="light"]{
  --accent:     var(--accent-light);
  --ink:        #1a1a2e;
  --paper:      #f5f0e8;
  --card-bg:    #ffffff;
  --muted:      #7a7a8a;
  --line:       #d5cfc3;
  --highlight:  var(--highlight-light);
  --green:      #2d7a5a;
  --badge-bg:   var(--badge-bg-light);
  --badge-txt:  var(--badge-txt-light);
  --badge-border:var(--badge-border-light);
  --unit-color: var(--unit-color-light);
  --shadow:     var(--line);
  --grid-color: rgba(0,0,0,.04);
  --grid-color2:rgba(0,0,0,.025);
  --topbar-bg:  #ffffff;
  --dropdown-bg:#ffffff;
}

/* ════════════════════════════════════════
   RESET
   ════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ════════════════════════════════════════
   BODY
   — padding-top géré par la topbar fixe
   ════════════════════════════════════════ */
body{
  font-family:'DM Sans',sans-serif;
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  padding:var(--topbar-h) 20px 80px;
  position:relative;
  transition:background .25s,color .25s;
}

body::before{
  content:'';
  position:fixed;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 27px,var(--grid-color) 27px,var(--grid-color) 28px),
    repeating-linear-gradient(90deg,transparent 27px,var(--grid-color2) 27px,var(--grid-color2) 28px);
  pointer-events:none;
  z-index:0;
  transition:background .25s;
}

/* ════════════════════════════════════════
   CONTENEUR
   ════════════════════════════════════════ */
.container{max-width:760px;margin:0 auto;padding-bottom:40px;}

/* ════════════════════════════════════════
   HEADER
   ════════════════════════════════════════ */
header{text-align:center;margin-bottom:40px}

.stamp{
  display:inline-block;
  border:3px double var(--accent);
  padding:5px 16px;
  font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
  opacity:0;animation:fadeUp .5s ease .05s forwards;
}

h1{
  font-family:'DM Serif Display',serif;
  font-size:clamp(1.9rem,5vw,3rem);
  line-height:1.1;
  margin-bottom:10px;
  opacity:0;animation:fadeUp .5s ease .15s forwards}

h1 em{font-style:italic;color:var(--accent)}

h2 {margin:5px 0 20px 0}

.texte {margin:5px 0 20px 0}

.type-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--badge-bg);
  color:var(--badge-txt);
  border:1px solid var(--badge-border);
  border-radius:20px;
  padding:5px 14px;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  margin-bottom:6px;
  transition:background .25s,color .25s,border-color .25s;
  opacity:0;animation:fadeUp .5s ease .2s forwards;
}

.type-badge::before{
  content:'';
  display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--accent);
}

.subtitle{
  font-size:13px;color:var(--muted);letter-spacing:.04em;
  opacity:0;animation:fadeUp .5s ease .25s forwards;
}

.switch-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:12px;
  font-size:12px;color:var(--muted);
  text-decoration:none;
  border-bottom:1px dashed var(--line);
  padding-bottom:1px;
  transition:color .2s,border-color .2s;
  opacity:0;animation:fadeUp .5s ease .3s forwards;
}
.switch-link:hover{color:var(--accent);border-color:var(--accent)}

/* ════════════════════════════════════════
   CARD
   ════════════════════════════════════════ */
.card{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:4px;
  padding:28px 32px;
  margin-bottom:20px;
  box-shadow:4px 4px 0 var(--shadow);
  transition:background .25s,border-color .25s,box-shadow .25s;
  opacity:0;animation:fadeUp .5s ease .35s forwards;
}

.field label{
  display:block;
  font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}

.field input[type="number"]{
  width:100%;
  padding:14px 18px;
  font-family:'DM Sans',sans-serif;
  font-size:22px;font-weight:500;
  border:2px solid var(--line);
  border-radius:2px;
  background:var(--paper);
  color:var(--ink);
  outline:none;
  transition:border-color .2s,background .25s,color .25s;
}
.field input[type="number"]:focus{border-color:var(--accent)}

/* ════════════════════════════════════════
   RÉSULTAT
   ════════════════════════════════════════ */
.result-box{
  background:var(--accent);
  color:white;
  border-radius:2px;
  padding:28px 32px;
  display:flex;align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  transition:background .25s;
  opacity:0;animation:fadeUp .5s ease .45s forwards;
}

.result-label{
  font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:8px;
}

#resultAmount{
  font-family:'DM Serif Display',serif;
  font-size:3.4rem;line-height:1;
}
#resultAmount span   {font-size:1.5rem;opacity:.6;margin-left:4px}
#resultAmount .loading{font-size:1.2rem;opacity:.4;font-family:'DM Sans',sans-serif}

.result-details         {text-align:right;min-width:220px}
.result-details p       {font-size:13px;color:rgba(255,255,255,.6);line-height:1.9}
.result-details strong  {color:rgba(255,255,255,.95)}
.result-details .unit-price{
  font-family:'DM Serif Display',serif;
  font-size:1.1rem;
  color:var(--unit-color) !important;
}
.result-details .error{color:#f5a0a0 !important}

/* ════════════════════════════════════════
   SECTION TITLE
   ════════════════════════════════════════ */
.section-title{
  font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:12px;
  margin:28px 0 16px;
  opacity:0;animation:fadeUp .5s ease .55s forwards;
}
.section-title::after{content:'';flex:1;height:1px;background:var(--line)}

/* ════════════════════════════════════════
   TABLEAU
   ════════════════════════════════════════ */
.table-wrap{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;overflow-x:auto;
  box-shadow:4px 4px 0 var(--shadow);
  transition:background .25s,border-color .25s,box-shadow .25s;
  opacity:0;animation:fadeUp .5s ease .6s forwards;
}

table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}

thead tr{background:var(--accent);color:white;transition:background .25s}
thead th{
  padding:12px 16px;text-align:left;
  font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
thead th:not(:first-child){text-align:right}

tbody tr{border-bottom:1px solid var(--line);transition:background .12s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--highlight)}

tbody tr.active-row{background:var(--highlight);border-left:3px solid var(--accent)}
tbody tr.active-row td:first-child{font-weight:700;color:var(--accent)}

td{padding:11px 16px;color:var(--muted);transition:color .25s}
td:first-child{font-weight:600;color:var(--ink)}
td:not(:first-child){text-align:right}

.price-total{font-family:'DM Serif Display',serif;font-size:15px;color:var(--accent) !important}
.price-unit{font-size:12px;color:var(--green) !important}

/* ════════════════════════════════════════
   FOOTNOTE
   ════════════════════════════════════════ */
.footnote{
  margin-top:20px;
  font-size:11px;color:var(--muted);
  text-align:center;line-height:1.7;
  opacity:0;animation:fadeUp .4s ease .8s forwards}

/* ════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to {opacity:1;transform:translateY(0)}}
@keyframes countUp{
  from{opacity:.2}
  to {opacity:1}}
.amount-change{animation:countUp .2s ease forwards}



/* ════════════════════════════════════════
   PAGE HERO + SUPPORTS GRID
   ════════════════════════════════════════ */
.page-hero{text-align:center;padding:60px 20px 48px;position:relative;z-index:1}
.page-hero h1{font-family:'DM Serif Display',serif;font-size:clamp(1.9rem,5vw,3rem);margin-bottom:10px}
.page-hero h1 em{font-style:italic;color:var(--accent)}
.page-hero .lead{font-size:14px;color:var(--muted);max-width:520px;margin:0 auto 16px;line-height:1.7}

.supports-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(17.5rem,20rem));
  justify-content:center;
  max-width:62.5rem;
  gap:clamp(1rem,2vw,1.5rem);
  margin:0 auto;
  padding:0 1.25rem 5rem;}

  .support-card{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  box-shadow:4px 4px 0 var(--shadow);
  transition:box-shadow .2s,transform .2s;
  opacity:0;animation:fadeUp .5s ease forwards}

.support-card:hover{box-shadow:6px 6px 0 var(--shadow);transform:translate(-1px,-1px)}
.support-card:nth-child(1){animation-delay:.1s}
.support-card:nth-child(2){animation-delay:.18s}
.support-card:nth-child(3){animation-delay:.26s}
.support-card:nth-child(4){animation-delay:.34s}

.card-header{
  padding:20px 22px 16px;
  display:flex;align-items:flex-start;gap:12px;
  border-bottom:1px solid var(--line)}
.card-icon{
  width:42px;height:42px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0}
.card-title{font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:2px}
.card-subtitle{font-size:11px;color:var(--muted);line-height:1.5}
.card-format-badge{
  display:inline-block;
  font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;margin-top:5px}

.card-variants{padding:12px 14px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.variant-section{display:flex;flex-direction:column;gap:5px}
.variant-zone-label{
  font-size:9px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);padding:0 4px;
  display:flex;align-items:center;gap:5px}

.variant-zone-label::after{content:'';flex:1;height:1px;background:var(--line)}

.variant-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 11px;border-radius:5px;
  text-decoration:none;font-size:12px;font-weight:500;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);
  transition:background .12s,border-color .12s,color .12s,transform .1s;
  gap:6px}

.variant-link:hover{
  border-color:var(--card-accent);
  color:var(--card-accent);
  background:var(--card-highlight);
  transform:translateX(2px)}

.variant-link .vl-arrow{font-size:14px;opacity:.4;transition:opacity .12s,transform .12s}
.variant-link:hover .vl-arrow{opacity:1;transform:translateX(3px)}

/* =========================
   Base commune
   ========================= */

.support-card,.card-icon,.card-format-badge{
  --card-accent:#2d6a9f;
  --card-highlight:#e8f2fa;
  --card-ui-bg:#dbeeff;
  --card-ui-color:#1a4a7a}

[data-type="circulaires"]{
  --card-accent:#2d6a9f;
  --card-highlight:#e8f2fa;
  --card-ui-bg:#dbeeff;
  --card-ui-color:#1a4a7a;
  --card-highlight-dark:#0f2030}

[data-type="affiches"]{
  --card-accent:#c0392b;
  --card-highlight:#fdf0ee;
  --card-ui-bg:#fde8e6;
  --card-ui-color:#8b1c14;
  --card-highlight-dark:#2e0f0c}

[data-type="bulletins-A5"]{
  --card-accent:#6b3d00;
  --card-highlight:#fdf6ee;
  --card-ui-bg:#fdf0dc;
  --card-ui-color:#6b3d00;
  --card-highlight-dark:#1e1000}

[data-type="bulletins-A4"]{
  --card-accent:#006b5a;
  --card-highlight:#eefdf9;
  --card-ui-bg:#dcfdf7;
  --card-ui-color:#00503d;
  --card-highlight-dark:#001e18}

/* =========================
   Dark mode
   ========================= */

html[data-theme="dark"] .support-card{--card-highlight:var(--card-highlight-dark)}

@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .support-card{
    --card-highlight:var(--card-highlight-dark)}}

/* =========================
   UI interne carte
   ========================= */

.support-card .card-icon,
.support-card .card-format-badge{background:var(--card-ui-bg);color:var(--card-ui-color)}

/* ══════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════ */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--topbar-h);
  background:var(--topbar-bg);
  border-bottom:1px solid var(--line);
  z-index:500;
  transition:background .25s,border-color .25s;
  box-shadow:0 1px 12px rgba(0,0,0,.06)}

.topbar-inner{
  max-width:1200px;
  margin:0 auto;
  height:100%;
  display:flex;align-items:center;
  gap:0;padding:0 20px}

/* ── Logo ── */
.topbar-logo{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;flex-shrink:0;margin-right:28px}

.topbar-logo-icon{font-size:20px;line-height:1}
.topbar-logo-text{
  font-size:12px;color:var(--muted);
  line-height:1.35;letter-spacing:.02em;white-space:nowrap}
.topbar-logo-text strong{
  display:block;font-size:13px;font-weight:700;
  color:var(--ink);letter-spacing:.05em;text-transform:uppercase}

/* ── Nav horizontale ── */
.topbar-nav{
  display:flex;align-items:stretch;
  height:100%;flex:1;gap:2px}

.topnav-group{position:relative;display:flex;align-items:stretch}

.topnav-btn{
  display:flex;align-items:center;gap:5px;
  padding:0 14px;height:100%;
  background:none;border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;
  color:var(--muted);white-space:nowrap;
  transition:color .15s,border-color .15s}

.topnav-btn:hover{color:var(--accent)}
.topnav-group.is-active .topnav-btn{
  color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

.topnav-chevron{font-size:10px;opacity:.5;transition:transform .2s}
.topnav-group.dropdown-open .topnav-chevron{transform:rotate(180deg)}

/* ── Dropdown ── */
.topnav-dropdown{
  display:none;
  position:absolute;top:calc(100% + 1px);left:0;
  min-width:210px;
  background:var(--dropdown-bg);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:6px;z-index:600;
  animation:dropIn .15s ease}

@keyframes dropIn{
  from{opacity:0;transform:translateY(-6px)}
  to {opacity:1;transform:translateY(0)}}

.topnav-group.dropdown-open .topnav-dropdown{display:block}

.topnav-item{
  display:block;padding:8px 12px;border-radius:4px;
  font-size:12.5px;color:var(--muted);
  text-decoration:none;
  transition:background .1s,color .1s;white-space:nowrap}

.topnav-item:hover{background:var(--highlight);color:var(--ink)}
.topnav-item.is-active{
  color:var(--accent);font-weight:600;
  background:var(--highlight);
  border-left:2px solid var(--accent);padding-left:10px}

/* ── Actions droite ── */
.topbar-actions{
  display:flex;align-items:center;gap:8px;
  margin-left:auto;flex-shrink:0}

/* ════════════════════════════════════════
   THEME TOGGLE (unique,dans la topbar)
   ════════════════════════════════════════ */

.theme-toggle{
  display:flex;align-items:center;gap:6px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 12px;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:500;
  color:var(--muted);
  transition:background .25s,color .2s,border-color .25s;
  user-select:none;white-space:nowrap}

.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon{font-size:13px;line-height:1;transition:opacity .2s}

/* Mode clair :soleil visible,lune cachée */
.theme-toggle .icon-sun{opacity:1}
.theme-toggle .icon-moon{opacity:0;position:absolute;pointer-events:none}

/* Mode sombre :lune visible,soleil caché */
html[data-theme="dark"] .theme-toggle .icon-sun{opacity:0;position:absolute;pointer-events:none}
html[data-theme="dark"] .theme-toggle .icon-moon{opacity:1;position:static}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .theme-toggle .icon-sun{opacity:0;position:absolute;pointer-events:none}
 :root:not([data-theme="light"]) .theme-toggle .icon-moon{opacity:1;position:static}
}

/* ── Burger ── */
.nav-burger{
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:5px;width:36px;height:36px;
  background:none;border:1px solid var(--line);
  border-radius:6px;cursor:pointer;padding:0;
}
.nav-burger span{
  display:block;width:16px;height:2px;
  background:var(--ink);border-radius:2px;transition:background .2s;
}

/* ── Overlay ── */
.nav-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.4);
  z-index:700;backdrop-filter:blur(2px)}

.nav-overlay.is-open{display:block}

/* ── Drawer mobile ── */
.nav-drawer{
  position:fixed;top:0;right:0;
  width:min(320px,90vw);height:100vh;
  background:var(--topbar-bg);
  border-left:1px solid var(--line);
  z-index:800;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
}
.nav-drawer.is-open{transform:translateX(0)}

.nav-drawer-header{
  display:flex;align-items:center;gap:10px;
  padding:16px 20px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.nav-drawer-header .topbar-logo-icon{font-size:20px}
.nav-drawer-header .topbar-logo-text{flex:1}
.nav-drawer-close{
  background:none;border:none;
  font-size:16px;color:var(--muted);
  cursor:pointer;padding:4px 6px;border-radius:4px;
  transition:color .15s;
}
.nav-drawer-close:hover{color:var(--ink)}

.nav-drawer-body{padding:12px 10px 24px;flex:1}

.drawer-group{margin-bottom:4px}
.drawer-group-btn{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;background:none;border:none;
  border-radius:6px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:background .12s;
}
.drawer-group-btn:hover{background:var(--highlight)}
.drawer-group.is-open .drawer-group-btn{color:var(--accent);background:var(--highlight)}
.drawer-chevron{font-size:16px;color:var(--muted);transition:transform .2s}
.drawer-group.is-open .drawer-chevron{transform:rotate(90deg)}

.drawer-sub{display:none;padding:2px 0 6px 24px}
.drawer-group.is-open .drawer-sub{display:flex;flex-direction:column;gap:2px}

.drawer-link{
  display:block;padding:7px 10px;border-radius:4px;
  font-size:12px;color:var(--muted);text-decoration:none;
  border-left:2px solid transparent;
  transition:background .1s,color .1s;
}
.drawer-link:hover{background:var(--highlight);color:var(--ink)}
.drawer-link.is-active{
  color:var(--accent);font-weight:600;
  border-left-color:var(--accent);background:var(--highlight);
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
.site-footer{
  background:var(--topbar-bg);
  border-top:1px solid var(--line);
  margin-top:60px;
  transition:background .25s,border-color .25s}

.site-footer-inner{
  max-width:1200px;margin:0 auto;
  padding:36px 24px 28px;
  display:grid;grid-template-columns:1fr auto auto;
  gap:32px;align-items:start}

.footer-brand-logo{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;margin-bottom:10px}

.footer-brand-logo .topbar-logo-icon{font-size:18px}
.footer-decree{font-size:11px;color:var(--muted);line-height:1.6}
.footer-decree strong{color:var(--ink);font-size:11px}

.footer-col h4{
  font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}

.footer-col a{
  display:block;font-size:12px;color:var(--muted);
  text-decoration:none;padding:3px 0;transition:color .15s}

.footer-col a:hover{color:var(--accent)}

.footer-bottom{
  border-top:1px solid var(--line);
  padding:14px 24px;max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}

.footer-bottom-left{font-size:11px;color:var(--muted)}
.footer-bottom-right{display:flex;gap:16px}
.footer-bottom-right a{font-size:11px;color:var(--muted);text-decoration:none;transition:color .15s}
.footer-bottom-right a:hover{color:var(--accent)}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

@media (max-width:900px){
  .topbar-nav,.theme-toggle .label{display:none}
  .nav-burger{display:flex}
  .site-footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}}

@media (max-width:600px){
  .supports-grid,
  .card-variants{grid-template-columns:1fr}}

@media (max-width:560px){
  .site-footer-inner{grid-template-columns:1fr}
  .footer-bottom,.result-box{flex-direction:column}
  .footer-bottom{align-items:flex-start;gap:6px}
  .result-details{text-align:left;min-width:0}
  #resultAmount{font-size:2.6rem}}