/* ============================================================
   LTD LITTLE SEOUL — public.css
   Site public : header, hero, catalogue, équipe, footer.
   Écran d'introduction retiré définitivement (plus aucune animation au chargement).
   ============================================================ */

/* ---------- 1bis. FREINS ANTI-COPIE (voir assets/js/anti-download.js) ---------- */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}

/* ---------- 2. HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:500;height:var(--nav-h);
  display:flex;align-items:center;
  /* Volontairement PAS de backdrop-filter ici : un en-tête "sticky" avec flou de fond force
     le navigateur à recomposer tout ce qu'il y a en dessous à chaque frame de scroll — combiné
     au flou de fond du hero, c'était la cause principale du lag/FPS très bas au chargement de
     l'accueil. Un fond quasi-opaque donne un résultat visuellement très proche sans ce coût. */
  background:rgba(8,9,11,.88);
  border-bottom:1px solid var(--line);transition:background .3s,border-color .3s;
}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--ltd-red),var(--ltd-navy-300) 65%,transparent);opacity:.7}
/* Logo/texte du header poussés en bas de l'espace réservé (voir --nav-h ci-dessus) au lieu
   d'être centrés sur toute sa hauteur, pour rester sous la barre de statut du jeu plutôt que
   la moitié dessus/dessous. */
html.in-game-phone .site-header{align-items:flex-end;padding-bottom:14px}
[data-theme="light"] .site-header{background:rgba(255,255,255,.92)}
.site-header.is-scrolled{background:rgba(8,9,11,.97);border-bottom-color:var(--line-2)}
[data-theme="light"] .site-header.is-scrolled{background:rgba(255,255,255,.99)}
.site-header .container{display:flex;align-items:center;gap:14px;width:100%}
.brand{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0}
.brand svg,.brand img{width:38px;height:38px;flex:none}
.brand .txt{line-height:1.05;min-width:0;overflow:hidden}
.brand .t1{font-family:var(--font-display);font-weight:800;font-size:15.5px;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .t2{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;color:var(--txt-3);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.head-hello,.head-space{white-space:nowrap}
@media(max-width:720px){.head-hello,.head-space{display:none}}
@media(max-width:420px){
  .site-header .container{gap:8px}
  .brand svg,.brand img{width:32px;height:32px}
  .brand .t1{font-size:13px}
  .brand .t2{display:none}
}



/* ---------- Squelette de chargement (accueil) — affiché le temps que bootstrap.php
   réponde, remplacé automatiquement dès que LTD.pages['public:accueil'] réécrit #page. */
.boot-skeleton{padding:clamp(90px,13vw,168px) 0 40px}

/* ---------- 3. HERO ---------- */
.hero{position:relative;z-index:0;padding:clamp(90px,13vw,168px) 0 clamp(60px,8vw,110px);overflow:hidden}
.hero-bg-blur{position:absolute;inset:-40px;z-index:-3;background-size:cover;background-position:center;filter:blur(20px) saturate(1.1) brightness(.55);transform:translateZ(0) scale(1.08)}
.hero-bg-scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(8,9,11,.35),rgba(8,9,11,.88) 85%)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 640px at 86% 0%,rgba(225,29,46,.32),transparent 62%),
    radial-gradient(900px 700px at -4% 100%,var(--navy-glow),transparent 68%),
    linear-gradient(135deg,rgba(88,29,45,.16),transparent 55%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 64px);
  mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
}
.hero-workers{
  position:absolute;right:-4%;bottom:-6%;width:min(50vw,760px);z-index:-1;
  opacity:.9;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
  mask-image:linear-gradient(90deg,transparent,#000 22%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);
}
@media(max-width:980px){.hero-workers{display:none}}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(52px,10vw,124px);text-transform:uppercase;line-height:.86;letter-spacing:-.045em;
  margin-bottom:22px;
}
.hero h1 span{
  display:block;background:linear-gradient(100deg,var(--ltd-red-300) 0%,var(--ltd-red) 45%,var(--ltd-navy-300) 110%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 30px var(--ltd-red-glow));
}
.hero .lead{font-size:clamp(16px,1.8vw,20px);margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
/* CTA du hero : hiérarchie plus marquée que les boutons standards du site (c'est le seul
   endroit où on veut un vrai "coup d'œil immédiat"), sans devenir un pavé disproportionné. */
.hero-cta .btn{min-height:58px;padding:0 30px;font-size:16px;font-weight:700;border-radius:var(--r)}
.hero-cta .btn--primary{
  box-shadow:0 12px 34px -12px var(--ltd-red-glow),0 0 0 1px rgba(255,255,255,.07) inset;
  letter-spacing:.015em;
}
.hero-cta .btn--primary:hover{box-shadow:0 18px 46px -14px var(--ltd-red-glow),0 0 26px -2px var(--ltd-red-glow);transform:translateY(-2px)}
.hero-cta .btn--ghost{background:rgba(255,255,255,.035);border-color:var(--line-2)}
.hero-cta .btn--ghost:hover{border-color:var(--ltd-red-300);color:var(--ltd-red-300);background:rgba(255,255,255,.05);transform:translateY(-2px)}
@media(max-width:560px){.hero-cta .btn{flex:1 1 auto;min-height:52px;padding:0 20px;font-size:14.5px}}
.hero-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-2)}
.hero-trust svg{color:#5fe08f;flex:none}
.hero-note{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--txt-3)}

/* Accueil chaleureux : badge de bienvenue + entrée animée en cascade du contenu du hero.
   Chaque bloc part légèrement en dessous / transparent puis remonte à sa place, décalé de
   80ms en 80ms pour un effet de cascade plutôt qu'un bloc qui apparaît d'un coup. Neutralisé
   automatiquement sous "Réduire les animations" par la règle globale de base.css (durée
   forcée à .001ms), donc rien à gérer ici pour l'accessibilité. */
.hero-welcome-badge{background:linear-gradient(100deg,var(--red-dim),rgba(217,164,65,.14));border:1px solid rgba(225,29,46,.3);color:var(--ltd-red-300);gap:8px}
.hero-welcome-badge svg{color:var(--ltd-red)}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-anim{opacity:0;animation:heroRise .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-anim-1{animation-delay:.05s}
.hero-anim-2{animation-delay:.15s}
.hero-anim-3{animation-delay:.28s}
.hero-anim-4{animation-delay:.4s}
.hero-anim-5{animation-delay:.5s}
.hero-scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:26px;height:42px;border:2px solid var(--line-2);border-radius:99px;display:flex;justify-content:center;padding-top:8px;opacity:.7;transition:opacity .2s,border-color .2s;z-index:1}
.hero-scroll-cue:hover{opacity:1;border-color:var(--ltd-red-300)}
.hero-scroll-cue span{width:4px;height:8px;border-radius:99px;background:var(--ltd-red-300);animation:heroScrollDot 1.6s ease-in-out infinite}
@keyframes heroScrollDot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media(max-width:640px){.hero-scroll-cue{display:none}}

/* Panneau visuel du hero : "bordereau" LTD */
.dispatch{
  background:linear-gradient(180deg,var(--glass),transparent),var(--ink-800);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-2);
  position:relative;overflow:hidden;
}
.dispatch::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ltd-red),transparent)}
.dispatch-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.dispatch-head .ref{font-family:var(--font-mono);font-size:12.5px;color:var(--txt-3);letter-spacing:.04em}
.dispatch-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.dispatch-row:last-of-type{border-bottom:0}
.dispatch-row .k{color:var(--txt-3)}
.dispatch-row .v{font-weight:600;text-align:right}
.barcode{display:flex;gap:2px;align-items:flex-end;height:34px;margin-top:14px;opacity:.5}
.barcode i{display:block;width:2px;background:var(--txt);border-radius:1px}

/* ---------- 4. STATISTIQUES ANIMÉES ---------- */
.stats-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-850);padding:44px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-card{
  padding:26px 18px 22px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--glass),transparent),var(--ink-800);
  border:1px solid var(--line);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;
}
.stat-card::before{content:"";position:absolute;top:0;left:14%;right:14%;height:2px;background:linear-gradient(90deg,transparent,var(--ltd-red),transparent);opacity:0;transition:opacity .25s}
.stat-card:hover{transform:translateY(-5px);border-color:var(--ltd-red);box-shadow:0 20px 40px -24px var(--ltd-red-glow)}
.stat-card:hover::before{opacity:.85}
.stat-card-ico{width:42px;height:42px;border-radius:12px;background:var(--red-dim);color:var(--ltd-red-300);display:grid;place-items:center;transition:transform .25s var(--ease)}
.stat-card:hover .stat-card-ico{transform:scale(1.08) rotate(-4deg)}
.stat-card .num{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;line-height:1}
.stat-card .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
@media(max-width:780px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.stats-grid{grid-template-columns:1fr}}

/* ---------- 4b. NAVIGATION RAPIDE (accueil, juste sous les statistiques) — pour qui ne veut
   pas défiler toute la page pour retrouver catalogue/packs/nouveautés/suivi. ---------- */
.quicknav-strip{border-bottom:1px solid var(--line);padding:22px 0}
.quicknav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.quicknav-card{
  display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--ink-800);text-decoration:none;color:var(--txt);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.quicknav-card:hover{transform:translateY(-3px);border-color:var(--ltd-red);box-shadow:0 16px 32px -20px var(--ltd-red-glow)}
.quicknav-ico{width:38px;height:38px;border-radius:11px;background:var(--red-dim);color:var(--ltd-red-300);display:grid;place-items:center;flex:none}
.quicknav-lbl{font-weight:650;font-size:14.5px;flex:1}
.quicknav-arrow{color:var(--txt-3);transition:transform .2s var(--ease)}
.quicknav-card:hover .quicknav-arrow{transform:translateX(3px);color:var(--ltd-red-300)}
@media(max-width:780px){.quicknav-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.quicknav-grid{grid-template-columns:1fr}}

/* ---------- 5. SECTIONS GÉNÉRIQUES ---------- */
.section{padding:clamp(56px,7vw,96px) 0;position:relative}
.section--alt{background:var(--ink-850);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:760px;margin-bottom:40px}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
@media(min-width:700px){.section-title--nowrap{white-space:nowrap}}

.feature{padding:24px;border-radius:var(--r);background:var(--ink-800);border:1px solid var(--line);transition:.3s var(--ease);position:relative;overflow:hidden}
.feature:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-2)}
.feature::after{content:"";position:absolute;inset:0;background:radial-gradient(360px 160px at 100% 0,var(--red-dim),transparent 70%);opacity:0;transition:opacity .3s}
.feature:hover::after{opacity:1}
.feature .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--red-dim);color:var(--ltd-red-300);margin-bottom:16px;border:1px solid rgba(225,29,46,.25)}
.feature h3{font-size:17px;margin-bottom:8px;text-transform:none;letter-spacing:-.01em}
.feature p{color:var(--txt-2);font-size:14px;margin:0}

/* ---------- 6. CATALOGUE (mise en page + carrousel, spécifique au site public) ---------- */
/* ---------- CARROUSEL (aperçu catalogue accueil) — défilement tactile natif + barre ---------- */
.carousel{
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  scrollbar-width:none;margin:0 -22px;padding:0 22px;cursor:grab;
}
.carousel::-webkit-scrollbar{display:none}
.carousel:active{cursor:grabbing}
.carousel-track{display:flex;gap:18px}
.carousel-item{flex:0 0 auto;width:min(78vw,270px);scroll-snap-align:start}
.carousel-item .product-card{height:100%}
@media(min-width:1080px){.carousel-item{width:270px}}

/* Barre déplaçable sous le carrousel */
.carousel-scrollbar{margin-top:18px;padding:0 2px}
.carousel-scrollbar-track{position:relative;height:6px;border-radius:99px;background:var(--ink-600);overflow:visible}
.carousel-scrollbar-thumb{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  width:76px;height:16px;border-radius:99px;
  background:linear-gradient(180deg,var(--ltd-red-300),var(--ltd-red));
  box-shadow:0 4px 14px -4px var(--ltd-red-glow);cursor:grab;
  transition:transform .15s var(--ease);
}
.carousel-scrollbar-thumb:hover{transform:translateY(-50%) scaleY(1.15)}
body.is-dragging-carousel .carousel-scrollbar-thumb{cursor:grabbing}
body.is-dragging-carousel{user-select:none}
@media(max-width:600px){.carousel-scrollbar-thumb{width:56px}}
/* ---------- 6b. PACKS — même carte que catalogue/nouveautés (news-card thémée), composition
   résumée sur une seule ligne tronquée plutôt qu'une liste de puces empilées. ---------- */
.pack-card-line{
  font-size:12px;font-family:var(--font-mono);color:var(--txt-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 0;
}

/* ---------- Pop-up "Découvrir" d'un pack ---------- */
.pack-modal{display:flex;flex-direction:column;gap:14px}
.pack-modal-media{border-radius:14px;overflow:hidden;background:var(--ink-800);aspect-ratio:16/8}
.pack-modal-media img{width:100%;height:100%;object-fit:cover;display:block}
.pack-modal-desc{font-size:14.5px;line-height:1.6;color:var(--txt-2);white-space:pre-wrap;max-height:none}
.pack-modal-subhead{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-3);margin:0}
.pack-modal-items{display:flex;flex-direction:column;gap:8px;max-height:min(360px,50vh);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px}
.pack-modal-item{display:flex;align-items:center;gap:10px;background:var(--ink-800);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.pack-modal-item-media{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;background:var(--ink-900)}
.pack-modal-item-media img{width:100%;height:100%;object-fit:contain}
.pack-modal-item-glyph{font-size:17px}
.pack-modal-item-name{flex:1;font-size:13.5px}
.pack-modal-item-qty{font-family:var(--font-mono);font-size:12px;color:var(--txt-3)}
.pack-modal-item-price{font-family:var(--font-mono);font-size:11.5px;min-width:64px;text-align:right}
.pack-modal-total{border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:4px}
.pack-modal-total-row{display:flex;align-items:center;justify-content:space-between}
.pack-modal-total-price{font-family:var(--font-display);font-size:19px;color:var(--ltd-red-300)}

/* ---------- 6c. NOUVEAUTÉS — traitement doré, discret et maîtrisé ---------- */
.news-eyebrow-gold{color:var(--gold-300)}
.news-card{
  position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(217,164,65,.28);
  background:linear-gradient(180deg,rgba(217,164,65,.05),transparent 40%),var(--ink-800);
  text-decoration:none;color:inherit;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.news-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 22px 44px -26px var(--gold-glow)}
.news-card-new-badge{
  position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,var(--gold-300),var(--gold));color:#241a06;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 10px 5px 8px;border-radius:99px;
  box-shadow:0 6px 16px -6px var(--gold-glow);
}
.news-card-media{aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,var(--navy-dim),var(--ink-850));position:relative}
.news-card-media img{width:100%;height:100%;object-fit:cover}
.news-card-emoji{font-size:40px}
.news-card-price{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,var(--gold-300),var(--gold));color:#241a06;font-size:13px;font-weight:800;
  padding:5px 11px;border-radius:99px;box-shadow:0 6px 16px -6px var(--gold-glow)}
.news-card-body{padding:16px 18px 18px}
.news-card-body h3{font-size:15.5px;text-transform:none;margin-bottom:6px}
.news-card-body p{font-size:13px;color:var(--txt-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--gold-300)}

/* ---------- Carrousel Nouveautés (accueil) — scroll natif + snap, pas de rAF ---------- */
.news-carousel{position:relative;display:flex;align-items:stretch;gap:10px}
.news-carousel-track{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px 10px;flex:1 1 auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.news-carousel-track::-webkit-scrollbar{display:none}
/* Quand il y a peu de cartes (pas assez pour déborder), on les centre au lieu de les laisser
   collées à gauche avec du vide à droite. "justify-content:center" est sans risque même en
   cas de débordement : le navigateur repasse automatiquement en alignement au début (scroll
   complet accessible) dès que le contenu dépasse la largeur disponible. */
.news-carousel--center .news-carousel-track{justify-content:center}


/* Habillage "coup de cœur" (fleurs / romantique) — cadre rose au lieu du liseré doré standard,
   pour les articles comme les roses ou bouquets. */
.news-card--valentine{border-color:rgba(236,72,153,.4);background:linear-gradient(180deg,rgba(236,72,153,.08),transparent 40%),var(--ink-800)}
.news-card--valentine:hover{border-color:#ec4899;box-shadow:0 22px 44px -26px rgba(236,72,153,.45)}
.news-card-badge--valentine{background:linear-gradient(135deg,#f472b6,#ec4899);color:#3f0620;box-shadow:0 6px 16px -6px rgba(236,72,153,.55)}
.news-card--valentine .news-card-media{background:radial-gradient(circle at 50% 30%,rgba(236,72,153,.18),var(--ink-850))}
.news-card--valentine .news-card-price{background:linear-gradient(135deg,#f472b6,#ec4899);color:#3f0620;box-shadow:0 6px 16px -6px rgba(236,72,153,.55)}
.soon-card--valentine{border-style:solid;border-color:rgba(236,72,153,.35)}
.soon-card--valentine:hover{border-color:#ec4899}
.soon-card-badge--valentine{background:linear-gradient(135deg,#f472b6,#ec4899);color:#3f0620;border-color:transparent}
.soon-card--valentine .soon-card-media{background:radial-gradient(circle at 50% 30%,rgba(236,72,153,.14),var(--ink-850))}

/* Systeme de theme generique par famille de cadeau (Saint-Valentin, Porte-bonheur, Douceur,
   Gourmandise, Gaming...) — une seule regle pilotee par variables CSS (--theme-c / --theme-dim,
   posees en inline-style par festiveProductCard) au lieu d'un bloc de regles par famille. */
.news-card--themed{border-color:var(--theme-dim);background:linear-gradient(180deg,var(--theme-dim),transparent 40%),var(--ink-800)}
.news-card--themed:hover{border-color:var(--theme-c);box-shadow:0 22px 44px -26px var(--theme-dim)}
.news-card-badge--themed{background:var(--theme-c);color:#fff;box-shadow:0 6px 16px -6px var(--theme-dim)}
.news-card--themed .news-card-media{background:radial-gradient(circle at 50% 30%,var(--theme-dim),var(--ink-850))}
.news-card--themed .news-card-price{background:var(--theme-c);color:#fff;box-shadow:0 6px 16px -6px var(--theme-dim)}
.soon-card--valentine .soon-card-emoji{filter:none;opacity:.85}
.news-carousel-item{flex:0 0 clamp(240px,80vw,300px);scroll-snap-align:start;display:flex}
.news-carousel-item .news-card{width:100%}
@media(min-width:640px){.news-carousel-item{flex-basis:clamp(260px,42vw,300px)}}
@media(min-width:1000px){.news-carousel-item{flex-basis:300px}}
.news-car-btn{
  flex:none;align-self:center;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-800);border:1px solid var(--line-2);color:var(--txt);cursor:pointer;
  transition:border-color .2s,color .2s,opacity .2s;
}
.news-car-btn:hover{border-color:var(--gold);color:var(--gold-300)}
.news-car-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
.news-carousel:not(.has-overflow) .news-car-btn{display:none}
/* Gardées visibles même en dessous de 680px (au lieu d'être masquées au profit du swipe
   tactile) : le navigateur embarqué du jeu (NUI/tablette en jeu) est piloté à la souris, pas
   au doigt — sans ces flèches, un défilement horizontal en display:none laissait les cartes
   au-delà de la première totalement hors d'atteinte. Juste réduites pour laisser de la place
   aux cartes sur un petit écran. */
@media(max-width:680px){.news-car-btn{width:34px;height:34px}.news-carousel{gap:6px}}

/* ---------- CATALOGUE — "Prochainement" (produit soon=1, pas encore en vente) ---------- */
.soon-card{
  position:relative;display:flex;flex-direction:column;width:100%;border-radius:var(--r-lg);overflow:hidden;
  border:1px dashed var(--line-2);background:var(--ink-800);cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s;
}
.soon-card:hover{transform:translateY(-4px);border-color:var(--txt-3)}
.soon-card-badge{
  position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  background:rgba(13,15,19,.85);color:var(--txt-2);font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 10px 5px 8px;border-radius:99px;border:1px solid var(--line-2);
}
.soon-card-media{aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,var(--ink-700),var(--ink-850));position:relative;overflow:hidden}
.soon-card-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.65)}
.soon-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(8,9,11,.5))}
.soon-card-emoji{font-size:36px;opacity:.55;filter:grayscale(.4)}
.soon-card-body{padding:14px 16px 16px}
.soon-card-body h3{font-size:14.5px;text-transform:none;margin-bottom:6px;color:var(--txt-2)}
.soon-card-price{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--txt-3)}

/* ---------- 7. ÉQUIPE ---------- */
.team-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--ink-800);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s var(--ease);
}
.team-card:hover{transform:translateY(-6px);border-color:var(--rank-color,var(--ltd-red));box-shadow:0 26px 50px -26px var(--ltd-red-glow)}
.team-card--lead{border-color:var(--rank-color)}
.team-card--lead .team-photo{aspect-ratio:1/1}
.team-card--lead .team-info h3{font-size:27px}
.team-photo{aspect-ratio:3/4;overflow:hidden;background:var(--ink-700);position:relative}
.team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s}
.team-card:hover .team-photo img{transform:scale(1.05)}
.team-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,9,11,.92) 97%)}
.team-photo .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-size:52px;color:var(--ink-500)}
/* La lisibilité du texte vient d'abord d'une ombre portée marquée (text-shadow ci-dessous),
   pas d'un fond opaque qui masquerait la photo — un essai précédent assombrissait tout le
   bas de la photo pour garantir le contraste et ça cachait le portrait presque entièrement
   ("on ne voit plus la photo"). Le dégradé ici reste volontairement léger, en appoint. */
.team-info{
  position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(6,7,9,.45) 45%,rgba(6,7,9,.78) 80%);
  text-shadow:0 2px 6px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.95);
}
.team-info .rank{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:6px;white-space:normal;overflow:visible}
.team-since{color:var(--txt-2);letter-spacing:.02em;font-weight:600;white-space:normal;overflow:visible;max-width:100%}
.team-info h3{font-size:22px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;word-break:break-word}
/* Description toujours visible (tronquée) : sur mobile/tablette il n'y a pas de vrai hover,
   la cacher entièrement derrière un survol la rendait invisible en pratique sur tactile. */
.team-info .desc{font-size:13px;color:var(--txt-2);margin-top:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.team-meta{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.team-meta .badge{white-space:normal;text-align:center;line-height:1.3;font-weight:700}

/* ---------- ORGANIGRAMME (Direction → RH → Team Leaders → Équipe terrain) ----------
   Niveaux reliés par des traits verticaux + un bus horizontal calé sur la largeur réelle
   de chaque rangée (border-top sur une rangée en width:fit-content) — pas de mesure JS.
   Sur mobile, les traits sont masqués (voir media query plus bas) : dès qu'une rangée
   passe sur plusieurs lignes, un bus unique n'a plus de sens visuellement ; le libellé de
   niveau suffit à garder la hiérarchie lisible. */
.orgchart{display:flex;flex-direction:column;align-items:center}
.orgchart-tier{display:flex;flex-direction:column;align-items:center;width:100%}
.orgchart-connector{width:2px;height:36px;background:var(--line-2)}
.orgchart-tier:first-child .orgchart-connector{display:none}
.orgchart-tier-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:18px;
}
.orgchart-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:28px;
  width:fit-content;max-width:100%;margin:0 auto 44px;position:relative;
  border-top:2px solid var(--line-2);padding-top:28px;
}
.orgchart-tier:last-child .orgchart-row{margin-bottom:0}
.orgchart-row.is-single{border-top:none;padding-top:0}
.orgchart-row > *{position:relative}
.orgchart-row:not(.is-single) > *::before{
  content:"";position:absolute;top:-28px;left:50%;width:2px;height:28px;background:var(--line-2);transform:translateX(-50%);
}
.orgchart-row--emp{gap:12px 16px;max-width:820px}
.orgchart-empty{
  border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:16px 28px;
  color:var(--txt-3);font-size:13px;background:rgba(255,255,255,.015);
}
/* .team-card n'a pas de largeur propre : elle venait jusqu'ici du minmax() de la grille
   CSS qui le contenait (.team-grid/.team-grid-direction). Dans le flex de l'organigramme
   il lui en faut une explicite, sous peine de s'écraser à une largeur quasi nulle. */
.orgchart-row .team-card{width:320px}
.orgchart-row .team-card--lead{width:380px}
@media(max-width:820px){.orgchart-row .team-card{width:280px}.orgchart-row .team-card--lead{width:320px}}
@media(max-width:480px){.orgchart-row .team-card,.orgchart-row .team-card--lead{width:100%;max-width:380px}}
@media(max-width:760px){
  .orgchart-row{border-top:0;padding-top:0;gap:16px}
  .orgchart-row > *::before{display:none}
  .orgchart-connector{height:22px}
}

.org-emp-card{
  display:flex;align-items:center;gap:12px;background:var(--ink-800);border:1px solid var(--line);
  border-radius:99px;padding:9px 20px 9px 9px;transition:border-color .25s,transform .25s var(--ease);cursor:default;
}
.org-emp-card:hover{transform:translateY(-3px);border-color:var(--rank-color,var(--ltd-red))}
.org-emp-avatar{
  width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
  background:var(--ink-700);font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--txt-2);
  border:2px solid var(--rank-color,var(--line-2));
}
.org-emp-avatar img{width:100%;height:100%;object-fit:cover}
.org-emp-info{display:flex;flex-direction:column;line-height:1.3;max-width:180px}
.org-emp-info b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-emp-info span{font-size:12px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- BANDEAU DÉFILANT GÉNÉRIQUE (partenaires + aperçu catalogue) ---------- */
/* Le mouvement est piloté en JavaScript (voir pages-public.js, wireMarquee), pas en CSS
   @keyframes : une règle globale du site (base.css, prefers-reduced-motion) écrase toute
   animation CSS dès que l'ordinateur du visiteur a "Réduire les animations" activé (très
   courant en mode économie d'énergie sur portable) — ce qui rendait un bandeau en CSS pur
   figé sans qu'on le sache. Un déplacement direct via JS (style.transform) contourne
   totalement ce souci. Classes génériques réutilisées pour plusieurs bandeaux du site. */
.partners-marquee-section{padding-bottom:clamp(56px,7vw,96px)}
.marquee{
  position:relative;overflow:hidden;margin-top:8px;padding-block:10px;
  display:flex;justify-content:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{
  display:flex;align-items:stretch;gap:20px;width:max-content;
}
/* Bandeau nouveautés (accueil) : meme moteur de defilement continu que les partenaires,
   cartes plus grandes (image + texte + bouton) donc largeur fixe dediee. */
.marquee--news{padding-block:18px;margin-top:14px}
.marquee--news .news-card{width:250px;flex:none}
/* ---------- PASTILLES DE FILTRE PAR CATÉGORIE (partenaires) ---------- */
/* Volontairement léger — une simple rangée de pastilles avec emoji sous le titre, pas un
   gros panneau. Cliquer une pastille filtre le bandeau juste en dessous (voir wireMarquee /
   wirePartnersMarquee : le nombre d'éléments uniques est transmis au moteur pour éviter de
   sur-dupliquer et créer un mur de logos identiques quand une catégorie a peu d'entreprises). */
.partner-cat-row{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:18px 0 0}
.partner-cat-pill{
  display:flex;align-items:center;gap:7px;background:var(--ink-800);border:1px solid var(--line-2);
  color:var(--txt-2);padding:8px 15px;border-radius:99px;font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:.15s;
}
.partner-cat-pill:hover{border-color:var(--ltd-red-300);color:var(--txt)}
.partner-cat-pill.is-active{background:var(--ltd-red);border-color:var(--ltd-red);color:#fff}
.pcp-emoji{font-size:14px;line-height:1}
.pcp-count{
  background:rgba(255,255,255,.12);border-radius:99px;padding:1px 7px;font-size:10.5px;font-weight:800;
}
.partner-cat-pill.is-active .pcp-count{background:rgba(255,255,255,.25)}

/* ---------- ONGLETS Catalogue/Nouveautés (accueil) ---------- */
/* Bascule au-dessus des deux spotlights fusionnés (voir showcaseHtml dans pages-public.js) —
   remplace les deux sections pleine largeur qui se suivaient avant (même widget, deux fois). */
.showcase-tabs{display:inline-flex;padding:4px;border-radius:99px;background:var(--ink-800);border:1px solid var(--line);gap:2px;margin-bottom:16px}
.showcase-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:99px;border:0;background:transparent;color:var(--txt-3);font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,color .2s;font-family:inherit}
.showcase-tab.is-active{background:var(--ltd-red);color:#fff}
.showcase-tab:not(.is-active):hover{color:var(--txt-2)}

/* ---------- SPOTLIGHT CATALOGUE (accueil) ---------- */
.catalog-spotlight{
  display:flex;align-items:center;gap:40px;min-height:230px;max-width:820px;margin:0 auto;
  padding:8px 4px;
}
.spot-media{
  flex:none;width:210px;height:210px;border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,var(--ink-600),var(--ink-850));
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.spot-media img{width:100%;height:100%;object-fit:cover}
.spot-media .glyph{font-size:84px;filter:saturate(.9) drop-shadow(0 10px 16px rgba(0,0,0,.4))}
.spot-info{flex:1;min-width:0}
.spot-info .ref{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--txt-3);text-transform:uppercase}
.spot-info h3{font-family:var(--font-display);font-weight:800;font-size:26px;margin:8px 0;text-transform:uppercase;letter-spacing:-.01em}
.spot-info p{color:var(--txt-2);font-size:13.5px;line-height:1.6;margin:0 0 14px;max-width:48ch}
.spot-info .price{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ltd-red-300)}
.spot-dots{flex:none;display:flex;flex-direction:column;gap:8px}
.spot-dots span{width:8px;height:8px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:.25s}
.spot-dots span.is-active{background:var(--ltd-red);height:22px;border-radius:4px}
@media(max-width:720px){
  .catalog-spotlight{flex-direction:column;text-align:center;gap:20px}
  .spot-info p{margin-inline:auto}
  .spot-dots{flex-direction:row}
}

/* ---------- SPOTLIGHT NOUVEAUTÉS (accueil) ---------- */
/* Même squelette que le spotlight catalogue, mais teinté par la couleur de la famille de
   cadeau en cours (--theme-c/--theme-dim, posées en JS sur #newsSpotlight à chaque slide —
   voir wireNewsSpotlight) : le cadre, le badge et le prix changent de couleur avec l'article. */
.gift-spotlight{
  --theme-c:var(--ltd-red); --theme-dim:var(--red-dim);
  display:flex;align-items:center;gap:40px;min-height:260px;max-width:860px;margin:0 auto;
  padding:22px 26px;border-radius:var(--r-lg);border:1px solid var(--theme-dim);
  background:linear-gradient(135deg,var(--theme-dim),transparent 55%),var(--ink-800);
  transition:border-color .4s,background .4s;
}
.gs-media{
  flex:none;width:200px;height:200px;border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,var(--theme-dim),var(--ink-850));
  border:1px solid var(--theme-dim);display:flex;align-items:center;justify-content:center;
  transition:background .4s,border-color .4s;
}
.gs-media img{width:100%;height:100%;object-fit:cover}
.gs-media .glyph{font-size:80px;filter:saturate(1) drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.gs-info{flex:1;min-width:0}
.gs-badge{
  display:inline-flex;align-items:center;gap:6px;background:var(--theme-c);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px 5px 9px;border-radius:99px;box-shadow:0 6px 16px -6px var(--theme-dim);
}
.gs-info h3{font-family:var(--font-display);font-weight:800;font-size:27px;margin:12px 0 8px;text-transform:uppercase;letter-spacing:-.01em}
.gs-info p{color:var(--txt-2);font-size:13.5px;line-height:1.6;margin:0 0 14px;max-width:48ch}
.gs-info .price{font-family:var(--font-display);font-weight:800;font-size:23px;color:var(--theme-c);display:block;margin-bottom:12px}
.gs-dots{flex:none;display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;padding-right:2px}
.gs-dots span{width:8px;height:8px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:.25s;flex:none}
.gs-dots span.is-active{background:var(--theme-c);height:22px;border-radius:4px}
@media(max-width:760px){
  .gift-spotlight{flex-direction:column;text-align:center;gap:20px;padding:22px}
  .gs-info p{margin-inline:auto}
  .gs-dots{flex-direction:row;max-height:none;max-width:100%;overflow-x:auto;padding-bottom:2px}
}

.partner-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--ink-800);transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease);
}
.partner-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--pbrand,var(--ltd-red)),transparent);
  opacity:0;transition:opacity .3s;
}
.partner-card:hover{transform:translateY(-6px);border-color:var(--pbrand,var(--ltd-red))}
.partner-card:hover::before{opacity:.9}
.partner-card:hover .partner-card-media{background:var(--ink-600)}
.partner-card-media{
  height:112px;display:flex;align-items:center;justify-content:center;background:var(--ink-700);
  padding:16px;transition:background .35s var(--ease);
}
.partner-card-media img{max-width:100%;max-height:100%;object-fit:contain}
.partner-card-media .ph{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--ink-500)}
.partner-card-info{padding:16px 18px 18px}
.partner-card-info h3{font-size:15px;text-transform:none;letter-spacing:0;margin:0;color:var(--txt)}
.partner-card-sector{
  display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pbrand,var(--ltd-red-300));background:color-mix(in srgb, var(--pbrand,var(--ltd-red)) 14%, transparent);
  padding:3px 10px;border-radius:99px;margin-top:8px;
}
.partner-card-role{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--txt-3);margin-top:8px}
.partner-card-role svg{flex:none}
.partner-card-desc{
  font-size:12.5px;color:var(--txt-2);line-height:1.5;margin-top:9px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* ---------- GRILLE PARTENAIRES (accueil) ---------- */
/* Cartes rectangulaires (voir .partner-card plus haut) plutôt que des médaillons ronds répétés
   à l'identique — au-delà de quelques partenaires, une grille toute en cercles devenait
   monotone. Grille fixe (pas de carrousel), une pastille de secteur dans la vraie couleur de
   marque du partenaire (--pbrand, posée par partnerLogoItem depuis brandColor en base). */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:26px}

/* ---------- Page partenaires : vitrine + formulaire côte à côte ---------- */
.partners-form-split{grid-template-columns:1.15fr 1fr;gap:40px}
.partners-form-split--single{grid-template-columns:1fr 1fr}
.partners-form-split .partner-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:16px}
@media(max-width:900px){.partners-form-split{grid-template-columns:1fr!important}}

/* ---------- 8. RECRUTEMENT ---------- */
.job-perks-strip{display:flex;gap:22px;flex-wrap:wrap;padding:16px 20px;margin:20px 0 28px;border-radius:var(--r);background:var(--ink-800);border:1px solid var(--line)}
.job-perks-strip span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--txt-2)}
.job-perks-strip svg{color:#5fe08f;flex:none}
.job-card{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r);background:var(--ink-800);overflow:hidden;transition:border-color .25s,transform .25s var(--ease)}
.job-card:not(.job-card--closed){border-left-color:var(--ltd-red)}
.job-card:not(.job-card--closed):hover{transform:translateY(-3px)}
.job-card--closed{opacity:.5}
.job-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.job-head-ico{width:38px;height:38px;border-radius:11px;background:var(--red-dim);color:var(--ltd-red-300);display:grid;place-items:center;flex:none}
.job-head h3{font-size:18px;text-transform:none;margin-bottom:2px}
.job-body{padding:20px 22px}
.job-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}
.job-fact{background:var(--ink-850);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.job-fact .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.job-fact .v{font-weight:650;font-size:14px;margin-top:3px}
.job-missions li{display:flex;gap:9px;font-size:14px;color:var(--txt-2);padding:5px 0}
.job-missions li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ltd-red);margin-top:8px;flex:none}

/* ---------- 8b. FICHE POSTE "HÉROS" (photo de fond, réglée depuis la fiche du poste) ---------- */
.job-card--hero .job-head{
  position:relative;min-height:240px;padding:28px 26px;align-items:flex-end;border-bottom:0;
  background-size:cover;background-position:center;background-color:var(--ink-850);
}
.job-card--hero .job-head::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.1) 0%,rgba(8,9,11,.55) 55%,rgba(8,9,11,.96) 100%);
}
.job-card--hero .job-head > *{position:relative;z-index:1}
.job-card--hero .job-head h3{font-size:27px;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
@media(max-width:640px){.job-card--hero .job-head{min-height:190px}.job-card--hero .job-head h3{font-size:21px}}

/* ---------- 8c. CANDIDATURE REMASTÉRISÉE ---------- */
/* Photo en portrait À GAUCHE, formulaire à droite. La colonne photo s'étire (align-items
   stretch, pas de height fixe) pour toujours occuper TOUTE la hauteur de la colonne — même
   si le formulaire à droite est plus long qu'elle, pas de bande noire vide en dessous.
   Sticker + titre ancrés en haut (pas en bas) : sinon ils finissent hors champ une fois la
   photo étirée très haut. */
.apply-split{display:flex;margin:-4px -22px -20px}
.apply-split-photo{
  position:relative;flex:0 0 240px;width:240px;
  background-size:cover;background-position:center;background-color:var(--ink-850);
}
.apply-split-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,11,.4),transparent 22%,transparent 78%,rgba(8,9,11,.3))}
.apply-split-sticker{
  position:absolute;z-index:2;top:16px;left:16px;display:flex;align-items:center;gap:8px;
  background:#fff;color:var(--ink-900);padding:8px 14px 8px 10px;border-radius:999px;
  font-weight:800;font-size:13px;box-shadow:0 10px 24px -6px rgba(0,0,0,.45);transform:rotate(-4deg);
}
.apply-split-sticker span{white-space:nowrap}
.apply-split-caption{
  position:absolute;z-index:2;left:12px;right:12px;top:66px;padding:10px 14px;
  background:rgba(8,9,11,.55);border-radius:12px;
}
.apply-split-caption h3{font-family:var(--font-display);font-size:17px;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);line-height:1.2}
.apply-split-caption p{font-size:12px;color:rgba(255,255,255,.82);margin-top:4px}
.apply-split-form{flex:1;min-width:0;padding:16px 22px 20px}
.apply-split--single .apply-split-form{padding:4px 22px 20px}
@media(max-width:560px){
  .apply-split{flex-direction:column}
  .apply-split-photo{width:100%;flex:0 0 150px;height:150px}
  .apply-split-sticker{top:12px;left:12px;padding:6px 12px 6px 8px;font-size:12px}
  .apply-split-caption{top:auto;bottom:10px;padding:8px 12px}
  .apply-split-caption h3{font-size:15px}
}
/* Grille de disponibilité — volontairement plus lourde qu'un simple champ texte : on veut
   que "cocher au hasard" demande un minimum d'effort, pour décourager les candidatures pas
   sérieuses sur ce champ précis (retour explicite : "je cherche pas des branleurs"). */
.avail-grid{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:6px}
.avail-grid-head,.avail-grid-row{display:grid;grid-template-columns:1fr repeat(3,64px);align-items:center}
.avail-grid-head{background:var(--ink-850);padding:8px 12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3)}
.avail-grid-head span:first-child{text-align:left}
.avail-grid-head span{text-align:center}
.avail-grid-row{padding:6px 12px;border-top:1px solid var(--line)}
.avail-grid-day{font-size:13px;color:var(--txt-2)}
.avail-cell{display:flex;justify-content:center;cursor:pointer;padding:4px 0;outline:none}
.avail-cell-box{
  width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);background:var(--ink-800);
  transition:.15s;display:block;
}
.avail-cell[aria-checked="true"] .avail-cell-box{background:var(--ltd-red);border-color:var(--ltd-red);box-shadow:0 0 0 3px var(--red-dim)}
.avail-cell:hover .avail-cell-box{border-color:var(--ltd-red-300)}
@media(max-width:480px){.avail-grid-head,.avail-grid-row{grid-template-columns:1fr repeat(3,44px)}.avail-cell span{width:20px;height:20px}}

/* ---------- 10. AUTH ---------- */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}}
.auth-art{
  position:relative;padding:48px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(150deg,var(--ltd-navy-600) 0%,var(--ink-900) 55%);border-right:1px solid var(--line);overflow:hidden;
}
@media(max-width:900px){.auth-art{display:none}}
.auth-art::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 460px at 20% 20%,var(--red-dim),transparent 68%)}
.auth-art::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(225,29,46,.06) 0 20px,transparent 20px 40px);
}
.auth-art > *{position:relative;z-index:2}
.auth-art-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1}
.auth-art-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,9,11,.92),rgba(8,9,11,.35) 55%,rgba(8,9,11,.65))}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px 22px;background:var(--ink-900)}
.auth-box{
  width:100%;max-width:410px;box-sizing:border-box;padding:36px 32px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 45%),var(--ink-800);
  border:1px solid var(--line);box-shadow:0 40px 70px -30px rgba(0,0,0,.6);
}
.auth-box h1{font-size:30px;text-transform:uppercase;margin-bottom:8px}

/* Fond animé du panneau gauche : le glow respire, les diagonales pulsent doucement */
@keyframes authGlowPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.65;transform:scale(1.14)}}
@keyframes authStripePulse{0%,100%{opacity:.4}50%{opacity:.85}}
@keyframes authFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.auth-art::before{animation:authGlowPulse 7s ease-in-out infinite}
.auth-art::after{animation:authStripePulse 9s ease-in-out infinite}

.auth-badge{padding:7px 14px;border-radius:99px;background:var(--red-dim);border:1px solid rgba(225,29,46,.3);margin-bottom:20px}
.auth-headline{font-size:34px;text-transform:uppercase;margin-bottom:14px;line-height:1.06}
.auth-lead{max-width:38ch;margin-bottom:0}
.auth-badge,.auth-headline,.auth-lead,.auth-feat{animation:authFadeUp .45s ease both}
.auth-feats{display:flex;flex-direction:column;gap:13px;margin-top:30px}
.auth-feat{display:flex;align-items:center;gap:13px}
.auth-feat:nth-child(2){animation-delay:.06s}.auth-feat:nth-child(3){animation-delay:.12s}
.auth-feat-ic{flex:none;width:36px;height:36px;padding:9px;box-sizing:border-box;border-radius:10px;background:var(--red-dim);color:var(--ltd-red-300)}
.auth-feat span{font-size:13.5px;color:var(--txt-2)}
.auth-trust{position:relative;z-index:2;display:flex;align-items:center;gap:8px;color:var(--txt-3);font-size:12.5px}

/* Onglets Administration/Partenaire/Client avec pastille qui glisse (même logique que
   .showcase-tabs sur l'accueil, adaptée à 3 options + indicateur séparé pour l'anim) */
.auth-tabs{position:relative;display:flex;width:100%;align-items:center;height:44px;box-sizing:border-box;padding:0 4px;border-radius:99px;background:var(--ink-900);border:1px solid var(--line);gap:2px}
.auth-tab-indicator{position:absolute;top:4px;left:4px;height:36px;width:calc(33.333% - 2.66px);border-radius:99px;background:linear-gradient(135deg,var(--ltd-red),var(--ltd-red-600));box-shadow:0 6px 16px -4px var(--ltd-red-glow);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.auth-tab{position:relative;z-index:1;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;height:36px;border:0;background:transparent;font-family:var(--font-body);font-size:13px;font-weight:700;padding:0 10px;border-radius:99px;cursor:pointer;color:var(--txt-3);transition:color .2s;white-space:nowrap}
.auth-tab.is-active{color:#fff}

/* Fond du panneau gauche : deux calques superposés pour un fondu enchaîné quand la photo
   change selon l'espace (admin/partenaire/client ont chacun la leur, réglable dans
   Administration → Personnalisation → Identité). */
.auth-art-img{transition:opacity .45s ease}

.auth-field-wrap{position:relative}
.auth-field-wrap .input{padding-left:40px}
.auth-field-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--txt-3);pointer-events:none;transition:color .18s}
.auth-field-wrap:focus-within .auth-field-ic{color:var(--ltd-red-300)}
.auth-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:6px;border-radius:7px;cursor:pointer;color:var(--txt-3);display:flex}
.auth-eye:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.demo-hint{
  margin-top:20px;padding:14px 16px;border-radius:var(--r-sm);border:1px dashed var(--line-2);
  background:var(--glass);font-size:13px;color:var(--txt-2);
}
.demo-hint b{color:var(--txt);font-family:var(--font-mono)}

/* ---------- 11. PANIER / DEVIS ---------- */
.cart-fab{
  position:fixed;right:20px;bottom:20px;z-index:600;
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--ltd-red),var(--ltd-red-600));color:#fff;
  box-shadow:0 14px 34px -12px var(--ltd-red-glow);display:grid;place-items:center;
  transition:transform .25s var(--ease);
}
.cart-fab:hover{transform:scale(1.06)}
.cart-fab .count{
  position:absolute;top:-4px;right:-4px;min-width:23px;height:23px;border-radius:12px;
  background:var(--ink-900);border:1px solid var(--line-2);color:var(--txt);
  font-size:11.5px;font-weight:700;display:grid;place-items:center;padding:0 6px;
}
.cart-line{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-line:last-child{border-bottom:0}
/* Lignes du panier public (pages/panier.html) — réutilise .order-row (déjà employé côté
   partenaire pour la sélection produits) avec juste plus de place pour loger la quantité
   ET le bouton retirer côte à côte dans .or-act. */
.order-row .or-act--cart{width:176px;gap:8px}

/* ---------- 11b. BANDEAU RECRUTEMENT ---------- */
/* Volontairement PAS une pop-up centrée (déjà prise par les alertes commande admin, qui elles
   doivent interrompre) : une bande fixée en bas d'écran qui glisse depuis le bas, dismissible,
   qui n'empêche jamais de continuer à lire la page derrière. Contour + halo rouge LTD façon
   "carte de visite qui brille", titre du poste toujours lisible en entier (les horaires,
   parfois longs, passent en seconde ligne tronquée plutôt que d'avaler le titre avec eux). */
.recruit-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:850;max-width:760px;margin:0 auto;
  transform:translateY(140%);transition:transform .5s var(--ease);
}
.recruit-banner.is-in{transform:translateY(0)}
.recruit-banner-inner{
  position:relative;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;
  background:linear-gradient(120deg,var(--ink-800),var(--ink-850) 75%);
  border:1.5px solid var(--ltd-red);
  box-shadow:0 0 0 1px var(--red-dim),0 0 42px -6px var(--ltd-red-glow),0 22px 50px -20px rgba(0,0,0,.7);
  animation:recruitGlow 3.2s ease-in-out infinite;
}
@keyframes recruitGlow{
  0%,100%{box-shadow:0 0 0 1px var(--red-dim),0 0 30px -6px var(--ltd-red-glow),0 22px 50px -20px rgba(0,0,0,.7)}
  50%{box-shadow:0 0 0 1px var(--red-dim),0 0 54px -2px var(--ltd-red-glow),0 22px 50px -20px rgba(0,0,0,.7)}
}
.recruit-banner-badge{
  display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;flex:none;
  background:linear-gradient(140deg,var(--ltd-red),var(--ltd-red-600));color:#fff;
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  box-shadow:0 6px 16px -6px var(--ltd-red-glow);
}
.recruit-banner-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.recruit-banner-title{font-family:var(--font-display);font-weight:800;font-size:16.5px;color:#fff;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15}
.recruit-banner-sub{font-size:12px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recruit-banner-cta{flex:none}
.recruit-banner-close{
  position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--ink-700);color:var(--txt-2);
  display:grid;place-items:center;cursor:pointer;transition:.15s;box-shadow:var(--shadow-1);
}
.recruit-banner-close:hover{background:var(--ink-600);color:var(--txt);transform:scale(1.08)}
@media(max-width:560px){
  .recruit-banner{left:10px;right:10px;bottom:10px}
  .recruit-banner-inner{padding:12px 14px}
  .recruit-banner-title{font-size:14.5px}
  .recruit-banner-sub{display:none}
}
/* Variante dorée du même bandeau, pour la relance fidélité (voir mountAccountBanner) — pas de
   rouge "urgent" ici, juste une invitation, donc pas de halo qui pulse non plus. */
.promo-banner .recruit-banner-inner{
  border-color:#ffd76a; animation:none;
  box-shadow:0 0 0 1px rgba(255,215,106,.22),0 0 34px -8px rgba(255,215,106,.4),0 22px 50px -20px rgba(0,0,0,.7);
}
.promo-banner .recruit-banner-badge{background:linear-gradient(140deg,#ffd76a,#e8b93f);color:#1a1408;box-shadow:0 6px 16px -6px rgba(255,215,106,.5)}

/* ---------- 12. FOOTER ---------- */
.site-footer{background:var(--ink-850);border-top:1px solid var(--line);padding:56px 0 26px;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:14px}
.footer-grid a{display:block;padding:6px 0;font-size:14px;color:var(--txt-2);transition:.2s}
.footer-grid a:hover{color:var(--ltd-red-300);transform:translateX(3px)}
.footer-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--txt-3);
}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--ok-dim);color:#5fe08f;border:1px solid rgba(34,197,94,.3);font-size:12px;font-weight:600}

.page-hero{padding:clamp(76px,9vw,120px) 0 clamp(34px,4vw,52px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 82% -10%,rgba(225,29,46,.28),transparent 68%),radial-gradient(700px 400px at -6% 100%,var(--navy-glow),transparent 65%)}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 64px),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 64px);
  mask-image:radial-gradient(circle at 78% 0%,#000,transparent 72%);-webkit-mask-image:radial-gradient(circle at 78% 0%,#000,transparent 72%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,7vw,78px);line-height:.92;letter-spacing:-.03em;text-transform:uppercase}
.breadcrumb{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:14px}
.breadcrumb a:hover{color:var(--ltd-red-300)}

body.public{display:flex;flex-direction:column;min-height:100vh}
body.public main{flex:1}
body.intro-locked{overflow:hidden}

/* ---------- 13. MAINTENANCE — thème "Little Seoul" ---------- */
.maint-wrap{position:relative;min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:60px 18px;isolation:isolate}
/* Dégradé chaud crépuscule/désert par défaut — remplace le fond sombre neutre générique. */
.maint-wrap--mexico{background:
  radial-gradient(ellipse 70% 50% at 50% -8%, rgba(240,128,60,.28), transparent 62%),
  linear-gradient(180deg, #2c130c 0%, #1c0d09 55%, #100705 100%);
}
.maint-bg-layer{position:absolute;inset:0;background-image:var(--maint-bg);background-size:cover;background-position:center;filter:blur(18px) brightness(.4);transform:scale(1.1);z-index:-2}
.maint-content{max-width:640px;text-align:center;position:relative;z-index:1}
/* Guirlande papel picado en haut de la scène — bande fine pleine largeur. */
.maint-picado{position:absolute;top:0;left:0;width:100%;height:34px;z-index:2;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
/* Bloc en flux normal (pas de position:absolute) : hauteur bornée, ne peut donc jamais
   chevaucher le titre, le message ou le bouton, quelle que soit la hauteur de l'écran. */
.maint-illu{position:relative;margin:36px auto 10px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.maint-glow{position:absolute;inset:-30% -10%;border-radius:50%;background:radial-gradient(closest-side,var(--maint-color,var(--ltd-red)) 0%,transparent 72%);opacity:.18;filter:blur(6px);z-index:0}
.maint-scene{position:relative;z-index:1;width:min(380px,78vw);height:auto;display:block;opacity:.95}
.maint-particles{position:absolute;inset:-40px 0 0;overflow:visible;z-index:0}
.maint-particle{position:absolute;bottom:0;width:var(--size,3px);height:var(--size,3px);border-radius:50%;background:var(--maint-color,var(--ltd-red));opacity:0;animation:maintFloat var(--dur,8s) ease-in var(--delay,0s) infinite}
@keyframes maintFloat{0%{opacity:0;transform:translateY(0) translateX(0)}8%{opacity:.5}92%{opacity:.3}100%{opacity:0;transform:translateY(-140px) translateX(14px)}}
.maint-badge{width:76px;height:76px;border-radius:22px;margin:0 auto 22px;display:grid;place-items:center;background:var(--red-dim);color:var(--ltd-red-300);font-size:34px}
.maint-badge-glyph{line-height:1}
.maint-title{font-size:clamp(28px,5vw,46px);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:10px}
.maint-subtitle{margin:0 auto 4px;max-width:46ch}
.maint-msg{margin:0 auto;max-width:50ch}
.maint-cd{margin:26px auto 4px}
.maint-cd-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.maint-cd-cell{background:var(--panel-2,rgba(255,255,255,.05));border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:64px}
.maint-cd-cell span{display:block;font-family:var(--font-mono);font-size:22px;font-weight:700;letter-spacing:.02em}
.maint-cd-cell small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--txt-3);margin-top:2px}
.maint-cd-done{display:inline-flex;align-items:center;gap:8px;color:#5fe08f;font-weight:600}
@media(max-width:560px){.maint-cd-cell{min-width:54px;padding:8px 10px}.maint-cd-cell span{font-size:18px}}

/* ---------- BANDEAU RECRUTEMENT (accueil) ---------- */
.recruit-banner{display:block;text-decoration:none;color:inherit;transition:transform .25s var(--ease),border-color .25s}
.recruit-banner:hover{transform:translateY(-3px);border-color:var(--ltd-red)}
.recruit-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5fe08f;margin-left:4px;box-shadow:0 0 0 0 rgba(95,224,143,.6);animation:recruitLivePulse 1.8s ease-out infinite}
@keyframes recruitLivePulse{0%{box-shadow:0 0 0 0 rgba(95,224,143,.6)}100%{box-shadow:0 0 0 7px rgba(95,224,143,0)}}
.recruit-banner-perks{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.recruit-banner-perks span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt-2)}
.recruit-banner-perks svg{color:#5fe08f;flex:none}
@media(max-width:700px){.recruit-banner .row-between{flex-direction:column;align-items:flex-start;gap:16px}}

/* ---------- MENTIONS LÉGALES — technologies avec info-bulle au survol ---------- */
.tech-stack{display:flex;gap:9px;flex-wrap:wrap}
.tech-badge{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;
  background:var(--info-dim);color:#7fb0ff;border:1px solid rgba(59,130,246,.3);
  border-radius:99px;padding:6px 13px;cursor:default;
  transition:border-color .18s,background .18s;
}
.tech-badge:hover,.tech-badge:focus-visible{background:rgba(59,130,246,.24);border-color:rgba(59,130,246,.55);outline:none}
.tech-badge-tip{
  position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,4px);
  width:max-content;max-width:230px;background:var(--ink-600);color:var(--txt-2);
  font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:normal;line-height:1.45;
  padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);box-shadow:var(--shadow-2);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s var(--ease),transform .16s var(--ease);
  z-index:20;
}
.tech-badge-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink-600)}
.tech-badge:hover .tech-badge-tip,.tech-badge:focus-visible .tech-badge-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- STATIONS ESSENCE (page dédiée, niveau/prix "temps réel") ---------- */
/* Même patron que .partner-card (grille partenaires, accueil) — après plusieurs essais plus
   "spectaculaires" jugés pas assez sobres, on reste sur le langage visuel déjà en place et
   approuvé ailleurs sur le site plutôt que d'inventer un nouveau traitement. */
.station-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:6px}
.station-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--ink-800);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s var(--ease);
}
.station-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--ltd-red),transparent);opacity:0;transition:opacity .3s;
}
.station-card:hover{transform:translateY(-6px);border-color:var(--ltd-red)}
.station-card:hover::before{opacity:.9}
.station-card--featured{border-color:rgba(255,215,106,.4)}
.station-card--featured::before{background:linear-gradient(90deg,transparent,#ffd76a,transparent);opacity:.9}
.station-card-media{
  height:112px;display:flex;align-items:center;justify-content:center;background:var(--ink-700);
  color:var(--ink-500);overflow:hidden;
}
.station-card-media img{width:100%;height:100%;object-fit:cover}
.station-card-info{padding:16px 18px 18px}
.station-card-info h3{font-size:15px;text-transform:none;letter-spacing:0;margin:0;color:var(--txt)}
.station-card-price{font-family:var(--font-mono);font-weight:700;font-size:15px;white-space:nowrap;color:var(--ltd-red)}
.station-card-price small{font-family:var(--font-body);font-weight:500;font-size:10.5px;color:var(--txt-3);margin-left:2px}
.station-card-tag{
  display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ltd-red-300);background:color-mix(in srgb, var(--ltd-red) 14%, transparent);
  padding:3px 10px;border-radius:99px;margin-top:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.station-card--featured .station-card-tag{color:#f0c477;background:rgba(255,215,106,.14)}
.station-fuel{height:6px;border-radius:99px;background:var(--panel-2,rgba(255,255,255,.08));overflow:hidden;margin-top:12px}
.station-fuel-bar{height:100%;border-radius:99px;transition:width .4s var(--ease);background:#5fe08f}
.station-fuel-bar.is-mid{background:#ffb84d}
.station-fuel-bar.is-low{background:#ff6161}
.station-card-pct{font-size:11.5px;font-weight:600}
.station-card-pct.is-ok{color:#5fe08f}
.station-card-pct.is-mid{color:#ffb84d}
.station-card-pct.is-low{color:#ff6161}
.station-card-time{font-size:11.5px;color:var(--txt-3)}
@media(max-width:520px){.tech-badge-tip{max-width:180px;font-size:11.5px}}