/* Passenger Map — vitrine (static, prerendered). Fonts self-hosted in /fonts. */

/* ---- @font-face (self-hosted subset: Inter + Space Grotesk, latin/latin-ext) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- design tokens ---- */
/* ============================================================
   PASSENGER MAP — Colors & Type tokens
   Travel planning & management app (B2C tourisme / loisirs)
   Source of truth: packages/passenger-front/src/index.css
   + tailwind.config.ts  (Treyone/passenger-mono)
   ------------------------------------------------------------
   Light theme is the default. A `.dark` scope mirrors every
   token for dark mode. Activity-type colors are deliberately
   "tranchantes" (sharp) so each kind of activity is instantly
   identifiable against the calm slate-blue base palette.
   ============================================================ */

:root {
  /* ---- Core surfaces & text (HSL channels, used as hsl(var(--x))) ---- */
  --background: 220 14% 92%;        /* cool light slate canvas        */
  --foreground: 220 25% 8%;         /* near-black ink                 */
  --card: 0 0% 100%;
  --card-foreground: 220 25% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 20% 10%;
  --muted: 220 14% 94%;
  --muted-foreground: 220 10% 42%;
  --border: 220 13% 90%;
  --input: 220 13% 87%;
  --ring: 220 72% 50%;

  /* ---- Brand / semantic accents ---- */
  --primary: 220 72% 50%;           /* confident azure blue           */
  --primary-foreground: 0 0% 100%;
  --secondary: 160 30% 42%;         /* muted teal-green               */
  --secondary-foreground: 0 0% 100%;
  --accent: 36 80% 52%;             /* warm amber                     */
  --accent-foreground: 220 20% 10%;
  --destructive: 0 72% 51%;         /* red                            */
  --destructive-foreground: 0 0% 100%;

  /* ---- Activity-type colors (the "sharp" identifiers) ---- */
  --hosting: 220 70% 50%;           /* lodging  — blue                */
  --travel-type: 280 60% 50%;       /* transport — purple             */
  --visit: 160 50% 40%;             /* visit    — green               */
  --idea: 36 80% 52%;               /* idea / envie — amber           */
  --expense: 347 61% 61%;           /* expense  — rose                */

  /* ---- Itinerary palette (hex, used directly) ---- */
  --itin-hebergement:      #2E7BE5;
  --itin-hebergement-tint: #E5EFFC;
  --itin-transport:        #8B6FE8;
  --itin-transport-tint:   #EEE8FC;
  --itin-visite:           #3FA876;
  --itin-visite-tint:      #DDF1E6;

  /* ---- Expense / "warm paper" palette (hex) ---- */
  --ink-1:          #1A1A1F;
  --ink-2:          #55555E;
  --ink-3:          #8E8E96;
  --surface:        #FFFFFF;
  --surface-2:      #F7F4EE;        /* warm paper                     */
  --line:           rgba(120, 110, 95, 0.16);
  --type-bg:        #2A2A33;
  --type-fg:        #FFFFFF;
  --status-paid:    #3FA876;
  --status-paid-bg: #DDF1E6;
  --status-due:     #E68A3C;
  --status-due-bg:  #FAEAD7;
  --brand:          #D85F7A;        /* warm rose brand mark           */

  /* ---- Sidebar ---- */
  --sidebar-background: 220 14% 96%;
  --sidebar-foreground: 220 20% 10%;
  --sidebar-primary: 220 72% 50%;
  --sidebar-accent: 220 14% 92%;
  --sidebar-border: 220 13% 90%;

  /* ---- Radius scale ---- */
  --radius: 0.625rem;               /* 10px — lg                      */
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* ---- Type families ---- */
  --font-display:  'Space Grotesk', sans-serif;   /* h1–h4, brand     */
  --font-body:     'Inter', sans-serif;           /* body / UI        */
  --font-syne:     'Syne', sans-serif;            /* expressive       */
  --font-jakarta:  'Plus Jakarta Sans', sans-serif;
  --font-bricolage:'Bricolage Grotesque', sans-serif;
  --font-serif:    'DM Serif Display', serif;     /* editorial accent */
}

.dark {
  --background: 220 20% 5%;
  --foreground: 220 14% 95%;
  --card: 220 16% 12%;
  --card-foreground: 220 14% 95%;
  --popover: 220 16% 10%;
  --popover-foreground: 220 14% 92%;
  --muted: 220 14% 15%;
  --muted-foreground: 220 10% 50%;
  --border: 220 14% 18%;
  --input: 220 14% 20%;
  --ring: 220 72% 58%;

  --primary: 220 72% 58%;
  --primary-foreground: 220 18% 7%;
  --secondary: 160 30% 38%;
  --secondary-foreground: 220 14% 92%;
  --accent: 36 70% 48%;
  --accent-foreground: 220 14% 92%;
  --destructive: 0 72% 45%;

  --hosting: 220 70% 60%;
  --travel-type: 280 60% 65%;
  --visit: 160 50% 55%;
  --idea: 36 80% 60%;
  --expense: 347 61% 68%;

  --itin-hebergement:      #5A9AF0;
  --itin-hebergement-tint: #1A2A40;
  --itin-transport:        #A98EEF;
  --itin-transport-tint:   #24193A;
  --itin-visite:           #5BC492;
  --itin-visite-tint:      #16312A;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Headings are Space Grotesk, semibold, tight tracking.
   Body is Inter. Numerals in money contexts use tabular-nums.
   ============================================================ */

body {
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

h1 { font-size: 1.875rem; line-height: 1.15; font-weight: 700; }  /* 30px page title */
h2 { font-size: 1.25rem;  line-height: 1.25; }                     /* 20px section    */
h3 { font-size: 1.125rem; line-height: 1.3;  }                     /* 18px card title */
h4 { font-size: 1rem;     line-height: 1.35; }

p  { font-size: 0.875rem; line-height: 1.5; }                      /* 14px body       */

.text-eyebrow {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
}

.text-muted { color: hsl(var(--muted-foreground)); }

code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.8125rem;
}

/* ---- components & layout ---- */
*, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; overflow-x: hidden; }
  ::selection { background: hsl(var(--primary) / .18); }

  /* ---- Glass utilities (the signature) ---- */
  .glass-card {
    background: hsl(var(--card) / .55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid hsl(var(--border));
  }
  .glass-panel {
    background: hsl(var(--card) / .75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid hsl(var(--border));
  }

  /* ---- Layout ---- */
  .container { max-width: 1200px; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; }
  .vitrine-root { position: relative; min-height: 100vh; }

  /* ---- Decorative drifting blobs (auth screen vocabulary) ---- */
  .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; z-index: 0; }
  @keyframes blob-drift {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(40px,-30px) scale(1.08); }
    66%  { transform: translate(-30px,25px) scale(.96); }
    100% { transform: translate(0,0) scale(1); }
  }
  .blob-anim { animation: blob-drift 16s ease-in-out infinite; }

  /* ---- Buttons ---- */
  .btn { font-family: var(--font-body); font-weight: 600; font-size: .9375rem; border: none; cursor: pointer;
    border-radius: var(--radius); padding: .75rem 1.4rem; display: inline-flex; align-items: center; gap: .5rem;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease; text-decoration: none; }
  .btn:active { transform: scale(.95); }
  .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 6px 20px hsl(var(--primary) / .28); }
  .btn-primary:hover { background: hsl(var(--primary) / .9); transform: translateY(-1px); box-shadow: 0 10px 28px hsl(var(--primary) / .34); }
  .btn-ghost { background: hsl(var(--card) / .6); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
  .btn-ghost:hover { background: hsl(var(--card)); transform: translateY(-1px); }
  .btn-lg { padding: .9rem 1.7rem; font-size: 1rem; }

  /* ---- Pills / eyebrow ---- */
  .pill { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .35rem .8rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .01em; }
  .eyebrow { font-family: var(--font-body); font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .14em; color: hsl(var(--primary)); }

  /* ---- Section rhythm ---- */
  section { position: relative; z-index: 1; }
  .section-pad { padding-top: 6.5rem; padding-bottom: 6.5rem; }

  /* ---- Display type helpers ---- */
  .display { font-family: var(--vitrine-display, var(--font-display)); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; color: hsl(var(--foreground)); }
  .lede { font-family: var(--font-body); font-size: 1.18rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }

  /* ---- Sticky header ---- */
  .site-header { position: sticky; top: 0; z-index: 50; background: hsl(var(--background) / .8);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border) / .7); }

  /* ---- Reveal on scroll (progressive enhancement: visible by default) ---- */
  @keyframes revealIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .reveal { opacity: 1; }
  .reveal.reveal-anim { animation: revealIn .6s ease both; }
  @media (prefers-reduced-motion: reduce) { .reveal.reveal-anim { animation: none; } .blob-anim { animation: none; } }

  /* ---- App mockup ---- */
  .mock { font-family: var(--font-body); color: hsl(var(--foreground)); border-radius: 18px; overflow: hidden;
    background: hsl(var(--background)); border: 1px solid hsl(var(--border)); box-shadow: 0 40px 90px -30px hsl(220 40% 20% / .45), 0 8px 24px hsl(220 30% 20% / .12); }
  .mock-hatch { background-image: repeating-linear-gradient(45deg, hsl(var(--expense) / .5) 0 2px, transparent 2px 6px);
    border: 1px solid hsl(var(--expense) / .35); }
  .tnum { font-variant-numeric: tabular-nums; }

  .feat-card { transition: transform .25s ease, box-shadow .25s ease; border-radius: 16px; }
  .feat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px hsl(220 40% 25% / .35); }

  a.navlink { color: hsl(var(--muted-foreground)); text-decoration: none; font-size: .9rem; font-weight: 500; transition: color .15s ease; }
  a.navlink:hover { color: hsl(var(--foreground)); }

  /* ---- Responsive ---- */
  @media (max-width: 1023px) {
    .hero-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
    .hero-grid .reveal:last-child { justify-content: center !important; }
  }
  @media (max-width: 860px) {
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }
    .section-pad { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .feat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .site-header nav { display: none !important; }
    .showcase-pills { gap: 1.25rem !important; }
  }
  @media (max-width: 560px) {
    .feat-grid { grid-template-columns: 1fr !important; }
    .header-actions .navlink { display: none; }
  }

/* Static build: content is visible without JS (no scroll-reveal). */
.reveal { opacity: 1 !important; transform: none !important; }