/* Pablito Studio — DA « Illegal Yellow » (réf. Pablito Studio DA.dc.html) */

:root {
  --acc: #FED213;
  --bg: #0B0B0A;
  --bg-alt: #090908;
  --panel: #101010;
  --asphalt: #1C1B18;
  --text: #EDEBE4;
  --muted: #A8A59A;
  --dim: #8A877C;
  --faint: #6A675E;
  --ghost: #4A4842;
  --line: rgba(237, 235, 228, 0.12);
  --line-soft: rgba(237, 235, 228, 0.05);
  --tick: 26s;
}

* { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--text); }
/* Vitrine, pas un document : cliquer un titre ne doit ni le surligner ni
   afficher un curseur de saisie, ce qui laissait croire à un texte éditable.
   Le surlignage jaune reste sur les champs de saisie, où il a un sens. */
body {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  cursor: auto;
}
input::selection, textarea::selection { background: var(--acc); color: var(--bg); }

a, button, summary, label, [role="button"] { cursor: pointer; }

/* On retire un repère visuel à la souris, pas l'accessibilité au clavier. */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-family: 'Archivo Black', Helvetica, sans-serif; text-transform: uppercase; }

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blip { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.15; } }

/* ---- Progress bar ---- */
.progress-track {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(237, 235, 228, 0.08); z-index: 90;
}
.progress-track > div { height: 100%; width: 0%; background: var(--acc); }

/* ---- Nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 40px;
  /* Etat par defaut (plein) : conserve pour les pages sans scrollytelling (panier,
     partenaires...). Sur la home, site.js pilote l'opacite du fond au scroll :
     transparent tout en haut -> plein avant la fin du premier ecran. */
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-logo { display: block; height: 48px; width: auto; }
.nav-links {
  display: flex; gap: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.nav-links a { color: #FFFFFF; }

/* ---- Hero ---- */
.hero {
  position: relative; min-height: 100vh;
  display: grid; grid-template-rows: 1fr auto;
  padding: 120px 40px 0; overflow: hidden;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 78% 12%, rgba(255, 212, 0, 0.10) 0%, rgba(255, 212, 0, 0) 55%);
}
.hero-grid {
  position: absolute; inset: 120px 40px 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(12, 1fr);
}
.hero-grid div { border-left: 1px solid var(--line-soft); }
.hero-grid div:last-child { border-right: 1px solid var(--line-soft); }

.hero-inner { position: relative; display: grid; align-content: center; gap: 40px; }

.hero-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim);
}
.blip { width: 7px; height: 7px; background: var(--acc); animation: blip 2.4s steps(1) infinite; }

.hero h1 {
  font-size: clamp(48px, 10vw, 168px);
  line-height: 0.84; letter-spacing: -0.045em; color: var(--text);
}
.hero h1 span { color: var(--acc); }

.hero-bottom {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: end;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.hero-bottom p { margin: 0; max-width: 42ch; font-size: 17px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hero-bottom p s { color: var(--faint); }
.hero-tags { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); line-height: 2; }
.hero-cta { justify-self: end; }

.btn-solid {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; background: var(--acc); color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 160ms ease;
}
.btn-solid:hover { background: var(--text); color: var(--bg); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border: 1px solid var(--acc); color: var(--acc);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease;
}
.btn-outline:hover { background: var(--acc); color: var(--bg); }

.ticker-wrap {
  position: relative; margin-top: 56px;
  border-top: 1px solid var(--line);
  overflow: hidden; padding: 14px 0;
}
.ticker {
  display: flex; width: 200%;
  animation: tick var(--tick) linear infinite;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}
.ticker > span { flex: 0 0 50%; display: flex; gap: 48px; padding-right: 48px; }
.ticker .dot { color: var(--acc); }

/* ---- Sections numérotées ---- */
.section {
  padding: 140px 40px;
  border-top: 1px solid var(--line);
}
.section.alt { background: var(--bg-alt); }
.section-inner {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 64px; align-items: start;
}
.section-num { color: var(--acc); }
.section h2 {
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 0.95; letter-spacing: -0.035em;
  text-wrap: balance;
}

/* ---- Bascule ---- */
.switch-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.switch-cell { padding: 48px 40px; display: grid; gap: 18px; background: var(--bg); }
.switch-cell.now { background: var(--panel); }
.switch-name {
  font-family: 'Archivo Black', Helvetica, sans-serif;
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.03em; text-transform: uppercase;
}
.switch-cell.before .switch-name { color: var(--ghost); text-decoration: line-through; text-decoration-thickness: 3px; }
.switch-cell p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 34ch; }
.switch-cell.before p { color: var(--faint); }
.switch-cell.now p { color: var(--muted); }

/* ---- Scrollytelling ---- */
.story-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.story-visual {
  position: sticky; top: 0; height: 100vh;
  padding: 40px; display: grid; align-content: center;
}
.story-frame {
  position: relative; aspect-ratio: 4 / 3; width: 100%;
  border: 1px solid rgba(237, 235, 228, 0.14);
  overflow: hidden; background: var(--bg);
}
.story-scene {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 420ms ease;
}
.story-scene.active { opacity: 1; }
.story-scene img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9) contrast(1.05); }
.story-scene .scene-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, rgba(11, 11, 10, 0) 0%, rgba(11, 11, 10, 0.92) 70%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--acc);
}
.story-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(237, 235, 228, 0.1); }
.story-progress > div { height: 100%; width: 0%; background: var(--acc); }
.story-live {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text);
}
.story-live .blip { width: 6px; height: 6px; animation-duration: 2s; }

.story-steps { padding: 0 40px; }
.story-step {
  min-height: 100vh; display: grid; align-content: center; gap: 22px;
  opacity: 0.25; transition: opacity 380ms ease;
  border-left: 1px solid rgba(237, 235, 228, 0.1);
  padding-left: 40px;
}
.story-step.active { opacity: 1; }
.story-step .step-label { color: var(--acc); }
.story-step h3 {
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 0.98; letter-spacing: -0.035em; max-width: 16ch;
}
.story-step p { margin: 0; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* ---- Boutique ---- */
.shop-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.shop-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  padding: 8px 14px; border: 1px solid rgba(237, 235, 228, 0.2);
  background: none; color: var(--dim); cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease;
}
.chip:hover { color: var(--text); }
.chip.active { border-color: var(--acc); color: var(--acc); }

.shop-featured {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.feat-main { grid-column: span 2; background: var(--bg); display: grid; grid-template-rows: auto auto; }
.feat-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--asphalt); }
.feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-badge {
  position: absolute; top: 0; left: 0;
  background: var(--acc); color: var(--bg); padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
}
.feat-body { padding: 32px 32px 36px; display: grid; gap: 14px; justify-items: start; }
.feat-body .cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.feat-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; width: 100%; flex-wrap: wrap; }
.feat-title-row h3 { font-size: clamp(24px, 2.8vw, 40px); letter-spacing: -0.035em; }
.feat-price { font-family: 'Archivo Black', Helvetica, sans-serif; font-size: 26px; letter-spacing: -0.03em; color: var(--acc); white-space: nowrap; }
.feat-body p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--dim); }

.feat-side { background: var(--panel); display: grid; grid-template-rows: auto 1fr; }
.feat-side-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--asphalt); }
.feat-side-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-side-body { padding: 28px 28px 32px; display: grid; gap: 12px; align-content: start; justify-items: start; }
.feat-side-body .flag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acc); }
.feat-side-body h3 { font-size: 22px; line-height: 1.05; letter-spacing: -0.03em; }
.feat-side-body .price { font-family: 'Archivo Black', Helvetica, sans-serif; font-size: 22px; letter-spacing: -0.03em; color: var(--acc); }

/* Vidéo au survol : l'iframe recouvre l'image, les badges restent au-dessus */
.hover-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; border: 0;
  pointer-events: none;
  background: var(--bg);
}
.feat-badge, .card-flag { z-index: 2; }
[data-video] { cursor: pointer; }

.feat-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.feat-actions .btn-outline i, .feat-actions .btn-solid i { margin-right: 8px; font-size: 9px; }

/* Grille catalogue. Les hairlines sont portées par chaque carte (border
   right/bottom) plutôt que par un fond de conteneur : avec un nombre de
   produits qui n'est pas un multiple du nombre de colonnes, une cellule de
   grille vide ne laisse plus voir de bloc gris — il n'y a simplement rien à
   cet endroit. */
.shop-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.card {
  background: var(--bg); display: grid; grid-template-rows: auto 1fr;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.card.hidden { display: none; }

.shop-cat { display: grid; gap: 22px; }
.shop-cat.hidden, .shop-featured.hidden, [data-cat-group].hidden { display: none; }

/* ---- Partner promo ---- */
.partner-promo {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px;
  padding: 52px; border: 1px solid var(--acc);
  background: linear-gradient(135deg, rgba(254, 210, 19, 0.10), rgba(254, 210, 19, 0.015));
}
.partner-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 130% at 100% 0%, rgba(254, 210, 19, 0.20), transparent 58%);
}
.partner-body { position: relative; display: grid; gap: 20px; align-content: center; }
.partner-eyebrow { color: var(--acc); font-size: 11px; letter-spacing: 0.28em; }
.partner-body h3 {
  font-size: clamp(30px, 4.2vw, 58px); line-height: 0.92; letter-spacing: -0.03em; color: var(--text);
}
.partner-body p { color: var(--dim); max-width: 48ch; line-height: 1.55; }
.partner-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.partner-aside {
  position: relative; display: grid; gap: 22px; align-content: center;
  border-left: 1px solid rgba(254, 210, 19, 0.25); padding-left: 44px;
}
.partner-stat { display: flex; flex-direction: column; gap: 4px; }
.partner-stat .num {
  font-family: 'Archivo Black', Helvetica, sans-serif;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1; color: var(--acc);
}
.partner-stat .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
}
@media (max-width: 900px) {
  .partner-promo { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
  .partner-aside {
    border-left: 0; padding-left: 0; padding-top: 28px;
    border-top: 1px solid rgba(254, 210, 19, 0.25);
    grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px;
  }
}
@media (max-width: 560px) {
  .partner-aside { grid-auto-flow: row; }
}
.shop-cat-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.shop-cat-title {
  font-size: clamp(18px, 2.2vw, 26px); letter-spacing: -0.02em; color: var(--text);
}
.shop-cat-count {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--acc);
}
.card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--asphalt); }
.card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 320ms ease;
}
.card:hover .card-media img { transform: scale(1.04); }
.card-flag {
  position: absolute; top: 0; left: 0;
  background: var(--acc); color: var(--bg); padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
}
.card-body { padding: 22px 22px 26px; display: grid; gap: 10px; align-content: start; }
.card-body .cat { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.card-body h3 { font-size: 17px; line-height: 1.1; letter-spacing: -0.02em; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.card-price { font-family: 'Archivo Black', Helvetica, sans-serif; font-size: 18px; letter-spacing: -0.03em; color: var(--acc); white-space: nowrap; }
.card-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.card-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  border-bottom: 1px solid var(--acc); padding-bottom: 3px;
  white-space: nowrap;
}
.card-link i { margin-right: 6px; font-size: 8px; }
.card-link.video { color: var(--dim); border-bottom-color: rgba(237, 235, 228, 0.25); }
.card-link.video:hover { color: var(--text); border-bottom-color: var(--text); }

.shop-notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px;
  border-top: 1px solid var(--line); padding-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); line-height: 1.9;
}
.shop-notes strong { color: var(--text); font-weight: 400; }

/* ---- Contact ---- */
.contact {
  padding: 140px 40px 64px;
  border-top: 1px solid var(--line);
  background: var(--acc); color: var(--bg);
  display: grid; gap: 64px;
}
.contact h2 {
  font-size: clamp(44px, 11vw, 180px);
  line-height: 0.85; letter-spacing: -0.05em; color: var(--bg);
}
.contact-links {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  border-top: 2px solid var(--bg); padding-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.contact-links .label { color: rgba(11, 11, 10, 0.55); }
.contact-links a { color: var(--bg); line-height: 2; }
.contact-links a:hover { color: rgba(11, 11, 10, 0.6); }
.contact-links i { margin-right: 8px; }
.contact-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(11, 11, 10, 0.55);
}
.foot-logo {
  height: 40px; width: auto; border-radius: 8px; flex: 0 0 auto;
  margin-right: auto;
}

/* ---- Grain ---- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 95;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>');
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .nav { padding: 18px 20px; }
  .nav-links { gap: 16px; font-size: 10px; letter-spacing: 0.12em; }
  .nav-links a.optional { display: none; }

  .hero { padding: 100px 20px 0; }
  .hero-grid { inset: 100px 20px 0; }
  .hero-bottom { grid-template-columns: 1fr; gap: 24px; }
  .hero-cta { justify-self: start; }

  .section { padding: 90px 20px; }
  .section-inner { grid-template-columns: 1fr; gap: 32px; }

  .switch-grid { grid-template-columns: 1fr; }

  .story-grid { grid-template-columns: 1fr; }
  .story-visual { position: relative; height: auto; padding: 20px; }
  .story-steps { padding: 0 20px; }
  .story-step { min-height: 0; padding: 48px 0 48px 24px; }

  .shop-featured { grid-template-columns: 1fr; }
  .feat-main { grid-column: auto; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-notes { grid-template-columns: 1fr; }

  .contact { padding: 90px 20px 48px; }
  .contact-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .shop-grid { grid-template-columns: 1fr; }
  .contact-links { grid-template-columns: 1fr; }
}

/* ---- Panier & checkout ---- */

/* Le bouton d'achat remplace un lien : on neutralise le style natif. */
button.card-link {
  background: none; border: none; border-bottom: 1px solid var(--acc);
  color: var(--acc); cursor: pointer;
}
.card-actions form { display: inline-flex; }

.nav-cart { display: inline-flex; align-items: center; font-size: 13px; }

.notice {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  padding: 12px 16px; margin-bottom: 24px;
  border-left: 2px solid var(--acc);
  background: var(--panel);
}
.notice-err { border-left-color: #E0483B; }
.notice-float {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
  z-index: 90; margin: 0; max-width: min(560px, calc(100vw - 40px));
}

.page-checkout { background: var(--bg); min-height: 100vh; }
.checkout { max-width: 820px; margin: 0 auto; padding: 140px 24px 96px; }
.checkout-head { margin-bottom: 40px; }
.checkout-head h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(34px, 6vw, 64px); line-height: 0.95; text-transform: uppercase;
}
.checkout-empty { color: var(--dim); margin-bottom: 28px; }
.checkout-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.checkout-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); margin-top: 16px;
}

.cart { list-style: none; border-top: 1px solid var(--line); }
.cart-line {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cart-line img { width: 96px; height: 60px; object-fit: cover; flex-shrink: 0; }
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-body h2 { font-size: 15px; font-weight: 600; }
.cart-qty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.cart-price { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--acc); }
.cart-remove {
  background: none; border: none; color: var(--dim);
  cursor: pointer; padding: 6px; font-size: 14px;
  transition: color 160ms ease;
}
.cart-remove:hover { color: #E0483B; }

.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 24px 0 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.cart-total strong { font-size: 26px; color: var(--acc); letter-spacing: 0; }
.btn-pay { border: none; cursor: pointer; }

@media (max-width: 560px) {
  .cart-line { flex-wrap: wrap; gap: 12px; }
  .cart-line img { width: 64px; height: 42px; }
}

/* Les boutons d'achat sont des <button> dans un <form> : même rendu que les liens. */
button.btn-solid, button.btn-outline { border: none; cursor: pointer; font: inherit; }
button.btn-outline { border: 1px solid var(--acc); background: none; }
.feat-actions form { display: inline-flex; }

.cart-sums { padding-top: 20px; display: grid; gap: 8px; }
.cart-sum {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.cart-total { padding-top: 14px; border-top: 1px solid var(--line); margin-top: 12px; }

/* ---- Page partenaires ---- */
.page-inner { background: var(--bg); min-height: 100vh; }
.partners-page { max-width: 1100px; margin: 0 auto; padding: 140px 24px 96px; }
.partners-intro { color: var(--muted); max-width: 52ch; margin-top: 18px; line-height: 1.55; }

/* Chaque tuile porte son propre filet : une rangée incomplète ne laisse pas
   traîner le fond du conteneur dans les cellules vides. */
.partner-wall {
  list-style: none; padding: 0; margin: 56px 0 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.partner-tile { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.partner-tile-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 36px 24px; height: 100%;
  color: var(--text); text-align: center;
  transition: background 200ms ease;
}
a.partner-tile-inner:hover { background: var(--panel); color: var(--text); }
.partner-tile-inner img {
  width: 108px; height: 108px; object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter 200ms ease;
}
a.partner-tile-inner:hover img { filter: none; }
.partner-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
a.partner-tile-inner:hover .partner-name { color: var(--acc); }
.partner-desc { font-size: 13px; line-height: 1.5; color: var(--dim); max-width: 28ch; }

.partner-join {
  margin-top: 72px; padding-top: 40px;
  border-top: 1px solid var(--line);
}
.partner-join h2 { font-size: clamp(24px, 3.4vw, 40px); letter-spacing: -0.02em; }
.partner-join p { color: var(--muted); max-width: 48ch; margin: 16px 0 26px; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .partner-tile-inner, .partner-tile-inner img { transition: none; }
}
@media (max-width: 560px) {
  .partner-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-tile-inner { padding: 26px 14px; }
  .partner-tile-inner img { width: 76px; height: 76px; }
}

/* ---- Abonnements ---- */
/* Les abonnements sortent de la grille « libellé 200px + contenu » des autres
   sections : le bloc est centré dans la page, marges égales à gauche et à droite. */
.plans-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: 52px;
}
.plans-head { display: grid; gap: 16px; justify-items: center; text-align: center; }
.plans-head h2 { max-width: 20ch; }
.plans-head p { margin: 0; color: var(--muted); font-size: 16px; max-width: 46ch; }

.plans-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--line); border: 1px solid var(--line);
}

/* Chaque formule pose sa teinte, le reste de la carte s'y accroche. */
.plan {
  --plan: var(--muted);
  --plan-soft: rgba(237, 235, 228, 0.10);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg);
}
.plan--silver { --plan: #C9C6BD; --plan-soft: rgba(201, 198, 189, 0.13); }
.plan--gold   { --plan: var(--acc); --plan-soft: rgba(254, 210, 19, 0.16); }
.plan--diamond{ --plan: #EDEBE4; --plan-soft: rgba(237, 235, 228, 0.16); }

/* Dégradé interne : une lueur qui monte du haut de la carte, jamais un aplat. */
.plan-wash {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 68% at 50% -14%, var(--plan-soft) 0%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, rgba(237, 235, 228, 0.035) 0%, rgba(0, 0, 0, 0) 46%);
}
/* Le même grain que le reste du site, contenu dans la carte. */
.plan-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>');
}

.plan.is-featured { background: var(--panel); }
.plan.is-featured::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--plan);
}

.plan-body {
  position: relative; display: flex; flex-direction: column;
  gap: 22px; padding: 44px 34px 38px; height: 100%;
}

/* Hauteur figée : le badge de la formule mise en avant ne doit pas décaler
   vers le bas tout le contenu de sa carte par rapport aux deux autres. */
.plan-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 24px;
}
.plan-name { font-size: 11px; letter-spacing: 0.28em; color: var(--plan); }
.plan-badge {
  font-size: 9px; letter-spacing: 0.18em;
  padding: 5px 9px; background: var(--plan); color: var(--bg);
}

.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-amount {
  font-family: 'Archivo Black', Helvetica, sans-serif;
  font-size: clamp(46px, 5vw, 66px); line-height: 0.86;
  letter-spacing: -0.045em; color: var(--text);
}
.plan-unit { font-size: 10px; letter-spacing: 0.18em; color: var(--dim); }

.plan-tagline { margin: -8px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

.plan-features {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.plan-features li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; line-height: 1.45; color: var(--muted);
}
.plan-features i { color: var(--plan); font-size: 9px; margin-top: 5px; flex-shrink: 0; }

/* Le bouton colle en bas quelle que soit la longueur de la liste. La bordure
   transparente sur la variante pleine lui donne la même hauteur que la variante
   contour, sinon les trois boutons ne s'alignent pas. */
.plan-cta-form { margin-top: auto; display: flex; }
.plan-cta-form .plan-cta { margin-top: 0; width: 100%; }

.plan-cta {
  margin-top: auto; justify-content: center;
  padding: 15px 22px; font-size: 11px;
  border: 1px solid transparent;
}
.plan--gold .btn-solid { background: var(--acc); }
.plan .btn-outline { border-color: var(--plan); color: var(--plan); }
.plan .btn-outline:hover { background: var(--plan); color: var(--bg); }

@media (max-width: 1000px) {
  .plans-grid { grid-template-columns: 1fr; }
  .plan-body { padding: 34px 24px 30px; }
}

/* Mentions Asset Escrow et livraison Cfx Portal sous chaque package. */
.escrow { display: grid; gap: 5px; }
.escrow p {
  display: flex; align-items: center; gap: 7px;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
}
.escrow i { color: var(--acc); font-size: 9px; width: 10px; text-align: center; flex-shrink: 0; }
.feat-body .escrow p, .feat-side-body .escrow p { font-size: 10px; }

/* Compteur d'achats, dans le hero : c'est la première preuve sociale que voit
   un visiteur, elle doit tomber au-dessus de la ligne de flottaison. */
.hero-count {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.hero-count .num {
  font-family: 'Archivo Black', Helvetica, sans-serif;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 0.86; letter-spacing: -0.04em; color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.hero-count .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
}

/* ---- Arguments de vente ---- */

/* Deux CTA dans le hero : l'achat, et l'entrée sans risque par un pack gratuit. */
.hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.shop-head-copy { display: grid; gap: 16px; max-width: 54ch; }
.shop-head-copy p {
  margin: 0; font-size: 15px; line-height: 1.55; color: var(--dim); max-width: 48ch;
}

/* Puces reprises telles quelles des fiches Tebex : ce sont elles qui vendent. */
.feat-specs, .card-specs { list-style: none; margin: 0; padding: 0; display: grid; }
.feat-specs { gap: 8px; max-width: 46ch; }
.card-specs { gap: 6px; }
.feat-specs li, .card-specs li {
  display: grid; grid-template-columns: 14px 1fr; align-items: start; gap: 10px;
  color: var(--dim); line-height: 1.45;
}
.feat-specs li { font-size: 14px; }
.card-specs li { font-size: 12px; gap: 8px; }
.feat-specs i, .card-specs i { color: var(--acc); font-size: 9px; line-height: 1.6; }
.card-specs i { font-size: 8px; }

.card-desc, .feat-side-desc {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--dim);
}
.feat-side-desc { font-size: 13px; }

/* Preuve sociale rejouée au moment de la décision, juste avant la réassurance. */
.shop-proof {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.shop-proof .num {
  font-family: 'Archivo Black', Helvetica, sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 0.9; letter-spacing: -0.04em; color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.shop-proof .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
}

.shop-notes a { border-bottom: 1px solid rgba(254, 210, 19, 0.4); }
.shop-notes a:hover { color: var(--acc); }

/* ---- Bascule mensuel / annuel ---- */
.plan-switch {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  padding: 20px 26px; margin-bottom: 34px;
  border: 1px solid var(--line); background: var(--panel);
}
.plan-switch-copy { display: grid; gap: 8px; }
.plan-switch-eyebrow {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint);
}
.plan-switch-copy strong {
  font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--text);
}
.plan-switch-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-switch-toggle .chip { display: inline-flex; align-items: center; gap: 8px; }
.plan-switch-save {
  padding: 2px 6px; background: var(--acc); color: var(--bg);
  font-size: 9px; letter-spacing: 0.12em;
}
.plan-switch-toggle .chip.active .plan-switch-save { background: var(--acc); color: var(--bg); }

/* Prix mensuel équivalent de la formule annuelle : hors mode annuel, l'attribut
   hidden doit gagner sur le display du sélecteur. */
.plan-billing[hidden] { display: none; }
.plan-billing {
  margin: -14px 0 0; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--plan);
}


/* --- sale-price (promo strikethrough) --- */
.price-old { color: #8a8f98; text-decoration: line-through; font-size: 0.62em; font-weight: 400; margin-right: 8px; letter-spacing: 0; }
.price-now { color: var(--acc); }
.price-off { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--acc); color: #000; font-family: 'Archivo Black', Helvetica, sans-serif; font-size: 12px; letter-spacing: 0; }


/* --- promo-bar (marquee sale) --- */
.promo-bar { position: fixed; top: 0; left: 0; right: 0; height: 28px; z-index: 100; display: flex; align-items: center; overflow: hidden; background: var(--acc); color: #000; text-decoration: none; }
.promo-track { display: flex; flex: none; width: max-content; animation: promo-scroll 30s linear infinite; }
.promo-bar:hover .promo-track { animation-play-state: paused; }
.promo-group { display: flex; flex: none; }
.promo-item { display: inline-flex; align-items: center; gap: 7px; padding: 0 20px; font-family: 'Archivo Black', Helvetica, sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.promo-item i { font-size: 9px; }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.has-promo .nav { top: 28px; }
body.has-promo .progress-track { top: 28px; }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }


/* ---- Avis clients (bulles défilantes) ---- */
.reviews-section { overflow: hidden; }
.reviews-inner { max-width: 1200px; margin-inline: auto; display: grid; gap: 48px; }
.reviews-head { display: grid; gap: 18px; }
.reviews-head h2 {
  font-size: clamp(30px, 4.4vw, 64px); line-height: 0.95;
  letter-spacing: -0.035em; text-wrap: balance;
}

.reviews-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews-track {
  display: flex; width: max-content;
  animation: reviews-scroll calc(var(--rev-count, 6) * 6s) linear infinite;
}
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }
@keyframes reviews-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.review-card {
  position: relative; overflow: hidden; box-sizing: border-box;
  flex: 0 0 calc((min(100vw - 80px, 1200px) - 72px) / 3);
  margin-right: 24px;
  padding: 26px 28px 28px; border-radius: 16px;
  border: 1px solid rgba(254, 210, 19, 0.28);
  background: linear-gradient(135deg, rgba(254, 210, 19, 0.08), rgba(254, 210, 19, 0.015));
  display: grid; gap: 16px; align-content: start;
}
.review-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 100% 0%, rgba(254, 210, 19, 0.16), transparent 60%);
}
.review-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.review-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--asphalt); border: 1px solid rgba(254, 210, 19, 0.4); flex: 0 0 auto;
}
.review-avatar--fallback {
  display: grid; place-items: center;
  font-family: 'Archivo Black', Helvetica, sans-serif; font-size: 18px;
  color: var(--acc); text-transform: uppercase;
}
.review-name {
  font-family: 'Archivo Black', Helvetica, sans-serif; font-size: 15px;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--text);
  line-height: 1.1; word-break: break-word;
}
.review-body {
  position: relative; z-index: 1; margin: 0; font-size: 15px; line-height: 1.6;
  color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}

/* Peu d'avis : on centre et on fige (pas de défilement disgracieux). */
.reviews-marquee[data-static] { -webkit-mask-image: none; mask-image: none; }
.reviews-marquee[data-static] .reviews-track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; gap: 24px; }
.reviews-marquee[data-static] .review-card { margin-right: 0; }

@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
}
@media (max-width: 900px) {
  .review-card { flex-basis: calc((min(100vw - 40px, 1200px) - 48px) / 2); }
}
@media (max-width: 600px) {
  .review-card { flex-basis: calc(100vw - 64px); }
}