/* ════════════════════════════════
   PODIAK — TOKENS
   Inspiré des forêts boréales de Kodiak Island :
   ardoise profond, ambre discret, blanc glacier
════════════════════════════════ */
:root {
  --pk: #2c4a6e;           /* bleu ardoise principal */
  --pk-light: #edf2f7;     /* fond glacier */
  --pk-mid: #7a9cbf;       /* intermédiaire */
  --pk-border: #c2d4e8;    /* bordure subtile */
  --pk-amber: #c49a3c;     /* ambre ours — accent discret */
  --pk-amber-light: #fdf6e3;
}

/* ════════════════════════════════
   NAVBAR — point de marque
════════════════════════════════ */
.navbar-brand span {
  background: var(--pk-amber);
}

/* ════════════════════════════════
   BOUTON PRIMAIRE
════════════════════════════════ */
.btn-primary {
  background: var(--pk);
}

.btn-primary:hover {
  background: #1e3550;
  color: #fff;
}

/* ════════════════════════════════
   PROGRESS BAR
════════════════════════════════ */
.progress-bar {
  background: var(--pk);
}

/* ════════════════════════════════
   TOGGLE ACTIF
════════════════════════════════ */
.toggle-input:checked + .toggle-track {
  background: var(--pk);
}

/* ════════════════════════════════
   LIENS DE RETOUR & NAVIGATION
════════════════════════════════ */
.back-link:hover {
  color: var(--pk);
}

/* ════════════════════════════════
   FILE ITEM — hover accent
════════════════════════════════ */
.file-item:hover {
  border-color: var(--pk-border);
}

.file-item:hover .file-arrow {
  color: var(--pk);
}

/* ════════════════════════════════
   BOX CARD — hover accent
════════════════════════════════ */
.box-card:hover {
  border-color: var(--pk-border);
  box-shadow: 0 4px 16px rgba(44, 74, 110, 0.08);
}

/* ════════════════════════════════
   INPUTS — focus ardoise
════════════════════════════════ */
.field-input:focus,
.search-input:focus,
.password-gate-input:focus {
  border-color: var(--pk-mid);
  background: #fff;
}

/* ════════════════════════════════
   BADGE ACTIF
════════════════════════════════ */
.box-card-badge.active {
  background: var(--pk-light);
  color: var(--pk);
}

/* ════════════════════════════════
   FLASH NOTICE
════════════════════════════════ */
.flash-notice {
  background: var(--pk-light);
  border-color: var(--pk-border);
  color: #1e3550;
}

.flash-notice svg {
  color: var(--pk);
}

/* ════════════════════════════════
   CONTENT SECTION TITLE — accent left border
════════════════════════════════ */
.content-section-title {
  padding-left: 0.6rem;
  border-left: 2px solid var(--pk-amber);
}

/* ════════════════════════════════
   DROPZONE — hover
════════════════════════════════ */
.dropzone-area:hover {
  border-color: var(--pk-mid);
  color: var(--pk);
}

/* ════════════════════════════════
   PASSWORD GATE SUBMIT
════════════════════════════════ */
.password-gate-submit {
  background: var(--pk);
}

.password-gate-submit:hover {
  background: #1e3550;
}

/* ════════════════════════════════
   TRUST BAR — remplace terracotta
════════════════════════════════ */
.trust-bar {
  background: var(--pk-light);
  border-bottom: 1px solid var(--pk-border);
}

.trust-item {
  color: #2c4a6e;
}

.trust-item svg {
  color: var(--pk-amber);
}

/* ════════════════════════════════
   EXPECTATIONS
════════════════════════════════ */
.expectation-upload-btn {
  color: var(--pk);
  background: var(--pk-light);
  border-color: var(--pk-border);
}

.expectation-upload-btn:hover {
  background: var(--pk-border);
}

.expectation-pending:hover {
  border-color: var(--pk-border);
}

.btn-add-expectation {
  color: var(--pk-amber);
}

.btn-add-expectation:hover {
  color: #a07c28;
}

/* ════════════════════════════════
   LANDING — surcharge tokens
════════════════════════════════ */
.lp-hero-title-accent {
  color: var(--pk-amber);
}

.lp-section-label {
  color: var(--pk-amber);
}

.lp-hero-label {
  color: var(--pk-amber);
}

.lp-btn-primary {
  background: var(--pk);
}

.lp-btn-primary:hover {
  background: #1e3550;
}

.lp-step-number {
  color: var(--pk-amber);
  background: var(--pk-amber-light);
  border-color: #e8d9a8;
}

.lp-feature-icon {
  background: var(--pk-light);
  color: var(--pk-amber);
}

.lp-feature:hover {
  border-color: var(--pk-border);
  box-shadow: 0 4px 16px rgba(44, 74, 110, 0.06);
}

.lp-mockup-section {
  border-left-color: var(--pk-amber);
}

.lp-exp-check {
  background: var(--pk);
}

.lp-exp-btn {
  color: var(--pk);
  background: var(--pk-light);
  border-color: var(--pk-border);
}

.lp-mockup-glow {
  background: radial-gradient(circle, rgba(44, 74, 110, 0.08) 0%, transparent 70%);
}

.lp-footer-brand span {
  background: var(--pk-amber);
}

/* ════════════════════════════════
   PRICING — surcharge tokens
════════════════════════════════ */
.pricing-page-current-badge {
  color: var(--pk);
  background: var(--pk-light);
  border-color: var(--pk-border);
}

.pricing-page-card-current {
  border-color: var(--pk-border);
  background: var(--pk-light);
}

.pricing-page-current-label {
  color: var(--pk);
}

.lp-pricing-featured {
  border-color: var(--pk);
}

.lp-pricing-popular,
.pricing-page-popular {
  background: var(--pk);
}

/* ════════════════════════════════
   PODIAK — TYPOGRAPHIE
   
   Display : Cormorant Garamond
   → Élégant, héraldique, évoque l'ours 
     stylisé et la robustesse nordique.
     Utilisé pour les grands titres landing.
   
   UI : Plus Jakarta Sans
   → Géométrique, lisible, B2B sérieux.
     Remplace Inter partout dans l'app.
   
   Mono : JetBrains Mono
   → Pour les slugs, codes, métadonnées.
════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;0,700;1,300;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Surcharge variables Bulma ── */
:root {
  --bulma-family-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bulma-family-secondary: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bulma-family-code: 'JetBrains Mono', 'Inconsolata', monospace;
}

/* ── Base body ── */
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Display — grands titres landing ── */
.lp-hero-title,
.lp-section-title,
.lp-cta-title,
.pricing-faq-title,
.lp-pricing-price,
.pricing-page-amount {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Slugs, remote keys, métadonnées techniques ── */
.file-mimetype,
.upload-mimetype,
.box-card-badge,
code,
pre {
  font-family: 'JetBrains Mono', monospace;
}

/* ── Ajustements typographiques fins ── */

/* Jakarta Sans est légèrement plus dense qu'Inter — on desserre un peu */
body {
  letter-spacing: -0.01em;
}

/* Les titres Cormorant bénéficient d'un tracking négatif marqué */
.lp-hero-title {
  letter-spacing: -0.03em;
}

.lp-section-title {
  letter-spacing: -0.025em;
}

/* Les labels uppercase respirent mieux */
.lp-section-label,
.lp-hero-label,
.content-section-title,
.form-section-label,
.box-label,
.box-owner-label {
  letter-spacing: 0.1em;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Prix — Cormorant en chiffres est particulièrement élégant */
.pricing-page-amount,
.lp-pricing-price .pricing-amount {
  font-variant-numeric: oldstyle-nums;
}