/* Lueurs, version web. Palette et typo : DESIGN.md, spec 2026-08-02. */

@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage-var.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/fonts/spacemono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --night: #141118;
  --night-raised: #1A161F;
  --paper: #F6EFE3;
  --ink: #2A2118;
  --amber: #F2A93B;
  --muted: #8A8492;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--night);
  color: var(--paper);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Barre du haut ===== */
.topbar { padding: 22px 26px 0; max-width: 1080px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--paper); }
.brand:hover { text-decoration: none; }
.brand svg { width: 24px; height: 24px; }
.wordmark { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -.01em; }

/* ===== Héros ===== */
/* Mobile : colonne, hero-text effacé (display:contents), enfants réordonnés. */
.hero { max-width: 1080px; margin: 0 auto; padding: 26px 26px 0; display: flex; flex-direction: column; }
.hero-text { display: contents; }
.hero h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(30px, 6vw, 44px); line-height: 1.22; margin-top: 8px; order: 1; }
.pitch { font-size: 15px; opacity: .78; max-width: 400px; margin: 16px auto 24px; order: 3; text-align: center; }

.note-scene { order: 2; margin: 20px auto 0; max-width: 340px; }
.note-card {
  background: var(--paper); color: var(--ink);
  border-radius: 12px; padding: 18px 20px 13px;
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 36px rgba(242, 169, 59, .15);
}
.note-card p { font-size: 15px; }
.note-meta { display: flex; justify-content: space-between; font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .07em; font-size: 9px; color: var(--muted); margin-top: 12px; }
.note-pin { display: block; width: 38px; height: 58px; margin: -7px auto 0; }

/* ===== Badges stores ===== */
/* order:4 place les badges après la note dans le héros mobile ; justify-content centré sur mobile. */
.badges { display: flex; gap: 10px; flex-wrap: wrap; order: 4; justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--night-raised); border: 1px solid var(--amber);
  border-radius: 12px; padding: 10px 16px; color: var(--paper);
}
.badge:hover { text-decoration: none; }
.badge-icon { width: 20px; height: 20px; fill: var(--amber); flex: none; }
.badge-lines { display: flex; flex-direction: column; text-align: left; }
.badge-over { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .08em; font-size: 8px; color: var(--amber); }
.badge-store { font-weight: 700; font-size: 14px; line-height: 1.2; }

/* ===== Comment ça marche ===== */
.steps-section { max-width: 1080px; margin: 64px auto 0; padding: 0 26px; }
.kicker { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .07em; font-size: 10px; font-weight: 400; color: var(--muted); }
.steps { display: flex; flex-direction: column; gap: 26px; margin-top: 22px; }
.step-label { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; color: var(--amber); }
.step h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 19px; margin: 6px 0 4px; }
.step p:last-child { font-size: 13.5px; opacity: .75; }

/* ===== La promesse ===== */
.promise { max-width: 1080px; margin: 56px auto 0; padding: 0 26px; }
.promise h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 21px; color: var(--amber); }
.promise p { font-size: 13.5px; opacity: .75; margin-top: 10px; max-width: 560px; }

/* ===== Rappel stores ===== */
.stores { display: flex; justify-content: center; margin-top: 56px; padding: 0 26px; }

/* ===== Pied de page ===== */
.footer { margin-top: 56px; border-top: 1px solid rgba(246, 239, 227, .08); padding: 22px 26px 28px; max-width: 1080px; margin-left: auto; margin-right: auto; }
.footer .brand svg { width: 16px; height: 16px; }
.footer .wordmark { font-size: 14px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; }
.social { display: flex; gap: 12px; }
.social svg { width: 17px; height: 17px; fill: var(--muted); }
.social a:hover svg { fill: var(--paper); }
.footer-links, .footer-langs { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .07em; font-size: 9.5px; color: var(--muted); margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.footer-links a, .footer-langs a { color: var(--muted); }
.footer-links a:hover, .footer-langs a:hover { color: var(--paper); text-decoration: none; }
.footer-sep { width: 1px; height: 11px; background: rgba(246, 239, 227, .22); align-self: center; }
.footer-langs strong { color: var(--paper); font-weight: 400; }
.copyright { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .07em; font-size: 9px; color: var(--muted); opacity: .6; margin-top: 12px; }

/* ===== Pages légales ===== */
.legal { max-width: 42rem; margin: 0 auto; padding: 8px 26px 48px; }
.legal h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.6rem; margin-top: 24px; }
.legal h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.1rem; margin-top: 2rem; }
.legal p, .legal li { font-size: 14.5px; opacity: .88; }
.legal ul { padding-left: 1.2rem; }
.legal footer { margin-top: 3rem; font-size: .85rem; opacity: .7; }

/* ===== Page campagne ===== */
/* L'étiquette vivante du héros : point ambré qui respire (coupé si
   prefers-reduced-motion). */
.campaign-live { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; color: var(--amber); }
.campaign-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px 2px rgba(242, 169, 59, .4); animation: campaign-breathe 2.6s ease-in-out infinite; }
@keyframes campaign-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .campaign-live .dot { animation: none; } }

/* Le relevé de points : carte papier signature, total à lueur douce
   (miroir de l'écran in-app), nombres d'exemple assumés faux. */
.releve { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 18px 20px 12px; transform: rotate(1.5deg); box-shadow: 0 10px 36px rgba(242, 169, 59, .15); }
.releve-total { position: relative; text-align: center; padding: 14px 0 8px; }
.releve-total .halo { position: absolute; inset: -14px 0; background: radial-gradient(closest-side, rgba(242, 169, 59, .3), rgba(242, 169, 59, 0)); pointer-events: none; }
.releve-total strong { position: relative; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 42px; letter-spacing: -.01em; line-height: 1.1; }
.releve-total .releve-unit { position: relative; display: block; font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; color: var(--muted); margin-top: 2px; }
.releve-rows { margin-top: 12px; border-top: 1px solid rgba(42, 33, 24, .14); }
.releve-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid rgba(42, 33, 24, .08); font-size: 13px; }
.releve-row b { font-weight: 700; }
.releve-meta { display: flex; justify-content: space-between; gap: 12px; font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .07em; font-size: 9px; color: var(--muted); margin-top: 10px; white-space: nowrap; }

/* Comment ça marche : section calme. */
.campaign-how { max-width: 1080px; margin: 56px auto 0; padding: 0 26px; }
.campaign-how p { font-size: 14.5px; opacity: .82; max-width: 560px; margin-top: 12px; }

/* La promesse vit dans le héros (h1 + pitch) : l'engagement en gras. */
.hero .pitch strong { font-weight: 700; opacity: 1; }

/* ===== Grand écran (bascule 720 px) ===== */
@media (min-width: 720px) {
  .topbar { padding-top: 40px; }
  /* Bureau : rétablit la grille 2 colonnes ; annule le reorder mobile. */
  .hero { display: flex; flex-direction: row; align-items: center; gap: 40px; padding-top: 18px; }
  .hero-text { display: block; flex: 1.15; }
  .note-scene { flex: .85; margin: 20px auto 0; }
  .pitch { text-align: left; margin-left: 0; margin-right: 0; }
  /* Réaligne les badges du héros à gauche sans toucher aux badges .stores. */
  .hero .badges { justify-content: flex-start; }
  .steps { flex-direction: row; gap: 36px; }
  .step { flex: 1; }
  .promise { text-align: center; }
  .promise p { margin-left: auto; margin-right: auto; }
  /* Pied de page sur une ligne (maquette bureau validée). */
  .footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
  .footer-links, .footer-langs, .copyright { margin-top: 0; }
  /* footer-top sans largeur explicite : space-between inopérant, on force un gap. */
  .footer-top { gap: 20px; }
}

.fineprint { max-width: 720px; margin: 40px auto 0; padding: 0 20px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.fineprint a { color: var(--muted); text-decoration: underline; }