/* ============================================================
   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}
[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(73,82,200,.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(240,196,24,.14));border:1px solid rgba(73,82,200,.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}}

/* ---------- 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(73,82,200,.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(240,196,24,.28);
  background:linear-gradient(180deg,rgba(240,196,24,.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;
}
.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}
@media(max-width:680px){.news-car-btn{display:none !important}}

/* ---------- 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)}

/* ---------- 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;flex:none;width:240px;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-role{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ltd-red-300);margin-top:6px}
.partner-card-desc{
  font-size:12.5px;color:var(--txt-2);line-height:1.5;margin-top:9px;
}
/* ---------- PLAQUES PARTENAIRES (accueil) ---------- */
/* Volontairement très différent des cartes produit/nouveauté (pas d'image plein cadre, pas de
   badge pilule, pas de bouton) : un médaillon circulaire du logo cerclé d'un halo lumineux dans
   la VRAIE couleur de marque du partenaire (--pc, posée par partnerPlaqueCard depuis brandColor
   en base), grille fixe (pas de carrousel). */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;margin-top:26px}
.partner-plaque{
  position:relative;padding:26px 16px 20px;border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(180deg,var(--ink-800),var(--ink-850));
  border:1px solid color-mix(in srgb, var(--pc) 35%, var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--pc) 12%, transparent) inset;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s var(--ease);
}
.partner-plaque:hover{
  transform:translateY(-6px);
  border-color:var(--pc);
  box-shadow:0 20px 40px -22px color-mix(in srgb, var(--pc) 70%, transparent),0 0 0 1px color-mix(in srgb, var(--pc) 25%, transparent) inset;
}
.pp-ring{
  width:88px;height:88px;margin:0 auto 14px;border-radius:50%;padding:4px;
  background:conic-gradient(from 0deg, var(--pc), color-mix(in srgb, var(--pc) 30%, transparent), var(--pc));
  transition:filter .3s;
}
.partner-plaque:hover .pp-ring{filter:brightness(1.25) saturate(1.15)}
.pp-logo{
  width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--ink-900,#0b0d10);
  display:flex;align-items:center;justify-content:center;
}
.pp-logo img{width:100%;height:100%;object-fit:cover}
.pp-logo .ph{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--pc)}
.partner-plaque h3{font-size:14.5px;text-transform:none;letter-spacing:0;margin:0 0 6px;color:var(--txt)}
.pp-sector{
  display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pc);background:color-mix(in srgb, var(--pc) 14%, transparent);
  padding:3px 10px;border-radius:99px;margin-bottom:8px;
}
.pp-owner{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;color:var(--txt-3)}
.pp-owner svg{flex:none}

/* ---------- 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}

/* ---------- 9. CARTE DES STATIONS ---------- */
.map-shell{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  background:var(--ink-850);box-shadow:var(--shadow-2);
}
.map-shell svg{display:block;width:100%;height:auto}
.map-canvas{
  background-image:radial-gradient(120% 100% at 22% 0%,rgba(73,82,200,.12),transparent 60%),url('../img/carte/carte-ville.svg');
  background-size:cover;background-position:center;
}
.map-pin{cursor:pointer;transition:transform .25s var(--ease)}
.map-pin:hover{transform:translateY(-3px)}
.map-pin .halo{animation:pinPulse 2.4s ease-out infinite;transform-origin:center}
@keyframes pinPulse{0%{r:8;opacity:.55}100%{r:26;opacity:0}}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line);background:var(--ink-800);font-size:13px;color:var(--txt-2)}
.map-legend span{display:inline-flex;align-items:center;gap:7px}

.station-card{padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--ink-800);transition:.3s var(--ease);cursor:pointer}
.station-card:hover{border-color:var(--ltd-red);transform:translateY(-4px);box-shadow:0 18px 40px -22px var(--ltd-red-glow)}
.gauge{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.gauge .g-top{display:flex;justify-content:space-between;font-size:12px;color:var(--txt-3)}

/* ---------- 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(73,82,200,.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}
.auth-box h1{font-size:30px;text-transform:uppercase;margin-bottom:8px}
.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}


/* ---------- 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(73,82,200,.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)}
@media(max-width:520px){.tech-badge-tip{max-width:180px;font-size:11.5px}}