/* ==========================================================================
   EasyArcade — Premium Craft Arcade
   Design system: black & gold + bois + blanc cassé
   Typo: Playfair Display (serif éditorial) + Inter (corps) + Press Start 2P (accents)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & tokens
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
ul{list-style:none}

:root{
    --bg:#FAFAF9;
    --bg-soft:#F4F2EE;
    --bg-dark:#0C0A09;
    --bg-dark-soft:#1C1917;
    --ink:#1C1917;
    --ink-soft:#44403C;
    --ink-mute:#78716C;
    --line:#E7E5E0;
    --line-strong:#D6D3CC;
    --gold:#CA8A04;
    --gold-dark:#A16207;
    --gold-soft:#FACC15;
    --wood:#A8825A;
    --wood-soft:#D6B98C;
    --copper:#B45309;
    --on-dark:#FAFAF9;
    --on-dark-mute:#A8A29E;

    --font-display:'Playfair Display',Georgia,serif;
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono:'Press Start 2P','Courier New',monospace;

    --t-xs:0.75rem;
    --t-sm:0.875rem;
    --t-base:1rem;
    --t-md:1.125rem;
    --t-lg:1.25rem;
    --t-xl:1.563rem;
    --t-2xl:1.953rem;
    --t-3xl:2.441rem;
    --t-4xl:3.052rem;
    --t-5xl:3.815rem;
    --t-6xl:4.768rem;

    --s-1:0.25rem;
    --s-2:0.5rem;
    --s-3:0.75rem;
    --s-4:1rem;
    --s-5:1.5rem;
    --s-6:2rem;
    --s-7:3rem;
    --s-8:4rem;
    --s-9:6rem;
    --s-10:8rem;

    --r-sm:6px;
    --r-md:12px;
    --r-lg:20px;
    --r-xl:28px;
    --r-pill:999px;
    --shadow-sm:0 1px 2px rgba(28,25,23,.06);
    --shadow-md:0 8px 24px rgba(28,25,23,.08);
    --shadow-lg:0 24px 56px rgba(28,25,23,.12);
    --shadow-gold:0 16px 48px rgba(202,138,4,.18);
    --ease:cubic-bezier(.2,.7,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --dur-fast:160ms;
    --dur:280ms;
    --dur-slow:520ms;

    --container:1200px;
    --container-wide:1360px;
    --container-narrow:880px;
}

body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:var(--t-base);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}

::selection{background:var(--gold);color:var(--bg-dark)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm)}

/* --------------------------------------------------------------------------
   2. Typo
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-display);
    font-weight:500;
    line-height:1.1;
    letter-spacing:-0.02em;
    color:var(--ink);
}
h1{font-size:clamp(2.5rem,6vw,var(--t-6xl));font-weight:600}
h2{font-size:clamp(2rem,4vw,var(--t-4xl));font-weight:500}
h3{font-size:clamp(1.4rem,2.4vw,var(--t-2xl));font-weight:500}
h4{font-size:var(--t-xl);font-weight:600;font-family:var(--font-body);letter-spacing:-0.01em}
p{color:var(--ink-soft);max-width:65ch}

.overline{
    font-family:var(--font-mono);
    font-size:0.625rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold);
    display:inline-block;
    margin-bottom:var(--s-4);
}
.eyebrow{
    font-size:var(--t-xs);
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ink-mute);
    font-weight:600;
}
.lede{font-size:var(--t-md);color:var(--ink-soft);max-width:60ch}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s-5)}
.container-wide{width:100%;max-width:var(--container-wide);margin:0 auto;padding:0 var(--s-5)}
.container-narrow{width:100%;max-width:var(--container-narrow);margin:0 auto;padding:0 var(--s-5)}

main{min-height:60vh}
section{position:relative}
.section{padding:var(--s-9) 0}
.section-tight{padding:var(--s-7) 0}
.section-dark{background:var(--bg-dark);color:var(--on-dark)}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--on-dark)}
.section-dark p{color:var(--on-dark-mute)}
.section-dark .overline{color:var(--gold-soft)}
.section-soft{background:var(--bg-soft)}

.section-header{text-align:center;max-width:720px;margin:0 auto var(--s-8)}
.section-header.left{text-align:left;margin-left:0}
.section-header p{margin:var(--s-4) auto 0;font-size:var(--t-md)}

.text-center{text-align:center}
.mt-4{margin-top:var(--s-4)}
.mt-6{margin-top:var(--s-6)}
.mt-8{margin-top:var(--s-8)}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    padding:0.95rem 1.6rem;
    font-family:var(--font-body);
    font-size:var(--t-sm);
    font-weight:600;
    letter-spacing:0.02em;
    border-radius:var(--r-pill);
    transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
    border:1px solid transparent;
    cursor:pointer;
    white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-primary:hover{background:var(--gold);color:var(--bg-dark);border-color:var(--gold);box-shadow:var(--shadow-gold)}
.btn-gold{background:var(--gold);color:var(--bg-dark);border-color:var(--gold)}
.btn-gold:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent;padding:0.6rem 0.9rem}
.btn-ghost:hover{color:var(--gold)}
.section-dark .btn-outline{color:var(--on-dark);border-color:rgba(250,250,249,.25)}
.section-dark .btn-outline:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.btn-sm{padding:0.6rem 1.1rem;font-size:var(--t-xs)}
.btn-lg{padding:1.1rem 2rem;font-size:var(--t-base)}
.btn:focus-visible{outline-offset:4px}

/* --------------------------------------------------------------------------
   5. Navbar
   -------------------------------------------------------------------------- */
.navbar{
    position:fixed;
    top:var(--s-4);
    left:var(--s-4);
    right:var(--s-4);
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.85rem var(--s-5);
    background:rgba(250,250,249,.78);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    box-shadow:var(--shadow-sm);
    transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),top var(--dur) var(--ease);
}
.navbar.scrolled{background:rgba(250,250,249,.95);box-shadow:var(--shadow-md)}
.navbar > .container{padding:0;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:none}

.logo{
    display:inline-flex;
    align-items:center;
    font-family:var(--font-display);
    font-size:1.4rem;
    font-weight:600;
    letter-spacing:-0.02em;
    color:var(--ink);
    line-height:1;
}
.logo-mark{
    display:inline-flex;
    width:30px;height:30px;
    margin-right:0.6rem;
    background:var(--ink);
    border-radius:8px;
    position:relative;
    flex-shrink:0;
}
.logo-mark::before,.logo-mark::after{content:'';position:absolute;background:var(--gold)}
.logo-mark::before{
    width:7px;height:7px;border-radius:50%;
    top:8px;left:8px;
    box-shadow:9px 0 0 var(--gold);
}
.logo-mark::after{width:14px;height:2px;border-radius:1px;bottom:8px;left:8px}
.logo-easy{color:var(--ink)}
.logo-arcade{color:var(--gold);font-style:italic}

.nav-links{display:flex;align-items:center;gap:var(--s-2)}
.nav-links a{
    padding:0.55rem 1rem;
    font-size:var(--t-sm);
    font-weight:500;
    color:var(--ink-soft);
    border-radius:var(--r-pill);
    transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
    position:relative;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);background:var(--bg-soft)}
.nav-links a.nav-cta{background:var(--ink);color:var(--bg);padding:0.55rem 1.2rem;margin-left:var(--s-2)}
.nav-links a.nav-cta:hover{background:var(--gold);color:var(--bg-dark)}

.menu-toggle{
    display:none;
    width:42px;height:42px;
    padding:10px;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    border-radius:50%;
    background:transparent;
}
.menu-toggle span{
    width:22px;height:2px;background:var(--ink);
    transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
    border-radius:1px;
}
.menu-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:920px){
    .menu-toggle{display:flex}
    .nav-links{
        position:absolute;
        top:calc(100% + 0.6rem);
        left:0;right:0;
        flex-direction:column;
        gap:0;
        padding:var(--s-4);
        background:var(--bg);
        border:1px solid var(--line);
        border-radius:var(--r-lg);
        box-shadow:var(--shadow-lg);
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease);
    }
    .nav-links.open{opacity:1;visibility:visible;transform:translateY(0)}
    .nav-links a{width:100%;padding:0.85rem 1rem;text-align:left}
    .nav-links a.nav-cta{margin-left:0;margin-top:var(--s-2);text-align:center;justify-content:center;display:flex}
}

/* --------------------------------------------------------------------------
   6. Hero (homepage)
   -------------------------------------------------------------------------- */
.hero{
    position:relative;
    min-height:92vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    padding:var(--s-10) 0 var(--s-9);
    background:var(--bg-dark);
    color:var(--on-dark);
}
.hero::before{
    content:'';
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 80% 30%,rgba(202,138,4,.18),transparent 60%),
        radial-gradient(ellipse at 20% 90%,rgba(168,130,90,.12),transparent 55%),
        var(--bg-dark);
    z-index:0;
}
.hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}
.hero-bg img{
    position:absolute;
    right:-2vw;
    bottom:0;
    height:96%;
    width:auto;
    max-width:none;
    object-fit:contain;
    object-position:bottom right;
    filter:drop-shadow(0 40px 80px rgba(0,0,0,.6));
    animation:hero-float 6s ease-in-out infinite;
}
@keyframes hero-float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}
.hero-content{
    position:relative;
    z-index:3;
    width:100%;
    max-width:var(--container-wide);
    margin:0 auto;
    padding:0 var(--s-5);
}
.hero-inner{max-width:680px}
.hero h1{
    color:var(--on-dark);
    font-size:clamp(2.6rem,6.4vw,5.2rem);
    margin-bottom:var(--s-5);
    line-height:1.02;
}
.hero h1 .accent{
    font-style:italic;
    font-weight:400;
    background:linear-gradient(120deg,var(--gold-soft),var(--gold) 50%,var(--copper));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.hero p{
    color:var(--on-dark-mute);
    font-size:var(--t-md);
    max-width:520px;
    margin-bottom:var(--s-7);
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    padding:0.5rem 1rem;
    border:1px solid rgba(202,138,4,.4);
    background:rgba(202,138,4,.08);
    color:var(--gold-soft);
    border-radius:var(--r-pill);
    font-size:var(--t-xs);
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:var(--s-6);
}
.hero-buttons{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero-buttons .btn-primary{background:var(--gold);color:var(--bg-dark);border-color:var(--gold)}
.hero-buttons .btn-primary:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.hero-buttons .btn-outline{color:var(--on-dark);border-color:rgba(250,250,249,.25)}
.hero-buttons .btn-outline:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}

.hero-meta{
    position:absolute;
    bottom:var(--s-7);
    right:var(--s-7);
    z-index:3;
    text-align:right;
    color:var(--on-dark-mute);
    font-family:var(--font-mono);
    font-size:0.6rem;
    letter-spacing:0.18em;
    line-height:1.8;
}
.hero-meta .num{
    font-family:var(--font-display);
    font-style:italic;
    font-size:var(--t-2xl);
    color:var(--gold);
    display:block;
    line-height:1;
    margin-top:var(--s-1);
    font-weight:500;
}
@media (max-width:920px){
    .hero{min-height:auto;padding:var(--s-10) 0 var(--s-7)}
    .hero-bg img{opacity:.35;height:88%;right:-15vw}
    .hero-meta{display:none}
}

/* --------------------------------------------------------------------------
   7. Page hero (autres pages)
   -------------------------------------------------------------------------- */
.page-hero{
    padding:calc(var(--s-10) + var(--s-4)) 0 var(--s-8);
    background:var(--bg-soft);
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden;
}
.page-hero::after{
    content:'';
    position:absolute;
    right:-8%;top:-30%;
    width:480px;height:480px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(202,138,4,.14),transparent 70%);
    pointer-events:none;
}
.page-hero h1{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:var(--s-4)}
.page-hero h1 .accent{font-style:italic;color:var(--gold);font-weight:400}
.page-hero p{font-size:var(--t-md);max-width:60ch}
.breadcrumb{
    font-family:var(--font-mono);
    font-size:0.6rem;
    letter-spacing:0.15em;
    color:var(--ink-mute);
    text-transform:uppercase;
    margin-bottom:var(--s-5);
}
.breadcrumb a:hover{color:var(--gold)}

/* --------------------------------------------------------------------------
   8. Stat bar
   -------------------------------------------------------------------------- */
.stat-bar{background:var(--bg-dark);color:var(--on-dark);padding:var(--s-7) 0}
.stat-bar .container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--s-6);
    text-align:center;
}
.stat{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.stat-num{
    font-family:var(--font-display);
    font-style:italic;
    font-size:clamp(2rem,4vw,3.5rem);
    color:var(--gold);
    line-height:1;
    font-weight:500;
}
.stat-label{
    font-size:var(--t-xs);
    color:var(--on-dark-mute);
    letter-spacing:0.12em;
    text-transform:uppercase;
}
@media (max-width:720px){.stat-bar .container{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------------------
   9. Services grid
   -------------------------------------------------------------------------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.service-card{
    position:relative;
    padding:var(--s-7) var(--s-6) var(--s-6);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
    overflow:hidden;
}
.service-card::before{
    content:'';
    position:absolute;top:0;left:0;
    width:0;height:3px;
    background:var(--gold);
    transition:width var(--dur-slow) var(--ease-out);
}
.service-card:hover{border-color:var(--ink);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.service-card:hover::before{width:100%}
.service-card .num{
    font-family:var(--font-mono);
    font-size:0.6rem;
    letter-spacing:0.2em;
    color:var(--gold);
    margin-bottom:var(--s-4);
    display:block;
}
.service-card h3{margin-bottom:var(--s-3)}
.service-card p{margin-bottom:var(--s-5)}
.service-card .price-tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:0.6rem;
    letter-spacing:0.12em;
    color:var(--ink-mute);
    margin-bottom:var(--s-4);
    padding:0.4rem 0.7rem;
    background:var(--bg-soft);
    border-radius:var(--r-sm);
}
.service-card .card-link{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    font-size:var(--t-sm);
    font-weight:600;
    color:var(--ink);
    transition:color var(--dur) var(--ease),gap var(--dur) var(--ease);
}
.service-card .card-link:hover{color:var(--gold);gap:var(--s-3)}
.service-card .card-link span{display:inline-block;transition:transform var(--dur) var(--ease)}
.service-card .card-link:hover span{transform:translateX(4px)}
@media (max-width:920px){.services-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
  10. Process / steps
   -------------------------------------------------------------------------- */
.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--s-5);
    margin-top:var(--s-7);
}
.process-step{position:relative;padding-top:var(--s-6)}
.process-step::before{
    content:'';
    position:absolute;top:0;left:0;
    width:42px;height:3px;
    background:var(--gold);
}
.process-step .step-num{
    font-family:var(--font-mono);
    font-size:0.6rem;
    color:var(--gold);
    letter-spacing:0.2em;
    margin-bottom:var(--s-3);
    display:block;
}
.process-step h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.process-step p{font-size:var(--t-sm)}
.section-dark .process-step::before{background:var(--gold-soft)}
@media (max-width:920px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.process-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
  11. Bento grid
   -------------------------------------------------------------------------- */
.bento{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:minmax(240px,auto);
    gap:var(--s-3);
}
.bento-card{
    position:relative;
    overflow:hidden;
    border-radius:var(--r-lg);
    background:var(--bg-soft);
    border:1px solid var(--line);
    cursor:pointer;
    transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
    isolation:isolate;
    display:block;
}
.bento-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--ink)}
.bento-card img{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform var(--dur-slow) var(--ease);
    z-index:0;
}
.bento-card:hover img{transform:scale(1.04)}
.bento-card::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 40%,rgba(12,10,9,.92));
    z-index:1;
}
.bento-card .meta{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:var(--s-5);
    color:var(--on-dark);
}
.bento-card .tag{
    font-family:var(--font-mono);
    font-size:0.55rem;
    letter-spacing:0.18em;
    color:var(--gold-soft);
    text-transform:uppercase;
    margin-bottom:var(--s-2);
}
.bento-card h3{
    color:var(--on-dark);
    font-size:var(--t-xl);
    margin-bottom:var(--s-1);
    line-height:1.15;
}
.bento-card .price{
    font-family:var(--font-mono);
    font-size:0.65rem;
    color:var(--on-dark-mute);
    letter-spacing:0.1em;
}
.bento-card .badge{
    position:absolute;
    top:var(--s-4);
    left:var(--s-4);
    z-index:2;
    background:var(--gold);
    color:var(--bg-dark);
    font-family:var(--font-mono);
    font-size:0.5rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    padding:0.4rem 0.7rem;
    border-radius:var(--r-sm);
    font-weight:bold;
}
.bento-card.b-tall{grid-row:span 2}
.bento-card.b-wide{grid-column:span 2}
.bento-card.b-hero{grid-column:span 3;grid-row:span 2}
.bento-card.b-feature{grid-column:span 2;grid-row:span 2}

@media (max-width:1080px){
    .bento{grid-template-columns:repeat(4,1fr)}
    .bento-card.b-hero{grid-column:span 4;grid-row:span 2}
    .bento-card.b-feature{grid-column:span 2}
    .bento-card.b-wide{grid-column:span 2}
}
@media (max-width:720px){
    .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(220px,auto)}
    .bento-card.b-hero,.bento-card.b-feature,.bento-card.b-wide{grid-column:span 2;grid-row:auto}
    .bento-card.b-tall{grid-row:auto}
}

/* --------------------------------------------------------------------------
  12. Product card (grille classique)
   -------------------------------------------------------------------------- */
.products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:var(--s-5);
}
.product-card{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    overflow:hidden;
    transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
    display:flex;
    flex-direction:column;
}
.product-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--shadow-lg)}
.product-image{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:linear-gradient(180deg,var(--bg-soft),#EDEAE3);
}
.product-image img{
    width:100%;height:100%;
    object-fit:contain;
    object-position:center;
    transition:transform var(--dur-slow) var(--ease);
    padding:var(--s-3);
}
.product-card:hover .product-image img{transform:scale(1.04)}
.product-badge{
    position:absolute;
    top:var(--s-4);left:var(--s-4);
    background:var(--ink);
    color:var(--bg);
    font-family:var(--font-mono);
    font-size:0.5rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    padding:0.4rem 0.7rem;
    border-radius:var(--r-sm);
}
.product-badge.gold{background:var(--gold);color:var(--bg-dark)}
.product-badge.outline{background:transparent;border:1px solid var(--line-strong);color:var(--ink-soft)}
.product-info{
    padding:var(--s-5);
    display:flex;
    flex-direction:column;
    flex:1;
    gap:var(--s-3);
}
.product-info h3{font-size:var(--t-lg)}
.product-desc{font-size:var(--t-sm);color:var(--ink-soft);flex:1}
.product-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    padding-top:var(--s-3);
    border-top:1px solid var(--line);
}
.product-price{
    font-family:var(--font-display);
    font-style:italic;
    font-size:var(--t-lg);
    color:var(--ink);
}
.product-price small{
    font-family:var(--font-body);
    font-size:0.65rem;
    color:var(--ink-mute);
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-style:normal;
    margin-left:0.3rem;
}

/* --------------------------------------------------------------------------
  13. Filters
   -------------------------------------------------------------------------- */
.filter-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
    justify-content:center;
    margin-bottom:var(--s-7);
    padding:var(--s-2);
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    width:max-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}
.filter-tab{
    padding:0.6rem 1.2rem;
    font-size:var(--t-sm);
    font-weight:500;
    color:var(--ink-soft);
    border-radius:var(--r-pill);
    transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
    cursor:pointer;
}
.filter-tab:hover{color:var(--ink)}
.filter-tab.active{background:var(--ink);color:var(--bg)}

/* --------------------------------------------------------------------------
  14. Pricing
   -------------------------------------------------------------------------- */
.pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--s-5);
    margin-top:var(--s-7);
}
.pricing-card{
    position:relative;
    padding:var(--s-7) var(--s-6);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    display:flex;
    flex-direction:column;
    transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pricing-card:hover{transform:translateY(-4px);border-color:var(--ink-soft);box-shadow:var(--shadow-md)}
.pricing-card.popular{
    background:var(--bg-dark);
    color:var(--on-dark);
    border-color:var(--bg-dark);
}
.pricing-card.popular h3{color:var(--on-dark)}
.pricing-card.popular p{color:var(--on-dark-mute)}
.pricing-card.popular::before{
    content:'★ Le plus demandé';
    position:absolute;
    top:-12px;left:50%;
    transform:translateX(-50%);
    background:var(--gold);
    color:var(--bg-dark);
    font-family:var(--font-mono);
    font-size:0.5rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    padding:0.45rem 0.9rem;
    border-radius:var(--r-pill);
    font-weight:bold;
    white-space:nowrap;
}
.pricing-name{
    font-family:var(--font-mono);
    font-size:0.6rem;
    letter-spacing:0.18em;
    color:var(--gold);
    text-transform:uppercase;
    margin-bottom:var(--s-3);
}
.pricing-price{
    font-family:var(--font-display);
    font-size:clamp(2.5rem,5vw,3.5rem);
    color:var(--ink);
    line-height:1;
    margin:var(--s-3) 0 var(--s-2);
    font-weight:500;
}
.pricing-card.popular .pricing-price{color:var(--gold)}
.pricing-price small{
    font-family:var(--font-body);
    font-size:0.85rem;
    color:var(--ink-mute);
    font-weight:400;
    letter-spacing:0.05em;
}
.pricing-card.popular .pricing-price small{color:var(--on-dark-mute)}
.pricing-sub{font-size:var(--t-sm);margin-bottom:var(--s-5)}
.pricing-features{margin-bottom:var(--s-6);flex:1}
.pricing-features li{
    padding:var(--s-2) 0;
    border-bottom:1px solid var(--line);
    font-size:var(--t-sm);
    display:flex;
    align-items:flex-start;
    gap:var(--s-3);
    color:var(--ink-soft);
}
.pricing-card.popular .pricing-features li{
    color:var(--on-dark-mute);
    border-color:rgba(250,250,249,.12);
}
.pricing-features li::before{
    content:'';
    flex-shrink:0;
    width:14px;height:14px;
    margin-top:0.35rem;
    background:var(--gold);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/contain no-repeat;
}
.pricing-card.popular .btn-outline{color:var(--on-dark);border-color:rgba(250,250,249,.3)}
.pricing-card.popular .btn-outline:hover{background:var(--gold);color:var(--bg-dark);border-color:var(--gold)}
.pricing-note{
    text-align:center;
    margin-top:var(--s-6);
    font-size:var(--t-sm);
    color:var(--ink-mute);
    font-style:italic;
}
@media (max-width:920px){.pricing-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
  15. Use cases
   -------------------------------------------------------------------------- */
.use-cases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.use-case{
    padding:var(--s-6) var(--s-5);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.use-case:hover{transform:translateY(-4px);border-color:var(--gold)}
.use-case-icon{
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-soft);
    color:var(--ink);
    border-radius:var(--r-md);
    margin-bottom:var(--s-4);
}
.use-case h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.use-case p{font-size:var(--t-sm)}
.section-dark .use-case{background:rgba(250,250,249,.04);border-color:rgba(250,250,249,.08)}
.section-dark .use-case-icon{background:rgba(202,138,4,.12);color:var(--gold)}
@media (max-width:1080px){.use-cases-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.use-cases-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
  16. France banner
   -------------------------------------------------------------------------- */
.france-banner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:var(--s-6);
    padding:var(--s-6) var(--s-7);
    background:linear-gradient(135deg,var(--bg-dark),var(--bg-dark-soft));
    color:var(--on-dark);
    border-radius:var(--r-xl);
    border:1px solid rgba(202,138,4,.2);
    position:relative;
    overflow:hidden;
}
.france-banner::before{
    content:'';
    position:absolute;
    top:-30%;right:-5%;
    width:300px;height:300px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(202,138,4,.18),transparent 65%);
}
.france-banner h3{color:var(--on-dark);margin-bottom:var(--s-1);font-size:var(--t-xl)}
.france-banner p{color:var(--on-dark-mute);font-size:var(--t-sm);margin-bottom:0}
.france-flag{
    width:60px;height:60px;
    border-radius:var(--r-md);
    background:linear-gradient(90deg,#0055A4 33.33%,#FFFFFF 33.33% 66.66%,#EF4135 66.66%);
    flex-shrink:0;
    box-shadow:var(--shadow-md);
}
.france-banner .btn{position:relative;z-index:1}
@media (max-width:780px){
    .france-banner{grid-template-columns:1fr;text-align:left}
    .france-banner .btn{justify-self:flex-start}
}

/* --------------------------------------------------------------------------
  17. Features grid
   -------------------------------------------------------------------------- */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.feature-item{padding:var(--s-5) 0;border-top:2px solid var(--ink)}
.feature-item h4{margin-bottom:var(--s-2);font-size:var(--t-md)}
.feature-item p{font-size:var(--t-sm)}
.feature-icon{
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    color:var(--gold);
    margin-bottom:var(--s-3);
}
@media (max-width:920px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.features-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
  18. Testimonials
   -------------------------------------------------------------------------- */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.testimonial-card{
    padding:var(--s-6);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    position:relative;
}
.testimonial-card::before{
    content:'\201C';
    position:absolute;
    top:0;left:var(--s-5);
    font-family:var(--font-display);
    font-size:5rem;
    line-height:1;
    color:var(--gold);
    opacity:.4;
}
.testimonial-card .stars{color:var(--gold);font-size:var(--t-md);margin-bottom:var(--s-3);letter-spacing:0.1em;position:relative;z-index:1}
.testimonial-card p{
    font-family:var(--font-display);
    font-style:italic;
    font-size:var(--t-md);
    color:var(--ink);
    line-height:1.5;
    margin-bottom:var(--s-5);
    position:relative;
    z-index:1;
}
.testimonial-author{display:flex;align-items:center;gap:var(--s-3);position:relative;z-index:1}
.avatar{
    width:42px;height:42px;
    background:var(--bg-dark);
    color:var(--gold);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:600;
    font-family:var(--font-mono);
    font-size:0.6rem;
    letter-spacing:0.05em;
    flex-shrink:0;
}
.author-name{font-weight:600;color:var(--ink);font-size:var(--t-sm)}
.author-role{font-size:var(--t-xs);color:var(--ink-mute)}
.section-dark .testimonial-card{background:rgba(250,250,249,.03);border-color:rgba(250,250,249,.08)}
.section-dark .testimonial-card p{color:var(--on-dark)}
.section-dark .author-name{color:var(--on-dark)}
.section-dark .author-role{color:var(--on-dark-mute)}
@media (max-width:920px){.testimonials-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
  19. CTA section
   -------------------------------------------------------------------------- */
.cta-section{
    text-align:center;
    padding:var(--s-9) 0;
    background:var(--bg-dark);
    color:var(--on-dark);
    position:relative;
    overflow:hidden;
}
.cta-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 50%,rgba(202,138,4,.18),transparent 50%),
        radial-gradient(circle at 80% 50%,rgba(168,130,90,.12),transparent 50%);
    pointer-events:none;
}
.cta-section .container{position:relative;z-index:1}
.cta-section h2{color:var(--on-dark);margin-bottom:var(--s-4)}
.cta-section h2 .accent{color:var(--gold);font-style:italic}
.cta-section p{color:var(--on-dark-mute);max-width:540px;margin:0 auto var(--s-7);font-size:var(--t-md)}
.cta-section .hero-buttons{justify-content:center}

/* --------------------------------------------------------------------------
  20. Galerie
   -------------------------------------------------------------------------- */
.gallery-grid{column-count:3;column-gap:var(--s-4)}
.gallery-item{
    margin-bottom:var(--s-4);
    border-radius:var(--r-md);
    overflow:hidden;
    break-inside:avoid;
    cursor:pointer;
    position:relative;
    transition:transform var(--dur) var(--ease);
    display:block;
}
.gallery-item:hover{transform:translateY(-3px)}
.gallery-item img{width:100%;transition:transform var(--dur-slow) var(--ease)}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 60%,rgba(12,10,9,.6));
    opacity:0;
    transition:opacity var(--dur) var(--ease);
}
.gallery-item:hover::after{opacity:1}
@media (max-width:920px){.gallery-grid{column-count:2}}
@media (max-width:540px){.gallery-grid{column-count:1}}

/* --------------------------------------------------------------------------
  21. Sur-mesure
   -------------------------------------------------------------------------- */
.creative-process{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--s-7);
    align-items:start;
}
.creative-process > div{padding:var(--s-5) 0}
.creative-process h3{font-size:var(--t-2xl);margin-bottom:var(--s-4)}
.creative-process .step-list{margin-top:var(--s-5)}
.creative-process .step-list li{
    padding:var(--s-4) 0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:auto 1fr;
    gap:var(--s-4);
    align-items:start;
}
.creative-process .step-list li:last-child{border-bottom:1px solid var(--line)}
.creative-process .step-list .num{
    font-family:var(--font-display);
    font-style:italic;
    font-size:var(--t-2xl);
    color:var(--gold);
    line-height:1;
    min-width:50px;
    font-weight:500;
}
.creative-process .step-list h4{margin-bottom:var(--s-1);font-size:var(--t-md);display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.inline-partner{
    height:24px;
    width:auto;
    max-width:100px;
    opacity:.7;
    filter:grayscale(.2);
    transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease);
}
.inline-partner:hover{opacity:1;filter:none}
.creative-process .step-list p{font-size:var(--t-sm)}
.creative-image{
    aspect-ratio:4/5;
    background:var(--bg-soft);
    border-radius:var(--r-xl);
    overflow:hidden;
    position:relative;
}
.creative-image img{width:100%;height:100%;object-fit:contain;padding:var(--s-5)}
@media (max-width:920px){.creative-process{grid-template-columns:1fr;gap:var(--s-6)}}

/* --------------------------------------------------------------------------
  22. Contact
   -------------------------------------------------------------------------- */
.contact-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:var(--s-7);
    align-items:start;
}
.contact-form{
    padding:var(--s-7) var(--s-6);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    box-shadow:var(--shadow-sm);
}
.contact-info{
    padding:var(--s-7) var(--s-6);
    background:var(--bg-dark);
    color:var(--on-dark);
    border-radius:var(--r-xl);
}
.contact-info h3{color:var(--on-dark);margin-bottom:var(--s-5)}
.contact-info-block{
    padding:var(--s-4) 0;
    border-top:1px solid rgba(250,250,249,.12);
    display:flex;
    align-items:flex-start;
    gap:var(--s-4);
}
.contact-info-block:last-of-type{border-bottom:1px solid rgba(250,250,249,.12)}
.contact-info-block .icon{
    width:40px;height:40px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(202,138,4,.12);
    color:var(--gold);
    border-radius:var(--r-sm);
}
.contact-info-block .label{
    font-family:var(--font-mono);
    font-size:0.55rem;
    letter-spacing:0.18em;
    color:var(--gold-soft);
    text-transform:uppercase;
    margin-bottom:var(--s-1);
}
.contact-info-block .value{color:var(--on-dark);font-weight:500}
.contact-info-block .value a:hover{color:var(--gold-soft)}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-bottom:var(--s-4)}
.form-row.single{grid-template-columns:1fr}
.form-group{display:flex;flex-direction:column;gap:var(--s-2)}
.form-group label{
    font-family:var(--font-mono);
    font-size:0.55rem;
    letter-spacing:0.16em;
    color:var(--ink-mute);
    text-transform:uppercase;
}
.form-group input,
.form-group select,
.form-group textarea{
    padding:0.85rem 1rem;
    font-family:var(--font-body);
    font-size:var(--t-base);
    color:var(--ink);
    background:var(--bg);
    border:1px solid var(--line-strong);
    border-radius:var(--r-md);
    transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(202,138,4,.1);
}
.form-group textarea{min-height:140px;resize:vertical;font-family:var(--font-body)}
.form-submit{margin-top:var(--s-5)}
.form-submit .btn{width:100%}

.form-msg{
    padding:var(--s-4);
    border-radius:var(--r-md);
    font-size:var(--t-sm);
    margin-bottom:var(--s-4);
}
.form-msg.success{background:rgba(34,197,94,.1);color:#15803d;border:1px solid rgba(34,197,94,.3)}
.form-msg.error{background:rgba(239,68,68,.1);color:#b91c1c;border:1px solid rgba(239,68,68,.3)}

.contact-map{
    margin-top:var(--s-7);
    border-radius:var(--r-xl);
    overflow:hidden;
    border:1px solid var(--line);
    aspect-ratio:21/9;
}
.contact-map iframe{width:100%;height:100%;border:0}

@media (max-width:920px){.contact-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
  23. Footer
   -------------------------------------------------------------------------- */
.footer{
    background:var(--bg-dark);
    color:var(--on-dark);
    padding:var(--s-9) 0 var(--s-5);
    margin-top:var(--s-9);
}
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:var(--s-7);
    margin-bottom:var(--s-7);
    padding-bottom:var(--s-7);
    border-bottom:1px solid rgba(250,250,249,.12);
}
.footer h4{
    font-family:var(--font-mono);
    font-size:0.65rem;
    letter-spacing:0.18em;
    color:var(--gold-soft);
    text-transform:uppercase;
    margin-bottom:var(--s-4);
    font-weight:600;
}
.footer .logo{color:var(--on-dark);font-size:1.6rem}
.footer .logo .logo-easy{color:var(--on-dark)}
.footer-tagline{color:var(--on-dark-mute);font-size:var(--t-sm);margin:var(--s-4) 0;max-width:340px}
.footer-links{display:flex;flex-direction:column;gap:var(--s-2)}
.footer-links a{color:var(--on-dark-mute);font-size:var(--t-sm);transition:color var(--dur) var(--ease)}
.footer-links a:hover{color:var(--gold-soft)}
.footer-contact{font-size:var(--t-sm);color:var(--on-dark-mute);line-height:1.8}
.footer-contact strong{color:var(--on-dark);display:block;margin-bottom:var(--s-1);font-weight:500}
.footer-contact a:hover{color:var(--gold-soft)}
.footer-partners{
    display:none;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:var(--s-4);
    padding:var(--s-5) 0;
    margin-bottom:var(--s-4);
    border-top:1px solid rgba(250,250,249,.06);
    border-bottom:1px solid rgba(250,250,249,.06);
}
.footer-partners.is-ready{display:flex}
.footer-partners .partner-label{
    font-family:var(--font-mono);
    font-size:0.55rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--on-dark-mute);
    margin-right:var(--s-3);
}
.footer-partners .partner-logo{
    display:inline-flex;
    align-items:center;
    height:48px;
    opacity:.85;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.footer-partners .partner-logo:hover{opacity:1;transform:scale(1.04)}
.footer-partners .partner-logo img{
    height:100%;
    width:auto;
    max-width:160px;
    object-fit:contain;
    display:block;
}
.footer-partners .partner-x{
    color:var(--on-dark-mute);
    font-family:var(--font-display);
    font-style:italic;
    font-size:1.4rem;
    line-height:1;
}
@media (max-width:540px){
    .footer-partners{flex-direction:column;gap:var(--s-3)}
    .footer-partners .partner-label{margin-right:0}
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--s-3);
    font-size:var(--t-xs);
    color:var(--on-dark-mute);
}
.footer-bottom a:hover{color:var(--gold-soft)}
.footer-sep{margin:0 0.5rem;color:rgba(250,250,249,.25)}
.footer-admin{opacity:.5;transition:opacity var(--dur) var(--ease)}
.footer-admin:hover{opacity:1}
@media (max-width:920px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-5)}}
@media (max-width:540px){.footer-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
  24. Floating CTAs
   -------------------------------------------------------------------------- */
.floating-stack{
    position:fixed;
    right:var(--s-5);
    bottom:var(--s-5);
    z-index:40;
    display:flex;
    flex-direction:column;
    gap:var(--s-3);
}
.floating-cta,
.floating-whatsapp{
    width:56px;height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    box-shadow:var(--shadow-md);
    transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
    cursor:pointer;
    color:var(--bg);
}
.floating-cta{background:var(--ink)}
.floating-cta:hover{background:var(--gold);color:var(--bg-dark);transform:scale(1.05)}
.floating-whatsapp{background:#25D366}
.floating-whatsapp:hover{background:#1FAA50;transform:scale(1.05)}
.floating-cta span{display:none}
@media (max-width:540px){
    .floating-stack{right:var(--s-3);bottom:var(--s-3)}
    .floating-cta,.floating-whatsapp{width:48px;height:48px}
}

/* --------------------------------------------------------------------------
  25. Accent strip
   -------------------------------------------------------------------------- */
.accent-strip{
    height:3px;
    background:linear-gradient(90deg,var(--gold),var(--copper),var(--gold));
    background-size:200% 100%;
    animation:strip 8s linear infinite;
}
@keyframes strip{0%{background-position:0% 0%}100%{background-position:200% 0%}}

/* --------------------------------------------------------------------------
  26. Reveal animations
   -------------------------------------------------------------------------- */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
.fade-in.visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition-duration:1ms !important}
    .fade-in{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
  27. Helpers
   -------------------------------------------------------------------------- */
.divider{height:1px;background:var(--line);margin:var(--s-7) 0}
.tag-pill{
    display:inline-block;
    padding:0.3rem 0.7rem;
    font-family:var(--font-mono);
    font-size:0.55rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    background:var(--bg-soft);
    color:var(--ink-soft);
    border-radius:var(--r-pill);
}
.tag-pill.gold{background:rgba(202,138,4,.12);color:var(--gold)}
.text-balance{text-wrap:balance}

/* --------------------------------------------------------------------------
  28. Hide old/unused classes
   -------------------------------------------------------------------------- */
.highlight{font-style:italic;color:var(--gold);font-weight:400}
.text-secondary{color:var(--ink-mute)}
.mt-40{margin-top:var(--s-7)}